Author: jbalunas(a)redhat.com
Date: 2011-03-16 10:22:19 -0400 (Wed, 16 Mar 2011)
New Revision: 22241
Modified:
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/componentControl/tableFilteringAPI.xhtml
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/functions/functions.xhtml
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/hashParam/hashOptionsPopup.xhtml
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/hashParam/samples/hashOptionsPopup-sample.xhtml
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/jquery/jquery.xhtml
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/standardSkinning/standardSkinning.xhtml
Log:
RFPL-1221 updates to showcase text
Modified:
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/componentControl/tableFilteringAPI.xhtml
===================================================================
---
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/componentControl/tableFilteringAPI.xhtml 2011-03-16
09:30:52 UTC (rev 22240)
+++
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/componentControl/tableFilteringAPI.xhtml 2011-03-16
14:22:19 UTC (rev 22241)
@@ -5,11 +5,13 @@
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition>
- <p>ComponentControl allows to call JS api on any component. It
- supports parameters passing using f:param, a4j:param and a4j:hasParam
- tags.</p>
- <p>Currently target component should be defined by using clientId,
- but we planning to add lookup by short id in nearest versions.</p>
+ <p>The <b>rich:componentControl</b> component makes it easy to call
any of
+ the available JavaScript APIs on RichFaces components. It
+ supports parameter passing using f:param, a4j:param and a4j:hasParam
+ tags. You can define the target component by using the clientId, but at some
+ point we plan to add support for short-id lookup.</p>
+ <p>In the example below we are using <b>rich:componentControl</b> to
allow
+ external manipulation of the data filter.</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/functions/functions.xhtml
===================================================================
---
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/functions/functions.xhtml 2011-03-16
09:30:52 UTC (rev 22240)
+++
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/functions/functions.xhtml 2011-03-16
14:22:19 UTC (rev 22241)
@@ -4,8 +4,8 @@
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
- <p>RichFaces provides set of functions for more convinient work
- with DOM tree and to use some server side expressions.</p>
+ <p>RichFaces provides a set of JavaScript functions to make working with the
+ DOM tree and client side component API easier.</p>
<p>Here is the current list:</p>
<ul>
<li><b>rich:clientId(id)</b> - returns client Id for component by
@@ -14,16 +14,15 @@
short id</li>
<li><b>rich:component(id)</b> - returns richfaces client
component instance to call some API method.</li>
- <li><b>rich:isUserInRole(role)</b> - returns is the user has
+ <li><b>rich:isUserInRole(role)</b> - returns if the user has
specified role.</li>
<li><b>rich:findComponent(id)</b> - returns component instance
for given short id</li>
</ul>
- <p>For example the result of # {rich:element('input')} expression
- will be - document.getElementById('formId:input').</p>
- <p>And here is one more simple example. There is no need in Bean
- creation in order to store the value. It's picked from component
- instance by using rich:findComponent call.</p>
+ <p>As an example, the result of <b>#
{rich:element('input')}</b> expression
+ would be the same as calling:
<i>document.getElementById('formId:input')</i>.</p>
+ <p>Below is another example that shows how to pull a value directly from a
+ component using the rich:findComponent call.</p>
<ui:include src="#{demoNavigator.sampleIncludeURI}" />
<ui:include src="/templates/includes/source-view.xhtml">
@@ -32,9 +31,4 @@
<ui:param name="openLabel" value="View Source" />
<ui:param name="hideLabel" value="Hide Source" />
</ui:include>
-
- <p>One more sample could be found at dataScroller API page. There
- are rich:component used for calling JS API of dataScroller.</p>
- <p>This set goes to be extended continously. Rise jira or forum
- requests if you have proposals on new useful functions.</p>
</ui:composition>
\ No newline at end of file
Modified:
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/hashParam/hashOptionsPopup.xhtml
===================================================================
---
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/hashParam/hashOptionsPopup.xhtml 2011-03-16
09:30:52 UTC (rev 22240)
+++
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/hashParam/hashOptionsPopup.xhtml 2011-03-16
14:22:19 UTC (rev 22241)
@@ -5,15 +5,14 @@
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition>
- <p><b>rich:hashParam</b> allows you to group client side parameters
- into hash map in order to pass to client API functions of any
- components.</p>
- <p>Press "Show Popup" button in order to call the panel. All the
- parameters for show method passed from component control nested
- a4j:param's instead of to be defined with attributes in static way. As
- the show() method accepts event and options hash - all the param's
- except event grouped using <b>rich:hashParam</b> component and passed
- as hash</p>
+ <p>The <b>rich:hashParam</b> component allows you to group client side
parameters
+ into a hash map in order to pass them to client API functions of any
+ RichFaces components.</p>
+ <p>In this example we are packaging all the parameters for the show() method
+ from a component control with nested a4j:param's instead of using static
+ values. Since the show() method accepts event and an option hash as parameters
+ all the values except the event is grouped using <b>rich:hashParam</b>
+ and passed as as single hash value</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/hashParam/samples/hashOptionsPopup-sample.xhtml
===================================================================
---
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/hashParam/samples/hashOptionsPopup-sample.xhtml 2011-03-16
09:30:52 UTC (rev 22240)
+++
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/hashParam/samples/hashOptionsPopup-sample.xhtml 2011-03-16
14:22:19 UTC (rev 22241)
@@ -25,14 +25,14 @@
<h:outputText value="minHeight:" />
<h:outputText value="150" />
</h:panelGrid>
- <p>Also panel getting centered by using:</p>
+ <p>The panel is getting centered by using:</p>
<p><a4j:param noEscape="true" name="left"
value="(screen.width/2)-250"/></p>
<p><a4j:param noEscape="true" name="top"
value="(screen.height/2)-150"/></p>
<fieldset><legend><b>NOTE:</b></legend>
- <p>Pay your attention that show() api method requires event
- parameter to be first according to signature. So we passed it before
+ <p>Notice that the show() api method requires an event
+ parameter to be first according to signature. So we passed it before the
hashParam.</p>
</fieldset>
</rich:popupPanel>
Modified:
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/jquery/jquery.xhtml
===================================================================
---
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/jquery/jquery.xhtml 2011-03-16
09:30:52 UTC (rev 22240)
+++
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/jquery/jquery.xhtml 2011-03-16
14:22:19 UTC (rev 22241)
@@ -3,38 +3,26 @@
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
- <p>rich:jQuery integrates jQuery javascript framework into the
- JavaServer Faces application. The component allows to apply the styles
+ <p>The <b>rich:jQuery</b> component integrates the jQuery JavaScript
framework
+ into your application. This include being able to apply the styles
and behavior to the DOM elements dynamically, including the result of
JSF components rendering.</p>
- <p>The <b>selector</b> attribute defines an object or list of
objects,
- the query defined with the query attribute will be applied to.
- And <b>query</b> attribute should be defined with valid JavaScript
statements or jQuery api calls</p>
+ <p>The <b>selector</b> attribute defines an object or list of objects
+ that the query defined with the query attribute will be applied to.
+ The <b>query</b> attribute should be defined with valid JavaScript
statements or jQuery api calls</p>
- <p>rich:jQuery can be used in next major modes:</p>
+ <p>rich:jQuery can be used in these modes:</p>
<ul>
- <li>as a once time query applied immediately or on document ready
- event</li>
- <li>definition of event handler which bound to elements returned
+ <li>As a one time query applied immediately or on a document ready
+ event.</li>
+ <li>Define an event handler which is bound to elements returned
by selector on some event.</li>
- <li>as a javascript function that can be invoked from the custom
- javascript</li>
+ <li>As a JavaScript function that can be invoked from custom
+ JavaScript</li>
</ul>
- <p>The modes chosen with <b>timing</b>, <b>name </b>and
<b>event </b>attributes that
- can have the following options:</p>
- <p><b>Timing</b></p>
- <ul>
- <li>immediate - applying the query immediately</li>
- <li>domready - applying the query when the document is loaded.</li>
- </ul>
- <p><b>event </b>and <b>attachType </b>defined allows to
bind the query to some
- event of elements which returned by selector. "attachType" could be
- "<i>live</i>", "<i>bind</i>" and
"<i>one</i>".</p>
- <p>Defining <b>name </b>attribute - causes <u>timing too be
ignored</u> and
- just named function to call from js to be created.</p>
-
-
-This demo shows how to attach the mouseover/mouseout events to the DOM objects. However
the images below show how to make them enlarged.
+
+ <p>This example shows how to attach events to the mouseover/mouseout event
+ on the DOM objects. The source below will show how to make them enlarged.</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/standardSkinning/standardSkinning.xhtml
===================================================================
---
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/standardSkinning/standardSkinning.xhtml 2011-03-16
09:30:52 UTC (rev 22240)
+++
branches/4.0.X/examples/richfaces-showcase/src/main/webapp/richfaces/standardSkinning/standardSkinning.xhtml 2011-03-16
14:22:19 UTC (rev 22241)
@@ -7,23 +7,20 @@
xmlns:rich="http://richfaces.org/rich">
<ui:composition>
- <p>This section overviews main principles of standard components
- skinning with the Rich Faces framework.</p>
- <p>This feature provides styling for standard HTML form elements in
- order to be highly compilant with RichFaces common look'n'feel. There
- should be two ways of applying skins to elements:</p>
+ <p>RichFaces provides a mechanism to apply <b>RichFaces skinning
principles</b>
+ to <b>standard components</b>!</p>
+ <p>This feature provides styling for standard HTML form elements so that
+ the share a commmon look'n'feel with RichFaces component skins. There
+ are two general approaches to apply skins to these elements:</p>
<ul>
- <li>Skinning style classes are applied to elements by element
- name and type attribute (where applicable). No additional steps are
- required from an application developer. Application initialization
- parameter serves for enabling/disabling the feature.</li>
- <li>Several style classes are provided for different types of
- elements. That style classes have predefined names. Application
- developer should manually assign classes to controls that need
- skinning or assign a class to an element that contains controls.</li>
+ <li><b>Automatic:</b> Toggled via a <i>context param</i>
this approach
+ will attempt to skin many standard components using element names and
+ type attributes where possible. No additional steps are
+ required from an application developer. </li>
+ <li><b>Manual:</b> RichFaces also provides a set of CSS style
classes
+ that can be manually assigned to controls.</li>
</ul>
- <p>Standard controls skinning feature provides 2 levels of
- skinning:</p>
+ <p>The automatic approach also has 2 levels of support:</p>
<ol>
<li><b>Standard</b> - customization of only basic style
properties.</li>
@@ -39,14 +36,14 @@
standards compilant mode) or CSS 3 draft namespace selectors (e.g.
Mozilla Firefox).</rich:panel>
- <p>Here is the skinned form example. Note there is no styling in
+ <p>Here is a skinned form example. Note there is no styling in
sources of that form</p>
<rich:panel id="panel" width="300" height="230">
<f:facet name="header">
Standard components skinning
</f:facet>
- <i> All the controls below is just standard JSF components skinned
+ <i> All the controls below are just standard JSF components skinned
with Rich Faces: </i>
<hr />
<h:form>
@@ -68,27 +65,9 @@
<h:commandLink value="Action Link" />
</h:form>
</rich:panel>
-
- <p>There three ways of applying skinning to application:</p>
- <ul>
- <li>By default <b>org.richfaces.enableControlSkinning</b> context
- param is set to <b>true</b> and it means that all standard elements
- on the page will be skinned. (CSS style classes for elements based on
- their names and type attribute values will be applied). You may
- redefine it to <b>disable</b> in order to turn it off.</li>
- <li>By default <b>org.richfaces.enableControlSkinningClasses</b>
- context param is set to <b>false</b> and it means that basic elements
- nested to element having <i>rich-container</i> class will be skinned.
- It could be also turned off using <b>disable</b> value.</li>
- <li>RichFaces also provides predefined classes which can be
- applied by an end developer to elements need to be skinned separately.
- This classes added to the page also according to
<b>org.richfaces.enableControlSkinningClasses</b>
- context-param.</li>
- </ul>
-
- <p>To get a better idea of standard component skinning we recommend
- to explore CSS files located in
- ui/core/ui/src/main/resources/org/richfaces/ folder of RichFaces svn.</p>
+
+ <p>For more details on this setup and cofiguration of these features
+ please review <a
href="http://www.jboss.org/richfaces/docs">RichFaces
documentation</a>.</p>
</ui:composition>
</html>
\ No newline at end of file