It’s nearly Christmas and I haven’t posted anything since September so just thought I’d do a quick dribble to remind people I’m alive. Busy with work but working on a couple of interesting projects ready for the new year, so watch this space!

Seems Webhost4Life shafted me earlier this week by reconfiguring their databases thus invalidating my settings. Sigh. I’m slowly loosing patience with them and I’m going to look at moving to some other host that treats customers a little better as this is another problem in continuing issues I’m having with them as hosts.

Just to announce although a bit late for April, but I’ve recently wrote two articles for JSMag. I highly recommend JSMag to any JavaScript developers who may be reading this.

My first article in April details with using on-demand JavaScript loaded with ExtJS – http://www.jsmag.com/main.issues.description/id=31/

The second article, for May details implementing client-side caching of JavaScript – http://www.jsmag.com/main.issues.description/id=32/

I had some spare time this evening so I started to play around and wrote my own client side JavaScript object cache for use with ExtJS. It’s fairly simple to use with get/set functions to call and works in terms of seconds, for example to cache a simple JavaScript object you can do:

Ext.ux.Cache.set("myJsonData",{test: 1234},10);

This would cache it for ten seconds before having it removed. I’ve even implemented some events. To be notified when items expire for example:

Ext.ux.Cache.on("expired",function(cache,removed) {
  alert(removed.length + " items expired.");
});

This comes into its own with the likes of AJAX requests, one test scenario:

function dataSuccess(data) {
    ...
};

if (Ext.ux.Cache.has("data")) {
    // Process cached data
    dataSuccess(Ext.ux.Cache.get("data"));
} else {
    // Request new data
    Ext.Ajax.request({
        url: "whatever.ashx",
        scope: this,
        success: function(response,options) {
            // Decode data
            var data = Ext.decode(response.responseText);

            // Cache data for 30 seconds
            Ext.ux.Cache.set("data",data,30);

            // Process data
            dataSuccess(data);
        }
    });
}

Anyhow enough of the examples here’s the actual code for you to play with:

Ext.ux.CacheEngine = Ext.extend(Ext.util.Observable,{

    cache: [],

    constructor: function(config) {

        this.addEvents({
            "added": true,
            "updated": true,
            "removed": true,
            "expired": true
        });

        Ext.apply(this,config);

        var cache_task = {
            run: function() {
                // Get current time
                var now = new Date().getTime();

                // Process cache items to remove
                var to_remove = [];

                for(var i = 0, len = this.cache.length; i < len; i++) {
                    // Get cached item
                    var item = this.cache[i];

                    // Check time
                    if (item.expires < now) to_remove.push(item);
                }

                // Remove items
                var removed = [];

                for(var i = 0, len = to_remove.length; i < len; i++) {
                    var item = to_remove[i];
                    var removed_item = {
                        key: item.key,
                        value: item.value
                    };

                    removed.push(removed_item);
                    this.cache.remove(item);
                }

                // Fire event
                if (removed.length > 0) this.fireEvent("expired",this,removed);
            },
            interval: 1000,
            scope: this
        };

        Ext.TaskMgr.start(cache_task);

        // Call our superclass constructor to complete construction process.
        Ext.ux.CacheEngine.superclass.constructor.call(config)
    },

    clear: function()
    {
        this.cache = [];
    },

    get: function(key)
    {
        // Get item
        for(var i = 0, len = this.cache.length; i < len; i++) {
            var item = this.cache[i];

            if (key == item.key) return item.value;
        }

        // Return
        return null;
    },

    set: function(key,value,timeout)
    {
        timeout = timeout || 10;

        // Find item
        for(var i = 0, len = this.cache.length; i < len; i++) {
            var item = this.cache[i];

            if (key == item.key) {
                // Update item
                item.value = value;
                item.expires = new Date().getTime() + (timeout * 1000);

                // Fire event
                this.fireEvent("updated",this);

                // Return
                return;
            }
        }

        // Add new item
        var item = {
            key: key,
            value: value,
            expires: new Date().getTime() + (timeout * 1000)
        };
        this.cache.push(item);

        // Fire event
        this.fireEvent("added",this);
    },

    remove: function(key)
    {
        // Find item
        for(var i = 0, len = this.cache.length; i < len; i++) {
            var item = this.cache[i];

            if (key == item.key) {
                // Remove item
                this.cache.remove(item);

                // Fire event
                this.fireEvent("removed",this);

                // Return
                return true;
            }
        }

        // Return
        return false;
    },

    has: function(key)
    {
        // Look for key
        for(var i = 0, len = this.cache.length; i < len; i++) {
            // Get item
            var item = this.cache[i];

            // Compare keys
            if (key == item.key) return true;
        }

        // Return
        return false;
    }

});

