Ext JS Feature Overview

After implementing a whole application with Ext JS, and after presenting also in this blog basic overview of the prototype and jquery javascript frameworks and given a small idea of the functionalities of qooxdoo (and a little overview of QWT), I want to give a more or less thorough view of all the features of this quality framework. In a later entry, I will give a thorough presentation of the relations between GWT and Ext JS.

It is important to notice, that unlike other frameworks the extJS framework does not have a licence mechanism which is very suitable for enterprise application which need to be kept closed source, unless you are ready to pay licence fees to the company owning the code of extJS. However, the core of ext JS is proposed under an LGPL licence, so it can still be used in closed source development.

I first list the main features of extJS, then I go in a little more details for each of these points:

• Namespace functionalities
• DOM elements manipulation Utilities
• Data Manipulation Utilities
• Data Store functionalities
• Ajax request functionalities
• an extended set of application widgets: trees, tables form, charts
• a complete RIA framework, with menus, drag and drop,....

Namespace functionalities

This is presented in this entry. Namespaces makes it easy it construct more modular applications.

DOM elements manipulation Utilities

This is presented in another entry:

Data Manipulation Utilities

This is presented in another entry:

Data Store functionalities

This is presented in another entry:

Ajax request functionalities

This is presented in another entry:

an extended set of application widgets: trees, tables form, charts

This is presented in another entry:

a complete RIA framework, with menus, drag and drop,....

This is presented in another entry:

Ext JS Tutorial - Namespaces

In this entry I will give a tutorial on using Ext JS Namespaces.

Namespaces are a very useful functionality in extJS. You can define a namespace using:

var myNamespaceNS = new ext.Ext.NS('my.namespaces.mymodules');

Then you can add objects, or functions to the namespaces as easily as if they were normal variables:

myNamespaceNS.myObject = {title:'my title',author:'me'};

In other pieces of the code, you can get the hold of the namespace using its name or a variable.

var myNamespaceNS = new ext.Ext.NS('my.namespaces.mymodules'); alert(myNamespaceNS.myObject.title + " "+my.namespaces.mymodules.myObject.author);

JQuery - Basics

After the post on prototype I thought I might just present the features of jQuery. Just as for prototype I first summarize the features of JQuery, then I describe in a little more details these features. The informations from this entry come from the jQuery API.

• simple on load execution mechanism
• simple query mechanism using selectors and syntactic sugar $()
• Simple Ajax functions and Helpers
• Manipulation of the DOM elements
• visualization effects
• Dimensions Utilities
• Data Storage and manipulation utilities

simple on load execution mechanism

JQuery provides a way to load code directly on load, by using the .ready() function. In that way, it is possible to initialize a certain number of elements once the web page is ready.

$(document).ready(function() {
  // Handler for .ready() called.
});

Simple Query Mechanism using Selectors and Syntactic Sugar $()

As prototype and other frameworks provide, jquery provides the means of selecting elements using css selectors. The function to use for this is the jQuery() function ( or its equivalent syntactic sugar: $()).

Simple Ajax functions and Helpers

jQuery provides a simple framework to perform Ajax Queries of the sort:

$.ajax({ url: "urltocall",
  context: document.body,
  success: function(){
  // code to perform when the ajax query has been a success
}}
);

Some callback functions can be given as parameters, in order to act depending on the result of the call. In the previous example, the function success is a callback function used when the Ajax request was successful. Other possibility is for example error. But also the request parameters can be changed before the HttpRequest is sent to the server.

Manipulation of the DOM Elements

jQuery provides a great number of utility methods to interact with DOM elements retrieved for instance with the CSS selectors mentioned earlier. For instance, you can add a title ( here an h2 element ) to all elements of the class container.

$('.container').append($('h2'));

Other possibilities is to prepend, the content to an element.

Two other methods can be useful: html() and text() which return respectively the HTML content or the text content of the element or its child elements.

Visualization Effects

JQuery provides the possibility to animate the elements of the page. For example, if the user clics on an elements a small animation can be displayed to inform the user that something actually occurs.

jQuery('#elementToClick').click(function() {
  $('#elementToAnimate').animate({
   opacity: 0.35,
   left: '+=20',
   height: 'toggle'
  }, 5000, function() {
  // the code called once the animation is finished
  });
});

Dimensions Utilities

JQuery provides a number of useful methods to determinate the dimensions of objects. See for example:

$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document

Other methods are for example width(), innerHeight() and innerWidth()

Data Storage and manipulation Utilities

// code to add data to an element elementToStoreData
$('elementToStoreData').data('age', 52);
$('elementToStoreData').data('nameInfo', { firstName: 'Mark', lastName: 'MacGuire });
// code to remove the data from the element elementToStoreData
$('elementToStoreData').removeData('age');
$('elementToStoreData').removeData('nameInfo');
$('elementToStoreData').removeData(); // removes all entries stored in this Element

Visit the API page for more informations.

prototype javascript - API features

Prototype is a minimalistic javascript Ajax and Dom manipulation framework.

By taking a look at the API, I decided to sum up the interesting features of prototype (version 1.6). Here are the following useful features of prototype

• Ajax Requests
• syntactic sugar
• CSS selector manipulation
• enumeration
• String manipulation and Template mechanism
• periodical workers

Ajax Requests

The prototype API provides a simple browser independant API to perform Ajax requests:

new Ajax.Request('/theserverURLpath', {
  onSuccess: function(response) {
   // Handle the response content...
  }
});

Just as in other javascript frameworks to perform Ajax requests you can set callback depending on the type of response you obtain from the server. The code might look like this:

new Ajax.Request('/theserverURLpath', {
  onSuccess: function(response) {
   alert('The call was successful');
  },
  onFailure: function(response) {
   alert('The call has failed');
  }
});

Syntactic Sugar and Element Manipulation

Prototype provides a certain number of shortcuts to obtain elements more easily. For example, you can directly obtain elements when you know their id (for example for an element with id: 'myid', you can get the element using the call to $('myid'))

Other example of syntactic sugar are $F (returns the value of a form element), $A return an array from an iterable element, $H (returns a Hash map), $R (returns an object range), $w (returns the array from the splitted string given as argument).

CSS selector manipulation

CSS Selectors provides a powerful means of selecting elements of a web page either using their tags, or their ids, or their css class... prototype provides a selector class and two syntactic sugar constructs to perform easy queries using selectors.

Enumerations

Prototype provides a mixin in order to create enumerable classes more easily. The following example illustrate the definition and the use of the mixin.

var theEnumerableClass = Class.create(Enumerable, {
  initialize: function() {
   // the constructor code
  },
  _each: function(iterator) {
  // Your iteration code, invoking iterator at every turn
  },
  // Your other methods here, including Enumerable overrides
}); var enumerableInstance = new theEnumbarableClass({});

After having defined the enumerable class and instance, prototype provides a number of methods from the Enumerable mixin in order to perform actions on the enumerable aspect of the instance, for instance using the each() function.

String manipulation and Template mechanism

Prototype provides a number of string manipulations extensions of the string class as well as a regular expression framework.

It also provides the usual template mechanism which allows the passing of arguments to a given string.

var myTemplate = new Template('Dear #{title} #{firstname} #{lastname}.');
var personInfo = {
  title: 'Dr',
  firstname: 'Homer',
  lastname: 'Simpson'
};
// let's format our data
myTemplate.evaluate(personInfo);

periodical workers

Like many other javascript frameworks, prototype has also a mechanism to perform some tasks periodically. The code is clear in itself.

new PeriodicalExecuter(function (pe) { // the code to be performed every five seconds !!! }, 5);