Author: SergeySmirnov Date: 2007-07-27 20:14:21 -0400 (Fri, 27 Jul 2007) New Revision: 1906 Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/source/usage.html trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/source/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/source/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/source/usage.html trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/source/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/usage.xhtml Modified: trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/ajaxsupport/UserBean.java trunk/samples/richfaces-demo/src/main/resources/org/richfaces/demo/common/components.properties trunk/samples/richfaces-demo/src/main/webapp/templates/main.xhtml Log: jsFunction and poll are added Modified: trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/ajaxsupport/UserBean.java =================================================================== --- trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/ajaxsupport/UserBean.java 2007-07-27 16:34:06 UTC (rev 1905) +++ trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/ajaxsupport/UserBean.java 2007-07-28 00:14:21 UTC (rev 1906) @@ -1,10 +1,20 @@ package org.richfaces.demo.ajaxsupport; +import java.util.Date; + public class UserBean { private String name; private java.lang.Integer screenWidth; private java.lang.Integer screenHeight; private String job; + private Date date; + private Boolean pollEnabled; + + public UserBean() { + super(); + pollEnabled=true; + } + public String getName() { return this.name; } @@ -45,5 +55,21 @@ public void setJob(String job) { this.job = job; } + + public Date getDate() { + return new Date(); + } + + public void setDate(Date date) { + this.date = date; + } + + public Boolean getPollEnabled() { + return pollEnabled; + } + + public void setPollEnabled(Boolean pollEnabled) { + this.pollEnabled = pollEnabled; + } } Modified: trunk/samples/richfaces-demo/src/main/resources/org/richfaces/demo/common/components.properties =================================================================== --- trunk/samples/richfaces-demo/src/main/resources/org/richfaces/demo/common/components.properties 2007-07-27 16:34:06 UTC (rev 1905) +++ trunk/samples/richfaces-demo/src/main/resources/org/richfaces/demo/common/components.properties 2007-07-28 00:14:21 UTC (rev 1906) @@ -40,7 +40,7 @@ form= ajaxSupport, Ajax Form, /images/ico_common.gif, /images/cn_ajaxForm.gif, http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., /richfaces/form.jsf support= ajaxSupport, Ajax Support, /images/ico_common.gif, /images/cn_ajaxSupport.gif, http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., /richfaces/support.jsf jsFunction= ajaxSupport, JavaScript Function, /images/ico_common.gif, /images/cn_jsFunction.gif, http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., /richfaces/jsFunction.jsf -poll= ajaxSupport, Poll, /images/ico_common.gif, /images/cn_common.gif, http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., /richfaces/panel.jsf +poll= ajaxSupport, Poll, /images/ico_common.gif, /images/cn_poll.gif, http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., /richfaces/poll.jsf push= ajaxSupport, Push, /images/ico_common.gif, /images/cn_common.gif, http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., /richfaces/panel.jsf status= ajaxSupport, Status, /images/ico_common.gif, /images/cn_common.gif, http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., /richfaces/panel.jsf ajaxListener= ajaxSupport, Ajax Listener, /images/ico_common.gif, /images/cn_common.gif, http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone..., /richfaces/panel.jsf Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/source/usage.html =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/source/usage.html (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/source/usage.html 2007-07-28 00:14:21 UTC (rev 1906) @@ -0,0 +1 @@ +TODO: source should be added \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/source/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/source/usage.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/source/usage.xhtml 2007-07-28 00:14:21 UTC (rev 1906) @@ -0,0 +1 @@ +x \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/usage.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/jsFunction/usage.xhtml 2007-07-28 00:14:21 UTC (rev 1906) @@ -0,0 +1,66 @@ +<!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"> + + <p>a4j:jsFunction component is very similar to a4j:commandButton, but allows to peform + Ajax request from Javascript code directly. The component sends a request using + a standard JSF approach, so, the JSF form is required. The folowing example + shows how the part of the page is re-rendered when user hover over the names. + </p> + + <div class="sample-container" > + <rich:separator lineType="solid" height="1" /> + <table width="400"> + <tbody> + <tr> + <td onmouseover="updateName('Alex')" onmouseout="updateName('')" > Alex</td> + <td onmouseover="updateName('Jonh')" onmouseout="updateName('')" > Jonh</td> + <td onmouseover="updateName('Roger')" onmouseout="updateName('')" > Roger</td> + </tr> + <tr> + <td colspan="3"><h:outputText id="showname" value="Name: #{userBean.name}" /></td> + </tr> + </tbody> + </table> + + <a4j:form> + <a4j:jsFunction name="updateName" reRender="showname"> + <a4j:actionparam name="param1" assignTo="#{userBean.name}" /> + </a4j:jsFunction> + </a4j:form> + + <rich:separator height="1" style="padding-top:10px" /> + </div> + <p> + <b>name</b> attribute defines the name of the function that will be generated. You + can use it as a regular Javascript function name to invoke. a4j:actionparam + is used to pass the function arguments (you can use f:param as well). The order and + the number of parameters correspond to the arguments of the called function. The + value(s) of the a4j:actionparam will be replaced with the value of function arguments + before the Ajax request is sent. To read more about a4j:action param visit + <h:outputLink value="#{facesContext.externalContext.requestContextPath}/richfaces/actionparam.jsf?c=actionparam"> + <h:outputText value="'Ajax Paramemeter' section" /> + </h:outputLink>. + </p> + <p> + As for any other Ajax components, you can use <b>reRender</b> attribute to update the area(s) of the page + after Ajax response returns back. Also, you can use <b>data</b> attribute and <b>oncomplete</b> attribute to + take the data from the server and use them for Javascript call them. For additional information about + Javascript oriented and other important attributes of a4j:jsFunction read + <h:outputLink value="#{facesContext.externalContext.requestContextPath}/richfaces/ajaxAttributes.jsf?c=ajaxattributes"> + <h:outputText value="'Ajax Attribute' section" /> + </h:outputLink>. + </p> + </ui:define> + <ui:define name="sources"> + Here is a fragment of page sources for the given example: + <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/jsFunction/source/usage.html" class="source_frame"/> + </ui:define> + </ui:composition> +</html> \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/source/usage.html =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/source/usage.html (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/source/usage.html 2007-07-28 00:14:21 UTC (rev 1906) @@ -0,0 +1 @@ +TODO: source should be added \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/source/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/source/usage.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/source/usage.xhtml 2007-07-28 00:14:21 UTC (rev 1906) @@ -0,0 +1 @@ +x \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/usage.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll/usage.xhtml 2007-07-28 00:14:21 UTC (rev 1906) @@ -0,0 +1,92 @@ +<!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"> + + + <p>a4j:poll is one of the way how you can orginize the periodical polling of server data and + updating the page. a4j:poll is a standard RichFaces Ajax component. So, you can use the same + approach as for a4j:commandButton for example. I.e. you can use action attribute to invoke the + actiom method and reRender attribute to update area(s) on the client when Ajax response returns + back. RichFaces use the standard form based request, so having the form around the + a4j:poll component is required. + </p> + <p>The following example shown how the date and time is updated on the page based on the data + taken from the server.</p> + <div class="sample-container" > + <rich:separator height="1"/> + <a4j:region> + <h:form> + <a4j:poll id="poll" interval="500" enabled="#{userBean.pollEnabled}" reRender="serverDate" /> + </h:form> + </a4j:region> + <h:form> + <h:panelGrid columns="2" width="80%"> + <a4j:commandButton style="width:120px" id="control" value="#{userBean.pollEnabled?'Stop':'Start'} Polling" + reRender="poll, control"> + <a4j:actionparam name="polling" value="#{!userBean.pollEnabled}" + assignTo="#{userBean.pollEnabled}"/> + </a4j:commandButton> + <h:outputText id="serverDate" style="font-size:16px" value="Server Date: #{userBean.date}" /> + </h:panelGrid> + </h:form> + <rich:separator height="1" style="padding-top:10px"/> + </div> + + <p><b>interval</b> attribute defines the interval in ms between the previous response and the + next request. So, the total period between two request generated by a4j:poll is a sum of interval + and server response time. + </p> + <p> + <b>timeout</b> attribute defines the time in ms how long the client will wait for server response. + if Ajax response does not come during this period, the connection is aborted and the next + request is sent. By default, the timeout is not set. + </p> + <p> + <b>enabled</b> attribute defines should the a4j:poll send request or not. You can use EL + to point to the bean property that will be the flag. Re-render the a4j:poll component itself + to apply the current value. See the example how to accomplish this task. + </p> + <p> + a4j:poll sends requests in parallel with user activities. The intersections + between a4j:poll Ajax requests and other Ajax requests are possible. This might causes + unpredictable glitches. Especially, it is true for the earlier version of JSF implementations + when the parallel requests to the server was not expected. To avoid problem, try to follow + very simple rules: + <ul> + <li>Have a separate form for a4j:poll. Note, that other fields will be included in + request and processed on the server if the form contains not only a4j:poll;</li> + <li>Surround a4j:poll with a4j:region. This allow to limit the part of the component + tree that will be processed for each Ajax request;</li> + <li>Try to avoid updating the same server data that might be updated by the Ajax requests + produced by the user activities. If you need this, be sure your code allows to access + the data from parallel thread without conflicts;</li> + <li>Try to avoid re-rendering the area(s) with input field and other form controls. + This causes the losing of input focus because the old elements are removed before + the update with the upcomming ones</li> + <li>Try to re-render as little area(s) on the client as possible. Try do not have + intersections between the areas re-rendered by a4j:poll and areas re-rendered + by other Ajax components;</li> + <li>Use the eventsQueue with the same name as the name for other Ajax components. + This allows to queue the Ajax request and avoid updating the server side data + and re-rendering the page area(s) in parallet;</li> + <li>Set the reasonable interval. Note that each Ajax request restores the session + and component tree as well as processes the whole JSF lifecycle. Too often requests + just degrade the overall performance of application</li> + </ul> + + </p> + + + </ui:define> + <ui:define name="sources"> + Here is a fragment of page sources for the given example: + <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/poll/source/usage.html" class="source_frame"/> + </ui:define> + </ui:composition> +</html> Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/poll.xhtml 2007-07-28 00:14:21 UTC (rev 1906) @@ -0,0 +1,17 @@ +<!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:rich="http://richfaces.ajax4jsf.org/rich"> +<ui:composition template="/templates/main.xhtml"> + <ui:define name="title">RichFaces - Open Source Rich JSF Components - Ajax Poll</ui:define> + <ui:define name="body"> + <rich:tabPanel switchType="server" styleClass="top_tab" contentClass="content_tab" inactiveTabClass="inactive_tab" activeTabClass="active_tab"> + <rich:tab label="Usage"> + <ui:include src="/richfaces/poll/usage.xhtml"/> + </rich:tab> + </rich:tabPanel> + </ui:define> +</ui:composition> +</html> Modified: trunk/samples/richfaces-demo/src/main/webapp/templates/main.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/templates/main.xhtml 2007-07-27 16:34:06 UTC (rev 1905) +++ trunk/samples/richfaces-demo/src/main/webapp/templates/main.xhtml 2007-07-28 00:14:21 UTC (rev 1906) @@ -32,7 +32,8 @@ </tbody> </table> -<h:graphicImage value="#{componentNavigator.currentComponent.captionImage}" height="40" alt="" border="0" styleClass="component_name"/> +<h:graphicImage value="#{componentNavigator.currentComponent.captionImage}" + rendered="#{componentNavigator.currentComponent.captionImage!=''}" height="40" alt="" border="0" styleClass="component_name"/> <table cellpadding="0" cellspacing="0" border="0" class="content_container" width="100%"> <tbody>