Ext.ux.Cache = new Ext.ux.CacheEngine();

I'm going to attempt to create a cached DataProxy and DataReader at some point, that should provide a more useful feature for ExtJS users so they can plug it in directly into existing code.

Bored this evening I decided to tinker with Aptana Studio as it has a nice plugin to create Adobe AIR applications. Using this I combined it with ExtJS to produce an AIR application of the documentation which saves you having to use the temperamental ExtJS servers (at the moment) or browse locally, and is also very snappy. The build I’ve done is for ExtJS 3.1 though I might fiddle and see if I can get one for 2.x and one for core going later.

You can download the AIR application here.
If the above link does not work, try this one.

I haven’t posted in quite a while so I thought I’d pass up a quick alteration to the standard Ext.MessageBox.

Now the original Ext.MessageBox works well however a lot of my windows have buttons with images, including the buttons like “OK” and “Cancel”. In order to keep with the look and feel I decided to add this functionality to ExtJS. Why they haven’t done this already is beyond me, the change was relatively simple.

You will need to patch the Ext.MessageBox code, there is a function called updateButtons you will need to change like so:

var updateButtons = function(b){
        var width = 0,
            cfg;
        if(!b){
            Ext.each(buttonNames, function(name){
                buttons[name].hide();
            });
            return width;
        }
        dlg.footer.dom.style.display = '';
        Ext.iterate(buttons, function(name, btn){
            cfg = b[name];
            if(cfg){
                btn.show();

                if (Ext.isObject(cfg)) {
                    if (Ext.isString(cfg.icon)) btn.setIconClass(cfg.icon);

                    btn.setText(Ext.isString(cfg.text) ? cfg.text : Ext.MessageBox.buttonText[name]);
                } else {
                    btn.setText(Ext.isString(cfg) ? cfg : Ext.MessageBox.buttonText[name]);
                }

                width += btn.getEl().getWidth() + 15;
            }else{
                btn.hide();
            }
        });
        return width;
    };

And that’s basically it. You can then do this:

Ext.MessageBox.show({
    ...
    buttons: {
        ok: {
            text: "Whatever",
            icon: "whatever-css-class"
        }
    },
    ...
});

To prove it works here is two screenshots of before and after the fix:

Before	After

It should be completely backwards compatible, all your original Ext.MessgeBox code will work as originally intended with no modification.

If you don’t want to patch ExtJS directly I’ve ripped the Ext.MessageBox code completely and formed a new variant called Ext.ux.MessageBox which you can use instead. You can get the code to this here.

I’ve been working on implementing caching into some of our products to increase efficiency and speed things up, however I came to a sticking point recently in that our products are often deployed to widely different platforms that don’t all offer the same feature set. This meant that caching on some systems didn’t work the same or at all on others.

Mulling over this today I decided upon a common cache engine that I could plug various cache providers into for available features allowing me to change which caching system to use depending on the platform without having to alter vast amounts of code.

I constructed a Cache class with static methods, a general outline of the class is as follows:

    public class Cache
    {

        public static void Initialize();
        public static void Uninitialize();

        public static bool Use;

        public static void RegisterProvider(ICacheProvider provider);
        public static void UnregisterProvider(ICacheProvider provider);

        public static object Get(string key);

        public static void Set(string key, object value);
        public static void Set(string key, object value, int minutes);
        public static void Set(string key, object value, DateTime dt);
        public static void Set(string key, object value, TimeSpan ts);

        public static void Unset(string key);

        public static bool Exists(string key);
        public static void Clear();

        public static ICacheProvider Default;
        public static ICacheProvider Empty;

    }

