Resources

When writing a control, you sometimes need to use image urls, CSS class names, or text labels in script or in the control's skin.

However, once you place urls or text in the JavaScript or XML markup of the control definition, they become "baked" into the control. It is difficult to change their values without modifying the control definition.

There are three issues with this:

• If a subclass of the control wants to change e.g. the CSS class used by one of the elements defined in the parent control it can't.

• If you want to created a "themed" look of a control, where you replace some of the control's image urls with different images or CSS styles, you can't.

• If you want to create e.g. a German language version of the UI, there are bits of text baked into the source code which are hard to replace.

To address these issues, when you define a control you can define resources that contain shared static data used by the control. e.g. a DatePicker control looks like:

<control name="DatePicker" javaScriptName="DatePickerControl">
    <property name="selectedDate" type="dateTime"/>
    
    <!-- css classes -->
    <resource name="Table" resType="cssClass" value="dp_Table"/>
    <resource name="HeaderRow" resType="cssClass" value="dp_HeaderRow"/>
    <resource name="LegendRow" resType="cssClass" value="dp_LegendRow"/>

    <!-- text labels -->
    <resource name="NextMonthLabel" resType="string" value="Go to next month"/>
    <resource name="PrevMonthLabel" resType="string" value="Go to previous month"/>
    <resource name="TodayLabel" resType="string" value="Today"/>
    
</control>

Currently, only three resource types are supported: urls, strings and css class names. These are specified using the resType="string", resType="url" or resType="cssClass" attributes.

Also, unlike properties, which are allocated per-instance for each control, resources are stored in the control's class. Each resource definition is shared by all instances.

Subclasses of a control may override a superclass's definition of a resource, e.g. you can subclass DatePicker you can override the NextMonthLabel or PrevMonthLabel resource values in the subclass.

Down the road, the Jitsu compiler will also let you specify resource overrides in an external file, so that so that you can create a resource definition file for a German language version, or create resource definitions that are unique to each user.

Referring to resources

To refer to resources in JavaScript, you can use the Control.getResource method:

    var myTodayLabel = aControl.getResource(ID_TodayLabel);

Note that there is no setResource method - at runtime, resources are read-only.

To refer to a resource in the skin control, use the #res(xxx) tag, e.g. here's a partial definition of a Slider control that uses resources:

<j:control name="MySlider" base="j:Slider">

    <j:property name="text"/>

    <j:resource name="OuterDiv" resType="cssClass" 
        value="slider_OuterDiv"/>

    <j:resource name="Minus" resType="cssClass" 
        value="slider_Minus"/>

    <j:resource name="MinusImage" resType="url" 
        value="/jitsu/quicktours/images/slider_minus.gif"/>

    <j:skin>    
        <div class="#res(OuterDiv)">
        
        <!-- the "-" button -->
        <j:Button bubbleEvent="decrement">
            <img src="#res(MinusImage)" class="#res(Minus)"/>
        </j:Button>
    
        ...