[richfaces-svn-commits] JBoss Rich Faces SVN: r22230 - in branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces: collapsiblePanel and 11 other directories.

Author: jbalunas(a)redhat.com Date: 2011-03-15 17:41:44 -0400 (Tue, 15 Mar 2011) New Revision: 22230 Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/accordion/simple.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/collapsiblePanel/samples/simple-sample.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/collapsiblePanel/simple.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/panel/samples/lookCustomization-sample.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/panel/simple.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/login.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/modalPopup.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/samples/modalPopup-sample.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/samples/simplePopup-sample.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/simplePopup.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/ajaxProgressBar.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/clientProgressBar.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/samples/ajaxProgressBar-sample.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/samples/clientProgressBar-sample.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tabPanel/simple.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tabPanel/valueManagement.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/simple.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/wizard.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tooltip/samples/tooltip-sample.xhtml branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tooltip/tooltip.xhtml Log: RFPL-1217 updates to showcase text Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/accordion/simple.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/accordion/simple.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/accordion/simple.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -5,14 +5,11 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> - <p>The <b>Accordion</b> (<i>panelBar from 3.3.x</i>) is a set of panels when one panel is expanded, - but other ones are collapsed. </p> - <p> - <b>Main addition</b> to previous 3.3.x functionality - accordion in 4.x was finally added with - different switching <b>switchType</b>'s. So as all the switchable panels it could be used with next modes - - "<i>client</i>", "<i>ajax</i>" and "<i>server</i>". - </p> - <p>The following demo shows the simple example of usage for the Accordion in client mode:</p> + <p>The <b>rich:accordion</b> component is a set of panels where one panel is expanded, + while the other ones are collapsed. This is similar to, and inherits much of + the features from the rich:togglePanel, and rich:tabPanel. See the descriptions + of these components for details on switch-types, and shortcuts.</p> + <p>The following example shows the usage of the rich:accordion in client mode:</p> <ui:include src="#{demoNavigator.sampleIncludeURI}" /> <ui:include src="/templates/includes/source-view.xhtml"> <ui:param name="src" value="#{demoNavigator.sampleIncludeURI}" /> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/collapsiblePanel/samples/simple-sample.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/collapsiblePanel/samples/simple-sample.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/collapsiblePanel/samples/simple-sample.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -28,7 +28,7 @@ </ul> </rich:collapsiblePanel> - <p><b>And that panel switched by ajax and closed by default:</b></p> + <p><b>This panel is switched via Ajax and closed by default:</b></p> <rich:collapsiblePanel header="JSF 2 and RichFaces 4" expanded="false" switchType="ajax"> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/collapsiblePanel/simple.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/collapsiblePanel/simple.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/collapsiblePanel/simple.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -5,12 +5,13 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> - <p><b>collapsiblePanel</b> representation is fully analogous to simple - <b>rich:panel</b> component. Additionally that component could be toggled - between two representations. In collapsed state only header shown and - in expanded state there is complete panel.</p> - <p>As most of switchable components it has three <b>switch types</b> for - switching between states - <b>ajax</b>, <b>server</b> and <b>client</b> + <p>The <b>rich:collapsiblePanel</b> component is fully analogous to a simple + <b>rich:panel</b> component. Except that it can be collapsed, and expanded. + In the collapsed state only the header is shown and in expanded state the + complete panel.</p> + <p>As with most of switchable components it has three <b>switch types</b> for + switching between states - <b>ajax</b>, <b>server</b> and <b>client</b>. + See the rich:togglePanel for details. </p> <ui:include src="#{demoNavigator.sampleIncludeURI}" /> <ui:include src="/templates/includes/source-view.xhtml"> @@ -19,7 +20,7 @@ <ui:param name="openLabel" value="View Source" /> <ui:param name="hideLabel" value="Hide Source" /> </ui:include> - <p>In ajax and server mode <b>PanelToggleEvent</b> queued and could be handled - using <b>Listener</b> defined via <b>toggleListener</b> attribute</p> + <p><b>Note: </b>In ajax and server modes the <b>PanelToggleEvent</b> is queued and can be handled + using a <b>Listener</b> defined via the <b>toggleListener</b> attribute</p> </ui:composition> </html> \ No newline at end of file Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/panel/samples/lookCustomization-sample.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/panel/samples/lookCustomization-sample.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/panel/samples/lookCustomization-sample.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -39,8 +39,8 @@ <f:facet name="header"> Panel #1. Changing Style Synchronously </f:facet> - Each component in the RichFaces has a pre-defined set of classes you can manipulate with. If defined, those - classes overwrite the ones come from the skin. + Each component in RichFaces has a pre-defined set of CSS classes you can manipulate. If defined, those + classes overwrite the ones that come from the skin. </rich:panel> <rich:panel> @@ -61,7 +61,7 @@ <f:facet name="header"> Panel header </f:facet> - Base on the previous layout, but some javascript behaviour added. + Base on the previous layout, but with javascript visual effects added. </rich:panel> <rich:panel style="width:200px;" bodyClass="body3"> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/panel/simple.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/panel/simple.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/panel/simple.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -5,10 +5,10 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> - <p>The panel is a rectangle area on a page that may contain any - content including other panels. Panel has a header (optionally) and a + <p>The <b>rich:panel</b> component creates a rectangle shaped area on the page that may contain any + content including other panels. Panel's have a header (optional) and a body. The default look-n-feel is based on the current skin. Look-n-feel - of any parts of the panel, including color scheme, borders and paddings + of any part of the panel, including color scheme, borders and paddings can be customizable using with pre-defined number of CSS classes.</p> <ui:include src="#{demoNavigator.sampleIncludeURI}" /> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/login.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/login.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/login.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -5,30 +5,19 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> - <p>In RichFaces 3.3.x many developers used <b>rich:dropDownMenu</b> - component for creation of Search/Login popups attached to toolbars. And - there were two reasons for that:</p> - <ul> - <li>Simplicity of usage. No script positioning required. - rich:dropDownMenu performs popup positioning on its own and simply - customizable by using <b>jointPoint</b> and <b>direction</b> - attributes.</li> - <li>RichFaces 3.3.x has no lightweight popup panel and <b>rich:modalPanel</b> - usage for such cases required workarounds in order to make it - non-modal</li> - </ul> - <p>But that approach has some disadvantages as well:</p> - <ul> - <li><b>rich:dropDownMenu</b> component was added with additional - JavaScript code for inputs processing inside the <b>rich:menuItem</b>'s. - That not really native task for menu so that code was really - superfluous from simple menus point of view.</li> - <li>Developer still has to work on styling of menu item removing - hover effects and making it looks like panel rather than menuItem</li> - </ul> - <p>RichFaces 4.x provides clean api for popup panel and added - non-modal state, so for now it's really easier and looking more native - to use modal panel for such tasks. Below you could see two samples:</p> + <p>RichFaces 4.x provides a clean api for popup panels and added + non-modal state, so now its easy to use the popup panel for login, and + seach panels. The examples below show both variants; login, and search, but + of coarse you could use any content you wanted.</p> + <p>At the bottom of the page is a description and information for RichFaces + 3.3.X users who used rich:dropDownMenu components to accomplish this same + task. If that was you - it is worth a read.</p> + <p>The <b>rich:popupPanel</b> also allows you to pass options to the JavaScript show method + such as: <b>min/max width and height</b>, specific <b>width and height</b>, <b>top + and left</b> positions for the panel. So with <b>rich:hashParam</b> it's + really simple to build declarative calls for the panel which can use + dynamic properties.</p> + <ui:include src="#{demoNavigator.sampleIncludeURI}" /> <ui:include src="/templates/includes/source-view.xhtml"> <ui:param name="src" value="#{demoNavigator.sampleIncludeURI}" /> @@ -36,11 +25,29 @@ <ui:param name="openLabel" value="View Source" /> <ui:param name="hideLabel" value="Hide Source" /> </ui:include> - <p>rich:popup panel allows you to pass next options to show method: - <b>min and max width and height</b>, actual <b>width and height</b>, <b>top - and left</b> positions for the panel. So with <b>rich:hashParam</b> it's - really simple to build declarative call for the panel which uses - dynamic properties.</p> + <p>In RichFaces 3.3.x many developers used the <b>rich:dropDownMenu</b> + component for creation of Search/Login popups attached to toolbars. + There were two main reasons for this:</p> + <ul> + <li>Simplicity of usage. No script positioning required. + rich:dropDownMenu performs popup positioning on its own and was simple + to customize by using <b>jointPoint</b> and <b>direction</b> + attributes.</li> + <li>RichFaces 3.3.x has no lightweight popup panel and <b>rich:modalPanel</b> + usage for such cases required workarounds in order to make it + non-modal</li> + </ul> + <p>But that approach also has some disadvantages:</p> + <ul> + <li><b>rich:dropDownMenu</b> component was created with additional + JavaScript code for input processing inside the <b>rich:menuItem</b>'s. + That is not really a native task for menus so that code was really + superfluous from simple menus point of view.</li> + <li>Developer still had to work on styling of menu item removing + hover effects and making it looks like panel rather than menuItem</li> + </ul> + <p>We think that the new features of the <b>rich:popupPanel</b> are an + excellent replacement for this and hope you will consider updating to it.</p> </ui:composition> </html> \ No newline at end of file Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/modalPopup.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/modalPopup.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/modalPopup.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -5,11 +5,11 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> - <p>There you could check the modal panel which blocks the main - screen for any operations defined by using <b>popupPanel</b> component - with <b>modal="true"</b></p> - <p>In that sample the panel also defined as resizable so you could - change its sizes using mouse</p> + <p>This example of the <b>rich:popupPanel</b> shows you a modal style popup that + blocks the main screen from any operation. This is defined by setting the + <b>modal="true"</b> attribute.</p> + <p>In this example the panel is also defined as resizable so you could + change its sizes using the mouse</p> <ui:include src="#{demoNavigator.sampleIncludeURI}" /> <ui:include src="/templates/includes/source-view.xhtml"> <ui:param name="src" value="#{demoNavigator.sampleIncludeURI}" /> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/samples/modalPopup-sample.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/samples/modalPopup-sample.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/samples/modalPopup-sample.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -19,9 +19,8 @@ X </h:outputLink> </f:facet> - <p>Additionally there you could check how to handle the clicks - outside the panel.</p> - <p>In this sample the click outside - closes the panel as well as - clicking hide control in the header</p> + <p>You can also check and trigger events if the use clicks outside of the + panel.</p> + <p>In this example clicking outside closes the panel.</p> </rich:popupPanel> </ui:composition> \ No newline at end of file Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/samples/simplePopup-sample.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/samples/simplePopup-sample.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/samples/simplePopup-sample.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -19,9 +19,7 @@ X </h:outputLink> </f:facet> - <p>Any content might be inside the panel.</p> - <p>Consider inclusion of the form elements into the popup or - redefinition of <b>domElementAttachment</b> attribute.</p> + <p>Any content might be inside this panel.</p> <p>The popup panel is open and closed from the javascript function of component client side object. The following code <a href="#" onclick="#{rich:component('popup')}.hide()">hide this panel</a>: <f:verbatim>&#35;</f:verbatim>{rich:component('popup')}.hide()</p> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/simplePopup.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/simplePopup.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/popup/simplePopup.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -5,17 +5,17 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> - <p>Popup panel component used to create any kind of popups on the page.</p> + <p>The <b>rich:popupPanel</b> component is used to create any kind of popups on the page.</p> <p>Main features:</p> <ul> - <li>Has two states modal and non-modal</li> - <li>Could be defined as resizable</li> - <li>Could be autosized according to content</li> - <li>Could be moved across the screen</li> - <li>Could be automatically positioned as centered or use user defined position</li> + <li>Two states; modal and non-modal</li> + <li>Can be defined as resizable</li> + <li>Can be autosized according to content</li> + <li>Can be moved across the screen</li> + <li>Can be automatically positioned as centered or use a defined position</li> </ul> - <p>This sample shows simple <b>non-modal popup</b> which are <b>movable</b> but not resizable - as defined to use <b>autosizing</b> according to it's content</p> + <p>This example shows a simple <b>non-modal popup</b> which is movable but not resizable + and defined to use <b>autosizing</b> according to it's content</p> <ui:include src="#{demoNavigator.sampleIncludeURI}" /> <ui:include src="/templates/includes/source-view.xhtml"> @@ -25,10 +25,10 @@ <ui:param name="hideLabel" value="Hide Source" /> </ui:include> - <p>Besides this sample shows two variants of working with the component JS API:</p> + <p>This example also shows two variants of working with the component JavaScript API:</p> <ul> <li>The popup is called by the <b>rich:componentControl</b> attached to button</li> - <li>The popup is closed by simple JS calls which defined using <b>rich:component</b> function</li> + <li>The popup is closed by a simple JavaScript call which is defined using the <b>rich:component</b> function</li> </ul> </ui:composition> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/ajaxProgressBar.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/ajaxProgressBar.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/ajaxProgressBar.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -5,7 +5,11 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> - <p>ProgressBar worked in "ajax" mode </p> + <p>The <b>rich:progressBar</b> displays a standard progress widget, and allows + for additional facets such as initial, and finish state customizations. In + Ajax mode you simply bind the bar to a bean property that returns a value between the + 'minValue' and 'maxValue'. This value is then polled from the browser using + the specified interval.</p> <br/> <ui:include src="#{demoNavigator.sampleIncludeURI}" /> <ui:include src="/templates/includes/source-view.xhtml"> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/clientProgressBar.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/clientProgressBar.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/clientProgressBar.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -5,7 +5,10 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> - <p>ProgressBar worked in "client" mode </p> + <p>The <b>rich:progressBar</b> in client mode is strictly based on values in + the client browser, and so is not determined by server-state. Using + JavaScript component API calls trigger the start, stop, and progress of + the component. Take a look at the source code below for an example.</p> <br/> <ui:include src="#{demoNavigator.sampleIncludeURI}" /> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/samples/ajaxProgressBar-sample.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/samples/ajaxProgressBar-sample.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/samples/ajaxProgressBar-sample.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -11,7 +11,7 @@ minValue="0" maxValue="100" reRenderAfterComplete="progressPanel"> <f:facet name="initial"> <h:panelGroup> - <h:outputText value="Process doesn't started yet" /> + <h:outputText value="Process hasn't started yet" /> <a4j:commandButton action="#{progressBarBean.startProcess}" value="Start Process" execute="@form" render="pb" rendered="#{progressBarBean.buttonRendered}" Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/samples/clientProgressBar-sample.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/samples/clientProgressBar-sample.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/progressBar/samples/clientProgressBar-sample.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -36,7 +36,7 @@ <h:form id="form2"> <rich:progressBar mode="client" id="progressBar" value="-1"> <f:facet name="initial"> - <h:outputText value="Process doesn't started yet" /> + <h:outputText value="Process hasn't started yet" /> </f:facet> <f:facet name="complete"> <h:outputText value="Process Done" /> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tabPanel/simple.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tabPanel/simple.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tabPanel/simple.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -5,12 +5,9 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> - <p>Tab panel is used to create "tabbed" pages. - RichFaces tab panel can be switched in 3 ways: using "normal" server-side - update, using "ajax" style update, when only tab panel area is updated - on the page, and using "client" type, without any interaction with the - server. Note, that in case of a "client" switch type, all tabs are - rendered at the same time. </p> + <p>The <b>rich:tabPanel</b> component is used to create "tabbed" sections or pages. + RichFaces tab panel can be switched in the 3 ways detailed in the + <b>rich:togglePanel</b> example.</p> <ui:include src="#{demoNavigator.sampleIncludeURI}" /> <ui:include src="/templates/includes/source-view.xhtml"> <ui:param name="src" value="#{demoNavigator.sampleIncludeURI}" /> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tabPanel/valueManagement.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tabPanel/valueManagement.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tabPanel/valueManagement.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -5,18 +5,13 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> - <p>That sample shows how to use external controls for switching the - panel</p> - <p><b>toggleControl</b> behavior used as for any other switchable - panel (<i>togglePanel, accordion</i>)</p> - <p><b>targetItem</b> could be <b>defined with tab name</b> and - additionally tabPanel supports next <b>predefined shortcuts</b>:</p> - <ul> - <li>@next</li> - <li>@prev</li> - <li>@first</li> - <li>@last</li> - </ul> + <p>This example shows how to use external controls, and special shortcuts + to switch the tabbed panels</p> + <p>The <b>rich:toggleControl</b> behavior used by any of the other switchable + panels (<i>togglePanel, accordion</i>) can be used with <b>rich:tabPanels</b> + as well.</p> + <p>So you can set the <b>targetItem</b> to be defined as a specific tab name + or use one of the shortcuts detailed in the <b>rich:togglePanel</b> example.</p> <ui:include src="#{demoNavigator.sampleIncludeURI}" /> <ui:include src="/templates/includes/source-view.xhtml"> <ui:param name="src" value="#{demoNavigator.sampleIncludeURI}" /> @@ -24,8 +19,8 @@ <ui:param name="openLabel" value="View Source" /> <ui:param name="hideLabel" value="Hide Source" /> </ui:include> - <p>Additionally you could manage the current tab at server side - using <b>activeItem</b> attribute at tabPanel <b>bound to some Bean - property</b> which holds current tab name.</p> + <p>Additionally you can manage the current tab on the server side + using the <b>activeItem</b> attribute on the tabPanel <b>bound to some Bean + property</b> which then holds current tab name.</p> </ui:composition> </html> \ No newline at end of file Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/simple.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/simple.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/simple.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -5,18 +5,31 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> -<p><b>togglePanel</b> is a base component for all switchable panels in RichFaces. It renders -sequence of states that can be switched (toggled) by a behavior -called <b>toggleControl</b>. rich:togglePanel has no default appearance. You can define it using -the set of child <b>togglePanelItem's</b> with any given content inside. </p> -<p> <b>switchType</b> attribute defines the strategy of switching. The possible values for this attributes are:</p> +<p>The <b>rich:togglePanel</b> is a core component for all switchable panels in RichFaces. It renders +a sequence of panels based on state that can be switched (toggled) by a behavior +called <b>rich:toggleControl</b>. All of these other panels (e.g. tabPanel, accordion, etc...) share +the basic sets a features defined below.</p> +<p>The <b>switchType</b> attribute defines the strategy used to toggle between panels. The possible values for this attributes are:</p> <ul> -<li><b>client</b> - switching happens on the client without any request to the server. The jsf form is not required in this mode</li> -<li><b>ajax</b> - when states are switched, the content of new states comes from the server in Ajax way.</li> +<li><b>client</b> - switching happens on the client without any request to the server. A jsf form is not required in this mode</li> +<li><b>ajax</b> - when states are switched, the content of new states comes from the server via Ajax requests.</li> <li><b>server</b> - the whole page is reloaded when states are switched</li> </ul> -<p>As the component not provides any predefined layout it could be used for creation of any kind of switchable panels easilly. -Here is the sample of simplest tabbed pane organized using that component:</p> +<p>There is also a very useful set of shortcut toggle values that allow you to +create many custom effects like wizards. See the other switchable panel examples. +Available shortcuts are defined below:</p> + <ul> + <li>@next</li> + <li>@prev</li> + <li>@first</li> + <li>@last</li> + </ul> +<p> A <b>rich:togglePanel</b> has no default appearance, and allows you to customize it's +look-n-feel any way you like. You create a set of child <b>rich:togglePanelItem</b>'s +with any content you want inside of them. </p> +<p>As the component does not provide any predefined layout it could be used for +creation of any kind of switchable panels. This example is a very simple +tabbed pane organized using that component:</p> <ui:include src="#{demoNavigator.sampleIncludeURI}" /> <ui:include src="/templates/includes/source-view.xhtml"> <ui:param name="src" value="#{demoNavigator.sampleIncludeURI}" /> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/wizard.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/wizard.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/togglePanel/wizard.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -5,22 +5,21 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> - <p>And here is simple wizard example constructed using <b>rich:togglePanel</b> - component.</p> - <p>Main advantages of using that component for wizard creation:</p> + <p>This is a more complex use-case of a wizard constructed using the + <b>rich:togglePanel</b> component.</p> + <p>Main advantages of using this component for wizard creation:</p> <ul> <li>You're not defining any navigation rules and not managing - current page shown in your code. You just inserting - <b>rich:togglePanelItem</b> components in needed order and switching between - them. Current page could be stored using activeItem additionally.</li> - <li>You not bound anywhere in controls to which panel you need to - switch. Just the <b>@next</b> and <b>@prev</b> shortcuts used. In that case you - could easilly add/remove additional panels without making changes in + current page shown in your code. You're just inserting + <b>rich:togglePanelItem</b> components where needed and switching between + them. Also the current page state could be stored using activeItem.</li> + <li>You are not bound anywhere in controls to which panel you need to + switch. Just the <b>@next</b> and <b>@prev</b> shortcuts are used. In that + case you could easily add/remove additional panels without making changes in switching code. Though you still could use names in targetItem in case - really need to perform switch to any concrete one. or could use two - more shortcuts - <b>@first</b>, <b&gt;(a)last&lt;/b&gt;.&lt;/li&gt; + you really need to perform a specific switch.</li> <li>Opposite to 3.3.x where toggle controls were encoded as links - - in RF 4.x <b>rich:toggleControl</b> is just a behavior so any control could + - in RF 4.x <b>rich:toggleControl</b> is just a behavior so any control can be used for switching.</li> </ul> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tooltip/samples/tooltip-sample.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tooltip/samples/tooltip-sample.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tooltip/samples/tooltip-sample.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -32,20 +32,20 @@ <h:panelGrid columns="2"> <rich:panel id="sample1" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header"> - <p>Here you can see <b>default client-side</b> tool-tip</p> + <p>Here you can see a <b>default client-side</b> tool-tip</p> <rich:tooltip id="tt1" styleClass="tooltip" layout="block"> <span style="white-space: nowrap"> This tool-tip content was <strong>pre-rendered</strong> to the page.<br /> - Also the tooltip following mouse by default </span> + The tool-tip is also following mouse around.</span> </rich:tooltip> </rich:panel> <rich:panel id="sample2" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header"> - <p>This tool-tip will not <b>follow mouse</b>. Also this tool-tip - has a <b>delay 1.5 sec</b>, so be patient!</p> + <p>This tool-tip will not <b>follow the mouse</b>, and + has a <b>delay of 1.5 seconds</b>, so be patient!</p> <rich:tooltip followMouse="false" showDelay="1500" styleClass="tooltip-custom-body" layout="block"> - <span style="white-space: nowrap"> This tool-tip content also + <span style="white-space: nowrap"> This tool-tip content is also <strong>pre-rendered</strong> to the page.<br /> </span> </rich:tooltip> @@ -53,11 +53,11 @@ <h:form> <rich:panel id="sample3" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header"> - <p>This tool-tip rendered on server <b>in separate request</b>. + <p>This tool-tip was rendered on the server using an Ajax request. </p> <rich:tooltip mode="ajax" styleClass="tooltip" layout="block"> <span style="white-space: nowrap">This tool-tip content was - <strong>rendered on server</strong> </span> + <strong>rendered on the server</strong> </span> <h:panelGrid columns="2"> <h:outputText style="white-space:nowrap" value="tooltips requested:" /> @@ -70,7 +70,8 @@ <h:form> <rich:panel id="sample4" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header"> - <p>This tool-tip will be <b>activated on mouse click</b>.</p> + <p>This tool-tip will be <b>activated on a mouse click</b>, and + has default content defined.</p> <rich:tooltip showEvent="click" mode="ajax" styleClass="tooltip" layout="block"> <f:facet name="defaultContent"> Modified: branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tooltip/tooltip.xhtml =================================================================== --- branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tooltip/tooltip.xhtml 2011-03-15 19:42:29 UTC (rev 22229) +++ branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/tooltip/tooltip.xhtml 2011-03-15 21:41:44 UTC (rev 22230) @@ -5,18 +5,21 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> - <p>Tooltip is a small non-modal pop-up that could be used to - display additional information, that is usually hidden.<br /> + <p>The <b>rich:tooltip</b> component creates a small non-modal pop-up that + can be used to display additional information for nearly anything on the page. </p> - <p>Major tooltip features:</p> + <p>Major features:</p> <ul> - <li>Tool-tip content may be <b>pre-rendered</b> on a page (client - mode) or <b>loaded on separate Ajax request</b> (ajax mode)</li> - <li>In "ajax" mode <b>default content</b> could be shown while - request is executed</li> - <li>Tooltip <b>look is fully customizable</b> using both - + <li>Tool-tip content may be <b>pre-rendered</b> on a page using client + mode or <b>loaded dynamically</b> using separate Ajax requests via Ajax + mode.</li> + <li>In Ajax mode <b>default content</b> can be shown while the + request is being executed</li> + <li>Tool-tip's <b>look-n-feel is fully customizable</b> using both Richfaces skins and CSS style classes</li> </ul> + <p>There are various other options available such as delays, follow modes, + and more that are in the example below:</p> <ui:include src="#{demoNavigator.sampleIncludeURI}" /> <ui:include src="/templates/includes/source-view.xhtml">