Blame view

samples/focus-sample/src/main/webapp/focus_7.xhtml 2.06 KB
bernard authored
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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:focus="http://richfaces.org/sandbox/focus"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j">
<head>
    <title>Focus sample</title>
</head>
<body>
<ui:include src="menu.xhtml"/>

<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>
    <focus: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"/>
            <focus: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">
                <focus: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"/>

</body>
</html>