tundra 2012-01-01 11:12:23

# AVT Theme Switcher

This page demonstrates the use of Attribute Value Templates (AVT) as known from XSL. By putting an attribute value inside of curly brackets you signal to the processor to evaluate the contents as an XPath expression.

AVTs can be used to dynamically style a page dependent on some instance data. The example below switches between the main Dojo themes available.

AVTs in betterFORM are operating on the host document, this means that classes added in XSLt or JavaScript will be lost if the AVT changes during runtime (due to the host document does not know about CSS classes added later on)

## Example

Switch Theme claro claro soria soria tundra tundra Date:Time:current theme

## XForms Markup

    <html bf:evalAVTs="class style">
        <body class="{theme}">...</body>
    </html>

    <xf:instance id="instance-1">
        <avt>
            <theme>tundra</theme>
            <date>2012-01-01</date>
            <time>11:12:23</time>
        </avt>
    </xf:instance>

    <xf:group id="outer" appearance="bf:verticalTable">
        <xf:select1 id="select" ref="theme" appearance="full" incremental="true">
            <xf:label>Switch Theme</xf:label>
            <xf:item>
                <xf:label>claro</xf:label>
                <xf:value>claro</xf:value>
            </xf:item>
            <xf:item>
                <xf:label>soria</xf:label>
                <xf:value>soria</xf:value>
            </xf:item>
            <xf:item>
                <xf:label>tundra</xf:label>
                <xf:value>tundra</xf:value>
            </xf:item>
        </xf:select1>

        <xf:input ref="date">
            <xf:label>Date:</xf:label>
        </xf:input>
        <xf:input ref="time" appearance="bf:timetextbox">
            <xf:label>Time:</xf:label>
        </xf:input>

        <xf:output id="input1" ref="theme">
            <xf:label>current theme</xf:label>
        </xf:output>

    </xf:group>

## Limitations

AVTs do not work inside of the class attribute on xforms UI elements as it would overwrite the state classes that are computed to reflect the control status.

It is easy to work around this restriction by simply wrapping the wanted element inside of a span or div.