Render labels correctly with IBM JSF

If you place a jsf component like this on your page:

<h:selectOneRadio disabledClass="selectOneRadio_Disabled"
                          enabledClass="selectOneRadio_Enabled"
                          id="selectType"
                          required="true"
                          tabindex="11"
                         value="#{myBean.type}" layout="pageDirection">
           <f:selectItems value="#{myBean.selectTypes}" />
</h:selectOneRadio>

You will notice that the labels for the radio buttons in the final html are not generated like you would want them to - the label tag goes around the text and the radio button.

There is a context parameter you can set in the web.xml, so the generation of the html is as expected.

<context-param>
   <description>
         Set to true to explicitly associate labels with their input elements for select one radio buttons
         and select many check box lists.
   </description>
   <param-name>com.ibm.ws.jsf.associateLabelWithId</param-name>
   <param-value>true</param-value>
</context-param>

source : http://publib.boulder.ibm.com/infocenter/wasinfo/v7r0/index.jsp?topic=/com.ibm.websphere.express.doc/info/exp/ae/rweb_jsf_custom_props.html (new window)

"Loading" Modal Div using IBM JSF

An easy way to disable the entire screen (prevent user input) while making an ajax call in ibm's jsf implementation : use a hx:panelDialog with your loading message, and use "show" and "hide" in the behaviorAction of the elements that trigger the ajax requests.

example :

<h:selectOneMenu id="selectTopic" styleClass="selectCombobox" value="#{myBean.topic}">
<f:selectItems value="#{myBean.allTopics}" id="selectTopics"/>
</h:selectOneMenu>
<hx:behavior event="onchange"
        target="selectTopic"
        behaviorAction="show;get;hide"
        targetAction="loading_modaldialog;pgLeafTopic;loading_modaldialog"
        id="selectTopicBehavior"></hx:behavior>
<h:panelGroup id="pgLeafTopic">
<h:selectOneMenu id="selectLeafTopic" styleClass="selectCombobox" value="#{myBean.leafTopic}">
    <f:selectItems value="#{myBean.leafTopics}" id="selectLeafTopics"/>
</h:selectOneMenu>                            
</h:panelGroup>
<hx:ajaxRefreshRequest
    target="pgLeafTopic" 
    id="ajaxRefreshRequest2"
    params="form1:selectTopic"
    >
</hx:ajaxRefreshRequest>
<hx:panelDialog id="loading_modaldialog"
for=""
           movable="false"
showTitleBar="false"
saveState="false">
           <h:outputText id="loadingdialogtext" value="Loading Data" />
</hx:panelDialog>

This will show and hide the modal div while the leafTopic dropdown gets a refresh depending on the selected topic in the first dropdown.