The most creative part of the enterprise application lifecycle revolves around the user interface design. Your goal as an enterprise application developer is to create a user interface that is intuitive, consistent, and easy to use. User interface design requires a thorough understanding of the tools you have available. Thankfully, Ext JS 4 has a comprehensive range of widgets that cover the core functionality required for any enterprise application. If you have not already visited the examples page, then take some time now to become familiar with the full range of Ext JS 4 components at http://docs.sencha.com/extjs/4.2.2/#!/example.
This chapter will focus on building the logon and user administration interfaces. We will develop a set of view components and wire them together with controllers to perform the following:
- Log on to the application
- Display the main application viewport
- Provide a user maintenance interface
The user maintenance interface will introduce model persistence and validation properties that are used for CRUD operations. We have quite a bit to do, so let's start by examining the application layouts and workflow.
The application starts by displaying the logon window. Without a successful logon you will be unable to reach the main application viewport. The logon window has a very simple design as shown in the following screenshot:
A successful logon will be displayed on the welcome screen as shown in the following screenshot:
The welcome screen has a number of buttons in the header dependent on your permissions. A normal user will only see the Task Logs button and the Logoff button. An admin user will see the additional 3T Admin and Users buttons. We will leave the 3T Admin and Task Log modules for the subsequent chapters.
The user administration interface is based on the most common design pattern in modern enterprise applications. This layout displays a list of users in the left-hand side panel and the user details in the right-hand side panel:
Each of these screen designs has icons and a logo that are not part of the Ext JS framework. The code in the following sections will define the appropriate styles but you will need to include the required resources to achieve the same look and feel. The full source code including resources can be downloaded from this book's website.
One of the hardest decisions to make when implementing wireframes and UI mockups is how to split up the view. Consider our user maintenance screen as shown in the following screenshot:
How many separate views should we create? If we create too many views, they become difficult to manage. If there are too few views, we lose flexibility. Striking the right balance comes only with experience. We tend to encourage a middle-road approach based on logical regions within the layout itself. The previous design, for example, could be split into the following view components:
This is the structure we will be implementing. However, we could easily implement the following design:
The second version would use a single view to encapsulate the user grid, form, and toolbar. The resulting ManageUsers.js file would be approximately 200 lines long; not a large file by any stretch of the imagination. From a functional perspective there would be no difference between the two designs. However, the first approach gives us more flexibility. We can easily rearrange the views on the page or refactor the interface without much effort (for example, moving UserForm to a pop-up window and allowing the user list to fill the entire width of the screen). This would not be as easy with the second design version.
When in doubt, you should err on the side of simplicity. Complex views with many hundreds or even thousands of lines of code should be avoided at all costs. Think of your views as discrete objects with specific purposes and keep them simple.