gistfile1.xml

<!--
  Copyright (C) 2009 Orbeon, Inc.

  This program is free software; you can redistribute it and/or modify it under the terms of the
  GNU Lesser General Public License as published by the Free Software Foundation; either version
  2.1 of the License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
  without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  See the GNU Lesser General Public License for more details.

  The full text of the license is available at http://www.gnu.org/copyleft/lesser.html
  -->
<xhtml:html xmlns:xforms="http://www.w3.org/2002/xforms"
        xmlns:xhtml="http://www.w3.org/1999/xhtml"
        xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
        xmlns:ev="http://www.w3.org/2001/xml-events"
        xmlns:xs="http://www.w3.org/2001/XMLSchema"
        xmlns:xi="http://www.w3.org/2001/XInclude"
        xmlns:xxi="http://orbeon.org/oxf/xml/xinclude"
        xmlns:xbl="http://www.w3.org/ns/xbl"
        xmlns:fr="http://orbeon.org/oxf/xml/form-runner">

    <xhtml:head>
        <xhtml:title>XForms Controls</xhtml:title>
        <xhtml:link type="text/css" rel="stylesheet" href="/ops/yui/logger/assets/logger.css"/>
        <xhtml:script type="text/javascript" src="/ops/yui/logger/logger.js"/>
        <xhtml:script type="text/javascript" src="/ops/yui/yuitest/yuitest.js"/>
        <!--<xhtml:script type="text/javascript" src="/apps/xforms-sandbox/samples/test-xforms-controls.js"/>-->
        <xforms:model xxforms:encrypt-item-values="false">
            <xforms:instance id="main-instance">
                <instance repeat-shown="true" readonly="" relevant="true">
                    <label>Label</label>
                    <help>Help</help>
                    <hint>Hint</hint>
                    <alert>Alert</alert>
                    <input>true</input>
                    <textarea>true</textarea>
                    <secret>true</secret>
                    <input-boolean>true</input-boolean>
                    <select>
                        <single>c</single>
                        <multiple>c</multiple>
                    </select>
                    <date>2009-03-19</date>
                    <time>15:00:00</time>
                    <date-time>2009-03-19T15:00:00</date-time>
                    <trigger/>
                    <submit/>
                    <output-file>
                        <uri>file:///tmp/dummy</uri>
                    </output-file>
                    <type-change>
                        <input/>
                        <type>date</type>
                    </type-change>
                </instance>
            </xforms:instance>
            <xforms:bind nodeset="input | textarea | secret | input-boolean | date | time | date-time" constraint="false()"/>
            <xforms:bind nodeset="type-change[type = 'date']/input" type="xs:date"/>
            <xforms:bind nodeset="type-change[type = 'float']/input" type="xs:float"/>
            <xforms:instance id="flavors">
                <flavors>
                    <flavor label="Fruits" color="red">
                        <flavor name="o" color="orange" label="Orange"/>
                        <flavor name="s" color="red" label="Strawberry"/>
                    </flavor>
                    <flavor label="Other" color="brown">
                        <flavor name="c" color="brown" label="Chocolate"/>
                        <flavor name="v" color="yellow" label="Vanilla"/>
                    </flavor>
                </flavors>
            </xforms:instance>
            <!-- Global MIPS that apply to all the controls -->
            <xforms:bind nodeset="*" readonly="context()/@readonly = 'true'" relevant="context()/@relevant = 'true'"/>
            <xforms:bind nodeset="@*" type="xs:boolean"/>
            <xforms:bind nodeset="input-boolean" type="xs:boolean"/>
            <xforms:bind nodeset="date" type="xs:date"/>
            <xforms:bind nodeset="time" type="xs:time"/>
            <xforms:bind nodeset="date-time" type="xs:dateTime"/>
            <xforms:bind nodeset="output-file/uri" type="xs:anyURI"/>
        </xforms:model>
        <xhtml:style type="text/css">
            .xforms-repeat-selected-item-1 { background-color: transparent }
            .red { background-color: #faa }
            .yellow { background-color: #ff9    ; }
            .brown { background-color: #c90; }
            .orange { background-color: #fc0; }
        </xhtml:style>
    </xhtml:head>
    <xhtml:body>

        <xhtml:h2>Global properties</xhtml:h2>
        <xhtml:p>
            <xforms:input ref="@repeat-shown" id="repeat-shown">
                <xforms:label>Repeat shown: </xforms:label>
            </xforms:input>
        </xhtml:p>
        <xhtml:p>
            <xforms:input ref="@readonly" id="readonly">
                <xforms:label>Readonly: </xforms:label>
            </xforms:input>
        </xhtml:p>
        <xhtml:p>
            <xforms:input ref="@relevant" id="relevant">
                <xforms:label>Relevant: </xforms:label>
            </xforms:input>
        </xhtml:p>
        <xhtml:p>
            <xforms:trigger appearance="minimal" id="focus-trigger">
                <xforms:label>(focus trigger)</xforms:label>
            </xforms:trigger>
        </xhtml:p>

        <xhtml:div id="controls">
            <xforms:repeat nodeset=".[@repeat-shown = 'true']">

                <!-- Input -->
                <xhtml:h2>Input</xhtml:h2>
                <xhtml:p>
                    <xforms:input ref="input" id="input">
                        <xforms:label ref="../label"/>
                        <xforms:help ref="../help"/>
                        <xforms:hint ref="../hint"/>
                        <xforms:alert ref="../alert"/>
                    </xforms:input>
                </xhtml:p>

                <!-- Text area -->
                <xhtml:h2>Text area</xhtml:h2>
                <xhtml:p>
                    <xforms:textarea ref="textarea" id="textarea">
                        <xforms:label ref="../label"/>
                        <xforms:help ref="../help"/>
                        <xforms:hint ref="../hint"/>
                        <xforms:alert ref="../alert"/>
                    </xforms:textarea>
                </xhtml:p>

                <!-- Secret -->
                <xhtml:h2>Secret</xhtml:h2>
                <xhtml:p>
                    <xforms:secret ref="secret" id="secret">
                        <xforms:label ref="../label"/>
                        <xforms:help ref="../help"/>
                        <xforms:hint ref="../hint"/>
                        <xforms:alert ref="../alert"/>
                    </xforms:secret>
                </xhtml:p>

                <!-- Boolean input -->
                <xhtml:h2>xforms:input boolean</xhtml:h2>
                <xhtml:p>
                    <xforms:input ref="input-boolean" id="input-boolean">
                        <xforms:label ref="../label"/>
                        <xforms:help ref="../help"/>
                        <xforms:hint ref="../hint"/>
                        <xforms:alert ref="../alert"/>
                    </xforms:input>
                </xhtml:p>

                <!-- Select and Select1 -->
                <xhtml:h2>xforms:select and xforms:select1</xhtml:h2>
                <xforms:group ref="select">
                    <xhtml:p>
                        <xforms:select1 appearance="full" ref="single" id="flavor-select1-full">
                            <xforms:itemset nodeset="instance('flavors')/flavor/flavor" class="{@color}">
                                <xforms:label ref="@label"/>
                                <xforms:value ref="@name"/>
                            </xforms:itemset>
                        </xforms:select1>
                    </xhtml:p>
                    <xhtml:p>
                        <xforms:select appearance="full" ref="multiple" id="flavor-select-full">
                            <xforms:itemset nodeset="instance('flavors')/flavor/flavor" class="{@color}">
                                <xforms:label ref="@label"/>
                                <xforms:value ref="@name"/>
                            </xforms:itemset>
                        </xforms:select>
                    </xhtml:p>
                    <xhtml:p>
                        <xforms:select1 appearance="compact" ref="single" id="flavor-select1-compact">
                            <xforms:itemset nodeset="instance('flavors')//flavor" class="{@color}">
                                <xforms:label ref="@label"/>
                                <xforms:value ref="@name"/>
                            </xforms:itemset>
                        </xforms:select1>
                    </xhtml:p>
                    <xhtml:p>
                        <xforms:select appearance="compact" ref="multiple" id="flavor-select-compact">
                            <xforms:itemset nodeset="instance('flavors')//flavor" class="{@color}">
                                <xforms:label ref="@label"/>
                                <xforms:value ref="@name"/>
                            </xforms:itemset>
                        </xforms:select>
                    </xhtml:p>
                    <xhtml:p>
                        <xforms:select1 appearance="minimal" ref="single" id="flavor-select-minimal">
                            <xforms:itemset nodeset="instance('flavors')//flavor" class="{@color}">
                                <xforms:label ref="@label"/>
                                <xforms:value ref="@name"/>
                            </xforms:itemset>
                        </xforms:select1>
                    </xhtml:p>
                    <xhtml:p>
                        <xforms:trigger appearance="minimal" id="set-out-of-range">
                            <xforms:label>Set out of range</xforms:label>
                            <xforms:action ev:event="DOMActivate">
                                <xforms:setvalue ref="single">x</xforms:setvalue>
                                <xforms:setvalue ref="multiple">x</xforms:setvalue>
                            </xforms:action>
                        </xforms:trigger> |
                        <xforms:trigger appearance="minimal" id="set-to-strawberry">
                            <xforms:label>Set to Strawberry</xforms:label>
                            <xforms:action ev:event="DOMActivate">
                                <xforms:setvalue ref="single">s</xforms:setvalue>
                                <xforms:setvalue ref="multiple">s</xforms:setvalue>
                            </xforms:action>
                        </xforms:trigger> |
                        <xforms:trigger appearance="minimal" id="add-flavor">
                            <xforms:label>Add flavor</xforms:label>
                            <xforms:action ev:event="DOMActivate">
                                <xforms:insert nodeset="instance('flavors')/flavor[1]/flavor"/>
                                <xforms:action context="instance('flavors')/flavor[1]/flavor[last()]">
                                    <xforms:setvalue ref="@label">Key lime</xforms:setvalue>
                                    <xforms:setvalue ref="@name">k</xforms:setvalue>
                                    <xforms:setvalue ref="@color">yellow</xforms:setvalue>
                                </xforms:action>
                            </xforms:action>
                        </xforms:trigger> |
                        <xforms:trigger appearance="minimal" id="change-colors">
                            <xforms:label>Change colors</xforms:label>
                            <xforms:action ev:event="DOMActivate" context="instance('flavors')">
                                <xforms:setvalue ref="flavor[1]/@color">brown</xforms:setvalue>
                                <xforms:setvalue ref="(flavor/flavor)[1]/@color">yellow</xforms:setvalue>
                                <xforms:setvalue ref="(flavor/flavor)[2]/@color">brown</xforms:setvalue>
                                <xforms:setvalue ref="flavor[2]/@color">red</xforms:setvalue>
                                <xforms:setvalue ref="(flavor/flavor)[3]/@color">red</xforms:setvalue>
                                <xforms:setvalue ref="(flavor/flavor)[4]/@color">orange</xforms:setvalue>
                            </xforms:action>
                        </xforms:trigger>
                    </xhtml:p>
                </xforms:group>

                <!-- Date -->
                <xhtml:h2>xforms:input type xs:date (default appearance)</xhtml:h2>
                <xhtml:p>
                    <xforms:input ref="date" id="date">
                        <xforms:label ref="../label"/>
                        <xforms:help ref="../help"/>
                        <xforms:hint ref="../hint"/>
                        <xforms:alert ref="../alert"/>
                    </xforms:input>
                </xhtml:p>
                <xhtml:h2>xforms:input type xs:date (minimal appearance)</xhtml:h2>
                <xhtml:p>
                    <xforms:input ref="date" appearance="minimal" id="date-minimal">
                        <xforms:label ref="../label"/>
                        <xforms:help ref="../help"/>
                        <xforms:hint ref="../hint"/>
                        <xforms:alert ref="../alert"/>
                    </xforms:input>
                </xhtml:p>

                <!-- Time -->
                <xhtml:h2>xforms:input type xs:time</xhtml:h2>
                <xhtml:p>
                    <xforms:input ref="time" id="time">
                        <xforms:label ref="../label"/>
                        <xforms:help ref="../help"/>
                        <xforms:hint ref="../hint"/>
                        <xforms:alert ref="../alert"/>
                    </xforms:input>
                </xhtml:p>

                <!-- Date and time -->
                <xhtml:h2>xforms:input type xs:dateTime</xhtml:h2>
                <xhtml:p>
                    <xforms:input ref="date-time" id="date-time">
                        <xforms:label ref="../label"/>
                        <xforms:help ref="../help"/>
                        <xforms:hint ref="../hint"/>
                        <xforms:alert ref="../alert"/>
                    </xforms:input>
                </xhtml:p>

                <!-- Trigger -->
                <xhtml:h2>xforms:trigger</xhtml:h2>
                <xhtml:p>
                    <xforms:trigger ref="trigger" id="trigger-default">
                        <xforms:label ref="../label"/>
                        <xforms:hint>Hint</xforms:hint>
                    </xforms:trigger>
                    <xforms:trigger ref="trigger" id="trigger-minimal" appearance="minimal">
                        <xforms:label ref="../label"/>
                        <xforms:hint>Hint</xforms:hint>
                    </xforms:trigger>
                </xhtml:p>

                <!-- Submit -->
                <xhtml:h2>xforms:submit</xhtml:h2>
                <xhtml:p>
                    <xforms:submit ref="submit" id="submit">
                        <xforms:label ref="../label"/>
                        <xforms:hint>Hint</xforms:hint>
                    </xforms:submit>
                </xhtml:p>

                <!-- Download -->
                <xhtml:h2>xforms:output appearance="xxforms:download"</xhtml:h2>
                <xforms:group ref="output-file">
                    <xhtml:p>
                        <xforms:output ref="uri" appearance="xxforms:download" id="output-file-value" xxforms:target="gaga">
                            <xforms:label>Download file</xforms:label>
                        </xforms:output>
                    </xhtml:p>
                </xforms:group>

                <!-- Type change -->
                <xhtml:h2>Type change</xhtml:h2>
                <xforms:group ref="type-change">
                    <xhtml:p>
                        <xforms:input ref="input" id="type-change-input"/>
                    </xhtml:p>
                    <xhtml:p>
                        <xforms:trigger appearance="minimal" id="set-type-reset">
                            <xforms:label>Reset type</xforms:label>
                            <xforms:setvalue ev:event="DOMActivate" ref="type"/>
                        </xforms:trigger> |
                        <xforms:trigger appearance="minimal" id="set-type-date">
                            <xforms:label>Set to date</xforms:label>
                            <xforms:setvalue ev:event="DOMActivate" ref="type">date</xforms:setvalue>
                        </xforms:trigger> |
                        <xforms:trigger appearance="minimal" id="set-type-float">
                            <xforms:label>Set to float</xforms:label>
                            <xforms:setvalue ev:event="DOMActivate" ref="input">2</xforms:setvalue>
                            <xforms:setvalue ev:event="DOMActivate" ref="type">float</xforms:setvalue>
                        </xforms:trigger>
                    </xhtml:p>
                </xforms:group>
            </xforms:repeat>
        </xhtml:div>
    </xhtml:body>
</xhtml:html>