Ext

Archive for the ‘Open Source’ Category

Building a Rating Widget with Ext Core 3.0 Final and Google CDN

Wednesday, June 10th, 2009

We are very proud to announce the final release of Ext Core under the MIT license. Your feedback was invaluable. Thank you for all the bugs reported and test cases created. For those of you who are new to Ext Core, we suggest you read the previous blog post about the all the features and examples that we released as part of the beta. You can find a list of changes and fixes we made for the final here.

For this post we will leverage the power of Ext by creating and dissecting a useful star rating example. We hope to share some of the general best practices behind creating unobtrusive, reusable code with Ext Core to liven up your pages.

Making a Splash

Including Ext Core on your site is easier than ever. We are honored to share with the community that Ext Core is now available via the Google AJAX Library API. Many thanks to Ben Lisbakken at Google for working with us to make this a reality.
//any of these will work ;)  <script type="text/javascript" src="....
http://ajax.googleapis.com/ajax/libs/ext-core/3.0/ext-core.js
http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js
http://ajax.googleapis.com/ajax/libs/ext-core/3.0/ext-core-debug.js
http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core-debug.js
Alternatively, you can use Google AJAX API Loader's google.load() method:
google.load('ext-core', '3');
google.load('ext-core', '3', {uncompressed : true});

Getting Started

Ext Core is a perfect fit for adding behavior to existing HTML. When designing a widget, having a markup structure that provides graceful degradation is an added plus. For this example, we will be using radio buttons. We can "group" the elements to specify which radio buttons are part of the control. It could look something like the following:
<div id="rating1">
    <input type="radio" name="rating1" value="1" title="Very poor">
    <input type="radio" name="rating1" value="2" title="Not that bad">
    <input type="radio" name="rating1" value="3" title="Average">
    <input type="radio" name="rating1" value="4" title="Good">
    <input type="radio" name="rating1" value="5" title="Perfect">
</div>
This markup allows user to have the ability to rate an item even without the fancy stars and additional functionality that we have in mind. Take notice that this simple markup contains powerful information like the name, value and title for each item which we can reuse with our rating widget.

The API

One of the most important aspects of building reusable code is providing your developers a powerful API. Our aim here is to allow developers to progressively enhance and convert the markup into a star rating with a simple API. In this case we will need the element that wraps around the radio controls, and some optional configuration to customize the behavior of the widget. Following the Ext tradition we will provide these configuration options in the form of an object literal. A possible API for our widget could look like this:
//Keep it simple
new Ext.ux.Rating('rating1', {
    showTitles: true
});

Ext.util.Observable

So now that we know how we want to use our component, lets go ahead and actually look at some details on how to write it! In our previous post we mentioned that Ext Core allows you to write neatly structured object-oriented code. Whenever you want to create a piece of functionality, you should try to bundle it into a separate class. In most cases you will need to be able to listen for events on instances of your class. Ext provides a power class, the Ext.util.Observable class, to springboard your development. This is the same class that almost all classes in Ext JS extend from! Our basic shell for our rating plugin could look something like this:
Ext.ns('Ext.ux');
Ext.ux.Rating = Ext.extend(Ext.util.Observable, {
    // Configuration default options
    showTitles: true,
 
    // Our class constructor
    constructor : function(element, config) {
        Ext.apply(this, config);      
        Ext.ux.Rating.superclass.constructor.call(this);     
 
        this.addEvents( 'change');  
 
        this.el = Ext.get(element);
        this.init()
    }
});
For those of you familiar with Ext JS will recognize this pattern. In this piece of code we have created a namespace to put our class into using the Ext.ns() function. Then we create our class using the Ext.extend method with Ext.util.Observable as the base class. We define some configuration options with default values and then set up our constructor method which will be called when we create a new instance of our class. We also define some custom events and wrap the element passed to the constructor with an Ext.Element instance. We use the Ext.get() flexible nature to have support of passing an id string, DOM Element or Ext.Element to our constructor.

Reaching the stars

It is time to think about the things we need to get our widget working. First we want to replace the radio buttons with our stars, we will need to store the values and titles for each star, we want to create a hidden input to put the current value in and finally we need to set up event listeners to listen for mouse hovers and clicks.
init : function() {
    var me = this; 
 
    // Some arrays we are going to store data in
    this.values = [];
    this.titles = [];
    this.stars = [];
 
    // We create a container to put all our stars into
    this.container = this.el.createChild({
        cls: 'ux-rating-container ux-rating-clearfix'
    });
 
    // We use DomQuery to select the radio buttons
    // Then we can loop over the CompositeElement using each
    this.radioBoxes = this.el.select('input[type=radio]');
    this.radioBoxes.each(this.initStar, this);
 
    // We use DomHelper to create our hidden input
    this.input = this.el.createChild({
        tag: 'input',
        type: 'hidden',
        name: this.name,
        value: this.values[this.defaultSelected]
    });
 
    // Lets remove all the radio buttons from the DOM
    this.radioBoxes.remove();
 
    if(this.disabled) {
        this.disable();
    } else {
        // Enable will set up our event listeners
        this.enable();
    }
}

