In my view pages the input controls look like this:
<div class="entry"> <div class="label"><h:outputLabel for="DateofBirth">Date of Birth:</h:outputLabel></div> <div class="input"> <s:decorate id="DateofBirthDecorator"> <rich:calendar enableManualInput="true" disabled="#{!HomeFoneNameChange.isNewForm()}" id="DateofBirth" value="#{HomeFoneNameChange.dateofBirth}" required="true"> <a:support event="onblur" reRender="DateofBirthDecorator" /> </h:inputText> </s:decorate></div> </div> <div class="entry"> <div class="label"><h:outputLabel for="Sex">Sex:</h:outputLabel></div> <div class="input"><s:decorate id="SexDecorator"> <h:inputText size="50" disabled="#{!HomeFoneNameChange.isNewForm()}" id="Sex" value="#{HomeFoneNameChange.sex}" required="true"> <a:support event="onblur" reRender="SexDecorator" /> </h:inputText> </s:decorate></div> </div>
<my:calendar lable="Date of Birth" bean="HomeFoneNameChange" property="dateOfBirth" /> <my:inputText lable="Sex:" bean="HomeFoneNameChange" property="sex" />
<my:calendar lable="Date of Birth" property="dateOfBirth" /> <my:inputText lable="Sex:" property="sex" />
Look at how s:decorate is used e.g. in the booking example.