20110305-autocomplete-focus.xhtml

<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"
      xmlns:xforms="http://www.w3.org/2002/xforms"
      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:fr="http://orbeon.org/oxf/xml/form-runner">
    <xhtml:head>
        <xhtml:title>XBL and event attributes</xhtml:title>
        <xforms:model>
            <xforms:instance>
                <instance>
                    <autocomplete>1</autocomplete>
                </instance>
            </xforms:instance>
            <xforms:bind ref="autocomplete" required="true()"/>
        </xforms:model>
        <xhtml:style type="text/css">
            .xbl-fr-button .yui-button { margin-bottom: 1em }
        </xhtml:style>
    </xhtml:head>
    <xhtml:body>
        <xforms:group id="container">
            <xforms:action ev:event="xforms-invalid">
                <xxforms:variable name="effective-target-id" select="string-join((xxforms:event('xxforms:target-prefixes'), xxforms:event('xxforms:targetid')), '$')"/>
                <xforms:setfocus control="{$effective-target-id}"/>
                <xforms:message level="modal" value="$effective-target-id"/>
            </xforms:action>
            <fr:button id="make-invalid">
                <xforms:label>Make invalid</xforms:label>
                <xforms:setvalue ev:event="DOMActivate" ref="autocomplete"/>
            </fr:button>
            <!--<fr:tabview id="tabview">-->
                <!--<fr:tab>-->
                    <!--<fr:label>Tab</fr:label>-->
                    <fr:autocomplete ref="autocomplete" id="autocomplete">
                        <xforms:alert>Invalid</xforms:alert>
                        <xforms:item>
                            <xforms:label>One</xforms:label>
                            <xforms:value>1</xforms:value>
                        </xforms:item>
                    </fr:autocomplete>
                <!--</fr:tab>-->
            <!--</fr:tabview>-->
        </xforms:group>
    </xhtml:body>
</xhtml:html>