Extjs.util.MixedCollection : how to sort ?

Table of contents

1. Introduction
2. Look at the code
3. Example: generic sort

This arcticle studies Extjs in 2.0.2 version.

Introduction

I recently had to use Ext that is by the way a wonderfull library, no matter the licencing issues that occured lately. Ext.util.MixedCollection is a class allowing to store any type of data and to add, remove, filter and sort it.

Adding or removing data is quite easy, you just have to read the documentation, to filter, just give the field you want to filter and the pattern you want to match, but when it comes to sort, the documentation isn't really helpfull.

We'll first have a look to the code and then we'll give a simple sort example.

Table of content

Look at the code

Let's find the sort method :

    sort : function(dir, fn){
        this._sort("value", dir, fn);
    }

As we can see, it is really short, it just calls a private function named _sort. Let's go deeper into the layers and study the _sort method ;)

    _sort : function(property, dir, fn){
        var dsc = String(dir).toUpperCase() == "DESC" ? -1 : 1;
        fn = fn || function(a, b){
            return a-b;
        };
        var c = [], k = this.keys, items = this.items;
        for(var i = 0, len = items.length; i < len; i++){
            c[c.length] = {key: k[i], value: items[i], index: i};
        }
        c.sort(function(a, b){
            var v = fn(a[property], b[property]) * dsc;
            if(v == 0){
                v = (a.index < b.index ? -1 : 1);
            }
            return v;
        });
        for(var i = 0, len = c.length; i < len; i++){
            items[i] = c[i].value;
            k[i] = c[i].key;
        }
        this.fireEvent("sort", this);
    }

As we can see, the default sort callback is defined as follows : return a - b ;, and then this callback is passed to the array sorter. So, the function format is the same as for the Array.prototype.sort function.

Table of content

Example: generic sort

Let's define the environement (I will not include a test directly in the blog because of Extjs weight):

//creation
var characters = new OWT.util.MixedCollection();
//populate
characters.addAll([
   {id: 1, first_name: 'Kyle', last_name: 'Broflovski', age: '8', phone: '555-14569'},
   {id: 2, first_name: 'Eric', last_name: 'Cartman', age: '8', phone: '555-96541'},
   {id: 3, first_name: 'Stanley', last_name: 'March', age: '8', phone: '555-12478'},
   {id: 4, first_name: 'Kenny', last_name: 'McCormick', age: '8', phone: '555-78954'},
   {id: 5, first_name: 'Leopold', last_name: 'Stotch', age: '8', phone: '555-63215'},
   {id: 6, first_name: 'Jesus', last_name: 'Christ', age: '2008', phone: '555-12479'}
  ]);

If you want to sort this collection easyly, just use following function:

function sort_characters( asFieldName, asOrder)
{
    var _sFieldName = asFieldName, 
        _fSorter = function(obj1, obj2){
            if( isFinite( obj1[sFieldName] - obj2[sFieldName] ) )
                return  obj1[sFieldName] - obj2[sFieldName] ;
            return obj1[asFieldName] > obj2[asFieldName] ? 1:-1
        }
    characters.sort(asOrder || 'DESC', _fSorter);
}

Here we are !
See you soon

Table of content

Adding helpers to JST

Table of contents

1. Introduction
2. Creating helpers
3. Helpers and templating automation
   1. Declare the namespaces
   2. Parser wrapper
   3. templateObject overlay
   4. Helpers definition
4. Conclusion

Introduction

As I said in this article, I recently used JST. After playing around with it for 2 or 3 days, I came up with the conclusion that an abstraction layer is needed, except if you want to rewrite the whole code every time !

Table of content

Creating helpers

JST documentation about the templateObject.process function says :

Note that the '''contextObject''' can contain any JavaScript object, including strings, numbers, date, objects and functions. So, calling ${groupCalender(new Date())} would call contextObject.groupCalender(new Date()). Of course, you would have to supply the groupCalender() function, which should return a string value.

So, we've got a way to define our helpers !
Let's try it :

// As usual our namespace
var App = App || {};

