Nicollet.Net

Javascript is frequently used to make an HTML web page dynamic. Most modern browsers support Javascript as a scripting language and provide reasonably standard means of binding code to an event (such as clicking on a button), letting code change the content of the page (such as hiding an object) or even interacting with the server (sending a request and retrieving the data). Despite a lot of compatibility and semantic problems (such as the ability to move objects around in the DOM in a sane way), libraries such as jQuery provide further capabilities and make many things simpler.

Yet, there is still much left to be done.

Javascript, for instance, provides no namespacing, leading to collision risks that are usually circumvented by means of a root object that acts as a namespace-like contraption, with the exception that the code within a namespace cannot be spread over several documents. Javascript also provides no standard and reliable means of creating new behavior and data: while it’s possible to create new data by altering the innerHtml of elements in the DOM, and while the closure system allows the creation of new behavior, creating a new element in the DOM and binding some new behavior do it is very complex to do without library support.

While jQuery proposes means of associating behavior to elements programmatically, it allows too much freedom, which leads to inconsistencies in the way in which objects are defined and thus restrict the interoperability of jQuery-based creations.

JXML : a Javascript Description Language

The aim of JXML is to provide a language that provides a single consistent way of defining UI components in Javascript, and allowing them to work in combination with each other. It works by harnessing the raw power of jQuery to allow a large breadth of behavior types while using a strict model-delegate pattern to encapsulate component behavior independently of its display.

JXML is based on XML. Some sample JXML code would be:

<jx:namespace name="example">
  <jx:var name="default_increment">0</jx:var>
  <jx:component name="incrementer">
    <jx:param name="initial" default="{example.default_increment}"/>
    <jx:var name="current">this.param.initial</jx:var>
    <jx:method name="increment">++this.current ; this.change()</jx:method>
    <button label="Increment">
      <on:click>
        this.model.increment()
      </on:click>
    </button>
    <span name="display">
      <on:refresh>
        this.display.text('The value is ' + this.model.current);
      </on:refresh>
    </span>
  </jx:component>
</jx:namespace>

This code defines an incrementor : a component which contains a button and a bit of text displaying a number. When the button is pressed, the displayed number is incremented. Once the above JXML is compiled and the resulting JS file is included, creating the component is done using:

var model = new example.incrementer({initial:10});

Note, however, that this merely creates the model part of the component. All its variables, parameters and methods are available and can be used as-is, for instance writing model.current = 25 or model.increment(). To create the UI delegate, one must specify the position where the delegate should be placed. This is done by passing a function which accepts HTML as its input and places it somewhere in the DOM. For instance, using jQuery:

var view = model.show(function(x){$("div#target").html(x)})

This automatically creates a new UI delegate, inserts it where specified, and decorates it with all the events (such as responding to button clicks). It also returns a view object, which contains a model member (that references the original member) and one member for each named element in the view stored as a jQuery selector. So, for instance, one could write view.model.increment() or even view.display.hide(‘slow’).

Creating a view also registers it within the model. Every time the change() method of the model is called, all the UI delegates refresh themselves (be careful with infinite refresh loops).

Last but not least, view.clone(f) is equivalent to view.model.show(f), and is useful when storing views in array components (such as lists).