Werx Limited » javascript

node.js at Facebook

wes — Mon, 23 Jan 2012 14:18:24 +0000

No related content found.

Ext.ux.JSONP for ExtJS 4

wes — Thu, 07 Apr 2011 13:28:41 +0000

Here is a solution for making simple JSONP requests in ExtJS 4

Ext.define('Ext.ux.JSONP', {
    extend: 'Ext.data.ScriptTagProxy',
    alias: 'ux.jsonp',

    createRequestCallback: function(request, operation, callback, scope) {
        var me = this;

        return function(response) {
            callback.apply(scope, [response]);

            operation.setCompleted();
            operation.setSuccessful();
            me.afterRequest(request, true);
        };
    }
});

No related content found.

Share/Save

Simple message bus for extjs 4

wes — Tue, 05 Apr 2011 18:52:54 +0000

Here’s a simple message bus/broker I wrote for Ext.js 4

Ext.define('Ext.ux.MessageBroker', {
    extend: 'Ext.util.Observable',

    statics: {
        instance: null,
        setInstance: function(i) {
            this.instance = i;
        },
        sendMessage: function(msg, data) {
            this.fireEvent('message',{"msg":msg,"data":data});
        }
    },

    constructor: function(config){
        this.addEvents({
            "message" : true
        });

        if(config && config.listeners) this.listeners = config.listeners;

        Ext.ux.MessageBroker.superclass.constructor.call(this, config)
    }

}, function() {
    Ext.ux.MessageBroker.setInstance(new Ext.ux.MessageBroker());
});

// Sending a message:
Ext.ux.MessageBroker.sendMessage("load_stock", {"symbol":"INTC"});

// Recieving a message:
Ext.util.Observable.observe(Ext.ux.MessageBroker);
Ext.ux.MessageBroker.on('message', function(msg) {
    console.log('message fired: ',msg);
});

No related content found.

Share/Save

Calculate a color gradient in Javascript

wes — Tue, 08 Mar 2011 16:44:33 +0000

Here is a simple Javascript class to calculate the percent of a gradient between two colors given the percent (as a float 0-1) and two colors. Uses functions from php.js.

Color = function() {
};

Color.hexdec = function(hex_string) {
    hex_string = (hex_string + '').replace(/[^a-f0-9]/gi, '');
    return parseInt(hex_string, 16);
}

Color.dechex = function(number) {
    if (number < 0) {
        number = 0xFFFFFFFF + number + 1;
    }
    return parseInt(number, 10).toString(16);
}

Color.pad = function(number, length) {
    var str = '' + number;
    while (str.length < length) {
        str = '0' + str;
    }
    return str;
}

Color.calcgrad = function(val, color1, color2) {

    if(!color1.match(/^#[0-9a-f]{6}/) || !color2.match(/^#[0-9a-f]{6}/)) return 'match err!';

    if (val > 1) {
        val = 1;
    }
    if (val < 0) {
        val = 0;
    }
    val = parseFloat(val);

    c1 = [Color.hexdec(color1.substr(1,2)), Color.hexdec(color1.substr(3,2)), Color.hexdec(color1.substr(5,2))];
    c2 = [Color.hexdec(color2.substr(1,2)), Color.hexdec(color2.substr(3,2)), Color.hexdec(color2.substr(5,2))];

    if (val < .5) {
        delta = [(c2[0] - c1[0]), (c2[1] - c1[1]), (c1[2] - c2[2])];
        arrColor = [c1[0] +¹ * 2), c1[1] -² * 2), c1[2] -³ * 2)];
    }
    return '#'+Color.pad(Color.dechex(arrColor[0]),2)+Color.pad(Color.dechex(arrColor[1]),2)+Color.pad(Color.dechex(arrColor[2]),2);
}

No related content found.

