<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:sand="http://richfaces.org/sandbox"
                xmlns:a4j="http://richfaces.org/a4j" 
                xmlns:rich="http://richfaces.org/rich"
                template="./../../template.xhtml">

    <ui:define name="htmlHead">
        <title>Focus sample</title>
    </ui:define>

    <ui:define name="header">
        <ui:include src="menu.xhtml"/>
    </ui:define>

    <ui:define name="content">



        <p>
            Some components like h:selectOneRadio render elements that have identifiers matching component's clientId+suffix.
            This might be a pain if we want to have single "focus" component inside form, but be able to focus any type of the invalid
            components.
            That's what focusModifier component is for.
            Some components cause even grater pain cause you cannot nest anything inside (rich:calendar).
            To cope with this put focusModifier inside "focusModifier" facet. </p>
        <h:form>
            <sand:focus/>
            <h:panelGrid columns="3">
                <h:outputLabel value="Option" for="option"/>
                <h:selectOneRadio value="#{option}" id="option" required="true">
                    <f:selectItem itemLabel="Option 1" itemValue="1"/>
                    <f:selectItem itemLabel="Option 2" itemValue="2"/>
                    <f:selectItem itemLabel="Option 3" itemValue="3"/>
                    <sand:focusModifier suffix=":2"/>
                </h:selectOneRadio>
                <h:message for="option"/>

                <h:outputLabel value="Email" for="email"/>
                <h:inputText value="#{email}" id="email" required="true"/>
                <h:message for="email"/>
                <h:outputLabel value="Date" for="date"/>
                <rich:calendar value="#{date}" id="date" enableManualInput="true" required="true">
                    <f:facet name="focusModifier">
                        <sand:focusModifier suffix="InputDate"/>
                    </f:facet>
                </rich:calendar>
                <h:message for="date"/>
            </h:panelGrid>
            <h:commandButton value="submit"/>
        </h:form>

        <rich:insert src="/focus_7.xhtml" highlight="html"/>


    </ui:define>
</ui:composition>