Codeology

I spent the weekend working on writing a better API wrapper for Litmos, if you don’t know what Litmos is it’s a Learning Management System; it’s quite simple and uses ExtJS in some parts and has a nice REST API for management which is the part I’ve been wrapping.

Litmos itself provides a .NET 3 WCF service however it’s limited and requires you to know/understand the underlying REST calls. I removed these requirements and wrote it as an object orientated framework for .NET 2.0. Currently it’s only available as a repository checkout from Google Code but I’m working on a proper binary release.

Check out the project space here.

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 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.

I’ve just finished up writing an article on implementing compression in ASP.NET web pages using nothing more than the .NET Framework on RemObjects Oxygene.

You can read it here.

So today I toyed around with the idea of loading JavaScript files on-demand rather than all at once on page load. The idea is it will not slow down page loading and also you could make it conditional so you only load JavaScript if it’s needed, say if a user makes a certain choice.

My initial effort was:

function loadScript(url)
{
	var el = document.createElement("script");

	el.type = "text/javascript";
	el.src = url;

	document.getElementsByTagName("head")[0].appendChild(el);
}

Fairly simple, create a new <script> tag, set up its attributes then append it to the <head> tag. However when I came to run it with the following code it didn’t want to play ball:

<html>
	<head>
		<title>Test</title>
	</head>
	<body>
		<script type="text/javacript" src="scriptloader.js"></script>
		<script type="text/javascript">
			alert("Start");

			loadScript("otherscript.js");

			// Call something in other script
			DoOther();

			alert("Stop");
		</script>
	</body>
</html>

I’m not sure why this didn’t work but I suspect it’s because the JavaScript file isn’t actually completely loaded by the time I call DoOther() which means DoOther() doesn’t exist yet. Thankfully trawling around online I found somebody else had solved this issue by using a callback and waiting for the script to become ready.

His code is:

/**
 * function loadScript
 * Copyright (C) 2006-2007 Dao Gottwald
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 2.1 of the License, or (at your option) any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public
 * License along with this library; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 *
 * Contact information:
 *   Dao Gottwald  <dao@design-noir.de>
 *
 * @version  1.6
 * @url      http://design-noir.de/webdev/JS/loadScript/
 */

function loadScript(url, callback) {
	var f = arguments.callee;
	if (!("queue" in f))
		f.queue = {};
	var queue =  f.queue;
	if (url in queue) { // script is already in the document
		if (callback) {
			if (queue[url]) // still loading
				queue[url].push(callback);
			else // loaded
				callback();
		}
		return;
	}
	queue[url] = callback ? [callback] : [];
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.onload = script.onreadystatechange = function() {
		if (script.readyState && script.readyState != "loaded" && script.readyState != "complete")
			return;
		script.onreadystatechange = script.onload = null;
		while (queue[url].length)
			queue[url].shift()();
		queue[url] = null;
	};
	script.src = url;
	document.getElementsByTagName("head")[0].appendChild(script);
}

As you can see this is way more extensive and complete than my paltry effort. Plugging this into my little example we have:

<html>
	<head>
		<title>Test</title>
	</head>
	<body>
		<script type="text/javacript" src="scriptloader.js"></script>
		<script type="text/javascript">
			alert("Start");

			loadScript("otherscript.js",function() {
				// Call something in other script
				DoOther();
			});

			alert("Stop");
		</script>
	</body>
</html>

Of course, it will get to alert(”Stop”) long before it calls DoOther() due to the asynchronous nature of the call but it will be able to call DoOther() now.