Incorporating Ajax extJs components into Project.net

Author: Martin Liguori

Introduction

I was researching all the components that the extjs has (including the extensions that will apply for the 1.1 and 2.0 versions) and I have found a lot of interesting components we can use in the Project.net application. These components will add a lot of effects to our application, improving both its user friendliness and usability. In order to chose which components to use we need to decide how deeply we want to change our application. The use of some extJs components imply very big changes to the Project.net application; I will try to explain as I cover each component.

This document will explain the components that we can use, emphasizing the following key points:

1. How easy is to do/change it? (Time/Effort)
2. Which are the advantages of using the component (Advantages)
   1. UI
   2. Flexibility
   3. User friendly
3. How many errors this change could introduce in the code (Errors)
4. How many changes do we have to do in order to use the component

---

Basic Dialogs

This is the most common change that we could introduce in our application, there are a lot of message dialogs but the most usefully dialogs are:

• Confirm dialog (Yes, No)
• Prompt dialog box.
• “Save changes” dialog box (Yes, No and Cancel)
• Loading dialog box.
• Status dialog box.

For all this common dialog boxes there are some events defined in order to show to the user which action choose like the following image.

Confirm Dialog

There are five common dialog boxes that we could use in our application that are easy to change and we could reach easily to the user in the first time because it will be apply for all the pages easily.

This common dialog is to confirm through javascript an action that the user made.

Html code:
<button id="mb1">Show</button>

Javascript code:
Ext.get('mb1').on('click', function(e){
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
    });

In this example of code we can see that the function that we have to call is “Ext.MessageBox?.confirm”. Also they are using an event listener “showResult” in order to display which action the user chose.

This message box is easily to change. On the other hand, we have to work too much time changing this code in all the pages (it is an easy change but we have to test deeply). The amount of errors that this could introduce will be small if this change is made smartly and with time (as I said).

I made a search on our actual workspace and I have founded almost 600 of confirm dialog in our pages to change. This message is used when somebody wants to delete or modify some row or form.

Estimated Work (days)	Benefits (1-10)
Development: 30 days, depending upon the no. of developers	7
QA: 10 days

Address Dialog

This dialog box is common used when we want to ask some extra information to the user of the action that has made recently. For example, I you want to know which are the reasons of some changes of data. Then you show the box asking “Why did you change this data?”

I clearly think that this could be a feature to add in our application, I do not know too many places that this is being used. The places that I am seeing this is in the forms, while we are asking for the description.

This change is easy to make and will not affect too many places of the application. On the other hand, we have to change a little bit of logic if we want to add a description field in this dialog boxes.

  Ext.get('mb3').on('click', function(e){
        Ext.MessageBox.show({
           title: 'Address',
           msg: 'Please enter your address:',
           width:300,
           buttons: Ext.MessageBox.OKCANCEL,
           multiline: true,
           fn: showResultText,
           animEl: 'mb3'
       });
    });

Could be a nice feature to add, but I think that has the last priority to make.