delta[0] * val) * 2), c1[1] + ((delta[1] * val) * 2), c1[2] - ((delta[2] * val) * 2)]; } else { delta = [(c1[0] - c2[0]), (c1[1] - c2[1]), (c1[2] - c2[2])]; arrColor = [c1[0] - ((delta[0] * (val - .5
delta[1] * (val - .5
delta[2] * (val - .5

Share/Save

Javascript implementation of Java’s String.hashCode() method

wes — Thu, 13 May 2010 12:00:14 +0000

Here is a direct replacement for Java’s String.hashCode() method implemented in Javascript.

I wrote this function to fulfill a requirement at work. Apparently, the back-end engineers thought hashCode() was a standard function. One of the hurdles for this project was not only figuring out how to translate the mathematical formula used in Java to generate hashCode()’s but also how to force Javascript to use 32bit integer math (no small feat).

Fortunately, I discovered that Java supports bitwise operators which are constrained to 32bit integer math.

So here’s the resulting String prototype in Javascript. With this prototype you can simply call .hashCode() on any string, ie. “some string”.hashCode(), and receive a numerical hash code (more specifically, a Java equivalent) such as 1395333309.

String.prototype.hashCode = function(){
	var hash = 0;
	if (this.length == 0) return hash;
	for (i = 0; i < this.length; i++) {
		char = this.charCodeAt(i);
		hash = ((hash<<5)-hash)+char;
		hash = hash & hash; // Convert to 32bit integer
	}
	return hash;
}

No related content found.

Share/Save

Primitive OOP observer pattern with ExtJS

wes — Thu, 13 Aug 2009 16:11:45 +0000

Recently I embarked on a quest to design a framework which would help us keep track of large and complex javascript projects in easily identifiable and extendable patterns. After some thought and deliberation, we eventually settled on the observer pattern using Ext’s Ext.util.Observable object as the base object to use in responding to event broadcasts and the Ext.ux.BroadcastEvents plugin for managing global event broadcasts.

Here is the code I came up with for common component elements:

ComponentWrapperBase = Ext.extend(Ext.util.Observable, {
	delayBuild: false,

	eventObj: {
			"buildwidget": true,
			"showwidget": true,
			"destroy": true,
			"refresh": true
		},

	globalEvents: [],

	widget: null,
	widgetCfg: null,

	build: function() {
		if (this.widgetCfg && !this.widget) {
			//console.log("buildwidget", this);
			this.widget = Ext.ComponentMgr.create(this.widgetCfg);
			this.widget.wrapper = this;
			this.fireBuildEvent();
		}
	},

	fireBuildEvent: function() {
		this.fireEvent("buildwidget", this, this.widget);
	},

	showWidget: function(locationId) {
		if (this.widget) {
			if (this.widget.xtype == "window") {
					if (locationId != null) {
						this.widget.show(locationId);
					} else {
						this.widget.show();
					}
			}
			else {

				if (locationId != null) {
					this.widget.render(locationId);
				}
				else {
					this.widget.render();
				}
			}
			this.fireEvent("showwidget", this);
		}
	},

	constructor: function(config){
		if (config) {
			if (config.widgetCfg) {
				this.widgetCfg = config.widgetCfg;
			}

			if (config.delayBuild) {
				this.delayBuild = config.delayBuild;
			}

			// Copy configured listeners into *this* object so that the base class's
			// constructor will add them.
			if (config.listeners) {
				Ext.apply(this.listeners,config.listeners);
			}

			if(config.events && Ext.isArray(config.events)) {
				for (var i=0; iThis creates a simple widget wrapped in an Observable object. You can reach the contained widget through wrapper.widget. Using the framework above, here's how you could create a simple widget.
SimpleTextField = Ext.extend(ComponentWrapperBase, {
	widgetCfg: {
		xtype: 'textfield',
		fieldLabel: 'Name'
	},
	constructor: function(config){		// Constructor is not required, but I've included
							// it to demonstrate the flexibility of this framework
		if (config) {
			Ext.apply(this,config);
		}

		this.widgetCfg.value = 'John Smith';

		SimpleTextField.superclass.constructor.call(this);
	}
});

var simpleTextField = new SimpleTextField();
// Actual component is available at simpleTextField.widget, useful for adding to other containers
That's it! If you have any questions or comments, feel free to post them below.
No related content found.
Share/Save

Cleaning up unresponsive script errors

wes — Fri, 03 Jul 2009 18:58:13 +0000

I recently worked on improving performance in a labor scheduling application. The app was originally designed to load all the employees at one time in one large chunk, processing and stuffing the data into various places as needed on startup. This all worked fairly well on average stores with 50-100 employee records until we discovered several stores with 100+ employee records which caused the browser to display an unresponsive script warning due to the rather heavy pre-processing algorithms.

After scouring the web for clues to help me get rid of this warning without changing settings on the browser, I found out that the only way to avoid these warnings was through a pseudo-threading pattern using setTimeout¹².

One of the patterns I came up with to process a sequence of commands (such as adding records to a store) one at a time while still allowing the browser time to refresh and process other commands:

var chainedTasks = [
   function() {
      console.log('first set of tasks');
   },
   function() {
      console.log('second set of tasks');
   },
   function() {
      console.log('third set of tasks');
   }
];

var currentTaskNum = 0;
var isExecuting = false;
var emptask = {var emptask = {
	scope: this,
	interval: 100,
	run: function(){
		if(currentTaskNum > chainedTasks.length) {
			Ext.TaskMgr.stop(emptask);
		}

		if (!threadIsRunning) {
			threadIsRunning = true;
			if (typeof chainedTasks[currentTaskNum] === 'function') {
				chainedTasks[currentTaskNum](currentTaskNum);
			}
			currentTaskNum++;
			threadIsRunning = false;
		}
	}
};
Ext.TaskMgr.start(emptask);

No related content found.

Share/Save

Javascript resources

wes — Fri, 03 Jul 2009 13:06:26 +0000

Being a scripted language whose behavior can vary depending on the browser environment it is run in, Javascript can be particularly difficult to work with and debug sometimes. Here are a few tools I’ve found to be helpful:

Firebug for FireFox, along with other handy extensions
Visual Studio 2005+, Script Debugger, and/or DebugBar for IE
JSLint, helps keep your code clean and EMCAScript compliant
JSON Validator (and formatter), helps make your JSON data more legible
Aptana, an IDE based on Eclipse with several built-in tools like JSLint to help you avoid simple mistakes.
W3C’s Javascript Reference

These are the most helpful Javascript tools I’ve found. If you know of any more feel free to mention them in the comments below. Happy coding!

No related content found.

Share/Save

Warning: JSLint will hurt your feelings

wes — Mon, 15 Jun 2009 14:42:28 +0000

JSLint is a very helpful code quality utility for javascript that purports to hurt your feelings but helps you write ECMAScript compliant code. Many development suites like Aptana now include lint checking while you code.

A major advantage of making sure your code is linted is that it ensures your code will not be mangled too badly by minification/obfuscators if you decide to use them later on.

No related content found.

Share/Save

Multi-threading in Web 2.0

wes — Wed, 10 Jun 2009 19:21:22 +0000

I’ve been tasked with speeding up a web 2.0 application based on ExtJS 2.2.0 that contains several routines that take up quite a bit of time and, because IE6′s javascript processing engine is less than stellar¹, I needed to find a way to “speed things up”.

Enter Ext.TaskMgr, a helpful ExtJS object that is essentially a glorified setTimeout implementation that allows us to run tasks that don’t block execution. This means we can set our more expensive blocks of code to run later but return control back to the user in the meantime. It’s not true multi-threading, but it does allow us to make the user interface a lot more responsive and in an age when users think 5 seconds is an eternity, perception is everything.

No related content found.

In other words, it sucks pretty bad.