omnifaces

 - 

Available since OmniFaces 1.0

The <o:outputLabel> is a component that extends the standard <h:outputLabel> with support for automatically setting its value as the label of the component identified by its for attribute (if any). This way there's no need to duplicate the very same label into the label attribute of the input component. After submitting the form without having entered a value, a validation message is posted that should contain the label printed before the input instead of some generated ID.

You can use it the same way as <h:outputLabel>, you only need to change h: into o:.

PrimeFaces

Note that PrimeFaces has implemented the same idea later in its new version 3.3 <p:outputLabel>, so if you happen to use PrimeFaces already, you may want to use it instead. It's however known to have a problem when used inside repeater components.

Demo

Submit the following forms without entering anything to see it.

With standard h:outputLabel

With OmniFaces o:outputLabel

Dynamic o:outputLabel
Demo source code
<p>
    Submit the following forms without entering anything to see it.
</p>

<h3>With standard <code>h:outputLabel</code></h3>
<h:form>
    <h:panelGrid columns="3">
        <h:outputLabel for="input" value="Foo" />
        <h:inputText id="input" required="true" />
        <h:message for="input" />

        <h:panelGroup />
        <h:commandButton value="Submit">
            <f:ajax execute="@form" render="@form" />
        </h:commandButton>
        <h:panelGroup>
            <h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
        </h:panelGroup>
    </h:panelGrid>
</h:form>

<hr />

<h3>With OmniFaces <code>o:outputLabel</code></h3>
<h:form>
    <h:panelGrid columns="3">
        <o:outputLabel for="input" value="Foo" />
        <h:inputText id="input" required="true" />
        <h:message for="input" />

        <h:panelGroup />
        <h:commandButton value="Submit">
            <f:ajax execute="@form" render="@form" />
        </h:commandButton>
        <h:panelGroup>
            <h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
        </h:panelGroup>
    </h:panelGrid>
</h:form>

<hr />

<h3>Dynamic <code>o:outputLabel</code></h3>
<h:form>
    <h:panelGrid columns="3">
        <o:outputLabel for="input" value="#{now.toString()}" />
        <h:inputText id="input" required="true" />
        <h:message for="input" />

        <h:panelGroup />
        <h:commandButton value="Submit">
            <f:ajax execute="@form" render="@form" />
        </h:commandButton>
        <h:panelGroup>
            <h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
        </h:panelGroup>
    </h:panelGrid>
</h:form>
Documentation & Sources

VDL documentation

API documentation

Java source code