This provides a common way to access a cache rather than individualised access methods. For each individual cache system you write a class that implements ICacheProvider which interfaces between the Cache class and the underlying caching system.

The ICacheProvider interface looks like this:

    public interface ICacheProvider
    {

        void Initialize();
        void Unitialize();

        object Get(string key);

        void Set(string key, object value);
        void Set(string key, object value, int minutes);
        void Set(string key, object value, DateTime dt);
        void Set(string key, object value, TimeSpan ts);

        void Unset(string key);

        bool Exists(string key);
        void Clear();

        string Name
        {
            get;
        }

    }

As an example implementation take ASP.NET, which provides a cache as part of the HttpRuntime class. I can write an ICacheProvider to interface to it, such as:

    public class HttpRuntimeCacheProvider : CacheProvider
    {

        public override void Initialize()
        {
            // Do nothing...
        }

        public override void Unitialize()
        {
            // Do nothing...
        }

        public override object Get(string key)
        {
            return HttpRuntime.Cache.Get(key);
        }

        public override void Set(string key, object value)
        {
            DateTime expires = DateTime.UtcNow.AddMinutes(10);

            Set(key,value,expires);
        }

        public override void Set(string key, object value, DateTime dt)
        {
            DateTime expires = dt.ToUniversalTime();

            HttpRuntime.Cache.Insert(key,value,null,expires,System.Web.Caching.Cache.NoSlidingExpiration);
        }

        public override void Unset(string key)
        {
            HttpRuntime.Cache.Remove(key);
        }

        public override bool Exists(string key)
        {
            object value = Get(key);

            return (value != null);
        }

        public override void Clear()
        {
            List<string> keys = new List<string>();

            foreach(DictionaryEntry entry in HttpRuntime.Cache) keys.Add(entry.Key.ToString());
            foreach(string key in keys) HttpRuntime.Cache.Remove(key);
        }

        public override string Name
        {
            get {
                return "HttpRuntime";
            }
        }

    }

We can register and set as default using:

ICacheProvider provider = new HttpRuntimeCacheProvider();

Cache.RegisterProvider(provider);
Cache.Default = provider;

All future requests via Cache will now be handled by the ASP.NET cache.

In the included downloadable source code I’ve wrote providers for ASP.NET, MemCached and my own simple example provider. You can of course take this further and write one to use a database for example.

Below you’ll find the source code to download. I’ve used a custom build of a .NET MemCached client which I’ve also included a link to download. The original can be found here.

As always comments and suggestions welcome!

caching_engine.zip 30 KB

beit_memcached.zip 104 KB

One of the things I like in .NET is the StringBuilder class and since like .NET, JavaScript strings are immutable it makes sense to have one for JavaScript too. I’ve wrote a simple approximation that uses Array and Array.join().

I’ve built this version for use with Ext however you can easily adapt it to run outside of Ext:

Ext.namespace("Ext.util");

Ext.util.StringBuilder = function()
{

    var buffer = [];
    var length = 0;

    this.getLength = function()
    {
        return length;
    };

    this.clear = function()
    {
        buffer = [];
        length = 0;
    };

    this.append = function(s)
    {
        if (s == null) return;

        length += s.length;
        buffer.push(s);
    };

    this.appendLine = function(s)
    {
        if (s == null) return;

        var _s = s + "\r\n";

        length += _s.length;
        buffer.push(_s);
    };

    this.toString = function()
    {
        return buffer.join("");
    };

}

You can use it like this:

var sb = new Ext.util.StringBuilder();

sb.append("Hello");
sb.append(" ");
sb.append("World");

var s = sb.toString();

alert(s);

One of my annoyances with Ext is sometimes some of the widgets only half do what you want and only half support features you’d expect.

