myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Apache Wiki <wikidi...@apache.org>
Subject [Myfaces Wiki] Update of "Partial-page rendering" by MarcoHuber
Date Fri, 02 Mar 2007 14:45:29 GMT
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.''

Mime
View raw message