From now on all the transports (and all the relying classes) supports

• Reliability, ‘guaranteed’ delivery of messages
  The new ReliableBehavior adds this to the HashTransport
• Sender-verification,  verifying that the message originates from the original sender. This removes the risk of malicious sites spoofing the sender
  This is added to the HashTransport and NameTransport by the VerifyBehavior
• Queueing, you can now send multiple messages in the same js thread
  This is added to the HashTransport and NameTransport by the QueueBehavior

Behaviors

So what are these behaviors mentioned? Well, a behavior modifies the way a transport works, and it works by sending all events and messages through a pipeline of behaviors, where each one can let it pass, inspect it, modify it, block it etc. Each behavior is automatically chained with the others so that they form a stack, where in principal, each layer talks to the corresponding layer on the other end.

One example of this in action is the fragmentation. When the QueueBehavior receives an outgoing message that is larger than the max fragment size, then instead of queueing only one message, it will queue each fragment with a fragment identifier. The QueueBehaviors dispatcher will then send each message as fast as it can (it gets a callback from the next Behavior in he line when the message is delivered).

On the other end multiple ingoing messages will received at the QueueBehavior, but the message won’t be passed on until all fragments has arrived.

Using behaviors instead of applying the functionality directly to the classes adds a lot to the table

• Re-usability, the same behavior can be applied to all transports that accepts these.
• Separation, each new feature is contained in a separate class, and since the pipeline is layered, you can safely introduce e.g sender-verification without risking breaking the code that handles the sending/receiving.
• Structure, the code is a lot easier to read and understand, and adding new behaviors are a breeze.

This is a sample from the HashTransport and shows how behaviors are applied internally

easyXDM.applyBehaviors(this, [
    new easyXDM.transport.behaviors.ReliableBehavior({
        timeout: ((useResize ? 50 : pollInterval * 1.5) + (usePolling ? pollInterval * 1.5 : 50))
    }),
    new easyXDM.transport.behaviors.QueueBehavior({
        maxLength: 4000 - _remoteUrl.length
    }),
    new easyXDM.transport.behaviors.VerifyBehavior({
        initiate: isHost
    })
]);

In the future these will be overridable, and you will be able to inject your own if you want to.

Conclusion

If you haven’t already, go download the newest version and enjoy the new features!

Fragmenting

The first is definitely something that many has been waiting for, until now the HashTransport class just didn’t cope with messages that would create URLs longer than 4095 character (the maximum size allowed by IE6). If a longer message was send (something that could easily happen when using the Interface class), the transport would just fail. But not anymore, you are now able to send however long messages you’d like, and of course, this was all made possible with the new queuing feature.

Queuing

Until now, when you tried to rapidly send messages, if you were so unfortunate to do so before the message had been read, it would be overwritten. This was especially easy to do when the HashTransport was in polling mode, as it then only checks for new messages every 300ms.

Both the HashTransport and the NameTransport has now been extended with a queuing feature, meaning that all messages will first go into a queue, which will then be emptied in a LIFO fashion.

Conclusion

easyXDM just got even better, thats about it. The only known feature request as it is now is message receipts, making the transport completely reliable, but I’m think this probably belongs in the Channel class..

By the way, the Continual Integration system has now been set up so that the test suite for the current head from GitHub will always be available at http://easyxdm.net/dev/tests/.

And one final thing: The project has finally got its first contributors!

To make it easier to do this using easyXDM, I have now published an example how how to do this here.

It really is easy, on the page hosting the iframe you use the following to load the iframe

var transport = new easyXDM.transport.BestAvailableTransport({
    local: "../hash.html",
    remote: "http://provider.easyxdm.net/example/resized_iframe.html",
    container: document.getElementById("element_that_should_contain_the_frame"),
    onMessage: function(message, origin){
        this.container.getElementsByTagName("iframe")[0].style.height = message + "px";
    }
});

And then you put the following in the iframes body after the content

var transport = new easyXDM.transport.BestAvailableTransport({}, function(){
    transport.postMessage(document.body.scrollHeight);
});

Thats it!
Again, the sample can be viewed here.

Well, easier said than done – there just is no decent frameworks for this.

During my searching I found some references to libraries such as Cerny.js and ecmaDebug, but these just didn’t make the cut  - they all required heavy (and hard to follow) restructuring of your code to make them work.

So what did I do? Well I made jsContract, a library that is clean and .. wait for it .. extremely easy to use!

If you want a quick view on what Code Contracts can give you, take a look at this example!