Take the TreeLoader, responsible for loading nodes into a Tree. It works well most of the time and I don’t usually need to complain about it, until today. I needed to increase the time-out for the request only the TreeLoader exposes just two configuration options for the actual request, a requestMethod so you can switch between GET and POST and the actual url. Reading the documentation and looking through Firebug there seemed no way of doing what I wanted so I had to delve into the actual source code.

It turns out yet again I need to override a core function of the component, requestData and alter the AJAX request myself. Rather than do a complete override which would affect ALL TreeLoader’s I instead extended it, the full code can be seen below:

    DCStorm.IQ.Profiles.TreeLoader = Ext.extend(Ext.tree.TreeLoader,
    {

        requestData : function(node, callback, scope){
            if(this.fireEvent("beforeload", this, node, callback) !== false){
                if(this.directFn){
                    var args = this.getParams(node);
                    args.push(this.processDirectResponse.createDelegate(this, [{callback: callback, node: node, scope: scope}], true));
                    this.directFn.apply(window, args);
                }else{
                    this.transId = Ext.Ajax.request({
                        method:this.requestMethod,
                        url: this.dataUrl || this.url,
                        timeout: this.requestTimeout,
                        success: this.handleResponse,
                        failure: this.handleFailure,
                        scope: this,
                        argument: {callback: callback, node: node, scope: scope},
                        params: this.getParams(node)
                    });
                }
            }else{
                // if the load is cancelled, make sure we notify
                // the node that we are done
                this.runCallback(callback, scope || node, []);
            }
        }

    });

The only part I actually modified was the AJAX request, I simply added a timeout configuration option and had it pull the requestTimeout value, as can be seen on line 14. So in my new TreeLoader I can do this (line 5):

        loader: new DCStorm.IQ.Profiles.TreeLoader({
             preloadChildren: true,
             clearOnLoad: true,
             requestMethod: "POST",
             requestTimeout: (60 * 2) * 1000,
             dataUrl: "profiles/backend/profiles.ashx?action=columnstree",
             baseParams: {
                        //action: "columnstree",
                        view: this.viewName,
                        level: this.profile.profile.level,
                        agency: ((this.profile.profile.level == 1) ? this.profile.profile.agency : 0),
                        site: ((this.profile.profile.level == 2) ? this.profile.profile.site : 0),
                        sitegroup: ((this.profile.profile.level == 1) ? this.profile.profile.sitegroup : 0),
                        type: "groupings",
                        filter: "",
                        selected: ""
             }
       }),

And that’s pretty much it.

One thing we’ve often found useful but underused is response caching, especially in the Web 2.0 world. There are a variety of options available and here’s a quick example of how to use the built in caching in ASP.NET.

For our example we’re going to cache for no more than 10 minutes, you can alter this as suits you. We’re also caching on an absolute time-scale but ASP.NET lets you also set a sliding time-scale.

public void ProcessRequest(HttpContext context)
{
        // Set Content Type
        context.Response.ContentType = "application/json";

        // Set key
        string key = "mydata";

        // Check cache for our hash
        object cache = context.Cache.Get(key);

        if (cache != null) {
            // Write out cached item
            context.Response.Write("/* From Cache */\r\n");
            context.Response.Write(cache.ToString());
            context.Response.Flush();

            // Return
            return;
        }

        // Get JSON from database or wherever
        string json = "{test:'Hello'}";

        context.Response.Write(json);
        context.Response.Flush();

        // Add response to cache
        context.Cache.Insert(
            key,
            json,
            null,
            DateTime.UtcNow.AddMinutes(10),
            System.Web.Caching.Cache.NoSlidingExpiration
        );
}

What happens is on the request we first check the cache for key. If we find that the cached item exists we retrieve this from the cache and dump that into the response.

If the item doesn’t exist however we generate the item content, be it a database call or whatever. Here this is mostly some kind of JSON so once we have the content we’d normally return we again dump that into the response but this time we also add it to the cache with the same key.

Caching is great for reducing load on databases and processing time, especially with commonly returned data such as dropdown lists who’s data rarely changes.

For further reading and a more fuller introduction to ASP.NET caching click here.