Creating Stars - using DomHelper and accessing the DOM from Ext Element

 
initStar : function(item, all, i) {
    // We use the name and disabled attributes of the first radio button 
    if(i == 0) {
        this.name = item.dom.name;
        this.disabled = item.dom.disabled;		
    }
 
    // Saving the value and title for this star     
    this.values[i] = item.dom.value;
    this.titles[i] = item.dom.title;
 
    // Now actually create the star!
    var star = this.container.createChild({
        cls: 'ux-rating-star'
    });
 
    // Save the reference to this star so we can easily access it later
    this.stars.push(star.dom);
},

Enable and Select Stars - listening for events, using the target of an event and firing custom events

 
enable : function() {
    // ... some code missing here ...
 
    // We will be using the technique of event delegation by listening
    // for bubbled up events on the container       
    this.container.on({
        click: this.onStarClick, 
        mouseover: this.onStarOver,
        mouseout: this.onStarOut,
        scope: this,
        delegate: 'div.ux-rating-star'
    });        
},
 
onStarClick : function(ev, t) {
    if(!this.disabled) {
        this.select(this.stars.indexOf(t));
    }
},
 
select : function(index) {
    // ... some code missing here ...
    else if(index !== this.selected) {
        // Update some properties           
        this.selected = index;
        this.value = this.values[index];
        this.title = this.titles[index];
 
        // Set the value of our hidden input so the rating can be submitted			
        this.input.dom.value = this.value;
 
        // the fillTo() method will fill the stars up until the selected one
        this.fillTo(index, false);
 
        // Lets also not forget to fire our custom event!         
        this.fireEvent('change', this, this.values[index], this.stars[index]);  
}

Filler Up - dom manipulation (adding classes)

 
fillTo : function(index) {
    var cls = 'ux-rating-star-on';
 
    // We add a css class to each star up until the selected one   
    Ext.each(this.stars.slice(0, index+1), function() {
        Ext.fly(this).addClass(cls);
    });
 
    // And then remove the same class from all the stars after this one
    Ext.each(this.stars.slice(index), function() {
        Ext.fly(this).removeClass(cls);
    });      
}

We won't discuss all the details since most of it is pretty straightforward, but the final product should give you a general idea of how to use the basic functionality available in Ext Core to tie together all the missing pieces.

Wrapping it up

In this example we used the following cross-browser compatible functionality available in Ext core:
  • Classical Inheritance Class System
  • Observable Class
  • DomQuery
  • DOM manipulation and traversal
  • Event handling
  • Markup generation

Ext Core makes it fun to write code, and helps you create clean, well-structured classes using a set of cross-browser abstractions on the existing browser API's. For those of you who want to use it or are just interested in seeing the completed work, we have included a version of the widget in the Ext Core Final build. You can see the working widget embedded in the post below:

The example page illustrating this widget can be found here.

Final words

We hope that this library will find its way into many of your dynamic web pages and make your lives as web developers easier and more enjoyable. We are looking forward to seeing the great things you will create using it. We are always looking for ways to make this library better and we think the best way to do that is by listening to your suggestions. So, don't be shy and tell us what you think.

Ext Core 3.0 Beta Released

Saturday, April 4th, 2009

As we approach the three year anniversary of the initial release of Ext, the Ext Team is proud to announce the immediate availability of Ext Core 3.0 beta for download. Ext Core provides a cross-browser consistent API for performing the most common tasks in JavaScript development for web pages. Ext Core is released under a permissive MIT license - there is no cost to use Ext Core - it's free for everyone.

Drawing upon our experience creating rich user interfaces, we isolated the most powerful features used to enhance new or existing web pages. Ext Core is a subset of the upcoming Ext JS 3.0 release optimized for speed & file size. Developers familiar with Ext JS can leverage their existing skillset to provide an enhanced user experience to their web pages.

Ext Core Overview

Ext Core distinguishes itself from other JavaScript libraries with a well defined object-oriented structure, which enables you to write clean and reusable code. Ext Core provides cross-browser abstractions for:

  • DOM manipulation and traversal
  • CSS management
  • Event handling
  • Dimensions and Sizing
  • AJAX and JSON Support
  • Animations

In addition to providing cross-browser abstractions for the DOM, Ext Core also includes some of the most used and popular utilities from Ext JS.

  • Classical Inheritance Class System
  • Observable Class
  • Markup generation and Templating
  • Timed code execution
  • URL encoding and decoding

Library Size

Ext Core is perfect for inclusion in a dynamic web page or even a small application. We have gone through the source with a round of refactoring aiming to get the best possible compression. Considering all of the included features, Ext Core has a small footprint. It has a compressed footprint of 25K minified and gzipped.

Ext Core Manual

Another aspect of Ext Core that sets itself apart from other libraries is the Ext Core Manual. Written by the authors of Ext Core, and reviewed by the community Ext-perts, the Ext Core Manual provides beginners and experienced developers an in-depth view of how to use every aspect in Ext Core. No method or class has gone uncovered. This mini-book (75 pages printed) is meant to amplify the existing API documentation. We encourage everyone, including Ext JS users, to read the manual to sharpen their understanding of Javascript and Ext.

Examples using Ext Core

To illustrate the capabilities of Ext Core, our team built a few of the most commonly used extensions on the web. They also serve as a great reference for creating your own extensions. Given the small footprint of Ext Core, we were able to embed the Example Explorer into this blog post. These examples are freely available to be used on your web pages today.

DomQuery and CompositeElementLite

DomQuery provides high performance selector-based element retrieval. It supports most of the CSS3 selectors specification, along with a few custom selectors and basic XPath. A common use case when working with the DOM is manipulating a collection of elements. Using an instance of CompositeElementLite, Ext Core allows you to interact with a collection the same way you would with a single element. Here is an example of adding a class to a collection of elements.

// selects a collection of elements and adds the class 'myCls' to each one.				
Ext.select('div:has(> span.someClass)').addClass('myCls');

Event handling made easy

Ext Core's event handling abstraction gives you cross-browser normalized event handling and support for custom events. On top of that, it provides configuration options for delaying, buffering, delegating, and targeting events. In the example below, we update an element to indicate a click event occurred.

Ext.fly('elId').on('click', function(e, t){
    // e is normalized cross browser event object
    // t is the target element
 
    // Update contents of the element with id "log" to notify the user of the event firing
    Ext.fly('log').update('You clicked on the element with id: ' + t.id);    
});

Ajax Requests

Ext Core has a clean cross-browser abstraction for making XMLHttpRequests. It gives you an intuitive API to retrieve and send data to the server without requiring the page to refresh. Take a look at a basic Ajax request using Ext Core :

Ext.Ajax.request({
    url: 'serverSide.php',
    success : function(r){
        // using the built-in Ext JSON support
        var data = Ext.decode(r.responseText);
 
        // data is now a regular Javascript object
        console.log(data.items[0].title);
    }
});

If all you need to do though is update the contents of an element you can use the shorthand version:

Ext.fly('elId').load({
    url: 'serverSide.php'
});

Some final words

With 70,000+ registered members on the Community Forums and a company dedicated to making Ext "a foundation you can build on", we hope that this core library will find its way into many of your dynamic web pages and make your lives as web developers easier and more enjoyable. We had a lot of fun putting Ext Core and the examples together, and we are looking forward to seeing the great things you will create using it.

Open Source FLOSS Exceptions

Sunday, April 27th, 2008

With our recent change to the GPL v3 some concerns have been brought up by the Ext Community. We are hoping to address some of those concerns via community discussion of two new FLOSS exceptions.

The first step for us is the Open Source License Exception for Extensions. It is currently in draft status and we are seeking input from the community before we have it finalized.

The intention of this exception is to allow for more liberal licensing of extensions, language packs, themes and open source developer toolkits and frameworks for Ext libraries under a variety of open source licenses. (Note: this exception is not for applications and does not grant any exception for the library itself. A FLOSS exception on the libraries for open source applications will be addressed in the exception discussed in “Next Up” below).

The discussion is here:

http://extjs.com/forum/showthread.php?t=33891

The latest draft is here:

http://extjs.com/products/ux-exception.php

Please chime in and provide input and feedback.

Next Up

After the Extension Exception is complete, the next step will be drafting a FLOSS exception similar to the one by MySQL AB for both Ext JS and Ext GWT:

http://www.mysql.com/about/legal/licensing/foss-exception.html

This exception will be for open source applications that use Ext JS. It will have a few distinct additional grants the Extension Exception doesn’t have (e.g. “bundling” will be ok) but won’t be applicable to extensions or toolkits, as that’s what the Extension Exception is for.

We would appreciate any input and feedback you can provide on it as well. We expect to move quickly and we will let the community know when there is a draft ready for review and input.

Once both those are complete, we also hope that those that participate in their review and drafting can also help us to create an FAQ explaining what they cover, how they work, etc by contributing questions that will be asked by open source developers looking to use them.

Summary

The community speaks very loudly and we have heard you. We are hoping these exceptions will not only provide for continued usage for open source users that are not able to use GPL code in their projects, but also with greater open source license flexibility than has ever been available for Ext JS.


© 2006-2009 Ext, LLC