/**
 * a little binding utility relying on closure.
 * 
 * This function can be improved by handling the 
 * merge of given parameters on binding and given 
 * parameters on call so that :
 * <pre>
 *   var myBindedFunc = App.bind( myFunc, myContext, param1, param2 );
 *   myBindedFunc ( param3 );
 * <pre>
 * results being the same as :
 * <pre>
 *   var myBindedFunc = App.bind( myFunc, myContext );
 *   myBindedFunc ( param1, param2, param3 );
 * <pre>
 * or, using the call utility :
 * <pre>
 *   myFunc.call( myContext, param1, param2, param3 );
 * <pre>
 *
 * @param {Function} afCallback function to apply
 * @param {Object}   aoContext the context to apply the function in
 *
 * @return {Function}
 */
App.bind = function( afCallback, aoContext  ){
  /* make a copy */
  var _fCallback = afCallback;
  var _oContext = aoContext;

  /* create the closure */
  return function(){
    return _fCallback.apply(_oContext, arguments);
  };
}

//let's define our helpers
App.Helpers = {
  /**
   * used as an helper, writes 'foo'
   */
  test:function(){
     return 'foo';
  },
  /**
   * increments a value, to demonstrate 
   * the binding necessity for helpers
   * that needs to access main context
   */
  count:App.bind(function(){
    App._counter = App._counter || 0;
    return App._counter++;
  },window)
};



/* parse and process */
function parse_and_process(){
  var dest = document.getElementById('jst_add_helpers_template_test_1_dest');
  var tpl = document.getElementById('jst_add_helpers_template_test_1_template');
  dest.innerHTML = TrimPath.parseTemplate( tpl.innerHTML).process( App.Helpers );
}

Ready to test ?

Give it a try !

<!-- let's define our template --> <p> test : ${test()} </p> {for i in [0,1,2,3]} <p> counter ${i+1} = ${count()} </p> {/for}

Here will come the processed template

So, It seems that works, but why the hell did I use a binding ?
Well, it's all about contexts, the template is executed in process function's first parameter context. That means you are enclosed in this context, so you can't access the other variables ( such as App in the count helper's case ).

So, whenever we need to create an helper that has to access other namespaces, it is necessary to bind it to needed context. Application field of such a technique can be:

• Internationalization (to access datas that are not presents)
• add custom events
• register or modify variables
• ...

Well, That's cool, we've done with helpers definition understanding, but it can be exhausting to select helpers every-time you call a template, let's see how to make it simple.

Table of content

Helpers and templating automation

Declare the namespaces

As usual, automation means a new layer. We will need as usual a main namespace, and following sub-namespace.

App

What a surprise ! Just the same as usual :-). Well, the main namespace

App.Templates

The template engine wrapper namespace

App.Templates.Helpers

the templates helpers namespace

App.Templates.templateObject

Our templateObject overlay

Table of content

Parser wrapper : App.Templates

The parser wrapper needs first to keep a trace of our parsed templates, so let's have a storage facility :

/* namespace */
var App;
App.Templates = App.Templates || {};

/* utilities */
/**
 * copy all the properties from aoSource to aoDestination
 * @param {Object} aoDestination
 * @param {Object} aoSource
 * @return {Object}
 */
App.extend = function(aoDestination, aoSource){
 for (var property in aoSource) 
          aoDestination[property] = aoSource[property];
 return aoDestination;
};

/* storage utilities */
App.Templates.stored = {};
/**
 * stores a template
 * 
 * @param {String} asTemplate the template name
 * @param {OGF.Templates.templateObject} asTemplate the parsed template
 * 
 * @return {OGF.Templates.templateObject}
 */
App.Templates.store = function( asTemplateName, aoTemplate ){
 return App.Templates.stored[asTemplateName] = aoTemplate;
};
/**
 * reads a template
 * 
 * @param {String} asTemplate the template name
 * 
 * @return {OGF.Templates.templateObject}
 */
App.Templates.find = function( asTemplateName ){
 return App.Templates.stored[asTemplateName];
};

Easy isn't it ? Now the parsing layer :

/* parser */
/**
 * parses a template
 * this function is a wrapper for the template.
 * 
 * @param {String} asTemplate the template string to parse
 * 
 * @return {OGF.Templates.templateObject}
 */
App.Templates.parse = function( asTemplate ){
 return new App.Templates.templateObject( TrimPath.parseTemplate(asTemplate) );
};
/**
 * parses a template and store it.
 * This function main goal is to be binded on the request return.
 * 
 * @param {String} asTemplate the template string to parse
 * 
 * @return {OGF.Templates.templateObject}
 */
