From richfaces-svn-commits at lists.jboss.org Tue Jun 10 05:27:26 2008 Content-Type: multipart/mixed; boundary="===============7885898586084166447==" MIME-Version: 1.0 From: richfaces-svn-commits at lists.jboss.org To: richfaces-svn-commits at lists.jboss.org Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r8967 - in trunk/docs: faq/en/src/main/resources/css and 3 other directories. Date: Tue, 10 Jun 2008 05:27:25 -0400 Message-ID: --===============7885898586084166447== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: cluts Date: 2008-06-10 05:27:24 -0400 (Tue, 10 Jun 2008) New Revision: 8967 Modified: trunk/docs/faq/en/src/main/docbook/module/RFCfaq.xml trunk/docs/faq/en/src/main/resources/css/html.css trunk/docs/userguide/en/src/main/docbook/included/ajaxListener.xml trunk/docs/userguide/en/src/main/docbook/included/columns.xml trunk/docs/userguide/en/src/main/docbook/included/commandButton.xml trunk/docs/userguide/en/src/main/docbook/included/componentControl.xml trunk/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml trunk/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml trunk/docs/userguide/en/src/main/docbook/included/dragIndicator.xml trunk/docs/userguide/en/src/main/docbook/included/dragListener.xml trunk/docs/userguide/en/src/main/docbook/included/dragSupport.xml trunk/docs/userguide/en/src/main/docbook/included/dropListener.xml trunk/docs/userguide/en/src/main/docbook/included/dropSupport.xml trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml trunk/docs/userguide/en/src/main/docbook/included/form.xml trunk/docs/userguide/en/src/main/docbook/included/gmap.xml trunk/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml trunk/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml trunk/docs/userguide/en/src/main/docbook/included/loadScript.desc.xml trunk/docs/userguide/en/src/main/docbook/included/loadScript.xml trunk/docs/userguide/en/src/main/docbook/included/mediaOutput.xml trunk/docs/userguide/en/src/main/docbook/included/outputPanel.xml trunk/docs/userguide/en/src/main/docbook/included/region.xml trunk/docs/userguide/en/src/main/docbook/included/repeat.xml trunk/docs/userguide/en/src/main/docbook/included/support.xml trunk/docs/userguide/en/src/main/docbook/included/virtualEarth.xml trunk/docs/userguide/en/src/main/docbook/modules/AUGWADParams.xml trunk/docs/userguide/en/src/main/docbook/modules/RFCSettings.xml trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml trunk/docs/userguide/en/src/main/resources/css/html.css Log: RF-3161 - css rules for tag were added. partly done for: "FAQ", " Web Application Descriptor Parameters", " Basic c= oncepts of the RichFaces Framework" chapters, some components: column(s), a= jaxListener, commandButton, componentControl, dataFilterSlider, dataOrdered= List, dragIndicator, drag(drop)Listener, drag(drop)Support, fileUpload,form= , gmap, inputNumberSlider, loadScript, mediaOutput, outputPanel, region, su= pport, virtualEarth. Modified: trunk/docs/faq/en/src/main/docbook/module/RFCfaq.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/faq/en/src/main/docbook/module/RFCfaq.xml 2008-06-10 09:24:4= 2 UTC (rev 8966) +++ trunk/docs/faq/en/src/main/docbook/module/RFCfaq.xml 2008-06-10 09:27:2= 4 UTC (rev 8967) @@ -564,7 +564,7 @@ Example: - How to set <rich:dataTable> border to 0px? Add the following code to your css file: "onsubmit" slightly differs from the stand= ard one. Do not return "true" - if you want to fire the reques= t - because - <xxx><a4j:suppo= rt + if you want to fire the reques= t - because <xxx><a4j:support event=3D"onclick" onsubmit=3D"return - true;"> - is transformed into <xxx on= click=3D"return - true; A4J.Submit(.... );" > and th= e request + true;"> is transfor= med into <xxx onclick=3D"return + true; A4J.Submit(.... );" >= and the request isn't fired also in this case (but th= e standard event processing fired). You must only return "false" @@ -858,15 +854,13 @@ release 1.0? To avoid differences with other JavaScript attribut= es, a function placement in a JavaScript call is changed, instead of simple= inserting of attribute - content (..oncomplete :anotherFunction(this)..), i= t places (oncomplete: - function(){anotherFunction(this);}..) in anonymous= function, to allow put + content (..oncomplete :anotherFunction(this)= ..), it places (oncomplete: + function(){anotherFunction(this);}..) in an= onymous function, to allow put "chain" of statements in attribute. Since, "this" keyword will point to a parameters map= instead of a control - element as it was before. You may use - document.findElementById() - to get references to this object after = a request is processed as + element as it was before. You may use docume= nt.findElementById()to get references to this object after a request= is processed as when a page is updated in Ajax you will have refer= ence to a control, removed from a DOM tree. Or, if you are sure that your element is not update= d, you can add @@ -875,21 +869,19 @@ <a4j:support> (or onclick in <a4j:commandLink/Button> - ) to place reference to known variable = ( - <a4j:commandLink onclick=3D"v= ar myControl=3Dthis;" - oncomplete=3D"anotherFunction(myCo= ntrol)"/> - ). + ) to place reference to known variable = (<a4j:commandLink onclick=3D"var myControl=3Dthis;" + oncomplete=3D"anotherFunction(myCo= ntrol)"/>). Tip: The onComplete syntax now is: ]]> - where the event is a v= ariable where the JS event + where the event is a variable = where the JS event copy that fires the request is placed into= . One may use it to get - the element instead of this. and data is a + the element instead of this. and dat= a is a variable that contains deserialized value = from the - data attribute. + "data" attr= ibute.
@@ -923,7 +915,7 @@ How to avoid generating exception for "keepAli= ve" component? To avoid exception, don't forget that the compo= nent stores beans in - serialized view, but your bean should implement ja= va.io.Serializable. + serialized view, but your bean should implement java.io.Serializable.
=
@@ -1077,7 +1069,7 @@ error happens because of the "reRender" = attribute of some Ajax core Action Component is set on a component t= hat depends on rendered properties, i.e. a component that is to be hidden/= rendered is tried to be - updated. The problem is that if rendered=3D"f= alse" in this + updated. The problem is that if rendered=3D&= quot;false" in this moment, the component isn't in the DOM tree a= nd can't be updated because of the general limitations describ= ed in the Ajax Processing chapter. @@ -1262,19 +1254,16 @@ ...]]> In order to build this application, you can create a= managed bean like this - one. Function - takeSelection() - fills the array selectedCars= with the data, - got from the selection. Funct= ion - getSelectedCars() - returns the array selectedCa= rs, which is + one. Function takeSelection() fills t= he array selectedCars with the data, + got from the selection. Funct= ion getSelectedCars() + returns the array selectedCars, which= is used for filling <rich:dataTable> with selected row/rows data. Example: - selectedCars =3D new ArrayLis= t(); = Modified: trunk/docs/faq/en/src/main/resources/css/html.css =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/faq/en/src/main/resources/css/html.css 2008-06-10 09:24:42 U= TC (rev 8966) +++ trunk/docs/faq/en/src/main/resources/css/html.css 2008-06-10 09:27:24 U= TC (rev 8967) @@ -70,4 +70,9 @@ } .css_string { color:#2A00FF; +} +code { = +color:#000000; = +font-size:12px; = +font-family:courier; = } \ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/ajaxListener.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/ajaxListener.xml 2008= -06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/ajaxListener.xml 2008= -06-10 09:27:24 UTC (rev 8967) @@ -80,7 +80,7 @@ a good place for update the list of re-rendered components, for example. Ajax Listener is not invoked for non-Ajax request and when RichFaces works= in "Ajax Request generates = Non-Ajax Response" mode. Therefore, ajax Listener invocation is a good ind= icator that Ajax response is going to be processed. = -Attribute "type" descr= ibed in the following chapter. It d= efines the fully qualified Java class name for listener.This class implemen= ts org.ajax4jsf.framework.ajax.ajaxListener +Attribute "type" descr= ibed in the following chapter. It d= efines the fully qualified Java class name for listener.This class implemen= ts org.ajax4jsf.framework.ajax.ajaxListener interface. You c= an access to the source of the event (Ajax component) using event.getSource= () call. = = Modified: trunk/docs/userguide/en/src/main/docbook/included/columns.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/columns.xml 2008-06-1= 0 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/columns.xml 2008-06-1= 0 09:27:24 UTC (rev 8967) @@ -1,87 +1,116 @@
- - - rich:columns - columns - - - - Component identification parameters - = - - - - Name - Value - - - - - component-type - org.richfaces.Column - - - - tag-class - org.richfaces.taglib.ColumnsTagHandler - - - -
-
- Creating the Component with a Page Tag - To create the simplest variant on a page use the following s= yntax: - - Example: - - + + rich:columns + columns + + + + Component identification parameters + + + + + Name + Value + + + + + component-type + org.richfaces.Column + + + + tag-class + + org.richfaces.taglib.ColumnsTagHandler + + + + +
+
+ Creating the Component with a Page Tag + + To create the simplest variant on a page use the following + syntax: + + + Example: + + = ...]]> -
-
- Creating the Component Dynamically Using Java - - Example: - - +
+ Creating the Component Dynamically Using Java + + Example: + + -
-
- Details of Usage - The - <rich:columns> - component gets a list from data model and outputs corr= esponding set of columns inside = - <rich:dataTable> on a page. = - It is possible to use "header" and "footer" = facets - with <rich:columns> component. - - - The "value" and "var"attributes = - are used to access the values of collection. - - The simple example is placed below. - - Example: - - +
+ Details of Usage + + The + + <rich:columns> + + component gets a list from data model and outputs + corresponding set of columns inside + + <rich:dataTable> + + on a page. It is possible to use + + "header" + + and + + "footer" + + facets with + + <rich:columns> + + component. + + + The + + "value" + + and + + "var" + + attributes are used to access the values of collection. + + The simple example is placed below. + + Example: + + @@ -94,26 +123,46 @@ = ...]]> - - The "columns" attribute defines the count of columns. - - - The "rows"= attribute defines the number of rows to be displayed. If the value of this= attribute is zero, = - all remaining rows in the table are displayed on a page. - - - The "begin" attribute contains the first iteration item. Note, that iteration begins = from zero. - - - The "end" = attribute contains the last iteration item. - - - With the help of the attributes described below you can custom= ize the output, i.e. define which columns and how many rows appear on a pag= e. - - - Example: - - + The + + "columns" + + attribute defines the count of columns. + + + The + + "rows" + + attribute defines the number of rows to be displayed. If the + value of this attribute is zero, all remaining rows in the + table are displayed on a page. + + + The + + "begin" + + attribute contains the first iteration item. Note, that + iteration begins from zero. + + + The + + "end" + + attribute contains the last iteration item. + + + With the help of the attributes described below you can + customize the output, i.e. define which columns and how many + rows appear on a page. + + + Example: + + @@ -123,30 +172,45 @@ = ...]]> - - In the example below, columns from first to second and all row= s are shown in the = - <rich:dataTable>. = - - - The result is: - -
- Generated <emphasis role=3D"bold"><property><rich:co= lumns></property></emphasis> with columns from first to second and all r= ows - = - - - - -
- - The <rich:columns> component does not prevent to use = - <rich:column>. = - In the following example one column renders in any way and ano= ther columns could be picked from the model. - - - Example: - - + In the example below, columns from first to second and all + rows are shown in the + + <rich:dataTable> + + . + + The result is: +
+ + Generated + <emphasis role=3D"bold"> + <property><rich:columns></property> + </emphasis> + with columns from first to second and all rows + + + + + + +
+ + The + + <rich:columns> + + component does not prevent to use + + <rich:column> + + . In the following example one column renders in any way and + another columns could be picked from the model. + + + Example: + + @@ -162,17 +226,24 @@ = ...]]> - = - In order to group columns with text information into one row= , use - the "colspan" attribute, which is similar to an HTML one. = - In the following example the third column contains 3 columns. - In addition, it's necessary to specify that the next colu= mn begins from the first row with the help of the - "breakBefore" attribute =3D true. - - - Example: - - + In order to group columns with text information into one + row, use the + + "colspan" + + attribute, which is similar to an HTML one. In the following + example the third column contains 3 columns. In addition, + it's necessary to specify that the next column begins + from the first row with the help of the + breakBefore =3D "true" + . + + + Example: + + @@ -189,24 +260,32 @@ ... ]]> - = - - = - The same way is used for columns groupi= ng with the "rowspan" = - attribute that is similar to an HTML. The only thing to add in= the example is an instruction to move onto the next row for each next afte= r the second column. - - - Example: - - As a result the following structure is rendered: +
+ <rich:column> modified with colspan and breakbefore attrib= utes + = + + + + + + + + The same way is used for + columns + grouping with the + + "rowspan" + + attribute that is similar to an HTML. The only thing to add + in the example is an instruction to move onto the next row + for each next after the second column. + + + Example: + + = @@ -223,129 +302,208 @@ ... ]]> - = - = - Information about sorting and filtering you can find here. = = -
- = -
- Look-and-Feel Customization - = - For skinnability implementation, the components use a - style class redefinition method. - Default style classes are mapped on - skin parameters. - - There are two ways to redefine the appearance of all - <rich:columns> - components at once: - - - Redefine the corresponding skin parameters - - - Add to your style sheets - style classes - used by a - <rich:columns> - component - - -
-
- Skin Parameters Redefinition - = - Skin parameters redefinition for - <rich:columns> - are the same as for the - <rich:dataTable> - component. -
-
- Definition of Custom Style Classes - = - Custom style classes for - <rich:columns> - are the same as for the - <rich:dataTable> - component. - - = - In order to redefine styles for all - <rich:columns> - components on a page using CSS, it's enough to cr= eate classes with the - same names (possible classes could be found in the tables above) and define necessary properties in them. <= /para> - = - - Example: - - As a result: +
+ <rich:column> generated with rowspan attribute + = + + + + + + + Information about sorting and filtering you can find + here + . + + +
+ +
+ Look-and-Feel Customization + + + For skinnability implementation, the components use a + + style class redefinition method. + + Default style classes are mapped on + + skin parameters. + + + + There are two ways to redefine the appearance of all + + <rich:columns> + + components at once: + + + + Redefine the corresponding skin parameters + + + + Add to your style sheets + + style classes + + used by a + + <rich:columns> + + component + + + +
+
+ Skin Parameters Redefinition + + + Skin parameters redefinition for + + <rich:columns> + + are the same as for the + + <rich:dataTable> + + component + . + +
+
+ Definition of Custom Style Classes + + + Custom style classes for + + <rich:columns> + + are the same as for the + + <rich:dataTable> + + component + . + + + + In order to redefine styles for all + + <rich:columns> + + components on a page using CSS, it's enough to create + classes with the same names (possible classes could be found + in the tables + above + ) and define necessary properties in them. + + + + Example: + + = - = - This is a result: - = -
- Redefinition styles with predefined classes - - - - - -
- = - In the example column header cells color was changed. - = - Also it=E2=80=99s possible to change styles of particular <rich:columns> componen= t. In this case you should create own style classes and use them in corresp= onding <rich:columns> styleClass attributes. An example is = placed below: - = - - Example: - - + + This is a result: + +
+ Redefinition styles with predefined classes + + + + + +
+ + + In the example column header cells color was changed. + + + + Also it=E2=80=99s possible to change styles of particular + + <rich:columns> + + component. In this case you should create own style classes + and use them in corresponding + + <rich:columns> + + + styleClass + + attributes. An example is placed below: + + + + Example: + + = - The "styleClass" attribute for <rich:columns> is defi= ned as it=E2=80=99s shown in the example below: - = - - Example: - - -]]> = - = - This is a result: - = -
- Redefinition styles with own classes and <emphasis><pro= perty>styleClass</property></emphasis> attributes - - - - - -
= - = - As it could be seen on the picture above, the font style for= columns was changed. -
- = -
- Relevant Resources Links - Here you can found some additional information for <rich:columns> comp= onent usage. -
= -
\ No newline at end of file +...]]> + + The + + "styleClass" + + attribute for + + <rich:columns> + + is defined as it=E2=80=99s shown in the example below: + + + + Example: + + +]]> + + This is a result: + +
+ + Redefinition styles with own classes and + <emphasis> + <property>styleClass</property> + </emphasis> + attributes + + + + + + +
+ + + As it could be seen on the picture above, the font style for + columns was changed. + +
+ +
+ Relevant Resources Links + + + Here + + you can found some additional information for + + <rich:columns> + + component usage. + +
+
\ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/commandButton.x= ml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/commandButton.xml 200= 8-06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/commandButton.xml 200= 8-06-10 09:27:24 UTC (rev 8967) @@ -60,12 +60,12 @@
Key attributes and ways of usage <a4j:commandButton> is used in the same way as <h:commandButton>, but with definition of= the area that is updated after the response comes back from the server. - This definition of the component provides a link, a click on t= he link causes an Ajax form submit on the server, action1 method performance, and rendering of the component with someD= ata id after the response comes back from the server. + This definition of the component provides a link, a click on t= he link causes an Ajax form submit on the server, action1 meth= od performance, and rendering of the component with someData i= d after the response comes back from the server. The component <a4j:comman= dButton> placed on a page generates the following = HTML code: ...]]> - Hence, the utility method A4J.AJAX.Submit= is called on a click, the method performs Ajax request as the <a4j:support> component + Hence, the utility method A4J.AJAX.Submit is call= ed on a click, the method performs Ajax request as the <a4j:support> component Note: AJAX support is built in and it's not necessary to add ne= sted <a4j:support> to the component. Modified: trunk/docs/userguide/en/src/main/docbook/included/componentContro= l.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/componentControl.xml = 2008-06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/componentControl.xml = 2008-06-10 09:27:24 UTC (rev 8967) @@ -102,9 +102,9 @@ ... ]]> - According to this code a function with name ffunction<= /property> + According to this code a function with name ffunction is generated. It is used in JavaScript code to trigger an operation = on the target component - with defined id=3D"comp_ID". + with defined id=3D"comp_ID". The generated function is shown below: allows to transfer parameters. The "disableDefault" attribute with "true" val= ue is used instead - of onclick=3D"return false;" attribute for + of onclick=3D"return false;" attribute for <h:commandButton> to avoid a problem with form submit and modalP= anel showing. Modified: trunk/docs/userguide/en/src/main/docbook/included/dataFilterSlide= r.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml = 2008-06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml = 2008-06-10 09:27:24 UTC (rev 8967) @@ -121,7 +121,7 @@ "onSlide" attribute ( "onChange" - is its alias). When the attribute definition =3D true, s= ubmission on this event is + is its alias). When the attribute definition =3D &= quot;true", submission on this event is defined. Information about the "process" attribute usage you can find here= . Modified: trunk/docs/userguide/en/src/main/docbook/included/dataOrderedList= .xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml 2= 008-06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml 2= 008-06-10 09:27:24 UTC (rev 8967) @@ -1,93 +1,122 @@
- - - rich:dataOrderedList - HtmlDataOrderedList - ordered list - - + + + rich:dataOrderedList + HtmlDataOrderedList + ordered list + + = - - Component identification parameters - - - - Name - Value - - - - - component-type - org.richfaces.DataOrderedList - - - component-class - org.richfaces.component.html.HtmlDataOrderedList - - - component-family - org.richfaces.DataOrderedList - - - renderer-type - org.richfaces.DataOrderedListRenderer - - - tag-class - org.richfaces.taglib.DataOrderedListTag - - - -
+ + Component identification parameters + + + + Name + Value + + + + + component-type + org.richfaces.DataOrderedList + + + component-class + + org.richfaces.component.html.HtmlDataOrderedList + + + + component-family + org.richfaces.DataOrderedList + + + renderer-type + org.richfaces.DataOrderedListRenderer + + + tag-class + + org.richfaces.taglib.DataOrderedListTag + + + + +
= -
- Creating the Component with a Page Tag - To create the simplest variant of dataOrderedList on a page, use the - following syntax: +
+ Creating the Component with a Page Tag + + To create the simplest variant of + dataOrderedList + on a page, use the following syntax: + = - - Example: - - + Example: + + ... ]]> -
-
- Creating the Component Dynamically Using Java +
+
+ Creating the Component Dynamically Using Java = - - Example: - - + Example: + + -
-
- Details of Usage - The - <rich:dataOrderedList> - component allows to generate an ordered list from a mode= l. - The component has the - "type" - attribute, which corresponds to the - "type" - parameter for the - "OL" - HTML element and defines a marker type. Possible values = for - "type" - attribute are: "A", - "a", "I", - "i","1". - Here is an example: +
+
+ Details of Usage + + The + + <rich:dataOrderedList> + + component allows to generate an ordered list from a model. + + + The component has the + + "type" + + attribute, which corresponds to the + + "type" + + parameter for the + + "OL" + + HTML element and defines a marker type. Possible values for + + "type" + + attribute are: + "A" + , + "a" + , + "I" + , + "i" + , + "1" + . + + Here is an example: = -
@@ -100,42 +129,64 @@ ... ]]> = - This is a result: - = -
- <emphasis role=3D"bold"> - <property><rich:dataOrderedList></property> - </emphasis> component with <emphasis> - <property>"type"</property> - </emphasis> attribute - - - - - -
+ This is a result: = - In the example the - "rows" - attribute limits number of output elements of the list. - = - - "first" - attribute defines first element for output. - "title" - are used for popup title. - = - The component was created basing on the - <a4j:repeat> - component and as a result it could be partially updated wi= th Ajax. - "ajaxKeys" - attribute allows to define row keys that are updated after= an Ajax request. - Here is an example: - = - - Example: - - + + <emphasis role=3D"bold"> + <property><rich:dataOrderedList></property> + </emphasis> + component with + <emphasis> + <property>"type"</property> + </emphasis> + attribute + + + + + + + + + + In the example the + + "rows" + + attribute limits number of output elements of the list. + + + + + "first" + + attribute defines first element for output. + + "title" + + are used for popup title. + + + + The component was created basing on the + + <a4j:repeat> + + component and as a result it could be partially updated with + Ajax. + + "ajaxKeys" + + attribute allows to define row keys that are updated after + an Ajax request. + + Here is an example: + + + Example: + + ... @@ -144,143 +195,212 @@ ... ]]> - = - In the example - "reRender" - attribute contains value of - "id" - attribute for - <rich:dataOrderedList> - component. As a result the component is updated after an A= jax request. -
-
- Look-and-Feel Customization = - For skinnability implementation, the components use a - style class redefinition method. - Default style classes are mapped on - skin parameters. - + + In the example + + "reRender" + + attribute contains value of + + "id" + + attribute for + + <rich:dataOrderedList> + + component. As a result the component is updated after an + Ajax request. + +
+
+ Look-and-Feel Customization = - There are two ways to redefine the appearance of all - <rich:dataOrderedList> - components at once: + + For skinnability implementation, the components use a + + style class redefinition method. + + Default style classes are mapped on + + skin parameters. + + = - - - Redefine the corresponding skin parameters - + + There are two ways to redefine the appearance of all + + <rich:dataOrderedList> + + components at once: + = - - Add to your style sheets - style classes - used by a - <rich:dataOrderedList> - component - - -
+ + + Redefine the corresponding skin parameters + = -
- Definition of Custom Style Classes + + + Add to your style sheets + + style classes + + used by a + + + <rich:dataOrderedList> + + + component + + + +
= - On the screenshot there are classes names that define styles for= component elements. +
+ Definition of Custom Style Classes = -
- Style classes - - - - - -
+ + On the screenshot there are classes names that define styles + for component elements. + = - - Classes names that define a list appearance - - - - Class name - Description - - - - - rich-orderedlist - Defines styles for an html <ol> element - - - rich-list-item - Defines styles for an html <li> element - - - -
+
+ Style classes + + + + + +
= - In order to redefine styles for all - <rich:dataOrderedList> - components on a page using CSS, it's enough to create= classes with the - same names (possible classes could be found in the tables above) and define necessary properties in them. - = - - Example: - - + Classes names that define a list appearance + + + + Class name + Description + + + + + rich-orderedlist + + Defines styles for an html <ol> + element + + + + rich-list-item + + Defines styles for an html <li> + element + + + + + + + + In order to redefine styles for all + + <rich:dataOrderedList> + + components on a page using CSS, it's enough to create + classes with the same names (possible classes could be found + in the tables + above + ) and define necessary properties in them. + + + + Example: + + = - = - This is a result: - = -
- Redefinition styles with predefined classes - - - - - -
- = - In the example background color was changed. - = - Also it=E2=80=99s possible to change styles of particular <rich:dataOrderedList> compon= ent. In this case you should create own style classes and use them in corre= sponding <rich:dataOrderedList> styleClass attributes. An example is = placed below: - = - - Example: - - + + This is a result: + +
+ Redefinition styles with predefined classes + + + + + +
+ + In the example background color was changed. + + + Also it=E2=80=99s possible to change styles of particular + + <rich:dataOrderedList> + + component. In this case you should create own style classes + and use them in corresponding + + <rich:dataOrderedList> + + + styleClass + + attributes. An example is placed below: + + + + Example: + + = - - Example: - - -]]> = - = - This is a result: - = -
- Redefinition styles with own classes and <emphasis><property>= styleClass</property></emphasis> attributes - - - - - -
= - = - As it could be seen on the picture above, the font style was cha= nged. -
-
- Relevant Resources Links - Here you can see the example of - <rich:dataOrderedList > - usage and sources for the given example. -
+...]]> + + Example: + + +]]> + + This is a result: + +
+ + Redefinition styles with own classes and + <emphasis> + <property>styleClass</property> + </emphasis> + attributes + + + + + + +
+ + + As it could be seen on the picture above, the font style was + changed. + +
+
+ Relevant Resources Links + + + Here + + you can see the example of + + <rich:dataOrderedList > + + usage and sources for the given example. + +
Modified: trunk/docs/userguide/en/src/main/docbook/included/dragIndicator.x= ml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/dragIndicator.xml 200= 8-06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/dragIndicator.xml 200= 8-06-10 09:27:24 UTC (rev 8967) @@ -177,7 +177,7 @@ If you use <rich:dragIndicato= r> inside a form = - do not forget to use id like "formId:indicatorID&qu= ot; = + do not forget to use id like formId:indicatorID = defined in <rich:dragSupport&= gt; indicator attribute. Modified: trunk/docs/userguide/en/src/main/docbook/included/dragListener.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/dragListener.xml 2008= -06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/dragListener.xml 2008= -06-10 09:27:24 UTC (rev 8967) @@ -1,91 +1,122 @@ - - - rich:dragListener - - - - Component identification parameters - - - - Name - Value - - - - = - - listener-class - org.richfaces.event.DragListener - - - event-class - org.richfaces.event.DragEvent - - = - - tag-class - org.richfaces.taglib.DragListenerTag - - = - - -
- = + + + rich:dragListener + + + + Component identification parameters + + + + Name + Value + + + = -
- Creating the Component with a Page Tag - To create the simplest variant on a page use the following synta= x: + + listener-class + org.richfaces.event.DragListener + + + event-class + org.richfaces.event.DragEvent + = - - Example: - + + tag-class + org.richfaces.taglib.DragListenerTag + = - + +
+ + +
+ Creating the Component with a Page Tag + + To create the simplest variant on a page use the following + syntax: + + + + Example: + + + ... -]]> = -
- = -
- Creating the Component Dynamically Using Java - - Example: = - +
+ +
+ Creating the Component Dynamically Using Java + + Example: + + = - - = -
= -
- Details of Usage +
= - -The <rich:dragListener>= is used as a nested tag with components like -<rich:dragSupport>, <rich:tree> and <rich:treeNode>. - - -Attribute "type" defin= es the fully qualified Java class name for a listener. - This class should implement org.richfaces.event.DragListener interface. - - = - - The typical variant of using: - +
+ Details of Usage = - + The + + <rich:dragListener> + + is used as a nested tag with components like + + <rich:dragSupport> + + , + + <rich:tree> + + and + + <rich:treeNode> + + . + + + Attribute + + "type" + + defines the fully qualified Java class name for a listener. + This class should implement + org.richfaces.event.DropListener + + interface + + . + + + + + The typical variant of using: + + + + = @@ -93,13 +124,13 @@ ... -]]> = +]]> = - - Java bean source: - + + Java bean source: + = - = -
= - = -
- Look-and-Feel Customization - = - - <rich:dragListener> - has no skin parameters and custom style classes<= /property>, as the - component isn't visual. -
- = +]]> +
+ +
+ Look-and-Feel Customization + + + + <rich:dragListener> + + has no skin parameters and custom + style classes + , as the component isn't visual. + +
+ \ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/dragSupport.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/dragSupport.xml 2008-= 06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/dragSupport.xml 2008-= 06-10 09:27:24 UTC (rev 8967) @@ -1,107 +1,120 @@
- - - rich:dragSupport + + + rich:dragSupport = - HtmlDragSupport - - + HtmlDragSupport + + = = - - Component identification parameters +
+ Component identification parameters = - - - - Name + + + + Name = - Value - - + Value + + = - - - component-type + + + component-type = - org.richfaces.DragSupport - + org.richfaces.DragSupport + = - - component-class + + component-class = - org.richfaces.component.html.HtmlDragSupport - + + org.richfaces.component.html.HtmlDragSupport + + = - - component-family + + component-family = - org.richfaces.DragSupport - + org.richfaces.DragSupport + = - - renderer-type + + renderer-type = - org.richfaces.DragSupportRenderer - + org.richfaces.DragSupportRenderer + = - - tag-class + + tag-class = - org.richfaces.taglib.DragSupportTag - - - -
+ org.richfaces.taglib.DragSupportTag + + + + = = -
- Creating the Component with a Page Tag +
+ Creating the Component with a Page Tag = - Here is a simple example as it could be used on a page: + + Here is a simple example as it could be used on a page: + = = - - Example: - - + Example: + + ... ]]> -
+
= -
- Creating the Component Dynamically Using Java +
+ Creating the Component Dynamically Using Java = - - Example: - - + Example: + + -
+
= -
- Details of Usage +
+ Details of Usage = - The dragSupport tag inside a component comp= letely specifies the - events and JavaScript required to use the component and it's childre= n for dragging as part of - a drag-and-drop operation. In order to work, though, dragS= upport must be - placed inside a wrapper component that outputs child components and = that has the right events - defined on it. Thus, this example won't work, because the = h:column tag - doesn't provide the necessary properties for redefining events on th= e client: + + The + dragSupport + tag inside a component completely specifies the events and + JavaScript required to use the component and it's children + for dragging as part of a drag-and-drop operation. In order + to work, though, + dragSupport + must be placed inside a wrapper component that outputs child + components and that has the right events defined on it. + Thus, this example won't work, because the + h:column + tag doesn't provide the necessary properties for redefining + events on the client: + = = - - Example: - - + Example: + + @@ -111,14 +124,19 @@ ... ]]> = - However, using a4j:outputPanel as a wrapper= inside - h:column, the following code could be used succ= essfully: + + However, using + a4j:outputPanel + as a wrapper inside + h:column + , the following code could be used successfully: + = = - - Example: - - + Example: + + @@ -130,18 +148,26 @@ ... ]]> = - This code makes all rows of this column draggable. + This code makes all rows of this column draggable. = - One of the main attributes for dragSupport = is - "dragType", which asso= ciates a name with the - drag zone. Only drop zones with this name as an acceptable type can = be used in drag-and-drop - operations. Here is an example: + + One of the main attributes for + dragSupport + is + + "dragType" + , + + which associates a name with the drag zone. Only drop zones + with this name as an acceptable type can be used in + drag-and-drop operations. Here is an example: + = = - - Example: - - + Example: + + @@ -159,60 +185,117 @@ ... ]]> = - In this example, the drop1 panel grid is a = drop zone that invokes - drag-and-drop for drops of items from the first drag1 panel grid, but not - the second drag2 panel grid. In the section abo= ut - dropSupport, you will find an example that show= s more detailed - information about moving data between tables with drag and drop. + + In this example, the + drop1 + panel grid is a drop zone that invokes drag-and-drop for + drops of items from the first + drag1 + panel grid, but not the second + drag2 + panel grid. In the section about + dropSupport + , you will find an example that shows more detailed + information about moving data between tables with drag and + drop. + = - The dragSupport component also has a - "value" - attribute for passing data into the processing after a d= rop event. + + The + dragSupport + component also has a + + "value" + + attribute for passing data into the processing after a drop + event. + = - One more important attribute for - <rich:dragSupport> - is the - "dragIndicator" - attribute that point to the component id of the - <rich:dragIndicator> - component to be used for dragged items from this drag zo= ne. If it isn't defined, a - default indicator for drag operations is used. + + One more important attribute for + + <rich:dragSupport> + + is the + + "dragIndicator" + + attribute that point to the component id of the + + <rich:dragIndicator> + + component to be used for dragged items from this drag zone. + If it isn't defined, a default indicator for drag operations + is used. + = - Finally, the component has the following extra attributes for ev= ent processing on the - client: + + Finally, the component has the following extra attributes + for event processing on the client: + = - - ondragenter + + + ondragenter + = - ondragexit - + + ondragexit + + = - You can use your own custom JavaScript functions to handle these= events. - = - = - Note: If you define width for a outputPanel= , in Internet Explorer 6 you can = - perform a drag and drop operation, placing the mouse cursor on the t= ext in the outputPanel only. - - Information about the "process" attribute usage you can find here<= /link>. - -
+ + You can use your own custom JavaScript functions to handle + these events. + = -
- Look-and-Feel Customization = - - <rich:dragSupport> - has no skin parameters and custom style classe= s, as the - component isn't visual. -
- = -
- Relevant Resources Links - - Here you can see the example of - <rich:dragSupport> - usage and sources for the given example. -
+ + Note: + + If you define width for a outputPanel, in Internet + Explorer 6 you can perform a drag and drop operation, + placing the mouse cursor on the text in the outputPanel + only. + + + + Information about the + + "process" + + attribute usage you can find + here + . + +
= +
+ Look-and-Feel Customization + + + + <rich:dragSupport> + + has no skin parameters and custom + style classes + , as the component isn't visual. + +
+ +
+ Relevant Resources Links + + + Here + + you can see the example of + + <rich:dragSupport> + + usage and sources for the given example. + +
+
Modified: trunk/docs/userguide/en/src/main/docbook/included/dropListener.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/dropListener.xml 2008= -06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/dropListener.xml 2008= -06-10 09:27:24 UTC (rev 8967) @@ -1,91 +1,122 @@ - - - rich:dropListener - - - - Component identification parameters - - - - Name - Value - - - - = - - listener-class - org.richfaces.event.DropListener - - - event-class - org.richfaces.event.DropEvent - - = - - tag-class - org.richfaces.taglib.DropListenerTag - - = - - -
- = + + + rich:dropListener + + + + Component identification parameters + + + + Name + Value + + + = -
- Creating the Component with a Page Tag - To create the simplest variant on a page use the following synta= x: + + listener-class + org.richfaces.event.DropListener + + + event-class + org.richfaces.event.DropEvent + = - - Example: - + + tag-class + org.richfaces.taglib.DropListenerTag + = - + +
+ + +
+ Creating the Component with a Page Tag + + To create the simplest variant on a page use the following + syntax: + + + + Example: + + + ... -]]> = -
- = -
- Creating the Component Dynamically Using Java - - Example: = - +
+ +
+ Creating the Component Dynamically Using Java + + Example: + + = - - = -
= -
- Details of Usage +
= - -The <rich:dropListener>= is used as a nested tag with components like -<rich:dropSupport>, <rich:tree> and <rich:treeNode>. - - -Attribute "type" defin= es the fully qualified Java class name for the listener. - This class should implement org.richfaces.event.DropListener interface. - - = - - The typical variant of using: - +
+ Details of Usage = - + The + + <rich:dropListener> + + is used as a nested tag with components like + + <rich:dropSupport> + + , + + <rich:tree> + + and + + <rich:treeNode> + + . + + + Attribute + + "type" + + defines the fully qualified Java class name for the + listener. This class should implement + org.richfaces.event.DropListener + + interface + + . + + + + + The typical variant of using: + + + + Drop Zone = @@ -93,13 +124,13 @@ = ... -]]> = +]]> = - - Java bean source: - + + Java bean source: + = - = -
= - = -
- Look-and-Feel Customization - = - - <rich:dropListener> - has no skin parameters and custom style classes<= /property>, as the - component isn't visual. -
- = +]]> +
+ +
+ Look-and-Feel Customization + + + + <rich:dropListener> + + has no skin parameters and custom + style classes + , as the component isn't visual. + +
+ \ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/dropSupport.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/dropSupport.xml 2008-= 06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/dropSupport.xml 2008-= 06-10 09:27:24 UTC (rev 8967) @@ -1,118 +1,140 @@
- - - rich:dropSupport + + + rich:dropSupport = - HtmlDropSupport - - + HtmlDropSupport + + = - = - - Component identification parameters = - - - - Name +
+ Component identification parameters = - Value - - + + + + Name = - - - component-type + Value + + = - org.richfaces.DropSupport - + + + component-type = - - component-class + org.richfaces.DropSupport + = - org.richfaces.component.html.HtmlDropSupport - + + component-class = - - component-family + + org.richfaces.component.html.HtmlDropSupport + + = - org.richfaces.DropSupport - + + component-family = - - renderer-type + org.richfaces.DropSupport + = - org.richfaces.DropSupportRenderer - + + renderer-type = - - tag-class + org.richfaces.DropSupportRenderer + = - org.richfaces.taglib.DropSupportTag - - - -
- = + + tag-class = -
- Creating the Component with a Page Tag + org.richfaces.taglib.DropSupportTag + + + + = - This simple example shows how to make a panel component a potent= ial drop target for - drag-and-drop operations using "text" elements as the dragged items.= = - - Example: - - + Creating the Component with a Page Tag + + + This simple example shows how to make a panel component a + potential drop target for drag-and-drop operations using + "text" elements as the dragged items. + + + + Example: + + ... ]]> -
+
= -
- Creating the Component Dynamically Using Java +
+ Creating the Component Dynamically Using Java = = - - Example: - - + Example: + + -
+
= -
- Details of Usage +
+ Details of Usage = - As shown in the example, the key attribute for - <rich:dropSupport> - is - "acceptedTypes" - . This attribute defines the types of draggable items tha= t can be dropped onto the - designated drop zone. + + As shown in the example, the key attribute for + + <rich:dropSupport> + + is + + "acceptedTypes" + + . This attribute defines the types of draggable items that + can be dropped onto the designated drop zone. + = - The second most important attribute for - <rich:dropSupport> - is - "typeMapping" - . This attribute maps a specific type among the acceptabl= e types for draggable - items to a specific - <rich:dndParam> - child element under - <rich:dropSupport> - . + + The second most important attribute for + + <rich:dropSupport> + + is + + "typeMapping" + + . This attribute maps a specific type among the acceptable + types for draggable items to a specific + + <rich:dndParam> + + child element under + + <rich:dropSupport> + + . + = = - - Example: - = - + Example: + + + = @@ -120,23 +142,40 @@ ... ]]> = - In this example, dropping a draggable item of an "iconsDragged" type - will trigger the use a parameter named "Dro= pIcon" in the event processing - after a drop event. (Also, an Ajax request is sent, and the action a= nd dropListener defined - for the component are called.) + + In this example, dropping a draggable item of an + + "iconsDragged" + + type will trigger the use a parameter named + + "DropIcon" + + in the event processing after a drop event. (Also, an Ajax + request is sent, and the action and dropListener defined for + the component are called.) + = - Here is an example of moving records between tables. The example= describes all the pieces - for drag-and-drop. (To get extra information on these components, re= ad the sections for these - components.) + + Here is an example of moving records between tables. The + example describes all the pieces for drag-and-drop. (To get + extra information on these components, read the sections for + these components.) + = - As draggable items, this table contains a list of such items des= ignated as being of type - "text": + + As draggable items, this table contains a list of such items + designated as being of type + "text" + : + = = - - Example: - = - + Example: + + + Capitals List @@ -151,14 +190,21 @@ ... ]]> = - As a drop zone, this panel will accept draggable items of type "= text" and then rerender an - element with the ID of "box": + + As a drop zone, this panel will accept draggable items of + type + text + and then rerender an element with the ID of + box + : + = = - - Example: - = - + Example: + + + Drop Zone = - As a part of the page that can be updated in a partial page upda= te, this table has an ID - of "box": + + As a part of the page that can be updated in a partial page + update, this table has an ID of + box + : + = = - - Example: - - + Example: + + Capitals chosen @@ -183,13 +233,16 @@ ...]]> = - And finally, as a listener, this listener will implement the dro= pped element: + + And finally, as a listener, this listener will implement the + dropped element: + = = - - Example: - - + Example: + + = - Here is the result after a few drops of items from the first tab= le: + + Here is the result after a few drops of items from the first + table: + = -
- Results of drop actions +
+ Results of drop actions = - - - - - -
+ + + + + +
= - In this example, items are dragged element-by-element from the r= endered list in the first - table and dropped on a panel in the middle. After each drop, a drop = event is generated and a - common Ajax request is performed that renders results in the third t= able. + + In this example, items are dragged element-by-element from + the rendered list in the first table and dropped on a panel + in the middle. After each drop, a drop event is generated + and a common Ajax request is performed that renders results + in the third table. + = - As with every Ajax action component, - <rich:dropSupport> - has all the common attributes ("time= out", - "limitToList", - "reRender", etc.) for Ajax= request customization. + + As with every Ajax action component, + + <rich:dropSupport> + + has all the common attributes ( + + "timeout" + , + + + "limitToList" + , + + + "reRender" + , + + etc.) for Ajax request customization. + = - Finally, the component has the following extra attributes for ev= ent processing on the - client: + + Finally, the component has the following extra attributes + for event processing on the client: + = - - ondragenter + + + ondragenter + = - ondragexit + + ondragexit + = - ondrop + + ondrop + = - ondropend - + + ondropend + + = - Developers can use their own custom JavaScript functions to hand= le these events. - - Information about the "process" attribute usage you can find here= . - -
+ + Developers can use their own custom JavaScript functions to + handle these events. + + + Information about the + + "process" + + attribute usage you can find + here + . + +
= -
- Look-and-Feel Customization +
+ Look-and-Feel Customization = - - <rich:dropSupport> - has no skin parameters and custom styl= e classes, as the - component isn't visual. -
-
- Relevant Resources Links - - Here you can see the example of <rich:dropSupport> usage an= d sources for the given example. - -
+ + + <rich:dropSupport> + + has no skin parameters and custom + + style classes + + , as the component isn't visual. + +
+
+ Relevant Resources Links + + + Here + + you can see the example of + + <rich:dropSupport> + + usage and sources for the given example. + +
=
Modified: trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml 2008-0= 6-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml 2008-0= 6-10 09:27:24 UTC (rev 8967) @@ -170,7 +170,7 @@ - By file size, use the maxR= equestSize parameter(value in bytes) inside Ajax4jsf F= ilter section = + By file size, use the maxReque= stSize parameter(value in bytes) inside Ajax4jsf Filter section = in web.xml: If "ajaxSubmit" = attribute is true, = it becomes possible to set Ajax submission way for any components in= side, = - i.e. not a page URL is used as an "action&q= uot; attribute, but the javascript:A4J.AJAX.Submit(..= .) call. = + i.e. not a page URL is used as an "action&q= uot; attribute, but the javascript: A4J.AJAX.Su= bmit(...)call. = In this case, the "reRender" attribute contains a list of Ids of components defined for re-= rendering. If you have <h:commandButton>= ; or = <h:commandLink> inside the form, they work as &= lt;a4j:commandButton>. = @@ -100,7 +100,7 @@ With the help of "limitToList" attribute you can limit areas, which are updated after the r= esponses. = If "limitToList"= is true, only the reRender attribute is taken in account. = - Therefore, if you use blocks of text wrapped with <a4j:outputPanel> and "ajaxRendered"=3D true= , blocks of text are ignored. + Therefore, if you use blocks of text wrapped with <a4j:outputPanel> and aja= xRendered=3D "true", blocks of text are ignored. Information about the "process" attribute usage you can find here= . Modified: trunk/docs/userguide/en/src/main/docbook/included/gmap.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/gmap.xml 2008-06-10 0= 9:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/gmap.xml 2008-06-10 0= 9:27:24 UTC (rev 8967) @@ -1,271 +1,414 @@
- - - map - gmapVar - HtmlGmap - - + + + map + gmapVar + HtmlGmap + + = - - Component identification parameters - - - - Name - Value - - - - - component-type - org.richfaces.Gmap - - - component-class - org.richfaces.component.html.HtmlGmap - - - component-family - org.richfaces.Gmap - - - renderer-type - org.richfaces.GmapRenderer - - - tag-class - org.richfaces.taglib.GmapTag - - - -
+ + Component identification parameters + + + + Name + Value + + + + + component-type + org.richfaces.Gmap + + + component-class + org.richfaces.component.html.HtmlGmap + + + component-family + org.richfaces.Gmap + + + renderer-type + org.richfaces.GmapRenderer + + + tag-class + org.richfaces.taglib.GmapTag + + + +
= -
- Creating the Component with a Page Tag - To create the simplest variant on a page use the following synta= x: +
+ Creating the Component with a Page Tag + + To create the simplest variant on a page use the following + syntax: + = - - Example: - - + Example: + + ... ]]> -
-
- Creating the Component Dynamically Using Java +
+
+ Creating the Component Dynamically Using Java = - - Example: - - + Example: + + -
-
- Details of Usage - To use - Google Map - in your application, generate a key on Google Map official resource. One key could be used for o= ne directory on the - server. - Here are the main settings of initial rendering performed with a= component - map that are accessible with the following attr= ibutes: - - - - "zoom" - defines an approximation size (boundary values 1-18) <= /para> - - - "lat" - specifies an initial latitude coordinate in degrees, a= s a number between -90 and - +90 - - - "lng" - specifies an initial longitude coordinate in degrees, = as a number between -180 - and +180 - - - "mapType" - specifies a type of a rendered map (G_NORMAL_MAP, G_SA= TELLITE_MAP (DEFAULT), - G_HYBRID_MAP) - - For example, the city of Paris is shown after rendering with the= following initial - settings: - "lat" - =3D 48.44, - "lng" - =3D 2.24 and - "zoom" - =3D 5. -
- <emphasis role=3D"bold"><property><rich:gmap></property= ></emphasis> initial rendering - - - - - -
- It's also possible to set accessible controls on the map - with the help of the attributes: - - - - "showGMapTypeControl" - determines whether the controls for a map type definit= ion are switched on - - - "showGScaleControl" - determines whether the controls for scaling are switch= ed on - - - "showGLargeMapControl" - determines whether the control for map scale rendering is - rendered - -
- <emphasis role=3D"bold"><property><rich:gmap></property= ></emphasis> accessible controls - - - - - -
- To set all these parameters and perform some activity (Zoom In/O= ut etc.) is possible with - your JavaScript, i.e. declare a name of an object on a map= in the - "gmapVar" - attribute and then call the object directly with API Google - Map. - For example, to approximate a map for - "gmapVar" - =3D "map" declared inside = the component, call - map.zoomIn() on an event. - Moreover, to add e.g. some JavaScript effects, events defined on= it are used. - - onmouseover - onclick - onmouseout - etc. - - = - - - Google Map does not support XHTML format of the page. = - Thus, if you use Facelets and JSF 1.2, do not forget to put the fo= llowing tags somewhere on the page: - - +
+ Details of Usage + + To use + + Google Map + + in your application, generate a key on + + Google Map official resource + + . One key could be used for one directory on the server. + + + Here are the main settings of initial rendering performed + with a component + map + that are accessible with the following attributes: + + + + + + "zoom" + + defines an approximation size (boundary values 1-18) + + + + + + "lat" + + specifies an initial latitude coordinate in degrees, + as a number between -90 and +90 + + + + + + "lng" + + specifies an initial longitude coordinate in + degrees, as a number between -180 and +180 + + + + + + "mapType" + + specifies a type of a rendered map (G_NORMAL_MAP, + G_SATELLITE_MAP (DEFAULT), G_HYBRID_MAP) + + + + + For example, the city of Paris is shown after rendering with + the following initial settings: + lat =3D "48.44" + , + lng=3D "2.24" + and + zoom =3D "5" + . + +
+ + <emphasis role=3D"bold"> + <property><rich:gmap></property> + </emphasis> + initial rendering + + + + + + +
+ + It's also possible to set accessible controls on the + map + with the help of the attributes: + + + + + + + "showGMapTypeControl" + + + determines whether the controls for a map type + definition are switched on + + + + + + + "showGScaleControl" + + + determines whether the controls for scaling are + switched on + + + + + + + "showGLargeMapControl" + + + determines whether the control for + map + scale rendering is rendered + + + +
+ + <emphasis role=3D"bold"> + <property><rich:gmap></property> + </emphasis> + accessible controls + + + + + + +
+ + To set all these parameters and perform some activity (Zoom + In/Out etc.) is possible with your JavaScript, i.e. declare + a name of an object on a + map + in the + + "gmapVar" + + attribute and then call the object directly with API + + Google Map + . + + + + For example, to approximate a map for + gmapVar=3D "map" + declared inside the component, call map.zoomIn() on an + event. + + + Moreover, to add e.g. some JavaScript effects, events + defined on it are used. + + + + onmouseover + + + onclick + + + onmouseout + + + etc. + + + + + + Google Map does not support XHTML format of the page. + Thus, if you use Facelets and JSF 1.2, do not forget to + put the following tags somewhere on the page: + + ... ... ]]> - - = -
-
- Look-and-Feel Customization - - <rich:gmap> - component isn't tied to skin parameters, as there i= s no additional - elements on it, except the ones provided with Go= ogle - Map. -
- = -
- Definition of Custom Style Classes - - Classes names that define a component appearance - - - - Class name - Description - - - - - rich-gmap - Defines styles for a wrapper <div> element of a c= omponent - - - -
+ = - In order to redefine styles for all - <rich:gmap> - components on a page using CSS, it's enough to create= classes with the - same names (possible classes could be found in the tables above) and define necessary properties in them. - = - - Example: - - +
+ Look-and-Feel Customization + + + <rich:gmap> + + component isn't tied to skin parameters, as there is no + additional elements on it, except the ones provided with + + Google Map + . + + +
+ +
+ Definition of Custom Style Classes + + + Classes names that define a component appearance + + + + + Class name + Description + + + + + rich-gmap + + Defines styles for a wrapper <div> + element of a component + + + + +
+ + + In order to redefine styles for all + + <rich:gmap> + + components on a page using CSS, it's enough to create + classes with the same names (possible classes could be found + in the tables + above + ) and define necessary properties in them. + + + + Example: + + = - = - This is a result: - = -
- Redefinition styles with predefined classes - - - - - -
- = - In the example the font style for buttons was changed. - = - Also it=E2=80=99s possible to change styles of particular <rich:gmap> component. In thi= s case you should create own style classes and use them in corresponding <rich:gmap> style= Class attributes. An example is placed below: - = - - Example: - - + + This is a result: + +
+ Redefinition styles with predefined classes + + + + + +
+ + + In the example the font style for buttons was changed. + + + + Also it=E2=80=99s possible to change styles of particular + + <rich:gmap> + + component. In this case you should create own style classes + and use them in corresponding + + <rich:gmap> + + styleClass + attributes. An example is placed below: + + + + Example: + + = - The "styleClass" attribute for <rich:gmap> is defined as it= =E2=80=99s shown in the example below: - = - - Example: - - -]]> = - = - This is a result: - = -
- Redefinition styles with own classes and <emphasis><property>= "styleClass"</property></emphasis> attributes - - - - - -
= - = - As it could be seen on the picture above, the font weight for bu= ttons was changed. - = - = - = -
-
- Relevant Resources Links - - Here - you can see the example of - <rich:gmap> - usage and sources for the given example. -
+...]]> + + The + + "styleClass" + + attribute for + + <rich:gmap> + + is defined as it=E2=80=99s shown in the example below: + = + + Example: + + +]]> + + This is a result: + +
+ + Redefinition styles with own classes and + <emphasis> + <property>"styleClass"</property> + </emphasis> + attributes + + + + + + +
+ + + As it could be seen on the picture above, the font weight + for buttons was changed. + + + + +
+
+ Relevant Resources Links + + + Here + + you can see the example of + + <rich:gmap> + + usage and sources for the given example. + +
+
Modified: trunk/docs/userguide/en/src/main/docbook/included/inputNumberSlid= er.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml= 2008-06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml= 2008-06-10 09:27:24 UTC (rev 8967) @@ -1,445 +1,600 @@
- - - dragged handle control - rich:inputNumberSlider - HtmlInputNumberSlider - - - - Component identification parameters - - - - Name - Value - - - - - component-type - org.richfaces.inputNumberSlider - - - component-class - org.richfaces.component.html.HtmlInputNumberSlider - - - component-family - org.richfaces.inputNumberSlider - - - renderer-type - org.richfaces.InputNumberSliderRenderer - - - tag-class - org.richfaces.taglib.InputNumberSliderTag - - - -
+ + + dragged handle control + rich:inputNumberSlider + HtmlInputNumberSlider + + + + Component identification parameters + + + + Name + Value + + + + + component-type + org.richfaces.inputNumberSlider + + + component-class + + org.richfaces.component.html.HtmlInputNumberSlider + + + + component-family + org.richfaces.inputNumberSlider + + + renderer-type + + org.richfaces.InputNumberSliderRenderer + + + + tag-class + + org.richfaces.taglib.InputNumberSliderTag + + + + +
= -
- Creating the Component with a Page Tag - To create the simplest variant on a page use the following synta= x: +
+ Creating the Component with a Page Tag + + To create the simplest variant on a page use the following + syntax: + = - - Example: - - + Example: + + = ... ]]> -
-
- Creating the Component Dynamically Using Java +
+
+ Creating the Component Dynamically Using Java = - - Example: - - + Example: + + -
-
- Details of Usage - - <rich:inputNumberSlider> - is used to facilitate your data input with rich UI Contr= ols. - Here is the simplest variant of a slider definition with - "minValue", - - "maxValue" - and - "step" - (on default =3D "1") attributes, which define = the beginning and - the end of a numerical area and a slider proper= ty step. +
+
+ Details of Usage + + + <rich:inputNumberSlider> + + is used to facilitate your data input with rich UI Controls. + + + Here is the simplest variant of a slider definition with + + "minValue" + , + + + "maxValue" + + and + + "step" + + (on default =3D "1") attributes, which define the + beginning and the end of a numerical area and a + slider + property step. + = = - - Example: - - ]]> + + Example: + + ]]> = - It generates on a page: -
- Generated <emphasis role=3D"bold"><property><rich:InputNum= berSlider></property></emphasis> - - - - - -
- Using - "showInput" - (default is true) and - "enableManualInput" - (default value is true) attributes, it's possible t= o output the input - area near the slider, and make it read-only or editable. - To remove input area use - "showInput=3D"false" - : + It generates on a page: +
+ + Generated + <emphasis role=3D"bold"> + <property><rich:InputNumberSlider></property> + </emphasis> + + + + + + +
+ + Using + + "showInput" + + (default is true) and + + "enableManualInput" + + (default value is true) attributes, it's possible to + output the input area near the slider, and make it read-only + or editable. + + + To remove input area use + showInput =3D "false" + : + = - - Example: - - ]]> - It looks at page like: -
- <emphasis role=3D"bold"><property><rich:inputNumberSlider&= gt;</property></emphasis> without input field - - - - - -
- It's also possible to switch off displaying of "bounda= ry - values" and a toolTip showing on a handle drawing. This could b= e performed with the - help of the component defined attributes: - "showBoundaryValues" - which is responsible for "boundary values" dis= playing (default - is true) and - "showToolTip" - which is responsible for tooltTip displaying (default is= true). + + Example: + + ]]> + It looks at page like: +
+ + <emphasis role=3D"bold"> + <property><rich:inputNumberSlider></property> + </emphasis> + without input field + + + + + + +
+ + It's also possible to switch off displaying of + "boundary values" and a toolTip showing on a + handle drawing. This could be performed with the help of the + component defined attributes: + + "showBoundaryValues" + + which is responsible for "boundary values" + displaying (default is true) and + + "showToolTip" + + which is responsible for tooltTip displaying (default is + true). + = - Moreover, to add e.g. some JavaScript effects, events defined on= it are used. - - onchange - onmouseover - onclick - onfocus - onmouseout - etc. - - - The - "label" - attribute is a generic attribute. - The - "label" - attribute provides an association between a component, a= nd the message that the component (indirectly) produced. = - This attribute defines the parameters of localized error and informa= tional messages that - occur as a result of conversion, validation, or other application ac= tions during the request - processing lifecycle. With the help of this attribute you can repla= ce the - last parameter substitution token shown in the messages. For example= , {1} for =E2=80=9CDoubleRangeValidator.MAXIMUM=E2=80=9D, {2} - for =E2=80=9CShortConverter.SHORT=E2=80=9D. - + + Moreover, to add e.g. some JavaScript effects, events + defined on it are used. + + + + onchange + + + onmouseover + + + onclick + + + onfocus + + + onmouseout + + + etc. + + + + The + + "label" + + attribute is a generic attribute. The + + "label" + + attribute provides an association between a component, and + the message that the component (indirectly) produced. This + attribute defines the parameters of localized error and + informational messages that occur as a result of conversion, + validation, or other application actions during the request + processing lifecycle. With the help of this attribute you + can replace the last parameter substitution token shown in + the messages. For example, {1} for + =E2=80=9CDoubleRangeValidator.MAXIMUM=E2=80=9D + , {2} for + =E2=80=9CShortConverter.SHORT=E2=80=9D + . + = -
-
- Look-and-Feel Customization - = - For skinnability implementation, the components use a - style class redefinition method. - Default style classes are mapped on - skin parameters. - - = - There are two ways to redefine the appearance of all - <rich:inputNumberSlider> - components at once: - = - - - Redefine the corresponding skin parameters - - = - - Add to your style sheets - style classes - used by a - <rich:imputNumberSlider> - component - - -
- = -
= - Skin Parameters Redefinition - = - - Skin parameters redefinition for a bar - - - - Skin parameters - CSS properties - - - - - controlBackgroundColor - background-color - - - -
- = - - Skin parameters redefinition for numbers - - - - Skin parameters - CSS properties - - - - - generalFamilyFont - font-family - - - generalSizeFont - font-size - - - generalTextColor - color - - - panelBorderColor - border-color - - - generalSizeFont - line-height - - - -
- = - - Skin parameters redefinition for a text field - - - - Skin parameters - CSS properties - - - - - controlBackgroundColor - background-color - - - generalFamilyFont - font-family - - - generalSizeFont - font-size - - - controlTextColor - color - - - panelBorderColor - border-color - - - subBorderColor - border-bottom-color - - - subBorderColor - border-right-color - - - -
- = - - Skin parameters redefinition for a hint - - - - Skin parameters - CSS properties - - - - - tipBackgroundColor - background-color - - - tipBorderColor - border-color - - - generalFamilyFont - font-family - - - generalSizeFont - font-size - - - -
- = -
- = -
- Definition of Custom Style Classes - = - On the screenshot there are classes names that define styles for= component elements. - = -
- Style classes - - - - - -
- = - - Classes names that define a component appearance - - - - Class name - Description - - - - - rich-slider - Defines styles for a wrapper table element of a compone= nt - - - rich-inslider-track - Defines styles for a bar - - - rich-inslider-handler - Defines styles for a slider handler - - - rich-inslider-handler-selected - Defines styles for a selected handler - - - rich-inslider-field - Defines styles for a text field - - - rich-inslider-right-num - Defines styles for the right number - - - rich-inslider-left-num - Defines styles for the left number - - - rich-inslider-tip - Defines styles for a hint - - - -
- In order to redefine styles for all - <rich:inputNumberSlider> - components on a page using CSS, it's enough to create= classes with the - same names (possible classes could be found in the table above) and define necessary properties in them. An exa= mple is placed below: - = - - Example: - - +
+ Look-and-Feel Customization + + + For skinnability implementation, the components use a + + style class redefinition method. + + Default style classes are mapped on + + skin parameters. + + + + + There are two ways to redefine the appearance of all + + <rich:inputNumberSlider> + + components at once: + + + + + Redefine the corresponding skin parameters + + + + + Add to your style sheets + + style classes + + used by a + + + <rich:imputNumberSlider> + + + component + + + +
+ +
+ Skin Parameters Redefinition + + + Skin parameters redefinition for a bar + + + + Skin parameters + CSS properties + + + + + controlBackgroundColor + background-color + + + +
+ + + Skin parameters redefinition for numbers + + + + Skin parameters + CSS properties + + + + + generalFamilyFont + font-family + + + generalSizeFont + font-size + + + generalTextColor + color + + + panelBorderColor + border-color + + + generalSizeFont + line-height + + + +
+ + + Skin parameters redefinition for a text field + + + + Skin parameters + CSS properties + + + + + controlBackgroundColor + background-color + + + generalFamilyFont + font-family + + + generalSizeFont + font-size + + + controlTextColor + color + + + panelBorderColor + border-color + + + subBorderColor + border-bottom-color + + + subBorderColor + border-right-color + + + +
+ + + Skin parameters redefinition for a hint + + + + Skin parameters + CSS properties + + + + + tipBackgroundColor + background-color + + + tipBorderColor + border-color + + + generalFamilyFont + font-family + + + generalSizeFont + font-size + + + +
+ +
+ +
+ Definition of Custom Style Classes + + + On the screenshot there are classes names that define styles + for component elements. + + +
+ Style classes + + + + + +
+ + + + Classes names that define a component appearance + + + + + Class name + Description + + + + + rich-slider + + Defines styles for a wrapper table element + of a component + + + + rich-inslider-track + Defines styles for a bar + + + rich-inslider-handler + + Defines styles for a slider handler + + + + rich-inslider-handler-selected + + Defines styles for a selected handler + + + + rich-inslider-field + Defines styles for a text field + + + rich-inslider-right-num + + Defines styles for the right number + + + + rich-inslider-left-num + + Defines styles for the left number + + + + rich-inslider-tip + Defines styles for a hint + + + +
+ + In order to redefine styles for all + + <rich:inputNumberSlider> + + components on a page using CSS, it's enough to create + classes with the same names (possible classes could be found + in the table + above + ) and define necessary properties in them. An example is + placed below: + + + + Example: + + = - = - This is a result: - = -
- Redefinition styles with predefined classes - - - - - -
- = - In the example a tip background color and font family was change= d. - = - Also it=E2=80=99s possible to change styles of particular <rich:inputNumberSlider> comp= onent. In this case you should create own style classes and use them in cor= responding <rich:inputNumberSlider> styleClass attributes. An example i= s placed below: - = - - Example: - - + + This is a result: + +
+ Redefinition styles with predefined classes + + + + + +
+ + + In the example a tip background color and font family was + changed. + + + + Also it=E2=80=99s possible to change styles of particular + + <rich:inputNumberSlider> + + component. In this case you should create own style classes + and use them in corresponding + + <rich:inputNumberSlider> + + + styleClass + + attributes. An example is placed below: + + + + Example: + + = - The "inputClass" attribute for <rich:inputNumberSlider> is = defined as it=E2=80=99s shown in the example below: - = - - Example: - - -]]> = - = - This is a result: - = -
- Redefinition styles with own classes and <emphasis><property>= styleClass</property></emphasis> attributes - - - - - -
= - = - As it could be seen on the picture above, the font style for inp= ut text was changed. = - = - = -
-
- Relevant Resources Links - - Here you can see the example of <rich:inputNumberSlider> us= age and sources for the given example. - -
+...]]> + + The + + "inputClass" + + attribute for + + <rich:inputNumberSlider> + + is defined as it=E2=80=99s shown in the example below: + = + + Example: + + +]]> + + This is a result: + +
+ + Redefinition styles with own classes and + <emphasis> + <property>styleClass</property> + </emphasis> + attributes + + + + + + +
+ + + As it could be seen on the picture above, the font style for + input text was changed. + + + +
+
+ Relevant Resources Links + + + Here + + you can see the example of + + <rich:inputNumberSlider> + + usage and sources for the given example. + +
+
Modified: trunk/docs/userguide/en/src/main/docbook/included/inputNumberSpin= ner.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xm= l 2008-06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xm= l 2008-06-10 09:27:24 UTC (rev 8967) @@ -1,340 +1,492 @@
- - - input field - rich:inputNumberSpinner - HtmlInputNumberSpinner - - + + + input field + rich:inputNumberSpinner + HtmlInputNumberSpinner + + = - - Component identification parameters - - - - Name - Value - - - - - component-type - org.richfaces.inputNumberSpinner - - - component-class - org.richfaces.component.html.HtmlInputNumberSpinner - - - component-family - org.richfaces.inputNumberSpinner - - - renderer-type - org.richfaces.InputNumberSpinnerRenderer - - - tag-class - org.richfaces.taglib.InputNumberSpinnerTag - - - -
+ + Component identification parameters + + + + Name + Value + + + + + component-type + org.richfaces.inputNumberSpinner + + + component-class + + org.richfaces.component.html.HtmlInputNumberSpinner + + + + component-family + org.richfaces.inputNumberSpinner + + + renderer-type + + org.richfaces.InputNumberSpinnerRenderer + + + + tag-class + + org.richfaces.taglib.InputNumberSpinnerTag + + + + +
= -
- Creating the Component with a Page Tag - To create the simplest variant on a page use the following synta= x: +
+ Creating the Component with a Page Tag + + To create the simplest variant on a page use the following + syntax: + = - - Example: - - + Example: + + = ... ]]> -
-
- Creating the Component Dynamically Using Java +
+
+ Creating the Component Dynamically Using Java = - - Example: - - + Example: + + -
-
- Details of Usage - - <rich:inputNumberSpinner> - is used to facilitate your data input with rich UI Contr= ols. - Here is the simplest variant of spinner def= inition with - "minValue", - - "maxValue" - and - "step" - (on default =3D "1") attributes, which define = the beginning and - the end of numerical area and a spinner step. - - Example: - - +
+ Details of Usage + + + <rich:inputNumberSpinner> + + is used to facilitate your data input with rich UI Controls. + + + Here is the simplest variant of + spinner + definition with + + "minValue" + , + + + "maxValue" + + and + + "step" + + (on default =3D "1") attributes, which define the + beginning and the end of numerical area and a + spinner + step. + + + Example: + + ... ]]> - It generates on a page: -
- Generated <emphasis role=3D"bold"><property><rich:InputNum= berSpinner></property></emphasis> - - - - - -
- There are also several attributes to define functionality peculi= arities: - - - - "cycled" - if the attribute is "true&quo= t; after the current value reaches the - border value it's be reversed to another border value after next i= ncreasing/decreasing. In - other case possibilities of next increasing/decreasing are locked = - - - "disabled" - is an attribute that defines whether a component is ac= tive on a page - - - "manualInput" - is an attribute that defines whether a keyboard input = is possible or only UI - controls could be used - - Moreover, to add e.g. some JavaScript effects, events defined on= it are used - - onchange - onmouseover - onclick - onfocus - onmouseout - etc. - - - The - "label" - attribute is a generic attribute. - The - "label" - attribute provides an association between a component, a= nd the message that the component (indirectly) produced. = - This attribute defines the parameters of localized error and informa= tional messages that - occur as a result of conversion, validation, or other application ac= tions during the request - processing lifecycle. With the help of this attribute you can repla= ce the - last parameter substitution token shown in the messages. For example= , {1} for =E2=80=9CDoubleRangeValidator.MAXIMUM=E2=80=9D, {2} - for =E2=80=9CShortConverter.SHORT=E2=80=9D. - -
-
- Look-and-Feel Customization - = - For skinnability implementation, the components use a - style class redefinition method. - Default style classes are mapped on - skin parameters. - - = - There are two ways to redefine the appearance of all - <rich:inputNumberSpinner> - components at once: - = - - - Redefine the corresponding skin parameters - - = - - Add to your style sheets - style classes - used by a - <rich:inputNumberSpinner> - component - - -
- = -
- Skin Parameters Redefinition - - Skin parameters redefinition for a container - - - - Skin parameters - CSS properties - - - - - controlBackgroundColor - background-color - - - panelBorderColor - border-color - - - subBorderColor - border-bottom-color - - - subBorderColor - border-right-color - - - -
- - Skin parameters redefinition for an input field - - - - Skin parameters - CSS properties - - - - - buttonSizeFont - font-size - - - buttonFamilyFont - font-family - - - -
- = -
-
- Definition of Custom Style Classes - On the screenshot there are classes names that define styles for= component elements. -
- Style classes - - - - - -
- = - - Classes names that define a component appearance - = - - - - Class name - Description - - - - - rich-spinner-c - Defines styles for a wrapper table element of a compone= nt - - - rich-spinner-input-container - Defines styles for a container - - - rich-spinner-input - Defines styles for a wrapper <td> element for inp= ut fields - - - rich-spinner-button - Defines styles for a button - - - rich-spinner-buttons - Defines styles for all buttons - - - -
- = - In order to redefine styles for all - <rich:inputNumberSpinner> - components on a page using CSS, it's enough to create= classes with the - same names (possible classes could be found in the table above) and define necessary properties in them. An ex= ample is placed below: - = - - Example: - - It generates on a page: +
+ + Generated + <emphasis role=3D"bold"> + <property><rich:InputNumberSpinner></property> + </emphasis> + + + + + + +
+ + There are also several attributes to define functionality + peculiarities: + + + + + + "cycled" + + if the attribute is + + "true" + + after the current value reaches the border value + it's be reversed to another border value after next + increasing/decreasing. In other case possibilities + of next increasing/decreasing are locked + + + + + + "disabled" + + is an attribute that defines whether a component is + active on a page + + + + + + "manualInput" + + is an attribute that defines whether a keyboard + input is possible or only UI controls could be used + + + + + Moreover, to add e.g. some JavaScript effects, events + defined on it are used + + + + onchange + + + onmouseover + + + onclick + + + onfocus + + + onmouseout + + + etc. + + + + The + + "label" + + attribute is a generic attribute. The + + "label" + + attribute provides an association between a component, and + the message that the component (indirectly) produced. This + attribute defines the parameters of localized error and + informational messages that occur as a result of conversion, + validation, or other application actions during the request + processing lifecycle. With the help of this attribute you + can replace the last parameter substitution token shown in + the messages. For example, {1} for + =E2=80=9CDoubleRangeValidator.MAXIMUM=E2=80=9D + , {2} for + =E2=80=9CShortConverter.SHORT=E2=80=9D + . + +
+
+ Look-and-Feel Customization + + + For skinnability implementation, the components use a + + style class redefinition method. + + Default style classes are mapped on + + skin parameters. + + + + + There are two ways to redefine the appearance of all + + <rich:inputNumberSpinner> + + components at once: + + + + + Redefine the corresponding skin parameters + + + + + Add to your style sheets + + style classes + + used by a + + + <rich:inputNumberSpinner> + + + component + + + +
+ +
+ Skin Parameters Redefinition + + Skin parameters redefinition for a container + + + + Skin parameters + CSS properties + + + + + controlBackgroundColor + background-color + + + panelBorderColor + border-color + + + subBorderColor + border-bottom-color + + + subBorderColor + border-right-color + + + +
+ + + Skin parameters redefinition for an input field + + + + + Skin parameters + CSS properties + + + + + buttonSizeFont + font-size + + + buttonFamilyFont + font-family + + + +
+ +
+
+ Definition of Custom Style Classes + + On the screenshot there are classes names that define styles + for component elements. + +
+ Style classes + + + + + +
+ + + + Classes names that define a component appearance + + + + + + Class name + Description + + + + + rich-spinner-c + + Defines styles for a wrapper table element + of a component + + + + rich-spinner-input-container + Defines styles for a container + + + rich-spinner-input + + Defines styles for a wrapper <td> + element for input fields + + + + rich-spinner-button + Defines styles for a button + + + rich-spinner-buttons + Defines styles for all buttons + + + +
+ + + In order to redefine styles for all + + <rich:inputNumberSpinner> + + components on a page using CSS, it's enough to create + classes with the same names (possible classes could be found + in the table + above + ) and define necessary properties in them. An example is + placed below: + + + + Example: + + = - = - This is a result: - = -
- Redefinition styles with predefined classes - - - - - -
- = - In the example an input text font style was changed. - = - Also it=E2=80=99s possible to change styles of particular <rich:inputNumberSpinner> com= ponent. In this case you should create own style classes and use them in co= rresponding <rich:inputNumberSpinner> <= emphasis>styleClass attributes. An example = is placed below: - = - - Example: - - + + This is a result: + +
+ Redefinition styles with predefined classes + + + + + +
+ + + In the example an input text font style was changed. + + + + Also it=E2=80=99s possible to change styles of particular + + <rich:inputNumberSpinner> + + component. In this case you should create own style classes + and use them in corresponding + + <rich:inputNumberSpinner> + + + styleClass + + attributes. An example is placed below: + + + + Example: + + = - The "inputClass" attribute for <rich:inputNumberSpinner> is= defined as it=E2=80=99s shown in the example below: - = - - Example: - - -]]> = - = - This is a result: - = -
- Redefinition styles with own classes and <emphasis><property>= styleClass</property></emphasis> attributes - - - - - -
= - = - As it could be seen on the picture above, the font family for in= put text was changed. = - = -
-
- Relevant Resources Links - - Here you can see the example of <rich:inputNumberSpinner> u= sage and sources for the given example. - -
+...]]> + + The + + "inputClass" + + attribute for + + <rich:inputNumberSpinner> + + is defined as it=E2=80=99s shown in the example below: + = + + Example: + + +]]> + + This is a result: + +
+ + Redefinition styles with own classes and + <emphasis> + <property>styleClass</property> + </emphasis> + attributes + + + + + + +
+ + + As it could be seen on the picture above, the font family + for input text was changed. + + +
+
+ Relevant Resources Links + + + Here + + you can see the example of + + <rich:inputNumberSpinner> + + usage and sources for the given example. + +
+
Modified: trunk/docs/userguide/en/src/main/docbook/included/loadScript.desc= .xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/loadScript.desc.xml 2= 008-06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/loadScript.desc.xml 2= 008-06-10 09:27:24 UTC (rev 8967) @@ -10,7 +10,7 @@ = Description - Inserts script links to the head element. Render the value of the compo= nent , after passing it to the getResourceURL() method of the ViewHandler f= or this application, and passing the result through the encodeResourceURL()= method of the ExternalContext. = + Inserts script links to the head element. Render the value of the compo= nent , after passing it to the getResourceURL() method of the = ViewHandler for this application, and passing the result through the = encodeResourceURL() method of the ExternalContext. =
\ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/loadScript.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/loadScript.xml 2008-0= 6-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/loadScript.xml 2008-0= 6-10 09:27:24 UTC (rev 8967) @@ -62,8 +62,8 @@ As it was mentioned above this c= omponent returns its value as the value of = the "src" attrib= ute passing it to the - getResourceUR() method of the ViewHandler for this application, and = passing = - the result through the encodeResourceURL() method of the ExternalCon= text. + getResourceUR() method of the ViewHandler for this appl= ication, and passing = + the result through the encodeResourceURL() method of th= e ExternalContext. It means that the Context is inserts automatically to the link. And c= alls Modified: trunk/docs/userguide/en/src/main/docbook/included/mediaOutput.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/mediaOutput.xml 2008-= 06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/mediaOutput.xml 2008-= 06-10 09:27:24 UTC (rev 8967) @@ -65,7 +65,7 @@
Key attributes and ways of usage To use the component it's necessary to define it on a page = and set Java methods for data keeping and data transmission to output strea= m. - Here is the content of paintData that is a bean containing outpu= t data + Here is the content of paintData that is a bean con= taining output data Example: @@ -77,7 +77,7 @@ Integer weight=3D50; ... ]]> - The Paint method of the paintBean class is a method transmittin= g graphical data into output stream. + The Paint method of the paintBean class is a method= transmitting graphical data into output stream. = Example: @@ -89,7 +89,7 @@ As it was shown in the example above there are two main componen= ts: - "createContent" specifies a method accepting 2 parameters. The first (of java.io.Output= Stream type) defines a stream, where any binary data is output. The second = (of java.lang.Object type) contains deserialized object with data specified= in the + "createContent" specifies a method accepting 2 parameters. The first (of java.io.= OutputStream type) defines a stream, where any binary data is output= . The second (of java.lang.Object type) contains deserialized = object with data specified in the "value" attribute. Modified: trunk/docs/userguide/en/src/main/docbook/included/outputPanel.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/outputPanel.xml 2008-= 06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/outputPanel.xml 2008-= 06-10 09:27:24 UTC (rev 8967) @@ -1,52 +1,58 @@ - - - a4j:outputPanel - - - - Component identification parameters - - - - Name - Value - - - - - component-type - org.ajax4jsf.OutputPanel - - - component-family - javax.faces.Panel - - - component-type - org.ajax4jsf.ajax.OutputPanel - - - component-class - org.ajax4jsf.component.html.HtmlAjaxOutputPanel - - - renderer-type - org.ajax4jsf.components.AjaxOutputPanelRenderer - - - -
- = -
- Creating on a page - Here is the simplest way for a component creation on a page. + + + a4j:outputPanel + + + + Component identification parameters + + + + Name + Value + + + + + component-type + org.ajax4jsf.OutputPanel + + + component-family + javax.faces.Panel + + + component-type + org.ajax4jsf.ajax.OutputPanel + + + component-class + + org.ajax4jsf.component.html.HtmlAjaxOutputPanel + + + + renderer-type + + org.ajax4jsf.components.AjaxOutputPanelRenderer + + + + +
= - - Example: - - +
+ Creating on a page + + Here is the simplest way for a component creation on a page. + + + + Example: + + @@ -54,30 +60,46 @@ ]]> -
-
- Creating the Component Dynamically Using Java +
+
+ Creating the Component Dynamically Using Java = - - Example: - - + Example: + + -
-
- Key attributes and ways of usage - <a4j:outputPanel> allows marking of a page area, which is updated on Ajax res= ponse. Anyway, - <a4j:outputPanel> - usage is optional, as in RichFaces it's possible to= indicate any existing component id on a component view in order to define = updating areas. = +
+
+ Key attributes and ways of usage + + + <a4j:outputPanel> + + allows marking of a page area, which is updated on Ajax + response. Anyway, + + <a4j:outputPanel> + + usage is optional, as in RichFaces it's possible to + indicate any existing component id on a component view in + order to define updating areas. = -To speed up the performance, RichFaces updates only a component tree. - <a4j:outputPanel> - usage is recommended for wrapping components that aren&a= pos;t rendered during the primary non-ajax response, as the components don&= apos;t present in a component tree. = - - Example: - + To speed up the performance, RichFaces updates only a + component tree. + + <a4j:outputPanel> + + usage is recommended for wrapping components that + aren't rendered during the primary non-ajax response, + as the components don't present in a component tree. + + + Example: + + ... @@ -85,36 +107,92 @@ ]]> - In addition to the areas directly indicated in "reRender" attribute of Ajax components,= - <a4j:outputPanel> - allows to update a part of a page basing on its own flag= . The flag is defined by the "ajaxRendered" <= /property>attribute. The flag is commonly used when a part of a = page must be updated or can be updated on any response. - Example: - + + In addition to the areas directly indicated in + + "reRender" + + attribute of Ajax components, + + <a4j:outputPanel> + + allows to update a part of a page basing on its own flag. + The flag is defined by the + + "ajaxRendered" + + attribute. The flag is commonly used when a part of a page + must be updated or can be updated on any response. + + + Example: + + ]]> - On default - <a4j:outputPanel> - is output as a pair of opening and closing html <span> tag, but with = the help of the layout attribute this output way could be changed. There ar= e three variants for this component value: - - - inline (default) - - - block - - - none - - - If "layout" =3D"block" is chosen, the component is rend= ered as a pair of opening and closing <= ;div> tag, to which it's possible to apply an= y available style attributes available for block tags. - "layout" = =3D"none" helps to avoid an unnecessary tag = round a context that could or couldn't be rendered according to the de= fined "rendered" attrib= ute conditions. If an inner context isn=E2=80=99t rendered, - <a4j:outputPanel> - is rendered as a <spa= n> tag with the id equal to an id of a child compo= nent and display:none style. If a child component is r= endered, - <a4j:outputPanel> - doesn't present at all in a final code. - Example: - + + On default + + <a4j:outputPanel> + + is output as a pair of opening and closing html + + <span> + + tag, but with the help of the layout attribute this output + way could be changed. There are three variants for this + component value: + + + + inline (default) + + + block + + + none + + + + If + layout=3D"block" + is chosen, the component is rendered as a pair of opening + and closing + + <div> + + tag, to which it's possible to apply any available + style attributes available for block tags. + + + layout =3D"none" + helps to avoid an unnecessary tag round a context that could + or couldn't be rendered according to the defined + + "rendered" + + attribute conditions. If an inner context isn=E2=80=99t rendered, + + <a4j:outputPanel> + + is rendered as a + + <span> + + tag with the id equal to an id of a child component and + display:none + style. If a child component is rendered, + + <a4j:outputPanel> + + doesn't present at all in a final code. + + + Example: + + ... @@ -122,31 +200,97 @@ ]]> - As you see, the code is very similar to the one shown above, but= "reRender " attribute= refers directly to the updating panelGrid and not to the framing outputPan= el, and it's more semantically correct. - <a4j:outPanel> should be used for non-JSF component part framing, which is to= be updated on Ajax response, as RichFaces specifies the list of updating a= reas as a list of an existing JSF component. - On default non-JSF context isn't saved in a component tree,= but is rendered anew every time. To accelerate the processing speed and Aj= ax response input speed, RichFaces saves non-JSF context in a component tre= e on default. This option could be canceled by "ke= epTransient" attribute that cancels transient fl= ag forced setting for child components. This flag setting keeps the current= value set by child components. - - Note: - In JSF 1.1 implementation and lower, where non-JSF context shoul= d be framed with the <f:verbatim> component, - <a4j:outputPanel> - doesn't improve this JSF implementation option in any= way, so you still have to use this tag where it's necessary without R= ichFaces usage. - - RichFaces allows setting Ajax responses rendering directly basin= g on component tree nodes without referring to the JSP (XHTML) page code. I= t could be defined by selfRendered attribute setting to = - "true" - = - on - <a4j:region> - and could help considerably speed up a response output. = However, if a transient flag is kept as it is, this rapid processing could = cause missing of transient components that present on view and don=E2=80=99= t come into a component tree. Hence, for any particular case you could choo= se a way for you application optimization: speed up processing or redundant= memory for keeping tree part earlier defined a transient. -
-
- Relevant resources links - Here you can see the example of <a4j:outputPanel> usage and= sources for the given example. - - Some additional information about usage of component can be found - here. - = - = -
= + + As you see, the code is very similar to the one shown above, + but + + "reRender " + + attribute refers directly to the updating panelGrid and not + to the framing outputPanel, and it's more semantically + correct. + + + + <a4j:outPanel> + + should be used for non-JSF component part framing, which is + to be updated on Ajax response, as RichFaces specifies the + list of updating areas as a list of an existing JSF + component. + + + On default non-JSF context isn't saved in a component + tree, but is rendered anew every time. To accelerate the + processing speed and Ajax response input speed, RichFaces + saves non-JSF context in a component tree on default. This + option could be canceled by + + "keepTransient" + + attribute that cancels transient flag forced setting for + child components. This flag setting keeps the current value + set by child components. + + + Note: + + In JSF 1.1 implementation and lower, where non-JSF + context should be framed with the + + <f:verbatim> + + component, + + <a4j:outputPanel> + + doesn't improve this JSF implementation option in + any way, so you still have to use this tag where + it's necessary without RichFaces usage. + + + + RichFaces allows setting Ajax responses rendering directly + basing on component tree nodes without referring to the JSP + (XHTML) page code. It could be defined by selfRendered + attribute setting to + "true" + + on + + <a4j:region> + + and could help considerably speed up a response output. + However, if a transient flag is kept as it is, this rapid + processing could cause missing of transient components that + present on view and don=E2=80=99t come into a component tree. Hence, + for any particular case you could choose a way for you + application optimization: speed up processing or redundant + memory for keeping tree part earlier defined a transient. + +
+
+ Relevant resources links + + + Here + + you can see the example of + + <a4j:outputPanel> + + usage and sources for the given example. + + + Some additional information about usage of component can be + found + + here + + . + + +
\ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/region.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/region.xml 2008-06-10= 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/region.xml 2008-06-10= 09:27:24 UTC (rev 8967) @@ -79,7 +79,7 @@ ]]> Hence, the <a4j:commandLink> - request generation causes full "form1" form su= bmission onto the server, the only difference is that a component tree part= decoded on the serve is the part included into the region. + request generation causes full form1 form s= ubmission onto the server, the only difference is that a component tree par= t decoded on the serve is the part included into the region. The regions could be nested in any order, the server picks out a= nd decodes only the region, which contains a particular component that send= s a request. Example: @@ -90,7 +90,7 @@ ]]> - Therefore, the external region is decoded for the "link1&qu= ot; and the internal one is decoded for the "link2". + Therefore, the external region is decoded for the link1 and the internal one is decoded for the link2. RichFaces allows setting Ajax responses rendering directly basin= g on component tree nodes without referring to the JSP (XHTML) page code. I= t could be defined by "selfRendered" attribute setting to "true" on= <a4j:region> and could help considerably speed up a response output. = However, this rapid processing could cause missing of transient components = that present on view and don't come into a component tree as well as o= mitting of @@ -121,7 +121,7 @@ This example shows that one of the regions is decoded when a lin= k is used inside. Nevertheless, = if after processing the "link1" is clicked, the first region= passes into Encode as a root = region and encode performance time is reduced. This optimization doesn= 't allow data update out of the - region and should be implemented very carefully. The data out of the r= egion described with "renderRegionOnly"=3D"false" is updated succes= sfully. + region and should be implemented very carefully. The data out of the r= egion described with renderRegionOnly=3D"false" is u= pdated successfully.
Relevant resources links Modified: trunk/docs/userguide/en/src/main/docbook/included/repeat.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/repeat.xml 2008-06-10= 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/repeat.xml 2008-06-10= 09:27:24 UTC (rev 8967) @@ -44,8 +44,8 @@ ]]> The output is generated according to a collection contai= ned in = - bean.props - with the detail key passed to child component= s. + bean.props + with the detail key passed to child components.
Creating the Component Dynamically Using Java @@ -83,14 +83,14 @@ ]]> = Thus, a list with a table structure from = - bean.props + bean.props is output. In the above-mentioned example the component <a4j:poll> sends Ajax requests every second, calling the = - action + action method of the = - repeater + repeater bean. = @@ -103,7 +103,7 @@ "ajaxKeys" attribute The set could be defined during the action method processing usi= ng data on a model from the property = - repeater.myRepeat + repeater.myRepeat One more benefit of this component is absence of strictly defi= ned markup as JSF HTML DataTable and TOMAHAWK DataTable has, hence the comp= onents could be used more flexibly anywhere where it's necessary to ou= tput the results of selection from some collection. Modified: trunk/docs/userguide/en/src/main/docbook/included/support.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/support.xml 2008-06-1= 0 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/support.xml 2008-06-1= 0 09:27:24 UTC (rev 8967) @@ -48,7 +48,7 @@ ]]> On every keyup event generated by an input field, a form is subm= itted on the server with the help of Ajax and = - on a response coming from the server, element with repeater<= /property> id, founded in a DOM tree is = + on a response coming from the server, element with repeater id, founded in a DOM tree is = redrawn according to a new data from the response.
@@ -125,7 +125,7 @@ ]]> - In this example the request contains only the input component ca= uses the request generation, not all the components contained on a form, = because of "ajaxSingle"= =3D"true" usage. + In this example the request contains only the input component ca= uses the request generation, not all the components contained on a form, = because of ajaxSingle=3D"true" usage. Example 2: @@ -136,7 +136,7 @@ ]]> - In this example the component = <h:messages> is always updated (as it capturing= all Ajax requests, located in ajaxRendered <a4j:outputPanel>), except the case when a r= esponse is sent from the input component from the example. On sending this = component marks that updating area is limited to the defined in it componen= ts, it means that on its usage with "limitToList&q= uot;=3D"true" the onl= y component updated is the one with "id"=3D"test". + In this example the component = <h:messages> is always updated (as it capturing= all Ajax requests, located in ajaxRendered <a4j:outputPanel>), except the case when a r= esponse is sent from the input component from the example. On sending this = component marks that updating area is limited to the defined in it componen= ts, it means that on its usage withlimitToList=3D"true" the only component updated is the one with id=3D"test"= . Limitation of requests frequency and upd= ates quantity after the responses. Modified: trunk/docs/userguide/en/src/main/docbook/included/virtualEarth.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/virtualEarth.xml 2008= -06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/included/virtualEarth.xml 2008= -06-10 09:27:24 UTC (rev 8967) @@ -1,196 +1,281 @@
- - - map - Virtual Earth - - + + + map + Virtual Earth + + = - - Component identification parameters - - - - Name - Value - - - - - component-type - org.richfaces.VirtualEarth - - - component-class - org.richfaces.component.html.HtmlVirtualEarth - - - component-family - org.richfaces.VirtualEarth - - - renderer-type - org.richfaces.VirtualEarthRenderer - - - tag-class - org.richfaces.taglib.VirtualEarthTag - - - -
+ + Component identification parameters + + + + Name + Value + + + + + component-type + org.richfaces.VirtualEarth + + + component-class + + org.richfaces.component.html.HtmlVirtualEarth + + + + component-family + org.richfaces.VirtualEarth + + + renderer-type + org.richfaces.VirtualEarthRenderer + + + tag-class + org.richfaces.taglib.VirtualEarthTag + + + +
= -
- Creating the Component with a Page Tag - To create the simplest variant on a page use the following synta= x: +
+ Creating the Component with a Page Tag + + To create the simplest variant on a page use the following + syntax: + = - - Example: - - + Example: + + ... ]]> -
-
- Creating the Component Dynamically Using Java +
+
+ Creating the Component Dynamically Using Java = - - Example: - - + Example: + + -
-
- Details of Usage +
+
+ Details of Usage = - Here are the main settings of initial rendering performed with a= component - map that are accessible with the following attr= ibutes: - - - - "zoom" - defines an approximation size (boundary values 1-18) <= /para> - - - "lat" - specifies an initial latitude coordinate in degrees, a= s a number between -90 and - +90 - - - "lng" - specifies an initial longitude coordinate in degrees, = as a number between -180 - and +180 - - - "dashboardSize" - specifies a type of a rendered map (Normal, Small, Tiny= ) - - For example, the city of Paris is shown after rendering with the= following initial - settings: - "lat" - =3D 48.833, - "lng" - =3D 2.40 and - "zoom" - =3D 11. -
- <emphasis role=3D"bold"><property><rich:virtualEarth></= property></emphasis> initial rendering - - - - - -
- Code for this example is placed below: - - Example: - - + Here are the main settings of initial rendering performed + with a component + map + that are accessible with the following attributes: + + + + + + "zoom" + + defines an approximation size (boundary values 1-18) + + + + + + "lat" + + specifies an initial latitude coordinate in degrees, + as a number between -90 and +90 + + + + + + "lng" + + specifies an initial longitude coordinate in + degrees, as a number between -180 and +180 + + + + + + "dashboardSize" + + specifies a type of a rendered map (Normal, Small, + Tiny) + + + + + For example, the city of Paris is shown after rendering with + the following initial settings: + lat =3D "48.833" + , + lng =3D "2.40" + and + zoom =3D "11" + . + +
+ + <emphasis role=3D"bold"> + <property><rich:virtualEarth></property> + </emphasis> + initial rendering + + + + + + +
+ Code for this example is placed below: + + Example: + + ... ]]> = - To set all these parameters and perform some activity (Zoom In/O= ut etc.) is possible with - your JavaScript, i.e. declare a name of an object on a map= in the - "var" - attribute and then call the object directly with API Microsoft - Virtual Earth map. - For example, to approximate a map for - "var" - =3D "map" declared inside = the component, call - map.ZoomIn() on an event. - Moreover, to add e.g. some JavaScript effects, events defined on= it are used. - - onmouseover - onclick - onmouseout - etc. - - = - - - Virtual Earth does not support XHTML format of the page. = - Thus, if you use Facelets and JSF 1.2, do not forget to put the fo= llowing tags somewhere on the page: - - + To set all these parameters and perform some activity (Zoom + In/Out etc.) is possible with your JavaScript, i.e. declare + a name of an object on a + map + in the + + "var" + + attribute and then call the object directly with API + + Microsoft Virtual Earth map + . + + + + For example, to approximate a map for + var =3D "map" + declared inside the component, call + map.ZoomIn() + on an event. + + + Moreover, to add e.g. some JavaScript effects, events + defined on it are used. + + + + onmouseover + + + onclick + + + onmouseout + + + etc. + + + + + + Virtual Earth does not support XHTML format of the page. + Thus, if you use Facelets and JSF 1.2, do not forget to + put the following tags somewhere on the page: + + ... ... ]]> - - = -
-
- Look-and-Feel Customization - - <rich:virtualEarth> - component isn't tied to skin parameters, as there i= s no additional - elements on it, except the ones provided with Vi= rtual Earth - map. -
- = -
- Definition of Custom Style Classes - - Classes names that define a component appearance - - - - Class name - Description - - - - - rich-virtualEarth - Defines styles for a wrapper <div> element of a - component - - - -
+ = - In order to redefine styles for all - <rich:virtualEarth> - components on a page using CSS, it's enough to crea= te class with the same - name and define necessary properties in it. +
+
+ Look-and-Feel Customization + + + <rich:virtualEarth> + + component isn't tied to skin parameters, as there is no + additional elements on it, except the ones provided with + + Virtual Earth map + . + + +
= - To change styles of particular - <rich:virtualEarth> - components, define your own style class in the correspon= ding - <rich:virtualEarth> - attribute. -
-
- Relevant Resources Links - - Here you can found - additional information about Microsoft Virtual Earth map. -
+
+ Definition of Custom Style Classes + + + Classes names that define a component appearance + + + + + Class name + Description + + + + + rich-virtualEarth + + Defines styles for a wrapper <div> + element of a component + + + + +
= + + In order to redefine styles for all + + <rich:virtualEarth> + + components on a page using CSS, it's enough to create + class with the same name and define necessary properties in + it. + + + + To change styles of particular + + <rich:virtualEarth> + + components, define your own style class in the corresponding + + <rich:virtualEarth> + + attribute. + +
+
+ Relevant Resources Links + + + Here + + you can found additional information about Microsoft + Virtual Earth map + . + +
+
Modified: trunk/docs/userguide/en/src/main/docbook/modules/AUGWADParams.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/modules/AUGWADParams.xml 2008-= 06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/modules/AUGWADParams.xml 2008-= 06-10 09:27:24 UTC (rev 8967) @@ -33,7 +33,7 @@ Is a name of a skin used in an application. It can be a= literal string with a skin name, or the EL - expression (#{...}) pointed to a + expression (#{...}) pointed to a String property (skin name) or a property of a org.rich= faces.framework.skin type. Skin in last case, this instance is used as a current skin @@ -154,7 +154,7 @@ = Note: - org.richfaces.SKIN is used in the same way as org.ajax4jsf.SKIN<= /para> + org.richfaces.SKIN is used in the same way as org.ajax4jsf.SKIN = Modified: trunk/docs/userguide/en/src/main/docbook/modules/RFCSettings.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/modules/RFCSettings.xml 2008-0= 6-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/modules/RFCSettings.xml 2008-0= 6-10 09:27:24 UTC (rev 8967) @@ -1,97 +1,167 @@ - - - - - MyFaces + + + + + MyFaces = - JSF + JSF = - RichFaces + RichFaces = - - - = - Settings for different environments - RichFaces comes with support for all tags (components) included in= the JavaServer Faces - specification. To add RichFaces capabilities to the existing JSF proje= ct you should just put the - RichFaces libraries into the lib folder of the project and add filter = mapping. The behavior of - the existing project doesn't change just because of RichFaces. = - &wadParams; -
- - Sun JSF RI - RichFaces works with implementation of JSF = (JSF - 1.2) and with most JSF component libraries with= out any additional - settings. For more information look at: + + = - - - java.su= n.com - - + Settings for different environments + + RichFaces comes with support for all tags (components) included + in the JavaServer Faces specification. To add RichFaces + capabilities to the existing JSF project you should just put the + RichFaces libraries into the lib folder of the project and add + filter mapping. The behavior of the existing project + doesn't change just because of RichFaces. + + &wadParams; +
+ + Sun JSF RI + + RichFaces works with implementation of + JSF + (JSF 1.2) and with most + JSF + component libraries without any additional settings. For + more information look at: + = -
-
- - Apache MyFaces - RichFaces works with Apache MyFaces 1.2 ver= sion - including specific libraries like TOMAHAWK Sandbox and Trinidad (the= previous ADF Faces). - However, there are some considerations to take into account for conf= iguring applications to - work with MyFaces and RichFaces. - There are some problems with different filters defined in the we= b.xml file clashing. To - avoid these problems, the RichFaces filter must be the first one amo= ng other filters in the - web.xml configuration file. - For more information look at:http://myfaces.apache.org - There's one more problem while using MyFaces + S= eam. If you - use this combination you should use - <a4j:page> - inside - <f:view> - (right after it in your code) wrapping another content in= side your pages because of - some problems in realization of - <f:view> - in myFaces. - The problem is to be overcome in the nearest future. -
-
- - Facelets Support - A high-level support for Facelets is one of= our main support - features. When working with RichFaces, there is no difference what r= elease of - Facelets is used. - You should also take into account that some JSF frameworks such = as - Facelets use their own ViewHandler and need to = have it first in the chain - of ViewHandlers and the RichFaces AjaxViewHandler is not an exceptio= n. At first RichFaces - installs its ViewHandler in any case, so in case of two frameworks, = for example RichFaces + - Facelets, no changes in settings are required. Although, when more t= hen one framework (except - RichFaces) is used, it's possible to use the VIEW_HANDLERS parameter= defining these frameworks - view handlers according to its usage order in it. For example, the d= eclaration: + + + + java.sun.com + + + = - - Example: - - <context-param> - <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name> - <param-value>com.sun.facelets.FaceletViewHandler</param-val= ue> - </context-param> - says that Facelets will officially be the f= irst, however - AjaxViewHandler will be a little ahead temporarily to do some small,= but very important job. - - Note: - In this case you don't have to define FaceletVi= ewHandler - in the WEB-INF/faces-config.xml. - -
-
- - JBoss Seam Support - RichFaces now works out-of-the-box with JBoss Seam and Facelets - running inside JBoss AS 4.0.4 and higher. There is no more shared JA= R files needed. You just - have to package the RichFaces library with your application. - Your web.xml for Seam 1.2 must be like thi= s: - +
+
+ + Apache MyFaces + + RichFaces works with + Apache MyFaces + 1.2 version including specific libraries like TOMAHAWK + Sandbox and Trinidad (the previous ADF Faces). However, + there are some considerations to take into account for + configuring applications to work with + MyFaces + and RichFaces. + + + There are some problems with different filters defined in + the web.xml file clashing. To avoid these problems, the + RichFaces filter must be the first one among other filters + in the web.xml configuration file. + + + For more information look at: + + http://myfaces.apache.org + + + + There's one more problem while using + MyFaces + Seam + . If you use this combination you should use + + <a4j:page> + + inside + + <f:view> + + (right after it in your code) wrapping another content + inside your pages because of some problems in realization of + + <f:view> + + in myFaces. + + + The problem is to be overcome in the nearest future. + +
+
+ + Facelets Support + + A high-level support for + Facelets + is one of our main support features. When working with + RichFaces, there is no difference what release of + Facelets + is used. + + + You should also take into account that some JSF frameworks + such as + Facelets + use their own + ViewHandler + and need to have it first in the chain of ViewHandlers and + the RichFaces AjaxViewHandler is not an exception. At first + RichFaces installs its ViewHandler in any case, so in case + of two frameworks, for example RichFaces + Facelets, no + changes in settings are required. Although, when more then + one framework (except RichFaces) is used, it's possible to + use the + VIEW_HANDLERS + parameter defining these frameworks view handlers according + to its usage order in it. For example, the declaration: + + + + Example: + + + <context-param> + <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name> + <param-value>com.sun.facelets.FaceletViewHandler</param-value&= gt; + </context-param> + + + says that + Facelets + will officially be the first, however AjaxViewHandler will + be a little ahead temporarily to do some small, but very + important job. + + + Note: + + In this case you don't have to define + FaceletViewHandler + in the WEB-INF/faces-config.xml. + + +
+
+ + JBoss Seam Support + + RichFaces now works out-of-the-box with + JBoss Seam + and Facelets running inside JBoss AS 4.0.4 and higher. There + is no more shared JAR files needed. You just have to package + the RichFaces library with your application. + + + Your web.xml for + Seam 1.2 + must be like this: + + = ]]> - Seam 2 supports RichFaces Filter. Thus you= r web.xml for Seam 2 must be like this: - = - + + Seam 2 + supports RichFaces Filter. Thus your web.xml for Seam 2 must + be like this: + + + = ]]> - = - Only one issue still persists while using Seam with MyFaces. Look at - myFaces part of this section. -
-
- Portlet Support - JBoss Portlets have support since version A= jax4jsf 1.1.1. This support is - improved in Richfaces 3.2.1. Provide your feedback on compatible wit= h RichFaces if you face - some problems. -
-
- Sybase EAServer - The load-on-startup for the Faces Servlet had to be set to 0 in = web.xml. = - - Example: - - + Only one issue still persists while using + Seam + with MyFaces. Look at myFaces part of this section. + +
+
+ Portlet Support + + JBoss Portlets + have support since version Ajax4jsf 1.1.1. This support is + improved in Richfaces 3.2.1. Provide your feedback on + compatible with RichFaces if you face some problems. + +
+
+ Sybase EAServer + + The load-on-startup for the Faces Servlet had to be set to 0 + in web.xml. + + + + Example: + + Faces Servlet javax.faces.webapp.FacesServlet @@ -259,20 +342,30 @@ ... ]]> - This is because, EAServer calls servlet init() before the Servl= etContextInitializer. Not - an EAServer bug, this is in Servlet 2.3 spec. -
-
- Oracle AS/OC4J - In order to deploy your project with RichFaces components to a= n Oracle AS you just have to = - prevent the application's class loader from importing the Oracle XML= parser. - Use the following notation in orion-application.xml:= - + This is because, EAServer calls servlet init() before the + ServletContextInitializer. Not an EAServer bug, this is in + Servlet 2.3 spec. + +
+
+ Oracle AS/OC4J + + In order to deploy your project with RichFaces components to + an + Oracle AS + you just have to prevent the application's class loader + from importing the Oracle XML parser. Use the following + notation in + orion-application.xml + : + + = ... ]]> -
+
Modified: trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover= .xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml 2= 008-06-10 09:24:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml 2= 008-06-10 09:27:24 UTC (rev 8967) @@ -1,169 +1,268 @@ - + = - - - RichFaces + + + RichFaces = - CSS + CSS = - skin - - - Basic concepts of the RichFaces Framework -
- - Introduction - The framework is implemented as a component library which adds A= jax capability into - existing pages, so you don't need to write any JavaScript code = or to replace existing - components with new Ajax widgets. RichFaces ena= bles page-wide Ajax - support instead of the traditional component-wide support. Hence, yo= u can define the event on - the page that invokes an Ajax request and the areas of the page that= should be synchronized - with the JSF Component Tree after the Ajax request changes the data = on the server according to - the events fired on the client. - Next Figure shows how it works: -
- Request Processing flow - = - - - - - -
- RichFaces allows to define (by means of JSF= tags) different parts of - a JSF page you wish to update with an Ajax request and provide a few= options to send Ajax - requests to the server. Also JSF page doesn't change from a - "regular" JSF page and you don't need to write any Ja= vaScript or - XMLHttpRequest objects by hands, everything is done automatically. -
-
- - RichFaces Architecture Overview - Next figure lists several important elements of the Ri= chFaces - framework -
- Core Ajax component structure - = - - - - - -
- - Ajax Filter. - To get all benefits of RichFaces, you sho= uld register a Filter in - web.xml file of your application. The Filter recognizes multiple r= equest types. Necessary - information about Filter configuration can be found in the "Filter configuration"= section. The - sequence diagram on Figure 3 shows the difference in processing of= a - "regular" JSF request and an Ajax request. - - In the first case the whole JSF tree will be encoded, in the sec= ond one option it depends - on the "size" of the Ajax region. As you can see, in the s= econd case the - filter parses the content of an Ajax response before sending it to t= he client side. - Have a look at the next picture to understand these two ways: -
- Request Processing sequence diagram - = - - - - - -
- In both cases, the information about required static or dynamic = resources that your - application requests is registered in the ResourseBuilder class. - When a request for a resource comes (Figure 4), the RichFaces fi= lter checks the Resource - Cache for this resource and if it is there, the resource is sent to = the client. Otherwise, the - filter searches for the resource among those that are registered by = the ResourceBuilder. If - the resource is registered, the RichFaces filter will send a request= to the ResourceBuilder to - create (deliver) the resource. - Next Figure shows the ways of resource request processing. -
- Resource request sequence diagram - = - - - - - -
- - AJAX Action Components - There are Ajax Action Components: AjaxCommandButton, AjaxComm= andLink, AjaxPoll and - AjaxSupport and etc. You can use them to send Ajax requests from t= he client side. - - - AJAX Containers - AjaxContainer is an interface that describes an area on your = JSF page that should be - decoded during an Ajax request. AjaxViewRoot and AjaxRegion are im= plementations of this - interface. - - - JavaScript Engine - RichFaces JavaScript Engine runs on the c= lient-side. It knows how - to update different areas on your JSF page based on the informatio= n from the Ajax response. - Do not use this JavaScript code directly, as it is available autom= atically. - -
-
- - Limitations and Rules - In order to create RichFaces applications properly, keep the fol= lowing points in mind: - - Any Ajax framework should not append or delete, but= only replace elements on the - page. For successful updates, an element with the same ID as in th= e response must exist on - the page. If you'd like to append any code to a page, put in = a placeholder for it - (any empty element). For the same reason, it's recommended to= place messages in the - "AjaxOutput" - component (as no messages is also a message). <= /listitem> - Don't use - <f:verbatim> - for self-rendered containers, since this component is = transient and not saved in - the tree. - Ajax requests are made by XMLHttpRequest functions = in XML format, but this XML - bypasses most validations and the corrections that might be made i= n a browser. Thus, create - only a strict standards-compliant code for HTML and XHTML, without= skipping any required - elements or attributes. Any necessary XML corrections are automati= cally made by the XML - filter on the server, but lot's of unexpected effects can be = produced by an - incorrect HTML code. - -
+ skin + + + Basic concepts of the RichFaces Framework +
+ + Introduction + + The framework is implemented as a component library which + adds Ajax capability into existing pages, so you don't + need to write any JavaScript code or to replace existing + components with new Ajax widgets. + RichFaces + enables page-wide Ajax support instead of the traditional + component-wide support. Hence, you can define the event on + the page that invokes an Ajax request and the areas of the + page that should be synchronized with the JSF Component Tree + after the Ajax request changes the data on the server + according to the events fired on the client. + + Next Figure shows how it works: +
+ Request Processing flow = -
- - Ajax Request Optimization -
- - Re-Rendering - Ajax attributes are common for Ajax components such as - <a4j:support> - , - <a4j:commandButton> - , - <a4j:jsFunction> - , - <a4j:poll> - , - <a4j:push> - and so on. Also, most RichFaces components with built-= in Ajax support have these - attributes for a similar purpose. Ajax components attributes help = RichFaces to expose its - features. Most of the attributes have default values. Thus, you ca= n start working with - RichFaces without knowing the usage of these attribute. However, t= heir usage allows to tune - the required Ajax behavior very smoothly. + + + + + +
+ + RichFaces + allows to define (by means of JSF tags) different parts of a + JSF page you wish to update with an Ajax request and provide + a few options to send Ajax requests to the server. Also JSF + page doesn't change from a "regular" JSF page + and you don't need to write any JavaScript or + XMLHttpRequest objects by hands, everything is done + automatically. + +
+
+ + RichFaces Architecture Overview + + Next figure lists several important elements of the + RichFaces + framework + +
+ Core Ajax component structure = - - "reRender" - is a key attribute. The attribute allows to point to a= rea(s) on a page that - should be updated as a response on Ajax interaction. The value of = the - "reRender" - attribute is an id of the JSF component or an id list.= - A simple example is placed below: + + + + + +
+ + Ajax Filter. + + To get all benefits of + RichFaces + , you should register a Filter in web.xml file of your + application. The Filter recognizes multiple request + types. Necessary information about Filter configuration + can be found in the + + "Filter configuration" + + section. The sequence diagram on Figure 3 shows the + difference in processing of a "regular" JSF + request and an Ajax request. + + + + In the first case the whole JSF tree will be encoded, in the + second one option it depends on the "size" of the + Ajax region. As you can see, in the second case the filter + parses the content of an Ajax response before sending it to + the client side. + + + Have a look at the next picture to understand these two + ways: + +
+ Request Processing sequence diagram = - + + + + +
+ + In both cases, the information about required static or + dynamic resources that your application requests is + registered in the ResourseBuilder class. + + + When a request for a resource comes (Figure 4), the + RichFaces filter checks the Resource Cache for this resource + and if it is there, the resource is sent to the client. + Otherwise, the filter searches for the resource among those + that are registered by the ResourceBuilder. If the resource + is registered, the RichFaces filter will send a request to + the ResourceBuilder to create (deliver) the resource. + + + Next Figure shows the ways of resource request processing. + +
+ Resource request sequence diagram + + + + + + +
+ + AJAX Action Components + + There are Ajax Action Components: AjaxCommandButton, + AjaxCommandLink, AjaxPoll and AjaxSupport and etc. You + can use them to send Ajax requests from the client side. + + + + AJAX Containers + + AjaxContainer is an interface that describes an area on + your JSF page that should be decoded during an Ajax + request. AjaxViewRoot and AjaxRegion are implementations + of this interface. + + + + JavaScript Engine + + RichFaces + JavaScript Engine runs on the client-side. It knows how + to update different areas on your JSF page based on the + information from the Ajax response. Do not use this + JavaScript code directly, as it is available + automatically. + + +
+
+ + Limitations and Rules + + In order to create RichFaces applications properly, keep the + following points in mind: + + + + + Any Ajax framework should not append or delete, but + only replace elements on the page. For successful + updates, an element with the same ID as in the + response must exist on the page. If you'd like + to append any code to a page, put in a placeholder + for it (any empty element). For the same reason, + it's recommended to place messages in the + + "AjaxOutput" + + component (as no messages is also a message). + + + + + Don't use + + <f:verbatim> + + for self-rendered containers, since this component + is transient and not saved in the tree. + + + + + Ajax requests are made by XMLHttpRequest functions + in XML format, but this XML bypasses most + validations and the corrections that might be made + in a browser. Thus, create only a strict + standards-compliant code for HTML and XHTML, without + skipping any required elements or attributes. Any + necessary XML corrections are automatically made by + the XML filter on the server, but lot's of + unexpected effects can be produced by an incorrect + HTML code. + + + +
+ +
+ + Ajax Request Optimization +
+ + Re-Rendering + + Ajax attributes are common for Ajax components such as + + <a4j:support> + + , + + <a4j:commandButton> + + , + + <a4j:jsFunction> + + , + + <a4j:poll> + + , + + <a4j:push> + + and so on. Also, most RichFaces components with built-in + Ajax support have these attributes for a similar + purpose. Ajax components attributes help RichFaces to + expose its features. Most of the attributes have default + values. Thus, you can start working with RichFaces + without knowing the usage of these attribute. However, + their usage allows to tune the required Ajax behavior + very smoothly. + + + + + "reRender" + + is a key attribute. The attribute allows to point to + area(s) on a page that should be updated as a response + on Ajax interaction. The value of the + + "reRender" + + attribute is an id of the JSF component or an id list. + + A simple example is placed below: + + ... @@ -172,31 +271,54 @@ ... ]]> = - The value of - "reRender" - attribute of the - <a4j:commandButton> - tag defines which part(s) of your page is (are) to be = updated. In this case, the - only part of the page to update is the - <h:panelGrid> - tag because its ID value matches to the value of - "reRender" - attribute. As you see, it's not difficult to upda= te multiple elements - on the page, only list their IDs as the value of - "reRender" - . + + The value of + + "reRender" + + attribute of the + + <a4j:commandButton> + + tag defines which part(s) of your page is (are) to be + updated. In this case, the only part of the page to + update is the + + <h:panelGrid> + + tag because its ID value matches to the value of + + "reRender" + + attribute. As you see, it's not difficult to update + multiple elements on the page, only list their IDs as + the value of + + "reRender" + + . + = - - "reRender" - uses UIComponent.findComponent() algorithm (with some additi= onal exceptions) to find - the component in the component tree. As can you see, the algorithm= presumes several steps. - Each other step is used if the previous step is not successful. Th= erefore, you can define - how fast the component is found mentioning it more precisely. The = following example shows - the difference in approaches (both buttons will work successfully)= : + + + "reRender" + + uses + + UIComponent.findComponent() algorithm + + (with some additional exceptions) to find the component + in the component tree. As can you see, the algorithm + presumes several steps. Each other step is used if the + previous step is not successful. Therefore, you can + define how fast the component is found mentioning it + more precisely. The following example shows the + difference in approaches (both buttons will work + successfully): + = - ... @@ -216,57 +338,94 @@ ... ]]> = - It's also possible to 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 Render Response phase. H= ence, you can calculate - what should be re-rendered on any previous phase during the Ajax r= equest processing. + + It's also possible to 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 Render + Response phase. Hence, you can calculate what should be + re-rendered on any previous phase during the Ajax + request processing. + = - Most common problem with using reRender is pointing it to the = component that has a - "rendered" - attribute. Note, that JSF does not mark the place in t= he browser DOM where the - outcome of the component should be placed in case the - "rendered" - condition returns false. Therefore, after the componen= t becomes rendered during - the Ajax request, RichFaces delivers the rendered code to the clie= nt, but does not update a - page, because the place for update is unknown. You need to point t= o one of the parent - components that has no - "rendered" - attribute. As an alternative, you can wrap the compone= nt with - <a4j:outputPanel> - layout=3D"none". + + Most common problem with using reRender is pointing it + to the component that has a + + "rendered" + + attribute. Note, that JSF does not mark the place in the + browser DOM where the outcome of the component should be + placed in case the + + "rendered" + + condition returns false. Therefore, after the component + becomes rendered during the Ajax request, RichFaces + delivers the rendered code to the client, but does not + update a page, because the place for update is unknown. + You need to point to one of the parent components that + has no + + "rendered" + + attribute. As an alternative, you can wrap the component + with + + <a4j:outputPanel> + + layout=3D"none" + . + = - - "ajaxRendered" - attribute of the - <a4j:outputPanel> - set to "true" allows to= define the area - of the page that will be re-rendered even if it is not pointed in = the reRender attribute - 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 allo= ws to output error - messages regardless of what Ajax request causes the Validation pha= se failed. - + + "ajaxRendered" + + attribute of the + + <a4j:outputPanel> + + set to + "true" + allows to define the area of the page that will be + re-rendered even if it is not pointed in the reRender + attribute 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. + + ... ]]> = - - "limitToList" - attribute allows to dismiss the behavior of the - <a4j:outputPanel> - - - "ajaxRendered" - attribute. "limitToList" =3D - "false" means to update only the ar= ea(s) that - mentioned in the "reRender" attribute explicitly. - All output panels with - "ajaxRendered"=3D"true"is= ignored. An - example is placed below: + + + "limitToList" + + attribute allows to dismiss the behavior of the + + <a4j:outputPanel> + + + "ajaxRendered" + + attribute. + limitToList =3D "false" + means to update only the area(s) that mentioned in the + + "reRender" + + attribute explicitly. All output panels with + ajaxRendered=3D"true" + is ignored. An example is placed below: + = - @@ -276,95 +435,161 @@ ... ]]> = -
+
= -
- - Queue and Traffic Flood Protection - - "eventsQueue" - attribute defines the name of the queue that will be u= sed to order upcoming Ajax - requests. By default, RichFaces does not queue Ajax requests. If e= vents are produced - simultaneously, they will come to the server simultaneously. JSF i= mplementations - (especially, the very first ones) does not guaranty that the reque= st that comes first will - be served or passed into the JSF lifecycle first. The order how th= e server side data will be - modified in case of simultaneous request might be unpredictable. U= sage of eventsQueue - attribute allows to avoid possible mess. Define the queue name exp= licitly, if you expect - intensive Ajax traffic in your application. - The next request posted in the same queue will wait until the = previos one is not - processed and Ajax Response is returned back if the - "eventsQueue" - attribute is defined. In addition, Richfaces starts to= remove from the queue - "similar" requests. "Similar'"requests are the= requests - produced by the same event. For example, according to the followin= g code, only the newest - request will be sent to the server if you type very fast and has t= yped the several - characters already before the previous Ajax Response is back. +
+ + Queue and Traffic Flood Protection + + + "eventsQueue" + + attribute defines the name of the queue that will be + used to order upcoming Ajax requests. By default, + RichFaces does not queue Ajax requests. If events are + produced simultaneously, they will come to the server + simultaneously. JSF implementations (especially, the + very first ones) does not guaranty that the request that + comes first will be served or passed into the JSF + lifecycle first. The order how the server side data will + be modified in case of simultaneous request might be + unpredictable. Usage of eventsQueue attribute allows to + avoid possible mess. Define the queue name explicitly, + if you expect intensive Ajax traffic in your + application. + + + The next request posted in the same queue will wait + until the previos one is not processed and Ajax Response + is returned back if the + + "eventsQueue" + + attribute is defined. In addition, Richfaces starts to + remove from the queue "similar" requests. + "Similar'"requests are 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 you type very fast and has typed the + several characters already before the previous Ajax + Response is back. + = - ... ]]> = - - "requestDelay" - attribute defines the time (in ms) that the request wi= ll be wait in the queue - before it is ready to send. When the delay time is over, the reque= st will be sent to the - server or removed if the newest "similar" request is in = a queue already . - - "ignoreDupResponses" - attribute orders to ignore the Ajax Response produced = by the request if the - newest "similar" request is in a queue already. - "ignoreDupResponses"=3D"true" does - not cancel the request while it is processed on the server, but ju= st allows to avoid - unnecessary updates on the client side if the response loses the a= ctuality. - Defining the - "eventsQueue" - along with - "requestDelay" - allows to protect against unnecessary traffic flood an= d synchronizes Ajax - requests order. If you have several sources of Ajax requests, you = can define the same queue - name there. This might be very helpful if you have Ajax components= that invoke request - asynchronously from the ones produced by events from users. For ex= ample, - <a4j:poll> - or - <a4j:push> - . In case the requests from such components modify the = same data, the - synchronization might be very helpful. + + + "requestDelay" + + 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 . + + + + "ignoreDupResponses" + + attribute orders to ignore the Ajax Response produced by + the request if the newest "similar" request is + in a queue already. + ignoreDupResponses"=3D"true" + does not cancel the request while it is processed on the + server, but just allows to avoid unnecessary updates on + the client side if the response loses the actuality. + + + Defining the + + "eventsQueue" + + along with + + "requestDelay" + + allows to protect against unnecessary traffic flood and + synchronizes Ajax requests order. If you have several + sources of Ajax requests, you can define the same queue + name there. This might be very helpful if you have Ajax + components that invoke request asynchronously from the + ones produced by events from users. For example, + + <a4j:poll> + + or + + <a4j:push> + + . In case the requests from such components modify the + same data, the synchronization might be very helpful. + = - More information can be found on the RichFaces Users Forum. + + More information can be found on the + + RichFaces Users Forum + + . + = - - "timeout" - attribute is used for setting response waiting time on= a particular request. If - a response is not received during this time, the request is aborte= d. -
+ + + "timeout" + + attribute is used for setting response waiting time on a + particular request. If a response is not received during + this time, the request is aborted. + +
= -
- - Data Processing Options - RichFaces uses form based approach for Ajax request sending. T= his means each time, when - you click an Ajax button or - <a4j:poll> - produces an asynchronous request, the data from the cl= osest JSF form is - submitted with the XMLHTTPRequest object. The form data contains t= he values from the form - input element and auxiliary information such as state saving data.= - When - "ajaxSingle" - attribute value is "true", it orders to - include only a value of the current component (along with - <f:param> - or - <a4j:action> - param values if any) to the request map. In case of - <a4j:support> - , it is a value of the parent component. An example is = placed below: +
+ + Data Processing Options + + RichFaces uses form based approach for Ajax request + sending. This means each time, when you click an Ajax + button or + + <a4j:poll> + + produces an asynchronous request, the data from the + closest JSF form is submitted with the XMLHTTPRequest + object. The form data contains the values from the form + input element and auxiliary information such as state + saving data. + + + When + + "ajaxSingle" + + attribute value is + "true" + , it orders to include only a value of the current + component (along with + + <f:param> + + or + + <a4j:action> + + param values if any) to the request map. In case of + + <a4j:support> + + , it is a value of the parent component. An example is + placed below: + = - @@ -373,172 +598,330 @@ ... ]]> - In this example the request contains only the input component = causes the request - generation, not all the components contained on a form, because of - "ajaxSingle"=3D"true" u= sage. - Note, that "ajaxSingle"=3D"true"= - reduces the upcoming traffic, but does not prevent decoding other = input components on the - server side. Some JSF components, such as - <h:selectOneMenu> - do recognize the missing data in the request map value= as a null value and try - to pass the validation process with a failed result. Thus, use - <a4j:region> - to limit a part of the component tree that will be pro= cessed on the server side - when it is required. - - "immediate" - attribute has the same purpose as any other non-JSF co= mponent. The default - "ActionListener" - should be executed immediately (i.e. during the Apply = Request Values phase of a - request processing lifecycle), rather than waiting until the Invok= e Application phase. Using - immediate=3D"true" is one of the = ways to have some - data model values updated when other cannot be updated because of = a problem with passing the - Validation phase successfully. This might be important inside the = - <h:dataTable> - like components where using - <a4j:region> - is impossible due to the - <h:dataTable> - component architecture. + + In this example the request contains only the input + component causes the request generation, not all the + components contained on a form, because of + ajaxSingle=3D"true" + usage. + + + Note, that + ajaxSingle=3D"true" + reduces the upcoming traffic, but does not prevent + decoding other input components on the server side. Some + JSF components, such as + + <h:selectOneMenu> + + do recognize the missing data in the request map value + as a null value and try to pass the validation process + with a failed result. Thus, use + + <a4j:region> + + to limit a part of the component tree that will be + processed on the server side when it is required. + + + + "immediate" + + attribute has the same purpose as any other non-JSF + component. The default + + "ActionListener" + + should be executed immediately (i.e. during the Apply + Request Values phase of a request processing lifecycle), + rather than waiting until the Invoke Application phase. + Using + immediate=3D"true" + is one of the ways to have some data model values + updated when other cannot be updated because of a + problem with passing the Validation phase successfully. + This might be important inside the + + <h:dataTable> + + like components where using + + <a4j:region> + + is impossible due to the + + <h:dataTable> + + component architecture. + = - - "bypassUpdates" - attribute allows to bypass the Update Model phase. It = might be useful if you - need to check your input against the available validator, but not = to update the model with - those data. Note, that an action will be invoked at the end of the= Validation phase only if - the Validation phase is passed successfully. The listeners of the = Application phase will not - be invoked in any case. -
+ + + "bypassUpdates" + + attribute allows to bypass the Update Model phase. It + might be useful if you need to check your input against + the available validator, but not to update the model + with those data. Note, that an action will be invoked at + the end of the Validation phase only if the Validation + phase is passed successfully. The listeners of the + Application phase will not be invoked in any case. + +
= -
- - Action and Navigation - Ajax component is similar to any other non-Ajax JSF component = like - <h:commandButton> - . It allows to submit the form. You can use - "action" - and - "actionListener" - attribute to invoke the action method and define the a= ction event. - - "action" - method must return null if you want to have an Ajax Re= sponse with a partual page - update. This is regular mode called "Ajax request generates Ajax R= esponse". In case of - action does not return null, but the action outcome that matches o= ne of navigation rules, - RichFaces starts to work in "Ajax request generates Non-Ajax Respo= nse" mode. This mode might - be helpful in two major cases: - - RichFaces allows to organize a page flow inside th= e - <a4j:include> - component. This is a typical scenario for Wizard lik= e behavior. The new - content is rendered inside the - <a4j:include> - area. The content is taken from the navigation rule = of the faces configuration - file (usually, the faces-config.xml). Note, that the content of = the "wizard" is not - isolated from the rest of the page. The included page should not= have own - <f:view> - (it does not matter if you use facelets). You need t= o have an Ajax component - inside the - <a4j:include> - to navigate between the wizard pages. Otherwize, the= whole page update will be - performed. - If you want to involve the server side validators = and navigate to the next page - only if the Validation phase is passed successfully, you can rep= lace - <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 you will s= ee an error message. - Otherwize, the application proceeds to the next page. Make sure,= you define - <redirect/> option for the navigation rule to avoid memory= leaks. - - -
+
+ + Action and Navigation + + Ajax component is similar to any other non-Ajax JSF + component like + + <h:commandButton> + + . It allows to submit the form. You can use + + "action" + + and + + "actionListener" + + attribute to invoke the action method and define the + action event. + + + + "action" + + method must return null if you want to have an Ajax + Response with a partual page update. This is regular + mode called "Ajax request generates Ajax Response". In + case of action does not return null, but the action + outcome that matches one of navigation rules, RichFaces + starts to work in "Ajax request generates Non-Ajax + Response" mode. This mode might be helpful in two major + cases: + + + + + RichFaces allows to organize a page flow inside + the + + <a4j:include> + + component. This is a typical scenario for Wizard + like behavior. The new content is rendered + inside the + + <a4j:include> + + area. The content is taken from the navigation + rule of the faces configuration file (usually, + the faces-config.xml). Note, that the content of + the "wizard" is not isolated from the rest of + the page. The included page should not have own + + <f:view> + + (it does not matter if you use facelets). You + need to have an Ajax component inside the + + <a4j:include> + + to navigate between the wizard pages. Otherwize, + the whole page update will be performed. + + + + + If you want to involve the server side + validators and navigate to the next page only if + 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 you will see + an error message. Otherwize, the application + proceeds to the next page. Make sure, you define + <redirect/> option for the navigation rule + to avoid memory leaks. + + + + +
= -
- - JavaScript Interactions - RichFaces allows writing Ajax-enabled JSF application without = writing any Javascript - code. However, you can still invoke the javascript code if you nee= d. There are several ajax - attributes that helps to do it. - - "onsubmit" - attribute allows to invoke JavaScript code before an A= jax request is sent. If - "onsubmit" - returns "false", the Aj= ax request is - canceled. The code of - "onsubmit" - is inserted before the RichFaces Ajax call. Hence, the= - "onsubmit" - should not has a "return" statement if you w= ant the Ajax - request to be sent. If you are going to invoke a JavaScript functi= on that returns - "true" or - "false", use the conditional statem= ent to return - something only when you need to cancel the request. For example: <= /para> - + + JavaScript Interactions + + RichFaces allows writing Ajax-enabled JSF application + without writing any Javascript code. However, you can + still invoke the javascript code if you need. There are + several ajax attributes that helps to do it. + + + + "onsubmit" + + attribute allows to invoke JavaScript code before an + Ajax request is sent. If + + "onsubmit" + + returns + "false" + , the Ajax request is canceled. The code of + + "onsubmit" + + is inserted before the RichFaces Ajax call. Hence, the + + "onsubmit" + + should not has a "return" statement if you + want the Ajax request to be sent. If you are going to + invoke a JavaScript function that returns + "true" + or + "false" + , use the conditional statement to return something only + when you need to cancel the request. For example: + + = - - "onclick" - attribute is similar to the - "onsubmit" - , but for clickable components such as - <a4j:commandLink> - and - <a4j:commandButton> - . If it returns "false",= the Ajax request - is canceled also. - - "oncomplete" - attribute allows to invoke the JavaScript code right a= fter the Ajax Response is - returned back and the DOM tree of the browser is updated. Richface= s registers the code for - further invocation of XMLHTTP request object before an Ajax reques= t is sent. This means the - code will not be changed during processing of the request on the s= erver if you use JSF EL - value binding. Also, you cannot use "this'" inside the c= ode, because it - will not point the component where Ajax request was initiated. + + + "onclick" + + attribute is similar to the + + "onsubmit" + + , but for clickable components such as + + <a4j:commandLink> + + and + + <a4j:commandButton> + + . If it returns + "false" + , the Ajax request is canceled also. + + + + "oncomplete" + + attribute allows to invoke the JavaScript code right + after the Ajax Response is returned back and the DOM + tree of the browser is updated. Richfaces registers the + code for further invocation of XMLHTTP request object + before an Ajax request is sent. This means the code will + not be changed during processing of the request on the + server if you use JSF EL value binding. Also, you cannot + use "this'" inside the code, because it will + not point the component where Ajax request was + initiated. + = - - "onbeforedomupdate" - attrubute defines JavaScript code for call after Ajax = response receiving and - before updating DOM on a client side. + + + "onbeforedomupdate" + + attrubute defines JavaScript code for call after Ajax + response receiving and before updating DOM on a client + side. + = - - "data" - attribute allows to get the additional data from the s= erver during an Ajax call. - You can use JSF EL to point the property of the managed bean and i= ts value will be - serialized in JSON format and be available on the client side. You= can refer to it using the - "data" - variable. For example: - + + "data" + + attribute allows to get the additional data from the + server during an Ajax call. You can use JSF EL to point + the property of the managed bean and its value will be + serialized in JSON format and be available on the client + side. You can refer to it using the + + "data" + + variable. For example: + + ... ]]> = - Richfaces allows to serialize not only primitive types into JS= ON format, but also - complex types including arrays and collections. The beans should b= e serializable to be - refered with - "data" - . - There is a number of useful functions which can be used in Jav= aScript: = - - rich:clientId('id') - returns client id by short i= d or null if the component with the id specified hasn't been found <= /listitem> - rich:element('id') - is a shortcut for document.ge= tElementById(#{rich:clientId('id')}) - rich:component('id') - is a shortcut for #{rich:cl= ientId('id')}.component - -
+ + 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 with + + "data" + + . + + + There is a number of useful functions which can be used + in JavaScript: + + + + + rich:clientId('id') + - returns client id by short id or null if the + component with the id specified hasn't been + found + + + + + rich:element('id') + - is a shortcut for + + document.getElementById(#{rich:clientId('id')}) + + + + + + rich:component('id') + - is a shortcut for + #{rich:clientId('id')}.component + + + +
= -
- - Iteration components Ajax attributes - - "ajaxKeys" - attribute defines strings that are updated after an Aj= ax request. It provides - possibility to update several child components separately without = updating the whole page. +
+ + Iteration components Ajax attributes + + + "ajaxKeys" + + attribute defines strings that are updated after an Ajax + request. It provides possibility to update several child + components separately without updating the whole page. + = - @@ -555,25 +938,36 @@ ... ]]> = - + = -
- - Other useful attributes - - "status" - attribute for Ajax components (such as - <a4j:commandButton> - , - <a4j:poll> - , etc.) points to an ID of - <a4j:status> - component. Use this attribute if you want to share - <a4j:status> - component between different Ajax components from diffe= rent regions. The - following example shows it. +
+ + Other useful attributes + + + "status" + + attribute for Ajax components (such as + + <a4j:commandButton> + + , + + <a4j:poll> + + , etc.) points to an ID of + + <a4j:status> + + component. Use this attribute if you want to share + + <a4j:status> + + component between different Ajax components from + different regions. The following example shows it. + = - @@ -604,194 +998,324 @@ ... ]]> = - In the example - <a4j:support> - and - <a4j:commandButton> - are defined in different regions. Values of - "status" - attribute for these components points to an ID of - <a4j:support> - .Thus, the - <a4j:support> - component is shared between two components from differ= ent regions. + + In the example + + <a4j:support> + + and + + <a4j:commandButton> + + are defined in different regions. Values of + + "status" + + attribute for these components points to an ID of + + <a4j:support> + + .Thus, the + + <a4j:support> + + component is shared between two components from + different regions. + = - More information could be found here. + + More information could be found + + here + + . + = - Other useful attribute is - "focus" - . It points to an ID of a component where focus will be= set after an Ajax - request. + + Other useful attribute is + + "focus" + + . It points to an ID of a component where focus will be + set after an Ajax request. + = -
+
= - + = -
- - How To... -
- - Send an Ajax request - There are different ways to send Ajax requests from your JSF p= age. For example you can - use - <a4j:commandButton> - , - <a4j:commandLink>, - <a4j:poll> - - or - <a4j:support> - tags or any other. - All these tags hide the usual JavaScript activities that are r= equired for an - XMHttpRequest object building and an Ajax request sending. Also, t= hey allow you to decide - which components of your JSF page are to be re-rendered as a resul= t of the Ajax response - (you can list the IDs of these components in the "reRender&qu= ot; attribute). - - - <a4j:commandButton> - and - <a4j:commandLink> - tags are used to send an Ajax request on "onclick= " JavaScript - event. - - - <a4j:poll> - tag is used to send an Ajax request periodically using= a timer. - The - <a4j:support> - tag allows you to add Ajax functionality to standard J= SF components and send - Ajax request onto a chosen JavaScript event: "onkeyup", - "onmouseover", etc. - = - - - "timeout" - attribute is used for response waiting time on a part= icular request. If a - response is not received during this time, the request is aborte= d. = - - - "ignoreDupResponses" - is used to abort unfinished request on new event. - - = - = -
+
= = = -
- - Decide What to Send - You may describe a region on the page you wish to send to the = server, in this way you - can control what part of the JSF View is decoded on the server sid= e when you send an Ajax - request. - The easiest way to describe an Ajax region on your JSF page is= to do nothing, because - the content between the - <f:view> - and - </f:view> - tags is considered the default Ajax region. - You may define multiple Ajax regions on the JSF page (they can= even be nested) by using - the - <a4j:region> - tag. - If you wish to render the content of an Ajax response outside = of the active region then - the value of the "renderRegionOnly" attribute should be = set to - "false" ("false" is default value). Otherwise,= your Ajax - updates are limited to elements of the active region. -
+
+ + Decide What to Send + + You may describe a region on the page you wish to send + to the server, in this way you can control what part of + the JSF View is decoded on the server side when you send + an Ajax request. + + + The easiest way to describe an Ajax region on your JSF + page is to do nothing, because the content between the + + <f:view> + + and + + </f:view> + + tags is considered the default Ajax region. + + + You may define multiple Ajax regions on the JSF page + (they can even be nested) by using the + + <a4j:region> + + tag. + + + If you wish to render the content of an Ajax response + outside of the active region then the value of the + "renderRegionOnly" attribute should be set to + "false" ("false" is default value). + Otherwise, your Ajax updates are limited to elements of + the active region. + +
= = -
- - Decide What to Change - Using IDs in the "reRender" attribute to define &quo= t;AJAX - zones" for update works fine in many cases. - But you can not use this approach if your page contains, e.g. = a - <f:verbatim> - tag and you wish to update its content on an Ajax resp= onse. - The problem with the - <f:verbatim/> - tag as described above is related to the value of the = transientFlag of JSF - components. If the value of this flag is true, the component must = not participate in state - saving or restoring of process. - In order to provide a solution to this kind of problems, RichF= aces uses the concept of - an output panel that is defined by the - <a4j:outputPanel> - tag. If you put a - <f:verbatim> - tag inside of the output panel, then the content of th= e - <f:verbatim/> - tag and content of other panel's child tags could= be updated on Ajax - response. There are two ways to control this: - By setting the "ajaxRendered" attribu= te value to - "true". - By setting the "reRender" attribute v= alue of an Action - Component to the output panel ID. - - -
-
- Decide what to process - - In order to process defined components you could use the "process" - attribute. - - The "process" attribute defines the ids of the components to be processed = - together with the component which contains this attribute. In or= der to define processed components you could set theirs ids into the value = of the - "process" at= tribute. - - The "process" attribute has two limitations: - - - it works only if "ajaxSingle" equals to "true" for given command component - - - you do not have to point this attribute to one of the own pare= nt components to avoid processing of command component twice - - - Example: - + + Decide What to Change + + Using IDs in the "reRender" attribute to + define "AJAX zones" for update works fine in + many cases. + + + But you can not use this approach if your page contains, + e.g. a + + <f:verbatim> + + tag and you wish to update its content on an Ajax + response. + + + The problem with the + + <f:verbatim/> + + tag as described above is related to the value of the + transientFlag of JSF components. If the value of this + flag is true, the component must not participate in + state saving or restoring of process. + + + In order to provide a solution to this kind of problems, + RichFaces uses the concept of an output panel that is + defined by the + + <a4j:outputPanel> + + tag. If you put a + + <f:verbatim> + + tag inside of the output panel, then the content of the + + <f:verbatim/> + + tag and content of other panel's child tags could + be updated on Ajax response. There are two ways to + control this: + + + + By setting the "ajaxRendered" + attribute value to "true". + + + + + By setting the "reRender" + attribute value of an Action Component to + the output panel ID. + + + + +
+
+ Decide what to process + + In order to process defined components you could use the + + "process" + + attribute. + + + The + + "process" + + attribute defines the ids of the components to be + processed together with the component which contains + this attribute. In order to define processed components + you could set theirs ids into the value of the + + "process" + + attribute. + + + The + + "process" + + attribute has two limitations: + + + + + it works only if + + "ajaxSingle" + + equals to "true" for given command component + + + + + you do not have to point this attribute to one + of the own parent components to avoid processing + of command component twice + + + + + Example: + +
@@ -803,31 +1327,62 @@
...]]> - - In the example above after you click on the <a4j:commandButton> = - only <= h:inputText> with "oneB" id is processed and enter= ed data appears into the <h:outputText= > with "three2" id. - If you doesn't use this attribute both <h:inputText> is = processed and entered data appears into the both <h:outputText>. - -
- - = + + In the example above after you click on the + + <a4j:commandButton> + + only + + <h:inputText> + + with + "oneB" + id is processed and entered data appears into the + + <h:outputText> + + with + "three2" + id. If you doesn't use this attribute + both + + <h:inputText> + + is processed and entered data appears into the + both + + <h:outputText> + + . + + + = -
- - Filter Configuration - RichFaces uses a filter for a correction of code received on an = Ajax request. In case of a - "regular" JSF request a browser makes correction independe= ntly. In case of - Ajax request in order to prevent layout destruction it's needed= to use a filter, - because a received code could differ from a code validated by a brow= ser and a browser doesn't - make any corrections. = - An example of how to set a Filter in a web.xml file of your appl= ication is placed below. +
+ + Filter Configuration + + RichFaces uses a filter for a correction of code received on + an Ajax request. In case of a "regular" JSF + request a browser makes correction independently. In case of + Ajax request in order to prevent layout destruction + it's needed to use a filter, because a received code + could differ from a code validated by a browser and a + browser doesn't make any corrections. + = - - Example: - + + An example of how to set a Filter in a web.xml file of your + application is placed below. + = - + Example: + + + RichFaces Filter richfaces @@ -836,53 +1391,70 @@ ... ]]> = - - Note:Fast Filter is deprecated and available on= ly for backward compatibility - with previous RichFaces versions. Fast Filter usage isn't recom= ended, because there - is another way to use its functionality by means of Neko filter - type. + + Note: + + Fast Filter is deprecated and available only for + backward compatibility with previous RichFaces versions. + Fast Filter usage isn't recomended, because there + is another way to use its functionality by means of + Neko filter type + . + + = - In RichFaces 3.2 filter configuration becomes more flexible. It&= apos;s possible to - configure different filters for different sets of pages for the same= application. + + In RichFaces 3.2 filter configuration becomes more flexible. + It's possible to configure different filters for + different sets of pages for the same application. + = - The possible filter types are: + The possible filter types are: = - - - TIDY - - + + + TIDY + + = - "TIDY" filter type based on the Tidy parser. This filt= er is recommended - for applications with complicated or non-standard markup when all ne= cessary code corrections - are made by the filter when a response comes from the server. + + "TIDY" filter type based on the Tidy parser. This + filter is recommended for applications with complicated or + non-standard markup when all necessary code corrections are + made by the filter when a response comes from the server. + = - - - NEKO - - + + + NEKO + + = - "NEKO" filter type corresponds to the former "Fast - Filter" and it's based on the Neko parser. In case of usin= g this filter code - isn't strictly verified. Use this one if you are sure that your= application markup is - really strict for this filter. Otherwise it could cause lot's o= f errors and corrupt a - layout as a result. This filter considerably accelerates all Ajax re= quests processing. + + "NEKO" filter type corresponds to the former + "Fast Filter" and it's based on the Neko + parser. In case of using this filter code isn't + strictly verified. Use this one if you are sure that your + application markup is really strict for this filter. + Otherwise it could cause lot's of errors and corrupt a + layout as a result. This filter considerably accelerates all + Ajax requests processing. + = - - - NONE - - + + + NONE + + = - No correction. + No correction. = - An example of configuration is placed below. - - Example: - + An example of configuration is placed below. + + Example: + = - org.ajax4jsf.xmlparser.ORDER NONE,NEKO,TIDY @@ -914,806 +1486,1202 @@ ... ]]> = - The example shows that ORDER parameter defines the order in whic= h particular filter types - are used for pages code correction. - First of all "NONE" type is specified for the filter.= Then two - different sets of pages are defined for which two filter types (NONE= and NEKO) are used - correspondingly. If a page relates to the first set that is defined = in the following way: + + The example shows that ORDER parameter defines the order in + which particular filter types are used for pages code + correction. + + + First of all "NONE" type is specified for the + filter. Then two different sets of pages are defined for + which two filter types (NONE and NEKO) are used + correspondingly. If a page relates to the first set that is + defined in the following way: + = - /pages/performance\= .xhtml,/pages/default.*\.xhtml, + /pages/performance\.x= html,/pages/default.*\.xhtml, ]]> = - it's not corrected, because filter type for this page is d= efined as - "NONE". If a page is not from the first set, then "NE= KO" - type is set. - If a page relates to the second set that is defined in the follo= wing way: + + it's not corrected, because filter type for this page + is defined as "NONE". If a page is not from the + first set, then "NEKO" type is set. + + + If a page relates to the second set that is defined in the + following way: + = - /pages/repeat\.xhtm= l, + /pages/repeat\.xhtml<= /param-value>, ]]> = - then "NEKO" filter type is used for correction. If it&= apos;s not - related to the second set, "TIDY" type is set for the filt= er - ("TIDY" filter type is used for code correction). + + then "NEKO" filter type is used for correction. If + it's not related to the second set, "TIDY" + type is set for the filter ("TIDY" filter type is + used for code correction). + = -
-
- - Scripts and Styles Load Strategy - Before the version 3.1.3, RichFaces loaded styles and script on = demand. I.e. files are - loaded only if they are required on a particular page. Since RichFac= es 3.1.3, it's - possible to manage how the RichFaces script and style files are load= ed to application. - - org.richfaces.LoadScriptStrategy - - The following declaration in your web.xml allows loading the int= egrated script files. - +
+ + Scripts and Styles Load Strategy + + Before the version 3.1.3, RichFaces loaded styles and script + on demand. I.e. files are loaded only if they are required + on a particular page. Since RichFaces 3.1.3, it's + possible to manage how the RichFaces script and style files + are loaded to application. + + + org.richfaces.LoadScriptStrategy + + + The following declaration in your web.xml allows loading the + integrated script files. + + org.richfaces.LoadScriptStrategy ALL = ... ]]> - If you do not declare the org.richfaces.LoadScriptStra= tegy in the - web.xml, it equals to: - + If you do not declare the + org.richfaces.LoadScriptStrategy + in the web.xml, it equals to: + + org.richfaces.LoadScriptStrategy DEFAULT = ... ]]> - The third possible value is "NONE". You have no a spec= ial reason to - use it unless you obtain the newest (or modified) version of the scr= ipt and want to include - it manually in a page header. - = - - Note: - - If you use ALL value of Scripts Load Strategy= , the JavaScript files compression turns off! - - - - = - - org.richfaces.LoadStyleStrategy - - = - The following declaration allows to load only one integrated st= yle sheet file. - + The third possible value is "NONE". You have no a + special reason to use it unless you obtain the newest (or + modified) version of the script and want to include it + manually in a page header. + + + + Note: + + If you use + ALL + value of Scripts Load Strategy, the JavaScript files + compression turns off! + + + + + + org.richfaces.LoadStyleStrategy + + + + The following declaration allows to load only one integrated + style sheet file. + + org.richfaces.LoadStyleStrategy ALL ... ]]> - The integrated style sheet contains style for all shipped compon= ents. The skinnability - feature still works. - The "DEFAULT" value is a classical on-demand variant. = - The "NONE" stops loading the styles at all. The earlie= r introduced - plain skin resets all color and font parameters to null. The "N= ONE" value - for org.richfaces.LoadStyleStrategy means that = predefined styles for - RichFaces are not used. - For more information see RichFaces User Forum. -
+ + The integrated style sheet contains style for all shipped + components. The skinnability feature still works. + + + The "DEFAULT" value is a classical on-demand + variant. + + + The "NONE" stops loading the styles at all. The + earlier introduced plain skin resets all color and font + parameters to null. The "NONE" value for + org.richfaces.LoadStyleStrategy + means that predefined styles for RichFaces are not used. + + + For more information see + + RichFaces User Forum + + . + +
= -
- - Request Errors and Session Expiration Handling - RichFaces allows to redefine standard handlers responsible for p= rocessing of different - exceptional situations. It helps to define own JavaScript, which is = executed when these - situations occur. -
- - Request Errors Handling - To execute your own code on the client in case of an error dur= ing Ajax request, - it's necessary to redefine the standard "A4J.AJAX.onErro= r" - method: - + + Request Errors and Session Expiration Handling + + RichFaces allows to redefine standard handlers responsible + for processing of different exceptional situations. It helps + to define own JavaScript, which is executed when these + situations occur. + +
+ + Request Errors Handling + + To execute your own code on the client in case of an + error during Ajax request, it's necessary to + redefine the standard + "A4J.AJAX.onError" + method: + + - The function defined this way accepts as parameters: - - req - a params string of a request that calls an e= rror - status - the number of an error returned by the se= rver - message - a default message for the given error - - Thus, it's possible to create your own handler that is ca= lled on timeouts, - inner server errors, and etc. -
-
- - Session Expired Handling - It's possible to redefine also the - "onExpired" - framework method that is called on the - "Session Expiration" - event. + + The function defined this way accepts as parameters: + + + + + req + - a params string of a request that calls an + error + + + + + status + - the number of an error returned by the server + + + + + message + - a default message for the given error + + + + + Thus, it's possible to create your own handler that + is called on timeouts, inner server errors, and etc. + +
+
+ + Session Expired Handling + + It's possible to redefine also the + + "onExpired" + + framework method that is called on the + + "Session Expiration" + + event. + = - - Example: - + + Example: + = - = - Here the function receives in params: - - loc - URL of the current page (on demand can be up= dated) - expiredMsg - a default message on - "Session Expiration" - event. - - -
-
+ Here the function receives in params: + + + + + loc + - URL of the current page (on demand can be + updated) + + + + + + expiredMsg + - a default message on + + + "Session Expiration" + + + event. + + + + +
+
= = = -
- - Skinnability +
+ + Skinnability = -
- - Why Skinnability +
+ + Why Skinnability = - If you have a look at a CSS file in an enterprise application,= for example, the one - you're working on now, you'll see how often the same col= or is noted in it. - Standard CSS has no way to define a particular color abstractly fo= r defining as a panel - header color, a background color of an active pop-up menu item, a = separator color, etc. To - define common interface styles, you have to copy the same values o= ver and over again and the - more interface elements you have the more copy-and-paste activity = that needs to be - performed. + + If you have a look at a CSS file in an enterprise + application, for example, the one you're working on + now, you'll see how often the same color is noted + in it. Standard CSS has no way to define a particular + color abstractly for defining as a panel header color, a + background color of an active pop-up menu item, a + separator color, etc. To define common interface styles, + you have to copy the same values over and over again and + the more interface elements you have the more + copy-and-paste activity that needs to be performed. + = - Hence, if you want to change the application palette, you have= to change all - interrelating values, otherwise your interface can appear a bit cl= umsy. The chances of such - an interface coming about is very high, as CSS editing usually bec= omes the duty of a general - developer who doesn't necessarily have much knowledge of user= interface design. + + Hence, if you want to change the application palette, + you have to change all interrelating values, otherwise + your interface can appear a bit clumsy. The chances of + such an interface coming about is very high, as CSS + editing usually becomes the duty of a general developer + who doesn't necessarily have much knowledge of user + interface design. + = - Moreover, if a customer wishes to have an interface look-and-f= eel that can be adjusted - on-the-fly by an end user, your work is multiplied, as you have to= deal with several CSS - files variants, each of which contains the same values repeated nu= merous times. + + Moreover, if a customer wishes to have an interface + look-and-feel that can be adjusted on-the-fly by an end + user, your work is multiplied, as you have to deal with + several CSS files variants, each of which contains the + same values repeated numerous times. + = - These problems can be solved with the skinnability system built - into theRichFaces project and realized fully in RichFaces. Every n= amed skin has some - skin-parameters for the definition of a palette and the other para= meters of the user - interface. By changing just a few parameters, you can alter the ap= pearance of dozens of - components in an application in a synchronized fashion without mes= sing up user interface - consistency. + + These problems can be solved with the + skinnability + system built into theRichFaces project and realized + fully in RichFaces. Every named skin has some + skin-parameters for the definition of a palette and the + other parameters of the user interface. By changing just + a few parameters, you can alter the appearance of dozens + of components in an application in a synchronized + fashion without messing up user interface consistency. + = - The skinnability feature can't compl= etely replace standard - CSS and certainly doesn't eliminate its usage. Skin= nability is - a high-level extension of standard CSS, which can be used together= with regular CSS - declarations. You can also refer to skin parameters in CSS via JSF= Expression Language. You - have the complete ability to synchronize the appearance of all the= elements in your - pages. -
+ + The + skinnability + feature can't completely replace standard CSS and + certainly doesn't eliminate its usage. + Skinnability + is a high-level extension of standard CSS, which can be + used together with regular CSS declarations. You can + also refer to skin parameters in CSS via JSF Expression + Language. You have the complete ability to synchronize + the appearance of all the elements in your pages. + +
= -
- - Using Skinnability +
+ + Using Skinnability = - RichFaces skinnability is designed for mi= xed usage with: + + RichFaces + skinnability + is designed for mixed usage with: + = - - - Skin parameters defined in the RichFaces framework - + + + + Skin parameters defined in the RichFaces + framework + + = - - Predefined CSS classes for components - + + Predefined CSS classes for components + = - - User style classes - - + + User style classes + + = - The color scheme of the component can be applied to its elemen= ts using any of three - style classes: + + The color scheme of the component can be applied to its + elements using any of three style classes: + = - - - A default style class inserted into the framework + + + + A default style class inserted into the + framework + = - This contains style parameters linked to some constants fr= om a skin. It is defined - for every component and specifies a default representation lev= el. Thus, an application - interface could be modified by changing the values of skin par= ameters. - + + This contains style parameters linked to some + constants from a skin. It is defined for every + component and specifies a default representation + level. Thus, an application interface could be + modified by changing the values of skin + parameters. + + = - - A style class of skin extension + + A style class of skin extension = - This class name is defined for every component element and= inserted into the - framework to allow defining a class with the same name into it= s CSS files. Hence, the - appearance of all components that use this class is extended.<= /para> - + + This class name is defined for every component + element and inserted into the framework to allow + defining a class with the same name into its CSS + files. Hence, the appearance of all components + that use this class is extended. + + = - - User style class + + User style class = - It's possible to use one of the styleClass parameters= for component - elements and define your own class in it. As a result, the app= earance of one particular - component is changed according to a CSS style parameter specif= ied in the class. - - -
+ + It's possible to use one of the styleClass + parameters for component elements and define + your own class in it. As a result, the + appearance of one particular component is + changed according to a CSS style parameter + specified in the class. + + + +
= -
- Example +
+ Example = - Here is a simple panel component: + Here is a simple panel component: = = - - Example: - - <rich:panel> -... -</rich:panel> + + Example: + + + <rich:panel> ... </rich:panel> + = - The code generates a panel component on a page, which consists= of two elements: a - wrapper - <div> - element and a - <div> - element for the panel body with the particular style p= roperties. The wrapper - - <div> - element looks like: + + The code generates a panel component on a page, which + consists of two elements: a wrapper + + <div> + + element and a + + <div> + + element for the panel body with the particular style + properties. The wrapper + + <div> + + element looks like: + = = - - Example: - - <div class=3D"dr-pnl rich-panel"> -... -</div> + + Example: + + + <div class=3D"dr-pnl rich-panel"> ... </div> + = - dr-pnl is a CSS class specified in the framework via skin para= meters: + + dr-pnl is a CSS class specified in the framework via + skin parameters: + = - - - background-color is defined with - generalBackgroundColor - + + + + background-color + is defined with + generalBackgroundColor + + = - - border-color is defined with - panelBorderColor - - + + + border-color + is defined with + panelBorderColor + + + = - It's possible to change all colors for all panels on all = pages by changing - these skin parameters. + + It's possible to change all colors for all panels + on all pages by changing these skin parameters. + = - However, if a - <rich-panel> - class is specified somewhere on the page, its paramete= rs are also acquired by - all panels on this page. + + However, if a + + <rich-panel> + + class is specified somewhere on the page, its parameters + are also acquired by all panels on this page. + = - A developer may also change the style properties for a particu= lar panel. The following - definition: + + A developer may also change the style properties for a + particular panel. The following definition: + = = - - Example: - - <rich:panel styleClass=3D"customClas= s"> -... -</rich:panel> + + Example: + + + <rich:panel styleClass=3D"customClass"> ... + </rich:panel> + = - could add some style properties from customClass to one partic= ular panel, as a result we - get three styles: + + Could add some style properties from customClass to one + particular panel, as a result we get three styles: + = = - - Example: - - <div class=3D"dr_pnl rich-panel cust= omClass"> -... -</div> -
+ + Example: + + + <div class=3D"dr_pnl rich-panel customClass"> ... + </div> + +
= -
- +
+ = - Skin Parameters Tables in RichFaces + Skin Parameters Tables in RichFaces = - RichFaces provides eight predefined skin parameters (skins) at= the simplest level of - common customization: + + RichFaces provides eight predefined skin parameters + (skins) at the simplest level of common customization: + = - - DEFAULT + + + DEFAULT + = - plain + + plain + = - emeraldTown + + emeraldTown + = - blueSky + + blueSky + = - wine + + wine + = - japanCherry + + japanCherry + = - ruby + + ruby + = - classic + + classic + = - deepMarine - + + deepMarine + + = - To plug one in, it's necessary to specify a skin name in = the - "org.richfaces.SKIN" - context-param. + + To plug one in, it's necessary to specify a skin + name in the + + org.richfaces.SKIN + + context-param. + = - Here is an example of a table with values for one of the main = skins, - "blueSky". + + Here is an example of a table with values for one of the + main skins, + "blueSky" + . + = -
- Colors +
+ Colors = - - - - Parameter name + + + + Parameter name = - Default value - - + Default value + + = - - - headerBackgroundColor + + + headerBackgroundColor = - #BED6F8 - + #BED6F8 + = - - headerGradientColor + + headerGradientColor = - #F2F7FF - + #F2F7FF + = - - headTextColor + + headTextColor = - #000000 - + #000000 + = - - headerWeightFont + + headerWeightFont = - bold - + bold + = - - generalBackgroundColor + + generalBackgroundColor = - #FFFFFF - + #FFFFFF + = - - generalTextColor + + generalTextColor = - #000000 - + #000000 + = - - generalSizeFont + + generalSizeFont = - 11px - + 11px + = - - generalFamilyFont + + generalFamilyFont = - Arial, Verdana, sans-serif - + Arial, Verdana, sans-serif + = - - controlTextColor + + controlTextColor = - #000000 - + #000000 + = - - controlBackgroundColor + + controlBackgroundColor = - #ffffff - + #ffffff + = - - additionalBackgroundColor + + additionalBackgroundColor = - #ECF4FE - + #ECF4FE + = - - shadowBackgroundColor + + shadowBackgroundColor = - #000000 - + #000000 + = - - shadowOpacity + + shadowOpacity = - 1 - + 1 + = - - panelBorderColor + + panelBorderColor = - #BED6F8 - + #BED6F8 + = - - subBorderColor + + subBorderColor = - #ffffff - + #ffffff + = - - tabBackgroundColor + + tabBackgroundColor = - #C6DEFF - + #C6DEFF + = - - tabDisabledTextColor + + tabDisabledTextColor = - #8DB7F3 - + #8DB7F3 + = - - trimColor + + trimColor = - #D6E6FB - + #D6E6FB + = - - tipBackgroundColor + + tipBackgroundColor = - #FAE6B0 - + #FAE6B0 + = - - tipBorderColor + + tipBorderColor = - #E5973E - + #E5973E + = - - selectControlColor + + selectControlColor = - #E79A00 - + #E79A00 + = - - generalLinkColor + + generalLinkColor = - #0078D0 - + #0078D0 + = - - hoverLinkColor + + hoverLinkColor = - #0090FF - + #0090FF + = - - visitedLinkColor + + visitedLinkColor = - #0090FF - - - -
+ #0090FF + + + + = - - Fonts +
+ Fonts = - - - - Parameter name + + + + Parameter name = - Default value - - + Default value + + = - - - headerSizeFont + + + headerSizeFont = - 11px - + 11px + = - - headerFamilyFont + + headerFamilyFont = - Arial, Verdana, sans-serif - + Arial, Verdana, sans-serif + = - - tabSizeFont + + tabSizeFont = - 11px - + 11px + = - - tabFamilyFont + + tabFamilyFont = - Arial, Verdana, sans-serif - + Arial, Verdana, sans-serif + = - - buttonSizeFont + + buttonSizeFont = - 11px - + 11px + = - - buttonFamilyFont + + buttonFamilyFont = - Arial, Verdana, sans-serif - + Arial, Verdana, sans-serif + = - - tableBackgroundColor + + tableBackgroundColor = - #FFFFFF - + #FFFFFF + = - - tableFooterBackgroundColor + + tableFooterBackgroundColor = - #cccccc - + #cccccc + = - - tableSubfooterBackgroundColor + + tableSubfooterBackgroundColor = - #f1f1f1 - + #f1f1f1 + = - - tableBorderColor + + tableBorderColor = - #C0C0C0 - - - -
+ #C0C0C0 + + + + = - Skin "plain" was added from 3.0.2 version. It doesn't have an= y parameters. It's - necessary for embedding RichFaces components into existing projecs= t which have its own - styles. + + Skin "plain" was added from 3.0.2 version. It doesn't + have any parameters. It's necessary for embedding + RichFaces components into existing projecst which have + its own styles. + = - To get detailed information on particular parameter possibilit= ies, see the chapter where each= component has skin - parameters described corresponding to its elements. -
+ + To get detailed information on particular parameter + possibilities, see the + + chapter + + where each component has skin parameters described + corresponding to its elements. + +
= -
- - Creating and Using Your Own Skin File +
+ + Creating and Using Your Own Skin File = - In order to create your own skin file, do the following: + + In order to create your own skin file, do the following: + = - - - Create a file and define in it skin constants which are us= ed by style classes (see - section &quo= t;Skin Parameters Tables - in RichFaces"). The name of skin file should cor= respond to the - following format: <name>.skin.properties. As an - example of such file you can see RichFaces predefined skin par= ameters (skins): blueSky, - classic, deepMarine, etc. These files are located in the richf= aces-impl-xxxxx.jar inside - the /META-INF/skins folder. - + + + + Create a file and define in it skin constants + which are used by style classes (see section + + "Skin Parameters Tables in + RichFaces" + + ). The name of skin file should correspond to + the following format: + <name>.skin.properties + . As an example of such file you can see + RichFaces predefined skin parameters (skins): + blueSky, classic, deepMarine, etc. These files + are located in the + richfaces-impl-xxxxx.jar + inside the /META-INF/skins folder. + + = - - Add a skin definition <contex-param> to the web.xml = of your - application. An example is placed below: - - Example: - - + + Add a skin definition <contex-param> to + the web.xml of your application. An example is + placed below: + + + Example: + + = org.richfaces.SKIN = name = ... ]]> - + = - - Put your <name>.skin.properties= file in one of - the following classpath elements: META-INF/skins/ or classpath= folder (e.g. - WEB-INF/classes). - - -
-
- Built-in skinnability in RichFaces - RichFaces gives an opportunity to incorporate skinna= bility into UI - design. With this framework you can easily use named skin paramete= rs in properties files to - control the appearance of the skins that are applied consistently = to a whole set of - components. You can look at examples of predefined skins at: - - - http://livedemo.exadel.com/richfaces-demo/ - - - You may simply control the look-and-feel of your application = by using the - skinnability service of the RichFaces frame= work. With the means of - this service you can define the same style for rendering standard = JSF components and custom - JSF components built with the help of RichFaces. - To find out more on skinnability possibil= ities, follow these steps: - - Create a custom render kit and register it in the= faces-config.xml like this: + + + Put your + <name>.skin.properties + file in one of the following classpath elements: + META-INF/skins/ or classpath folder (e.g. + WEB-INF/classes). + + + +
+
+ Built-in skinnability in RichFaces + + RichFaces gives an opportunity to incorporate + skinnability + into UI design. With this framework you can easily use + named skin parameters in properties files to control the + appearance of the skins that are applied consistently to + a whole set of components. You can look at examples of + predefined skins at: + + + + + http://livedemo.exadel.com/richfaces-demo/ + + + + + You may simply control the look-and-feel of your + application by using the + skinnability + service of the RichFaces framework. With the means of + this service you can define the same style for rendering + standard JSF components and custom JSF components built + with the help of RichFaces. + + + To find out more on + skinnability + possibilities, follow these steps: + + + + + Create a custom render kit and register it in + the faces-config.xml like this: + + NEW_SKIN = org.ajax4jsf.framework.renderer.ChameleonRenderKitImpl ]]> - - Then you need to create and register custom rende= rers for the component based on - the look-and-feel predefined variables: + + + + Then you need to create and register custom + renderers for the component based on the + look-and-feel predefined variables: + + javax.faces.Command = javax.faces.Link = newskin.HtmlCommandLinkRenderer = ]]> - - Finally, you need to place a properties file with= skin parameters into the class - path root. There are two requirements for the properties file: <= /para> - The file must be named - <skinName> - .skin.properties, in this case, it would be called - newskin.skin.properties. - The first line in this file should be render.= kit=3D <render-kit-id>, = in this case, it - would be called render.kit=3DNEW_SKIN. - - - - Extra information on custom renderers creation can be found at= : - - - http://java.sun.com/javaee/javaserverfaces/reference/docs/ind= ex.html - - -
- = -
- Standard controls skinning - The feature is designed to unify the look and feel of standard= HTML element and RichFaces components. = - Skinning can be applied to all controls on a page basing on elemen= ts' = - name and attribute type (where applicable). Also this feature - provides a set of CSS styles so that skinning can be applied = - assigning rich-* classes to particular elements or to container of= elements that nests controls. - = - = - = - - Standard controls skinning feature provides 2 levels of skinning -= standard and extended, while skinning is based on detecting browser user a= gent. If user agent is not detected, Advanced level is used. - = - - - - Standard provides = customization only basic style properties. = - - - To the following browsers Basic level of skinning is applied: - = - - Internet Explorer 6 - Internet Explorer 7 in BackCompat mode (s= ee document.compatMode property in MSDN) - Opera - Safari - = - - = - - - = - Extended extends= basic level introducing broader = - number of style properties and is applied to browsers with r= ich visual styling capability of controls - - - The following browsers support Advanced level of skinning: = - = - - Mozilla Firefox - Internet Explorer 7 in Standards-compliant mode = (CSS1Compat mode) - - = - - = - = - = - - = - These are the elements that affected by skinning: - - - input - select - textarea - keygen - isindex - legend - fieldset - hr - a (together with a:hover, a:visited &qu= ot;pseudo"-elements) + + + + Finally, you need to place a properties file + with skin parameters into the class path root. + There are two requirements for the properties + file: + + + + + The file must be named + + + <skinName> + + + .skin.properties, in this case, it would + be called + newskin.skin.properties + . + + + + + The first line in this file should be + + render.kit=3D <render-kit-id> + + in this case, it would be called + render.kit=3DNEW_SKIN + . + + + + + + + Extra information on custom renderers creation can be + found at: + + + + + http://java.sun.com/javaee/javaserverfaces/reference/docs/index.html + + + +
= - - = +
+ Standard controls skinning + + The feature is designed to unify the look and feel of + standard HTML element and RichFaces components. Skinning + can be applied to all controls on a page basing on + elements' name and attribute type (where + applicable). Also this feature provides a set of CSS + styles so that skinning can be applied assigning rich-* + classes to particular elements or to container of + elements that nests controls. + = - Skinning can be initialized in two ways: = - - - - adding org.richfaces.CONTROL_SKINNING parmeter to web.xml. Va= lues: "enable" and "disable". - This way implies that skinning style classes are applied to element= s by element name and type attribute (where applicable). No additional step= s required from an application developer. = - Please find below the table that contains the list of element to w= hich skinning a applicable. - - - - - adding org.richfaces.CONTROL_SKINNING_CLASSES parameter to web= .xml file. Possible values "enable" and "disable". - Implementation of this method implies the provision of several styl= e classes for different types of elements. = - The style classes have predefined names. Application developer shou= ld manually assign classes to controls that needs skinning or assign class = to an element that contains controls. = - - - = - = - - By setting org.richfaces.CONTROL_SKINNING_CLASSES to "enable&q= uot; you are provided with style classes applicable to: - - = - - - - Basic elements nested inside element having rich-container clas= s, e.g.: - - - Example: - - + Standard controls skinning feature provides 2 levels of + skinning - standard and extended, while skinning is + based on detecting browser user agent. If user agent is + not detected, Advanced level is used. + + + + + + Standard + + provides customization only basic style + properties. + + + To the following browsers Basic level of + skinning is applied: + + + + Internet Explorer 6 + + + + Internet Explorer 7 in BackCompat mode + (see + + document.compatMode property in MSDN + + ) + + + + Opera + + + Safari + + + + + + + + + Extended + + extends basic level introducing broader number + of style properties and is applied to browsers + with rich visual styling capability of controls + + + The following browsers support Advanced level of + skinning: + + + + Mozilla Firefox + + + + Internet Explorer 7 in + Standards-compliant mode (CSS1Compat + mode) + + + + + + + + + + + These are the elements that affected by skinning: + + + + + input + + + + + select + + + + + textarea + + + + + keygen + + + + + isindex + + + + + legend + + + + + fieldset + + + + + hr + + + + + + a (together with a:hover, a:visited + "pseudo"-elements) + + + + + + + + Skinning can be initialized in two ways: + + + + adding + org.richfaces.CONTROL_SKINNING + parmeter to web.xml. Values: "enable" + and "disable". This way implies that + skinning style classes are applied to elements + by element name and type attribute (where + applicable). No additional steps required from + an application developer. Please find below the + table that contains the list of element to which + skinning a applicable. + + + + + adding + + org.richfaces.CONTROL_SKINNING_CLASSES + + parameter to web.xml file. Possible values + "enable" and "disable". + Implementation of this method implies the + provision of several style classes for different + types of elements. The style classes have + predefined names. Application developer should + manually assign classes to controls that needs + skinning or assign class to an element that + contains controls. + + + + + + By setting + org.richfaces.CONTROL_SKINNING_CLASSES + to "enable" you are provided with style + classes applicable to: + + + + + + Basic elements nested inside element having + rich-container class, e.g.: + + + Example: + + - - - - Elements that has class name corresponding to one of the basic = elements name/type mapped by the following scheme = - rich-<elementName>[-<elementType>]. See the example: - - - Example: - = - + + + Elements that has class name corresponding to + one of the basic elements name/type mapped by + the following scheme + + rich-<elementName>[-<elementType>] + + . See the example: + + + Example: + + = - = - - Note: - - a elements have classes based on "link" and pseudo = class name, e.g.: rich-link, rich-link-hover, rich-link-visited - = - = - = - - = - - = - = - = - Additionally, the predefined rich CSS classes that we provide can= be used not only as classes for basic HTML - elements but also as classes for creation of complex elements . - There is a snippet with some of them for example: - = - = - + + + Note: + + a elements have classes based on + "link" and pseudo class name, + e.g.: rich-link, rich-link-hover, + rich-link-visited + + + + + + + + + + + Additionally, the predefined rich CSS classes that we + provide can be used not only as classes for basic HTML + elements but also as classes for creation of complex + elements . + + + There is a snippet with some of them for example: + + + + @@ -1766,750 +2743,861 @@ -...]]> = - = - = - To get a better idea of standard component skinning we recommend = to explore CSS files located in ui/core/src/main/resources/org/richfaces/ f= older - of Richfaces svn. - = - = -
- - Standard level - = - - Html Elements Skin Bindings for input, select, textarea, butto= n, keygen, isindex, legend - - - - CSS Properties - Skin parameters - - - - = - - font-size - generalSizeFont - - - font-family - generalFamilyFont - - - color - controlTextColor - - - -
= - = - = - - Html Elements Skin Bindings for fieldset - - - - CSS Properties - Skin parameters - - - = +...]]> = - = - - border-color - panelBorderColor - - - -
- = - = - = - - Html Elements Skin Bindings for hr - - - - CSS Properties - Skin parameters - - - = - = - - border-color - panelBorderColor - - - -
- = - - Html Elements Skin Bindings for a - - - - CSS Properties - Skin parameters - - - = - = = - = - - color - generalLinkColor - - = - - -
- = - - Html Elements Skin Bindings for a:hover - - - - CSS Properties - Skin parameters - - - = - = - - color - hoverLinkColorgeneralLinkColor - = - - -
- = - = - - Html Elements Skin Bindings for a:visited - - - - CSS Properties - Skin parameters - - - = - = - - color - visitedLinkColor - = - - -
- = - = - = - = - - Rich Elements Skin Bindings for .rich-input, .rich-select, .r= ich-textarea, .rich-button, .rich-keygen, .rich-isindex, .rich-legend, .ric= h-link - - - - CSS Properties - Skin parameters - - - + + To get a better idea of standard component skinning we + recommend to explore CSS files located in + ui/core/src/main/resources/org/richfaces/ folder of + Richfaces svn. + = - - font-size - generalSizeFont - - - font-family - generalFamilyFont - - - color - controlTextColor - - - -
- = - = - = - = - - Rich Elements Skin Bindings for .rich-fieldset - - - - CSS Properties - Skin parameters - - - = - - border-color - panelBorderColor - - - -
- = - = - - Rich Elements Skin Bindings for .rich-hr - - - - CSS Properties - Skin parameters - - - = = - - border-color - panelBorderColor - - - -
- = - = - - Rich Elements Skin Bindings for .rich-link - - - - CSS Properties - Skin parameters - - - = - = - - color - generalLinkColor - - - -
- = - = - = - = - - Rich Elements Skin Bindings for .rich-link:hover - - - - CSS Properties - Skin parameters - - - = - = - - color - hoverLinkColor - - = - - -
= - = - = - = - - Rich Elements Skin Bindings for .rich-link:visited - - - - CSS Properties - Skin parameters - - - = +
+ + Standard level = - = - - color - visitedLinkColor - - = -
- -
= - = -
- = - = -
- - Extended level = - = - +
+ + Html Elements Skin Bindings for input, select, + textarea, button, keygen, isindex, legend + + + + + CSS Properties + Skin parameters + + + = - Html Elements Skin Bindings for input, select, textarea, butt= on, keygen, isindex - - - - CSS properties - Skin parameters - - - - - border-width - 1px - - - border-color - panelBorderColor - - - color - controlTextColor - - = - = - = - = - - -
= - = - = - = - Html Elements Skin Bindings for *|button - - - - CSS properties - Skin parameters - - - - = - = - - border-color - panelBorderColor - - = - - font-size - generalSizeFont - - = - - font-family - generalFamilyFont - - = - - color - headerTextColor - - = - - background-color - headerBackgroundColor - - = - - background-image - org.richfaces.renderkit.html.images.ButtonBackgroundIma= ge - - = - = - - -
= - = - = - = - - Html Elements Skin Bindings for button[type=3Dbutton], butto= n[type=3Dreset], button[type=3Dsubmit], input[type=3Dreset], input[type=3Ds= ubmit], input[type=3Dbutton] - - - - CSS properties - Skin parameters - - - - = - - border-color - panelBorderColor - - = - - font-size - generalSizeFont - = - = - = - = - - font-family - generalFamilyFont - - = - - color - headerTextColor - = - = - = - - background-color - headerBackgroundColor - - = - - background-image - org.richfaces.renderkit.html.images.ButtonBackgroundIm= age - = - - -
= - = - = - = - Html Elements Skin Bindings for *|button[disabled], .rich-co= ntainer *|button[disabled], .rich-button-disabled - - - - CSS properties - Skin parameters - - - + + font-size + generalSizeFont + + + font-family + generalFamilyFont + + + color + controlTextColor + + + +
= - - color - tabDisabledTextColor - - = - - border-color - tableFooterBackgroundColor - - = - - background-color - tableFooterBackgroundColor - = - - background-image - org.richfaces.renderkit.html.images.ButtonDisabledBack= groundImage - - = - - - = - = - = - = - = - = - Html Elements Skin Bindings for .rich-button-disabled, - .rich-container button[type=3D"button"][disabled], .ric= h-button-button-disabled, - .rich-container button[type=3D"reset"][disabled], .rich= -button-reset-disabled, - .rich-container button[type=3D"submit"][disabled], .ric= h-button-submit-disabled, = - .rich-container input[type=3D"reset"][disabled], .rich-= input-reset-disabled, = - .rich-container input[type=3D"submit"][disabled], .rich= -input-submit-disabled, = - .rich-container input[type=3D"button"][disabled], .rich= -input-button-disabled - - - - - CSS properties - Skin parameters - - - - = - - color - tabDisabledTextColor - - = - - background-color - tableFooterBackgroundColor - - = - - border-color - tableFooterBackgroundColor - - = - = - - background-image - org.richfaces.renderkit.html.images.ButtonDisabledBack= groundImage - - = - - -
- = - = - = - = - = - = - = - Html Elements Skin Bindings for = - *button[type=3D"button"][disabled], - button[type=3D"reset"][disabled], = - button[type=3D"submit"][disabled], = - input[type=3D"reset"][disabled], - input[type=3D"submit"][disabled], = - input[type=3D"button"][disabled] - - - - - CSS properties - Skin parameters - - - - = - = - - color - tabDisabledTextColor - - = - - border-color - tableFooterBackgroundColor - - = - - background-color - tableFooterBackgroundColor - - = - = - - -
= - = - = - = + + + Html Elements Skin Bindings for fieldset + + + + + CSS Properties + Skin parameters + + + = - = - = - = - = - = - = - = - = - = - = -
- Html Elements Skin Bindings for *|textarea - - - - CSS properties - Skin parameters - - - = - - border-color - panelBorderColor - = - = - - font-size - generalSizeFont - - = - - font-family - generalFamilyFont - = - = - = - = - - color - controlTextColor - - = - - background-color - controlBackgroundColor - = - = - = - = - - background-image - org.richfaces.renderkit.html.images.InputBackgroundImag= e - - - -
= - = - - Html Elements Skin Bindings for textarea[type=3Dtextarea], i= nput[type=3Dtext], input[type=3Dpassword], select - - - - CSS properties - Skin parameters - - - = - - border-color - panelBorderColor - - = - - font-size - generalSizeFont - = - = - = - = - = - - font-family - generalFamilyFont - - = - - color - controlTextColor - = - = - = - = - = - - background-color - controlBackgroundColor - - = - - background-image - org.richfaces.renderkit.html.images.InputBackgroundIma= ge - = - = - - -
- = - = - Html Elements Skin Bindings for *|textarea[disabled], .rich-= container *|textarea[disabled] - - - - CSS properties - Skin parameters - - - - = - - color - tableBorderColor - - = - - -
= - = - = - = - = - textarea[type=3D"textarea"][disabled], input[type= =3D"text"][disabled], input[type=3D"password"][disabled= ] - - - - CSS properties - Skin parameters - - - - = - - color - tableBorderColor - - = - - -
= - = - = - = + + border-color + panelBorderColor + + + + = - = - = - = - textarea[type=3D"textarea"][disabled], input[type= =3D"text"][disabled], input[type=3D"password"][disabled= ] - - - - CSS properties - Skin parameters - - - - = - - color - tableBorderColor - - = - - -
= - = - = - = - = -
= - = = -
= - = -
- XCSS file format - = - XCSS files are the core of Richfaces components skinnability. = - XCSS is an XML formatted CSS that adds extra functionality to = the skinning process - = - = - XCSS extends skinning possibilities by parsing the XCSS file = that contains all look-and-feel parameters of = - a particular component into a standard CSS file that a web browser= can recognize. - = - = - = - = - XCSS file contains CSS properties and skin parameters - mappings. Mapping of a CSS selector to a skin parameter = - is performed using < u:selector > and < u:style> XML tag= s = - that form the mapping structure. Please study the example below. - - + Html Elements Skin Bindings for hr + + + + CSS Properties + Skin parameters + + + + + + border-color + panelBorderColor + + + + + + + Html Elements Skin Bindings for a + + + + CSS Properties + Skin parameters + + + + + + + + color + generalLinkColor + + + + +
+ + + + Html Elements Skin Bindings for a:hover + + + + + CSS Properties + Skin parameters + + + + + + color + + hoverLinkColorgeneralLinkColor + + + + +
+ + + + + Html Elements Skin Bindings for a:visited + + + + + CSS Properties + Skin parameters + + + + + + color + visitedLinkColor + + + +
+ + + + + + + Rich Elements Skin Bindings for .rich-input, + .rich-select, .rich-textarea, .rich-button, + .rich-keygen, .rich-isindex, .rich-legend, + .rich-link + + + + + CSS Properties + Skin parameters + + + + + + font-size + generalSizeFont + + + font-family + generalFamilyFont + + + color + controlTextColor + + + +
+ + + + + + + Rich Elements Skin Bindings for .rich-fieldset + + + + + CSS Properties + Skin parameters + + + + + border-color + panelBorderColor + + + +
+ + + + + Rich Elements Skin Bindings for .rich-hr + + + + + CSS Properties + Skin parameters + + + + + + border-color + panelBorderColor + + + +
+ + + + + Rich Elements Skin Bindings for .rich-link + + + + + CSS Properties + Skin parameters + + + + + + color + generalLinkColor + + + +
+ + + + + + + Rich Elements Skin Bindings for .rich-link:hover + + + + + CSS Properties + Skin parameters + + + + + + color + hoverLinkColor + + + + +
+ + + + + + Rich Elements Skin Bindings for + .rich-link:visited + + + + + CSS Properties + Skin parameters + + + + + + + color + visitedLinkColor + + + + +
+ +
+ + +
+ + Extended level + + + + + Html Elements Skin Bindings for input, select, + textarea, button, keygen, isindex + + + + + CSS properties + Skin parameters + + + + + border-width + 1px + + + border-color + panelBorderColor + + + color + controlTextColor + + + + + + + +
+ + + + + Html Elements Skin Bindings for *|button + + + + + CSS properties + Skin parameters + + + + + + + border-color + panelBorderColor + + + + font-size + generalSizeFont + + + + font-family + generalFamilyFont + + + + color + headerTextColor + + + + background-color + headerBackgroundColor + + + + background-image + + org.richfaces.renderkit.html.images.ButtonBackgroundImage + + + + + + +
+ + + + + + Html Elements Skin Bindings for + button[type=3Dbutton], button[type=3Dreset], + button[type=3Dsubmit], input[type=3Dreset], + input[type=3Dsubmit], input[type=3Dbutton] + + + + + CSS properties + Skin parameters + + + + + + border-color + panelBorderColor + + + + font-size + generalSizeFont + + + + + + font-family + generalFamilyFont + + + + color + headerTextColor + + + + + background-color + headerBackgroundColor + + + + background-image + + org.richfaces.renderkit.html.images.ButtonBackgroundImage + + + + +
+ + + + + Html Elements Skin Bindings for + *|button[disabled], .rich-container + *|button[disabled], .rich-button-disabled + + + + + CSS properties + Skin parameters + + + + + + color + tabDisabledTextColor + + + + border-color + + tableFooterBackgroundColor + + + + + background-color + + tableFooterBackgroundColor + + + + + background-image + + org.richfaces.renderkit.html.images.ButtonDisabledBackgroundImage + + + + + +
+ + + + + + + Html Elements Skin Bindings for + .rich-button-disabled, .rich-container + button[type=3D"button"][disabled], + .rich-button-button-disabled, .rich-container + button[type=3D"reset"][disabled], + .rich-button-reset-disabled, .rich-container + button[type=3D"submit"][disabled], + .rich-button-submit-disabled, .rich-container + input[type=3D"reset"][disabled], + .rich-input-reset-disabled, .rich-container + input[type=3D"submit"][disabled], + .rich-input-submit-disabled, .rich-container + input[type=3D"button"][disabled], + .rich-input-button-disabled + + + + + CSS properties + Skin parameters + + + + + + color + tabDisabledTextColor + + + + background-color + + tableFooterBackgroundColor + + + + + border-color + + tableFooterBackgroundColor + + + + + + background-image + + org.richfaces.renderkit.html.images.ButtonDisabledBackgroundImage + + + + + +
+ + + + + + + + + Html Elements Skin Bindings for + *button[type=3D"button"][disabled], + button[type=3D"reset"][disabled], + button[type=3D"submit"][disabled], + input[type=3D"reset"][disabled], + input[type=3D"submit"][disabled], + input[type=3D"button"][disabled] + + + + + CSS properties + Skin parameters + + + + + + + color + tabDisabledTextColor + + + + border-color + + tableFooterBackgroundColor + + + + + background-color + + tableFooterBackgroundColor + + + + + + +
+ + + + + + + + + + + + + + + + + Html Elements Skin Bindings for *|textarea + + + + + CSS properties + Skin parameters + + + + + + border-color + panelBorderColor + + + + font-size + generalSizeFont + + + + font-family + generalFamilyFont + + + + + + color + controlTextColor + + + + background-color + controlBackgroundColor + + + + + + background-image + + org.richfaces.renderkit.html.images.InputBackgroundImage + + + + +
+ + + + Html Elements Skin Bindings for + textarea[type=3Dtextarea], input[type=3Dtext], + input[type=3Dpassword], select + + + + + CSS properties + Skin parameters + + + + + border-color + panelBorderColor + + + + font-size + generalSizeFont + + + + + + + font-family + generalFamilyFont + + + + color + controlTextColor + + + + + + + background-color + controlBackgroundColor + + + + background-image + + org.richfaces.renderkit.html.images.InputBackgroundImage + + + + + +
+ + + + Html Elements Skin Bindings for + *|textarea[disabled], .rich-container + *|textarea[disabled] + + + + + CSS properties + Skin parameters + + + + + + color + tableBorderColor + + + + +
+ + + + + + textarea[type=3D"textarea"][disabled], + input[type=3D"text"][disabled], + input[type=3D"password"][disabled] + + + + + CSS properties + Skin parameters + + + + + + color + tableBorderColor + + + + +
+ + + + + + + + + textarea[type=3D"textarea"][disabled], + input[type=3D"text"][disabled], + input[type=3D"password"][disabled] + + + + + CSS properties + Skin parameters + + + + + + color + tableBorderColor + + + + +
+ + + + +
+ + +
+ +
+ XCSS file format + + + XCSS files are the core of Richfaces components + skinnability. + + + XCSS is an XML formatted CSS that adds extra + functionality to the skinning process + + + + + XCSS extends skinning possibilities by parsing the XCSS + file that contains all look-and-feel parameters of a + particular component into a standard CSS file that a web + browser can recognize. + + + + + + + XCSS file contains CSS properties and skin parameters + mappings. Mapping of a CSS selector to a skin parameter + is performed using + < u:selector > + and + < u:style> + XML tags that form the mapping structure. Please study + the example below. + + @@ -2518,10 +3606,11 @@ ... ]]> - - During processing the code in the shown example will be parsed into a= standard CSS format. - - + During processing the code in the shown example will be + parsed into a standard CSS format. + + - = - - The name attribute of <u:selector> tag = defines the CSS selector, while name attribute of - the < u:style> tag defines what skin constant is mapped to = a CSS property. - The value attribute of the < u:style>= tag can also be used to assign a value to a CSS property. = - - = - = - CSS selectors with identical skinning properties can be set as= a comma separated list. - + The + name + attribute of <u:selector> tag defines the CSS + selector, while + "name" + attribute of the + <u:style> + tag defines what skin constant is mapped to a CSS + property. The + value + attribute of the + <u:style> + tag can also be used to assign a value to a CSS + property. + + + + + CSS selectors with identical skinning properties can be + set as a comma separated list. + + ... -]]> = +]]> = -
- = -
- Plug-n-Skin - = - - Plug-n-Skin feature is designed to easily create a new custom skin= which extends and overrides a base skin, - it allows to redefine the look of a set of components by taking the = base skin as basis and plugging-in custom styles - as well as to unify the appearance of standard controls and RichFac= es components. = - = - - = - In order to create your own skin using Plug-n-Skin feature, yo= u can follow these step by step instructions. - = +
= +
+ Plug-n-Skin = + + Plug-n-Skin feature is designed to easily create a new + custom skin which extends and overrides a base skin, it + allows to redefine the look of a set of components by + taking the base skin as basis and plugging-in custom + styles as well as to unify the appearance of standard + controls and RichFaces components. = - First of all, you need to create a template for the new ski= n. - Creation of the template can be performed using Maven build and= deployment tool. More information on how to configure Maven for RichFaces = - here. You can copy and paste these Maven instructions - to command line and execute them. = - - = - = - + + + In order to create your own skin using Plug-n-Skin + feature, you can follow these step by step instructions. + + + + + + + First of all, you need to create a template for the new + skin. Creation of the template can be performed using + Maven build and deployment tool. More information on how + to configure Maven for RichFaces + + here + + . You can copy and paste these Maven instructions to + command line and execute them. + + + + = - Primary keys for the command: - - DarchetypeVersion indicates = the RichFaces version. For example, "3.2.2-SNAPSHOT" - DartifactId artifact id of t= he project - DgroupId group id of the pro= ject - Dversion the version of the = project you create, by default it is "1.0.-SNAPSHOT" = - - - After this operation, a folder with the name of your "ARTIFACT-ID&qu= ot; appears. = - The folder contains a template of Maven project. - +]]> + Primary keys for the command: + + + + DarchetypeVersion + indicates the RichFaces version. For example, + "3.2.2-SNAPSHOT" + + + + + DartifactId + artifact id of the project + + + + + DgroupId + group id of the project + + + + + Dversion + the version of the project you create, by + default it is "1.0.-SNAPSHOT" + + + + + After this operation, a folder with the name of your + "ARTIFACT-ID" appears. The folder contains a + template of Maven project. + = - Next steps will guide you though creating of the skin itself. - = - = - = - -In the root folder of Maven project (the one that contains "pom.xml&= quot; file) = -you should run the following command in the command line: - - = - + Next steps will guide you though creating of the skin + itself. + + + + + + In the root folder of Maven project (the one that + contains "pom.xml" file) you should run the + following command in the command line: + + + - = - = - Primary keys for the command: - - = - - Dname defines the name of the new skin - - = - = - = - - Dpackage base package of the skin. By defaul= t "groupId" of the project is used. - = - = - - = - - Additional optional keys for the command: - - = - - = - - = - - DbaseSkin defines the name of the base skin. = - = - = - = - - - DcreateExt if set to "true", extend= ed CSS classes are added. For more information, please, see - "Standard controls skinn= ing" = - - = - - = - = - As a result of the performed operations the following files and f= olders are created: - = - - BaseImage.java - the base cla= ss to store images. Location: "\src\main\java\SKIN-PACKAGE\SKIN-NAME\i= mages\" - BaseImageTest.java - a test v= ersion of a class that stores images. Location: "\src\test\java\SKIN-P= ACKAGE\SKIN-NAME\images\" - XCSS files - XCSS files defin= e the new look of RichFaces components affected by the new skin. Locatio= n: "\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\" - SKIN-NAME.properties - a XC= SS file that contains properties of the new skin. Location: "\src\main= \resources\SKIN-PACKAGE\SKIN-NAME\css\" - The following properties are used to configure the SKIN-NA= ME.properties file: - = - = - - - baseSkin =E2=80=93 the name of= the base skin to be used as basis. - The look of the skin you define will be affected by new st= yle properties. = - - - - generalStyleSheet - - a path to the style sheet (SKIN-NAME.xcss) that imports st= yle sheets of the components to be affected by the new skin. = - = - - - extendedStyleSheet - a path to a= style sheet that is used to unify the appearance of RichFaces components a= nd standard HTML controls. = - For additional information please read "Standard controls skinning" chapter. - - - gradientType is a predefined prop= erty to set the type of gradient applied to the new skin. Possible values a= re glass, plastic, plain. More information on gradient implementation you c= an find further in this chapter. - - - - - SKIN-NAME.xcss - a XCSS fil= e that imports XCSS files of the components to be affected by the new skin.= Location: "src\main\resources\META-INF\skins " - XCSS files If the command is = executed with the "DcreateExt" key set to "true", XCSS = files that define style for standard controls will be created. Location: &q= uot;\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\". = - SKIN-NAME-ext.xcss If the c= ommand is executed with the "DcreateExt" key set to "true&qu= ot;, the configuration SKIN-NAME-ext.xcss file that imports XCSS file defin= ing styles for the standard controls will be created. Location: "src= \main\resources\META-INF\skins ". - SKIN-NAME-resources.xml - th= e file contains the description of all listed above files. Location: "= ;src\main\config\resources ". - - = - = - = - Having performed the previous steps you can proceed to building the= new skin. This can be done by executing the given below command in the com= mand line in the root folder of you skin project (the one that contains po= m.xml file). = -Primary keys for the command: + + + + + Dname + defines the name of the new skin + + + + + + Dpackage + base package of the skin. By default + "groupId" of the project is used. + + + + + Additional optional keys for the command: + + + + + + + DbaseSkin + defines the name of the base skin. + + + + + + DcreateExt + if set to "true", extended CSS classes + are added. For more information, please, see + + "Standard controls skinning" + + + + + + + + As a result of the performed operations the following + files and folders are created: + + + + + + BaseImage.java + - the base class to store images. Location: + "\src\main\java\SKIN-PACKAGE\SKIN-NAME\images\" + + + + + BaseImageTest.java + - a test version of a class that stores images. + Location: + "\src\test\java\SKIN-PACKAGE\SKIN-NAME\images\" + + + + + XCSS files + - XCSS files define the new look of RichFaces + components affected by the new skin. Location: + "\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\" + + + + + SKIN-NAME.properties + - a XCSS file that contains properties of the + new skin. Location: + "\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\" + + + The following properties are used to configure + the SKIN-NAME.properties file: + + + + + + + baseSkin + =E2=80=93 the name of the base skin to be used + as basis. The look of the skin you + define will be affected by new style + properties. + + + + + generalStyleSheet + - a path to the style sheet + (SKIN-NAME.xcss) that imports style + sheets of the components to be affected + by the new skin. + + + + + extendedStyleSheet + - a path to a style sheet that is used + to unify the appearance of RichFaces + components and standard HTML controls. + For additional information please read + + "Standard controls + skinning" + + chapter. + + + + + gradientType + is a predefined property to set the type + of gradient applied to the new skin. + Possible values are glass, plastic, + plain. More information on gradient + implementation you can find further in + this chapter. + + + + + + + SKIN-NAME.xcss + - a XCSS file that imports XCSS files of the + components to be affected by the new skin. + Location: + "src\main\resources\META-INF\skins " + + + + + XCSS files + If the command is executed with the + "DcreateExt" key set to + "true", XCSS files that define style + for standard controls will be created. Location: + "\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\". + + + + + SKIN-NAME-ext.xcss + If the command is executed with the + "DcreateExt" key set to + "true", the configuration + SKIN-NAME-ext.xcss file that imports XCSS file + defining styles for the standard controls will + be created. Location: + "src\main\resources\META-INF\skins ". + + + + + SKIN-NAME-resources.xml + - the file contains the description of all + listed above files. Location: + "src\main\config\resources ". + + + + + + + + Having performed the previous steps you can proceed to + building the new skin. This can be done by executing the + given below command in the command line in the root + folder of you skin project (the one that contains + pom.xml file). + + + = - = - = - = - Now, you can use your newly-created skin in your project by adding = your new skin parameters to web.xml file. - = - + + + + + Now, you can use your newly-created skin in your project + by adding your new skin parameters to web.xml file. + + + org.ajax4jsf.SKIN SKIN-NAME ... -]]> = +]]> = = - - So, now having built your new skin you can start redefining style pr= operties in the corresponding XCSS files(located in "\src\main\resourc= es\SKIN-PACKAGE\SKIN-NAME\css\" folder). = - In the example below, it's shown how to redefine the style properties = for the "combobox" component. - = - + So, now having built your new skin you can start + redefining style properties in the corresponding XCSS + files(located in + "\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\" + folder). In the example below, it's shown how to + redefine the style properties for the + "combobox" component. + + + @@ -2723,23 +3980,46 @@ ... ]]> - = - Please notice that background-image can b= e used to set a predefined gradient by means of = - <f:resource f:key=3D"org.richfaces.renderkit.htm= l.CustomizeableGradient"> and the gradientType= constant set to one of the possible values. - - = - You can also apply these style properties to backgro= und-image: - - = - baseColor - gradientColor - gradientHeight - valign - gradientType - - = - = -
= -
+ + Please notice that + background-image + can be used to set a predefined gradient by means of + + <f:resource + f:key=3D"org.richfaces.renderkit.html.CustomizeableGradient"= ;> + + and the + gradientType + constant set to one of the possible values. + + + + You can also apply these style properties to + background-image + : + + + + + baseColor + + + gradientColor + + + gradientHeight + + + valign + + + gradientType + + + + +
+ +
Modified: trunk/docs/userguide/en/src/main/resources/css/html.css =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/resources/css/html.css 2008-06-10 09:2= 4:42 UTC (rev 8966) +++ trunk/docs/userguide/en/src/main/resources/css/html.css 2008-06-10 09:2= 7:24 UTC (rev 8967) @@ -1,73 +1,78 @@ -(a)import url("jbossorg.css"); - -.expand_collapse_toc { - float:left; - width:20px; - color:#6699CC; - cursor:pointer; -} -body { -background-image:url(../images/community/bkg_gradient.gif); -background-repeat:repeat-x; -color:#333333; -font-family:'Lucida Grande',Geneva,Verdana,Arial,sans-serif; -font-size:12px; -line-height:150%; -margin:0pt auto; -max-width:80em; -padding:0em 2em; -text-align:justify; -} - -/* Center all images and Figure/Table titles */ -div.mediaobject img {margin:auto;} - -p.title {text-align:center;} - -pre.CSS {line-height:8px;} - -.css_normal { -line-height:0px; -color:#000000; -} -.css_colon { -color:#000000; -} -.css_semi_colon { -color:#000000; -} -.css_curly_brace { -color:#000000; -} -.css_comment { -color:#3F5FBF; -background-color:rgb(247,247,247); -} -.css_error { -color:#BF3F3F; -} -.css_selector { -color:#3F7F7F; -} -.css_null { -color:rgb(0,0,0); -} -.css_property_name { -font-weight:bold; -color:#7F007F; -} -.css_property_value { -color:#2A00FF; -} -.css_uri { -color:#2A00FF; -} -.css_atmark_rule { -color:#3F7F7F; -} -.css_media { -color:#2A00FF; -} -.css_string { -color:#2A00FF; +(a)import url("jbossorg.css"); + +.expand_collapse_toc { + float:left; + width:20px; + color:#6699CC; + cursor:pointer; +} +body { +background-image:url(../images/community/bkg_gradient.gif); +background-repeat:repeat-x; +color:#333333; +font-family:'Lucida Grande',Geneva,Verdana,Arial,sans-serif; +font-size:12px; +line-height:150%; +margin:0pt auto; +max-width:80em; +padding:0em 2em; +text-align:justify; +} + +/* Center all images and Figure/Table titles */ +div.mediaobject img {margin:auto;} + +p.title {text-align:center;} + +pre.CSS {line-height:8px;} + +.css_normal { +line-height:0px; +color:#000000; +} +.css_colon { +color:#000000; +} +.css_semi_colon { +color:#000000; +} +.css_curly_brace { +color:#000000; +} +.css_comment { +color:#3F5FBF; +background-color:rgb(247,247,247); +} +.css_error { +color:#BF3F3F; +} +.css_selector { +color:#3F7F7F; +} +.css_null { +color:rgb(0,0,0); +} +.css_property_name { +font-weight:bold; +color:#7F007F; +} +.css_property_value { +color:#2A00FF; +} +.css_uri { +color:#2A00FF; +} +.css_atmark_rule { +color:#3F7F7F; +} +.css_media { +color:#2A00FF; +} +.css_string { +color:#2A00FF; +} +code { = +color:#000000; = +font-size:12px; = +font-family:courier; = } \ No newline at end of file --===============7885898586084166447==--