In the previous example, we showed how to create new controls by subclassing existing controls in markup , and overriding defaults.
One of the defaults you can override is the children the control a control should have when used on the page.
In this example, we take a built-in Button control, define a new subclass, and specify the default childControls for the subclass, all in Xml. Then we reuse the new control several times on a page.
Here's the markup defining the new button:
<j:module targetNamespace="urn:example">
<j:control name="JitsuButton" base="Button">
<j:defaults>
<j:childControls>
<img src="images/jitsu_sm.gif"/>
</j:childControls>
</j:defaults>
</j:control>
</j:module>
First, notice that the control definition is within a <j:module>. 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).
Notice that the control definition specifies a base attribute:
<j:control name="JitsuButton" base="Button">
In this example we are specifying the children that the control should have at runtime. When the control is constructed on a page, the control checks to see if it has any default children - if so, it creates those child controls and adds them to the control hierarchy.
To specify the default children for a control, use
<j:defaults>
<j:childControls>
<img src="../images/jitsu_sm.gif"/>
</j:childControls>
</j:defaults>
The child controls here simply show an image of our Jitsu guy.
Now in the body of the page we can make multiple JitsuButton instances:
<app:JitsuButton click="alert('Ya!')"/>
<app:JitsuButton click="alert('Jitsu')"/>
<app:JitsuButton click="alert('Open Source')"/>
Notice the "app:" prefix - When you use custom controls, their namespace must match the namespace you defined with the targetNamespace attribute of the <module>
Our JitsuButton instances responds to click events - try clicking on the Jitsu images.
In a few lines of markup, we've created a new appearance for an existing control.