Author: ilya_shaikovsky Date: 2007-09-12 12:45:13 -0400 (Wed, 12 Sep 2007) New Revision: 2908 Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/data.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/eventqueue.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/reRender1.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/reRender2.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/reRender3.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/calendar/examples/reRender2.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/page/snippets/ trunk/samples/richfaces-demo/src/main/webapp/richfaces/page/snippets/gen.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/page/snippets/page.xhtml Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/htmlCommandLink/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/page/usage.xhtml trunk/samples/richfaces-demo/src/main/webapp/richfaces/push/usage.xhtml Log: Some visual improvements. http://jira.jboss.com/jira/secure/EditIssue!default.jspa?id=12344894 Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/data.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/data.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/data.xhtml 2007-09-12 16:45:13 UTC (rev 2908) @@ -0,0 +1 @@ +<a4j:commandButton value="Update" data="#{userBean.name}" oncomplete="showTheName(data.name)" /> Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/eventqueue.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/eventqueue.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/eventqueue.xhtml 2007-09-12 16:45:13 UTC (rev 2908) @@ -0,0 +1,3 @@ +<h:inputText value="#{userBean.name}"> + <a4j:support event="onkeyup" eventsQueue="foo" reRender="bar" /> +</h:inputText> \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/reRender1.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/reRender1.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/reRender1.xhtml 2007-09-12 16:45:13 UTC (rev 2908) @@ -0,0 +1,3 @@ +<a4j:outputPanel ajaxRendered="true"> + <h:messages /> +</a4j:outputPanel> Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/reRender2.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/reRender2.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/reRender2.xhtml 2007-09-12 16:45:13 UTC (rev 2908) @@ -0,0 +1,7 @@ +... +<a4j:commandButton value="update" reRender="infoBlock"/> + .... +<h:panelGrid id="infoBlock"> + ..... +</h:panelGrid> +..... \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/reRender3.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/reRender3.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/snippets/reRender3.xhtml 2007-09-12 16:45:13 UTC (rev 2908) @@ -0,0 +1,17 @@ +..... +<h:form id="form1"> + .... + <a4j:commandButton value="Usual Way" reRender="infoBlock, infoBlock2" /> + <a4j:commandButton value="Shortcut" reRender=":infoBlockl,:sv:infoBlock2" /> + ..... +</h:form> +<h:panelGrid id="infoBlock"> + ..... +</h:panelGrid> +..... +<f:subview id="sv"> + <h:panelGrid id="infoBlock2"> + ..... + </h:panelGrid> + ..... +</f:subview> \ No newline at end of file Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/usage.xhtml 2007-09-12 15:35:12 UTC (rev 2907) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/ajaxAttributes/usage.xhtml 2007-09-12 16:45:13 UTC (rev 2908) @@ -7,6 +7,21 @@ xmlns:rich="http://richfaces.org/rich"> <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> + <style> + .viewsourcepanel { + padding-bottom:0px; + width:100%; + overflow:auto; + border-width:0; + background-color:#FFFFE7; + } + .viewsourcebody { + padding:0; + } + ol{ + font-size:12px !important; + } + </style> <p>This section overviews the attributes that are common for Ajax components such as a4j:support, a4j:commandButton, a4j:jsFunction, a4j:poll, a4j:push and so @@ -26,17 +41,9 @@ attribute is an id of the JSF component or an id list. This is a simple example: </p> - <div class="esample"> - <pre> -... -&lt;a4j:commandButton value="update" reRender="<b>infoBlock</b>" /&gt; -.... -&lt;h:panelGrid id="<b>infoBlock</b>"&gt; -..... -&lt;/h:panelGrid&gt; -..... - </pre> - </div> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/ajaxAttributes/snippets/reRender2.xhtml" highlight="xhtml"></rich:insert> + </rich:panel> <p> reRender uses <a target="_blank" href="http://java.sun.com/javaee/javaserverfaces/1.2_MR1/docs/api/ja... UIComponent.findComponent()</a> algorithm (with some additional exceptions) @@ -46,28 +53,9 @@ found mentioning it more precisely. The following example shows the difference in approaches (both buttons will work successfully): </p> - <div class="esample"> - <pre> -..... -&lt;h:form id="form1"&gt; - .... - &lt;a4j:commandButton value="Usual Way" reRender="<b>infoBlock</b>, <b>infoBlock2</b>" /&gt; - &lt;a4j:commandButton value="Shortcut" reRender="<b>:infoBlockl</b>,<b>:sv:infoBlock2</b>" /&gt; -..... -&lt;/h:form&gt; -&lt;h:panelGrid id="<b>infoBlock</b>"&gt; -..... -&lt;/h:panelGrid&gt; -..... -&lt;f:subview id="<b>sv</b>"&gt; -&lt;h:panelGrid id="<b>infoBlock2</b>"&gt; -..... -&lt;/h:panelGrid&gt; -..... -&lt;/f:subview&gt; - </pre> - </div> - + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/ajaxAttributes/snippets/reRender3.xhtml" highlight="xhtml"></rich:insert> + </rich:panel> <p> You can use JSF EL expression as a value of the reRender attribute. It might be a property of types Set, Collection, Array or simple String. The EL for reRender is resolved right before the @@ -88,14 +76,10 @@ explicitly. It might be useful if you have an area on a page that should be updated as a response on any Ajax request. For example, the following code allows to output error messages regardless of what Ajax request causes the Validation phase failed. - </p> - <div class="esample"> - <pre> -&lt;a4j:outputPanel <b>ajaxRendered="true"</b>&gt; - &lt;h:messages /&gt; -&lt;/a4j:outputPanel&gt; - </pre> - </div> + </p> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/ajaxAttributes/snippets/reRender1.xhtml" highlight="xhtml"></rich:insert> + </rich:panel> <p> <b>limitToList</b> attribute allows to dismiss the behavior of the a4j:outputPanel ajaxRendered attribute. limitToList = "false" means to update only the area(s) that mentioned in the @@ -119,14 +103,10 @@ the requests produced by the same event. For example, according to the following code, only the newest request will be sent to the server if a user types very fast and has typed the several characters already before the previous Ajax Response is back. - </p> -<div class="esample"> - <pre> -&lt;h:inputText value="<span>#</span>{userBean.name}"&gt; - &lt;a4j:support event="onkeyup" <b>eventsQueue="foo"</b> reRender="bar" /&gt; -&lt;/h:inputText&gt; - </pre> - </div> + </p> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/ajaxAttributes/snippets/eventqueue.xhtml" highlight="xhtml"></rich:insert> + </rich:panel> <p><b>requestDelay</b> attribute defines the time (in ms.) that the request will be wait in the queue before it is ready to send. When the delay time is over, the request will be sent to the server or removed if the newest 'similar' request is in a queue already . @@ -200,7 +180,7 @@ the Validation phase is passed successfully, you can replace h:commandButton with a4j:commandButton and point to the action method that navigates to the next page. If Validation process fails, the partial page update will occur and a user will see an error message. Otherwize, the application - proceeds to the next page. Make sure, you define &lt;redirect /%gt; option for the navigation rule to + proceeds to the next page. Make sure, you define &lt;redirect /&gt; option for the navigation rule to avoid memory leaks. </li> </ol> @@ -237,11 +217,9 @@ will be serialized in JSON format and be available on the client side. You can refer to it using the 'data' variable. For example: </p> - <div class="esample"> - <pre> -&lt;a4j:commandButton value="Update" data="<span>#</span>{userBean.name}" oncomplete="showTheName(data.name)" /&gt; - </pre> - </div> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/ajaxAttributes/snippets/data.xhtml" highlight="xhtml"></rich:insert> + </rich:panel> <p> Richfaces allows to serialize not only primitive types into JSON format, but also complex types including arrays and collections. The beans should be serializable to be refered Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/calendar/examples/reRender2.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/calendar/examples/reRender2.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/calendar/examples/reRender2.xhtml 2007-09-12 16:45:13 UTC (rev 2908) @@ -0,0 +1,7 @@ +... +<a4j:commandButton value="update" reRender="infoBlock"/> + .... +<h:panelGrid id="<b>infoBlock</b>"> + ..... +</h:panelGrid> +..... \ No newline at end of file Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/usage.xhtml 2007-09-12 15:35:12 UTC (rev 2907) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/form/usage.xhtml 2007-09-12 16:45:13 UTC (rev 2908) @@ -9,6 +9,17 @@ <ui:define name="sample"> <style type="text/css"> + .viewsourcepanel { + padding-bottom:0px; + width:100%; + overflow:auto; + border-width:0; + background-color:#FFFFE7; + } + .viewsourcebody { + padding:0; + } + input[type="button"], input[type="submit"] { background-color:#{a4jSkin.trimColor}; } @@ -30,7 +41,9 @@ 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. - <rich:insert src="/richfaces/form/snippets/commandLinkProblem.xhtml" highlight="xhtml"/> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/form/snippets/commandLinkProblem.xhtml" highlight="xhtml"/> + </rich:panel> </p> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/htmlCommandLink/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/htmlCommandLink/usage.xhtml 2007-09-12 15:35:12 UTC (rev 2907) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/htmlCommandLink/usage.xhtml 2007-09-12 16:45:13 UTC (rev 2908) @@ -7,7 +7,22 @@ xmlns:rich="http://richfaces.org/rich"> <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> + <style type="text/css"> + .viewsourcepanel { + padding-bottom:0px; + width:100%; + overflow:auto; + border-width:0; + background-color:#FFFFE7; + } + .viewsourcebody { + padding:0; + } + input[type="button"], input[type="submit"] { + background-color:#{a4jSkin.trimColor}; + } + </style> <p>a4j:htmlCommandLink functionality is similar to the standard h:commandLink component except the additional feature. </p> @@ -22,7 +37,9 @@ then updated via Ajax. Such problems could be solved with the a4j:htmlCommandLink usage. Necessary fields are encoded even when the link is not rendered initially. Hence it may be Ajax updated and parameters work correctly. </p> - <rich:insert highlight="xhtml" src="/richfaces/htmlCommandLink/snippets/commandLinkProblem.xhtml"></rich:insert> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert highlight="xhtml" src="/richfaces/htmlCommandLink/snippets/commandLinkProblem.xhtml"></rich:insert> + </rich:panel> </ui:define> </ui:composition> Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/page/snippets/gen.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/page/snippets/gen.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/page/snippets/gen.xhtml 2007-09-12 16:45:13 UTC (rev 2908) @@ -0,0 +1,8 @@ +<html> + <head> + <!--...Head Content here--> + </head> + <body> + <!--...Page Content Here--> + </body> +</html> \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/page/snippets/page.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/page/snippets/page.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/page/snippets/page.xhtml 2007-09-12 16:45:13 UTC (rev 2908) @@ -0,0 +1,8 @@ +<f:view> + <a4j:page> + <f:facet name="head"> + <!--...Head Content here--> + </f:facet> + <!--...Page Content here--> + </a4j:page> +</f:view> \ No newline at end of file Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/page/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/page/usage.xhtml 2007-09-12 15:35:12 UTC (rev 2907) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/page/usage.xhtml 2007-09-12 16:45:13 UTC (rev 2908) @@ -7,6 +7,22 @@ xmlns:rich="http://richfaces.org/rich"> <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> + <style type="text/css"> + .viewsourcepanel { + padding-bottom:0px; + width:100%; + overflow:auto; + border-width:0; + background-color:#FFFFE7; + } + .viewsourcebody { + padding:0; + } + + input[type="button"], input[type="submit"] { + background-color:#{a4jSkin.trimColor}; + } + </style> <p> <b>&lt;a4j:page&gt;</b> is a deprecated component used for solving of incompatibility problems in early Ajax4jsf and MyFaces versions. @@ -19,29 +35,15 @@ <p> This component should be defined as a child component for &lt;f:view&gt; For example: </p> - <p> -<pre>&lt;f:view&gt; - &lt;a4j:page&gt; - &lt;f:facet name="head"&gt; - &lt;!--...Head Content here--&gt; - &lt;/f:facet&gt; - &lt;!--...Page Content here--&gt; - &lt;/a4j:page&gt; -&lt;/f:view&gt;</pre> - </p> - <p> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/page/snippets/page.xhtml" highlight="xhtml"></rich:insert> + </rich:panel> + <p> Will be rendered as: </p> - <p> -<pre>&lt;HTML&gt; - &lt;HEAD&gt; - &lt;!--...Head Content here--&gt; - &lt;/HEAD&gt; -&lt;body &gt; - &lt;!--...Page Content Here--&gt; -&lt;/body&gt; -&lt;/HTML&gt;</pre> - </p> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert src="/richfaces/page/snippets/gen.xhtml" highlight="xhtml"></rich:insert> + </rich:panel> </ui:define> </ui:composition> Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/push/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/push/usage.xhtml 2007-09-12 15:35:12 UTC (rev 2907) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/push/usage.xhtml 2007-09-12 16:45:13 UTC (rev 2908) @@ -7,6 +7,19 @@ xmlns:rich="http://richfaces.org/rich"> <ui:composition template="/templates/component-sample.xhtml"> <ui:define name="sample"> + <style> + .viewsourcepanel { + padding-bottom:0px; + width:100%; + overflow:auto; + border-width:0; + background-color:#FFFFE7; + } + .viewsourcebody { + padding:0; + } + + </style> <p> The &lt;a4j:push&gt; periodically perform AJAX request to server, to simulate 'push' data. </p> @@ -22,16 +35,22 @@ for call push request. Simple example of usage: </p> <p> - Page code: - <rich:insert highlight="xhtml" src="/richfaces/push/snippets/page.xhtml"/> + <i>Page code:</i> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert highlight="xhtml" src="/richfaces/push/snippets/page.xhtml"/> + </rich:panel> </p> <p> - Code for registration of listener: - <rich:insert highlight="java" src="/richfaces/push/snippets/listenerReg.java"/> + <i>Code for registration of listener:</i> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert highlight="java" src="/richfaces/push/snippets/listenerReg.java"/> + </rich:panel> </p> <p> - Component can get message using current code: - <rich:insert highlight="java" src="/richfaces/push/snippets/listenermessage.java"/> + <i>Component can get message using current code:</i> + <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody"> + <rich:insert highlight="java" src="/richfaces/push/snippets/listenermessage.java"/> + </rich:panel> </p> <p> Thus, component 'push' uses asynchronous model instead of polls.