2:02 p.m.
Author: SergeySmirnov
Date: 2007-07-20 15:02:45 -0400 (Fri, 20 Jul 2007)
New Revision: 1757
Added:
trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/source/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/source/usage.html
trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/source/usage.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/usage.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/source/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/source/usage.html
trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/source/usage.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/usage.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/source/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/source/usage.html
trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/source/usage.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/usage.xhtml
Log:
Added a4j components
Added:
trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/source/usage.html
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/source/usage.html
(rev 0)
+++
trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/source/usage.html 2007-07-20
19:02:45 UTC (rev 1757)
@@ -0,0 +1 @@
+TODO: source should be added
\ No newline at end of file
Added:
trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/source/usage.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/source/usage.xhtml
(rev 0)
+++
trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/source/usage.xhtml 2007-07-20
19:02:45 UTC (rev 1757)
@@ -0,0 +1 @@
+x
\ No newline at end of file
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/usage.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/usage.xhtml
(rev 0)
+++
trunk/samples/richfaces-demo/src/main/webapp/richfaces/actionparam/usage.xhtml 2007-07-20
19:02:45 UTC (rev 1757)
@@ -0,0 +1,96 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:a4j="http://richfaces.org/ajax"
+ xmlns:rich="http://richfaces.ajax4jsf.org/rich">
+ <ui:composition template="/templates/component-sample.xhtml">
+ <ui:define name="sample">
+
+ <style>
+ input[type="button"] {
+ background-color:#{a4jSkin.trimColor};
+ }
+ </style>
+
+ <p>a4j:actionparam is a component that combains together the functionality of
f:param and ActionListener.
+ Additional to the f:param, this component allows to assign the value to the property
of the manager bean
+ directly using assignTo attribute.
+ </p>
+ <div class="sample-container">
+ <h:form>
+ <rich:panel>
+ <a4j:commandButton value="Set Name to Alex" reRender="rep"
>
+ <a4j:actionparam name="username" value="Alex"
assignTo="#{userBean.name}"/>
+ </a4j:commandButton>
+ <rich:spacer width="20" />
+ <a4j:commandButton value="Set Name to John" reRender="rep"
>
+ <a4j:actionparam name="username" value="John"
assignTo="#{userBean.name}"/>
+ </a4j:commandButton>
+ </rich:panel>
+ <rich:panel>
+ <h:outputText id="rep" value="Selected
Name:#{userBean.name}"/>
+ </rich:panel>
+ </h:form>
+ </div>
+ <p>
+ You can use a4j:param not only with ajax components, but with non-ajax command
component also.
+ In the following example, the used skin of the demo is changed when the full page is
refreshed
+ with regular non-ajax h:commandLink. Using this feature, you can update model values
without
+ invoking even single line of java code on the server side.
+ </p>
+ <div class="sample-container">
+ <h:form>
+ <rich:panel>
+ <f:facet name="header">
+ <h:outputText value="Change Demo Appplication Skin To: "/>
+ </f:facet>
+ <h:commandLink value="DeepMarine">
+ <a4j:actionparam name="skin" value="deepMarine"
assignTo="#{skinBean.skin}"/>
+ </h:commandLink>
+ <rich:spacer width="20" />
+ <h:commandLink value="BlueSky" >
+ <a4j:actionparam name="skin" value="blueSky"
assignTo="#{skinBean.skin}"/>
+ </h:commandLink>
+ </rich:panel>
+ </h:form>
+ </div>
+ <p>Attributes 'name' and 'value' are mandatory. You can specify
the converter with 'converter'
+ attribute if you need to convert the value before the model is updates. Note that
+ the property is assigned with parameter's value on the UPDATE_MODEL phase. So, if
+ the validation of the form is failed, this phase will be skipped and the property
+ is not updated.
+ </p>
+ <p>It is possible to use javascript variable of custom function for
'value' attribute. In this
+ case the 'noEscape' attribute should be set to true. When
noEscape="true", the 'value' can contain
+ any javascript expression or javascript function invocation and the result of them
will be send
+ to the server as a value of a4j:actionparam. For following example demonstrate how to
assign
+ the backing bean with browser screen size values.
+ </p>
+ <div class="sample-container">
+ <h:form>
+ <a4j:commandButton value="Show Screen Size"
reRender="infoPanel">
+ <a4j:actionparam name="w" value="screen.width"
+ assignTo="#{userBean.screenWidth}" noEscape="true" />
+ <a4j:actionparam name="h" value="screen.height"
+ assignTo="#{userBean.screenHeight}" noEscape="true" />
+ </a4j:commandButton>
+
+ <rich:panel id="infoPanel">
+ <h:panelGrid columns="2">
+ <h:outputText value="Width:" />
+ <h:outputText value="#{userBean.screenWidth}"/>
+ <h:outputText value="Height:" />
+ <h:outputText value="#{userBean.screenHeight}"/>
+ </h:panelGrid>
+ </rich:panel>
+ </h:form>
+ </div>
+ </ui:define>
+ <ui:define name="sources">
+ Here is a fragment of page sources for the given example:
+ <iframe
src="${facesContext.externalContext.requestContextPath}/richfaces/actionparam/source/usage.html"
class="source_frame"/>
+ </ui:define>
+ </ui:composition>
+</html>
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/source/usage.html
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/source/usage.html
(rev 0)
+++
trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/source/usage.html 2007-07-20
19:02:45 UTC (rev 1757)
@@ -0,0 +1 @@
+TODO: source should be added
\ No newline at end of file
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/source/usage.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/source/usage.xhtml
(rev 0)
+++
trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/source/usage.xhtml 2007-07-20
19:02:45 UTC (rev 1757)
@@ -0,0 +1 @@
+x
\ No newline at end of file
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/usage.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/usage.xhtml
(rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/usage.xhtml 2007-07-20
19:02:45 UTC (rev 1757)
@@ -0,0 +1,112 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:a4j="http://richfaces.org/ajax"
+ xmlns:rich="http://richfaces.ajax4jsf.org/rich">
+ <ui:composition template="/templates/component-sample.xhtml">
+ <ui:define name="sample">
+
+ <style>
+ input[type="button"] {
+ background-color:#{a4jSkin.trimColor};
+ }
+ </style>
+
+ <p>a4j:form functionality is similar to standard h:form component except two
additional features:
+ <ul>
+ <li>Along with a4j:htmlCommandLink, it fixes the problem of h:commandLink
component that cannot be re-rendered without
+ re-rendering the whole form it belongs to.</li>
+ <li>It might convert all non-ajax action
+ components (including the third party components) to the ajaxian ones if ajaxSubmit
+ attribute is set to true</li>
+ </ul>
+ </p>
+ <p>
+ h:commandLink renderer generates the javascript code that is used to submit the form
when the link
+ is clicked. However, if the h:commandLink is rendered outside of the form, for
example, when
+ you point to it with reRender, the wrong code is generated that causes the broken
functionality
+ when user clicks this link later. The example of problematic code is below. To fix the
code,
+ you need to replace h:form with a4j:form and h:commandLink with a4j:htmlCommandLink.
+ <pre>
+ ....
+ <-- This code does not work correctly -->
+ <h:form>
+ ....
+ <a4j:commandButton value="Update Non-Ajax Link"
reRender="panel" />
+ ....
+ <h:panelGrid id="panel">
+ ....
+ <h:commandLink value="Non-Ajax Submit" action="foo"
/>
+ ....
+ </h:panelGrid>
+ ....
+ </h:form>
+ </pre>
+ </p>
+ <p>
+ When ajaxSubmit"true", all included in the form non-ajax control becomes
ajaxable. This
+ approach is similar to the one AjaxAnywhere framework uses. If form works in ajax
mode,
+ the standard ajax attribute such as reRender, eventQueue, requestDelay can be used.
The
+ following example demonstate the difference between partial and full-page refreshing.
+ In both cases, the regular h:commandButton is used for the form submision.
+ </p>
+
+ <div class="sample-container" >
+ <h:panelGrid columns="2">
+
+ <rich:panel>
+ <f:facet name="header">
+ <h:outputText value="Form with ajaxSubmit equals true"/>
+ </f:facet>
+
+ <a4j:form ajaxSubmit="true" reRender="name">
+ <h:panelGrid>
+ <h:commandButton value="Set Local Name to John (Ajax)"
action="#{userBean.nameItJohn}" />
+ <h:outputText id="name" value="Name:#{userBean.name}"
/>
+ </h:panelGrid>
+ </a4j:form>
+ </rich:panel>
+
+ <rich:panel>
+ <f:facet name="header">
+ <h:outputText value="Form with ajaxSubmit equals false"/>
+ </f:facet>
+
+ <a4j:form>
+ <h:panelGrid>
+ <h:commandButton value="Set Both Name to Mark (non-Ajax)"
action="#{userBean.nameItMark}" />
+ <h:outputText id="name" value="Name:#{userBean.name}"
/>
+ </h:panelGrid>
+ </a4j:form>
+ </rich:panel>
+
+ </h:panelGrid>
+ </div>
+
+ <p>
+ Note:You should not use a4j:form ajaxSubmit"true" if it contains other ajax
command components.
+ Also, due to the security reason, uploadFile form element cannot be convertable to
+ the be ajaxable.
+ </p>
+
+
+
+
+
+ <f:verbatim>
+
+ <code>
+ This is a pure text <span>#</span>{mybean.hello}
+ </code>
+ </f:verbatim>
+ <div class="sample-container">
+ </div>
+ </ui:define>
+ <ui:define name="sources">
+ Here is a fragment of page sources for the given example:
+ <iframe
src="${facesContext.externalContext.requestContextPath}/richfaces/form/source/usage.html"
class="source_frame"/>
+ </ui:define>
+ </ui:composition>
+</html>
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/source/usage.html
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/source/usage.html
(rev 0)
+++
trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/source/usage.html 2007-07-20
19:02:45 UTC (rev 1757)
@@ -0,0 +1 @@
+TODO: source should be added
\ No newline at end of file
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/source/usage.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/source/usage.xhtml
(rev 0)
+++
trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/source/usage.xhtml 2007-07-20
19:02:45 UTC (rev 1757)
@@ -0,0 +1 @@
+x
\ No newline at end of file
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/usage.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/usage.xhtml
(rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/region/usage.xhtml 2007-07-20
19:02:45 UTC (rev 1757)
@@ -0,0 +1,165 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:a4j="http://richfaces.org/ajax"
+ xmlns:rich="http://richfaces.ajax4jsf.org/rich">
+ <ui:composition template="/templates/component-sample.xhtml">
+ <ui:define name="sample">
+
+ <style>
+ input[type="button"] {
+ background-color:#{a4jSkin.trimColor};
+ }
+ </style>
+
+ <p>
+ Ajax region is a key ajax component. It limits the part of the component tree to be
processed on the server side when
+ ajax request comes. Processing means invocation during Decode, Validation and Model
Update phase.
+ Most common reasons to use a region are:
+ <ul>
+ <li>avoiding the aborting the JSF lifecycle processing during the validation
of other
+ form input unnecessary for given ajax request;</li>
+ <li>defining the different strategies when events will be deliveries
+ (immediate="true/false")</li>
+ <li>showing an individual indicator of ajax status</li>
+ <li>increasing the performance of the rendering processing
(selfRendered="true/false", renderRegionOnly="true/false")</li>
+ </ul>
+ </p>
+ <p>
+ The following two examples show the situaltion when the validation error does not
+ allow to process the ajax input. Type the name. The outputText component should
+ repear after you. However, in the first case, this activity will be aboted because
+ of the other field with required="true". You will see only the error
message
+ while the "Job" field is empty.
+ </p>
+ <div class="sample-container" >
+ <rich:separator height="1" />
+ <a4j:outputPanel ajaxRendered="true">
+ <h:messages style="color:red" />
+ </a4j:outputPanel>
+ <h:panelGrid columns="2" width="100%">
+
+ <h:form id="form1">
+ <h:panelGrid columns="2">
+ <h:outputText value="Name" />
+ <h:inputText value="#{userBean.name}">
+ <a4j:support event="onkeyup" reRender="outname" />
+ </h:inputText>
+ <h:outputText value="Job:" />
+ <h:inputText required="true" id="job2"
value="#{userBean.job}" />
+ </h:panelGrid>
+ </h:form>
+
+ <h:form id="form2">
+ <h:panelGrid columns="2">
+ <h:outputText value="Name" />
+ <a4j:region>
+ <h:inputText value="#{userBean.name}">
+ <a4j:support event="onkeyup" reRender="outname" />
+ </h:inputText>
+ </a4j:region>
+ <h:outputText value="Job" />
+ <h:inputText required="true" id="job1"
value="#{userBean.job}" />
+ </h:panelGrid>
+ </h:form>
+
+ </h:panelGrid>
+ <h:outputText id="outname" style="font-weight:bold"
value="Typed Name: #{userBean.name}" />
+ <rich:separator style="padding-top:10px" height="1" />
+
+ </div>
+ <p>
+ If no one region is defined explicitly on the page, the whole view plays the role of
region.
+ Regions might be nested. When the ajax request is invoked by the ajax component, the
+ closest to this component region becomes an actual.
+ </p>
+ <p>
+ Ajax region <b>does not</b> define <b>what</b> the area(s) on
the page should be
+ refreshed when the ajax response is complete. You need to use reRender attribute of
+ the ajax components or use a4j:outputPanel ajaxRendered="true" for this
purpose.
+ </p>
+ <p>
+ Ajax region might limit the set of areas to be re-rendered if
regionRenderOnly="true". If
+ this attribute is set, only the marked area(s) inside the given region will be
+ included in the list for re-render. The marked area(s) outside of the
+ region will be ommited.
+ </p>
+ <p>
+ The area(s) marked for update might be re-rendered directly from the component tree
+ rather than involving jsp (xhtml) page processing if selfRendered attribute is set
+ to true. This might bust the performance to decrease time spending on Render Respose
+ phase. However, you need to be aware that the artifact that are not included in the
+ component tree will disappear from your page after page is updated.<br/>
+ Most known component that is not stored in the component tree is f:verbatim. It
often
+ used to wrap non-jsf content such as pure html tags in JSF 1.1. However, even
f:verbatim
+ is not required, the pure html tags are not stored in the component tree and will be
+ revoked from the update area(s) if selfRendered="true".
+ </p>
+ <p>
+ The following example showing the typical situation when the content unexpectedly
+ disappear during the partial page update when selfRendered="true". The
right part of the
+ example works fine, because the text is produced buy the standard h:outputText
component
+ that is stored in the component tree. Both forms are wrapped with a4j:region
selfRendered="true"
+ </p>
+
+ <div class="sample-container" >
+ <rich:separator height="1" />
+
+ <h:panelGrid columns="2" width="100%">
+
+ <a4j:region selfRendered="true">
+ <h:panelGroup>
+ <h:form>
+ <h:panelGrid columns="2">
+ <h:outputText value="Name" />
+ <h:inputText value="#{userBean.name}">
+ <a4j:support event="onkeyup" reRender="out3,outname2"
/>
+ </h:inputText>
+ </h:panelGrid>
+ </h:form>
+ <h:panelGroup id="out3">
+ This text will disappear during the partual update of this panel.
+ The text appears back only after the whole page refresh or a partial
+ update from the region with selfRendered="false" (default value).
+ </h:panelGroup>
+ </h:panelGroup>
+ </a4j:region>
+
+ <a4j:region selfRendered="true">
+ <h:panelGroup>
+ <h:form>
+ <h:panelGrid columns="2">
+ <h:outputText value="Name" />
+ <h:inputText value="#{userBean.name}">
+ <a4j:support event="onkeyup" reRender="out4,outname2"
/>
+ </h:inputText>
+ </h:panelGrid>
+ </h:form>
+ <h:panelGroup id="out4">
+ <h:outputText value="The text of the similar panel will
+ not disappear because it is printed with h:outputText" />
+ </h:panelGroup>
+ </h:panelGroup>
+ </a4j:region>
+
+ </h:panelGrid>
+ <h:outputText id="outname2" style="font-weight:bold"
+ value="Typed Name: #{userBean.name}" />
+
+ <rich:separator style="padding-top:10px" height="1" />
+
+ </div>
+
+ <rich:spacer height="30" />
+ </ui:define>
+
+
+
+ <ui:define name="sources">
+ Here is a fragment of page sources for the given example:
+ <iframe
src="${facesContext.externalContext.requestContextPath}/richfaces/region/source/usage.html"
class="source_frame"/>
+ </ui:define>
+ </ui:composition>
+</html>