The following method comes from the sample code in the link above

    function _internalMethod(a, b){
        Contract.expectNumber(a);
        Contract.expectNumber(b);
        Contract.expectWhen(config.mode === "divide", b > 0, "Divisor cannot be 0");
        Contract.expectWhen(config.mode === "multiply", a > 0 && b > 0, "The multiplicands cannot be 0");
        Contract.guaranteesNumber();
        Contract.guarantees(function(result){
            return result > 0;
        }, "Result must be > 0");

        if (config.mode == "divide") {
            return a / b;
        }
        // At this point config.mode must be "multiply"
        return a * b;
    }

As you can see, the contract statements does not ruin the flow of the code, rather, it helps to document it.
By looking at the contract at the start of the method, you can instantly see what the method expects and what it will return.
This also helps you reduce code since you do not need to check for conditions that are not allowed according to the contract.

Postconditions

So, you might be wondering about how the Contract.guarantees methods work? How can a statement placed in the head of the method possibly check the return value of the method?
Well, the above code will actually not check the return value when run, but by running it through  Contract.instrument we can get code that will!
This is the output created by Contract.instrument for the above code

    function _internalMethod(a, b){
        arguments.callee.isInstrumented = true;
        /*preconditions*/
        Contract.expectNumber(a);
        Contract.expectNumber(b);
        Contract.expectWhen(config.mode === "divide", b > 0, "Divisor cannot be 0");
        Contract.expectWhen(config.mode === "multiply", a > 0 && b > 0, "The multiplicands cannot be 0");
        var __return = (function(a, b){
            if (config.mode == "divide") {
                return a / b;
            }
            // At this point config.mode must be "multiply"
            return a * b;
        }(a, b));
        /*postconditions*/
        Contract.guaranteesNumber(__return);
        Contract.guarantees(__return, function(result){
            return result > 0;
        }, "Result must be > 0");
        return __return;
    }

As you can see the code block has been wrapped in an anonymous function, the postconditions has been moved below this and has been rewritten so that they take the result as an argument.

We now have both pre- and postconditions checking our code!

The framework handles nested functions just as you would expect it to and the only real change to your code is the extra anonymous function that is inserted when the parser finds a postcondition in use.

But now you might be wondering, how do we get the instrumented code in to our applications?

For this you have several options

• Use tools like this to convert the code for you before pasting it into a js file
• Use it as a part of you build process for automated generation
  • a commandline tool will be available shortly
• Use dynamic loading and instrumentation at runtime

The last option is only viable for development scenarios, but that is mainly when code contracts are needed anyways.
To load scripts dynamically you can either use your own AJAX code, or use the built in Contract.load method

The following code is taken from the  example available with the framework

var instrument = (location.search && location.search.indexOf("instrument=true") !== -1);
Contract.load("MyClass.js", instrument, function(){
    try {
        var myClass = new MyClass({
            mode: "multiply"
        });

        var result = myClass.publicMethod(34, 5, 3);
    }
    catch (ex) {
        alert(ex.message);
    }
});

This code loads regular or instrumented code depending on the query string.

Doesn’t it look cool?

Its available at github and will most likely be licensed with an MIT style license.

Anybody want to join in, maybe help with some documentation etc?

Drop me a note if so!

Note: This is the first draft, I started this project today.

