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
- Use ExtJS as the presentation layer
-
Use ExtJS’s AJAX requests as the way to “talk” to the server
-
Be simple enough that it wouldn’t take a long time to build
-
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
-
Browsing a collection of articles stored in a knowledge base repository
-
Creation, edition or deletion of articles (any user can view, create, edit and delete any articles),
-
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
Articles Browser layout
Article Editor 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.