App.Templates.parseAndStore = function( asName, asTemplate ){
    App.Template.store(
   asName, 
   App.Templates.parse( asTemplate )
 );
};

Well, you maybe noticed that we used an undeclared class called App.Templates.templateObject. Let's declare it.

Table of content

templateObject overlay : App.Templates.templateObject

This class is our abstraction layer over the TrimPath template object.
It just adds our helpers definition to the evaluation context.

/**
 * @constructor
 * @classDescription the template object wrapper for OGF
 * @param {templateObject} aoTemplate the template object
 */
App.Templates.templateObject = function(aoTemplate){
 this.initialize(aoTemplate);
}
App.Templates.templateObject.prototype = {
 /**
  * the template object reference
  * @var {templateObject}
  */
 _template:null,
 /**
  * initializes the object
  * @param {templateObject} aoTemplate the template object 
  */
 initialize:function(aoTemplate){
  this._template = aoTemplate;
 },
 process:function( aoDatas ){
  var _oDatas = {};
  if(App.Templates.Helpers)
  {
   _oDatas = App.extend( _oDatas, App.Templates.Helpers);
  }
  
  _oDatas = App.extend( _oDatas, aoDatas || {});
  return this._template.process(_oDatas);
 }
};

You maybe noticed I deported the initialization function to one in the prototype, it's a simple trick to be able to port it later on your favorite class implementation (such as Dean Edwards' base / base2, prototype class implementation or any other )

Table of content

Helpers definition

Well, to define helpers you just need to add them to the App.Templates.Helpers namespace. Here are some of mine :

App.Templates.Helpers = {
  /**
   * include an already compiled template
   *
   * @param {Object} asTplName
   * @param {Object} context
   */
  include:(function( asTplName, aoContext){
    return App.Templates.find(asTplName).process(aoContext);
  }).bind(window),
  /**
   * write a tag opening with the given tagname and the given properties
   * example :
   * ${%open_tag('div', {id:"foo",class:"bar",style:{width:'50%',background:'#000',color:'#fff'}})%}
   * I'm currently looking for a solution to make it more readable
   */
  open_tag:function( asTagName, aoProperties ){
    var _oProperties = aoProperties || {};
    var _aProperties = [asTagName];
 
 for( var _i in _oProperties)
 {
   var _val = '';
   if(typeof(_oProperties[_i]) == 'object')
   {
     _val = [];
     for(var _j in _oProperties[_i] )
  {
     _val.push(_j+':'+_oProperties[_i][_j]);
  }
  _val = _val.join(';');
   }
   else
   {
     _val = _oProperties[_i];
   }
   
   _aProperties.push(_i+'="'+_val+'"');
 }

    return '<'+_aProperties.join(" ")+'>';
  }
}

To conclude, I'll say that I use this for the binding when I include libraries into a closure (As I do for every code in this blog) to avoid polluting the main namespace with utilities functions or prototype extensions (just as used in the JST code with the array prototype for IE5 bugfix)

Table of content

Conclusion

Some improvements can be done, such as utilities functions to register new helpers or a function to update the element with template result (and optionally evaluate scripts).
You can also allow some options to determines which modifiers to use, to auto-load them...

Table of content

Ant scripting

Table of contents

1. Introduction
2. Define the project
3. Define entry points
4. Code snippets
   1. Use ant as a template engine
   2. Use ant to auto-compress your code
5. Ressources

Introduction

Hy there, I just started to use Ant build, and I figured out that starting learning it wasn't as obvious as expected.
I first read the Manual homepage but it wasn't clear enought for a stupid guy as I am, so I decided to create this post with some Javascript dedicated code snippets and a (very) quick introduction to ant scripting. I hope it will be usefull to someone ^^

Table of content

Define the project :

Ant script as every XML document has to declare a root node. This root node is a project node and can take following arguments :

name :

your build project name

default :

your build default entry point

basedir :

the directory used as base for path evaluation

You can add to your script a description via the description tag, just put plain text as done here

<project name="yourProjectName" default="defaultTask" >
 <description>
   This project does....
 </description>
</project>

Table of content

Define the entry points :

