7:14 p.m.
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>