[Myfaces Wiki] Update of "Partial-page rendering" by MarcoHuber

[Apache Wiki <wi...@apache.org>]

Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Myfaces Wiki" for change notification.

The following page has been changed by MarcoHuber:
http://wiki.apache.org/myfaces/Partial-page_rendering

New page:
= 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.''