An entry point in an Ant script is a stand alone task. It is represented with a target node. This node can accept following attributes :

name :

your task / entry point name

depends :

more or less the scripts to execute before.

So as an ant build is generally used to create or deploy a project, let's assume there is at least the two following tasks : CLEAN and DEPLOY. So our script now looks like :

<project name="yourProjectName" default="defaultTask" >
 <description>
   This project does....
 </description>

 <target name="CLEAN">
    <!-- include your tasks here -->
 </target>

 <target name="DEPLOY">
    <!-- include your tasks here -->
 </target>

</project>

So, here is our first ant script with two tasks. You can run it in any eclipse environnement by dragging this xml file to the ant view and double-clicking on one of the created tasks name.

Before going further, let's see 2 usefull functionnalities : how to call a task within your tasks and print a message.

To print a message use the echo tag. Two ways are possible :
Just print your message between the node like this :

<echo>
  Your message to print
</echo>

or use the message attribute :

<echo message="Your message to print" />

Now to call a task while processing an other, just use the antcall tag.
For example to call clean while processing the deploy task, just modify previous code with following :

<target name ="DEPLOY">
    <!-- include your tasks here -->
    <antcall target ="CLEAN">
 </target>

Easy isn't it ?
Well before giving some usefull(?) code snippets for Javascript developpement, here is the ant core functions references

Table of content

Code snippets:

Use ant as template engine:

Didn't you dream of a world in which you can define the version of your project in only one place ? A world where you can change your library namespace as many time as you want ?
So, Ant makes it possible whatever the platform you're working on !

First of all, you have to define all your variables in a myFile.properties file. Then, everywhere you want thoose variables to be replaced, just write it into dollar baces :

• ${myVar}
• ${PROJECT_VERSION}

Then in your myFile.properties file, define your values in following way :

• myVar=MyVarReplaced
• PROJECT_VERSION=1.0

It is recommended you externalizes the variables used for input and output :

• destDir=absolute/path/or/relative/to/basedir
• sourceDir=absolute/path/or/relative/to/basedir

So, here we are ready to process the datas using following code :

<target name="REPLACE_VAR" >

   <loadproperties srcfile="myFile.properties">

   <copy todir="${destDir}" overwrite="true" includeEmptyDirs="true" >
     <fileset dir="${sourceDir}" />
       <filterchain>
          <expandproperties/>
       </filterchain>
   </copy>

 </target>

To go further, just visit the filterChain manual page and especially the expandproperties section.

Table of content

Use ant to auto-compress your code:

Javascript is a a script language, so it is delivered as you publish it with comments and whitespaces. Well what if I tell you that you can compress it up to 80% ! Let's see how to do that ;)

First, you need to install some JAR files defining the functions we need ANT to use. I'm using Eclipse 3.3, so I will detail how to do with this platform. If you uses something else, just search the web !

1. open the window > preferences pannel
2. Choose the Ant > Ressources in the left box
3. Select the ClassPath tab and click on global entries to enlight the line
4. Press the Add external JARs... button
5. select your JAR file and validate. You're now ready to use the newly intalled library !

I choosed the DOJO compressor ( relying on rhino ) you can download on the lcasoft website.
Just add rhino.jar and compress-js.jar to your ant libraries to make the compress-js function available in your ant build.
Let's see an example on how to use it :

 <!-- Import the task -->
 <taskdef name="compress-js" classname="com.webpanes.tools.ant.taskdefs.CompressJS" classpathref="cp"/>

 <target name="COMPRESS_CODE">
    <compress-js file="myFile.js" tofile="myCompressedFile.js"/>
 </target>

To go further you can read the compress-js documentation

Table of content

Ressources :

Ressources :

• Ant Manual homepage
• ant core functions references

Jar files :

• lcasoft website for compress-js
• Ant contrib. To go further just read the Ant-Contrib manual and the tasks definitions

Table of content

Ouverture

Ca y est, j'ai enfin décidé d'ouvrir un blog. Le but est de faire partager mes expériences de programmation, publier les quelques bouts de code que je développe, et surtout concentrer en un seul lieu l'ensemble des articles que je trouve intéressants. bonne lecture à tous ! (bon ok, bonne lecture à moi ;p) Ce premier article est en francais, mais comme tout outil technique, les prochains postes seront en anglais.