In this (slightly contrived) example, we show how to separate behavior from presentation - to create lookless controls .

A lookless control is a control that defines only behavior , and leave's the control's appearance for the page author to specify. Lookless controls may specify a simple default appearance, but usually this is overriden custom appearance. ( Slider is a more sophisticated lookless control)

In this sample we create a simple Clock control which has a default presentation as a basic string, and a more complex HTML presentation using CSS and styles.

Clock Control

Properties

The Clock control extends Container (i.e. it supports child controls), and four new properties: month, day, dayname and time.

    <j:control name="Clock" base="j:Container">

        <!-- clock properties -->
        <j:property name="month" type="string"/>        
        <j:property name="day" type="string"/>        
        <j:property name="dayname" type="string"/>        
        <j:property name="time" type="string"/>        

onFirstRender

The Clock's onFirstRender() method is called the first time the control is drawn on the page. Here, we just start the clock ticking. This is the same technique as is used in the Slideshow quicktour:

    #method onFirstRender() {
        #call ContainerControl.onFirstRender();

        // Start the clock
        this.clockTick();
    }

clockTick

The clockTick() method updates the month, day, dayname and time properties, and then schedules another clock tick in 10 seconds:

    #method clockTick() {
        // Update the properties representing the current time
        var d = new Date();
        this.setValue(ID_month, d.getShortMonthName());                
        this.setValue(ID_day, d.getDate());                
        this.setValue(ID_dayname, d.getShortDayName());                
        this.setValue(ID_time, d.getHours() + ':' + d.getMinutesWithLeadingZero());                

        // Do another tick in 10 seconds
        var del = new Delegate(this, this.clockTick);
        del.invokeAfter(10000);                
    }

That's the entire Clock behavior.

Default Presentation

The following markup defines the default presentation for the Clock control:

    <j:defaults>
        <j:Label text="#bind(time)"/> 
    </j:defaults>

The clock control should by default have a single text label child, whose text shows the current time.

Using Clock

On the page, we place down two instances of Clock, one with the default presentation, and one with our custom CSS presentation:

    <p>Default Clock:</p>
    <myapp:Clock/>

    <p>Custom Clock:</p>
    <myapp:Clock>
        <div class="Clock">
            <div class="Clock_date">
                <span class="Clock_month">
                    <j:Label text="#bind(dayname)"/> <br/>
                    <j:Label text="#bind(month)"/>
                </span>
                <span class="Clock_day">
                    <j:Label text="#bind(day)"/>
                </span>                    
            </div>
            <div class="Clock_time">
                <j:Label text="#bind(time)"/>
            </div>
        </div>
    </myapp:Clock>        

You can see that the custom clock is simply laying down HTML and then using the Label control and data binding to get the dynamic clock properties.

Summary

Although the Clock example is possibly too simple a control to warrant a "Lookless" treatment, this tour illustrates how the framework supports splitting presentation from behavior. Coders can build rich behaviors, and designers can specify how those behaviors appear on the page.

Typically, application writers develop control libraries which are stored in a separate file from the page, and then included using a <j:using> directive.