MiamiCoder

I just updated my sample end-to-end ExtJS application. As a reminder, I had defined just a few usage scenarios that would keep the application at a very basic level

1. Browsing a collection of articles stored in a knowledge base repository
2. Creation, edition or deletion of articles (any user can view, create, edit and delete any articles),
3. View an article. The article’s visible attributes are
   • Title
   • Body
   • Tags, as a way to connect the article to specific topics
   • Author’s name
   • Date published

What’s new

The main goal for this release was to switch to a SQL Server-based articles repository. As you can recall from Part 1, the articles were being maintained in a file.

The original building blocks 

 

 

Our building blocks after the update

What’s next

These are the changes I think I will be making in the future

• Add pagination capabilities to the “articles list” GridPanel
• Move string to resources file so it’s easier to localize the application
• Create user extensions for the main components
  

Downloads

Download the source code for this article from the Downloads page.

Important: Remember to open your web.config file and enter the correct values for your database connection string before running the sample.

 

As a way to learn ExtJS, I decided to put together a sample web application whose construction details I will share with you in this and upcoming posts.

Requirements

My first step was to decide what kind of application to build. In the interest of learning ExtJS and at the same time building something simple and realistic, I established these as my main goals for the sample

1. Use ExtJS as the presentation layer
2. Use ExtJS’s AJAX requests as the way to “talk” to the server
3. Be simple enough that it wouldn’t take a long time to build
4. Be as close to a real-world application as possible without sacrificing items 1, 2 and 3

In terms of the type of application, I settled for a simple Knowledge Base System. I defined just a few usage scenarios that would keep it at a very basic level

1. Browsing a collection of articles stored in a knowledge base repository
2. Creation, edition or deletion of articles (any user can view, create, edit and delete any articles),
3. View an article. The article’s visible attributes are
   • Title
   • Body
   • Tags, as a way to connect the article to specific topics
   • Author’s name
   • Date published

These requirements are a good foundation to build upon later. I will revisit them in the future in order to bring the sample closer to a real-life system.

Having a good idea about the functional requirements and client-side technology choices, the next step was to decide how things were going to be on the server side. To channel all communications with my web client I decided to use a .NET http handler. For the articles repository, a binary file would go very well with my simplicity and short-construction-time requirements. Any data access and business logic would be placed inside class libraries.

Putting these building blocks in a diagram yields something like this

 

User Interface

Time to move on and take a stab at the layout of the web page. How’s is a user to interact with our Knowledge Base? I decided to use this familiar layout

 

 

The Articles Browser has a GridPanel that displays the list of articles in the knowledge base, an “article viewer” area where the properties of the selected article are shown, a TreePanel that displays the existing tags together with a count of articles that contain them, and an “article editor” window that allows for creating or editing articles.

Screenshots

   

What’s next

These are the changes I will be making in the future

• Add pagination capabilities to the “articles list” GridPanel
• Switch to a database-based model for storage of the articles
• Move string to resources file so it’s easier to localize the application
• Create user extensions for the main components
  

Downloads

Download the source code for this article from the Downloads page.

 

This is a sample ExtJS layout with three collapsible panels. Two of the panels can be shown or hidden via toolbar buttons. You are welcome to use the code in your applications without restrictions.

See how it works.

Download the source code for this sample from the Downloads page.