Adobe AIR Xdrive Picture Syncing: Part 2

Last time we covered the important points of developing AJAX style Adobe AIR projects and its impact on our Xdrive application. Having nailed down the architecture, today we move on to defining the user interface in Ext JS.

The picture syncing application we're creating will contain a relatively simple user interface (UI). The application will support the display of two environments, a folder containing pictures on the local filesystem, and the Xdrive remote pictures file space. To accommodate this, a border style layout will be defined using Ext JS. The layout is pieced together by a number of panels implemented in regions supported by the layout. All the code for defining the UI will be added to the window.onload block in the ui.js file. Start off by defining the major panel sections below:

// create the north panel
var pnl_north = new Ext.Panel(
							  
	{
		region: "north",
		title:  "Xdrive Photo Sync",
		height: 0,
	}
							  
);

// create the center panel
var pnl_center = new Ext.Panel( 
							   
	{
		region: "center",
		width:  300
	}
							   
);

// create the west panel
var pnl_west = new Ext.Panel(
							 
	{
		region:      "west",
		width:       300,
		split:       true
	}
							 
);

Each panel is named after the region it will cover to make it easier to identify as we build on to the project. The panel covering the west (left) region will display data from the local filesystem and the panel covering the center (right) region will display data from Xdrive. Next, simply attach the panels to a Viewport using the following code:

// assemble the layout
var vwPrt_main = new Ext.Viewport(
                                  
    {
        layout: "border",
        items: [
                
            pnl_north,
            pnl_center,
            pnl_west
                
        ]
    }
                                  
);

The Viewport definition consists of the layout type to use followed by the array of items which make up the layout. The region data is defined in each panel with additional configuration options such as displaying a splitbar between the panels for resizing.

Since the application will require authentication with the Xdrive system, we next need to implement some type of login form. This will be accomplished through the construction of a modal window in Ext JS with a FormPanel attached. The process used to construct these panels together is the same, start off by defining the individual components of the form, then attach them to the panel:

var txtFld_username = new Ext.form.TextField(
    
    {
        fieldLabel: "username"	
    }
                                             
);

var txtFld_password = new Ext.form.TextField(
                                             
    {
        inputType:  "password",
        fieldLabel: "password"	
    }
                                             
);

var btn_login = new Ext.Button(
                               
    {
        text:       "Login",
        handler: function() {
            
            doLogin();
            
        }
    }
                               
);

var frmPnl_login = new Ext.form.FormPanel(
                                          
    {
        labelAlign: "right",
        border:     false,
        items: [
        
            txtFld_username,
            txtFld_password
                
        ],
        buttons: [
                  
            btn_login
                  
        ]
    }
                                          
);

The FormPanel is a special type of panel used for defining forms in Ext JS. The configuration options used by this and its attached controls all work together to produce a nicely formatted form. For instance, the fieldLabel option in the text fields coupled with the labelAlign option in the form panel give us right-aligned labels to controls with no guesswork involved with positioning or style. If the default positioning of elements in Ext aren't to your liking, you can also dig in to the source to determine the styles to modify.

To create the window (a type of Panel), we'll use the same process. Use the code below to create a modal window which attaches the FormPanel we just created to it:

var win_login = new Ext.Window(
                               
    {
        title:     "Xdrive Photo Sync - Login",
        y:         200,
        width:     300,
        height:    200,
        draggable: true,
        closable:  false,
        modal:     true,
        renderTo:  "win-login",
        items: [
                
            frmPnl_login		
                
        ]
    }
                               
);
win_login.show();

In addition to configuring the window with modal behavior, dragging of the window is allowed, but closing it is not an option. Since this is a login situation, we want it to remain visible and modal until authentication is completed successfully. This is accomplished through a function named doLogin which is fired on the onclick event of the btn_login button defined earlier. The resulting application should look similar to Figure 1 below.

Check back on Friday when we start to fill in the panels with some picture data from the local filesystem and Xdrive.

Part 1 | Part 2 | Part 3 | Part 4 | Part 5