A key feature in Jitsu is that you can define new custom controls entirely in markup , without writing lots of script.

At the heart of this mechanism is the <defaults> mechanism, which lets you subclass an existing control and override its defaults.

Subclassing lets you define what the initial properties for a control should be, so that you can use the new control multiple times on a page without having to repeat the same property values.

This page shows a simple example.

We create a NextButton control, based on the standard Button, but with two initial properties set.

Here's the markup defining the custom button:

    <j:module targetNamespace="urn:example">
    
        <j:control name="NextButton" base="j:Button">

            <j:defaults>

                <j:text>Next</j:text>
                <j:bubbleEvent>nextCard</j:bubbleEvent>

            </j:defaults>

        </j:control> 
               
    </j:module>

First, notice that the control definition is within a <j:module> section. All control definitions must live within a <module>. The module can appear either directly within an <html> element of an HTML page, or in a separate .xml document imported with <j:using> (use the latter approach if you plan to share the control in multiple pages).

The Control's "base"

Also notice that the control definition specifies a base attribute:

    <j:control name="NextButton" base="j:Button">

This indicates what control class the NextButton is extending - here we are extending the system Button class.

The Control's "defaults"

The "defaults" section of a custom control provides initial values for properties of control instances. Whenever you create an instance of the control, the initial values given within the defaults tag are used.

This button's defaults are:

        <j:defaults>
            <j:text>Next</j:text>
            <j:bubbleEvent>nextCard</j:bubbleEvent>
        </j:defaults>

The Next button uses a text label of "Next", and bubbles a "nextCard" event when clicked.

Using the Control

Once the class is defined, we can make multiple NextButton instances in the body of the page. We use them here to navigate between cards in a card deck

        <j:CardDeck>
            <j:Card>
                <div>
                    Hello. This is card 1.<br/>
                    <ex:NextButton/>
                </div>
            </j:Card>
            <j:Card>
                <div>
                    Hello again. This is card 2.<br/>
                    <ex:NextButton/>
                </div>
            </j:Card>
        </j:CardDeck>

Notice the "ex:" prefix - When you use custom controls, their namespace must match the namespace you defined with the targetNamespace attribute of the <module>

Try clicking on the next button and you can see that it switches the card shown in the card deck.