The parser is quite naive and strings matching ‘function(‘ etc and unmatched { and } in comments  will break it. But this is a work in progress

Update 1 04.02: { and } in comments are now safely handled, and several small issues has been corrected.

Now I only need to validate that the functions the parser finds are not part of a comment.

Update 2 04.02: The parser has now been fixed, it now completely ignores anything in the comments. As far as I know this means that as long as the code validates the parser should be solid as a rock!

This seems to be a dealbreaker for many as they are unable to upload files to the server, either due to special systems, or because they just want to present an API in the form of ‘just include this javascript file’ etc..

With the new 1.5.5 release, this has all changed.

For scenarios where you do not want to upload the hash.html file, you can now point the local attribute to any file present on the local domain, like robots.txt or favicon.ico, and supply a readyAfter attribute with the number of milliseconds to wait before assuming the local file to be loaded and the library to be ready for interaction.

{
local: "/robots.txt",
readyAfter: 1000,
remote: "http://.........",
...
}

Update: Just released 1.6.0 which makes it possible to utilize the current document instead of loading a new one from the local domain. This makes it very easy to integrate, but does mean that you will be modifying the documents location when falling back to the HashTransport – and this might interfere with for instance history managers etc.

{
local: window,
remote: "http://.........",
...
}

The hash.html file is still the recommended approach for stable
implementations as it is unobtrusive and it guarantees that the library is indeed ready
when transitioning into a ready state.
Using hash.html also shortens the time needed to initialize easyXDM
as there is no need for the delay to give the local file time to
properly load.

All the different ways to set up easyXDM can now be viewed at http://easyxdm.net/wiki/Documentation.ashx

Ext.namespace("Ext.ux");
Ext.ux.Privileges = function(config){
    var _formPanel = this;
    var items = [];

    for (var key in config.privileges) {
        if (config.privileges.hasOwnProperty(key)) {
            items.push({
                name: "privilege_" + config.privileges[key],
                fieldLabel: key
            });
        }
    }

    Ext.apply(config, {
        defaultType: "checkbox",
        items: items,
		/**
		 * Updates the form according to the current privileges
		 * @param {Integer} p The integer containing all set privileges
		 */
        setValue: function(p){
            var field, values = {}, privilege;
			for (var key in config.privileges) {
				// Loop over all the privileges, set the value to true if set
                if (config.privileges.hasOwnProperty(key)) {
                    privilege = config.privileges[key];
                    values["privilege_" + privilege] = (p == (p | privilege));
                }
            }
			// Update the form
            _formPanel.form.setValues(values);
        },
		/**
		 * Returns an integer representing all set privileges
		 * @return Integer
		 */
        getValue: function(){
            var p = 0, field, privilege;
			for (var key in config.privileges) {
				// Loop over all the privileges and see if it is set
                if (config.privileges.hasOwnProperty(key)) {
                    privilege = config.privileges[key];
                    field = _formPanel.form.findField("privilege_" + privilege);
                    if (field.getValue()) {
						// The privilege is set, lets add it to p
                        p = p | privilege;
                    }
                }
            }
            return p;
        },
		/**
		 * Resets the form
		 */
        clear: function(){
            _formPanel.form.reset();
        }
    });
    Ext.ux.Privileges.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.Privileges, Ext.form.FormPanel);

Using the following code

var _pnlPrivileges= new Ext.ux.Privileges({
	height: 180,
	privileges: {
	    Read: 1,
	    Write: 2,
	    Create: 4,
	    Delete: 8,
	    List: 16,
	    SetPrivileges: 32,
	    Publish: 64
	}
});

you end up with something like this

The controll exposes its functionality in two methods, setValue and getValue – both of these should be easy to understand

This has many advantages,

• you only have a single value representing all privileges
• you can add and remove available privileges without altering the schema/entity model/storage logic
• checking for privileges are very simple

Now you might be wondering, how is it possible to store any number of privileges in a single integer?
One of the keys to doing this are the values that you assign each privilege, these must each be twice the previous value.

For example

• Read = 1
• Write = 2
• Delete = 4
• … = 8

To understand why we do it like this we need to take a look at the individual integers binary representation

1 = 00000001
2 = 00000010
4 = 00000100
8 = 00001000

Anyone see the pattern?

And if you were to sum some of these, say Write (2) + Delete(4)

00000010
+
00000100
=
00000110

Again, you see the pattern?

Each privilege is being stored as a single bit in the integer, and each bit can be checked against even if you add multiple values together.

So, now that we have some of the theory covered, how do we utilize this?

If you have an integer you can easily check for any fraction using a simple statement

In JavaScript

var allPrivileges = 6;
var hasWrite = (allPrivileges  == (allPrivileges  | 2));

In VB.net

Dim allPrivileges As Integer = 6
Dim hasWrite As Boolean = allPrivileges = (allPrivileges Or 2)

Here we are using the bitwise operator | (or) to check that allPrivileges (6) binary or‘ed with 2 equals 6, meaning that 2 is a contained fraction of 6.

Now if you want to add a new privilege (or existing one) you just binary or the current integer with the new integer
In JavaScript

var allPrivileges = 4;
allPrivileges = allprivileges | 2;
// allPrivileges equals 6
allPrivileges= allprivileges | 2;
// allPrivileges still equals 6

In VB.net

Dim allPrivileges As Integer = 4
allPrivileges = (allPrivileges Or 2)
' allPrivileges equals 6
allPrivileges = (allPrivileges Or 2)
' allPrivileges still equals 6

Wasn’t that easy?

In an upcoming post I will show you a simple ExtJs control for visualizing and modifying a users privileges.

One way of doing this indirectly would be to set a cookie using javascript when the page loads and then use the unload event to remove the cookie. This means that as long as there is an instance open, the cookie will be set, and this can be tested for when the page loads.

window.onload = function(){
    if (document.cookie.indexOf("_instance=true") === -1) {
        document.cookie = "_instance=true";
        // Set the onunload function
        window.onunload = function(){
            document.cookie ="_instance=true;expires=Thu, 01-Jan-1970 00:00:01 GMT";
        };
        // Load the application
    }
    else {
        // Notify the user
    }
};

The disadvantage of doing it this way is that you increase the amount of data being sent to the server with each request as all cookies are being sent, but the cookie could be restricted to the documents path so that it would not be sent with non-matching requests.

The direct way would be to try to get a reference to the existing window using its name, but this does involve using window.open, which means the method could be blocked and rendered unreliable by popup blockers. But then again, complex application often need popups to be enabled and one could use this to check for and alert the user about the popup blocker.

window.onload = function(){
    var doLoad = false, name = "unique_name", existing = window.open("", name, "");
    if (!existing) {
        // Notify the user about allowing popups
        alert("Popup blocker detected\nPlease allow popups for this domain.");
        return;
    }
    if (window === existing) {
        doLoad = true;
    }
    else {
        if (existing.document.title !== window.document.title) {
            // The referenced window is not an existing instance
            doLoad = true;
            existing.close();
            window.name = name;
        }
    }
    if (doLoad) {
        // Load the application
    }
    else {
        // Notify user
    }
};

Which way you choose is entirely up to you.
If you know any other ways, feel free to add it in the comments

According to the book description the following subjects will be covered

• Work with different browsers, platforms, and the DOM, as well as determine and understand the different ExtJS data types
• Create your own custom Ext JS data types as you extend their functionality
• Build great-looking and friendly forms by using client and server-side field validation, form loading, submission, field customization, and layout techniques
• Explore the different layouts provided by the Ext JS library as well as create your own, and understand their common uses
• Display, edit, and group tabular data generated by the server using Grid Panels
• Explore the advantages and the efficiency tradeoffs of widgets such as Combo boxes
• Use the drag and drop features of the grid component, data editing with the new RowEditor Class, and the new lightweight ListView component
• Explore multiple ways of displaying master-details relationships
• Group components or information under the same container to build hierarchical views of information by using TabPanel components
• Use patterns to build a solid and flexible application architecture and implement additional design patterns such as auto-saving form elements, component state management, and code modules to build robust and flexible applications with Ext JS
• Build your own custom components on top of the Ext framework and enhance the custom components created by the Ext JS users’ community

I’m looking forward to this as Ext and JavaScript are two things that I am quite passionate about

Using both ASP.NET AJAX and ExtJS on the same page does not create any serious problems (I think there might be a couple of collisions on the Date object), but it does mean that you have quite a bit of overhead.

Removing the ASP.NET AJAX framework does not work initially as the generated proxy code needs this to work, so if we remove the ASP.NET AJAX framework, well, then we are going to need to replace it with something that caters to the proxy codes needs without the extra overhead of loading the entire ASP.NET AJAX framework. And here it is – this is the minimum of code needed to bootstrap the automatically generated proxy code, and to tie it into the ExtJs framework. If you want to use it with a different framework then it should not be a difficult task to exchange the Ext dependencies.

// Extend Functions prototype
Ext.apply(Function.prototype, {
    initializeBase: function(instance, baseArguments){
    },
    registerClass: function(typeName, baseType, interfaceTypes){
        if (baseType) {
            Ext.apply(this.prototype, baseType.prototype);
        }
    },
    registerEnum: function(name, flags){
    }
});
// Add Type and Type.registerNamespace
Ext.namespace("Type");
Type.registerNamespace = Ext.namespace;

// Create the Sys.Net.WebServiceProxy object
Ext.namespace("Sys.Net");
Sys.Net.WebServiceProxy = function(){
};
Sys.Net.WebServiceProxy._generateTypedConstructor = function(type){
    return function(properties){
        if (properties) {
            for (var name in properties) {
                this[name] = properties[name];
            }
        }
        this.__type = type;
    };
};
Ext.apply(Sys.Net.WebServiceProxy.prototype, {
    _invoke: function(path, action, useGet, params, onSuccess, onFailure, userContext){
	// Use Ext.Ajax to perform the xhr call
        Ext.Ajax.request({
            url: path + "/" + action,
            method: useGet ? "get" : "post",
            jsonData: params,
            success: function(data){
                onSuccess(Ext.decode(data.responseText).d);
            },
            failure: function(data){
                onFailure(Ext.decode(data.responseText).d);
            },
            scope: userContext
        });
    },
    set_path: function(path){
        this._path = path;
    },
    get_path: function(){
        return this._path;
    }
});