Estimated Work (days)	Benefits (1-10)
Development: 2 days (depends upon no. of places to change	3
QA: 1 days

Save Dialog Box

The following dialog box could be applied in the tabs whenever we want to switch a tab. For example, nowadays when we are making a Workflow we need to pass through different tabs; if we did not do some tabs we can not pass to the other tabs and we are displaying a message of alert showing the errors.

Now, we can display this dialog box that is more user friendly instead of showing an error message to the user. The dialog could be, “Do you want to go to the other tab without save?”

   Ext.get('mb4').on('click', function(e){
        Ext.MessageBox.show({
           title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. <br />Would you like to save your changes?',
           buttons: Ext.MessageBox.YESNOCANCEL,
           fn: showResult,
           animEl: 'mb4',
           icon: Ext.MessageBox.QUESTION
       });
    });

With the following image we can start thinking about on changing the modal windows for the dialog box that this extjs has; this could be a big change of UI. Is not going to be in all the places because has few pages to replace.

Estimated Work (days)	Benefits (1-10)
Development: 7 days	7
QA: 3 days

Loading Dialog box

Every time Project.net is performing an action that will require more time to load we can display a dialog box to show to the user that the data is being processed. This is more user-friendly and is not difficult to implement.

The first place that I would like to add this dialog box is in the login box of the application. Other places that could be added are for example in Documents (while loading the files)

This is an example of how to create this kind of lists.

    Ext.get('mb6').on('click', function(){	
        Ext.MessageBox.show({
           title: 'Please wait',
           msg: 'Loading items...',
           progressText: 'Initializing...',
           width:300,
           progress:true,
           closable:false,
           animEl: 'mb6'
       });

Estimated Work (Days)	Benefits (1-10)
Development: 2 days	8 (Could be the start-up to show to the user the recently changes of UI)
QA: 1 days

Status Dialog

This is the most common dialog box that will appear in our application and will replace the Alert javascript box that we have today in our places. This change is easy to make but we could introduce errors if we do not take special attention to what we are including. I made a search in our application and I have founded almost 200 of alerts in our pages to be replaced.

Ext.get('mb8').on('click', function(){
        Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);
    });

These are the places (on Pnet application) that I have identified that these components can be used. This is a common Alert box that is being used in the whole application and we could replace for the message box. This could make the application faster and with a look and feel nicer.

Estimated Work (Days)	Benefits (1-10)
Development: Depends upon the no. of places to change	8 (Could be the start-up to show to the user the recently changes of UI)
QA: Same as development

---

Forms

This is a big change that I would like to do. This is a big change because we need to start redesigning the pages but will give to the application a different UI that will change the look and feel of the pnet application.

var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'save-form.php',
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                name: 'last'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, new Ext.form.TimeField({
                fieldLabel: 'Time',
                name: 'time',
                minValue: '8:00am',
                maxValue: '6:00pm'
            })
        ],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    simple.render(document.body);

If we see the code, we can identify how we can create the text fields inside the forms (is through javascript) that is why the change is going to be big and we have to take special attention while doing this.

Also, all the validation that we could make are easier to develop and control. We are going to introduce less delay while we are validating the different fields, with tooltips and all.

items: [{
  fieldLabel: 'First Name',
  name: 'first',
  allowBlank:false,
  value: 'Jack'
},

As we can see in the code, the property that we added is the allowBlank:false and this automatically validates this field.

This is a different form that shows how easy are to display the text fields that we wanted with this library. The main problem that we will have is that we need to re-designed all our forms and change our pages. Also, in some parts we are generating the pages dynamically (in java classes), so we need also to check those.

Summarizing, I think that to change our UI dramatically we can make the effort and we will have our benefits. Also, while using these forms we can add and use all the other components like: date or combo boxes.

The amount of errors that we could introduce is very big, so I think that we should prioritize the pages that we wanted and try to avoid the possibility of introduce the bugs.

This is an example of a form in our application, and shows clearly that these forms can be change for the new ones in order to improve our UI, but will need certainly a lot of changes from the javacsript and jsp code.

Estimated Work (Days)	Benefits (1-10)
Development: We need to discuss further about re-implementation of all the forms. But more than 1 month to re-design all the forms.	9 (Will change the whole UI application completely)
QA: Depends on the development days

---

Other Basic Components

Combo Boxes

I think that this combo boxes are suitable to start changing our pnet forms. They can be added without inserting the form code. This combo box has suggestive search and a friendlier UI.

The change will not be too big because the code is easy to use. For this, we should create an array with the data like this:

// some data used in the examples
Ext.namespace('Ext.exampledata');

Ext.exampledata.states = [
        ['AL', 'Alabama'],
        ['AK', 'Alaska'],
        ['AZ', 'Arizona'],
        ['AR', 'Arkansas'],

As we can see we need to repopulate the combo boxes of our application creating this array of javascript. This can be reusable, on the other hand, has to be done for every combo boxes of the pages of pnet application.

I made a search and I founded almost 1200 places that we could introduce it. This will give to the user a different look.

var comboWithTooltip = new Ext.form.ComboBox({
        tpl: '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>',
        store: store,
        displayField:'state',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'Select a state...',
        selectOnFocus:true,
        applyTo: 'local-states-with-qtip'
    });

This is how a combo box looks like in the current Pnet application.

I think that could be a great opportunity to change this component because will start making our UI interesting.

Estimated Work (Days)	Benefits (1-10)
Development: 40 days (We need to re-populate the combos with javascript) and we need to define the number of developers.	9
QA: 15 days

Date Text Field

This is another change that we could adopt in our new UI of the application. The calendar is easy to develop and will not introduce any bugs if we do with care.

     new Ext.form.DateField({
            fieldLabel: 'Date of Birth',
            name: 'dob',
            width:190,
            allowBlank:false
        })

As we can see the new component is more user friendly than the old or common one. (Like the image shown).

Estimated Work (Days)	Benefits (1-10)
Development: 21 days	9
QA: 10 days

This change has to be done accomplish the combo box change in order to give the user mode changes in our front-end.

Windows Pop-up (Forms)

This is the common popup window that we are using among our application. Definitely I will go for this change. There are a lot of places that we are using in our pages, but will start making the difference with our user.

We can change this that is in almost 60 places all over the application, and we can add whatever we want inside, because is just html and javascript code. The form could be resizable and we can add the number of tabs that we wanted.

The great thing is that we do not have to change a lot of code inside this. Is faster than the other (open a popup window). We have to take care in how to redesign the pages to fit inside the windows.

    if(!dialog){ // lazy initialize the dialog and only create it once
                dialog = new Ext.BasicDialog("hello-dlg", { 
                        autoTabs:true,
                        width:500,
                        height:300,
                        shadow:true,
                        minWidth:300,
                        minHeight:250,
                        proxyDrag: true
                });
                dialog.addKeyListener(27, dialog.hide, dialog);
                dialog.addButton('Submit', dialog.hide, dialog).disable();
                dialog.addButton('Close', dialog.hide, dialog);
            }

As we can see in the code is easy to define whatever we want inside for this window.

    <div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
    <div class="x-dlg-hd">Hello Dialog</div>
    <div class="x-dlg-bd">
        <!-- Auto create tab 1 -->
        <div class="x-dlg-tab" title="Hello World 1">
            <!-- Nested "inner-tab" to safely add padding -->
            <div class="inner-tab">
                 Hello...<br><br><br>
            </div>
        </div>	
        <!-- Auto create tab 2 -->
        <div class="x-dlg-tab" title="Hello World 2">
            <div class="inner-tab">
            ... World!
            </div>
        </div>
        </div>
    </div>

As we can see in the “Hello…” and “World…” words we can add all the actual html code that we have and will actually works as it is working right now.

Estimated Work (Days)	Benefits (1-10)
Development: 3 days p / component (Without changing the html code that will be inside of the popups)	9
QA: 2 days

Basic Tabs

This tabs are easily to add and easy to update. We could add these tabs into the windows open or also we can add into several places into our actual pages.

There are a lot of places that we could add this tabs in pnet application, but to do that we need to redefine some pages and review some logic of the pages.

As we can see in these places we can start thinking to change the tabs. Because in this particularly page these “sections” are acting more like tabs rather than other thing. So in this places I recommend to start changing, but will be a big change of code depending on how is implemented.

Panel

This is essential and we can easily add inside some key pages that are showing some information currently on Pnet. The change can be made on the Main pages of project, personal or business workspaces.

This change can be done easily and without inserting too many bugs

Ext.onReady(function(){
    var p = new Ext.Panel({
        title: 'My Panel',
        collapsible:true,
        renderTo: document.body,
        width:400,
        html: Ext.example.bogusMarkup
    });
});

This is the only code that we can add and could be the first change that could improve our UI.

We will need to discuss this because currently the actual tabs that are in the application fit with the current design of the page. If we want to change these tabs, the new ones will look a bit different.

Estimated Work (Days)	Benefits (1-10)
Development: We need to define which places to change.	9
QA: depends upon development

Resizing (text areas and images)

If we are not going to add the dynamic forms I would suggest adding this features that are easily to change and gives more flexibility to the user “playing” with the UI as their wish. They can see the text inside the textarea with the size that they want.

We could add this kind of Textarea to all the pages that are currently using textareas. I made a search into the current workspace and I have founded almost 140 textareas.

Html code:
<textarea id="dwrapped"> </textarea>  
Javascript code:
 var dwrapped = new Ext.Resizable('dwrapped', {
            wrap:true,
            pinned:true,
            width:450,
            height:150,
            minWidth:200,
            minHeight: 50,
            dynamic: true
        });

Also, there is a the option that when someone presses a button to see an image (for example) the image is opened dynamically (as the image shown). This image can be resizable as the user wishes.

This enables the user to stay on the current page and see the image without going to a new page.

MultiSelect

This is a very usefully component that can be added instead the current select option that we have (for example: in some current searches).

This component is easy, and we could retrieve the values from the easily. Of course, that we have to update the population of this selects components.

There are not a lot of places that we could make this changes and the code involve is not too much. Also, for this changes will help to have integrated them with the dynamic forms that I explained before.

Live Search

This is the common search that shows the currently results that fits the word typed. I think that this would be a nice move because will give to the user a completely new concept.

This could be used in: ítems, news, users and bfd searchs. The difficult is to generate the information to display through javacript. I was reviewing the code and I think that has middle difficult.

   var search = new Ext.form.ComboBox({
        store: ds,
        displayField:'title',
        typeAhead: false,
        loadingText: 'Searching...',
        width: 570,
        pageSize:10,
        hideTrigger:true,
        tpl: resultTpl,
        onSelect: function(record){ // override default onSelect to do redirect            window.location =
                String.format('http://extjs.com/forum/showthread.php?t={0}&p={1}', record.data.topicId, record.id);
        }

This example is on the user’s search of the Admin section of Pnet application, but can be done it in all the places that we have big searches or common ones.

Estimated Work (Days)	Benefits (1-10)
Development: We need to define which places to change.	9
QA: depends upon development

DataGrid

It is easy to generate and gives the user a nice look and feel instead of the HTML code that we are displaying today’s. In my personal opinion could be applied not to all the complex lists, but could show the information more ordered and simple.

We have to change the way to populate the lists but this is the biggest change that we have to make, but I do not think that it is too difficult to do.

  var myData = [
			['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am']];
var ds = new Ext.data.Store({
	proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [
          {name: 'company'},
          {name: 'price', type: 'float'},
          {name: 'change', type: 'float'},
          {name: 'pctChange', type: 'float'},
          {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
      ]) });ds.load();

Secure Pass

Although we need to make improvements to the underlying security framework, the extJs component can at least improve the registration experience of a new user. It is not difficult and the user interface would gain the new look and feel.

Estimated Work (Days)	Benefits (1-10)
Development: 2 days	6
QA: 1 day

In the current application we can add this feature to this register section on pnet. (As the image shown above).

---

Layout Example

We can add these layouts to some specific areas of the application, but I suggest re-thinking the general layout of the application. If we want, we can change the left menu of our application with this kind of dialog.

We also can include in the body part tabs, panels or any other components.

The image below is another example on how we can improve our menu on the left side of the page.

<INSERT IMAGE HERE>

---

Summary

We have to be careful if we decide to start using all of the extJs components because this change will introduce a lot of javascript code that will make the code difficult to read and maintain.

One approach is to start with the less severe changes, working up to the more significant ones. From my point of view, the changes we can make in the shortest period are the ones related to the basic components like: combos, alerts and messages boxes. These changes will appear throughout the application and will start making the UI friendlier for the user. The key point is to see the example demo in the following link in order to see how they might look http://extjs.com/deploy/ext-1.1.1/docs/. In this link you can appreciate the live behavior of the components in this document; it is essential to see them alive in order to understand what they can offer in order to improve Project.net's user interface.

One thing to remember, when start changing all of the pages we must define standards for css and js for each of the components that we are going to use in our application. We will have to mix the existing and new styles in order to use the new components among the existing user interface. In addition, there are a lot of pre-defined themes used in these components. We need to review them and prioritize which are the best for Project.net.

Eventually I think that we should use the forms for all the Project.net pages, but this change will take considerable time and could introduce bugs in the development phase. We could also introduce the panels and the dialog boxes because these changes will be visible across the entire application and will start changing our UI behavior.

---

References

• extJs home page - http://extjs.com
• extJs documentation (APIs, working versions of the components) - http://extjs.com/deploy/ext-1.1.1/docs/