Partial-page rendering with Trinidad

Show and hide components

Trinidad has a build in support of partial-page rendering using ajax facilities.

In the following example the partial-page rendering will be used to shows or hide an addional inputText depending on the selection.

<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:tr="http://myfaces.apache.org/trinidad"
        xmlns:trh="http://myfaces.apache.org/trinidad/html" >

   <h:form id="editForm">
        <tr:selectOneRadio id="userAttributes"
                label="#{messages['selection']}"
                value="#{editAction.userAttribute}"
                required="true"
                requiredMessageDetail="#{messages['userAttribute.required']}"
(1)             autoSubmit="true" >
           <f:selectItems value="#{editAction.userAttributeList}"/>
        </tr:selectOneRadio>

        <tr:panelGroupLayout layout="horizontal" id="showCustomAttribute"
(2)              partialTriggers="editForm:userAttributes" >
           <tr:inputText id="customAttribute"
                   label="#{messages['userAttribute.text']}"
                   value="#{editAction.userAttribute.text}"
(3)                rendered="#{editAction.userAttributeSelected}"
                   required="true" />
        </tr:panelGroupLayout>

        <h:commandButton action="#{editAction.save}" value="#{messages['button.save']}" />
        <h:commandButton action="#{editAction.cancel}" value="#{messages['button.cancel']}" immediate="true" />
        
    </h:form>
</f:view>

To use the partial-page rendering you have to activate the autoSubmit on the component firing the request (here the tr:selectOneRadio) and defining the component listening to the request (here tr:panelGroupLayout).

To activate the autoSubmit you have to add the autoSubmit="true" attribute to the component (1). To configure a listener add the partialTrigger attribute to the component you want to render (2). The parameter is the id of the firing component.

If an entry is selected, the autoSubmit will set the selection in the action bean. The a rerendering of the panelGroupLayout will be invoked. Depending on the selection the isUserAttributeSelected() (3) method returns true to shows the inputText or false to hide it.

Note: If you want to use ajax4JSF rendering instead of Trinidad rendering you can run into some trouble. If the required="true" is set to the inputText a NullPointerException will be thrown. The problem occures because ajax4jsf handels the partial-page rendering not in the same way as trinidad does.

As Adam Winer wrote:

The problem is in how Ajax4JSF handles partial-page rendering. It skips over the form component entirely, so the Trinidad RenderingContext does not have a FormData object attached.

Any Trinidad component that has client-side validation will result in the same error.

Partial-page_rendering (last edited 2009-09-20 23:01:59 by localhost)