Here's the markup for just the <j:App> of this sample (click on the Source Markup tab above to see the full source markup):

Description

This example shows a page containing a simple clickable button, which is a Jitsu Control . Jitsu comes with a fairly standard set of controls, as well as the ability to add new controls with very rich behavior.

Jitsu compiles all control and UI markup into an efficient JavaScript representation.

Look Ma, no DOM

Unlike many other AJAX frameworks, Jitsu creates its own complete control hierarchy, which is entirely separate from the HTML DOM. Jitsu automatically updates the HTML DOM from the control hierarchy whenever necessary.

In our performance tests, we found this approach was far faster than writing controls which are "tacked onto" the DOM. Also, Jitsu controls go significantly beyond the DOM's basic capabilities, adding features like templating, data binding, reflection, and so on. It was hard to retrofit the DOM to add these features. For improved performance, a richer feature set and better debugging, we implemented our own separate control hierarchy. The Inspector in the next example shows the control hierarchy.

If you click on the "Generated JavaScript" button above you can see the JavaScript representation of this Jitsu App. It looks something like this:

// Globals
IdManager.declare("ID_App0");

// Function to initialize <App> (line: 8) 
function initializeApp0(target, resourceOwner, data) {
    var o;

    // Create <Button> (line: 9)
    o = new ButtonControl();
    o.addEventHandler(ID_click, new Delegate(this, line9_Button_click));
    o.setInitialValues(
        ID_text, 'Hello World');

    target.setInitialValues(
        ID_childControls, new SitedList(o));
};
AppControl.addApp(ID_App0, App0);

function line9_Button_click(sender, eventArgs) {
    alert('hello');
};

The initializeApp0 function is the function that creates the initial values for the AppControl object that represents the app on the page. This function creates a ButtonControl ("o"). It adds an event handler and sets some initial property values on the button control. Finally, it specifies that the button control is one of the children of this App.

This code builds a Control Hierarchy for the page - a tree of JavaScript objects that represent the organization of controls on the page.

The Jitsu Runtime then renders the control hierarchy to generate the output HTML that the user sees.

Events in the Control Hierarchy

Notice that the button's click event:

    
    <j:Button text="Hello World" click="alert('Hello')"/>

is compiled into the following:

    //  Create <Button> (line: 9)
    o = new ButtonControl();
    o.addEventHandler(ID_click, new Delegate(this, line9_Button_click));
    o.setInitialValues(
        ID_text, 'Hello World');
    ...
}); function line9_Button_click(sender, eventArgs) {
    alert('Hello');
};

Controls all contain a table of event handlers, which you add to by using the addEventHandler method. addEventHandler takes a Delegate , a reference to a function plus the object that should be used as the "this" object for the function. In Jitsu apps, "this" is usually the App object, and "sender" is the control that generated the event.

In Jitsu apps, there are two trees involved: The high level Control Hierarchy, and the lower-level HTML DOM that contains the HTML nodes the user sees. In general, Jitsu applications write event handlers that work on the control hierarchy, not on the DOM - since the Control Hierarchy contains the rich Jitsu controls, animation and databinding facilities (the HTML DOM tree doesn't have these features).

To do this, instead of using onclick="...", the button uses the click="..." attribute of a control. For this attribute, the compiler generates a Jitsu event handler, which operates on the Jitsu tree.

Housekeeping

To use controls, ensure that the source markup has the Jitsu namespace declaration:

Then add the control using an Xml element in the Jitsu namespace, embedded within a <App> tag:

Naming Conventions for Controls

Jitsu controls use the same naming conventions in both Xml and Javascript: they use PascalCase names for classes, and camelCase names for properties/attributes.

e.g. A control might be called MyPager, with a pageCount property. It appears in Xml as <MyPager pageCount="10"/> In JavaScript, there is a corresponding MyPager class, with a property ID_pageCount.