The application that we are going to develop throughout this book is very common to other web systems that you are probably used to implementing. We will implement a Video Manager Store (that is why the use of the Sakila sample database). Some of the features of the application are the security management (able to manage users and their permissions within the application), manage Actors, Films, Inventory, and Rental Information.
Ext JS will help us to achieve our goal. Ext JS provides beautiful components, which make the final user's eye shine when looking at a beautiful application with components that are intuitive and user friendly, and for us developers it provides a complete architecture, the possibility to reuse components (and decrease our work), and a very complete data package that makes easier to make connections to the server side and send and retrieve information.
We will divide the application in modules, and each module will be responsible for some features of the application. In each chapter of this book, we will implement one of the modules.
The application is composed of:
A splash screen (so the user does not need to see a blank screen while the application is still launching)
A login screen
A main screen
User control management
MySQL table management (for categories and combobox values)
Content management control
An e-mail client module
For each of the modules and screens mentioned above, we will create mockups so we can plan how the application will work (for example, will it have a menu, will we open the menu items in a window or center of the screen or use a tab panel?).
When we first load the application, it can take some time until the application has everything that is required loaded prior its execution. If we do not do anything, the user will see a blank page, which is a little bit boring.
Our application will have a splash screen so the user does not need to see a blank page while the application is still loading the required files and classes prior its initialization.
After the application is fully loaded, the first screen the user will see is the Login screen. The user will be able to enter the UserName and Password. There is also a multilingual combobox where the user can choose the language of the system. Then, we have the Cancel and Submit buttons:
The general idea of the application is to have a main screen that will be organized using the border layout. In the center region, we will have a tab panel, and each tab will represent a screen of the application (each screen will have its own layout); only the first tab item will not be closable (the Home tab). On the north region we will have a header with the name of the application (Video Store Manager), the multi lingual combobox (in case the user wants to change the current language of the application), and a Logout button. On the south region we will have the footer with a copyright message (or it can be the name of the company or developer that implemented the project). And on the east region we will have a dynamic menu (we will have user control management). The menu will be implemented using accordion panels (for each module) and in each panel we will use a tree to list the menu options of each module.
The main screen will look something like the following mockup:
If we try to translate into the previous mockup everything that we explained in the beginning of this topic, we will see the following diagram with the layout regions that we will use in the main screen:
In user control management, the user will have access to create new users, new groups, and assign new roles to users. The user will be able to control the system permissions (which user can see which modules in the system).
Every system has options that fit into the Categories category, such as film categories, film language, combobox options, and so on. For these tables, we need to provide all CRUD options and also filter options. The screens from this module will be very similar to the Edit table data option from MySQL Workbench.
The user will be able to edit the data in the rows of the grid.
In this module the user will be able to see and edit the core information from the system. As most of the database tables we will be handling in this module have relationship with other tables, the editing of the information will be more complex involving master-detail information. Usually, we will present the information to the user in a Grid panel and the editing of the information will be made in a Form panel that is inside a window.
It is also very important to remember that most of the screens from a module will have similar capabilities, and as we are going to build an application with a lot of screens, it is important to design the system to be able to reuse as much code as possible With this you can easily maintain and add features and capabilities to the system.
When you click on New or Edit, a new window will open to edit the information as shown in the following screenshot:
In this module we will design an e-mail client built with Ext JS. This is important because it demonstrates that we can build anything with Ext JS, not only CRUD screens. In this module we will implement on the client-side part of an e-mail client, meaning only the screens. We will not implement the sending/receiving e-mail code (which would be the server-side code).
