It is now time to enable our controllers and test the functionality. Update the Application.js file as displayed in the following code:

Ext.define('TTT.Application', {
    name: 'TTT',
    extend: 'Ext.app.Application',
    requires: ['TTT.view.Viewport', 'TTT.view.LogonWindow'],
    models: ['User'],
    controllers: ['MainController', 'UserController'],
    stores: ['User'],
    init: function(application){
        TTT.URL_PREFIX = 'ttt/';
        Ext.Ajax.on('beforerequest', function(conn, options, eOpts){
            options.url = TTT.URL_PREFIX + options.url;
        });        
    },
    launch: function() {
        var me = this;
        TTT.console = function(output) {
            if (typeof console !== 'undefined') {
                console.info(output);
            }
        };
        me.logonWindow = Ext.create('TTT.view.LogonWindow'),
        me.logonWindow.show();
    },
    doAfterLogon: function(userObj) {
        TTT.console(userObj);
        var me = this;
        me.getUser = function() {
            return userObj;
        };
        me.isAdmin = function() {
            return userObj.adminRole === 'Y';
        };
        Ext.create('TTT.view.Viewport'),
        me.logonWindow.hide();
    }
});

The Application.js represents the entire application and defines all components bundled in the application (models, stores, and controllers). Note that views are not listed here as they are managed by the controllers directly.

We have defined a requires array containing the TTT.view.LogonWindow and TTT.view.Viewport classes. Although this is strictly not essential, as these definitions also reside in the appropriate controllers, it is considered best practice to always include requires entries for all Ext.create() function calls in the class. We create both the TTT.view.LogonWindow and TTT.view.Viewport using Ext.create(), so have included these in the requires list.

Our controllers array contains the MainController and UserController as expected. We have also added the User model as this is the only model we currently need. Likewise the User store has been added to the stores array.

The init function is a template method that is called when the application boots. We have added code to the Ext.Ajax beforerequest event to prefix all URLs with the servlet path configured in the com.gieman.tttracker.web.WebApp.getServletMappings() method; this is shown in the following code:

protected String[] getServletMappings() {
  return new String[]{
    "/ttt/*"
  };
}

The ttt/ prefix is added to each Ext.Ajax request URL to ensure the correct mapping to the request handling layer. Without this beforerequest event code each URL would need to be prefixed with ttt as we have already coded in the User model api, the User store URL, and the Ajax.request URLs for logon actions in the MainController. We can now omit the ttt/ prefix in all URLs that access servlet resources. The User model api can now be changed to the following code:

api:{
  create: 'user/store.json',
  read: 'user/find.json',
  update: 'user/store.json',
  destroy: 'user/remove.json'
}

In a similar way we can now remove the ttt/ prefix from the User store and MainController.doLogon/Logoff URLs.

The launch function is another template method called when the page is ready and all JavaScript has been loaded. The TTT.console function defines a lightweight logger that sends the output to the browser console, if available. It is not a replacement for the Ext.log() function but is simpler to use. We encourage you to use the TTT.console function liberally to analyze your code and debug processing.

The final step in the launch function creates and assigns the LogonWindow instance to the application scoped variable logonWindow. This will display the logon window when the application is loaded.

The doAfterLogon function is used to postprocess the successful logon and initialises the application environment. The doAfterLogon argument is the JSON data object returned after a successful logon and has the following structure:

{
    "username": "bjones",
    "firstName": "Betty",
    "lastName": "Jones",
    "fullName": "Betty Jones",
    "email": "[email protected]",
    "adminRole": "Y"
}

This function will create two helper functions that can be called by any component to retrieve user details and to test if the user is an administrator. An example of calling these functions in code has already been shown in the MainHeader.js. The TTT namespace is used to access the application functions via TTT.getApplication().isAdmin() and TTT.getApplication().getUser().

The final step in the doAfterLogon process is to create the application viewport and hide the logon window. We will be calling the doAfterLogon function, strangely enough, after we have successfully logged on!

Run the application and test the logon screen with username bjones and password admin. You should see the interface with all header buttons enabled, as Betty Jones is an admin user:

Test the logon screen with username jsmith and password admin. You should see the interface without the admin buttons, as John Smith is a normal user:

Try clicking on the Logoff button. You should be prompted with a confirmation window as shown:

Selecting the Yes option will trigger the MainController.doLogoff function to log out the user and reload the browser to display the LogonWindow again.