Monday, January 15, 2007

Cooler Selection Controls

Hierarchical Menu

The Orbeon Forms selection controls just got better!

Dropdown menus and single selection lists (xforms:select1 with minimal and compact appearances) now support a two-level hierarchy (the two-level limitation comes from HTML). Consider the Orbeon Forms list of sample applications:

<applications>
    <section label="Welcome">
        <application id="welcome" label="Welcome"/>
    </section>
    <section label="XForms">
        <application id="forms" label="Government Forms"/>
        <application id="xforms-controls" label="XForms Controls"/>
        <application id="xforms-sandbox" label="XForms Sandbox"/>
        <application id="xforms-todo" label="To-Do Lists"/>
        <application id="xforms-translate" label="Instant Translation"/>
    </section>
    ...
</applications>

The Orbeon Forms Source Code Viewer builds a hierarchical menu (see picture) with just a few lines:

<xforms:select1 appearance="minimal">
    <xforms:label>Application:</xforms:label>
    <xforms:itemset nodeset="instance('apps-list-instance')//(section|application)">
        <xforms:label ref="@label"/>
        <xforms:value ref="@id"/>
    </xforms:itemset>
</xforms:select1>

The magic is that the xforms:select1 control simply picks up the hierarchy of the item-set.

Hierarchical Menu

In addition, selection controls are no longer limited to just an item-set or a list of items: you can now mix and match items, item-sets and choices, for example:

<xforms:select1 appearance="minimal">
    <xforms:label>Select: </xforms:label>
    <xforms:choices>
        <xforms:label>Flavors</xforms:label>
        <xforms:item>
            <xforms:label>Pistachio</xforms:label>
            <xforms:value>p</xforms:value>
        </xforms:item>
        <xforms:itemset nodeset="instance('flavors-instance')/flavor">
            <xforms:label ref="label"/>
            <xforms:value ref="@value"/>
        </xforms:itemset>
    </xforms:choices>
    <xforms:choices>
        <xforms:label>Carriers</xforms:label>
        <xforms:item>
            <xforms:label>USPS</xforms:label>
            <xforms:value>usps</xforms:value>
        </xforms:item>
        <xforms:itemset nodeset="instance('carriers-instance')/carrier">
            <xforms:label ref="label"/>
            <xforms:value ref="@value"/>
        </xforms:itemset>
    </xforms:choices>
</xforms:select1>

These feature are available in the latest Orbeon Forms nightly builds. Enjoy!

No comments:

Post a Comment