[richfaces-svn-commits] JBoss Rich Faces SVN: r4477 - in branches/3.1.x: docs/userguide/en/src/main/docbook/included and 7 other directories.

Author: alexsmirnov Date: 2007-12-04 19:14:12 -0500 (Tue, 04 Dec 2007) New Revision: 4477 Added: branches/3.1.x/docs/userguide/en/src/main/docbook/included/contextMenu.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/contextMenu.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/listShuttle.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/listShuttle.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/orderingList.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/orderingList.xml branches/3.1.x/docs/userguide/en/src/main/resources/images/calendar2.png branches/3.1.x/docs/userguide/en/src/main/resources/images/calendar3.png branches/3.1.x/docs/userguide/en/src/main/resources/images/contextMenu1.png branches/3.1.x/docs/userguide/en/src/main/resources/images/cursor.png branches/3.1.x/docs/userguide/en/src/main/resources/images/dataList4.png branches/3.1.x/docs/userguide/en/src/main/resources/images/dataTable3.png branches/3.1.x/docs/userguide/en/src/main/resources/images/datadefinitionlist1.png branches/3.1.x/docs/userguide/en/src/main/resources/images/datagrid1.png branches/3.1.x/docs/userguide/en/src/main/resources/images/datagrid2.png branches/3.1.x/docs/userguide/en/src/main/resources/images/datalist1.png branches/3.1.x/docs/userguide/en/src/main/resources/images/datalist2.png branches/3.1.x/docs/userguide/en/src/main/resources/images/datalist3.png branches/3.1.x/docs/userguide/en/src/main/resources/images/dataorderedlist1.png branches/3.1.x/docs/userguide/en/src/main/resources/images/mp_1.png branches/3.1.x/docs/userguide/en/src/main/resources/images/mp_2.png branches/3.1.x/docs/userguide/en/src/main/resources/images/mp_3.png branches/3.1.x/docs/userguide/en/src/main/resources/images/mp_4.png branches/3.1.x/docs/userguide/en/src/main/resources/images/orderinList1.png branches/3.1.x/docs/userguide/en/src/main/resources/images/scrollableDataTable.png branches/3.1.x/docs/userguide/en/src/main/resources/images/simpleTogglePanel3.png branches/3.1.x/docs/userguide/en/src/main/resources/images/tab1.png branches/3.1.x/docs/userguide/en/src/main/resources/images/tree1.png branches/3.1.x/docs/userguide/en/src/main/resources/images/tree2.png branches/3.1.x/docs/userguide/en/src/main/resources/images/tree3.png branches/3.1.x/docs/userguide/en/src/main/resources/images/tree4.png branches/3.1.x/docs/userguide/en/src/main/resources/images/tree5.png branches/3.1.x/docs/userguide/en/src/main/resources/images/treeNode.png branches/3.1.x/docs/userguide/en/src/main/resources/images/treeNode2.png branches/3.1.x/docs/userguide/en/src/main/resources/images/treeNode3.png branches/3.1.x/framework/api/src/main/java/org/ajax4jsf/renderkit/UserResourceRenderer.java Removed: branches/3.1.x/docs/userguide/en/src/main/resources/images/dataTable2.gif branches/3.1.x/docs/userguide/en/src/main/resources/images/datadefinitionlist1.gif branches/3.1.x/docs/userguide/en/src/main/resources/images/datadefinitionlist2.gif branches/3.1.x/docs/userguide/en/src/main/resources/images/datagrid1.gif branches/3.1.x/docs/userguide/en/src/main/resources/images/datalist1.gif branches/3.1.x/docs/userguide/en/src/main/resources/images/datalist2.gif branches/3.1.x/docs/userguide/en/src/main/resources/images/dataorderedlist1.gif branches/3.1.x/docs/userguide/en/src/main/resources/images/dataorderedlist2.gif Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/actionparam.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/changeExpandListener.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/column.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/columnGroup.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/commandButton.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataDefinitionList.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataGrid.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataGrid.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataList.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataList.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataOrderedList.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataTable.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/datascroller.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dndParam.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragIndicator.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragIndicator.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragListener.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragSupport.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropListener.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropSupport.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/effect.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/gmap.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/jQuery.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuGroup.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuItem.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuSeparator.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/message.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/messages.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/modalPanel.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/modalPanel.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/nodeSelectListener.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/panel.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBar.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBarItem.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenu.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/poll.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/poll.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/push.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/repeat.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/separator.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/subTable.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/tab.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/tabPanel.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/toggleControl.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/togglePanel.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBar.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/tree.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/tree.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/treeNode.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/treeNode.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/virtualEarth.xml branches/3.1.x/docs/userguide/en/src/main/docbook/master.xml branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCGettingStarted.xml branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCSettings.xml branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCfaq.xml branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCtechreqs.xml branches/3.1.x/docs/userguide/en/src/main/resources/images/calendar1.png branches/3.1.x/docs/userguide/en/src/main/resources/images/datadefinitionlist2.png branches/3.1.x/docs/userguide/en/src/main/resources/images/dataorderedlist2.png branches/3.1.x/docs/userguide/en/src/main/resources/images/datascroller3.png branches/3.1.x/docs/userguide/en/src/main/resources/images/panel3.png branches/3.1.x/docs/userguide/en/src/main/resources/images/tree1.gif branches/3.1.x/docs/userguide/en/src/main/resources/images/tree2.gif branches/3.1.x/framework/api/src/main/java/org/ajax4jsf/context/AjaxContext.java branches/3.1.x/framework/impl/src/main/java/org/ajax4jsf/context/AjaxContextImpl.java branches/3.1.x/framework/test/src/test/java/org/richfaces/component/util/HtmlUtilTest.java branches/3.1.x/ui/core/src/main/java/org/ajax4jsf/renderkit/LoadResourceRendererBase.java Log: Prepare release 3.1.3.CR1 Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/actionparam.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/actionparam.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/actionparam.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -86,7 +86,7 @@ <para> <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/actionparam... you can see the example of <emphasis role="bold" - ><property>&lt;a4j:actionparam&gt;</property></emphasis> usage and sources for the given example. </para> + ><property>&lt;a4j:actionparam&gt;</property></emphasis> usage and sources for the given example. </para> <para>More information can be found on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/changeExpandListener.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/changeExpandListener.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/changeExpandListener.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -108,4 +108,14 @@ ]]></programlisting> </section> + <section> + <title>Look-and-Feel Customization</title> + + <para><emphasis role="bold"> + <property>&lt;rich:changeExpandListener&gt;</property> + </emphasis> has no skin parameters and custom <property>style classes</property>, as the + component isn&apos;t visual.</para> + </section> + + </chapter> \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/column.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/column.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/column.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -183,20 +183,52 @@ component that is described in <link linkend="columnGroup">the following chapter</link>.</para> </section> <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all columns at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis - ><property>style classes</property></emphasis> used by the column to your page style sheets</listitem> - </itemizedlist> - </section> + <title>Look-and-Feel Customization</title> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> components at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> + + <section> + <title>Skin Parameters Redefinition</title> + + <para>Skin parameters redefinition for <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> are the same as for the <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> <link linkend="SPR">component</link>.</para> + </section> + <section> <title>Definition of Custom Style Classes</title> + + <para>Custom style classes for <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> are the same as for the <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> <link linkend="DofCCS">component</link>. + </para> <para>In order to redefine styles for all <emphasis role="bold"> <property>&lt;rich:column&gt;</property> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/columnGroup.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/columnGroup.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/columnGroup.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -47,17 +47,14 @@ <emphasis role="bold">Example:</emphasis> </para> <programlisting role="XML"><![CDATA[... - <rich:dataTable value="#{capitalsBean.capitals}" var="capitals" - ajaxKeys="#{bean.ajaxSet}" binding="#{bean.tabe}" id="table"> - <!--...//Set of columns and header/footer facets--> - <rich:column colspan="3"> - <f:facet name="header">State Flag</f:facet> - <h:graphicImage value="#{cap.stateFlag}"/> - </rich:column> <rich:columnGroup> - <!--...//Set of columns and header/footer facets--> - </rich:columnGroup> - </rich:dataTable> + <rich:column> + <h:outputText value="Column1"/> + </rich:column> + <rich:column> + <h:outputText value="Column2"/> + </rich:column> + </rich:columnGroup> ... ]]></programlisting> </section> @@ -114,9 +111,15 @@ <f:facet name="header">State Flag</f:facet> <h:graphicImage value="#{cap.stateFlag}"/> </rich:column> - <rich:column breakBefore="true">...</rich:column> - <rich:column >...</rich:column> - <rich:column >...</rich:column> + <rich:column breakBefore="true"> + <h:outputText value="#{cap.state}"/> + </rich:column> + <rich:column breakBefore="true"> + <h:outputText value="#{cap.name}"/> + </rich:column> + <rich:column > + <h:outputText value="#{cap.timeZone}"/> + </rich:column> </rich:dataTable> .... ]]></programlisting> @@ -168,20 +171,51 @@ </figure> </section> <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all columnGroups at once, there are two ways:</para> + <title>Look-and-Feel Customization</title> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:columnGroup&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis - ><property>style classes</property></emphasis> used by the columnGroup to your page style sheets</listitem> - </itemizedlist> - </section> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:columnGroup&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Skin Parameters Redefinition</title> + + <para>Skin parameters redefinition for <emphasis role="bold"><property>&lt;rich:columnGroup&gt;</property> + </emphasis> are the same as for the <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> <link linkend="SPR">component</link>.</para> + </section> + + <section> <title>Definition of Custom Style Classes</title> + + <para>Custom style classes for <emphasis role="bold"> + <property>&lt;rich:columnGroup&gt;</property> + </emphasis> are the same as for the <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis><link linkend="DofCCS">component</link>. + </para> <para>In order to redefine styles for all <emphasis role="bold"> <property>&lt;rich:columnGroup&gt;</property> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/commandButton.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/commandButton.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/commandButton.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -56,14 +56,40 @@ <note> <title>Note:</title> <para>AJAX support is built in and it&apos;s not necessary to add nested <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> to the component.</para> - </note> + </note> + <para> + The usage of the keyword &apos;this&apos; in JavaScript code in the <emphasis><property>&quot;oncomplete&quot;</property></emphasis> attribute + depends on the location of <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis>. If the <property>commandButton</property> is situated outside the re-rendered region + you can use keyword &apos;this&apos; as in the following example: + </para> + <programlisting role="JAVA"><![CDATA[... +<h:form id="form"> + <a4j:commandButton id="cbutton" action="director.rollCamera" + onclick="this.disabled=true" + oncomplete="this.disabled=false" /> +</h:form> +... +]]></programlisting> + <para> + Otherwise if the <property>commandButton</property> contained in re-rendered region + the <emphasis><property>&quot;oncomplete&quot;</property></emphasis> attribute has a problem obtaining a reference of the <property>commandButton</property> object + when using the keyword &apos;this&apos;. In this case you can use the <emphasis><property>&quot;oncomplete&quot;</property></emphasis> attribute as in the following example: + </para> + <programlisting role="JAVA"><![CDATA[... +<h:form id="form"> +<a4j:commandButton id="cbutton" action="director.rollCamera" + onclick="this.disabled=true" + oncomplete="document.getElementById('form:cbutton').disabled=false" /> +</h:form> +... +]]></programlisting> <para>Common JSF navigation could be performed after an Ajax submit and partial rendering, but Navigation Case must be defined as <emphasis role="bold"><property>&lt;redirect/&gt;</property></emphasis> in order to avoid problems with some browsers.</para> <para>As any Core Ajax component sending Ajax requests and processing server responses <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> has all attributes described above (see <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> chapter) that provide the required behavior of requests sending (delay, limitation of submit area and rendering, and etc.)</para> </section> <section> <title>Relevant resources links</title> <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/commandButt.... + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/commandButt... </ulink>you can see the example of <emphasis role="bold" </para> Copied: branches/3.1.x/docs/userguide/en/src/main/docbook/included/contextMenu.desc.xml (from rev 4476, trunk/docs/userguide/en/src/main/docbook/included/contextMenu.desc.xml) =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/contextMenu.desc.xml (rev 0) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/contextMenu.desc.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> + <sectioninfo> + <keywordset> + <keyword>contextMenu</keyword> + </keywordset> + </sectioninfo> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> component is used for creation multileveled + context menus that are activated after a user defines an event (onmouseover, onclick, + etc.) on any element on the page.</para> + <mediaobject> + <imageobject> + <imagedata fileref="images/contextMenu1.png"/> + </imageobject> + </mediaobject> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem>Skinnable <property>context menu</property> and child items</listitem> + <listitem>Highly customizable look and feel</listitem> + <listitem>Disablement support</listitem> + <listitem>Pop-up appearance event customization</listitem> + </itemizedlist> + </section> +</section> Copied: branches/3.1.x/docs/userguide/en/src/main/docbook/included/contextMenu.xml (from rev 4476, trunk/docs/userguide/en/src/main/docbook/included/contextMenu.xml) =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/contextMenu.xml (rev 0) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/contextMenu.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -0,0 +1,395 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> + <sectioninfo> + <keywordset> + <keyword>rich:contextMenu</keyword> + <keyword>contextMenu</keyword> + </keywordset> + </sectioninfo> + <table> + <title>Component identification parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.ContextMenu</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.ContextMenu</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.ContextMenu</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DropDownMenuRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ContextMenuTagHandler</entry> + </row> + </tbody> + </tgroup> + </table> + <section> + <title>Creating the Component with a Page Tag</title> + <para>Here is a simple example as it could be used on a page: </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:contextMenu value="Menu1"> + <!--Nested menu components--> +</rich:contextMenu> +...]]></programlisting> + </section> + <section> + <title>Creating the Component Dynamically Using Java</title> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlContextMenu; +... +HtmlContextMenu myContextMenu = new HtmlContextMenu(); +...]]></programlisting> + </section> + <section> + <title>Details of Usage</title> + <para>All attributes except <emphasis> + <property>&quot;value&quot;</property> + </emphasis> are optional. The <emphasis> + <property>&quot;value&quot;</property> + </emphasis> attribute defines text to be represented. For the same purpose you can also + use the <emphasis> + <property>&quot;label&quot;</property> + </emphasis> facet.</para> + + <para> It&apos;s possible to define the direction for list appear in the <emphasis> + <property>&quot;direction&quot;</property> + </emphasis>attribute. If the accordance of the popup corner to corner of the label isn’t + set <emphasis> + <property>&quot;direction&quot;</property> + </emphasis> attribute must set next accordances: </para> + <itemizedlist> + <listitem> + <para>top-left - a menu drops to the top and left</para> + </listitem> + + <listitem> + <para>top-right - a menu drops to the top and right</para> + </listitem> + + <listitem> + <para>bottom-left - a menu drops to the bottom and left</para> + </listitem> + + <listitem> + <para>bottom-right - a menu drops to the bottom and right</para> + </listitem> + + <listitem> + <para>auto(default) - smart positioning activation</para> + </listitem> + </itemizedlist> + <para><emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> provides <emphasis> + <property>&quot;jointPoint&quot;</property> + </emphasis> attribute to set the point on the label element to connect popup. Possible + values are:</para> + + <itemizedlist> + <listitem> + <para>tr - a menu is attached to the top-right point of the button element</para> + </listitem> + + <listitem> + <para>tl - a menu is attached to the top-left point of the button element</para> + </listitem> + + <listitem> + <para>br - a menu is attached to the bottom-right point of the button element</para> + </listitem> + + <listitem> + <para>bl - a menu is attached to the bottom-left point of the button element</para> + </listitem> + + <listitem> + <para>auto(default) - smart positioning activation</para> + </listitem> + </itemizedlist> + + <!--ADD EXAMPLE and SCREENSHOT --> + + <para>In order to set the offset for the menu popup relatively to label, you can use <emphasis> + <property>&quot;horizontalOffset&quot;</property> + </emphasis> and <emphasis> + <property>&quot;verticalOffset&quot;</property> + </emphasis> attributes. Values can be negative.</para> + + <para><property>menuItem</property> provides <emphasis> + <property>&quot;submitMode&quot;</property> + </emphasis> attribute to define the way of submission. Possible values : <itemizedlist> + <listitem> + <para>Server (default)</para> + </listitem> + </itemizedlist> + <para>The standard form submission is performed and the page is completely refreshed.</para> + <itemizedlist> + <listitem> + <para>Ajax</para> + </listitem> + </itemizedlist> + <para>An Ajax form submission is performed, and specified elements in the <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute are rerendered.</para> + <itemizedlist> + <listitem> + <para>None</para> + </listitem> + </itemizedlist> + <para> The <emphasis> + <property>&quot;action&quot;</property> + </emphasis> and <emphasis> + <property>&quot;actionListener&quot;</property> + </emphasis> item's attributes are ignored. Menu items don't fire any submits + themselves. The behavior is fully defined by the components nested inside items.</para> + <!-- template + <para>emphasis role="bold"> + <property>&lt;contextMenu&gt;</property> + </emphasis> could not be generated for every component where it&apos;s defined. Templating could + be used instead. So only representation data could be loaded from server. And markup + could be evaluated on client side. So it's should accept macrosubstitutions like + {value} </para> + + --> + </para> + </section> + <section> + <title>JavaScript API</title> + <table> + <title>JavaScript API</title> + <tgroup cols="3"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + <entry>Apply to</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>doHide()</entry> + <entry>Hide component or group</entry> + <entry>Component, group</entry> + </row> + <row> + <entry>doShow()</entry> + <entry>Show component or group</entry> + <entry>Component, group</entry> + </row> + <row> + <entry>doEnable()</entry> + <entry>Enable component, item, group</entry> + <entry>Component, Item, Group</entry> + </row> + <row> + <entry>doDisable()</entry> + <entry>Disable component, item or group</entry> + <entry>Component, Item, Group</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Look-and-Feel Customization</title> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> components at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Skin Parameters Redefinition</title> + </section> + <section> + <title>Definition of Custom Style Classes</title> + + <para>On the screenshot there are classes names that define styles for component elements.</para> + + <!-- ADD SCREENSHOT --> + + <table> + <title>Classes names that define a menu item</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-menu-item</entry> + <entry>Defines styles for menu item</entry> + </row> + <row> + <entry>rich-menu-item-disabled</entry> + <entry>Defines styles for menu item in disabed state</entry> + </row> + <row> + <entry>rich-menu-item-enabled</entry> + <entry>Defines styles for menu item in enabled state</entry> + </row> + <row> + <entry>rich-menu-item-hover</entry> + <entry>Defines styles for menu item on hover event</entry> + </row> + <row> + <entry>rich-menu-item-icon</entry> + <entry>Defines styles for icon in menu item</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a menu item label</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-menu-item-label</entry> + <entry>Defines styles for menu item label</entry> + </row> + <row> + <entry>rich-menu-item-label-disabled</entry> + <entry>Defines styles for menu item label in disabled state</entry> + </row> + <row> + <entry>rich-menu-item-label-selected</entry> + <entry>Defines styles for menu item label already selected</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a menu item icon</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-menu-item-icon-disabled</entry> + <entry>Defines styles for icon of menu item in disabled state</entry> + </row> + <row> + <entry>rich-menu-item-icon-selected</entry> + <entry>Defines styles for icon of menu item in selected state</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a group element</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-menu-group</entry> + <entry>Defines styles for menu group</entry> + </row> + <row> + <entry>rich-menu-group-disabled</entry> + <entry>Defines styles for menu group in disabled state</entry> + </row> + <row> + <entry>rich-menu-group-selected</entry> + <entry>Defines styles for menu group in selected state</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a separator</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-menu-separator</entry> + <entry>Defines styles for menu separator</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a popup element</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-menu-popup</entry> + <entry>Defines styles for popup element</entry> + </row> + </tbody> + </tgroup> + </table> + </section> +</section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataDefinitionList.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataDefinitionList.desc.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataDefinitionList.desc.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -13,7 +13,7 @@ <title>DataDefinitionList component</title> <mediaobject> <imageobject> - <imagedata fileref="images/datadefinitionlist1.gif"/> + <imagedata fileref="images/datadefinitionlist1.png"/> </imageobject> </mediaobject> </figure> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -50,8 +50,8 @@ </para> <programlisting role="XML"><![CDATA[... <rich:dataDefinitionList value="#{bean.capitals}" var="caps"> - <f:facet name="term">United States Capitals</f:facet> - <h:outputText value="#{caps.name}"/> + <f:facet name="term">Cars</f:facet> + <h:outputText value="#{car.model}"/> </rich:dataDefinitionList> ... ]]></programlisting> @@ -71,47 +71,114 @@ </section> <section> <title>Details of Usage</title> -<para>The component takes a list from a model and outputs it as an ordered list. The component also has - similar to ordinary UIData components output ways:</para> -<itemizedlist> -<listitem>A header and footer output</listitem> -<listitem>Limitation of the output elements (the <emphasis ><property>&quot;elements&quot;</property></emphasis> attribute) and definition of the first - element</listitem> - <listitem>Binding to scrolling components of list pages</listitem> - </itemizedlist> - <para>It allows definition inside a facet with the <emphasis><property>&quot;term&quot;</property></emphasis> name to add HTML DT elements into a list.</para> - <para>The component is created basing on the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> component and as a result the component could - be partially updated with AJAX.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para>The <emphasis role="bold"> + <property>&lt;rich:dataDefinitionList&gt;</property> + </emphasis> component allows to generate an definition list from a model.</para> + <para>The component has the <emphasis> + <property>&quot;term&quot;</property> + </emphasis> facet, which corresponds to the <emphasis> + <property>&quot;type&quot;</property> + </emphasis> parameter for the <emphasis> + <property>&quot;DT&quot;</property> + </emphasis> HTML element.</para> + <para>Here is an example:</para> + <programlisting role="XML"><![CDATA[... - <rich:dataDefinitionList value="#{bean.capitals}" var="caps" ajaxKeys="#{listBean.list}" + <h:form> + <rich:dataDefinitionList var="car" value="#{dataTableScrollerBean.allCars}" rows="5" first="4" title="Cars"> + <f:facet name="term"> + <h:outputText value="#{car.make} #{car.model}"></h:outputText> + </f:facet> + <h:outputText value="Price:" styleClass="label"></h:outputText> + <h:outputText value="#{car.price} " /><br/> + <h:outputText value="Mileage:" styleClass="label"></h:outputText> + <h:outputText value="#{car.mileage} " /><br/> + </rich:dataDefinitionList> + </h:form> +... +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Component usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datadefinitionlist1.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example the <emphasis> + <property>&quot;rows&quot;</property> + </emphasis> attribute limits number of output elements of the list.</para> + + <para><emphasis> + <property>&quot;first&quot;</property> + </emphasis> attribute defines first element for output. <emphasis> + <property>&quot;title&quot;</property> + </emphasis> are used for popup title.</para> + + <para>The component was created basing on the <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> component and as a result it could be partially updated with Ajax. <emphasis> + <property>&quot;ajaxKeys&quot;</property> + </emphasis> attribute allows to define rows that are updated after an Ajax request.</para> + <para>Here is an example:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <rich:dataDefinitionList value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" binding="#{listBean.dataList}" id="list"> - <h:outputText value="#{caps.name}"/> + ... </rich:dataDefinitionList> ... <a4j:commandButton action"#{listBean.action}" reRender="list" value="Submit"/> ... ]]></programlisting> -<para>Here during the action is processed the ajaxKeys set is composed into a list and then update - specified for the whole table actually happens only for the chosen set of rows.</para> - </section> + + <para> In the example <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute contains value of <emphasis> + <property>&quot;id&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:dataDefinitionList&gt;</property> + </emphasis> component. As a result the component is updated after an Ajax request.</para> + +</section> + <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all dataDefinitionList at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis - ><property>style classes</property></emphasis> used by the dataDefinitionList to your page style sheets</listitem> - </itemizedlist> + + <title>Look-and-Feel Customization</title> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:dataDefinitionList&gt;</property> + </emphasis> components at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:dataDefinitionList&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> - </section> + </section> + <section> <title>Definition of Custom Style Classes</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -1,6 +1,11 @@ <?xml version='1.0' encoding='UTF-8'?> <section> - + <sectioninfo> + <keywordset> + <keyword>rich:dataFilterSlider</keyword> + <keyword>HtmldataFilterSlider</keyword> + </keywordset> + </sectioninfo> <table> <title>Component identification parameters </title> <tgroup cols="2"> @@ -43,12 +48,8 @@ <emphasis role="bold">Example:</emphasis> </para> <programlisting role="XML"><![CDATA[... - <rich:dataFilterSlider sliderListener="#{mybean.doSlide}" - startRange="0" - endRange="50000" - increment="10000" - handleValue="1" - /> + <rich:dataFilterSlider sliderListener="#{mybean.doSlide}" startRange="0" + endRange="50000" increment="10000" handleValue="1" /> ... ]]></programlisting> </section> @@ -66,10 +67,11 @@ </section> <section> <title>Details of Usage</title> - <para>The <property>dataFilterSlider</property> component is bound to some UIData component - using a <emphasis> + <para>The <emphasis role="bold"> + <property>dataFilterSlider</property> + </emphasis> component is bound to some UIData component using a <emphasis> <property>&quot;for&quot;</property> - </emphasis> attribute and filters data in this table. </para> + </emphasis> attribute and filters data in a table. </para> <para> <emphasis role="bold">Example:</emphasis> </para> @@ -123,13 +125,25 @@ defined.</para> </section> <section> + <title>Look-and-Feel Customization</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:dataFilterSlider&gt;</property> + </emphasis> component has no skin parameters and special <emphasis> + <property>style classes</property></emphasis>, as it consists of one element generated with a your method on the server. To + define some style properties such as an indent or a border, it's possible to use <emphasis> + <property>&quot;style&quot;</property> + </emphasis> and <emphasis> + <property>&quot;styleClass&quot;</property> + </emphasis> attributes on the component.</para> + </section> + <section> <title>Relevant Resources Links</title> <para> <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataFilterS... - - ><property>&lt;rich:dataFilterSlider&gt;</property></emphasis> usage and sources for the given example. - </para> + >Here</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dataFilterSlider&gt;</property> + </emphasis> usage and sources for the given example. </para> </section> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataGrid.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataGrid.desc.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataGrid.desc.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -13,7 +13,7 @@ <title>DataGrid component</title> <mediaobject> <imageobject> - <imagedata fileref="images/datagrid1.gif"/> + <imagedata fileref="images/datagrid1.png"/> </imageobject> </mediaobject> </figure> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataGrid.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataGrid.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataGrid.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -1,143 +1,236 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>grid</keyword> -<keyword>rich:dataGrid</keyword> -<keyword>HtmlDataGrid</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.DataGrid</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDataGrid</entry> - </row> - <row> + <sectioninfo> + <keywordset> + <keyword>grid</keyword> + <keyword>rich:dataGrid</keyword> + <keyword>HtmlDataGrid</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.DataGrid</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDataGrid</entry> + </row> + <row> <entry>component-family</entry> <entry>org.richfaces.DataGrid</entry> - </row> - <row> + </row> + <row> <entry>renderer-type</entry> <entry>org.richfaces.DataGridRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DataGridTag</entry> - </row> - </tbody> - </tgroup> - </table> - + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DataGridTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <property>dataGrid</property> on a page, use the following syntax:</para> + <para>To create the simplest variant of <property>dataGrid</property> on a page, use the + following syntax:</para> <para> <emphasis role="bold">Example:</emphasis> </para> <programlisting role="XML"><![CDATA[... - <rich:dataGrid value="#{bean.capitals}" var="caps" columns="4"> - <h:outputText value="#{caps.name}"/> + <rich:dataGrid value="#{dataTableScrollerBean.allCars}" var="car"> + <h:outputText value="#{car.model}"/> </rich:dataGrid> ... ]]></programlisting> </section> <section> - <title>Creating the Component Dynamically Using Java</title> + <title>Creating the Component Dynamically Using Java</title> <para> <emphasis role="bold">Example:</emphasis> </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDataGrid; + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDataGrid; ... HtmlDataGrid myList = new HtmlDataGrid(); ... ]]></programlisting> -</section> -<section> -<title>Details of Usage</title> -<para>The component takes a list from a model and outputs it the same way as with <emphasis role="bold"><property>&lt;h:PanelGrid&gt;</property></emphasis> - for inline data. To define grid properties and styles, use the same definitions as for <emphasis role="bold"><property>&lt;h:panelGrid&gt;</property>.</emphasis> - The component also has similar to ordinary UIData components output ways.</para> -<itemizedlist> -<listitem>A header and footer output</listitem> -<listitem>Limitation of the output elements (the <emphasis ><property>&quot;elements&quot;</property></emphasis> attribute) and definition of the first - element</listitem> - <listitem>Binding to scrolling components of list pages</listitem> - </itemizedlist> - <para>The component is created basing on the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> component and as a result the component could - be partially updated with AJAX.</para> - <para>Here is an example for <link linkend="dataGrid">the first</link> screenshot:</para> + </section> + <section> + <title>Details of Usage</title> + <para>The component takes a list from a model and outputs it the same way as with <emphasis + role="bold"> + <property>&lt;h:panelGrid&gt;</property> + </emphasis> for inline data. To define grid properties and styles, use the same definitions as + for <emphasis role="bold"><property>&lt;h:panelGrid&gt;</property>.</emphasis></para> + <para>The component allows to:</para> + <itemizedlist> + <listitem>Use <emphasis> + <property>&quot;header&quot;</property> + </emphasis> and <emphasis> + <property>&quot;footer&quot;</property> + </emphasis> facets for output</listitem> + <listitem>Limit number of output elements (<emphasis> + <property>&quot;elements&quot;</property> + </emphasis> attribute) and define first element for output (<emphasis> + <property>&quot;first&quot;</property> + </emphasis> attribute)</listitem> + <listitem>Bind pages with <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> component</listitem> + </itemizedlist> + <para>Here is an example:</para> + <para> <emphasis role="bold">Example:</emphasis> </para> - <programlisting role="XML"><![CDATA[... - <rich:dataGrid value="#{bean.capitals}" var="caps" ajaxKeys="#{listBean.list}" - binding="#{listBean.dataList}" id="grid" elements="20" columns="4"> - <h:graphicImage value="#{cap.stateFlag}"/> - <h:outputText value="#{cap.name}"/> - <h:outputText value="#{cap.state}"/> - <h:outputText value="#{cap.timeZone}"/> + + <programlisting role="XML"><![CDATA[... + <rich:panel style="width:150px;height:200px;"> + <h:form> + <rich:dataGrid value="#{dataTableScrollerBean.allCars}" var="car" columns="2" elements="4" first="1"> + <f:facet name="header"> + <h:outputText value="Car Store"></h:outputText> + </f:facet> + <rich:panel> + <f:facet name="header"> + <h:outputText value="#{car.make} #{car.model}"></h:outputText> + </f:facet> + <h:panelGrid columns="2"> + <h:outputText value="Price:" styleClass="label"></h:outputText> + <h:outputText value="#{car.price}"/> + <h:outputText value="Mileage:" styleClass="label"></h:outputText> + <h:outputText value="#{car.mileage}"/> + </h:panelGrid> + </rich:panel> + <f:facet name="footer"> + <rich:datascroller></rich:datascroller> + </f:facet> + </rich:dataGrid> + </h:form> + </rich:panel> +... +]]></programlisting> + <para>This is a result:</para> + + <figure> + <title>Component usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datagrid2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>The component was created basing on the <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> component and as a result it could be partially updated with Ajax. <emphasis> + <property>&quot;ajaxKeys&quot;</property> + </emphasis> attribute allows to define rows that are updated after an Ajax request.</para> + <para>Here is an example:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <rich:dataGrid value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" + binding="#{listBean.dataGrid}" id="grid" elements="4" columns="2"> + ... </rich:dataGrid> ... <a4j:commandButton action"#{listBean.action}" reRender="grid" value="Submit"/> ... ]]></programlisting> -<para>In the example there is an output of a grid with four columns and output limitation to 20 elements. -But when the action is processed the ajaxKeys set is composed and then update specified for the whole table - actually happens only for the chosen set of elements.</para> - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all dataGrids at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis - ><property>style classes</property></emphasis> used by the dataGrid to your page style sheets</listitem> - </itemizedlist> - - </section> - <section> - <title>Definition of Custom Style Classes</title> - - - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:dataGrid&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names and define necessary properties in them.</para> - - <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:dataGrid&gt;</property> - </emphasis> components, define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:dataGrid&gt;</property> - </emphasis>attributes.</para> - </section> + + <para> In the example <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute contains value of <emphasis> + <property>&quot;id&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis> component. As a result the component is updated after an Ajax request.</para> + </section> + <section> + <title>Look-and-Feel Customization</title> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis> components at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + + </section> + <section> + <title>Skin Parameters Redefinition</title> + + <para>Skin parameters redefinition for <emphasis role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis> are the same as for the <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> + <link linkend="SPR">component</link>.</para> + </section> + + <section> + <title>Definition of Custom Style Classes</title> + + <para>Custom style classes for <emphasis role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis> are the same as for the <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> + <link linkend="DofCCS">component</link>. </para> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis>attributes.</para> + </section> + <section> <title>Relevant Resources Links</title> <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataGrid.js... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:dataGrid&gt;</property></emphasis> usage and sources for the given example. </para> - </section> + >Here</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> </section> - \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataList.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataList.desc.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataList.desc.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -10,10 +10,10 @@ <para>The component for unordered lists rendering that allows choosing data from a model and obtains built-in support of Ajax updates.</para> <figure> - <title>DataList component</title> + <title>dataList component</title> <mediaobject> <imageobject> - <imagedata fileref="images/datalist1.gif"/> + <imagedata fileref="images/datalist1.png"/> </imageobject> </mediaobject> </figure> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataList.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataList.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataList.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -1,171 +1,246 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>grid</keyword> -<keyword>rich:dataList</keyword> -<keyword>HtmlDataList</keyword> -<keyword>unordered list</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.DataList</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDataList</entry> - </row> - <row> + <sectioninfo> + <keywordset> + <keyword>grid</keyword> + <keyword>rich:dataList</keyword> + <keyword>HtmlDataList</keyword> + <keyword>unordered list</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.DataList</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDataList</entry> + </row> + <row> <entry>component-family</entry> <entry>org.richfaces.DataList</entry> - </row> - <row> + </row> + <row> <entry>renderer-type</entry> <entry>org.richfaces.DataListRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DataListTag</entry> - </row> - </tbody> - </tgroup> - </table> - + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DataListTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <property>dataList</property> on a page, use the following syntax:</para> + <para>To create the simplest variant of <property>dataList</property> on a page, use the + following syntax:</para> <para> <emphasis role="bold">Example:</emphasis> </para> <programlisting role="XML"><![CDATA[... - <rich:dataList value="#{bean.capitals}" var="caps"> - <h:outputText value="#{caps.name}"/> + <rich:dataList var="car" value="#{dataTableScrollerBean.allCars}" > + <h:outputText value="#{car.model}"/> </rich:dataList> ... ]]></programlisting> </section> <section> - <title>Creating the Component Dynamically Using Java</title> + <title>Creating the Component Dynamically Using Java</title> <para> <emphasis role="bold">Example:</emphasis> </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDataList; + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDataList; ... HtmlDataList myList = new HtmlDataList(); ... ]]></programlisting> -</section> -<section> -<title>Details of Usage</title> -<para>The component takes a list from a model and outputs it as an ordered list. The component also has -similar to ordinary UIData components output ways:</para> -<itemizedlist> -<listitem>A header and footer output</listitem> -<listitem>Limitation of the output elements (the <emphasis ><property>&quot;elements&quot;</property></emphasis> attribute) and definition of the first - element</listitem> - <listitem>Binding to scrolling components of list pages</listitem> - </itemizedlist> - <para>The component has the <emphasis ><property>&quot;type&quot;</property></emphasis> attribute corresponding to the <emphasis><property>&quot;ul&quot;</property></emphasis> HTML element.</para> - <para>The component is created basing on the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> component and as a result the component could - be partially updated with AJAX.</para> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> component allows to generate a list from a model.</para> + <para>The component has the <emphasis> + <property>&quot;type&quot;</property> + </emphasis> attribute, which corresponds to the <emphasis> + <property>&quot;type&quot;</property> + </emphasis> parameter for the <emphasis> + <property>&quot;UL&quot;</property> + </emphasis> HTML element and defines a marker type. Possible values for <emphasis> + <property>&quot;type&quot;</property> + </emphasis> attribute are: <property>&quot;disc&quot;</property>, + <property>&quot;circle&quot;</property>, + <property>&quot;square&quot;</property>.</para> + <para>Here is an example:</para> + <programlisting role="XML"><![CDATA[... + <h:form> + <rich:dataList var="car" value="#{dataTableScrollerBean.allCars}" rows="5" type="disc" title="Car Store"> + <h:outputText value="#{car.make} #{car.model}"/><br/> + <h:outputText value="Price:" styleClass="label"></h:outputText> + <h:outputText value="#{car.price} "/><br/> + <h:outputText value="Mileage:" styleClass="label"></h:outputText> + <h:outputText value="#{car.mileage} "/><br/> + </rich:dataList> +</h:form> +... +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Component usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datalist2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example the <emphasis> + <property>&quot;rows&quot;</property> + </emphasis> attribute limits number of output elements of the list.</para> + + <para><emphasis> + <property>&quot;first&quot;</property> + </emphasis> attribute defines first element for output. <emphasis> + <property>&quot;title&quot;</property> + </emphasis> are used for popup title. See picture below:</para> + + <figure> + <title>Component usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datalist4.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>The component was created basing on the <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> component and as a result it could be partially updated with Ajax. <emphasis> + <property>&quot;ajaxKeys&quot;</property> + </emphasis> attribute allows to define rows that are updated after an Ajax request.</para> + <para>Here is an example:</para> + <para> <emphasis role="bold">Example:</emphasis> </para> - <programlisting role="XML"><![CDATA[... - <rich:dataList value="#{bean.capitals}" var="caps" ajaxKeys="#{listBean.list}" - binding="#{listBean.dataList}" id="list"> - <h:outputText value="#{caps.name}"/> + <programlisting role="XML"><![CDATA[... + <rich:dataList value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" + binding="#{listBean.dataList}" id="list" rows="5" type="disc"> + ... </rich:dataList> ... - <a4j:commandButton action"#{listBean.action}" reRender="list" value="Submit"> + <a4j:commandButton action"#{listBean.action}" reRender="list" value="Submit"/> ... ]]></programlisting> -<para>Here during the action is processed the ajaxKeys set is composed into a list and then update - specified for the whole table actually happens only for the chosen set of rows.</para> - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all dataLists at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis - ><property>style classes</property></emphasis> used by the dataList to your page style sheets</listitem> - </itemizedlist> - - </section> - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/datalist2.gif"/> - </imageobject> - </mediaobject> - </figure> - - <table> - <title>Classes names that define a list appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-datalist</entry> - <entry>Defines styles for an html &lt;ul&gt; element</entry> - </row> - <row> - <entry>rich-list-item</entry> - <entry>Defines styles for an html &lt;li&gt; element</entry> - </row> - </tbody> - </tgroup> - </table> - - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:dataList&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names and define necessary properties in them.</para> - - <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:dataList&gt;</property> - </emphasis> components, define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:dataList&gt;</property> - </emphasis>attributes.</para> - </section> + + <para> In the example <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute contains value of <emphasis> + <property>&quot;id&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> component. As a result the component is updated after an Ajax request.</para> + </section> <section> + + <title>Look-and-Feel Customization</title> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> components at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Definition of Custom Style Classes</title> + + <para>On the screenshot there are classes names that define styles for component elements.</para> + + <figure> + <title>Style classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datalist3.png"/> + </imageobject> + </mediaobject> + </figure> + + <table> + <title>Classes names that define a list appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-datalist</entry> + <entry>Defines styles for an html &lt;ul&gt; element</entry> + </row> + <row> + <entry>rich-list-item</entry> + <entry>Defines styles for an html &lt;li&gt; element</entry> + </row> + </tbody> + </tgroup> + </table> + + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis>attributes.</para> + </section> + <section> <title>Relevant Resources Links</title> <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataLists.j... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:dataList&gt;</property></emphasis> usage and sources for the given example. </para> - </section> + >Here</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> </section> - \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataOrderedList.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataOrderedList.desc.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataOrderedList.desc.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -13,7 +13,7 @@ <title>DataOrderedList component</title> <mediaobject> <imageobject> - <imagedata fileref="images/dataorderedlist1.gif"/> + <imagedata fileref="images/dataorderedlist1.png"/> </imageobject> </mediaobject> </figure> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -1,169 +1,236 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>rich:dataOrderedList</keyword> -<keyword>HtmlDataOrderedList</keyword> -<keyword>ordered list</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.DataOrderedList</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDataOrderedList</entry> - </row> - <row> + <sectioninfo> + <keywordset> + <keyword>rich:dataOrderedList</keyword> + <keyword>HtmlDataOrderedList</keyword> + <keyword>ordered list</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.DataOrderedList</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDataOrderedList</entry> + </row> + <row> <entry>component-family</entry> <entry>org.richfaces.DataOrderedList</entry> - </row> - <row> + </row> + <row> <entry>renderer-type</entry> <entry>org.richfaces.DataOrderedListRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DataOrderedListTag</entry> - </row> - </tbody> - </tgroup> - </table> - + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DataOrderedListTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <property>dataOrderedList</property> on a page, use the following syntax:</para> + <para>To create the simplest variant of <property>dataOrderedList</property> on a page, use the + following syntax:</para> <para> <emphasis role="bold">Example:</emphasis> </para> <programlisting role="XML"><![CDATA[... - <rich:dataOrderedList value="#{bean.capitals}" var="caps"> - <h:outputText value="#{caps.name}"/> + <rich:dataOrderedList var="car" value="#{dataTableScrollerBean.allCars}" > + <h:outputText value="#{car.model}"/> </rich:dataOrderedList> ... ]]></programlisting> </section> <section> - <title>Creating the Component Dynamically Using Java</title> + <title>Creating the Component Dynamically Using Java</title> <para> <emphasis role="bold">Example:</emphasis> </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDataOrderedList; + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDataOrderedList; ... HtmlDataOrderedList myList = new HtmlDataOrderedList(); ... ]]></programlisting> -</section> -<section> -<title>Details of Usage</title> -<para>The component takes a list from a model and outputs it as an ordered list. The component also has -similar to ordinary UIData components output ways:</para> -<itemizedlist> -<listitem>Header and footer output</listitem> -<listitem>Limitation of the output elements (the <emphasis ><property>&quot;elements&quot;</property></emphasis> attribute) and definition of the first - element</listitem> - <listitem>Binding to scrolling components of list pages</listitem> - </itemizedlist> - <para>The component has the <emphasis ><property>&quot;type&quot;</property></emphasis> attribute corresponding to the <emphasis><property>&quot;ul&quot;</property></emphasis> HTML element.</para> - <para>The component is created basing on the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> component and as a result the component could - be partially updated with AJAX.</para> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis> component allows to generate an ordered list from a model.</para> + <para>The component has the <emphasis> + <property>&quot;type&quot;</property> + </emphasis> attribute, which corresponds to the <emphasis> + <property>&quot;type&quot;</property> + </emphasis> parameter for the <emphasis> + <property>&quot;OL&quot;</property> + </emphasis> HTML element and defines a marker type. Possible values for <emphasis> + <property>&quot;type&quot;</property> + </emphasis> attribute are: <property>&quot;A&quot;</property>, + <property>&quot;a&quot;</property>, <property>&quot;I&quot;</property>, + <property>&quot;i&quot;</property>,<property>&quot;1&quot;</property>.</para> + <para>Here is an example:</para> + <programlisting role="XML"><![CDATA[... + <h:form> + <rich:dataOrderedList var="car" value="#{dataTableScrollerBean.allCars}" rows="5" type="1" title="Car Store"> + <h:outputText value="#{car.make} #{car.model}"/><br/> + <h:outputText value="Price:" styleClass="label"></h:outputText> + <h:outputText value="#{car.price} " /><br/> + <h:outputText value="Mileage:" styleClass="label"></h:outputText> + <h:outputText value="#{car.mileage} " /><br/> + </rich:dataOrderedList> + </h:form> +... +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Component usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataorderedlist1.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example the <emphasis> + <property>&quot;rows&quot;</property> + </emphasis> attribute limits number of output elements of the list.</para> + + <para><emphasis> + <property>&quot;first&quot;</property> + </emphasis> attribute defines first element for output. <emphasis> + <property>&quot;title&quot;</property> + </emphasis> are used for popup title.</para> + + <para>The component was created basing on the <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> component and as a result it could be partially updated with Ajax. <emphasis> + <property>&quot;ajaxKeys&quot;</property> + </emphasis> attribute allows to define rows that are updated after an Ajax request.</para> + <para>Here is an example:</para> + <para> <emphasis role="bold">Example:</emphasis> </para> - <programlisting role="XML"><![CDATA[... - <rich:dataOrderedList value="#{bean.capitals}" var="caps" ajaxKeys="#{listBean.list}" + <programlisting role="XML"><![CDATA[... + <rich:dataOrderedList value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" binding="#{listBean.dataList}" id="list"> - <h:outputText value="#{caps.name}"/> + ... </rich:dataOrderedList> ... - <a4j:commandButton action"#{listBean.action}" reRender="list" value="Submit"> + <a4j:commandButton action"#{listBean.action}" reRender="list" value="Submit"/> ... ]]></programlisting> -<para>Here during the action is processed the ajaxKeys set is composed into a list and then update - specified for the whole table actually happens only for the chosen set of rows.</para> - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all dataOrderedLists at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis - ><property>style classes</property></emphasis> used by the dataOrderedList to your page style sheets</listitem> - </itemizedlist> - - </section> - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataorderedlist2.png"/> - </imageobject> - </mediaobject> - </figure> - - <table> - <title>Classes names that define a list appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-orderedlist</entry> - <entry>Defines styles for an html &lt;ol&gt; element</entry> - </row> - <row> - <entry>rich-list-item</entry> - <entry>Defines styles for an html &lt;li&gt; element</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:dataOrderedList&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names and define necessary properties in them.</para> - - <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:dataOrderedList&gt;</property> - </emphasis> components, define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:dataOrderedList&gt;</property> - </emphasis>attributes.</para> - </section> + <para> In the example <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute contains value of <emphasis> + <property>&quot;id&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis> component. As a result the component is updated after an Ajax request.</para> + </section> <section> + <title>Look-and-Feel Customization</title> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis> components at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> + + <section> + <title>Definition of Custom Style Classes</title> + + <para>On the screenshot there are classes names that define styles for component elements.</para> + + <figure> + <title>Style classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataorderedlist2.png"/> + </imageobject> + </mediaobject> + </figure> + + <table> + <title>Classes names that define a list appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-orderedlist</entry> + <entry>Defines styles for an html &lt;ol&gt; element</entry> + </row> + <row> + <entry>rich-list-item</entry> + <entry>Defines styles for an html &lt;li&gt; element</entry> + </row> + </tbody> + </tgroup> + </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis>attributes.</para> + </section> + <section> <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataLists.j... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:dataOrderedList &gt;</property></emphasis> usage and sources for the given example. </para> - </section> + <para><ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataLists.j... + >Here</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dataOrderedList &gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> </section> - \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -1,29 +1,31 @@ <?xml version="1.0" encoding="UTF-8"?> <section> -<sectioninfo> -<keywordset> -<keyword>dataTable</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>The component for tables rendering that allows choosing data from a model and obtains - built-in support of Ajax updates.</para> - <figure> - <title>DataTable component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/datatable1.gif"/> - </imageobject> - </mediaobject> - </figure> + <sectioninfo> + <keywordset> + <keyword>dataTable</keyword> + </keywordset> + </sectioninfo> + <section> + <title>Description</title> + <para>The component for tables rendering that allows choosing data from a model and obtains + built-in support of Ajax updates.</para> + <figure> + <title>DataTable component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datatable1.gif"/> + </imageobject> + </mediaobject> + </figure> </section> <section> - <title>Key Features</title> - <itemizedlist> - <listitem>A completely skinned table and child elements</listitem> - <listitem>Possibility to insert the complex subcomponents <emphasis><property>&quot;colGroup&quot;</property></emphasis> and &quot;subTable&quot;</listitem> - <listitem>Possibility to update a limited set of strings with AJAX</listitem> - </itemizedlist> + <title>Key Features</title> + <itemizedlist> + <listitem>A completely skinned table and child elements</listitem> + <listitem>Possibility to insert the complex subcomponents + <property>&quot;colGroup&quot;</property> and + <property>&quot;subTable&quot;</property></listitem> + <listitem>Possibility to update a limited set of strings with AJAX</listitem> + </itemizedlist> + </section> </section> -</section> \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataTable.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataTable.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataTable.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -52,7 +52,9 @@ </para> <programlisting role="XML"><![CDATA[... <rich:dataTable value="#{capitalsBean.capitals}" var="capitals"> - <!--...//Set of columns and header/footer facets--> + <rich:column> + ... + </rich:column> </rich:dataTable> ... ]]></programlisting> @@ -71,63 +73,123 @@ </section> <section> <title>Details of Usage</title> - <para>The <property>table</property> component is very similar to the custom JSF dataTable one, - except for the common peculiarities of any rich component:</para> - <itemizedlist> - <listitem>Skin support. The <property>table</property> completely meets a three-class - principle of Rich Faces skinnability</listitem> - <listitem>Support of Ajax updates for a limited set of strings</listitem> - </itemizedlist> - <para>Skins support is described in the <link linkend="ArchitectureOverview">corresponding - section</link>. Ajax support is possible because the component is created basing on the - <emphasis role="bold"> + <para>The <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> component is similar to the <emphasis role="bold"> + <property>&lt;h:dataTable&gt;</property> + </emphasis> one, except Ajax support and skinnability. Ajax support is possible, because the + component was created basing on the <emphasis role="bold"> <property>&lt;a4j:repeat&gt;</property> - </emphasis> component and as a result the component has its possibilities of Ajax updates for - a limited set of strings. The component is implemented with the <emphasis> + </emphasis> component and as a result it could be partially updated with Ajax. <emphasis> <property>&quot;ajaxKeys&quot;</property> - </emphasis> attribute for a <property>table</property> and in contrast to the <emphasis - role="bold"> - <property>&lt;a4j:repeat&gt;</property> - </emphasis> outputs the standard HTML structure for table rendering.</para> + </emphasis> attribute allows to define rows that is updated after an Ajax request.</para> + <para>Here is an example:</para> + <para> <emphasis role="bold">Example:</emphasis> </para> <programlisting role="XML"><![CDATA[... <rich:dataTable value="#{capitalsBean.capitals}" var="capitals" - ajaxKeys="#{bean.ajaxSet}" binding="#{bean.table}" id="table"> - <!--Set of columns and header/footer facets--> + ajaxKeys="#{bean.ajaxSet}" binding="#{bean.table}" id="table"> + ... </rich:dataTable> ... - <a4j:commandButton action="#{bean.someAction}" reRender="table"/> + <a4j:commandButton action"#{tableBean.action}" reRender="table" value="Submit"/> ... ]]></programlisting> - <para>For such a table during <property>someAction</property> method processing called with AJAX - request when the key is pressed it&apos;s possible to fill in lot&apos;s of ajaxKeys - with strings indices that are to be updated. A resulting output on the client contains only - required strings and they are updated in the tree, even when update is specified for the whole - table.</para> + <para> In the example <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute contains value of <emphasis> + <property>&quot;id&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> component. As a result the component is updated after an Ajax request.</para> + + <para id="table_ex">The component allows to use <emphasis> + <property>&quot;header&quot;</property> + </emphasis>, <emphasis> + <property>&quot;footer&quot;</property> + </emphasis> and <emphasis> + <property>&quot;caption&quot;</property> + </emphasis> facets for output. See an example below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> + <f:facet name="caption"><h:outputText value="United States Capitals" /></f:facet> + <f:facet name="header"><h:outputText value="Capitals and States Table" /></f:facet> + <rich:column> + <f:facet name="header">State Flag</f:facet> + <h:graphicImage value="#{cap.stateFlag}"/> + <f:facet name="footer">State Flag</f:facet> + </rich:column> + <rich:column> + <f:facet name="header">State Name</f:facet> + <h:outputText value="#{cap.state}"/> + <f:facet name="footer">State Name</f:facet> + </rich:column> + <rich:column > + <f:facet name="header">State Capital</f:facet> + <h:outputText value="#{cap.name}"/> + <f:facet name="footer">State Capital</f:facet> + </rich:column> + <rich:column> + <f:facet name="header">Time Zone</f:facet> + <h:outputText value="#{cap.timeZone}"/> + <f:facet name="footer">Time Zone</f:facet> + </rich:column> + <f:facet name="footer"><h:outputText value="Capitals and States Table" /></f:facet> + </rich:dataTable> +... +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Component usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datatable3.png"/> + </imageobject> + </mediaobject> + </figure> + </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis> - <property>style class redefinition method</property> - </emphasis>.</para> - <para>Default style classes are mapped on <emphasis><property>skin - parameters</property>.</emphasis></para> - <para>To redefine appearance of all dataTables at once, there are two ways:</para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis> - <property>style classes</property> - </emphasis> used by the dataTable to your page style sheets</listitem> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> component</para> + </listitem> </itemizedlist> </section> - - <section> + + <section id="SPR"> <title>Skin Parameters Redefinition</title> - + <table> <title>Skin parameters redefinition for a table</title> <tgroup cols="2"> @@ -145,7 +207,7 @@ </tbody> </tgroup> </table> - + <table> <title>Skin parameters redefinition for a header</title> <tgroup cols="2"> @@ -163,7 +225,7 @@ </tbody> </tgroup> </table> - + <table> <title>Skin parameters redefinition for a footer</title> <tgroup cols="2"> @@ -181,7 +243,7 @@ </tbody> </tgroup> </table> - + <table> <title>Skin parameters redefinition for a column header</title> <tgroup cols="2"> @@ -199,7 +261,7 @@ </tbody> </tgroup> </table> - + <table> <title>Skin parameters redefinition for a column footer</title> <tgroup cols="2"> @@ -217,7 +279,7 @@ </tbody> </tgroup> </table> - + <table> <title>Skin parameters redefinition for cells</title> <tgroup cols="2"> @@ -243,14 +305,14 @@ </tbody> </tgroup> </table> - + </section> - - <section> + + <section id="DofCCS"> <title>Definition of Custom Style Classes</title> - + <para>On the screenshot there are classes names that define styles for component elements.</para> - + <figure> <title>DataTable class names</title> <mediaobject> @@ -259,9 +321,9 @@ </imageobject> </mediaobject> </figure> - + <table> - <title>Classes names that define a table appearance</title> + <title>Classes names that define a whole component appearance</title> <tgroup cols="2"> <thead> <row> @@ -278,15 +340,27 @@ <entry>rich-table-caption</entry> <entry>Defines styles for a &quot;caption&quot; facet element</entry> </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Classes names that define header and footer elements</title> + <tgroup cols="2"> + <thead> <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + <row> <entry>rich-table-header</entry> <entry>Defines styles for a table header row</entry> </row> + <row> - <entry>rich-table-headercell</entry> - <entry>Defines styles for a header cell</entry> - </row> - <row> <entry>rich-table-header-continue</entry> <entry>Defines styles for all header lines after the first</entry> </row> @@ -294,7 +368,40 @@ <entry>rich-table-subheader</entry> <entry>Defines styles for a column header</entry> </row> + <row> + <entry>rich-table-footer</entry> + <entry>Defines styles for a footer row</entry> + </row> + + <row> + <entry>rich-table-footer-continue</entry> + <entry>Defines styles for all footer lines after the first</entry> + </row> + <row> + <entry>rich-table-subfooter</entry> + <entry>Defines styles for a column footer</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Classes names that define rows and cells of a table</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-table-headercell</entry> + <entry>Defines styles for a header cell</entry> + </row> + + <row> <entry>rich-table-subheadercell</entry> <entry>Defines styles for a column header cell</entry> </row> @@ -310,59 +417,57 @@ <entry>rich-table-firstrow</entry> <entry>Defines styles for a table start row</entry> </row> + <row> - <entry>rich-table-footer</entry> - <entry>Defines styles for a footer row</entry> - </row> - <row> <entry>rich-table-footercell</entry> <entry>Defines styles for a footer cell</entry> </row> + <row> - <entry>rich-table-footer-continue</entry> - <entry>Defines styles for all footer lines after the first</entry> - </row> - <row> - <entry>rich-table-subfooter</entry> - <entry>Defines styles for a column footer</entry> - </row> - <row> <entry>rich-table-subfootercell</entry> <entry>Defines styles for a column footer cell</entry> </row> </tbody> </tgroup> </table> + <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + <property>&lt;rich:dataTable&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the same names and define necessary properties in them.</para> - + <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> components, define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis>attributes.</para> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> <para> <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... - - ><property>&lt;rich:dataTable&gt;</property></emphasis> usage and sources for the given example. </para> - <para>The article about <emphasis role="bold"><property>&lt;rich:dataTable&gt;</property></emphasis> - flexibility can be found <ulink url="http://labs.jboss.com/wiki/RichFacesArticleDataTable" - >here</ulink>.</para> - <para>More information about using <emphasis role="bold" - ><property>&lt;rich:dataTable&gt;</property></emphasis> and <emphasis role="bold" - ><property>&lt;rich:subTable&gt;</property></emphasis> could be found on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum.</ulink> + >Here</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> usage and sources for the given example. </para> + <para>The article about <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> flexibility can be found <ulink + url="http://labs.jboss.com/wiki/RichFacesArticleDataTable">h... + <para>More information about using <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis> could be found on the <ulink + url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... + >RichFaces Users Forum.</ulink> </para> - <para>How to use <emphasis role="bold"><property>&lt;rich:dataTable&gt;</property></emphasis> and <emphasis - role="bold"><property>&lt;rich:dataScroller&gt;</property></emphasis> in a context of Extended - Data Model see <ulink + <para>How to use <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;rich:dataScroller&gt;</property> + </emphasis> in a context of Extended Data Model see <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >here</ulink>.</para> + >here</ulink>.</para> </section> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/datascroller.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/datascroller.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/datascroller.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -75,7 +75,7 @@ <title>Details of Usage</title> <para>The <emphasis role="bold"> <property>&lt;rich:Datascroller&gt;</property> - </emphasis> component provides table scrolling functionalitity the same as tomahawk scroller but + </emphasis> component provides table scrolling functionalitity the same as TOMAHAWK scroller but with Ajax requests usage.</para> <para>The component should be placed into footer of the parent table or be bound to it with the <emphasis> <property>&quot;for&quot;</property> @@ -123,7 +123,7 @@ <f:facet name="last"> <h:outputText value="Last"/> </f:facet> - </rich:Datascroller> + </rich:datascroller> ... ]]></programlisting> <figure> @@ -201,18 +201,32 @@ </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis><property>style class - redefinition method</property>.</emphasis></para> - <para>Default style classes are mapped on <emphasis><property>skin - parameters</property>.</emphasis></para> - <para>To redefine appearance of all dataScrollers at once, there are two ways:</para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> <property>style classes</property> - </emphasis> used by the dataScroller to your page style sheets</listitem> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> component</para> + </listitem> </itemizedlist> </section> + <section> <title>Skin Parameters Redefinition</title> <table> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dndParam.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dndParam.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dndParam.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -169,7 +169,17 @@ if dragged content of a comp type is above the given drop zone that processes it on the next drop event.</para> </section> + <section> + <title>Look-and-Feel Customization</title> + + <para><emphasis role="bold"> + <property>&lt;rich:dndParam&gt;</property> + </emphasis> has no skin parameters and custom <property>style classes</property>, as the + component isn&apos;t visual.</para> + </section> + + <section> <title>Relevan Resources Links</title> <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragIndicator.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragIndicator.desc.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragIndicator.desc.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -7,19 +7,25 @@ </sectioninfo> <section> -<title>Description</title> - <para>This is a component for defining what appears under the mouse cursor - during drag-and-drop operations. The displayed drag indicator can show - information about the dragged elements.</para> + <title>Description</title> + <para>This is a component for defining what appears under the mouse cursor during drag-and-drop + operations. The displayed drag indicator can show information about the dragged elements.</para> <figure> <title>DragIndicator component</title> <mediaobject> <imageobject> - <imagedata fileref="images/dragIndicator1.gif" /> + <imagedata fileref="images/dragIndicator1.gif"/> </imageobject> </mediaobject> </figure> </section> -</section> \ No newline at end of file + <section> + <title>Key Features</title> + <itemizedlist> + <listitem>Customizable look and feel</listitem> + <listitem>Customizable marker according to the type of dragable elements</listitem> + </itemizedlist> + </section> +</section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragIndicator.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragIndicator.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragIndicator.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -147,23 +147,28 @@ <section> <title>Marker customization</title> - <para>The macro defenition <emphasis><property>&quot;marker&quot;</property></emphasis> can be customized depending on what a - draggable element is located over. For that you should define one of these three parameters - (specify a parameter with one of three names):</para> + <para>The macro defenition <emphasis> + <property>&quot;marker&quot;</property> + </emphasis> can be customized depending on what a draggable element is located over. For + that you should define one of these three parameters (specify a parameter with one of three + names):</para> <itemizedlist> <listitem>accept </listitem> </itemizedlist> - <para>Parameter will be set instead of {marker} into indicator when a draggable element is positioned over drop zone that accept this type of elements</para> + <para>Parameter will be set instead of {marker} into indicator when a draggable element is + positioned over drop zone that accept this type of elements</para> <itemizedlist> <listitem>reject</listitem> </itemizedlist> - <para>Parameter will be set instead of {marker} into indicator when a draggable element is positioned over drop zone that doesn&apos;t accept this type of elements </para> + <para>Parameter will be set instead of {marker} into indicator when a draggable element is + positioned over drop zone that doesn&apos;t accept this type of elements </para> <itemizedlist> <listitem>default</listitem> </itemizedlist> - <para>Parameter will be set instead of {marker} into indicator when a draggable element is positioned over all the rest of page elements</para> + <para>Parameter will be set instead of {marker} into indicator when a draggable element is + positioned over all the rest of page elements</para> </section> </section> @@ -244,17 +249,25 @@ </emphasis>component.</para> </section> - </section--> - - - <section> + </section--> + + <section> + <title>Look-and-Feel Customization</title> + <para>The <emphasis role="bold"><property>&lt;rich:dragIndicator&gt;</property></emphasis> component has no skin parameters and special <emphasis> + <property>style classes</property></emphasis>, as it consists of one element + generated with a your method on the server. To define some style properties such as an indent + or a border, it's possible to use <emphasis> + <property>&quot;style&quot;</property></emphasis> and <emphasis> + <property>&quot;styleClass&quot;</property></emphasis> attributes on the component.</para> + </section> + <section> <title>Relevant Resources Links</title> <para> <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... - - ><property>&lt;rich:dragIndicator&gt;</property></emphasis> usage and sources for the given example. - </para> + >Here</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dragIndicator&gt;</property> + </emphasis> usage and sources for the given example. </para> </section> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragListener.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragListener.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragListener.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -108,4 +108,13 @@ ]]></programlisting> </section> + <section> + <title>Look-and-Feel Customization</title> + + <para><emphasis role="bold"> + <property>&lt;rich:dragListener&gt;</property> + </emphasis> has no skin parameters and custom <property>style classes</property>, as the + component isn&apos;t visual.</para> + </section> + </chapter> \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragSupport.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragSupport.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dragSupport.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -194,15 +194,19 @@ <section> <title>Look-and-Feel Customization</title> - <para>The component doesn&apos;t have its own representation.</para> + <para><emphasis role="bold"> + <property>&lt;rich:dragSupport&gt;</property> + </emphasis> has no skin parameters and custom <property>style classes</property>, as the + component isn&apos;t visual.</para> </section> + <section> <title>Relevant Resources Links</title> <para> <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... - - ><property>&lt;rich:dragSupport&gt;</property></emphasis> usage and sources for the given example. - </para> + >Here</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dragSupport&gt;</property> + </emphasis> usage and sources for the given example. </para> </section> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -67,7 +67,7 @@ </rich:dropDownMenu> ... ]]></programlisting> - + </section> <section> @@ -119,7 +119,7 @@ <para> <emphasis role="bold">Example:</emphasis> </para> - + <programlisting role="XML"><![CDATA[... <rich:dropDownMenu event="onclick" value="Item1"> <!--Nested menu components--> @@ -274,7 +274,7 @@ <para> <emphasis role="bold">Example:</emphasis> </para> - + <programlisting role="XML"><![CDATA[... <rich:dropDownMenu value="Item1" direction="bottom-right" jointPoint="tr" horizontalOffset="-15" verticalOffset="0"> <!--Nested menu components--> @@ -294,15 +294,74 @@ </mediaobject> </figure> + <!--para> The <emphasis> + <property>&quot;disabled&quot;</property> + </emphasis> attribute is used for disabling whole <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;rich:menuGroup&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property>. + </emphasis> + </para> + <para>An example of a menu appearance with <emphasis> + <property>&quot;disabled&quot;</property> + </emphasis> attribute can be seen below.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML"><![CDATA[... + <rich:dropDownMenu value="Item1"> + <rich:menuItem id="menuItem1" value="Active1"/> + <rich:menuItem id="menuItem2" value="Disabled1" disabled="true"/> + <rich:menuGroup id="menuGroup1" value="Group1"> + <rich:menuItem id="menuGroup1Item1" value="Active"/> + <rich:menuItem id="menuGroup1Item2" value="Active"/> + </rich:menuGroup> + <rich:menuItem id="menuItem3" value="Active2"/> + <rich:menuGroup id="menuGroup1Dsbld" value="Group1 dsbld." disabled="true" /> + </rich:dropDownMenu> +... +]]></programlisting--> + + <para>The <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> component allows to use <emphasis> + <property>&quot;labelDisabled&quot;</property> + </emphasis>. It&apos; necessary to define <emphasis> + <property>&quot;disabled&quot;</property> + </emphasis> attribute as <property>&quot;true&quot;</property> for + <property>dropDownMenu</property>. An example is placed below.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML"><![CDATA[... + <rich:dropDownMenu disabled="true"> + <f:facet name="labelDisabled"> + <h:graphicImage value="/images/ico1.gif"/> + </f:facet> + <!--Nested menu components--> + </rich:dropDownMenu> +... +]]></programlisting> + </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a style class redefinition method. - Default style classes are mapped on skin parameters.</para> + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> - <para>There are two ways to redefine the appearance of all drop-down menus at once:</para> + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> components at once:</para> <itemizedlist> <listitem> @@ -310,7 +369,11 @@ </listitem> <listitem> - <para>Add to your style sheets style classes used by a drop-down menu</para> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> component</para> </listitem> </itemizedlist> </section> @@ -480,22 +543,30 @@ <row> <entry>rich-ddmenu-label</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a representation element</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a representation + element</entry> </row> <row> <entry>rich-ddmenu-label-select</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a selected representation - element</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a selected + representation element</entry> </row> <row> <entry>rich-ddmenu-label-unselect</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of an unselected representation - element </entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of an unselected + representation element </entry> </row> + + <row> + <entry>rich-ddmenu-label-disabled</entry> + + <entry>Defines styles for a wrapper &lt;div&gt; element of a disabled + representation element </entry> + </row> </tbody> </tgroup> </table> @@ -511,7 +582,7 @@ </imageobject> </mediaobject> </figure> - + <table> <title>Classes names that define a popup element</title> @@ -536,33 +607,37 @@ <entry>Defines styles for a general background list</entry> </row> - + <row> <entry>rich-menu-list-strut</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element for a strut of a popup list</entry> + + <entry>Defines styles for a wrapper &lt;div&gt; element for a strut of a popup + list</entry> </row> </tbody> </tgroup> </table> <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:dropDownMenu&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the same names and define necessary properties in them.</para> - + <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:dropDownMenu&gt;</property> - </emphasis> components, define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:dropDownMenu&gt;</property> - </emphasis>attributes.</para> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMen... you can see the example of <emphasis role="bold"><property>&lt;rich:dropDownMenu&gt;</property></emphasis> usage and sources for the given example. - </para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMen... + >Here</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> usage and sources for the given example. </para> </section> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropListener.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropListener.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropListener.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -108,4 +108,13 @@ ]]></programlisting> </section> + <section> + <title>Look-and-Feel Customization</title> + + <para><emphasis role="bold"> + <property>&lt;rich:dropListener&gt;</property> + </emphasis> has no skin parameters and custom <property>style classes</property>, as the + component isn&apos;t visual.</para> + </section> + </chapter> \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropSupport.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropSupport.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropSupport.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -241,7 +241,10 @@ <section> <title>Look-and-Feel Customization</title> - <para>The component doesn&apos;t have its own visual presentation.</para> + <para><emphasis role="bold"> + <property>&lt;rich:dropSupport&gt;</property> + </emphasis> has no skin parameters and custom <property>style classes</property>, as the + component isn&apos;t visual.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/effect.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/effect.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/effect.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -176,13 +176,42 @@ </itemizedlist> </para> + <para> You can use a set of effects directly without defining the <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis> component on a page if it&apos;s convenient for you. For that, load the + scriptaculous library to the page with the following code: </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<a4j:loadScript src="resource://scriptaculous/effect.js" /> +... +]]></programlisting> + <para> If you do use the <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis>component, there is no need to include this library because it’s already here. </para> + + <para>For more information look at <ulink + url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&... + Users Forum</ulink>.</para> </section> + <section> + <title>Look-and-Feel Customization</title> + + <para><emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis> has no skin parameters and custom <property>style classes</property>, as the + component isn&apos;t visual.</para> + </section> + + <section> <title>Relevant Resources Links</title> <para> <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/effect.jsf?... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:effect&gt;</property></emphasis> usage. </para> + >Here</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis> usage. </para> <para>How to save <emphasis role="bold"> <property>&lt;rich:effect&gt;</property> </emphasis>status see on the <ulink Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/gmap.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/gmap.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/gmap.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -157,14 +157,17 @@ </section> <section> <title>Look-and-Feel Customization</title> - <para><property>Gmap</property> component isn&apos;t tied to skin parameters, as there is no - additional elements on it, except the ones provided with <emphasis><property>Google - Map</property>.</emphasis></para> - </section> + <para><emphasis role="bold"> + <property>&lt;rich:gmap&gt;</property> + </emphasis> component isn&apos;t tied to skin parameters, as there is no additional + elements on it, except the ones provided with <emphasis><property>Google + Map</property>.</emphasis></para> + </section> + <section> <title>Definition of Custom Style Classes</title> <table> - <title>Classes names that define a map appearance</title> + <title>Classes names that define a component appearance</title> <tgroup cols="2"> <thead> <row> @@ -175,30 +178,30 @@ <tbody> <row> <entry>rich-gmap</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a gmap</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a component</entry> </row> </tbody> </tgroup> </table> - + <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:gmap&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create class with the - same name and define necessary properties in it.</para> - + <property>&lt;rich:gmap&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create class with the same + name and define necessary properties in it.</para> + <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:gmap&gt;</property> - </emphasis> components, define your own style class in the corresponding <emphasis - role="bold"> - <property>&lt;rich:gmap&gt;</property> - </emphasis>attribute.</para> + <property>&lt;rich:gmap&gt;</property> + </emphasis> components, define your own style class in the corresponding <emphasis role="bold"> + <property>&lt;rich:gmap&gt;</property> + </emphasis>attribute.</para> </section> <section> <title>Relevant Resources Links</title> <para> <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/gmap.jsf?c=... - you can see the example of <emphasis role="bold"><property>&lt;rich:gmap&gt;</property></emphasis> usage - and sources for the given example. </para> + you can see the example of <emphasis role="bold"> + <property>&lt;rich:gmap&gt;</property> + </emphasis> usage and sources for the given example. </para> </section> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -139,17 +139,29 @@ </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis> - <property>style class redefinition method</property> - </emphasis>.</para> - <para>Default style classes are mapped on <emphasis><property>skin - parameters</property>.</emphasis></para> - <para>To redefine appearance of all inputNumberSliders at once, there are two ways:</para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:inputNumberSlider&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> <property>style classes</property> - </emphasis> used by the inputNumberSlider to your page style sheets</listitem> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:imputNumberSlider&gt;</property> + </emphasis> component</para> + </listitem> </itemizedlist> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -126,17 +126,29 @@ </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis> - <property>style class redefinition method</property> - </emphasis>.</para> - <para>Default style classes are mapped on <emphasis><property>skin - parameters</property>.</emphasis></para> - <para>To redefine appearance of all inputNumberSpinners at once, there are two ways:</para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:imputNumberSpinner&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> <property>style classes</property> - </emphasis> used by the inputNumberSpinner to your page style sheets</listitem> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:inputNumberSpinner&gt;</property> + </emphasis> component</para> + </listitem> </itemizedlist> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/jQuery.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/jQuery.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/jQuery.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -333,6 +333,16 @@ right sintax. Remember to use jQuery() function instead of $(), as soon as jQuery works without conflicts with prototype.js.</para> </section> + + <section> + <title>Look-and-Feel Customization</title> + + <para><emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> has no skin parameters and custom <property>style classes</property>, as the + component isn&apos;t visual.</para> + </section> + <section> <title>Relevant Resources Links</title> <para>More information about jQuery framework and its features you can read <ulink Copied: branches/3.1.x/docs/userguide/en/src/main/docbook/included/listShuttle.desc.xml (from rev 4476, trunk/docs/userguide/en/src/main/docbook/included/listShuttle.desc.xml) =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/listShuttle.desc.xml (rev 0) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/listShuttle.desc.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -0,0 +1,29 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> + <sectioninfo> + <keywordset> + <keyword>listShuttle</keyword> + </keywordset> + </sectioninfo> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> component is used for moving chosen items + from one list into another with their optional reordering there.</para> + <mediaobject> + <imageobject> + <imagedata fileref=""/> + </imageobject> + </mediaobject> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem>Skinnable <property>listShuttle</property> and child items</listitem> + <listitem>Customizable component layout (captions, headers, list items and control sets)</listitem> + <listitem>Disabled/enabled ordering controls</listitem> + <listitem> Built-In Drag-and-Drop support</listitem> + </itemizedlist> + </section> +</section> Copied: branches/3.1.x/docs/userguide/en/src/main/docbook/included/listShuttle.xml (from rev 4476, trunk/docs/userguide/en/src/main/docbook/included/listShuttle.xml) =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/listShuttle.xml (rev 0) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/listShuttle.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -0,0 +1,627 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> + <sectioninfo> + <keywordset> + <keyword>rich:listShuttle</keyword> + <keyword>listShuttle</keyword> + </keywordset> + </sectioninfo> + <section> + <title>Creating the Component with a Page Tag</title> + <para>Here is a simple example as it could be used on a page: </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:listShuttle value="#{bean.list}" var="list" selection="#{value.resultList}"> + <f:facet name=header> + <h:outputText value="Header1"/> + </f:facet> + <rich:column> + <h:outputText value="#{list.text}"> + </rich:column> +<rich:listShuttle> +...]]></programlisting> + </section> + <section> + <title>Creating the Component Dynamically Using Java</title> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.listShuttle; +... +HtmllistShuttle mylistShuttle = new HtmllistShuttle(); +...]]></programlisting> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> component consists of the following parts: <itemizedlist> + <listitem>two <property>item lists</property> (source and target). List consists of items; each item has + three different representations: common, selected, active</listitem> + <listitem>optional <property>caption</property>, <property>header</property> (sorted and non-sorted), <property>footer</property> elements</listitem> + <listitem><property>copy/moving controls set</property>, a set of controls, which performs moving/copying + items between lists</listitem> + <listitem><property>optional ordering controls set</property>, a set of controls that performs + reordering</listitem> + </itemizedlist> + </para> + <para>The <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> component provides to use <emphasis> + <property>&quot;source&quot;</property> + </emphasis> and <emphasis> + <property>&quot;target&quot;</property> + </emphasis> facets. It is possible to use the facets only together defined. In case the + facets definition skipped – both lists contain the columns defined nested to listShuttle + component.</para> + <para>Here is a simple example as it could be used on a page.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:listShuttle sourceValue="#{bean.list}" var="list" value="#{value.resultList}"> + <f:facet name="source"> + <rich:column> + <h:outputText value="#{list.text}"/> + </rich:column> + </f:facet> + <f:facet name="target"> + <rich:column> + <h:outputText value="#{list.text}"/> + </rich:column> + <rich:column> + <h:outputText value="#{list.description}"/> + </rich:column> + </f:facet> +<rich:listShuttle> +...]]></programlisting> + <!-- ADD SCREESHOT--> + <para>Captions could be added to a list only after it was defined as a <emphasis> + <property>&quot;sourceCaption&quot;</property> + </emphasis> and <emphasis> + <property>&quot;targetCaption&quot;</property> + </emphasis> named facets inside the component or defined with the <emphasis> + <property>&quot;sourceCaptionLabel&quot;</property> + </emphasis> and <emphasis> + <property>&quot;targetCaptionLabel&quot;</property> + </emphasis> attribute.</para> + <!-- ordering control set--> + <para>The <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> component provides the possibility to use <property>ordering controls + set</property>, which performs reordering in the target item list. Every control has + possibility to be disabled. </para> + <para> + <emphasis> + <property>&quot;topControl&quot; </property> + </emphasis>, <emphasis> + <property>&quot;topControlDisabled&quot; </property> + </emphasis>, <emphasis> + <property>&quot;bottomControl&quot; </property> + </emphasis>, <emphasis> + <property>&quot;bottomControlDisabled&quot; </property> + </emphasis>, <emphasis> + <property>&quot;upControl&quot; </property> + </emphasis>, <emphasis> + <property>&quot;upControlDisabled&quot; </property> + </emphasis>, <emphasis> + <property>&quot;downControl&quot; </property> + </emphasis>, <emphasis> + <property>&quot;downControlDisabled&quot; </property> + </emphasis> facets are used to replaces the default control with facets content. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:orderingList value="#{demoBean.items}" var="item" controlType="button"> + <f:facet name="topControl"> + <h:outputText value="Move to top"> + </f:facet> + <f:facet name="upControl"> + <h:outputText value="Move up"> + </f:facet> + <f:facet name="downControl"> + <h:outputText value="Move down"> + </f:facet> + <f:facet name="bottomControl"> + <h:outputText value="Move to bottom"> + </f:facet> +<rich:orderingList> +... +]]></programlisting> + <!-- copy/move control set --> + <para>The <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis>component also provides 4 predefined controls in <property> move/copy + controls set</property> for moving or copying items between source and target lists. + Every control has possibility to be disabled. </para> + <para> + <emphasis> + <property>&quot;copyCotrol&quot; </property> + </emphasis>, <emphasis> + <property>&quot;copy_disabled&quot; </property> + </emphasis>, <emphasis> + <property>&quot;removeControl&quot; </property> + </emphasis>, <emphasis> + <property>&quot;remove_disabled&quot; </property> + </emphasis>, <emphasis> + <property>&quot;copyAllControl&quot; </property> + </emphasis>, <emphasis> + <property>&quot;copyAll_disabled&quot; </property> + </emphasis>, <emphasis> + <property>&quot;removeAllControl&quot; </property> + </emphasis>, <emphasis> + <property>&quot;removeAll_disabled&quot; </property> + </emphasis> facets are used to replaces the default control with facets content. </para> + <!-- attributes --> + <para> The + <emphasis><property>&quot;sourceValue&quot; + </property></emphasis> attribute defines the collection to be shown in source list.</para> + <para>The + <emphasis><property>&quot;value&quot; + </property></emphasis> attribute defines the collection to store the value from target list.</para> + <para> The + <emphasis><property>&quot;var&quot; + </property></emphasis> could be shared between both collections to defined lists on the page.</para> + <para>Controls rendering is based on the + <emphasis><property>&quot;controlsType&quot; + </property></emphasis> attribute. Possible types are <property>button</property> and <property>none</property>.</para> The position of the + <property>ordering controls set</property> relatively to list should be customized with + <emphasis><property>&quot;orderControlsVerticalAlign&quot; + </property></emphasis> attribute. The position of the <property>move/copy controls set</property> + relatively to lists should be customized with + <emphasis><property>&quot;moveControlsVerticalAlign&quot; + </property></emphasis> attribute. + + <!-- template --> + + <para>The <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> component provides the possibility to be customized using templating. The + customization could be performed by layout definition nested to component.</para> + <para>10 elements could be provided to be defined inside template (all standard controls + should also possible to use inside): {sourceList}, {targetList}, {CopyControl}, {removeCotrol}, + {copyAllControl}, {removeAllControl}, {topcontrol}, {bottomControl}, {downCotrol}, {upControl}.</para> + <para>The markup defined in the initial picture could be defined as in the following + example.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:listShuttle> +... + <h:panelGrid columns="4"> + <h:outputText value="{sourceList}"/> + <h:panelGroup> + <h:outputText value="{copyAllControl}"/> + <h:outputText value="{copyControl}"/> + <h:outputText value="{removeControl}"/> + <h:outputText value="{removeAllControl}"/> + </h:panelGroup> + <h:outputText value="targetList"/> + <h:panelGroup> + <h:outputText value="{topControl}"/> + <h:outputText value="{upControl}"/> + <h:outputText value="{downControl}"/> + <h:outputText value="{bottomControl}"/> + </h:panelGroup> + </h:panelGrid> + </rich:listShuttle> +... +]]></programlisting> + <table> + <title>Keyboard usage for elements selection</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Keys and combinations </entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>CTRL+click</entry> + <entry>Described in selection behaviour requirement</entry> + </row> + <row> + <entry>SHIFT+click</entry> + <entry>Described in selection behaviour requirement</entry> + </row> + <row> + <entry>CTRL+A</entry> + <entry>Selects all elements inside the list if some active element is + already present in a list</entry> + </row> + <row> + <entry>Space</entry> + <entry>Inverts selection on the active element</entry> + </row> + <row> + <entry>Up, Down arrows</entry> + <entry>Change the active element to the next or previous in a list and make + it the only selected. Scroll should follow the selection to keep it + visible</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Keyboard usage for elements reordering</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Keys and combinations </entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>Home</entry> + <entry>Moves selected set to the top of a list</entry> + </row> + <row> + <entry>End</entry> + <entry>Moves selected set to the bottomof a list</entry> + </row> + <row> + <entry>CTRL+Up arrow</entry> + <entry>Moves selected item to one position upper</entry> + </row> + <row> + <entry>CTRL+Down arrow</entry> + <entry>Moves selected item to one position lower</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>JavaScript API</title> + <para> Controls are accessible for developer on client-side using controls attribute of + JavaScript component instance. The value of the attribute is an associative array of + controls keyed by the following strings: <property>top</property>, <property>up</property>, <property>down</property>, <property>bottom</property>.</para> + <table> + <title>JavaScript API</title> + <tgroup cols="3"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + <entry>Element</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>doSortAscending()</entry> + <entry>Sort items in the list ascending</entry> + <entry>Component</entry> + </row> + <row> + <entry>doSortDescending()</entry> + <entry>Sort items in the list descending</entry> + <entry>Component</entry> + </row> + <row> + <entry>doSort()</entry> + <entry>Invert current sorting</entry> + <entry>Component</entry> + </row> + <!--Controls common API --> + <row> + <entry>doHide()</entry> + <entry>Hide ordering control</entry> + <entry>Any Ordering control</entry> + </row> + <row> + <entry>doShow()</entry> + <entry>Show ordering control</entry> + <entry>Any Ordering control</entry> + </row> + <row> + <entry>isShown()</entry> + <entry>Check if current control is shown</entry> + <entry>Any Ordering control</entry> + </row> + <row> + <entry>doEnable()</entry> + <entry>Enable ordering control</entry> + <entry>Any Ordering control</entry> + </row> + <row> + <entry>doDisable()</entry> + <entry>Disable ordering control</entry> + <entry>Any Ordering control</entry> + </row> + <row> + <entry>isEnabled()</entry> + <entry>Check if current control is enabled</entry> + <entry>Any Ordering control</entry> + </row> + <!--List managing API --> + <row> + <entry>moveUp()</entry> + <entry>Move up selected item in the list</entry> + <entry>Any Item</entry> + </row> + <row> + <entry>moveDown()</entry> + <entry>Move down selected item in the list</entry> + <entry>Any Item</entry> + </row> + <row> + <entry>moveTop()</entry> + <entry>Move top selected item in the list</entry> + <entry>Any Item</entry> + </row> + <row> + <entry>moveBottom()</entry> + <entry>Move bottom selected item in the list</entry> + <entry>Any Item</entry> + </row> + <row> + <entry>copy()</entry> + <entry>Copy selected item from the source list to the target list</entry> + <entry>Any Item</entry> + </row> + <row> + <entry>remove()</entry> + <entry>Remove selected item from the target list to the source list</entry> + <entry>Any Item</entry> + </row> + <row> + <entry>copyAll()</entry> + <entry>Copy all items from the source list to the target list</entry> + <entry>Any Item</entry> + </row> + <row> + <entry>removeAll()</entry> + <entry>Remove all items from the target list to the source list</entry> + <entry>Any Item</entry> + </row> + <row> + <entry>getSelection()</entry> + <entry>Return currently selected item</entry> + <entry>Any Item</entry> + </row> + <row> + <entry>getItems()</entry> + <entry>Return the collection of all items</entry> + <entry>Any Item</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Look-and-Feel Customization</title> + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> components at once: <itemizedlist> + <listitem>Redefine the corresponding skin parameters</listitem> + <listitem> Add to your style sheets style classes used by a <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> component</listitem> + </itemizedlist> + </para> + </section> + <section> + <title>Definition of Custom Style Classes</title> + + <para>On the screenshot there are classes names that define styles for component elements.</para> + + <!-- ADD SCREENSHOT --> + + <!-- ADD ITEMS representations!!!--> + + <table> + <title>Classes names that define a caption representations in the source list</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-shuttle-source-caption</entry> + <entry>Defines a class for caption customization</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a caption representations in the target list</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-shuttle-target-caption</entry> + <entry>Defines a class for caption customization</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a rows representations in the source list</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-shuttle-source-row</entry> + <entry>Defines a default class for any item row</entry> + </row> + <row> + <entry>rich-shuttle-row-source-selected</entry> + <entry>Defines class to be additionally added to selected item rows</entry> + </row> + <row> + <entry>rich-shuttle-row-source-active</entry> + <entry>Defines class to be additionally added to active item rows</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a rows representations in the target list</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-shuttle-target -row</entry> + <entry>Defines a default class for any item row</entry> + </row> + <row> + <entry>rich-shuttle-row-target -selected</entry> + <entry>Defines class to be additionally added to selected item rows</entry> + </row> + <row> + <entry>rich-shuttle-row-target -active</entry> + <entry>Defines class to be additionally added to active item rows</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a cells representations in the source list</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-shuttle-source-cell</entry> + <entry>Defines a default class for any item cell</entry> + </row> + <row> + <entry>rich-shuttle-source-cell-selected</entry> + <entry>Defines class to be additionally added to selected item cells</entry> + </row> + <row> + <entry>rich-shuttle-source-cell-active</entry> + <entry>Defines class to be additionally added to active item cells</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a cells representations in the target list</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-shuttle-target -cell</entry> + <entry>Defines a default class for any item cell</entry> + </row> + <row> + <entry>rich-shuttle-target -cell-selected</entry> + <entry>Defines class to be additionally added to selected item cells</entry> + </row> + <row> + <entry>rich-shuttle-target -cell-active</entry> + <entry>Defines class to be additionally added to active item cells</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define controls representations</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-ordering-controls</entry> + <entry>Could be applied to the whole group of the controls.</entry> + </row> + <row> + <entry>rich-shuttle-top</entry> + <entry>Defines class for Top control</entry> + </row> + <row> + <entry>rich-shuttle-bottom</entry> + <entry>Defines class for Bottom control</entry> + </row> + <row> + <entry>rich-shuttle-up</entry> + <entry>Defines class for Up control</entry> + </row> + <row> + <entry>rich-shuttle-down</entry> + <entry>Defines class for Down control</entry> + </row> + + <row> + <entry>rich-shuttle-copy</entry> + <entry>Defines class for Copy control</entry> + </row> + + <row> + <entry>rich-shuttle-remove</entry> + <entry>Defines class for Remove control</entry> + </row> + + <row> + <entry>rich-shuttle-copyAll</entry> + <entry>Defines class for copyAll control</entry> + </row> + <row> + <entry>rich-shuttle-removeAll</entry> + <entry>Defines class for removeAll control</entry> + </row> + <row> + <entry>rich-shuttle-control-disabled</entry> + <entry>Defines a class for any control in a disabled state</entry> + </row> + </tbody> + </tgroup> + </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> components on a page using CSS, it's enough to create classes with the same + names and define necessary properties in them. </para> + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> component attributes.</para> + </section> +</section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuGroup.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuGroup.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuGroup.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -160,18 +160,32 @@ <section> <title>Look-and-Feel Customization</title> - <para> For skinnability implementation, the components use a style class redefinition - method. Default style classes are mapped on skin parameters. </para> - <para> There are two ways to redefine the appearance of all menu groups at once: </para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:menuGroup&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> <listitem> - <para>Redefine corresponding skin parameters</para> + <para>Redefine the corresponding skin parameters</para> </listitem> + <listitem> - <para>Add to your styles heet style classes used by a menu group</para> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:menuGroup&gt;</property> + </emphasis> component</para> </listitem> </itemizedlist> </section> + <section> <title>Skin Parameters Redefinition</title> <table> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuItem.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuItem.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuItem.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -164,19 +164,33 @@ </section> <section> - <title> Look-and-Feel Customization</title> - <para> For skinnability implementation, the components use a style class redefinition - method. Default style classes are mapped on skin parameters. </para> - <para> There are two ways to redefine the appearance of all menu items at once: </para> + <title>Look-and-Feel Customization</title> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> <listitem> <para>Redefine the corresponding skin parameters</para> </listitem> + <listitem> - <para>Add to your style sheets style classes used by a menu item</para> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> component</para> </listitem> </itemizedlist> </section> + <section> <title>Skin Parameters Redefinition</title> <table> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuSeparator.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuSeparator.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuSeparator.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -71,18 +71,34 @@ </section> <section> + <title>Look-and-Feel Customization</title> - <para> - For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters. - </para> - <para> - There are two ways to redefine the appearance of all menu separators at once: - </para> - <itemizedlist> - <listitem><para>Redefine the corresponding skin parameters</para></listitem> - <listitem><para>Add to your style sheets style classes used by a menu separator</para></listitem> - </itemizedlist> - </section> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:menuSeparator&gt;</property> + </emphasis> components at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:menuSeparator&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> + <section> <title>Skin Parameters Redefinition</title> <table> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/message.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/message.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/message.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -123,14 +123,19 @@ <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a style class redefinition method. - Default style classes are mapped on skin parameters.</para> + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis></para> - <para>To redefine appearance of all <emphasis role="bold"> - <property>&lt;rich:message&gt;</property> - </emphasis> components, you may define the properties of the predefined style classes in the - common CSS style sheet used on a page (there are no skin parameters and predefined values - by default to make it compatible with the standard message component). </para> + <para>There are no skin parameters and default predefined values. To redefine the appearance of all <emphasis + role="bold"> + <property>&lt;rich:message&gt;</property> + </emphasis> components at once, you should only add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis + role="bold"> + <property>&lt;rich:message&gt;</property> + </emphasis> component.</para> </section> <section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/messages.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/messages.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/messages.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -117,15 +117,21 @@ <section> <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a style class redefinition method. - Default style classes are mapped on skin parameters.</para> - - <para>To redefine appearance of all <emphasis role="bold"> - <property>&lt;rich:messages&gt;</property> - </emphasis> components, you can define the properties of the predefined style classes in the - common CSS style sheet used on a page (there are no skin parameters and predefined values by - default to make it compatible with the standard message component). </para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis></para> + + <para>There are no skin parameters and default predefined values. To redefine the appearance of all <emphasis + role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis> components at once, you should only add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis + role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis> component.</para> + </section> <section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/modalPanel.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/modalPanel.desc.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/modalPanel.desc.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -18,7 +18,7 @@ <mediaobject> <imageobject> - <imagedata fileref="images/modalpanel1.gif" /> + <imagedata fileref="images/mp_1.png" /> </imageobject> </mediaobject> </figure> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/modalPanel.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/modalPanel.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/modalPanel.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -165,7 +165,7 @@ <mediaobject> <imageobject> - <imagedata fileref="images/modalpanel2.gif"/> + <imagedata fileref="images/mp_2.png"/> </imageobject> </mediaobject> </figure> @@ -178,23 +178,23 @@ <emphasis role="bold">Example:</emphasis> </para> <programlisting role="XML"><![CDATA[... - <rich:modalPanel id="panel"> + <rich:modalPanel id="mp"> <f:facet name="header"><h:outputText value="Modal Panel"/></f:facet> <f:facet name="controls"> - <a href="javascript:Richfaces.hideModalPanel('form:panel')">X</a> + <h:graphicImage value="/pages/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" /> </f:facet> <h:graphicImage value="/pages/california_large.gif"/> </rich:modalPanel> ]]></programlisting> - <para>The result displays like this:</para> + <para>The result is displayed here:</para> <figure> <title>ModalPanel with control element</title> <mediaobject> <imageobject> - <imagedata fileref="images/modalpanel3.gif"/> + <imagedata fileref="images/mp_3.png"/> </imageobject> </mediaobject> </figure> @@ -305,20 +305,29 @@ <section> <title>Look-and-Feel Customization</title> - - <para>For implementing skinnability the components use a <emphasis> - <property>style class redefinition method</property> - </emphasis>. Default style classes are mapped on <emphasis><property>skin - parameters</property>.</emphasis></para> - - <para>There are two ways to redefine the appearance of all modal panels at once:</para> - + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>Redefine the corresponding skin parameters</listitem> - - <listitem>Add <emphasis> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> <property>style classes</property> - </emphasis> used by modalPanel to your page style sheets</listitem> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> component</para> + </listitem> </itemizedlist> </section> @@ -326,14 +335,14 @@ <title>Skin Parameters Redefinition</title> <table> - <title>Panel skin parameters</title> + <title>Skin parameters for a component</title> <tgroup cols="2"> <thead> <row> - <entry>Panel skin parameters</entry> + <entry>Skin parameters</entry> - <entry>Properties corresponding to CSS parameter</entry> + <entry>CSS properties</entry> </row> </thead> @@ -354,14 +363,14 @@ </table> <table> - <title>Header parameters</title> + <title>Skin parameters redefinition for a header element</title> <tgroup cols="2"> <thead> <row> - <entry>Headers parameters</entry> + <entry>Skin parameters</entry> - <entry>Properties corresponding to CSS parameter</entry> + <entry>CSS properties</entry> </row> </thead> @@ -382,14 +391,14 @@ </table> <table> - <title>Header content parameters</title> + <title>Skin parameters redefinition for a header content</title> <tgroup cols="2"> <thead> <row> - <entry>Headers content parameters</entry> + <entry>Skin parameters</entry> - <entry>Properties corresponding to CSS parameter</entry> + <entry>CSS properties</entry> </row> </thead> @@ -422,14 +431,14 @@ </table> <table> - <title>Body parameters</title> + <title>Skin parameters redefinition for a body element</title> <tgroup cols="2"> <thead> <row> - <entry>Body parameters</entry> + <entry>Skin parameters</entry> - <entry>Properties corresponding to CSS parameter</entry> + <entry>CSS properties</entry> </row> </thead> @@ -464,7 +473,7 @@ <mediaobject> <imageobject> - <imagedata fileref="images/modalpanel4.gif"/> + <imagedata fileref="images/mp_4.png"/> </imageobject> </mediaobject> </figure> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/nodeSelectListener.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/nodeSelectListener.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/nodeSelectListener.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -108,4 +108,13 @@ ]]></programlisting> </section> + <section> + <title>Look-and-Feel Customization</title> + + <para><emphasis role="bold"> + <property>&lt;rich:nodeSelectListener&gt;</property> + </emphasis> has no skin parameters and custom <property>style classes</property>, as the + component isn&apos;t visual.</para> + </section> + </chapter> \ No newline at end of file Copied: branches/3.1.x/docs/userguide/en/src/main/docbook/included/orderingList.desc.xml (from rev 4476, trunk/docs/userguide/en/src/main/docbook/included/orderingList.desc.xml) =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/orderingList.desc.xml (rev 0) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/orderingList.desc.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> + <sectioninfo> + <keywordset> + <keyword>orderingList</keyword> + </keywordset> + </sectioninfo> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> is a component for ordering items in a list. This component provides possibilities to reorder a list and sort it on the client side.</para> + <mediaobject> + <imageobject> + <imagedata fileref="images/orderinList1.png"/> + </imageobject> + </mediaobject> + </section> +<section> + <title>Key Features</title> + <itemizedlist> + <!--listitem>Skinnable <property>ordering list</property> and child items</listitem--> + <listitem>Highly customizable look and feel</listitem> + <listitem>Reordering and sorting possibilities for list items</listitem> + <!--listitem>Customizable component layout (captions, headers, list items and ordering control set)</listitem--> + <!--listitem>Disabled/enabled ordering controls</listitem--> + <listitem>Multiple selection of list items</listitem> + <!--listitem>Possibility to manage selection from + <itemizedlist> + <listitem>Keyboard</listitem> + <listitem>Server side</listitem> + </itemizedlist> + </listitem--> + </itemizedlist> +</section> +</section> + \ No newline at end of file Copied: branches/3.1.x/docs/userguide/en/src/main/docbook/included/orderingList.xml (from rev 4476, trunk/docs/userguide/en/src/main/docbook/included/orderingList.xml) =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/orderingList.xml (rev 0) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/orderingList.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -0,0 +1,609 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> + <sectioninfo> + <keywordset> + <keyword>rich:orderingList</keyword> + <keyword>orderingList</keyword> + </keywordset> + </sectioninfo> + <table> + <title>Component identification parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.OrderingList</entry> + </row> + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlOrderingList</entry> + </row> + <row> + <entry>component-family</entry> + + <entry>org.richfaces.OrderingList</entry> + </row> + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.OrderingListRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.OrderingListTagHandler</entry> + </row> + </tbody> + </tgroup> + </table> + <section> + <title>Creating the Component with a Page Tag</title> + <para>Here is a simple example as it could be used on a page: </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:orderingList value="#{bean.list}" var="list"> + <rich:column> + <f:facet name="header"> + <h:outputText value="Name" /> + </f:facet> + <h:inputText value="#{item.name}" /> + </rich:column> +<rich:orderingList> +...]]></programlisting> + </section> + <section> + <title>Creating the Component Dynamically Using Java</title> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlOrderingList; +... +HtmlOrderingList myOrderingList = new HtmlOrderingList(); +...]]></programlisting> + </section> + <section> + <title>Details of Usage</title> + + <!--maintenance of component orderingList--> + + <para>The <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> component consists of <itemizedlist> + <listitem><property>Item list</property> element that displays a list of items. It + has three different representations for a single element: common, selected, + active. Combination of these states is possible.</listitem> + <listitem> + <property>Ordering controls set</property> + </listitem> + </itemizedlist> + </para> + + <!-- attributes of component orderingList --> + + <para> The <emphasis> + <property> &quot;value&quot;</property> + </emphasis> and <emphasis> + <property>&quot;var&quot; </property> + </emphasis> attributes are used to access the values of a list. </para> + + <para>The <emphasis> + <property>&quot;selection&quot; </property> + </emphasis> attribute is bound to a list, which stores a set of indexes for rows + selected. If the index from a set is out of bounds, it should be ignored. </para> + <para>Controls rendering is based on the <emphasis> + <property>&quot;controlsType&quot; </property> + </emphasis> attribute. Possible types are button, link, none.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:orderingList value="#{bean.simpleItems}" var="item" selection="#{bean.selection}" controlsType="button"> + <rich:column> + <f:facet name="header"> + <h:outputText value="Cars" /> + </f:facet> + <h:outputText value="#{item}" /> + </rich:column> +</rich:orderingList> +...]]></programlisting> + + <para> The <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> component allows to use <emphasis> + <property>&quot;caption&quot;</property> + </emphasis>, <emphasis> + <property>&quot;header&quot;</property> + </emphasis> and <emphasis> + <property>&quot;footer&quot; </property> + </emphasis> facets. A caption could be also defined with <emphasis> + <property>&quot;captionLabel&quot;</property> + </emphasis> attribute.</para> + + <!-- ADD SCREENSHOT--> + + <para>Simple example is placed below.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:orderingList value="#{bean.simpleItems}" var="item" controlsType="button" selection="#{bean.selection}"> + <f:facet name="caption"><h:outputText value="Caption Facet" /></f:facet> + <f:facet name="header"><h:outputText value="Header Facet" /></f:facet> + <h:outputText value="#{item}" /> + <rich:column> + <f:facet name="header"> + <h:outputText value="Cars" /> + </f:facet> + <h:outputText value="#{item.name}" /> + </rich:column> + <rich:column> + <f:facet name="header"> + <h:outputText value="Price" /> + </f:facet> + <h:outputText value="#{item.price}" /> + </rich:column> + <f:facet name="footer"><h:outputText value="Footer Facet" /></f:facet> +</rich:orderingList> +...]]></programlisting> + + <!-- ordering control set--> + <para>The <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> component provides the possibility to use <property>ordering controls + set</property>, which performs reordering. Every control has possibility to be disabled. </para> + <para> + <emphasis> + <property> &quot;topControl&quot; </property> + </emphasis>, <emphasis> + <property>&quot;topControlDisabled&quot;</property> + </emphasis> , <emphasis> + <property> &quot;bottomControl&quot;</property> + </emphasis> , <emphasis> + <property> &quot;bottomControlDisabled&quot; </property> + </emphasis>, <emphasis> + <property> &quot;upControl&quot; </property> + </emphasis>, <emphasis> + <property> &quot;upControlDisabled&quot; </property> + </emphasis>, <emphasis> + <property> &quot;downControl&quot;</property> + </emphasis> , <emphasis> + <property> &quot;downControlDisabled&quot; </property> + </emphasis> facets are used to replaces the default control with facets content.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:orderingList value="#{bean.simpleItems}" var="item" controlsType="button" selection="#{bean.selection}"> + <f:facet name="topControl"> + <h:outputText value="Move to top"> + </f:facet> + <f:facet name="upControl"> + <h:outputText value="Move up"> + </f:facet> + <f:facet name="downControl"> + <h:outputText value="Move down"> + </f:facet> + <f:facet name="bottomControl"> + <h:outputText value="Move to bottom"> + </f:facet> +<rich:orderingList> +...]]></programlisting> + + <para>The position of the controls relatively to a list could be customized with: <itemizedlist> + <!--listitem> + <emphasis> + <property>&quot;controlsPosition&quot;</property> + </emphasis> attribute. Possible values: <itemizedlist> + <listitem>left - controls could be rendered to the left side of a list</listitem> + <listitem>right(default) - controls could be rendered to the right side of a + list </listitem> + <listitem>top - controls could be rendered above the list </listitem> + <listitem>bottom - controls could be rendered below the list </listitem> + + </listitem--> + <listitem><emphasis> + <property> &quot;controlsHorizontalAlign&quot;</property> + </emphasis> attribute. Possible values: <itemizedlist> + <listitem>left - controls render to the left side of a list</listitem> + <listitem>right(default) - controls render to the right side of a list</listitem> + <listitem>center - controls is centered</listitem> + </itemizedlist> + </listitem> + <listitem><emphasis> + <property> &quot;controlsVerticalAlign&quot;</property> + </emphasis> attribute. Possible values: <itemizedlist> + <listitem>top - controls render aligned to the top side of a list </listitem> + <listitem>bottom - controls render aligned to the bottom side of a list </listitem> + <listitem>center(default) - controls is centered relatively to a list + </listitem> + </itemizedlist> + </listitem> + <!--listitem><emphasis> + <property>&quot;controlsLayout&quot;</property> + </emphasis> attribute. Possible values: <itemizedlist> + <listitem>inline - controls defined one by one in line </listitem> + <listitem>block - controls defined in column </listitem> + <listitem/> + </itemizedlist> + </listitem--> + </itemizedlist> + </para> + + <para>The <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> component has a possibility to hide any of the controls by pairs using + following attributes: <itemizedlist> + <listitem> + <emphasis> + <property>&quot;orderControlsVisible&quot;</property> + </emphasis> attribute has two values: true or false. If false + <property>Up</property> and <property>Down</property> controls are not + displayed.</listitem> + <listitem> + <emphasis> + <property>&quot;fastOrderControlsVisible&quot;</property> + </emphasis> attribute has two values: true or false. If false + <property>Top</property> and <property>Bottom</property> controls are not + displayed.</listitem> + </itemizedlist> + </para> + <!-- Wiil be done for 3.2.0 version--> + <!--para>The component provides possibility to be customized using templating. The + customization could be performed by a layout definition nested into the component. 5 + elements are provided to be defined inside template: {list}, {topControl}, + {bottomControl}, {downCotrol}, {upControl}. <para>The example is placed below.</para> + </para> + <para>Example:</para> + <programlisting role="XML"><![CDATA[... +<rich:orderingList> + <h:panelGrid columns="2" columnClasses="class1 class2"> + <h:outputText value="{list}"/> + <h:panelGroup> + <h:outputText value="{topControl}"/> + <h:outputText value="{upControl}"/> + <h:outputText value="{downControl}"/> + <h:outputText value="{bottomControl}"/> + </h:panelGroup> + </h:panelGrid> +</rich:orderingList> +...]]> + </programlisting--> + + <table> + <title>Keyboard usage for elements selection</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Keys and combinations </entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>CTRL+click</entry> + <entry>Inverts selection for an item</entry> + </row> + <row> + <entry>SHIFT+click</entry> + <entry>Selects all rows from active one to a clicked row if they differ, + else select the actve row. All other selections are cleared</entry> + </row> + <row> + <entry>CTRL+A</entry> + <entry>Selects all elements inside the list if some active element is + already present in a list</entry> + </row> + <row> + <entry>Space</entry> + <entry>Inverts selection on the active element</entry> + </row> + <row> + <entry>Up, Down arrows</entry> + <entry>Changes the active elements to the next or previous in a list</entry> + </row> + </tbody> + </tgroup> + </table> + + + <table> + <title>Keyboard usage for elements reordering</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Keys and combinations </entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>Top</entry> + <entry>Moves selected set to the top of a list</entry> + </row> + <row> + <entry>Bottom</entry> + <entry>Moves selected set to the bottomof a list</entry> + </row> + <row> + <entry>CTRL+Up arrow</entry> + <entry>Moves selected item to one position upper</entry> + </row> + <row> + <entry>CTRL+Down arrow</entry> + <entry>Moves selected item to one position lower</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + + <section> + <title>JavaScript API</title> + <table> + <title>JavaScript API</title> + <tgroup cols="3"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + <!--entry>Element</entry--> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>doSortAscending()</entry> + <entry>Sorts items in the list ascending</entry> + <!--entry>Component</entry--> + </row> + <row> + <entry>doSortDescending()</entry> + <entry>Sorts items in the list descending</entry> + <!--entry>Component</entry--> + </row> + <row> + <entry>doSort()</entry> + <entry>Inverts current sorting</entry> + <!--entry>Component</entry--> + </row> + <!--Controls common API --> + <row> + <entry>doHide()</entry> + <entry>Hides ordering control</entry> + <!--entry>Any Ordering control</entry--> + </row> + <row> + <entry>doShow()</entry> + <entry>Shows ordering control</entry> + <!--entry>Any Ordering control</entry--> + </row> + <row> + <entry>isShown()</entry> + <entry>Checks if current control is shown</entry> + <!--entry>Any Ordering control</entry--> + </row> + <row> + <entry>doEnable()</entry> + <entry>Enables ordering control</entry> + <!--entry>Any Ordering control</entry--> + </row> + <row> + <entry>doDisable()</entry> + <entry>Disables ordering control</entry> + <!--entry>Any Ordering control</entry--> + </row> + <row> + <entry>isEnabled()</entry> + <entry>Checksif current control is enabled</entry> + <!--entry>Any Ordering control</entry--> + </row> + <!--List managing API --> + <row> + <entry>moveUp()</entry> + <entry>Moves up selected item in the list</entry> + <!--entry>Any Item</entry--> + </row> + <row> + <entry>moveDown()</entry> + <entry>Moves down selected item in the list</entry> + <!--entry>Any Item</entry--> + </row> + <row> + <entry>moveTop()</entry> + <entry>Moves top selected item in the list</entry> + <!--entry>Any Item</entry--> + </row> + <row> + <entry>moveBottom()</entry> + <entry>Moves bottom selected item in the list</entry> + <!--entry>Any Item</entry--> + </row> + <row> + <entry>getSelection()</entry> + <entry>Returns currently selected item</entry> + <!--entry>Any Item</entry--> + </row> + <row> + <entry>getItems()</entry> + <entry>Returns the collection of all items</entry> + <!--entry>Any Item</entry--> + </row> + </tbody> + </tgroup> + </table> + </section> + + <section> + <title>Look-and-Feel Customization</title> + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> components at once: <itemizedlist> + <listitem>Redefine the corresponding skin parameters</listitem> + <listitem> Add to your style sheets style classes used by a <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> component</listitem> + </itemizedlist> + </para> + </section> + <section> + <title>Definition of Custom Style Classes</title> + + <para>On the screenshot there are classes names that define styles for component elements.</para> + + <!-- ADD SCREENSHOT --> + + <table> + <title>Classes names that define a caption representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-ordering-list-caption</entry> + <entry>Defines styles for a caption</entry> + </row> + <row> + <entry>rich-ordering-list-caption-disabled</entry> + <entry>Defines styles for a caption in disabled state</entry> + </row> + <row> + <entry>rich-ordering-list-caption-active</entry> + <entry>Defines styles for a caption in active state</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Classes names that define item rows representations</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-ordering-list-row</entry> + <entry>Defines styles for an item row</entry> + </row> + <row> + <entry>rich-ordering-list-row-selected</entry> + <entry>Defines styles for a selected item row</entry> + </row> + <row> + <entry>rich-ordering-list-row-active</entry> + <entry>Defines styles for an active item row</entry> + </row> + <row> + <entry>rich-ordering-list-row-disabled</entry> + <entry>Defines styles for a disabled item row</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define item cells representations</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-ordering-list-item-cell</entry> + <entry>Defines styles for an item cell</entry> + </row> + <row> + <entry>rich-ordering-list-item-cell-selected</entry> + <entry>Defines styles for a selected item cell</entry> + </row> + <row> + <entry>rich-ordering-list-item-cell-active</entry> + <entry>Defines styles for an active item cell</entry> + </row> + <row> + <entry>rich-ordering-list-cell-disabled</entry> + <entry>Defines styles for a disabled item cell</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Classes names that define controls representations</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-ordering-controls</entry> + <entry>Defines styles for a controls group</entry> + </row> + <row> + <entry>rich-ordering-control-top</entry> + <entry>Defines styles for a &quot;top&quot; control</entry> + </row> + <row> + <entry>rich-ordering-control-bottom</entry> + <entry>Defines styles for a &quot;bottom&quot; control</entry> + </row> + <row> + <entry>rich-ordering-control-up</entry> + <entry>Defines styles for a &quot;up&quot; control</entry> + </row> + <row> + <entry>rich-ordering-control-down</entry> + <entry>Defines styles for a &quot;down&quot; control</entry> + </row> + <row> + <entry>rich-ordering-control-disabled</entry> + <entry>Defines styles for controls in disabled state</entry> + </row> + </tbody> + </tgroup> + </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> components on a page using CSS, it's enough to create classes with the same + names and define necessary properties in them. </para> + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> component attributes.</para> + </section> +</section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/panel.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/panel.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/panel.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -157,22 +157,36 @@ </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis><property>style class - redefinition method</property>.</emphasis></para> - <para>Default style classes are mapped on <emphasis><property>skin - parameters</property>.</emphasis></para> - <para>To redefine appearance of all panels at once, there are two ways:</para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:panel&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> <property>style classes</property> - </emphasis> used by the panel to your page style sheets</listitem> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:panel&gt;</property> + </emphasis> component</para> + </listitem> </itemizedlist> </section> + <section> <title>Skin Parameters Redefinition</title> <table> - <title>Skin parameters for the panel</title> + <title>Skin parameters redefinition for a whole component</title> <tgroup cols="2"> <thead> <row> @@ -193,7 +207,7 @@ </tgroup> </table> <table> - <title>Parameters for a header element</title> + <title>Skin parameters redefinition for a header element</title> <tgroup cols="2"> <thead> <row> @@ -230,7 +244,7 @@ </tgroup> </table> <table> - <title>Parameters for a body element</title> + <title>Skin parameters redefinition for a body element</title> <tgroup cols="2"> <thead> <row> @@ -257,8 +271,9 @@ </section> <section> <title>Definition of Custom Style Classes</title> + <para>On the screenshot there are classes names that define styles for component elements.</para> <figure> - <title>Style classes of panel</title> + <title>Style classes</title> <mediaobject> <imageobject> @@ -266,7 +281,7 @@ </imageobject> </mediaobject> </figure> - <para>On the screenshot, there are classes names that define specified elements.</para> + <table> <title>Classes names that define a component appearance</title> <tgroup cols="2"> @@ -279,15 +294,15 @@ <tbody> <row> <entry>rich-panel</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a panel</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a component</entry> </row> <row> <entry>rich-panel-header</entry> - <entry>Defines styles for header element of a panel</entry> + <entry>Defines styles for a header element</entry> </row> <row> <entry>rich-panel-body</entry> - <entry>Defines styles for a panel body</entry> + <entry>Defines styles for a body elemnt</entry> </row> </tbody> </tgroup> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBar.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBar.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBar.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -46,9 +46,9 @@ <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it could be used on a page: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="XML"><![CDATA[... <rich:panelBar> <!--//... --> @@ -65,9 +65,9 @@ <section> <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPanelBar; ... HtmlPanelBar myBar = new HtmlPanelBar(); @@ -76,9 +76,9 @@ </section> <section> <title>Details of Usage</title> - <para>As it was mentioned <link linkend="panelBar">above</link>, <property>panelBar</property> is used for grouping any - content on the client, thus its customization deals only with specification of sizes and - styles for rendering.</para> + <para>As it was mentioned <link linkend="panelBar">above</link>, + <property>panelBar</property> is used for grouping any content on the client, thus its + customization deals only with specification of sizes and styles for rendering.</para> <para><emphasis> <property>&quot;width&quot;</property> </emphasis> and <emphasis> @@ -92,26 +92,61 @@ </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis><property>style class - redefinition method</property>.</emphasis></para> - <para>Default style classes are mapped on <emphasis><property>skin - parameters</property>.</emphasis></para> - <para>To redefine appearance of all panelBars at once, there are two ways:</para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> <property>style classes</property> - </emphasis> used by the panelBar to your page style sheets - (<property>PanelBar</property> itself has no properties mapped on a skin, - it&apos;s described for its children).</listitem> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis> component</para> + </listitem> </itemizedlist> </section> + <section> + <title>Skin Parameters Redefinition</title> + <table> + <title>Skin parameter redefinition for a whole component</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameter</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>headerBackgroundColor</entry> + <entry>border-color</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + + <section> <title>Definition of Custom Style Classes</title> - <para>There is one predefined class for the <property>panelBar</property>, which is - applicable to the whole component, specifying padding, borders, and etc.</para> + <para>There is one predefined class for the <emphasis role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis>, which is applicable to a whole component, specifying padding, borders, and + etc.</para> <figure> - <title>Custom style class of panelBar</title> + <title>Style class</title> <mediaobject> <imageobject> @@ -120,7 +155,7 @@ </mediaobject> </figure> <table> - <title>Classes names that define a component appearance</title> + <title>Class name that define a component appearance</title> <tgroup cols="2"> <thead> <row> @@ -131,15 +166,17 @@ <tbody> <row> <entry>rich-panelbar</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a panelbar</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a + component</entry> </row> - </tbody> </tgroup> </table> - <para>Other classes responsible for elements rendering are described for child panelBarItem - elements and could be found in the components chapters.</para> - + <para>Other classes responsible for elements rendering are described for child <emphasis + role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> elements and could be found in the components chapters.</para> + <table> <title>Style component classes</title> <tgroup cols="2"> @@ -152,35 +189,35 @@ <tbody> <row> <entry>styleClass</entry> - <entry>applicable to the whole panel together with headers</entry> + <entry>Applicable to a whole component (together with headers)</entry> </row> <row> <entry>headerClass</entry> - <entry>applicable to headers elements</entry> + <entry>Applicable to a header element</entry> </row> <row> <entry>contentClass</entry> - <entry>applicable to panels</entry> + <entry>Applicable to a content </entry> </row> </tbody> </tgroup> </table> <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:panelBar&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names and define necessary properties in them.</para> - + <property>&lt;rich:panelBar&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with + the same names and define necessary properties in them.</para> + <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:panelBar&gt;</property> - </emphasis> components, define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:panelBar&gt;</property> - </emphasis>attributes.</para> + <property>&lt;rich:panelBar&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis>attributes.</para> <para>CSS code piece used on a page:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="HTML"><![CDATA[... . rich-panelbar{ padding:10px; @@ -193,9 +230,9 @@ <para>When using headerClass and headerClassActive attributes the declaration of headerClass should precede the one of headerClassActive:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="HTML"><![CDATA[... .headerClass{ ... @@ -217,16 +254,20 @@ </rich:panelBar> ... ]]></programlisting> - <para>Hence, padding for all <property>panelBars</property> is changed on a page as well as - a font for particular <property>panelBarItems</property> content.</para> + <para>Hence, padding for all <emphasis role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis> is changed on a page as well as a font for particular + <emphasis role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> content.</para> </section> <section> <title>Relevant Resources Links</title> <para> <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelBar.js... - - ><property>&lt;rich:panelBar&gt;</property></emphasis> usage and sources for the given example. - </para> + >Here</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis> usage and sources for the given example. </para> </section> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBarItem.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBarItem.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBarItem.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -75,8 +75,13 @@ </section> <section> <title>Details of Usage</title> - <para>The <emphasis ><property> &quot;label&quot;</property></emphasis > attribute defines text to be represented. If you can use the - <emphasis ><property>&quot;label&quot;</property></emphasis > facet, you can even not use the <emphasis ><property>&quot;label&quot;</property></emphasis > attribute.</para> + <para>The <emphasis> + <property> &quot;label&quot;</property> + </emphasis> attribute defines text to be represented. If you can use the <emphasis> + <property>&quot;label&quot;</property> + </emphasis> facet, you can even not use the <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute.</para> <emphasis role="bold">Example:</emphasis> <programlisting role="XML"><![CDATA[... <rich:panelBarItem...> @@ -89,57 +94,72 @@ </rich:panelBarItem> ... ]]></programlisting> - <para>As it was mentioned <link linkend="panelBarItem">above</link>, <property>panelBarItem</property> is used for grouping any - content inside within one <property>panelBar</property>, thus its customization deals only - with specification of sizes and styles for rendering.</para> - <para><property>panelBar</property> could contain any number of child + <para>As it was mentioned <link linkend="panelBarItem">above</link>, + <property>panelBarItem</property> is used for grouping any content inside within one + <property>panelBar</property>, thus its customization deals only with specification of sizes + and styles for rendering.</para> + <para><property>panelBar</property> could contain any number of child <property>panelBarItem</property> components inside, which content is uploaded onto the client and headers are controls to open the corresponding child element.</para> </section> + <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis> - <property>style class redefinition method</property> - </emphasis>.</para> - <para>Default style classes are mapped on <emphasis><property>skin - parameters</property>.</emphasis></para> - <para>To redefine appearance of all panelBarItem at once, there are two ways:</para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> <property>style classes</property> - </emphasis> used by the panelBarItem to your page style sheets</listitem> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> component</para> + </listitem> </itemizedlist> </section> + <section> <title>Skin Parameters Redefinition</title> <table> - <title>Skin parameters for the panel content appearance</title> + <title>Skin parameters redefinition for a content </title> <tgroup cols="2"> <thead> <row> - <entry>Skin parameters for a hint</entry> + <entry>Skin parameters</entry> <entry>CSS properties</entry> </row> </thead> <tbody> <row> - <entry>panelTextColor</entry> + <entry>generalTextColor</entry> <entry>color</entry> </row> <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> + <entry>preferableDataSizeFont</entry> + <entry>font-size</entry> </row> <row> - <entry>border</entry> - <entry>tableBorderColor</entry> + <entry>preferableDataFamilyFont</entry> + <entry>font-family</entry> </row> </tbody> </tgroup> </table> <table> - <title>Parameters for panel header appearance</title> + <title>Skin parameters redefinition for a header element (active or inactive)</title> <tgroup cols="2"> <thead> <row> @@ -149,25 +169,41 @@ </thead> <tbody> <row> + <entry>headerTextColor</entry> + <entry>color</entry> + </row> + <row> <entry>headerBackgroundColor</entry> - <entry>border</entry> + <entry>background-color</entry> </row> + <row> + <entry>headerSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>headerWeightFont</entry> + <entry>font-weight</entry> + </row> + <row> + <entry>headerFamilyFont</entry> + <entry>font-family</entry> + </row> </tbody> </tgroup> </table> </section> <section> <title>Definition of Custom Style Classes</title> + <para>On the screenshot there are classes names that define styles for component elements.</para> <figure> - <title>PanelBarItem style classes</title> + <title>Style classes</title> <mediaobject> <imageobject> <imagedata fileref="images/panelBar3.gif" scalefit="1"/> </imageobject> </mediaobject> </figure> - <para>There are three predefined classes for the <property>panelBarItem</property> shown on the - screenshot and described in the table below</para> + <table> <title>Classes names that define a component appearance</title> <tgroup cols="2"> @@ -180,22 +216,24 @@ <tbody> <row> <entry>rich-panelbar-header</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a panelbar item header</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a header + element</entry> </row> - + <row> <entry>rich-panelbar-header-act</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of an acting panelbar item header</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of an active header + element</entry> </row> - + <row> <entry>rich-panelbar-content</entry> - <entry>Defines styles for a panelbar item content</entry> + <entry>Defines styles for a content</entry> </row> </tbody> </tgroup> </table> - + <table> <title>Style component classes</title> <tgroup cols="2"> @@ -208,27 +246,27 @@ <tbody> <row> <entry>headerClass</entry> - <entry>applicable to header elements</entry> + <entry>Applicable to a header element</entry> </row> <row> <entry>contentClass</entry> - <entry>applicable to panel elements</entry> + <entry>Applicable to a content</entry> </row> </tbody> </tgroup> </table> - + <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:panelBarItem&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the same names and define necessary properties in them.</para> - + <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:panelBarItem&gt;</property> - </emphasis> components, define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:panelBarItem&gt;</property> - </emphasis>attributes.</para> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis>attributes.</para> <para>CSS code piece used on a page:</para> <para> @@ -243,7 +281,7 @@ } ... ]]></programlisting> - <para>The component is defined in the following way:</para> + <para>The component is defined in the following way:</para> <para> <emphasis role="bold">Example:</emphasis> @@ -256,7 +294,11 @@ </rich:panelBar> ... ]]></programlisting> - <para>Hence, a font size of all <property>panelBarItem</property> headers is changed on a page - as well as a font for the particular <property>panelBarItem</property> content.</para> + <para>Hence, a font size of all <emphasis role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> headers is changed on a page as well as a font for the particular <emphasis + role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> content.</para> </section> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenu.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenu.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenu.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -220,28 +220,69 @@ <row> <entry>doExpand()</entry> - <entry>Expand group element</entry> + <entry>Expands group element</entry> </row> <row> <entry>doCollapse()</entry> - <entry>Collapse group element</entry> + <entry>Collapses group element</entry> </row> </tbody> </tgroup> </table> </section> - - + <section> <title>Look-and-Feel Customization</title> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis></para> + + <para>There are no skin parameters. To redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:panelMenu&gt;</property> + </emphasis> components at once, you should add to your style sheets the <emphasis> + <property>style class</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:panelMenu&gt;</property> + </emphasis> component.</para> + </section> - <para>As this component is just a wrapper for its children its provide the only - &quot;rich-panel-menu&quot; class for wrapper div element. To redefine appearance of - particular panel menus, it&apos;s possible to define your own CSS class. And then just - define it in the components class attribute. </para> + <section> + <title>Definition of Custom Style Classes</title> + + <table> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Class description</entry> + </row> + </thead> + <tbody> + + <row> + <entry>rich-panel-menu</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a component</entry> + </row> + + </tbody> + </tgroup> + </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:panelMenu&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create a class with the + same name and define necessary properties in it.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:panelMenu&gt;</property> + </emphasis> components, define your own style class in the corresponding <emphasis + role="bold"> + <property>&lt;rich:panelMenu&gt;</property> + </emphasis>attributes.</para> </section> <section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -234,19 +234,28 @@ <section> <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a style class redefinition method. - Default style classes are mapped on skin parameters.</para> - - <para>There are two ways to redefine the appearance of all panel menu groups at once:</para> - + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:panelMenuGroup&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> <listitem> <para>Redefine the corresponding skin parameters</para> </listitem> - + <listitem> - <para>Add to your style sheets style classes used by a panel menu group</para> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:panelMenuGroup&gt;</property> + </emphasis> component</para> </listitem> </itemizedlist> </section> @@ -255,12 +264,12 @@ <title> Skin Parameters Redefinition</title> <table> - <title>Skin parameters redefinition for table element of the first level group</title> + <title>Skin parameters redefinition for a table element of the first level group</title> <tgroup cols="2"> <thead> <row> - <entry>Parameters for table element of the first level group</entry> + <entry>Skin parameters</entry> <entry>CSS properties</entry> </row> @@ -301,12 +310,12 @@ </table> <table> - <title>Skin parameters redefinition for table element of the second and next levels groups</title> + <title>Skin parameters redefinition for a table element of second and next level groups</title> <tgroup cols="2"> <thead> <row> - <entry>Parameters for table element of the second and next levels groups</entry> + <entry>Skin parameters</entry> <entry>CSS properties</entry> </row> @@ -347,12 +356,12 @@ </table> <table> - <title>Skin parameter redefinition for wrapped div element of the first level group</title> + <title>Skin parameters redefinition for wrapper div element of the first level group</title> <tgroup cols="2"> <thead> <row> - <entry>Parameter for wrapped div element of the first level group</entry> + <entry>Skin parameters</entry> <entry>CSS properties</entry> </row> @@ -368,11 +377,57 @@ </tbody> </tgroup> </table> + + <table> + <title>Skin parameters redefinition for a hovered group element</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>additionalBackgroundColor</entry> + + <entry> background-color</entry> + </row> + + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for a disabled group element</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>tabDisabledTextColor</entry> + + <entry>color</entry> + </row> + + </tbody> + </tgroup> + </table> </section> <section> <title>Definition of Custom Style Classes</title> - + <para>On the screenshot there are classes names that define styles for component elements.</para> <figure> <title>Classes names</title> @@ -383,10 +438,8 @@ </mediaobject> </figure> - <para>On the screenshot, there are classes names defining specified elements.</para> - <table> - <title>Classes names that define an upper level nodes</title> + <title>Classes names that define an upper level groups</title> <tgroup cols="2"> <thead> @@ -426,7 +479,7 @@ </table> <table> - <title>Classes names that define a second and lower level nodes</title> + <title>Classes names that define a second and lower level groups</title> <tgroup cols="2"> <thead> @@ -485,6 +538,11 @@ <entry>Defines styles for a hovered group element</entry> </row> + <row> + <entry>rich-pmenu-disabled-element</entry> + + <entry>Defines styles for a disabled group element</entry> + </row> </tbody> </tgroup> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -237,19 +237,28 @@ <section> <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a style class redefinition method. - Default style classes are mapped on skin parameters.</para> - - <para>There are two ways to redefine the appearance of all panel menu items at once:</para> - + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:panelMenuItem&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> <listitem> <para>Redefine the corresponding skin parameters</para> </listitem> - + <listitem> - <para>Add to your style sheets style classes used by a panel menu item</para> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:panelMenuItem&gt;</property> + </emphasis> component</para> </listitem> </itemizedlist> </section> @@ -258,12 +267,12 @@ <title> Skin Parameters Redefinition</title> <table> - <title>Skin parameters redefinition for a table element item of the first level</title> + <title>Skin parameters redefinition for a table element of the first level item</title> <tgroup cols="2"> <thead> <row> - <entry>Parameters for table element item of first level</entry> + <entry>Skin parameters</entry> <entry>CSS properties</entry> </row> @@ -304,7 +313,7 @@ </table> <table> - <title>General skin parameter redefinition for disabled item </title> + <title>Skin parameter redefinition for a disabled item </title> <tgroup cols="2"> <thead> @@ -317,7 +326,7 @@ <tbody> <row> - <entry>panelBorderColor</entry> + <entry>tabDisabledTextColor</entry> <entry>color</entry> </row> @@ -330,7 +339,7 @@ <section> <title>Definition of Custom Style Classes</title> - + <para>On the screenshot there are classes names that define styles for component elements.</para> <figure> <title>Classes names</title> @@ -341,11 +350,9 @@ </mediaobject> </figure> - <para>On the screenshot, there are classes names defining specified elements.</para> + <table> + <title>Classes names that define the first level items</title> - <table> - <title>Classes names that define first level items</title> - <tgroup cols="2"> <thead> <row> @@ -379,7 +386,7 @@ </table> <table> - <title>Classes names that define second and lower levels items</title> + <title>Classes names that define the second and lower level items</title> <tgroup cols="2"> <thead> @@ -432,6 +439,17 @@ <entry>Defines styles for a panel menu selected item</entry> </row> + <row> + <entry>rich-pmenu-disabled-element</entry> + + <entry>Defines styles for a disabled panel menu item</entry> + </row> + + <row> + <entry>rich-pmenu-hovered-element</entry> + + <entry>Defines styles for a hovered panel menu item</entry> + </row> </tbody> </tgroup> </table> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/poll.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/poll.desc.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/poll.desc.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -1,9 +1,10 @@ <?xml version='1.0' encoding='UTF-8'?> <root> -<section> -<title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;a4j:poll&gt;</property> - </emphasis> component allows periodical sending of Ajax requests to the server and is used for a page update according to a specified in milliseconds time interval.</para> -</section> -</root> \ No newline at end of file + <section id="poll_d"> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> component allows periodical sending of Ajax requests to a server and is + used for a page updating according to a specified time interval.</para> + </section> +</root> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/poll.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/poll.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/poll.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -1,57 +1,58 @@ <?xml version='1.0' encoding='UTF-8'?> <chapter> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Poll</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.components.AjaxPoll</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.AjaxPoll</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.AjaxPollRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Poll</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.components.AjaxPoll</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.AjaxPoll</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.AjaxPollRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating on a page</title> - <para>To use this component it&apos;s necessary only to set an update interval.</para> + <para id="creating">To create the simplest variant on a page use the following syntax:</para> - <para> + <para> <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:poll interval="1000" reRender="someDataTable" action="#{bean.action1}"/> + </para> + <programlisting role="XML"><![CDATA[<a4j:poll interval="500" reRender="grid"/> ]]></programlisting> - <para>The <emphasis role="bold"> + <!--para>The <emphasis role="bold"> <property>&lt;a4j:poll&gt;</property> - </emphasis> component defined this way every second submits Ajax form onto the server, performs the corresponding action and renders a components with the <emphasis > + </emphasis> component defined this way every second submits Ajax form onto the server, + performs the corresponding action and renders a components with the <emphasis> <property>&quot;someDataTable&quot;</property> - </emphasis> id after a response comes back.</para> + </emphasis> id after a response comes back.</para--> </section> <section> <title>Dynamical creation of a component from Java code</title> - <para> + <para> <emphasis role="bold">Example:</emphasis> - </para> + </para> <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.AjaxPoll; ... AjaxPoll myPoll = new AjaxPoll(); @@ -60,35 +61,122 @@ </section> <section> <title>Key attributes and ways of usage</title> - <para>The component decodes all necessary JavaScript for time count and on the expiry of some interval for calling of a RichFaces utility method for Ajax request sending (A4J.AJAX.Submit (Some request parameters)). - </para> - <para> - The timer could be stopped or started in any time. The current state is controlled on the component with the <emphasis > + <para id="attributes">The <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> componet is used for periodical polling of server data. In order to use the component + it&apos;s necessary to set an update interval. The <emphasis> + <property>&quot;interval&quot;</property> + </emphasis> attribute defines an interval in milliseconds between the previous + response and the next request. The total period beetween two requests generated by the + <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> component is a sum of an<emphasis> + <property>&quot;interval&quot;</property> + </emphasis> attribute value and server response time. Default value for <emphasis> + <property>&quot;interval&quot;</property> + </emphasis> attribute is set to &quot;1000&quot; milliseconds (1 second). See an example of definition in + the <link linkend="creating">&quot;Creating on a page&quot; section</link>. </para> + <para>The <emphasis> + <property>&quot;timeout&quot;</property> + </emphasis> attribute defines response waiting time in milliseconds. If a response + isn&apos;t received during this period a connection is aborted and the next request is + sent. Default value for <emphasis> + <property>&quot;timeout&quot;</property> + </emphasis> attribute isn&apos;t set.</para> + <para>The <emphasis> + <property>&quot;enabled&quot;</property> + </emphasis> attribute defines should the <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> send request or not. It&apos;s necessary to render the + <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> to apply the current value of <emphasis> + <property>&quot;enabled&quot;</property> + </emphasis> attribute. You can use an EL-expression for <emphasis> + <property>&quot;enabled&quot;</property> + </emphasis> attribute to point to a bean property. An example of usage of <link + linkend="attributes">mentioned above attributes</link> is placed below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML"><![CDATA[... + <a4j:region> + <h:form> + <a4j:poll id="poll" interval="1000" enabled="#{userBean.pollEnabled}" reRender="poll,grid"/> + </h:form> + </a4j:region> + <h:form> + <h:panelGrid columns="2" width="80%" id="grid"> + <h:panelGrid columns="1"> + <h:outputText value="Polling Inactive" rendered="#{not userBean.pollEnabled}"></h:outputText> + <h:outputText value="Polling Active" rendered="#{userBean.pollEnabled}"></h:outputText> + <a4j:commandButton style="width:120px" id="control" + value="#{userBean.pollEnabled?'Stop':'Start'} Polling" + reRender="poll, grid"> + <a4j:actionparam name="polling" value="#{!userBean.pollEnabled}" + assignTo="#{userBean.pollEnabled}"/> + </a4j:commandButton> + </h:panelGrid> + <h:outputText id="serverDate" style="font-size:16px" value="Server Date: #{userBean.date}"/> + </h:panelGrid> + </h:form> +... +]]></programlisting> + + <para>The example shows how date and time are updated on a page in compliance with data taken + from a server. The <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> componet sends requests to the server every second. <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> contains value of its own Id. Hence, it renders itself for applying the current value + of <emphasis> + <property>&quot;enabled&quot;</property> + </emphasis> attribute.</para> + + <note><title>Note:</title> The form around the <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> component is required.</note> + + <!--para>The component decodes all necessary JavaScript for time count and on the expiry of some + interval for calling of a RichFaces utility method for Ajax request sending (A4J.AJAX.Submit + (Some request parameters)). </para> + <para> The timer could be stopped or started in any time. The current state is controlled on the + component with the <emphasis> <property>"enabled"</property> - </emphasis> attribute: - </para> - <programlisting role="XML"><![CDATA[<a4j:poll interval="1000" enabled="#{bean.boolProperty}"/> + </emphasis> attribute: </para> + <programlisting role="XML"><![CDATA[<a4j:poll interval="1000" enabled="#{bean.boolProperty}"/> ]]></programlisting> -<para>As any RichFaces Action component, <emphasis role="bold"> + <para>As any RichFaces Action component, <emphasis role="bold"> <property>&lt;a4j:poll&gt;</property> </emphasis> has all described in the <emphasis role="bold"> - <property><ulink url="index.html#support">&lt;a4j:support&gt;</ulink></property> - </emphasis> chapter attributes to provide the necessary behavior of request sending (delay, limitation of a submit and render area, requests frequency, and etc.). For detailed information on these attributes see again the <emphasis role="bold"> - <property><ulink url="index.html#support">&lt;a4j:support&gt;</ulink></property></emphasis> component description. - </para> + <property> + <ulink url="index.html#support">&lt;a4j:support&gt;</ulink> + </property> + </emphasis> chapter attributes to provide the necessary behavior of request sending (delay, + limitation of a submit and render area, requests frequency, and etc.). For detailed + information on these attributes see again the <emphasis role="bold"> + <property> + <ulink url="index.html#support">&lt;a4j:support&gt;</ulink> + </property> + </emphasis> component description. </para--> </section> - + <section> <title>Relevant resources links</title> - + <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/poll.jsf?c=... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;a4j:poll&gt;</property></emphasis> usage and sources for the given example. </para> - <para>The aditional information about component usage you can find here : <ulink - url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Users Forum</ulink>.</para> - + >Here</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> usage and sources for the given example. </para> + <para>The aditional information about component usage you can find here : <ulink + url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&... + Users Forum</ulink>.</para> + </section> -</chapter> \ No newline at end of file +</chapter> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/push.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/push.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/push.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -1,52 +1,148 @@ <?xml version='1.0' encoding='UTF-8'?> <chapter> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Push</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.components.AjaxPush</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.AjaxPush</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.AjaxPushRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Push</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.components.AjaxPush</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.AjaxPush</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.AjaxPushRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating on a page</title> - <programlisting role="XML"><![CDATA[ -<a4j:push reRender="msg" eventProducer="#{messageBean.addListener}" interval="3000"/>]]></programlisting> + <programlisting role="XML"><![CDATA[<a4j:push reRender="msg" eventProducer="#{messageBean.addListener}" interval="3000"/>]]></programlisting> </section> - - <section> + + <section> <title>Dynamical creation of a component from Java code</title> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.AjaxPush; + <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.AjaxPush; ... AjaxPush myPush = new AjaxPush(); ...]]></programlisting> </section> - + + <section> <title>Key attributes and ways of usage</title> + <para>The <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> implements reverse Ajax technique. The component makes requests to minimal code + (not to JSF tree) in order to check presence of messages in a queue. If a message exists, a + complete request is performed. <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> registers <property>EventListener</property> in the bean, + which receives messages about an event presence.</para> + + <para>The bean, for example, could be subscribed to Java Messaging Service (<ulink + url="http://java.sun.com/products/jms/">JMS</ulink>) topic or it could be implemented as + Message Driven Bean (MDB) in order to send a message to the <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> component about an event presence. In the presence of the event some action + occurs.</para> + + <para>Thus, a work paradigm with the <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> component corresponds to an anisochronous model, but not to pools as for <emphasis + role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> component. See the simplest example below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[... +class MyPushEventListener implements PushEventListener { + public void onEvent(EventObject evt) { + System.out.println(evt.getSource()); + //Some action + } +... +]]></programlisting> + + <para>Code for <property>EventListener</property> registration in the bean is placed below:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[... +public void addListener(EventListener listener) { +synchronized (listener) { + if (this.listener != listener) { + this.listener = (PushEventListener) listener; +} +... +]]></programlisting> + + <para>A page code for this example is placed below.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <a4j:status startText="in progress" stopText="done"/> + <a4j:form> + <a4j:region> + <a4j:push reRender="msg" eventProducer="#{pushBean.addListener}" interval="2000"/> + </a4j:region> + <a4j:outputPanel id="msg" > + <h:outputText value="#{pushBean.date}"> + <f:convertDateTime type="time"/> + </h:outputText> + </a4j:outputPanel> + <a4j:commandButton value="Push!!" action="#{pushBean.push}" ajaxSingle="true"/> + </a4j:form> +... +]]></programlisting> + + <para>The example shows how date is updated on a page in compliance with data taken from a + server. In the example <emphasis> + <property>&quot;interval&quot;</property> + </emphasis> attribute has value &quot;2000&quot;. This attribute defines an interval + in milliseconds between the previous response and the next request. Default value is set to + &quot;1000&quot; milliseconds (1 second). It&apos;s possible to set value equal to + &quot;0&quot;. In this case connection is permanent. </para> + <para>The <emphasis> + <property>&quot;timeout&quot;</property> + </emphasis> attribute defines response waiting time in milliseconds. If a response + isn&apos;t received during this period a connection is aborted and the next request is + sent. Default value for <emphasis> + <property>&quot;timeout&quot;</property> + </emphasis> attribute isn&apos;t set. Usage of <emphasis> + <property>&quot;interval&quot;</property> + </emphasis> and <emphasis> + <property>&quot;timeout&quot;</property> + </emphasis> attributes gives an opportunity to set short polls of queue state or long + connections, or permanent connection.</para> + + <note><title>Note:</title> The form around the <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> component is required.</note> + </section> + + <!--section> + <title>Key attributes and ways of usage</title> <para>The main difference between <emphasis role="bold"><property>&lt;a4j:push&gt;</property></emphasis>and <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> components is that <emphasis role="bold"><property>&lt;a4j:push&gt;</property></emphasis> makes request to minimal code only (not to JSF tree) in order to check the presence of messages in the queue. @@ -58,7 +154,7 @@ </para> <para> &quot;interval&quot; - Interval (in ms) for call push requests. Default value 1000 (1 sec). -<!-- If "0" a connection is permanent. Also you can set different value for parameter 'timeout'. --> +< If "0" a connection is permanent. Also you can set different value for parameter 'timeout'.> </para> <para> Code for registration of listener: @@ -83,14 +179,14 @@ <para> Thus, component 'push' uses asynchronous model instead of polls. </para> - </section> - + </section--> + <section> <title>Relevant resources links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/push.jsf?c=... - </ulink> you can see the example of <emphasis role="bold" - ><property>&lt;a4j:push&gt;</property></emphasis> usage and sources for the given example. - </para> - </section> -</chapter> \ No newline at end of file + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/push.jsf?c=... </ulink> + you can see the example of <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</chapter> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/repeat.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/repeat.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/repeat.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -61,20 +61,21 @@ <property>&quot;ajaxKeys&quot;</property> </emphasis> attribute. This attribute defines strings that are updated after an Ajax request. As a result it becomes easier to update several child components separately without updating the whole page.</para> -<programlisting role="XML"><![CDATA[<a4j:poll intervall="1000" action="#{repeater.action}" reRender="list"> + <programlisting role="XML"><![CDATA[... + <a4j:poll intervall="1000" action="#{repeater.action}" reRender="text"> + <table> + <tbody> + <a4j:repeat value="#{bean.props}" var="detail" ajaxKeys="#{repeater.ajaxedRowsSet}"> + <tr> + <td> + <h:outputText value="detail.someProperty" id="text"/> + </td> + </tr> + </a4j:repeat> + </tbody> + </table> + </a4j:poll> ... -<table> - <tbody> - <a4j:repeat value="#{bean.props}" var="detail" binding="#{repeater.myRepeat}" - id="list" ajaxKeys="#{repeater.ajaxedRowsSet}"> - </tr> - <td> - <h:outputText value="detail.someProperty"> - </td> - </tr> - </a4j:repeat> - <tbody> -<table> ]]></programlisting> <para>Thus, a list with a table structure from <emphasis > @@ -101,7 +102,7 @@ <property>&quot;repeater.myRepeat&quot;</property> </emphasis></para> </note> -<para>One more benefit of this component is absence of strictly defined markup as JSF HTML DataTable and Tomahawk DataTable has, hence the components could be used more flexibly anywhere where it&apos;s necessary to output the results of selection from some collection.</para> + <para>One more benefit of this component is absence of strictly defined markup as JSF HTML DataTable and TOMAHAWK DataTable has, hence the components could be used more flexibly anywhere where it&apos;s necessary to output the results of selection from some collection.</para> <para>The next example shows collection output as a plain HTML list</para> <programlisting role="XML"><![CDATA[<ul> <a4j:repeat ...> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -67,50 +67,42 @@ ... ]]></programlisting> </section> - - <section> + + <section> <title>Details of Usage</title> - <para> - The component represents on a page as a scrollable table with some fixed (non-scrollable) rows (header, footer) and columns. - Columns of the table are optionally resizable. Resizing is available using "drag and drop" of the column vertical borders. - There is possibility to expand or collapse the columns through JS API on the client side. - User can define the number of the fixed columns from the left side using attribute <emphasis><property>&quot;frozenColCount&quot;</property></emphasis> that will not be scrolled - via horizontal scroll. - </para> - <para> - There is possibility to increase component performance using attribute <emphasis><property>&quot;hideWhenScrolling&quot;</property></emphasis>. - If attribute value is 'true' data will be hidden during scrolling. - </para> - - <para> - It's possible to select the whole row with onclick on the row or some set of rows. Selection is optional and availability of such feature - is defined on the component. - There are two ways to select a few rows: - <itemizedlist> - <listitem>Just clicking the columns one by one.</listitem> - <listitem>Clicking some row with the SHIFT button hold. - In this case all the rows starting from last selected up to clicked should be selected.</listitem> - </itemizedlist> - </para> - - <para> - The columns provides the possibility of expanding/collapsing on the client side through the next JS API: - - <itemizedlist> - <listitem>doCollapse(columnId) - Performs the collapse action for the column with the corresponding id</listitem> - </itemizedlist> + <para> The component represents on a page as a scrollable table with some fixed (non-scrollable) + rows (header, footer) and columns. Columns of the table are optionally resizable. Resizing is + available using "drag and drop" of the column vertical borders. There is possibility to expand + or collapse the columns through JS API on the client side. User can define the number of the + fixed columns from the left side using attribute <emphasis> + <property>&quot;frozenColCount&quot;</property> + </emphasis> that will not be scrolled via horizontal scroll. </para> + <para> There is possibility to increase component performance using attribute <emphasis> + <property>&quot;hideWhenScrolling&quot;</property> + </emphasis>. If attribute value is 'true' data will be hidden during scrolling. </para> - It's possible to sort the table content after clicks on the header. The feature is optional. - Every column should be pointed to the comparator method that will be used for sorting the table. - - In case the <property>&lt;rich:scrollableDataTable&gt;</property> is already sorted by some - column and the header of this column has been clicked again - the sorting will be - reversed. - </para> + <para> It's possible to select the whole row with onclick on the row or some set of rows. + Selection is optional and availability of such feature is defined on the component. There are + two ways to select a few rows: <itemizedlist> + <listitem>Just clicking the columns one by one.</listitem> + <listitem>Clicking some row with the SHIFT button hold. In this case all the rows starting + from last selected up to clicked should be selected.</listitem> + </itemizedlist> + </para> -<para> + <para> The columns provides the possibility of expanding/collapsing on the client side through + the next JS API: <itemizedlist> + <listitem>doCollapse(columnId) - Performs the collapse action for the column with the + corresponding id</listitem> + </itemizedlist> It's possible to sort the table content after clicks on the header. The + feature is optional. Every column should be pointed to the comparator method that will be used + for sorting the table. In case the + <property>&lt;rich:scrollableDataTable&gt;</property> is already sorted by some column + and the header of this column has been clicked again - the sorting will be reversed. </para> + + <para> <emphasis role="bold">The typical variant of using:</emphasis> -</para> + </para> <programlisting role="XML"><![CDATA[... <rich:scrollableDataTable value="#{modelBuilder.model}" var="issues" frozenColCount="1" @@ -118,7 +110,6 @@ rows="40" width="300px" height="396px"> - <rich:column width="100px"> <f:facet name="header" > <h:outputText value="State"/> @@ -132,49 +123,150 @@ </rich:scrollableDataTable> ... ]]></programlisting> -<para> -Finally, the component has the following extra attributes for event processing on the client: - <itemizedlist> - <listitem>onselectionchange</listitem> - <listitem>oncomplete</listitem> - <listitem>onRowClick</listitem> - <listitem>onRowDblClick</listitem> - <listitem>onRowMouseUp</listitem> - <listitem>onRowMouseDown</listitem> - </itemizedlist> -</para> - </section> + <para>The <emphasis> + <property>&quot;selection&quot;</property> + </emphasis> attribute allows to get the row data when using <property>one and multi-selection + rows mode</property>.</para> + <para>This attribute is a reference to object to the instace of + <property>org.richfaces.model.selection.Selection</property> interface, containing current + collection of objects selected by user.</para> + <para>In the following example when user submits the form current collection of objects selected + by user is placed in the object's property. Then on complete action the <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> with selected data will be shown.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <h:form> + <rich:spacer height="30" /> + <rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="200px" + width="300px" id="carList" rows="40" columnClasses="col" + value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single" + selection="#{dataTableScrollerBean.selection}"> + <rich:column id="make"> + <f:facet name="header"><h:outputText styleClass="headerText" value="Make" /></f:facet> + <h:outputText value="#{category.make}" /> + </rich:column> + <rich:column id="model"> + <f:facet name="header"><h:outputText styleClass="headerText" value="Model" /></f:facet> + <h:outputText value="#{category.model}" /> + </rich:column> + <rich:column id="price"> + <f:facet name="header"><h:outputText styleClass="headerText" value="Price" /></f:facet> + <h:outputText value="#{category.price}" /> + </rich:column> + </rich:scrollableDataTable> + <rich:spacer height="20px"/> + <a4j:commandButton value="Show Current Selection" reRender="table" + action="#{dataTableScrollerBean.takeSelection}" + oncomplete="javascript:Richfaces.showModalPanel('panel');"/> + </h:form> + <rich:modalPanel id="panel" autosized="true"> + <f:facet name="header"> + <h:outputText value="Selected Rows"/> + </f:facet> + <f:facet name="controls"> + <span style="cursor:pointer" onclick="javascript:Richfaces.hideModalPanel('panel')">X</span> + </f:facet> + <rich:dataTable value="#{dataTableScrollerBean.selectedCars}" var="sel" id="table"> + <rich:column> + <f:facet name="header"><h:outputText value="Make" /></f:facet> + <h:outputText value="#{sel.make}" /> + </rich:column> + <rich:column id="model"> + <f:facet name="header"><h:outputText value="Model" /></f:facet> + <h:outputText value="#{sel.model}" /> + </rich:column> + <rich:column id="price"> + <f:facet name="header"><h:outputText value="Price" /></f:facet> + <h:outputText value="#{sel.price}" /> + </rich:column> + </rich:dataTable> + </rich:modalPanel> +...]]></programlisting> + <para>This is a result:</para> + <figure> + <title>The <emphasis>&quot;selection&quot;</emphasis> attribute usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/scrollableDataTable.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> The <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> component has the following extra attributes for event processing on the client: <itemizedlist> + <listitem>onselectionchange</listitem> + <listitem>oncomplete</listitem> + <listitem>onRowClick</listitem> + <listitem>onRowDblClick</listitem> + <listitem>onRowMouseUp</listitem> + <listitem>onRowMouseDown</listitem> + </itemizedlist> + </para> + </section> + <section> + <title>JavaScript API</title> + <table> + <title>JavaScript API</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>doCollapse(columnId)</entry> + + <entry>Performs a collapse action for column with corresponding Id</entry> + </row> + + </tbody> + </tgroup> + </table> + + </section> + + + <section> <title>Look-and-Feel Customization</title> - + <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> - Default style classes are mapped on <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> <property>skin parameters.</property> </emphasis></para> - + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> components at once:</para> - + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> <listitem> <para>Redefine the corresponding skin parameters</para> </listitem> - + <listitem> <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> component</para> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> component</para> </listitem> </itemizedlist> </section> - + <section> <title>Skin Parameters Redefinition</title> <table> @@ -202,9 +294,9 @@ </tbody> </tgroup> </table> - + <table> - <title>Skin parameters for header element</title> + <title>Skin parameters for header rows and cells</title> <tgroup cols="2"> <thead> <row> @@ -217,7 +309,7 @@ <entry>headerBackgroundColor</entry> <entry>background-color</entry> </row> - + <row> <entry>headerTextColor</entry> <entry>color</entry> @@ -246,19 +338,19 @@ <entry>tableBorderColor</entry> <entry>border-right-color</entry> </row> - </tbody> + </tbody> </tgroup> - </table> - + </table> + <table> - <title>Skin parameters for footer element</title> + <title>Skin parameters for footer rows and cells</title> <tgroup cols="2"> <thead> <row> <entry>Skin parameters</entry> <entry>CSS properties</entry> </row> - </thead> + </thead> <tbody> <row> <entry>tableSubfooterBackgroundColor</entry> @@ -272,7 +364,7 @@ <entry>generalSizeFont</entry> <entry>font-size</entry> </row> - + <row> <entry>tableBorderColor</entry> <entry>border-right-color</entry> @@ -287,10 +379,10 @@ </row> </tbody> </tgroup> - </table> - + </table> + <table> - <title>Skin parameters for row and cells</title> + <title>Skin parameters for column cells </title> <tgroup cols="2"> <thead> <row> @@ -300,14 +392,6 @@ </thead> <tbody> <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> <entry>tableBorderColor</entry> <entry>border-right-color</entry> </row> @@ -318,9 +402,9 @@ </tbody> </tgroup> </table> - + <table> - <title>Skin parameters for selected row and cells</title> + <title>Skin parameters for active rows</title> <tgroup cols="2"> <thead> <row> @@ -330,163 +414,184 @@ </thead> <tbody> <row> + <entry>tabDisabledTextColor</entry> + <entry>color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters for selected rows</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> <entry>additionalBackgroundColor</entry> <entry>background-color</entry> </row> - </tbody> + </tbody> </tgroup> </table> - + </section> - + <section> <title>Definition of Custom Style Classes</title> - + + <para>On the screenshot there are classes names that define styles for component elements.</para> + <figure> <title>Classes names</title> - + <mediaobject> <imageobject> <imagedata fileref="images/sdt.png"/> </imageobject> </mediaobject> </figure> - - <para>On the screenshot, there are classes names defining specified elements.</para> - + <table> - <title>Classes names that define component appearance</title> - + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> <thead> <row> <entry>Class name</entry> - + <entry>Description</entry> </row> </thead> - + <tbody> <row> <entry>rich-sdt</entry> - + <entry>Defines styles for a component appearance</entry> </row> - + </tbody> </tgroup> </table> - + <table> <title>Classes names that define footer and header elements</title> - + <tgroup cols="2"> <thead> <row> <entry>Class name</entry> - + <entry>Description</entry> </row> </thead> - + <tbody> - + <row> <entry>rich-sdt-header-cell</entry> - + <entry>Defines styles for header cells</entry> </row> - + <row> <entry>rich-sdt-header-raw</entry> - + <entry>Defines styles for a header raw</entry> </row> - + <row> <entry>rich-sdt-column-cell</entry> - + <entry>Defines styles for column cells</entry> </row> <row> <entry>rich-sdt-footer-cell</entry> - + <entry>Defines styles for footer cells</entry> </row> - + <row> <entry>rich-sdt-footer-raw</entry> - + <entry>Defines styles for a footer raw</entry> </row> <row> <entry>rich-sdt-hsep</entry> - + <entry>Defines styles for header separators</entry> </row> - + </tbody> </tgroup> </table> - + <table> <title>Classes names that define different states</title> - + <tgroup cols="2"> <thead> <row> <entry>Class name</entry> - + <entry>Description</entry> </row> </thead> - + <tbody> - + <row> <entry>rich-sdt-row-active</entry> - + <entry>Defines styles for an active row</entry> </row> - + <row> <entry>rich-sdt-row-selected</entry> - + <entry>Defines styles for a selected row</entry> </row> - + <row> <entry>rich-sdt-column-sort-up</entry> - + <entry>Defines styles for ascending sorted column</entry> </row> - + <row> <entry>rich-sdt-column-sort-down</entry> - + <entry>Defines styles for descending sorted column</entry> </row> </tbody> </tgroup> </table> - + <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the same names and define necessary properties in them.</para> - + <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> components, define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis>attributes.</para> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis>attributes.</para> </section> - + <section> <title>Relevant Resources Links</title> <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableD... - you can see the example of <emphasis role="bold"><property>&lt;rich:scrollableDataTable&gt;</property>s</emphasis> usage. </para> - </section> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableD... + >Here</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> usage. </para> + </section> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/separator.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/separator.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/separator.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -107,21 +107,61 @@ </itemizedlist> </section> + <section> <title>Look-and-Feel Customization</title> - <para>On the component generation, the framework presents a default rich-separator class in - styleClass of a generated component, i.e. in order to redefine appearance of all - <property>separators</property> at once, it&apos;s necessary to redefine this class in - your own CSS (replacing in the result properties defined in a skin with your own).</para> - <para>To define appearance of a particular <property>separators</property>, it&apos;s - possible to write your own CSS classes and properties in the component style attributes - (<emphasis><property>&quot;style&quot;</property>,</emphasis> - <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis>) modifying component property.</para> + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis></para> + + <para>To redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:separator&gt;</property> + </emphasis> components at once, you should add to your style sheets the <emphasis> + <property>style class</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:separator&gt;</property> + </emphasis> component.</para> </section> <section> + <title>Definition of Custom Style Classes</title> + <table> + <title>Classes names that define a component appearance</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-separator</entry> + + <entry>Defines styles for a component appearance</entry> + </row> + + </tbody> + </tgroup> + </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:separator&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create a class with the + same name and define necessary properties in it.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:separator&gt;</property> + </emphasis> components, define your own style class in the corresponding <emphasis + role="bold"> + <property>&lt;rich:separator&gt;</property> + </emphasis>attributes.</para> + </section> + + <section> <title>Relevant Resources Links</title> <para> <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/separator.j... Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -116,23 +116,35 @@ </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis> - <property>style class redefinition method</property> - </emphasis>.</para> - <para>Default style classes are mapped on <emphasis><property>skin - parameters</property>.</emphasis></para> - <para>To redefine appearance of all simpleTogglePanels at once, there are two ways:</para> + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:simpleTooglePanel&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> <property>style classes</property> - </emphasis> used by the simpleTogglePanel to your page style sheets</listitem> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:simpleTooglePanel&gt;</property> + </emphasis> component</para> + </listitem> </itemizedlist> </section> + <section> <title>Skin Parameters Redefinition</title> <table> - <title>Skin parameters for the whole simpleTogglePanels</title> + <title>Skin parameters for a whole component</title> <tgroup cols="2"> <thead> <row> @@ -142,18 +154,18 @@ </thead> <tbody> <row> - <entry>overAllBackground</entry> + <entry>generalBackgroundColor</entry> <entry>background-color</entry> </row> <row> - <entry>tableBorderColor</entry> + <entry>panelBorderColor</entry> <entry>border-color</entry> </row> </tbody> </tgroup> </table> <table> - <title>Parameters for a header element</title> + <title>Skin parameters for a header element</title> <tgroup cols="2"> <thead> <row> @@ -167,6 +179,10 @@ <entry>background-color</entry> </row> <row> + <entry>headerBackgroundColor</entry> + <entry>border-color</entry> + </row> + <row> <entry>headerSizeFont</entry> <entry>font-size </entry> </row> @@ -175,7 +191,7 @@ <entry>color</entry> </row> <row> - <entry>preferableHeaderWeightFont</entry> + <entry>headerWeightFont</entry> <entry>font-weight</entry> </row> <row> @@ -186,7 +202,7 @@ </tgroup> </table> <table> - <title>Parameters for a body element</title> + <title>Skin parameters for a body element</title> <tgroup cols="2"> <thead> <row> @@ -196,11 +212,11 @@ </thead> <tbody> <row> - <entry>overAllBackground</entry> + <entry>generalBackgroundColor</entry> <entry>background-color</entry> </row> <row> - <entry>preferableDataSizeFont</entry> + <entry>generalSizeFont</entry> <entry>font-size</entry> </row> <row> @@ -208,7 +224,7 @@ <entry>color</entry> </row> <row> - <entry>preferableDataFamilyFont</entry> + <entry>generalFamilyFont</entry> <entry>font-family</entry> </row> </tbody> @@ -217,18 +233,18 @@ </section> <section> <title>Definition of Custom Style Classes</title> + + <para>On the screenshot there are classes names that define styles for component elements.</para> + <figure> - <title>Style classes of simpleTogglePanel</title> + <title>Style classes</title> <mediaobject> <imageobject> - <imagedata fileref="images/simpleTogglePanel3.gif"/> + <imagedata fileref="images/simpleTogglePanel3.png"/> </imageobject> </mediaobject> </figure> - <para>On the screenshot, there are specific classes names that define specified elements. Except - these two classes, one more class specified for the whole wrapper <emphasis role="bold"> - <property>&lt;div&gt;</property> - </emphasis> element. See the table:</para> + <table> <title>Classes names that define a component appearance</title> <tgroup cols="2"> @@ -241,20 +257,20 @@ <tbody> <row> <entry>rich-stglpanel</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a simpleTogglePanel</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a component</entry> </row> <row> <entry>rich-stglpanel-header</entry> - <entry>Defines styles for header element of a simpleTogglePanel</entry> + <entry>Defines styles for header element of a component</entry> </row> <row> - <entry>rich-stglpanel-marker</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element for a marker</entry> + <entry>rich-stglpnl-marker</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a marker</entry> </row> <row> <entry>rich-stglpanel-body</entry> - <entry>Defines styles for a simpleTogglePanel body</entry> + <entry>Defines styles for a component content</entry> </row> </tbody> </tgroup> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/subTable.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/subTable.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/subTable.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -1,46 +1,46 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>rich:subtable</keyword> -<keyword>HtmlSubTable</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.SubTable</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlSubTable</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.SubTable</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.SubTableRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.SubTableTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>rich:subtable</keyword> + <keyword>HtmlSubTable</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.SubTable</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlSubTable</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.SubTable</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.SubTableRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.SubTableTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it could be used on a page:</para> @@ -49,10 +49,14 @@ <emphasis role="bold">Example:</emphasis> </para> <programlisting role="XML"><![CDATA[... - <rich:dataTable value="#{capitalsBean.capitals}" var="capitals"> - <!--...//Set of columns and header/footer facets--> + <rich:dataTable value="#{capitalsBean.capitals}" var="capitals"> + <rich:column> + ... + </rich:column> <rich:subTable value=#{capitals.details} var="detail"> - <!--...//Set of columns and header/footer facets--> + <rich:column> + ... + </rich:column> </rich:subTable> </rich:dataTable> ... @@ -72,54 +76,107 @@ </section> <section> <title>Details of Usage</title> - <para>The <property>subtable</property> component is very similar to the custom JSF dataTable one, the only difference is that - the component doesn&apos;t add the wrapping <emphasis role="bold"><property>&lt;table&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;tbody&gt;</property></emphasis> tags. - Hence, it&apos;s possible to add a subtable structure different from the main one to organize tables - of the master - details type. The component is also has common peculiarities of any rich component:</para> - <itemizedlist> - <listitem>Skin support. The table completely meets a three-class principle of Rich Faces skinnability</listitem> - <listitem>Support of Ajax updates for a limited set of rows</listitem> - </itemizedlist> - <para>Skins support is described in the <link linkend="ArchitectureOverview">corresponding section</link>. Ajax support is - possible because the component is created basing on the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> component and as a result the - component has its possibilities of Ajax updates for a limited set of rows. The component is implemented - with the <emphasis ><property>&quot;ajaxKeys&quot;</property></emphasis> attribute for a table and in contrast to the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> outputs the standard HTML - structure for table rendering.</para> - <programlisting role="XML"><![CDATA[... - <rich:dataTable value="#{capitalsBean.capitals}" var="capitals" id="table"> - <!--...//Set of columns and header/footer facets--> - <rich:subTable value="#{capitals.details}" var="detail" ajaxKeys="#{bean.ajaxSet}" binding="#{bean.subtable}" > - <!--...//Set of columns and header/footer facets--> + + <para>The <emphasis role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis> component is similar to the <emphasis role="bold"> + <property>&lt;h:dataTable&gt;</property> + </emphasis> one, except Ajax support and skinnability. One more difference is that the + component doesn&apos;t add the wrapping <emphasis role="bold"> + <property>&lt;table&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;tbody&gt;</property> + </emphasis> tags. Ajax support is possible, because the component was created basing on the + <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> component and as a result it could be partially updated with Ajax. <emphasis> + <property>&quot;ajaxKeys&quot;</property> + </emphasis> attribute allows to define rows that is updated after an Ajax request.</para> + + <para>Here is an example:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML"><![CDATA[... + <rich:dataTable value="#{capitalsBean.capitals}" var="capitals"> + <rich:column> + ... + </rich:column> + <rich:subTable value="#{capitals.details}" var="detail" ajaxKeys="#{bean.ajaxSet}" binding="#{bean.subtable}" id="subtable"> + <rich:column> + ... + </rich:column> </rich:subTable> </rich:dataTable> ... - <a4j:commandButton action="#{bean.someAction}" reRender="table"/> + <a4j:commandButton action="#{tableBean.action}" reRender="subtable"/> ... ]]></programlisting> -<para>For such a table during someAction processing called with Ajax request when the key is pressed - it&apos;s possible to fill in lot&apos;s of ajaxKeys with strings indices that are to be updated. - A resulting output on the client contains only required rows and they are updated in the tree, even - when update is specified for the whole table.</para> - </section> - <section> + <para> In the example <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute contains value of <emphasis> + <property>&quot;id&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis> component. As a result the component is updated after an Ajax request.</para> + + <para>The component allows to use <emphasis> + <property>&quot;header&quot;</property> + </emphasis> and <emphasis> + <property>&quot;footer&quot;</property> + </emphasis> facets for output. See an example for <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> + <link linkend="table_ex">component</link>.</para> + + </section> + + <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis -><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all subTables at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis -><property>style classes</property></emphasis> used by the subTable to your page style sheets</listitem> - </itemizedlist> - <para>To redefine a style of a particular page, use component class attributes which list is the same as the <property>subTable</property> one and is known to you.</para> - </section> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis> components at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Skin Parameters Redefinition</title> + + <para>Skin parameters redefinition for <emphasis role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis> are the same as for the <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> + <link linkend="SPR">component</link>.</para> + </section> + + <section> <title>Definition of Custom Style Classes</title> - + <table> - <title>Classes names that define a subtable appearance</title> + <title>Classes names that define a component appearance</title> <tgroup cols="2"> <thead> <row> @@ -136,15 +193,28 @@ <entry>rich-subtable-caption</entry> <entry>Defines styles for a &quot;caption&quot; facet element</entry> </row> + + </tbody> + </tgroup> + </table> + + <table> + <title>Classes names that define header and footer elements</title> + <tgroup cols="2"> + <thead> <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + <row> <entry>rich-subtable-header</entry> <entry>Defines styles for a subtable header row</entry> </row> + <row> - <entry>rich-subtable-headercell</entry> - <entry>Defines styles for a subtable header cell</entry> - </row> - <row> <entry>rich-subtable-header-continue</entry> <entry>Defines styles for all subtable header lines after the first</entry> </row> @@ -152,7 +222,41 @@ <entry>rich-subtable-subheader</entry> <entry>Defines styles for a column header of subtable</entry> </row> + <row> + <entry>rich-subtable-subfooter</entry> + <entry>Defines styles for a column footer of subtable</entry> + </row> + + <row> + <entry>rich-subtable-footer</entry> + <entry>Defines styles for a subtable footer row</entry> + </row> + + <row> + <entry>rich-subtable-footer-continue</entry> + <entry>Defines styles for all subtable footer lines after the first</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Classes names that define rows and cells</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-subtable-headercell</entry> + <entry>Defines styles for a subtable header cell</entry> + </row> + + <row> <entry>rich-subtable-subheadercell</entry> <entry>Defines styles for a column header cell of subtable</entry> </row> @@ -168,39 +272,30 @@ <entry>rich-subtable-firstrow</entry> <entry>Defines styles for a subtable start row</entry> </row> + <row> - <entry>rich-subtable-subfooter</entry> - <entry>Defines styles for a column footer of subtable</entry> - </row> - <row> <entry>rich-subtable-subfootercell</entry> <entry>Defines styles for a column footer cell of subtable</entry> </row> + <row> - <entry>rich-subtable-footer</entry> - <entry>Defines styles for a subtable footer row</entry> - </row> - <row> <entry>rich-subtable-footercell</entry> <entry>Defines styles for a subtable footer cell</entry> </row> - <row> - <entry>rich-subtable-footer-continue</entry> - <entry>Defines styles for all subtable footer lines after the first</entry> - </row> + </tbody> </tgroup> </table> <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:subTable&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + <property>&lt;rich:subTable&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the same names and define necessary properties in them.</para> - + <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:subTable&gt;</property> - </emphasis> components, define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:subTable&gt;</property> - </emphasis>attributes.</para> + <property>&lt;rich:subTable&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis>attributes.</para> </section> -</section> \ No newline at end of file +</section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -236,19 +236,28 @@ <section> <title>Look-and-Feel Customization</title> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> - <para>For skinnability implementation, the components use a style class redefinition method. - Default style classes are mapped on skin parameters.</para> + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis> components at once:</para> - <para>There are two ways to redefine the appearance of all suggestionbox at once:</para> - <itemizedlist> <listitem> <para>Redefine the corresponding skin parameters</para> </listitem> <listitem> - <para>Add to your style sheets style classes used by a suggestionbox</para> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis> component</para> </listitem> </itemizedlist> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/tab.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/tab.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/tab.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -155,26 +155,151 @@ </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use <emphasis - -><property>style class redefinition method</property>.</emphasis> -Default style classes are mapped on <emphasis - -><property>skin parameters</property>.</emphasis></para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + <note><title>Note:</title> A panel appearance and content is defined with a <property>tab</property> panel i.e. on the <property>tab</property> level it&apos;s possible to define only an appearance of this <property>tab</property> header. </note> - <para>To redefine appearance of all tabs at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis -><property>style classes</property></emphasis> used by the tab to your page style sheets</listitem> - </itemizedlist> - -</section> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:tab&gt;</property> + </emphasis> components at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:tab&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> + + <section> + <title>Skin Parameters Redefinition</title> + <table> + <title>Skin parameters redefinition for a tab header</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalTextColor</entry> + <entry>color</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Skin parameters redefinition for an active tab</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalTextColor</entry> + <entry>color</entry> + </row> + <row> + <entry>subBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>generalBackgroundColor</entry> + <entry>background-color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for an inactive tab</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>tabBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>subBorderColor</entry> + <entry>border-color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for a disabled tab</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>tabBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>subBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>tabDisabledTextColor</entry> + <entry>color</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> <title>Definition of Custom Style Classes</title> + <figure> + <title>Classes names</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tab1.png"/> + </imageobject> + </mediaobject> + </figure> + + <table> <title>Classes names that define a tab</title> <tgroup cols="2"> @@ -189,6 +314,11 @@ <entry>rich-tab-header</entry> <entry>Defines styles for a tab header</entry> </row> + + <row> + <entry>rich-tab-lable</entry> + <entry>Defines styles for a tab lable</entry> + </row> </tbody> </tgroup> </table> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/tabPanel.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/tabPanel.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/tabPanel.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -153,35 +153,109 @@ </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis> - <property>style class redefinition method</property> - </emphasis>.</para> - <para>Default style classes are mapped on <emphasis><property>skin - parameters</property>.</emphasis></para> - <para>To redefine appearance of all tabPanels at once, there are two ways:</para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:tabPanel&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> <property>style classes</property> - </emphasis> used by the tabPanel to your page style sheets</listitem> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:tabPanel&gt;</property> + </emphasis> component</para> + </listitem> </itemizedlist> </section> + <section> + <title>Skin Parameters Redefinition</title> + <table> + <title>Skin parameters redefinition for a header</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>panelBorderColor</entry> + <entry>border-top-color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for an internal contant</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>generalTextColor</entry> + <entry>color</entry> + </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-bottom-color</entry> + </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-right-color</entry> + </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-left-color</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + + <section> <title>Definition of Custom Style Classes</title> - + <para>On the screenshot there are classes names that define styles for component elements.</para> <figure> - <title>TabPanel style classes</title> + + <title>Style classes</title> <mediaobject> <imageobject> <imagedata fileref="images/tabPanel4.gif" scalefit="1"/> </imageobject> </mediaobject> </figure> - <para>On the screenshot, there are names on the redefined CSS classes that substituted - automatically by the framework in order to define an appearance of the corresponding elements - of all tab panels on a page.</para> <table> <title>Classes names that define a component appearance</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/toggleControl.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/toggleControl.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/toggleControl.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -111,18 +111,22 @@ ]]></programlisting> <para>In this example the switching is performed on facets specified in the <emphasis - </section> + </section> + <section> <title>Look-and-Feel Customization</title> - <para>On component generation the framework substitutes the default - class <emphasis ><property>rich-toggle-control</property></emphasis> into - styleClass of a generated component, i.e. to redefine at once all <property>toggle controls</property> appearance on a - page, redefine this class in your CSS.</para> - <para>To define a particular <property>toggle controls</property> appearance, write down your own CSS properties and - classes in component style attributes (<emphasis -><property>&quot;style&quot;</property>,</emphasis> <emphasis -><property>&quot;styleClass&quot;</property></emphasis>)and the properties have been changed.</para> + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property></emphasis></para> + <para>To redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis> components at once, you should add to your style sheets <emphasis> + <property>style class</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis> component. +</para> </section> + <section> <title>Definition of Custom Style Classes</title> <table> @@ -143,5 +147,16 @@ </tbody> </tgroup> </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create a class with the + same name and define necessary properties in it.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis> components define your own style class in the corresponding <emphasis + role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis>attributes.</para> </section> </section> \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/togglePanel.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/togglePanel.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/togglePanel.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -145,6 +145,34 @@ </section> <section> + <title>Definition of Custom Style Classes</title> + <table> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-toggle-panel</entry> + <entry>Defines styles for all component</entry> + </row> + + <row> + <entry>rich-tglctrl</entry> + <entry>Defines styles for a toggle control</entry> + </row> + + </tbody> + </tgroup> + </table> + + </section> + + <section> <title>Relevant Resources Links</title> <para> <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/togglePanel... Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBar.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBar.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBar.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -104,30 +104,46 @@ </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis> - <property>style class redefinition method</property> - </emphasis>.</para> - <para>Default style classes are mapped on <emphasis><property>skin - parameters</property>.</emphasis></para> - <para>To redefine appearance of all toolBars at once, there are two ways:</para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:toolBar&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> <property>style classes</property> - </emphasis> used by the toolBar to your page style sheets</listitem> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:toolBar&gt;</property> + </emphasis> component</para> + </listitem> </itemizedlist> + </section> + + <section> + <title>Skin Parameters Redefinition</title> <table> - <title>Skin parameters redefinition</title> + <title>Skin parameters redefinition for a component exterior</title> <tgroup cols="2"> <thead> <row> - <entry>Skin parameters for the toolbar component</entry> - <entry>Corresponding CSS parameters</entry> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> </row> </thead> <tbody> <row> - <entry>tableBorderColor</entry> + <entry>panelBorderColor</entry> <entry>border-color</entry> </row> <row> @@ -137,11 +153,43 @@ </tbody> </tgroup> </table> - </section> + + <table> + <title>Skin parameters redefinition for a component item</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>headerSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>headerTextColor</entry> + <entry>color</entry> + </row> + <row> + <entry>headerWeightFont</entry> + <entry>font-weight</entry> + </row> + <row> + <entry>headerFamilyFont</entry> + <entry>font-family</entry> + </row> + </tbody> + </tgroup> + </table> + + </section> + <section> <title>Definition of Custom Style Classes</title> <table> - <title>Classes names that define a toolBar</title> + <title>Classes names that define a component appearance</title> <tgroup cols="2"> <thead> <row> @@ -161,9 +209,7 @@ </tbody> </tgroup> </table> - <para>On generating, the component substitutes the default class rich-toolbar-exterior into <emphasis> - <property>style class</property> - </emphasis> of a generated component.</para> + <para>In order to redefine styles for all <emphasis role="bold"> <property>&lt;rich:toolBar&gt;</property> </emphasis> components on a page using CSS, it&apos;s enough to create class with the Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -75,6 +75,8 @@ ... ]]></programlisting> </section> + + <section> <title>Details of Usage</title> <para>A <property>toolBarGroup</property> is a wrapper component that groups <property>toolBar</property> content and facilitates creation of menu and tool bars. All components defined inside are located on a stylized bar with a possibility to group, arrange on the both bar sides, and place predefined separators between them.</para> @@ -123,43 +125,62 @@ </mediaobject> </figure> </section> - <section> + <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all toolBarGroups at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis -><property>style classes</property></emphasis> used by the toolBarGroup to your page style sheets</listitem> - </itemizedlist> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:toolBarGroup&gt;</property> + </emphasis> components at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:toolBarGroup&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> + + <section> + <title>Skin Parameters Redefinition</title> <table> - <title>Skin parameters redefinition</title> + <title>Skin parameters redefinition</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters for the toolBarGroup component</entry> - <entry>Corresponding CSS parameters</entry> - </row> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> </thead> <tbody> <row> <entry>headerSizeFont</entry> <entry>font-size</entry> </row> - <row> + <row> <entry>headTextColor</entry> <entry>color</entry> </row> - <row> + <row> <entry>headerFamilyFont</entry> <entry>font-family</entry> </row> </tbody> </tgroup> </table> - </section> + </section> + </section> \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -136,6 +136,30 @@ It is recommended to define parent component "id" for correction of <property>tooltip</property> work. </note> + <para>The attribute <emphasis><property>&quot;for&quot;</property></emphasis> is used for defining the <emphasis><property>&quot;id&quot;</property></emphasis> of an element a tooltip should be attached to. Look at the example: +</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<div id="elementId"> + <rich:toolTip for="elementId">Using a toolTip<rich:toolTip> + <p>The first simple example<p> +</div> +... +<div id="elementId"> + <p>The second simple example<p> +</div> +<rich:toolTip for="elementId">Using a toolTip<rich:toolTip> +... +]]></programlisting> + + <para>Here, the attribute <emphasis><property>&quot;for&quot;</property></emphasis> of a <emphasis role="bold"> + <property>&lt;rich:tooltip&gt;</property> + </emphasis> component is required. Whithout it an example doesn’t work because HTML elements aren't presented in component tree built by facelets. + </para> + <para> The <emphasis><property>&quot;mode&quot;</property></emphasis> attribute is provided you to control the way of data loading to <property>tooltip</property>. It has following values: <itemizedlist> @@ -150,10 +174,10 @@ <para> Special JS API is provided to control the component behaviour: <itemizedlist> - <listitem>doShow() - Shows the corresponding tooltip</listitem> - <listitem>doHide() - Hides the corresponding tooltip</listitem> - <listitem>doEnable() - Enables the corresponding tooltip</listitem> - <listitem>doDisable() - Disables the corresponding tooltip</listitem> + <listitem> - </listitem> + <listitem> - </listitem> + <listitem> - </listitem> + <listitem> - </listitem> </itemizedlist> </para> <para> @@ -185,27 +209,90 @@ </itemizedlist> </para> </section> + + <section> + <title>JavaScript API</title> + <table> + <title>JavaScript API</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>doShow()</entry> + + <entry>Shows the corresponding tooltip</entry> + </row> + + <row> + <entry>doHide()</entry> + + <entry>Hides the corresponding tooltip</entry> + </row> + + <row> + <entry>doEnable()</entry> + + <entry>Enables the corresponding tooltip</entry> + </row> + + <row> + <entry>doDisable()</entry> + + <entry>Disables the corresponding tooltip</entry> + </row> + + </tbody> + </tgroup> + </table> + + </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components, use a <emphasis><property>style class redefinition method</property></emphasis>. - </para> - <para>Default style classes are mapped on <emphasis><property>skin parameters</property>.</emphasis></para> - - <para>To redefine appearance of all <property>tooltip</property> at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine the corresponding skin parameters</listitem> - <listitem>to add to your style sheets style classes used by a <property>tooltip</property></listitem> - </itemizedlist> - - <para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:tooltip&gt;</property> + </emphasis> components at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:tooltip&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + + </section> + <section> + <title>Skin Parameters Redefinition</title> <table> - <title>Skin parameters redefinition</title> + <title>Skin parameters redefinition for a component</title> <tgroup cols="2"> <thead> <row> - <entry>Skin parameters for the tooltip component</entry> - <entry>Corresponding CSS parameters</entry> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> </row> </thead> <tbody> @@ -232,14 +319,14 @@ </tbody> </tgroup> </table> - </para> + </section> <section> <title>Definition of Custom Style Classes</title> <table> - <title>Classes names that define a tooltip</title> + <title>Classes names that define a component appearance</title> <tgroup cols="2"> <thead> <row> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/tree.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/tree.desc.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/tree.desc.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -1,45 +1,63 @@ <?xml version="1.0" encoding="UTF-8"?> <section> -<sectioninfo> -<keywordset> -<keyword>tree</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>A component for a tree-like presentation of data. It includes built-in drag and drop - support for its child elements.</para> - <figure> - <title>Expanded tree with child elements</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tree1.gif"/> - </imageobject> - </mediaobject> - </figure> + <sectioninfo> + <keywordset> + <keyword>tree</keyword> + </keywordset> + </sectioninfo> + <section> + <title>Description</title> + <para>A component for a tree-like presentation of data. It includes built-in drag and drop + support for its child elements.</para> + <figure> + <title>Expanded tree with child elements</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tree1.png"/> + </imageobject> + </mediaobject> + </figure> + <para>On the screenshot above, there is an example of the <property>tree</property> with an expanded node. This node + contains its own node with several leaves. Besides, it&apos;s possible to choose your own + icons for tree nodes.</para> </section> <section> - <title>Key Features</title> + <title>Key Features</title> <itemizedlist> <listitem> <para>Highly customizable look-and-feel</para> + <para>This feature provides rich possibilities to change an appearance of a component into different styles.</para> </listitem> - + <listitem> <para>Built-in drag and drop support</para> + <para>This feature allows programming DnD possibility for the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component so that it would be possible to change a placement of nodes in a <property>tree</property> simply by dropping a certain node from one place to another. Look at the screenshot below:</para> + <figure> + <title>Drag and drop support</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tree3.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + Here, an appropriate CD-disk is been moving from one album to the next one. + </para> </listitem> <listitem> <para>Built-in Ajax processing</para> </listitem> - + <listitem> - <para>Support of template sets for different node types</para> + <para>Possibility to define a visual representation by node type</para> </listitem> - + <listitem> <para>Support of several root elements in a tree</para> </listitem> </itemizedlist> + </section> </section> -</section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/tree.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/tree.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/tree.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -44,17 +44,40 @@ <section> <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used in a page: </para> + <para>There are two cases for a tree definition: together with <emphasis role="bold"> + <property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;rich:treeNodesAdaptor&gt;</property> + </emphasis> and without them. In the first case, it&apos;s possible to define it without <emphasis> + <property>&quot;value&quot;</property> + </emphasis> and <emphasis> + <property>&quot;var&quot;</property> + </emphasis> attributes as follows: </para> <para> <emphasis role="bold">Example:</emphasis> </para> + <programlisting role="XML"><![CDATA[... <rich:tree> - <!--Set of the Tree nodes--> + <rich:recursiveTreeNodesAdaptor roots="#{fileSystemBean.sourceRoots}" var="item" nodes="#{item.nodes}" /> </rich:tree> -... -]]></programlisting> +...]]></programlisting> + + <para> In the second case, it&apos;s necessary to define it with these attributes as + it&apos;s shown below: </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <rich:tree value="#{library.data}" var="item" > + <rich:treeNode icon="/images/tree/singer.png" > + <h:outputText value="#{item.name}" /> + </rich:treeNode> + ... + </rich:tree> +...]]></programlisting> </section> <section> <title>Creating the Component Dynamically Using Java</title> @@ -64,71 +87,177 @@ </para> <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlTree; ... -HtmlTree myPanel = new HtmlTree(); -... -]]></programlisting> +HtmlTree myTree = new HtmlTree(); +...]]></programlisting> </section> <section> <title>Details of Usage</title> - <para>As it has been mentioned <link linkend="tree">above</link> the tree component allows to render any tree-like structure - of data.</para> - <para>A bean property is passed into a tree <property>&quot;value&quot;</property> attribute. The property - keeps the structure of a org.richfaces.component.TreeNode type (you could have a look at this - interface description in the <ulink - url="http://labs.jboss.com/file-access/default/members/jbossrichface... - >API document</ulink>). The default classes for lists building of a TreeNodeImpl type (it - implements a TreeNode interface) for an XML structure XmlNodeData and XmlTreeDataBuilder are - implemented in the tree component. Hence, in order to provide your own class for TreeNode, - it&apos;s necessary only to implement this interface, i.e. the <emphasis> + <para>As it has been mentioned <link linkend="tree">above</link> the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component allows rendering any tree-like structure of data.</para> + <para>A bean property is passed into a tree <emphasis> + <property>&quot;value&quot;</property> + </emphasis> attribute. The property keeps a structure of + <property>&quot;TreeNode&quot;</property> type instances.</para> + <para>There is a default class <property>&quot;TreeNodeImpl&quot;</property>, which is a + default implementation for TreeNode interface. TreeNode has attribute <emphasis> + <property>&quot;data&quot;</property> + </emphasis> which value is available as a request scope variable with a name that is defined + by <emphasis> <property>&quot;var&quot;</property> - </emphasis> attribute contains a name providing an access to data defined with a value. </para> - <para>For data output, named <property>tree</property> nodes elements are used. Each element, - for example depending on its definition, could be rendered with markup defined in one of - <property>tree</property> nodes. It&apos;s defined with the <emphasis> + </emphasis> attribute of a <property>tree</property> component. <ulink + url="http://labs.jboss.com/file-access/default/members/jbossrichface... + >&quot;XmlTreeDataBuilder&quot; class</ulink> allows transforming XML into + structures of objects containing <property>&quot;XmlNodeData&quot;</property> + instances as data, which could be represented by the <property>tree</property> component. </para> + + <para>For particular visual representation of data <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> selects one of the children <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> components by type. The type is defined with the <emphasis> <property>&quot;nodeFace&quot;</property> - </emphasis> attribute that contains treeNode name for elements rendering. It&apos;s not - necessary to define <emphasis> + </emphasis> attribute that corresponds to a value of <emphasis> + <property>&quot;type&quot;</property> + </emphasis> attribute for <property>treeNode</property>. An example of definition is placed + below: </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="JAVA"><![CDATA[... + <h:form> + <rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}"> + <rich:treeNode type="artist" iconLeaf="/images/tree/singer.gif" icon="/images/tree/singer.gif"> + <h:outputText value="#{item.name}" /> + </rich:treeNode> + <rich:treeNode type="album" iconLeaf="/images/tree/disc.gif" icon="/images/tree/disc.gif"> + <h:outputText value="#{item.title}" /> + </rich:treeNode> + <rich:treeNode type="song" iconLeaf="/images/tree/song.gif" icon="/images/tree/song.gif"> + <h:outputText value="#{item.title}" /> + </rich:treeNode> + </rich:tree> +</h:form> +...]]></programlisting> + + <para>This is a result: </para> + + <figure> + <title>Expanded tree with child elements</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tree2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In case when <emphasis> <property>&quot;nodeFace&quot;</property> - </emphasis> attribute. In case when <emphasis> - <property>&quot;nodeFace&quot;</property> - </emphasis> is undefined the first node inside the tree will be use by default (attributes <emphasis><property>&quot;rendered</property></emphasis> and - <emphasis><property>&quot;type&quot;</property></emphasis> for this node should not be defined). </para> + </emphasis> attribute isn&apos;t defined or defined but its value isn&apos;t equal to + any type of all children <property>treeNode</property> components or this value is equal to + some type, but the value of <emphasis> + <property>&quot;rendered&quot;</property> + </emphasis> attribute for this <property>treeNode</property> is + <property>&quot;false&quot;</property> then default <property>treeNode</property> is + used. </para> + <para>Default <property>treeNode</property> is the first node (with not defined <emphasis> + <property>&quot;type&quot;</property> + </emphasis> attribute and defined <emphasis> + <property>&quot;rendered&quot;</property> + </emphasis> attribute) from all children nodes of the tree component. If such + <property>treeNode</property> wasn&apos;t found, the following default interior + presentation is used: </para> + <para> <emphasis role="bold">Example:</emphasis> </para> - <programlisting role="JAVA"><![CDATA[nodeFace="#{data.name != 'param-value' ? 'input' : 'text'}" - ]]></programlisting> - <para>On the screenshot there are examples of nodes defined with different templates on the - following conditions.</para> + + <programlisting role="JAVA"><![CDATA[<h: outputText value="#{varAttributeName}">]]></programlisting> + + <para> + <property>&quot;varAttributeName&quot;</property> is a value for <emphasis> + <property>&quot;var&quot;</property> + </emphasis> attribute. </para> + + <para> It&apos;s possible to define several <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> components with the equal values of <emphasis> + <property>&quot;type&quot;</property> + </emphasis> attribute and different values of <emphasis> + <property>&quot;rendered&quot;</property> + </emphasis> attribute. It provides the possibility to define different markup for the same + <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> components type. An example is placed below. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="JAVA"><![CDATA[... + <h:form> + <rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}"> + <rich:treeNode type="artist" iconLeaf="/images/tree/singer.gif" icon="/images/tree/singer.gif" + rendered="#{item.exist}"> + <h:outputText value="#{item.name}" /> + </rich:treeNode> + <rich:treeNode type="artist" iconLeaf="/images/tree/singer.gif" icon="/images/tree/singer_absent.gif" + rendered="#{not item.exist}"> + <h:outputText value="#{item.name}" /> + </rich:treeNode> + ... + </rich:tree> +</h:form> +...]]></programlisting> + + <para> The example represents definition of two different <emphasis role="bold"> + <property> &lt;rich:treeNode&gt;</property> + </emphasis> components. The first specifies the album that&apos;s available for sale, the + other specifies the album that is not available. The result is shown on the following + screenshot: </para> + <figure> - <title>Different nodes of tree</title> + <title> Using the <emphasis> + <property>&quot;type&quot;</property> + </emphasis> and the <emphasis> + <property>&quot;rendered&quot;</property> + </emphasis> attributes</title> <mediaobject> <imageobject> - <imagedata fileref="images/tree2.gif"/> + <imagedata fileref="images/tree4.png"/> </imageobject> </mediaobject> </figure> - <para>Switching on nodes opening/closing (expanded/collapsed) could be implemented in three - modes. It could be specified in the <emphasis> + + <para>You can define an EL-expression for <emphasis> + <property>&quot;nodeFace&quot;</property> + </emphasis> attribute. See an example: </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="JAVA"><![CDATA[nodeFace="#{data.name != 'param-value' ? 'artist' : 'album'}" ]]></programlisting> + + <para>Switching on treeNode could be performed in three modes. Modes could be specified with <emphasis> <property>&quot;switchType&quot;</property> </emphasis> attribute. </para> + <itemizedlist> - <listitem>AJAX - request onto the server is used for switching </listitem> - <listitem>Server - custom requests onto the server are used for switching</listitem> - <listitem>Client - all data is uploaded onto the server, the switching is implemented with a - client script</listitem> + <listitem>Ajax - Ajax submission is used for switching </listitem> + <listitem>Server - regular form submition request is used</listitem> + <listitem>Client - switching is done as a whole on a client, no interaction with the server + presents</listitem> </itemizedlist> - <para>Common selecting allows also to activate Ajax requests with the <emphasis> + + <para>If <emphasis> <property>&quot;ajaxSubmitSelection&quot;</property> - </emphasis> attribute (true/false).</para> - <para>To set a model saving during requests, use the <emphasis> - <property>&quot;preserveModel&quot;</property> - </emphasis>attribute with state, request (default) and none values. The attribute is used for - cashing data between requests in a state or request. The <emphasis> - <property>&quot;treeDataLocator&quot;</property> - </emphasis> attribute defines a class providing an access to cashed data according to the ids - saved in state/request on recovery or cashing data saving the Id on caching.</para> + </emphasis> attribute value set to <emphasis> + <property>&quot;true&quot;</property> + </emphasis> than any change in selection initiates an Ajax request to the server.</para> <para> The <emphasis> <property>&quot;icon&quot;</property> @@ -140,65 +269,86 @@ <property>&quot;iconLeaf&quot;</property> </emphasis> attributes define icons for the component. Also you can define icons using facets with the same names. If the facets are defined, the corresponding attributes are ignored and - facets contents are used as icons. The width of a rendered facet area is 16px. - </para> + facets contents are used as icons. By default the width of a rendered facet area is 16px. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> - <programlisting role="JAVA"><![CDATA[... + <programlisting role="JAVA"><![CDATA[... <rich:tree ....> ... <f:facet name="icon"> - <hutputText value="A"/> + <h:graphicImage value="/images/tree/singer.gif "/> </f:facet> <f:facet name="iconCollapsed"> - <hutputText value="B"/> - </f:facet> + <h:graphicImage value="/images/tree/singer.gif " /> + </f:facet> <f:facet name="iconExpanded"> - <hutputText value="C"/> + <h:graphicImage value="/images/tree/singer.gif " /> </f:facet> <f:facet name="iconLeaf"> - <hutputText value="D"/> + <h:graphicImage value="/images/tree/song.gif " /> </f:facet> - ... + ... </rich:tree> -... -]]></programlisting> +...]]></programlisting> + <para> The <emphasis role="bold"> + <property>&lt;rich: tree&gt;</property> + </emphasis> component can be used together with <emphasis role="bold"> + <property>&lt;rich: treeNodeAdaptor&gt;</property> + </emphasis>. In this case there is no need to specify the attributes <emphasis> + <property>&quot;value&quot;</property> + </emphasis> and <emphasis> + <property>&quot;var&quot;</property> + </emphasis>. Besides, visual representation shouldn&apos;t be defined right in the + <property>tree</property>. In this case a tree tag is intended mainly for defining common + attributes such as <emphasis> + <property>&quot;ajaxSubmitSelection&quot;</property> + </emphasis>, for instance. </para> + </section> <section> <title>Built-In Drag and Drop</title> - <para>The tree component functionality provides a built-in support for Drag and Drop - operations. The main usage principles are the same as for Rich Faces Drag and Drop wrapper - components. Hence, to get additional information on the topic, read the corresponding - chapters:<link linkend="dndParam">&quot;rich:dndParam&quot;</link> - <link linkend="dragSupport">&quot;rich:dragSupport&quot;</link> - <link linkend="dragIndicator">&quot;rich:dragIndicator&quot;</link> - <link linkend="dropSupport">&quot;rich:dropSupport&quot;</link> - <property>Tree nodes</property> could be drag or drop elements, so tree has both attributes + <para>The <emphasis role="bold"> + <property>&lt;rich: tree&gt;</property> + </emphasis> component functionality provides a built-in support for Drag and Drop operations. + The main usage principles are the same as for RichFaces DnD wrapper components. Hence, to get + additional information on the topic, read the corresponding chapters:<link linkend="dndParam" + >&quot;rich:dndParam&quot;</link>, <link linkend="dragSupport" + >&quot;rich:dragSupport&quot;</link>, <link linkend="dragIndicator" + >&quot;rich:dragIndicator&quot;</link>, <link linkend="dropSupport" + >&quot;rich:dropSupport&quot;</link>. As <property>treeNodes</property> could be + Drag, Drop or DnD elements, a <property>tree</property> can include the following attributes groups.</para> <table> - <title>Drag attributes description</title> + <title>Drag attributes group</title> <tgroup cols="2"> <thead> <row> <entry>dragValue</entry> - <entry>Element value drag passing into processing after a Drop event.</entry> + <entry>Element value drag passing into processing after a Drop event</entry> </row> </thead> <tbody> <row> + <entry>dragListener</entry> + <entry>A listener that processes a Drag event</entry> + </row> + <row> <entry>dragIndicator</entry> - <entry>An indicator component id.</entry> + <entry>Id of a component that is used as drag pointer during the drag operation</entry> </row> <row> <entry>dragType</entry> - <entry>A drag zone name used to define whether processing is necessary with a Drop zone - or not.</entry> + <entry>Defines a drag zone type that is used for definition of a dragged element, which + can be accepted by a drop zone</entry> </row> </tbody> </tgroup> </table> <table> - <title>Drop attributes description</title> + <title>Drop attributes group</title> <tgroup cols="2"> <thead> <row> @@ -209,11 +359,11 @@ <tbody> <row> <entry>dropListener</entry> - <entry>A listener that processes a drop event. </entry> + <entry>A listener that processes a Drop event. </entry> </row> <row> <entry>acceptedTypes</entry> - <entry>Drag zone names allowed to be processed with a drop zone.</entry> + <entry>Drag zone names are allowed to be processed with a Drop zone.</entry> </row> <row> <entry>typeMapping</entry> @@ -222,17 +372,68 @@ </tbody> </tgroup> </table> + + <para>An example of usage is placed below.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="JAVA"><![CDATA[... + <h:form> + <rich:tree dragIndicator=":treeDragIndicator" dropListener="#{libraryAjaxTree.processDrop}" style="width:300px" value="#{libraryAjaxTree.data}" var="item" nodeFace="#{item.type}"> + <rich:treeNode type="artist" acceptedTypes="album" iconLeaf="/images/tree/group.gif" icon="/images/tree/group.gif"> + <h:outputText value="#{item.name}" /> + </rich:treeNode> + <rich:treeNode type="album" dragType="album" acceptedTypes="song" iconLeaf="/images/tree/cd.gif" icon="/images/tree/cd.gif"> + <h:outputText value="#{item.title}" /> + <rich:dndParam name="label" type="drag" value="Album: #{item.title}" /> + </rich:treeNode> + <rich:treeNode type="song" dragType="song" iconLeaf="/images/tree/music.gif" icon="/images/tree/music.gif"> + <h:outputText value="#{item.title}" /> + <rich:dndParam name="label" type="drag" value="Song: #{item.title}" /> + </rich:treeNode> + </rich:tree> + </h:form> +...]]></programlisting> + + <para>In the example a song from one album can be dragged into other because for the second + <property>treeNode</property> with <emphasis> + <property>&quot;type&quot;</property> + </emphasis>=&quot;album&quot; was defined attribute <emphasis> + <property>&quot;acceptedTypes&quot;</property> + </emphasis>=&quot;song&quot;. Its value is equal to the value of the<emphasis> + <property>&quot;type&quot;</property> + </emphasis>attribute defined for the third treeNode (see picture below). + Also an album can be dragged into <property>treeNode</property> with <emphasis> + <property>&quot;type&quot;</property> + </emphasis>=&quot;artist&quot;.</para> + + <figure> + <title>DnD operations</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tree5.png"/> + </imageobject> + </mediaobject> + </figure> + </section> <section> <title>Events handling</title> - <para>Listeners classes that process events on server side are defined with the help:</para> + <para>Listeners classes that process events on the server side are defined with the help of:</para> <itemizedlist> <listitem>nodeSelectListener is called during request sending on a node selecting event (if request sending on this event is defined)</listitem> - <listitem>dropListener processes Drop event</listitem> - <listitem>changeExpandListener processes expand/collapse event of a tree node</listitem> + <listitem>dropListener processes a Drop event</listitem> + <listitem>dragListener processes a Drug event</listitem> + <listitem>changeExpandListener processes expand/collapse event of a + <property>treeNode</property></listitem> </itemizedlist> - <para>Moreover, to add e.g. some JavaScript effects, client events defined on it are used:</para> + + <para>Listener methods can be defined using the <link linkend="treeNodeKF">following + attributes</link> or using nested tags.</para> + <para>Client event attributes are:</para> <itemizedlist> <listitem>onexpand - expands a node event</listitem> <listitem>oncollapse - collapses a node event</listitem> @@ -242,41 +443,64 @@ <listitem>ondragenter - drags an element appearing on a tree event</listitem> </itemizedlist> - <para> Also standart HTML event attributes like "onclick", "onmousedown", "onmouseover" and etc. - could be used. Event handlers of a tree component capture events occured on any tree part. But - event handlers of treeNode capture events occured on treeNode only, except for children - events. </para> + <para>They can be used to add some JavaScript effects.</para> + + <para> Also standart HTML event attributes like<emphasis> + <property>&quot;onclick&quot;</property> + </emphasis>, <emphasis> + <property>&quot;onmousedown&quot;</property> + </emphasis>, <emphasis> + <property>&quot;onmouseover&quot;</property> + </emphasis> and etc. could be used. Event handlers of a <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component capture events occured on any <property>tree</property> part. But event + handlers of <property>treeNode</property> capture events occured on + <property>treeNode</property> only, except for children events. </para> </section> + <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis> - <property>style class redefinition method</property> - </emphasis>.</para> - <para>Default style classes are mapped on <emphasis><property>skin - parameters</property>.</emphasis></para> - <para>To redefine an appearance of all trees at once, there are two ways:</para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis> - <property>style classes</property> - </emphasis> used by the tree to your page style sheets</listitem> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component</para> + </listitem> </itemizedlist> </section> + <section> <title>Skin Parameters Redefinition:</title> - <para>There is only one skin parameter for the <property>tree</property> since <emphasis - role="bold"> + <para>There is only one skin parameter for <emphasis role="bold"> <property>&lt;rich:tree&gt;</property> - </emphasis> is a wrapper component for <property>tree</property> nodes. Look and feel is - described in details in the <link linkend="treeNode">&quot;treeNode&quot; - chapter</link>.</para> + </emphasis>. As it&apos;s a wrapper component for <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> components, look and feel customization is described in the <link + linkend="SPRofTN">corresponding section.</link></para> <table> - <title>Skin parameters for wrapper element</title> + <title>Skin parameters for a wrapper element</title> <tgroup cols="2"> <thead> <row> - <entry>Skin parameters for wrapper element</entry> - <entry>Properties corresponding to CSS parameter</entry> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> </row> </thead> <tbody> @@ -291,7 +515,7 @@ <section> <title>Definition of Custom Style Classes</title> <table> - <title>Classes names that define a tree</title> + <title>Classes names that define a component appearance</title> <tgroup cols="2"> <thead> <row> @@ -307,25 +531,25 @@ </tbody> </tgroup> </table> - + <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create class with the + <property>&lt;rich:tree&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create a class with the same names and define necessary properties in them.</para> - + <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> components define your own style class in the corresponding <emphasis - role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis>attribute.</para> + <property>&lt;rich:tree&gt;</property> + </emphasis> components define your own style class in the corresponding <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis>attribute.</para> </section> <section> <title>Relevant Resources Links</title> <para> <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf?c=... - you can see the example of <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> usage - and sources for the given example. </para> + you can see the example of <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> usage and sources for the given example. </para> <para>How to Expand/Collapse Tree Nodes from code, see <ulink url="http://labs.jboss.com/wiki/ExpandCollapseTreeNodes">her...;. </para> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/treeNode.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/treeNode.desc.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/treeNode.desc.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -12,12 +12,12 @@ <title>TreeNode component</title> <mediaobject> <imageobject> - <imagedata fileref="images/tree1.gif"/> + <imagedata fileref="images/treeNode.png"/> </imageobject> </mediaobject> </figure> </section> - <section> + <section id="treeNodeKF"> <title>Key Features</title> </section> </section> \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/treeNode.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/treeNode.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/treeNode.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -108,7 +108,7 @@ </section> <section> - <title>Look-and-Feel Customization</title> + <title>Details of Usage</title> <para>As it has been mentioned <link linkend="treeNode">above</link>, <property>treeNode</property> defines a template for nodes rendering in a tree. Thus, during XML document rendering (a web.xml application) as a tree, the following nodes output (passed via var=&quot;data&quot; on a tree) happens:</para> @@ -129,7 +129,7 @@ <title>Nodes output</title> <mediaobject> <imageobject> - <imagedata fileref="images/tree2.gif"/> + <imagedata fileref="images/treeNode2.png"/> </imageobject> </mediaobject> </figure> @@ -166,28 +166,41 @@ </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis> - <property>style class redefinition method</property> - </emphasis>.</para> - <para>Default style classes are mapped on <emphasis><property>skin - parameters</property>.</emphasis></para> - <para>To redefine appearance of all treeNodesAdaptor at once, there are two ways:</para> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> components at once:</para> + <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> <property>style classes</property> - </emphasis> used by the treeNode to your page style sheets</listitem> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> component</para> + </listitem> </itemizedlist> </section> - <section> - <title>Skin Parameters Redefinition:</title> + + <section id="SPRofTN"> + <title>Skin Parameters Redefinition</title> <table> - <title>Default skins for treeNode element</title> + <title>Skin parameters for a node element</title> <tgroup cols="2"> <thead> <row> - <entry>Default skins for treeNode element</entry> - <entry>Properties corresponding to CSS parameter</entry> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> </row> </thead> <tbody> @@ -207,37 +220,37 @@ </tgroup> </table> <table> - <title>Skin parameters for selected Node element</title> + <title>Skin parameters for a selected element</title> <tgroup cols="2"> <thead> <row> - <entry>Skin parameters for selected Node element</entry> - <entry>Properties corresponding to CSS parameter</entry> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> </row> </thead> <tbody> <row> <entry>headerBackgroundColor</entry> - <entry>background-color</entry> + <entry>border-color</entry> </row> <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> + <entry>panelTextColor</entry> + <entry>color</entry> </row> <row> - <entry>headTextColor</entry> + <entry>selectControlColor</entry> <entry>color</entry> </row> </tbody> </tgroup> </table> <table> - <title>Skin parameters for mouseovered Node element</title> + <title>Skin parameters for a mouseovered element</title> <tgroup cols="2"> <thead> <row> - <entry>Skin parameters for mouseovered Node element</entry> - <entry>Properties corresponding to CSS parameter</entry> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> </row> </thead> <tbody> @@ -248,14 +261,21 @@ </tbody> </tgroup> </table> - <para>Hence, to change look and feel of all <property>treeNodesAdaptor</property> components on an - application, change these parameters values.</para> </section> + <section> <title>Definition of Custom Style Classes</title> - <para>On the screenshot, there are classes that are applied to a node element in three states: default, marked, - mouseovered:</para> + <para>On the screenshot there are classes names that define styles for component elements.</para> + <figure> + <title>Classes names</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/treeNode3.png"/> + </imageobject> + </mediaobject> + </figure> + <table> <title>Classes names that define a node element</title> <tgroup cols="2"> @@ -270,27 +290,13 @@ <entry>rich-tree-node</entry> <entry> Defines styles for a tree node</entry> </row> + <row> - <entry>rich-tree-node-selected</entry> - <entry>Defines styles for a selected tree node </entry> - </row> - <row> - <entry>rich-tree-node-highlighted</entry> - <entry>Defines styles for a highlighted tree node </entry> - </row> - <row> <entry>rich-tree-node-handleicon</entry> <entry>Defines styles for a tree node handleicon</entry> </row> + <row> - <entry>rich-tree-node-handleicon-collapsed</entry> - <entry>Defines styles for a collapsed tree node handleicon </entry> - </row> - <row> - <entry>rich-tree-node-handleicon-expanded</entry> - <entry>Defines styles for a expanded tree node handleicon</entry> - </row> - <row> <entry>rich-tree-node-children</entry> <entry>Defines styles for all tree node subnodes</entry> </row> @@ -310,6 +316,39 @@ </tgroup> </table> + <table> + <title>Classes names that define states for a node element</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + <row> + <entry>rich-tree-node-selected</entry> + <entry>Defines styles for a selected tree node </entry> + </row> + <row> + <entry>rich-tree-node-highlighted</entry> + <entry>Defines styles for a highlighted tree node </entry> + </row> + + <row> + <entry>rich-tree-node-handleicon-collapsed</entry> + <entry>Defines styles for a collapsed tree node handleicon </entry> + </row> + <row> + <entry>rich-tree-node-handleicon-expanded</entry> + <entry>Defines styles for a expanded tree node handleicon</entry> + </row> + + </tbody> + </tgroup> + </table> + <para>In order to redefine the style for all <emphasis role="bold"> <property>&lt;rich:treeNode&gt;</property> </emphasis> components on a page using CSS, it&apos;s enough to create classes with the Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/virtualEarth.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/virtualEarth.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/virtualEarth.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -113,14 +113,15 @@ dashboardSize="Normal" zoom="11" mapStyle="Hybrid" var="map" /> ... ]]></programlisting> - + <para>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 <property>map</property> in the <emphasis> <property>&quot;var&quot;</property> - </emphasis> attribute and then call the object directly with API <emphasis><property>Microsoft Virtual Earth map</property>.</emphasis></para> + </emphasis> attribute and then call the object directly with API <emphasis><property>Microsoft + Virtual Earth map</property>.</emphasis></para> <para>For example, to approximate a map for <emphasis> - <property>&quot;var&quot;</property> - </emphasis>= <property>&quot;map&quot;</property> declared inside the component, call + <property>&quot;var&quot;</property> + </emphasis>= <property>&quot;map&quot;</property> declared inside the component, call map.ZoomIn() on an event.</para> <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para> <itemizedlist> @@ -133,13 +134,17 @@ </section> <section> <title>Look-and-Feel Customization</title> - <para><property>Virtual Earth map</property> component isn&apos;t tied to skin parameters, as there is no - additional elements on it, except the ones provided with <emphasis><property>Virtual Earth map</property>.</emphasis></para> + <para><emphasis role="bold"> + <property>&lt;rich:virtualEarth&gt;</property> + </emphasis> component isn&apos;t tied to skin parameters, as there is no additional + elements on it, except the ones provided with <emphasis><property>Virtual Earth + map</property>.</emphasis></para> </section> + <section> <title>Definition of Custom Style Classes</title> <table> - <title>Classes names that define a virtualEarth appearance</title> + <title>Classes names that define a component appearance</title> <tgroup cols="2"> <thead> <row> @@ -150,29 +155,29 @@ <tbody> <row> <entry>rich-virtualEarth</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a virtualEarth</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a + component</entry> </row> </tbody> </tgroup> </table> - + <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:virtualEarth&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create class with the - same name and define necessary properties in it.</para> - + <property>&lt;rich:virtualEarth&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create class with the same + name and define necessary properties in it.</para> + <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:virtualEarth&gt;</property> - </emphasis> components, define your own style class in the corresponding <emphasis - role="bold"> - <property>&lt;rich:virtualEarth&gt;</property> - </emphasis>attribute.</para> + <property>&lt;rich:virtualEarth&gt;</property> + </emphasis> components, define your own style class in the corresponding <emphasis role="bold"> + <property>&lt;rich:virtualEarth&gt;</property> + </emphasis>attribute.</para> </section> <section> <title>Relevant Resources Links</title> <para> - <ulink url="http://msdn2.microsoft.com/en-us/library/bb429619.aspx">... you can found additional - information about Microsoft <property>Virtual Earth map</property>.</para> + <ulink url="http://msdn2.microsoft.com/en-us/library/bb429619.aspx">... you can found + additional information about Microsoft <property>Virtual Earth map</property>.</para> </section> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/master.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/master.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/master.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -50,7 +50,6 @@ <!ENTITY coreComponents_table SYSTEM "../../../target/generated/a4j.xml"> -<!ENTITY rfcFAQ SYSTEM "modules/RFCfaq.xml"> ]> <book> @@ -73,6 +72,7 @@ <chapter role="NotInToc" id="RichFacesComponentsLibrary" xreflabel="RichFacesComponentsLibrary"> <?dbhtml filename="RichFacesComponentsLibrary.html"?> +<?forseChanks?> <title>The RichFaces Components</title> <para>The library encompasses ready-made components built based on the <emphasis><property>Rich Faces CDK</property></emphasis>.</para> <!-- @@ -117,5 +117,5 @@ &rfcidesupport; &rfclinks; - &rfcFAQ; + </book> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCGettingStarted.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCGettingStarted.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCGettingStarted.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -106,7 +106,8 @@ <title>JSP Page</title> <para>Here is the necessary page (echo.jsp):</para> <programlisting role="XML"><![CDATA[ - <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> + <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> + <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <html> @@ -234,7 +235,7 @@ <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> - </filter-map> + </filter-mapping> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCSettings.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCSettings.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCSettings.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -36,7 +36,7 @@ <?dbhtml filename="ApacheMyFaces.html"?> <title>Apache MyFaces</title> <para>RichFaces works with all <property>Apache MyFaces</property> versions (1.1.1 - 1.1.6) - including specific libraries like Tomahawk Sandbox and Trinidad (the previous ADF Faces). + 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 <property>MyFaces</property> and RichFaces.</para> <para>There are some problems with different filters defined in the web.xml file clashing. To @@ -90,101 +90,151 @@ <para>RichFaces now works out-of-the-box with <property>JBoss Seam </property>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. </para> - <para> Your web.xml still must be like this: </para> - <programlisting role="XML"><![CDATA[web-app version="2.4" - xmlns="http://java.sun.com/xml/ns/j2ee" + <para> Your web.xml for <property>Seam 1.2</property> must be like this: </para> + <programlisting role="XML"><![CDATA[<?xml version="1.0" ?> +<web-app xmlns="http://java.sun.com/xml/ns/j2ee" + xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" + xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" + version="2.4"> + + <!-- richfaces --> + + <filter> + <display-name>RichFaces Filter</display-name> + <filter-name>richfaces</filter-name> + <filter-class>org.ajax4jsf.Filter</filter-class> + </filter> + + <filter-mapping> + <filter-name>richfaces</filter-name> + <url-pattern>*.seam</url-pattern> + </filter-mapping> + + <context-param> + <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name> + <param-value>org.jboss.seam.ui.facelet.SeamFaceletViewHandler</param-value> + </context-param> + + <!-- Seam --> + + <listener> + <listener-class>org.jboss.seam.servlet.SeamListener</listener-class> + </listener> + + <servlet> + <servlet-name>Seam Resource Servlet</servlet-name> + <servlet-class>org.jboss.seam.servlet.ResourceServlet</servlet-class> + </servlet> + + <servlet-mapping> + <servlet-name>Seam Resource Servlet</servlet-name> + <url-pattern>/seam/resource/*</url-pattern> + </servlet-mapping> + + <filter> + <filter-name>Seam Filter</filter-name> + <filter-class>org.jboss.seam.web.SeamFilter</filter-class> + </filter> + + <filter-mapping> + <filter-name>Seam Filter</filter-name> + <url-pattern>/*</url-pattern> + </filter-mapping> + + <!-- MyFaces --> + + <listener> + <listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class> + </listener> + + <!-- JSF --> + + <context-param> + <param-name>javax.faces.STATE_SAVING_METHOD</param-name> + <param-value>client</param-value> + </context-param> + + <context-param> + <param-name>javax.faces.DEFAULT_SUFFIX</param-name> + <param-value>.xhtml</param-value> + </context-param> + + <servlet> + <servlet-name>Faces Servlet</servlet-name> + <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> + <load-on-startup>1</load-on-startup> + </servlet> + + <servlet-mapping> + <servlet-name>Faces Servlet</servlet-name> + <url-pattern>*.seam</url-pattern> + </servlet-mapping> + +</web-app>]]></programlisting> + <para> <property>Seam 2</property> supports RichFaces Filter. Thus your web.xml for Seam 2 must be like this:</para> + + <programlisting role="XML"><![CDATA[<?xml version="1.0" encoding="UTF-8"?> +<web-app version="2.5" + xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" - xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> + xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> - <!-- Seam --> - <listener> - <listener-class>org.jboss.seam.servlet.SeamListener</listener-class> - </listener> + <context-param> + <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name> + <param-value>com.sun.facelets.FaceletViewHandler</param-value> + </context-param> - <!-- richfaces --> - <filter> - <display-name>RichFaces Filter</display-name> - <filter-name>richfaces</filter-name> - <filter-class>org.ajax4jsf.Filter</filter-class> - </filter> - <filter-mapping> - <filter-name>richfaces</filter-name> - <url-pattern>*.seam</url-pattern> - </filter-mapping> + <!-- Seam --> - <!-- Propagate conversations across redirects --> - <filter> - <filter-name>Seam Redirect Filter</filter-name> - <filter-class>org.jboss.seam.servlet.SeamRedirectFilter</filter-class> - </filter> - <filter-mapping> - <filter-name>Seam Redirect Filter</filter-name> - <url-pattern>*.seam</url-pattern> - </filter-mapping> - - <filter> - <filter-name>Seam Exception Filter</filter-name> - <filter-class>org.jboss.seam.servlet.SeamExceptionFilter</filter-class> - </filter> + <listener> + <listener-class>org.jboss.seam.servlet.SeamListener</listener-class> + </listener> - <filter-mapping> - <filter-name>Seam Exception Filter</filter-name> - <url-pattern>*.jsf</url-pattern> - </filter-mapping> - - <!-- JSF --> - <context-param> - <param-name>javax.faces.STATE_SAVING_METHOD</param-name> - <param-value>client</param-value> - </context-param> - - <context-param> - <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name> - <param-value>com.sun.facelets.FaceletViewHandler</param-value> - </context-param> - - <context-param> - <param-name>javax.faces.DEFAULT_SUFFIX</param-name> - <param-value>.xhtml</param-value> - </context-param> - <context-param> - <param-name>facelets.REFRESH_PERIOD</param-name> - <param-value>2</param-value> - </context-param> - <context-param> - <param-name>facelets.DEVELOPMENT</param-name> - <param-value>true</param-value> - </context-param> - <context-param> - <param-name>com.sun.faces.validateXml</param-name> - <param-value>true</param-value> - </context-param> - <context-param> - <param-name>com.sun.faces.verifyObjects</param-name> - <param-value>true</param-value> - </context-param> - <context-param> - <param-name>org.richfaces.SKIN</param-name> - <param-value>DEFAULT</param-value> - </context-param> - - <servlet> - <servlet-name>Faces Servlet</servlet-name> - <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> - <load-on-startup>1</load-on-startup> - </servlet> + <servlet> + <servlet-name>Seam Resource Servlet</servlet-name> + <servlet-class>org.jboss.seam.servlet.SeamResourceServlet</servlet-class> + </servlet> - <!-- Faces Servlet Mapping --> - <servlet-mapping> - <servlet-name>Faces Servlet</servlet-name> - <url-pattern>*.seam</url-pattern> - </servlet-mapping> + <servlet-mapping> + <servlet-name>Seam Resource Servlet</servlet-name> + <url-pattern>/seam/resource/*</url-pattern> + </servlet-mapping> - <!-- MyFaces --> - <listener> - <listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class> - </listener> -</web-app>]]> </programlisting> + <filter> + <filter-name>Seam Filter</filter-name> + <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class> + </filter> + + <filter-mapping> + <filter-name>Seam Filter</filter-name> + <url-pattern>/*</url-pattern> + </filter-mapping> + + <!-- JSF --> + + <context-param> + <param-name>javax.faces.DEFAULT_SUFFIX</param-name> + <param-value>.xhtml</param-value> + </context-param> + + <context-param> + <param-name>facelets.DEVELOPMENT</param-name> + <param-value>true</param-value> + </context-param> + + <servlet> + <servlet-name>Faces Servlet</servlet-name> + <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> + <load-on-startup>1</load-on-startup> + </servlet> + + <servlet-mapping> + <servlet-name>Faces Servlet</servlet-name> + <url-pattern>*.seam</url-pattern> + </servlet-mapping> + +</web-app>]]></programlisting> + <para>Only one issue still persists while using <property>Seam</property> with MyFaces. Look at myFaces part of this section.</para> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -128,6 +128,497 @@ incorrect HTML code. </listitem> </itemizedlist> </section> + + <section id="AjaxRequestOptimization"> + <?dbhtml filename="AjaxRequestOptimization.html"?> + <title>Ajax Request Optimization</title> + <section id="Re-Rendering"> + <?dbhtml filename="Re-Rendering.html"?> + <title>Re-Rendering</title> + <para>Ajax attributes are common for Ajax components such as <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;a4j:jsFunction&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> 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.</para> + + <para><emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> 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 <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute is an id of the JSF component or an id list. </para> + <para>A simple example is placed below:</para> + + <programlisting role="XML"><![CDATA[... + <a4j:commandButton value="update" reRender="infoBlock"/> + ... + <h:panelGrid id="infoBlock"> + ... + </h:panelGrid> +... +]]></programlisting> + + <para>The value of <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute of the <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis> 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 <emphasis role="bold"> + <property>&lt;h:panelGrid&gt;</property> + </emphasis> tag because its ID value matches to the value of <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute. As you see, it&apos;s not difficult to update multiple elements + on the page, only list their IDs as the value of <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis>.</para> + + <para><emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> uses <ulink + url="http://java.sun.com/javaee/javaserverfaces/1.2_MR1/docs/api/jav... + >UIComponent.findComponent() algorithm</ulink> (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):</para> + + <programlisting role="XML"><![CDATA[... + <h:form id="form1"> + ... + <a4j: commandButton value="Usual Way" reRender="infoBlock, infoBlock2" /> + <a4j:commandButton value="Shortcut" reRender=":infoBlockl,:sv:infoBlock2" /> + ... + </h:form> + <h:panelGrid id="infoBlock"> + ... + </h:panelGrid> + ... + <f:subview id="sv"> + <h:panelGrid id="infoBlock2"> + ... + </h:panelGrid> + ... + </f:subview> +... +]]></programlisting> + + <para>It&apos;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.</para> + + <para>Most common problem with using reRender is pointing it to the component that has a <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> 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 <emphasis> + <property>&quot;rendered&quot;</property> + </emphasis> 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 <emphasis> + <property>&quot;rendered&quot;</property> + </emphasis> attribute. As an alternative, you can wrap the component with <emphasis + role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis> layout=<property>&quot;none&quot;</property>.</para> + + <para><emphasis> + <property>&quot;ajaxRendered&quot; </property> + </emphasis> attribute of the <emphasis role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis> set to <property>&quot;true&quot;</property> 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. </para> + <programlisting role="XML"><![CDATA[... + <a4j:outputPanel ajaxRendered="true"> + <h:messages /> + </a4j:outputPanel> +... +]]></programlisting> + + <para><emphasis> + <property>&quot;limitToList&quot;</property> + </emphasis> attribute allows to dismiss the behavior of the <emphasis role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis> + <emphasis> + <property>&quot;ajaxRendered&quot; </property> + </emphasis> attribute. &quot;limitToList&quot; = + <property>&quot;false&quot;</property> means to update only the area(s) that + mentioned in the <emphasis/>&quot;reRender&quot;<property/> attribute explicitly. + All output panels with + &quot;ajaxRendered&quot;=<property>&quot;true&quot;</property>is ignored. An + example is placed below:</para> + + <programlisting role="XML"><![CDATA[... + <h:form> + <h:inputText value="#{person.name}"> + <a4j:support event="onkeyup" reRender="test" limitToList="true"/> + </h:inputText> + <h:outputText value="#{person.name}" id="test"/> + </form> +... +]]></programlisting> + + </section> + + <section id="QueueandTrafficFloodProtection"> + <?dbhtml filename="QueueandTrafficFloodProtection.html"?> + <title>Queue and Traffic Flood Protection</title> + <para><emphasis> + <property>&quot;eventsQueue&quot;</property> + </emphasis> 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.</para> + <para>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 <emphasis> + <property>&quot;eventsQueue&quot;</property> + </emphasis> attribute is defined. In addition, Richfaces starts to remove from the queue + &quot;similar&quot; requests. &quot;Similar'&quot;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 a user types very fast and has typed the several + characters already before the previous Ajax Response is back.</para> + + <programlisting role="XML"><![CDATA[... + <h:inputText value="#{userBean.name}"> + <a4j:support event="onkeyup" eventsQueue="foo" reRender="bar" /> + </h:inputText> +... +]]></programlisting> + + <para><emphasis> + <property>&quot;requestDelay&quot;</property> + </emphasis> 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 &quot;similar&quot; request is in a queue already .</para> + <para><emphasis> + <property>&quot;ignoreDupResponses&quot;</property> + </emphasis> attribute orders to ignore the Ajax Response produced by the request if the + newest &quot;similar&quot; request is in a queue already. + &quot;ignoreDupResponses&quot;=<property>&quot;true&quot;</property> 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.</para> + <para>Defining the <emphasis> + <property>&quot;eventsQueue&quot;</property> + </emphasis> along with <emphasis> + <property>&quot;requestDelay&quot;</property> + </emphasis> 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, <emphasis + role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis>. In case the requests from such components modify the same data, the + synchronization might be very helpful.</para> + + <para>More information can be found on the <ulink + url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&... + >RichFaces Users Forum</ulink>.</para> + + <para><emphasis> + <property>&quot;timeout&quot;</property> + </emphasis> 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.</para> + </section> + + <section id="DataProcessingOptions"> + <?dbhtml filename="DataProcessingOptions.html"?> + <title>Data Processing Options</title> + <para>RichFaces uses form based approach for Ajax request sending. This means each time, when + a user click an Ajax button or <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> 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.</para> + <para>When <emphasis> + <property>&quot;ajaxSingle&quot;</property> + </emphasis> attribute value is <property>&quot;true&quot;</property>, it orders to + include only a value of the current component (along with <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;a4j:action&gt;</property> + </emphasis> param values if any) to the request map. In case of <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis>, it is a value of the parent component. An example is placed below:</para> + + <programlisting role="XML"><![CDATA[... + <h:form> + <h:inputText value="#{person.name}"> + <a4j:support event="onkeyup" reRender="test" ajaxSingle="true"/> + </h:inputText> + <h:inputText value="#{person.middleName}"/> + </form> +... +]]></programlisting> + <para>In this example the request contains only the input component causes the request + generation, not all the components contained on a form, because of + &quot;ajaxSingle&quot;=<property>&quot;true&quot;</property> usage.</para> + <para>Note, that &quot;ajaxSingle&quot;=<property>&quot;true&quot;</property> + reduces the upcoming traffic, but does not prevent decoding other input components on the + server side. Some JSF components, such as <emphasis role="bold"> + <property>&lt;h:selectOneMenu&gt;</property> + </emphasis> 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 <emphasis role="bold"> + <property>&lt;a4j:region&gt;</property> + </emphasis> to limit a part of the component tree that will be processed on the server side + when it is required.</para> + <para><emphasis> + <property>&quot;immediate&quot;</property> + </emphasis> attribute has the same purpose as any other non-JSF component. The default <emphasis> + <property>&quot;ActionListener&quot;</property> + </emphasis> 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=<property>&quot;true&quot;</property> 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 <emphasis role="bold"> + <property>&lt;h:dataTable&gt;</property> + </emphasis> like components where using <emphasis role="bold"> + <property>&lt;a4j:region&gt;</property> + </emphasis> is impossible due to the <emphasis role="bold"> + <property>&lt;h:dataTable&gt;</property> + </emphasis> component architecture.</para> + + <para><emphasis> + <property>&quot;bypassUpdates&quot;</property> + </emphasis> attribute allows to bypass the Update Model phase. It might be useful if you + need to check user 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.</para> + </section> + + <section id="ActionandNavigation"> + <?dbhtml filename="ActionandNavigation.html"?> + <title>Action and Navigation</title> + <para>Ajax component is similar to any other non-Ajax JSF component like <emphasis role="bold"> + <property>&lt;h:commandButton&gt;</property> + </emphasis>. It allows to submit the form. You can use <emphasis> + <property>&quot;action&quot;</property> + </emphasis> and <emphasis> + <property>&quot;actionListener&quot;</property> + </emphasis> attribute to invoke the action method and define the action event.</para> + <para><emphasis> + <property>&quot;action&quot;</property> + </emphasis> 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:</para> + <itemizedlist> + <listitem>RichFaces allows to organize a page flow inside the <emphasis role="bold"> + <property>&lt;a4j:include&gt;</property> + </emphasis> component. This is a typical scenario for Wizard like behavior. The new + content is rendered inside the <emphasis role="bold"> + <property>&lt;a4j:include&gt;</property> + </emphasis> 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 <emphasis + role="bold"> + <property>&lt;f:view&gt;</property> + </emphasis> (it does not matter if you use facelets). You need to have an Ajax component + inside the <emphasis role="bold"> + <property>&lt;a4j:include&gt;</property> + </emphasis> to navigate between the wizard pages. Otherwize, the whole page update will be + performed.</listitem> + <listitem>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 <emphasis role="bold"> + <property>&lt;h:commandButton&gt;</property> + </emphasis> with <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis> and point to the action method that navigates to the next page. If Validation + process fails, the partial page update will occur and a user will see an error message. + Otherwize, the application proceeds to the next page. Make sure, you define + &lt;redirect/&gt; option for the navigation rule to avoid memory leaks.</listitem> + </itemizedlist> + <para> </para> + </section> + + <section id="JavascriptInteractions"> + <?dbhtml filename="JavascriptInteractions.html"?> + <title>JavaScript Interactions</title> + <para>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.</para> + <para><emphasis> + <property>&quot;onsubmit&quot;</property> + </emphasis> attribute allows to invoke JavaScript code before an Ajax request is sent. If <emphasis> + <property>&quot;onsubmit&quot;</property> + </emphasis> returns <property>&quot;false&quot;</property>, the Ajax request is + canceled. The code of <emphasis> + <property>&quot;onsubmit&quot;</property> + </emphasis> is inserted before the RichFaces Ajax call. Hence, the <emphasis> + <property>&quot;onsubmit&quot;</property> + </emphasis> should not has a &quot;return&quot; statement if you want the Ajax + request to be sent. If you are going to invoke a JavaScript function that returns + <property>&quot;true&quot;</property> or + <property>&quot;false&quot;</property>, use the conditional statement to return + something only when you need to cancel the request. For example: </para> + <programlisting role="XML"><![CDATA[... + onsubmit="if (mynosendfunct()==false){return false}" +... +]]></programlisting> + + <para><emphasis> + <property>&quot;onclick&quot;</property> + </emphasis> attribute is similar to the <emphasis> + <property>&quot;onsubmit&quot;</property> + </emphasis>, but for clickable components such as <emphasis role="bold"> + <property>&lt;a4j:commandLink&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis>. If it returns <property>&quot;false&quot;</property>, the Ajax request + is canceled also.</para> + <para><emphasis> + <property>&quot;oncomplete&quot;</property> + </emphasis> 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 &quot;this'&quot; inside the code, because it + will not point the component where Ajax request was initiated.</para> + + <para><emphasis> + <property>&quot;onbeforedomupdate&quot;</property> + </emphasis> attrubute defines JavaScript code for call after Ajax response receiving and + before updating DOM on a client side.</para> + + <para><emphasis> + <property>&quot;data&quot;</property> + </emphasis> 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 <emphasis> + <property>&quot;data&quot;</property> + </emphasis> variable. For example:</para> + <programlisting role="XML"><![CDATA[... + <a4j:commandButton value="Update" data="#{userBean.name}" oncomplete="showTheName(data.name)" /> +... +]]></programlisting> + + <para>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 <emphasis> + <property>&quot;data&quot;</property> + </emphasis>.</para> + </section> + + <section id="IterationcomponentsAjaxattributes"> + <?dbhtml filename="IterationcomponentsAjaxattributes.html"?> + <title>Iteration components Ajax attributes</title> + <para><emphasis> + <property>&quot;ajaxKeys&quot;</property> + </emphasis> attribute defines strings that are updated after an Ajax request. It provides + possibility to update several child components separately without updating the whole page.</para> + + <programlisting role="XML"><![CDATA[... + <a4j:poll intervall="1000" action="#{repeater.action}" reRender="text"> + <table> + <tbody> + <a4j:repeat value="#{bean.props}" var="detail" ajaxKeys="#{repeater.ajaxedRowsSet}"> + <tr> + <td> + <h:outputText value="detail.someProperty" id="text"/> + </td> + </tr> + </a4j:repeat> + </tbody> + </table> + </a4j:poll> +... +]]></programlisting> + + </section> + + <section id="Otherusefulattributes"> + <?dbhtml filename="Otherusefulattributes.html"?> + <title>Other useful attributes</title> + <para><emphasis> + <property>&quot;status&quot;</property> + </emphasis> attribute for Ajax components (such as <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis>, etc.) points to an ID of <emphasis role="bold"> + <property>&lt;a4j:status&gt;</property> + </emphasis> component. Use this attribute if you want to share <emphasis role="bold"> + <property>&lt;a4j:status&gt;</property> + </emphasis> component between different Ajax components from different regions. The + following example shows it. </para> + + <programlisting role="XML"><![CDATA[... + <a4j:region id="extr"> + <h:form> + <h:outputText value="Status:" /> + <a4j:status id="commonstatus" startText="In Progress...." stopText=""/> + <h:panelGrid columns="2"> + <h:outputText value="Name"/> + <h:inputText id="name" value="#{userBean.name}"> + <a4j:support event="onkeyup" reRender="out" /> + </h:inputText> + <h:outputText value="Job"/> + <a4j:region id="intr"> + <h:inputText id="job" value="#{userBean.job}"> + <a4j:support event="onkeyup" reRender="out" status="commonstatus"/> + </h:inputText> + </a4j:region> + </h:panelGrid> + + <a4j:region> + <h:outputText id="out" value="Name: #{userBean.name}, Job: #{userBean.job}" /> + <br /> + <a4j:commandButton ajaxSingle="true" value="Clean Up Form" reRender="name, job, out" status="commonstatus"> + <a4j:actionparam name="n" value="" assignTo="#{userBean.name}" /> + <a4j:actionparam name="j" value="" assignTo="#{userBean.job}" /> + </a4j:commandButton> + </a4j:region> + </h:form> + </a4j:region> +... +]]></programlisting> + + <para>In the example <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis> are defined in different regions. Values of <emphasis> + <property>&quot;status&quot;</property> + </emphasis> attribute for these components points to an ID of <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis>.Thus, the <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> component is shared between two components from different regions.</para> + + <para>More information could be found <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf?... + >here</ulink>.</para> + + <para>Other useful attribute is <emphasis> + <property>&quot;focus&quot;</property> + </emphasis>. It points to an ID of a component where focus will be set after an Ajax + request.</para> + + </section> + + </section> + <section id="HowTo..."> <?dbhtml filename="HowTo.html"?> <title>How To...</title> @@ -164,7 +655,7 @@ </emphasis> tag allows you to add Ajax functionality to standard JSF components and send Ajax request onto a chosen JavaScript event: &quot;onkeyup&quot;, &quot;onmouseover&quot;, etc. </para> - <para>Most important attributes of components that provide Ajax request calling features are:</para> + <!--para>Most important attributes of components that provide Ajax request calling features are:</para> <itemizedlist> <listitem> <emphasis> @@ -211,8 +702,11 @@ <emphasis> <property>&quot;ignoreDupResponses&quot;</property> </emphasis> is used to abort unfinished request on new event. </listitem> - </itemizedlist> + </itemizedlist--> </section> + + + <section id="DecideWhatToSend"> <?dbhtml filename="DecideWhatToSend.html"?> <title>Decide What to Send</title> @@ -234,6 +728,8 @@ &quot;false&quot; (&quot;false&quot; is default value). Otherwise, your Ajax updates are limited to elements of the active region. </para> </section> + + <section id="DecideWhatToChange"> <?dbhtml filename="DecideWhatToChange.html"?> <title>Decide What to Change</title> @@ -292,7 +788,8 @@ <note> <title>Note:</title>Fast Filter is deprecated and available only for backward compatibility with previous RichFaces versions. Fast Filter usage isn&apos;t recomended, because there - is another way to use its functionality by means of <link linkend="Neko">Neko filter type</link>.</note> + is another way to use its functionality by means of <link linkend="Neko">Neko filter + type</link>.</note> <para>In RichFaces 3.1 filter configuration becomes more flexible. It&apos;s possible to configure different filters for different sets of pages for the same application.</para> @@ -305,9 +802,9 @@ </listitem> </itemizedlist> - <para>&quot;TIDY&quot; 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.</para> + <para>&quot;TIDY&quot; 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.</para> <itemizedlist> <listitem> @@ -315,11 +812,11 @@ </listitem> </itemizedlist> - <para>&quot;NEKO&quot; filter type corresponds to the former &quot;Fast Filter&quot; and it&apos;s - based on the Neko parser. In case of using this filter code isn&apos;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&apos;s of errors and corrupt a layout as a result. This - filter considerably accelerates all Ajax requests processing.</para> + <para>&quot;NEKO&quot; filter type corresponds to the former &quot;Fast + Filter&quot; and it&apos;s based on the Neko parser. In case of using this filter code + isn&apos;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&apos;s of errors and corrupt a + layout as a result. This filter considerably accelerates all Ajax requests processing.</para> <itemizedlist> <listitem> @@ -368,9 +865,9 @@ <para>The example shows that ORDER parameter defines the order in which particular filter types are used for pages code correction. </para> - <para> First of all &quot;NONE&quot; 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: </para> + <para> First of all &quot;NONE&quot; 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: </para> <programlisting role="XML"><![CDATA[<param-value>/pages/performance\.xhtml,/pages/default.*\.xhtml</param-value>, ]]></programlisting> @@ -383,9 +880,9 @@ <programlisting role="XML"><![CDATA[<param-value>/pages/repeat\.xhtml</param-value>, ]]></programlisting> - <para>then &quot;NEKO&quot; filter type is used for correction. If it&apos;s not related to the second set, - &quot;TIDY&quot; type is set for the filter (&quot;TIDY&quot; filter type is used for code - correction). </para> + <para>then &quot;NEKO&quot; filter type is used for correction. If it&apos;s not + related to the second set, &quot;TIDY&quot; type is set for the filter + (&quot;TIDY&quot; filter type is used for code correction). </para> </section> @@ -900,34 +1397,38 @@ <?dbhtml filename="CreatingAndUsingYourOwnSkinFile.html"?> <title>Creating and Using Your Own Skin File</title> - <para>In order to create your own skin whose constants are used by style classes at the first - level, do the following:</para> + <para>In order to create your own skin file, do the following:</para> <itemizedlist> <listitem> - <para>Create a file whose name follows the format of a skin file and place it into the - ClassPath for the application. (Any skin file follows the naming format, <emphasis> - <property>&lt;name.skin.properties&gt;</property> - </emphasis>.)</para> + <para>Create a file and define in it skin constants which are used by style classes (see + section <link linkend="SkinParametersTablesInRichFaces">&quot;Skin Parameters Tables + in RichFaces&quot;</link>). The name of skin file should correspond to the + following format: <property>&lt;name&gt;.skin.properties</property>. 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.</para> </listitem> <listitem> - <para>Add a skin definition context-param element to the application&apos;s web.xml - file:</para> - - + <para>Add a skin definition &lt;contex-param&gt; to the web.xml of your + application. An example is placed below:</para> <para> <emphasis role="bold">Example:</emphasis> </para> - <programlisting role="XML">&lt;context-param&gt; - &lt;param-name&gt;org.richfaces.SKIN&lt;/param-name&gt; - &lt;param-value&gt;name&lt;/param-value&gt; -&lt;/context-param&gt;</programlisting> + <programlisting role="XML"><![CDATA[... + <context-param> + <param-name>org.richfaces.SKIN</param-name> + <param-value>name</param-value> + </context-param> +... +]]></programlisting> </listitem> <listitem> - <para>In the skins file, specify your own values for skin constants as described in the - table.</para> + <para>Put your <property>&lt;name&gt;.skin.properties</property> file in one of + the following classpath elements: META-INF/skins/ or classpath folder (e.g. + WEB-INF/classes).</para> </listitem> </itemizedlist> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCfaq.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCfaq.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCfaq.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -478,21 +478,6 @@ </section> - <section id="RerenderingPartPage"> - <?dbhtml filename="RerenderingPartPage.html"?> - <title>How to reRender only particular row(s) of dataTable?</title> - <para> If you use dataTable then you may use ajaxKeys attribute to bind the rowKeys - to be reRendered there. After you need to point reRender on the whole table - and only specified rows will be reRendered. - <!-- - Also the example of usage of <emphasis role="bold" - >&lt;a4j:repeat&gt;</emphasis> component are available <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/repeat.jsf?...;. - --> - </para> - </section> - - <section> <?dbhtml filename="Howtomakehtmlscrollbars.html"?> <title>How to make html scrollbars in modalPanel?</title> @@ -547,8 +532,30 @@ <section> <?dbhtml filename="HowtoloadtheScriptaculouslibrary.html"?> <title>How to load the Scriptaculous library?</title> - <para>To load the Scriptaculous library shipped with RichFaces use <emphasis + <para>To load the whole Scriptaculous library shipped with RichFaces use <emphasis role="bold">&lt;a4j:loadScript&gt;</emphasis> tag.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<a4j:loadScript src="resource://scriptaculous.js" /> +... +]]></programlisting> + <para> Thus, this command allows loading an integrated version of the library that + includes all existing scriptaculous files except unittest.js. </para> + <para> If you don&apos;t want to load the whole library, but only the particular + file, for example, effect.js, use the following line: </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<a4j:loadScript src="resource://scriptaculous/effect.js" /> +... +]]></programlisting> + <para> Remember, it does not make sense to load the particular file if you already + load the whole version. </para> + <para>For more information see <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... @@ -565,6 +572,93 @@ </section> + <section> + <?dbhtml filename="Howtosaveeffectstatus.html"?> + <title>How to send an additional parameter to server working with + &lt;rich:suggestionbox&gt;?</title> + <para>An example is placed below:</para> + <programlisting role="XML"><![CDATA[... + <rich:suggestionbox width="200" height="200" for="test" suggestionAction="#{bean.autocomplete}" var="cap"> + <h:column> + <f:facet name="header"> + <h:outputText value="Sometext"></h:outputText> + </f:facet> + <h:outputText value="#{cap.text}"></h:outputText> + </h:column> + <a4j:support event="onselect" action="#{bean.action}"> + <f:setPropertyActionListener value="#{cap.label}" target="#{bean.property1}" /> + </a4j:support> + </rich:suggestionbox> +... +]]></programlisting> + <para>In the example <property>&quot;onselect&quot;</property> event is used + for sending selected value to the server. It&apos;s also possible to + pass additional fields of selected object (which don&apos;t belong to <emphasis> + <property>&quot;fetchvalue&quot;</property> + </emphasis> attribute.)</para> + </section> + + <section> + <?dbhtml filename="Howtosetrich:dataTableborder.html"?> + <title>How to set &lt;rich:dataTable&gt; border to 0px?</title> + <para>Add the following code to your css file:</para> + <programlisting role="CSS"><![CDATA[... + .rich-table, .rich-table-header,.rich-table-headercell, .rich-table-cell, + .rich-subtable-cell, .rich-table-footercell, .rich-subtable-footercell { + border-width:0px; + } +... +]]></programlisting> + </section> + + <section> + <?dbhtml filename="Howtosetrich:dataTableborder.html"?> + <title>How to create &lt;rich:suggestionBox&gt; dynamically?</title> + <para>This is a working example:</para> + <programlisting role="JAVA"><![CDATA[... + org.apache.myfaces.component.html.ext.HtmlInputText searchBox = new org.apache.myfaces.component.html.ext.HtmlInputText(); + searchBox.setId( "inputQuery" ); + bar.getChildren().add( searchBox ); + + org.richfaces.component.html.HtmlSuggestionBox suggestions = new org.richfaces.component.html.HtmlSuggestionBox(); + suggestions.setId( "sugg" ); + suggestions.setFor( "inputQuery" ); + suggestions.setTokens( ",[" ); + suggestions.setRules( "none" ); + + javax.faces.el.MethodBinding mb = app.createMethodBinding( "#{suggestionBox.autocomplete}", new Class[] { Object.class } ); + suggestions.setSuggestionAction( mb ); + suggestions.setVar( "result" ); + + suggestions.setRows( 0 ); + suggestions.setFirst( 0 ); + suggestions.setMinChars( "#{suggestionBox.minchars}" ); + suggestions.setShadowOpacity( "4" ); + suggestions.setBorder( "1" ); + suggestions.setWidth( "200" ); + suggestions.setHeight( "150" ); + suggestions.setShadowDepth( "4" ); + suggestions.setCellpadding( "2" ); + + org.apache.myfaces.custom.column.HtmlSimpleColumn column = new org.apache.myfaces.custom.column.HtmlSimpleColumn(); + column.setId( "col1" ); + org.apache.myfaces.component.html.ext.HtmlOutputText text = new org.apache.myfaces.component.html.ext.HtmlOutputText(); + text.setId( "text1" ); + + javax.faces.el.ValueBinding vb = app.createValueBinding( "#{result.text}" ); + text.setValueBinding( "value", vb ); + column.getChildren().add( text ); + suggestions.getChildren().add( column ); + bar.getChildren().add( suggestions ); +... +]]></programlisting> + <para> See also <ulink + url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... + >RichFaces User Forum</ulink>.</para> + </section> + + + <section id="DecidingWhatToChangeOnTheServerSide"> <?dbhtml filename="DecidingWhatToChangeOnTheServerSide.html"?> <title>What should I change on the server side?</title> @@ -691,68 +785,7 @@ <para>To avoid exception, don&apos;t forget that the component stores beans in serialized view, but your bean should implement java.io.Serializable.</para> </section> - <!--section id="FilterUsageDamagesAnApplicationLayout"> - <?dbhtml filename="FilterUsageDamagesAnApplicationLayout.html"?> - <title>Why does filter usage damage an application layout?</title> - <para>RichFaces uses <property>filters</property> for correction of xhtml code - received on an Ajax response, because when a response is recieved from the - server, RichFaces makes direct changes in DOM tree and browser - doesn&apos;t make any corrections in generated xhtml. There are two ways - for setting <property>filters</property> that could be used in an - RichFaces-based application.</para> - <para> The first one:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<context-param filter> - <display-name>RichFaces Filter</display-name> - <filter-name>richfaces</filter-name> - <filter-class>org.ajax4jsf.Filter</filter-class> -</filter>]]></programlisting> - <para>This <property>filter</property> is based on Tidy Filter usage and recommended - for applications with complicated or non-standard markup, as all the - necessary xhtml code corrections are made by the filter when a response - comes from the server.</para> - <para> Anyway, some obvious errors could damage a layout, if it happens, make sure - that the markup corresponds to the xhtml-strict specification. </para> - <para>The second one:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<filter> - <display-name>RichFaces FastFilter</display-name> - <filter-name>richfaces</filter-name> - <filter-class>org.ajax4jsf.FastFilter</filter-class> -</filter>]]></programlisting> - <para>This <property>filter</property> is based on the Neko parser. In this case an - output xhtml code isn&apos;t strictly verified and it also could cause - lot&apos;s of errors and corrupt a layout as a result. Though if you - sure that your application markup is really strict for this filter, the - filter considerably accelerates all Ajax requests processing. </para> - <para><emphasis role="bold">Extra information</emphasis>. </para> - <para>forceParcer parameters setting for <property>filters</property>:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<filter> -... -<init-param> -<param-name>forceparser</param-name> -<param-value>false</param-value> -</init-param> -... -</filter>]]></programlisting> - <para>The &quot;false&quot; setting for initialization parameter switches - off application of filters for non-Ajax requests, if - &quot;true&quot; is chosen, the filter checks all requests. <important> - <title>Changes for Ajax4jsf 1.1.0</title> - <property>forceparser parameter</property> default value is false - from this version. </important> - </para> - </section--> <section id="AFormIsNotSubmittedOrASetterIsNotCalledAfterAJAXrequest"> <?dbhtml filename="AFormIsNotSubmittedOrASetterIsNotCalledAfterAJAXrequest.html"?> <title>Why form isn&apos;t submitted or setter isn&apos;t called after AJAX @@ -790,7 +823,6 @@ </para> </section> - <section id="IgnoreDupResponsesAndRequestDelay"> <?dbhtml filename="IgnoreDupResponsesAndRequestDelay.html"?> @@ -819,8 +851,6 @@ </para> </section> - - <section id="EventQueueUsage"> <?dbhtml filename="EventQueueUsage.html"?> <title>How to use &quot;EventQueue&quot; attribute?</title> @@ -984,4 +1014,16 @@ <para>The problem is solved with browser cash update (e.g. CTRL+F5).</para> </section> + + <section id="RerenderingPartPage"> + <?dbhtml filename="RerenderingPartPage.html"?> + <title>How to reRender only particular row(s) of table?</title> + <para> If you use dataTable then you may use <emphasis> + <property>&quot;ajaxKeys&quot;</property> + </emphasis> attribute to bind the rowKeys to be reRendered there. + After you need to point reRender on the specific rows. See also + <link linkend="IterationcomponentsAjaxattributes" + >&quot;Iteration components Ajax attributes + section&quot;</link>. </para> + </section> </chapter> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCtechreqs.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCtechreqs.xml 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/modules/RFCtechreqs.xml 2007-12-05 00:14:12 UTC (rev 4477) @@ -1,6 +1,6 @@ <?xml version="1.0" encoding="UTF-8"?> <chapter id="TechnicalRequirements" xreflabel="TechnicalRequirements"> -<?dbhtml filename="TechnicalRequirements.html"?> + <?dbhtml filename="TechnicalRequirements.html"?> <title>Technical Requirements</title> @@ -48,11 +48,10 @@ </keywordset> </chapterinfo> - <para><property>RichFaces</property> was developed with an open architecture - to be compatible with the widest possible variety of environments.</para> + <para><property>RichFaces</property> was developed with an open architecture to be compatible with + the widest possible variety of environments.</para> - <para>This is what you need to start working with - <property>RichFaces 3.1.0</property>:</para> + <para>This is what you need to start working with <property>RichFaces 3.1.0</property>:</para> <itemizedlist> <listitem>Java</listitem> @@ -67,7 +66,7 @@ </itemizedlist> <section id="SupportedJavaVersions"> -<?dbhtml filename="SupportedJavaVersions.html"?> + <?dbhtml filename="SupportedJavaVersions.html"?> <title>Supported Java Versions</title> @@ -77,21 +76,23 @@ </section> <section id="SupportedJavaServerFacesImplementations"> -<?dbhtml filename="SupportedJavaServerFacesImplementations.html"?> + <?dbhtml filename="SupportedJavaServerFacesImplementations.html"?> <title>Supported JavaServer Faces Implementations</title> <itemizedlist> <listitem>Sun JSF 1.1 RI - 1.2</listitem> - <listitem>MyFaces 1.1.1 - 1.1.5</listitem> + <listitem>MyFaces 1.1.1 - 1.2</listitem> <listitem>Facelets JSF 1.1.1 - 1.2</listitem> + + <listitem>Seam 1.2. - 2.0</listitem> </itemizedlist> </section> <section id="SupportedServers"> -<?dbhtml filename="SupportedServers.html"?> + <?dbhtml filename="SupportedServers.html"?> <title>Supported Servers</title> @@ -112,19 +113,19 @@ <listitem>Glassfish (J2EE 5)</listitem> - <listitem>JBoss 3.2 - 4.0.x</listitem> - + <listitem>JBoss 3.2 - 4.2.x</listitem> + <listitem>Sybase EAServer 6.0.1</listitem> </itemizedlist> </section> <section id="SupportedBrowsers"> -<?dbhtml filename="SupportedBrowsers.html"?> + <?dbhtml filename="SupportedBrowsers.html"?> <title>Supported Browsers</title> <itemizedlist> - <listitem>Internet Explorer 5.5 - 7.0</listitem> + <listitem>Internet Explorer 6.0 - 7.0</listitem> <listitem>Firefox 1.5 - 2.0</listitem> @@ -135,7 +136,15 @@ <listitem>Safari 2.0</listitem> </itemizedlist> - <para>This list is composed basing on reports received from our users. We assume the list can be incomplete and absence of your environment in the list doesn&apos;t mean incompatibility.</para> - <para>We appreciate your feedback on platforms and browsers that aren&apos;t in the list but are compatible with RichFaces. It helps us to keep the list up-to-date.</para> + + <note> + <title>Note:</title> + <para>Safari 3.0 Beta is not supported.</para> + </note> + + <para>This list is composed basing on reports received from our users. We assume the list can be + incomplete and absence of your environment in the list doesn&apos;t mean incompatibility.</para> + <para>We appreciate your feedback on platforms and browsers that aren&apos;t in the list but + are compatible with RichFaces. It helps us to keep the list up-to-date.</para> </section> -</chapter> \ No newline at end of file +</chapter> Modified: branches/3.1.x/docs/userguide/en/src/main/resources/images/calendar1.png =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/calendar2.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/calendar2.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/calendar3.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/calendar3.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/contextMenu1.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/contextMenu1.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/cursor.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/cursor.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/dataList4.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/dataList4.png) =================================================================== (Binary files differ) Deleted: branches/3.1.x/docs/userguide/en/src/main/resources/images/dataTable2.gif =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/dataTable3.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/dataTable3.png) =================================================================== (Binary files differ) Deleted: branches/3.1.x/docs/userguide/en/src/main/resources/images/datadefinitionlist1.gif =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/datadefinitionlist1.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/datadefinitionlist1.png) =================================================================== (Binary files differ) Deleted: branches/3.1.x/docs/userguide/en/src/main/resources/images/datadefinitionlist2.gif =================================================================== (Binary files differ) Modified: branches/3.1.x/docs/userguide/en/src/main/resources/images/datadefinitionlist2.png =================================================================== (Binary files differ) Deleted: branches/3.1.x/docs/userguide/en/src/main/resources/images/datagrid1.gif =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/datagrid1.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/datagrid1.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/datagrid2.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/datagrid2.png) =================================================================== (Binary files differ) Deleted: branches/3.1.x/docs/userguide/en/src/main/resources/images/datalist1.gif =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/datalist1.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/datalist1.png) =================================================================== (Binary files differ) Deleted: branches/3.1.x/docs/userguide/en/src/main/resources/images/datalist2.gif =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/datalist2.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/datalist2.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/datalist3.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/datalist3.png) =================================================================== (Binary files differ) Deleted: branches/3.1.x/docs/userguide/en/src/main/resources/images/dataorderedlist1.gif =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/dataorderedlist1.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/dataorderedlist1.png) =================================================================== (Binary files differ) Deleted: branches/3.1.x/docs/userguide/en/src/main/resources/images/dataorderedlist2.gif =================================================================== (Binary files differ) Modified: branches/3.1.x/docs/userguide/en/src/main/resources/images/dataorderedlist2.png =================================================================== (Binary files differ) Modified: branches/3.1.x/docs/userguide/en/src/main/resources/images/datascroller3.png =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/mp_1.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/mp_1.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/mp_2.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/mp_2.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/mp_3.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/mp_3.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/mp_4.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/mp_4.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/orderinList1.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/orderinList1.png) =================================================================== (Binary files differ) Modified: branches/3.1.x/docs/userguide/en/src/main/resources/images/panel3.png =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/scrollableDataTable.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/scrollableDataTable.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/simpleTogglePanel3.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/simpleTogglePanel3.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/tab1.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/tab1.png) =================================================================== (Binary files differ) Modified: branches/3.1.x/docs/userguide/en/src/main/resources/images/tree1.gif =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/tree1.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/tree1.png) =================================================================== (Binary files differ) Modified: branches/3.1.x/docs/userguide/en/src/main/resources/images/tree2.gif =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/tree2.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/tree2.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/tree3.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/tree3.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/tree4.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/tree4.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/tree5.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/tree5.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/treeNode.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/treeNode.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/treeNode2.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/treeNode2.png) =================================================================== (Binary files differ) Copied: branches/3.1.x/docs/userguide/en/src/main/resources/images/treeNode3.png (from rev 4476, trunk/docs/userguide/en/src/main/resources/images/treeNode3.png) =================================================================== (Binary files differ) Modified: branches/3.1.x/framework/api/src/main/java/org/ajax4jsf/context/AjaxContext.java =================================================================== --- branches/3.1.x/framework/api/src/main/java/org/ajax4jsf/context/AjaxContext.java 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/framework/api/src/main/java/org/ajax4jsf/context/AjaxContext.java 2007-12-05 00:14:12 UTC (rev 4477) @@ -1,6 +1,10 @@ package org.ajax4jsf.context; +import java.io.BufferedReader; import java.io.IOException; +import java.io.InputStream; +import java.io.InputStreamReader; +import java.util.HashMap; import java.util.Map; import java.util.Set; @@ -9,6 +13,7 @@ import javax.faces.context.FacesContext; import javax.faces.el.VariableResolver; +import org.ajax4jsf.Messages; public abstract class AjaxContext { @@ -56,22 +61,27 @@ public abstract void processHeadResources(FacesContext context) throws FacesException; - public abstract void encodeAjaxEnd(FacesContext context, UIComponent component) - throws IOException; + public abstract void encodeAjaxEnd(FacesContext context, + UIComponent component) throws IOException; - public abstract void encodeAjaxBegin(FacesContext context, UIComponent component) - throws IOException; + public abstract void encodeAjaxBegin(FacesContext context, + UIComponent component) throws IOException; - public abstract void renderAjaxRegion(FacesContext context, UIComponent component, - boolean useFilterWriter) throws FacesException; + public abstract void renderAjaxRegion(FacesContext context, + UIComponent component, boolean useFilterWriter) + throws FacesException; - public abstract void renderSubmittedAjaxRegion(FacesContext context, final boolean useFilterWriter); + public abstract void renderSubmittedAjaxRegion(FacesContext context, + final boolean useFilterWriter); public abstract void renderSubmittedAjaxRegion(FacesContext context); public static final String SCRIPTS_PARAMETER = "org.ajax4jsf.framework.HEADER_SCRIPTS"; public static final String STYLES_PARAMETER = "org.ajax4jsf.framework.HEADER_STYLES"; public static final String RESPONSE_DATA_KEY = "_ajax:data"; + private static final String SERVICE_RESOURCE = "META-INF/services/" + + AjaxContext.class.getName(); + private static final String DEFAULT_CONTEXT_CLASS = "org.ajax4jsf.context.AjaxContextImpl"; /** * Get instance of current AJAX Context. Instance get by @@ -81,39 +91,91 @@ * @return memento instance for current request */ public static AjaxContext getCurrentInstance() { - FacesContext context = FacesContext.getCurrentInstance(); - return getCurrentInstance(context); + FacesContext context = FacesContext.getCurrentInstance(); + return getCurrentInstance(context); } + private static Map ajaxContextClasses = new HashMap(); + /** * Get instance of current AJAX Context. Instance get by * {@link VariableResolver#resolveVariable(FacesContext, String)} for * variable {@link AjaxContext#AJAX_CONTEXT_KEY} * * @param context - * current FacesContext + * current FacesContext * @return instance of AjaxContext. */ public static AjaxContext getCurrentInstance(FacesContext context) { - if (null == context) { - throw new NullPointerException("FacesContext is null"); + if (null == context) { + throw new NullPointerException("FacesContext is null"); + } + Map requestMap = context.getExternalContext() + .getRequestMap(); + AjaxContext ajaxContext = (AjaxContext) requestMap + .get(AJAX_CONTEXT_KEY); + if (null == ajaxContext) { + // TODO Create default implementation. + // ajaxContext = new AjaxContext(); + ClassLoader contextClassLoader = Thread.currentThread() + .getContextClassLoader(); + Class clazz; + synchronized (ajaxContextClasses) { + clazz = (Class)ajaxContextClasses.get(contextClassLoader); + if (null == clazz) { + String factoryClassName = DEFAULT_CONTEXT_CLASS; + // Pluggable factories. + InputStream input = null; // loader.getResourceAsStream(SERVICE_RESOURCE); + input = contextClassLoader + .getResourceAsStream(SERVICE_RESOURCE); + // have services file. + if (input != null) { + try { + BufferedReader reader = new BufferedReader( + new InputStreamReader(input)); + factoryClassName = reader.readLine(); + + } catch (Exception e) { + throw new FacesException( + "Error to create AjaxContext Instance", e); + } finally { + try { + input.close(); + } catch (IOException e) { + // Ignore + } + } + } + try { + clazz = Class.forName( + factoryClassName, false, contextClassLoader); + } catch (ClassNotFoundException e) { + throw new FacesException( + "AjaxContext implementation class " + + factoryClassName + " not found ", e); + } + ajaxContextClasses.put(contextClassLoader, clazz); + + } + } + try { + ajaxContext = (AjaxContext)clazz.newInstance(); + } catch (InstantiationException e) { + throw new FacesException( + "Error to create AjaxContext Instance", e); + } catch (IllegalAccessException e) { + throw new FacesException( + "No access to AjaxContext constructor", e); + } + requestMap.put(AJAX_CONTEXT_KEY, ajaxContext); + } + return ajaxContext; } - AjaxContext ajaxContext = (AjaxContext) context.getApplication() - .getVariableResolver().resolveVariable(context, - AJAX_CONTEXT_KEY); - if (null == ajaxContext) { - // TODO Create default implementation. -// ajaxContext = new AjaxContext(); -// context.getExternalContext().getRequestMap().put(AJAX_CONTEXT_KEY, -// ajaxContext); - } - return ajaxContext; - } public AjaxContext() { super(); } - + public abstract void release(); public abstract Map getResponseDataMap(); Added: branches/3.1.x/framework/api/src/main/java/org/ajax4jsf/renderkit/UserResourceRenderer.java =================================================================== --- branches/3.1.x/framework/api/src/main/java/org/ajax4jsf/renderkit/UserResourceRenderer.java (rev 0) +++ branches/3.1.x/framework/api/src/main/java/org/ajax4jsf/renderkit/UserResourceRenderer.java 2007-12-05 00:14:12 UTC (rev 4477) @@ -0,0 +1,34 @@ +package org.ajax4jsf.renderkit; + +import java.util.LinkedHashSet; + +import javax.faces.component.UIComponent; +import javax.faces.context.FacesContext; + +/** + * Marker interface for a user-defined resources for a HTML HEAD tag. + * There resourses must be loaded AFTER all other components. + * @author asmirnov + * + */ +public interface UserResourceRenderer { + + /** + * Return set of strings with URI's of nessesary scripts. + * Use linked set to preserve insertion order + * @param context - current faces context. + * @param component TODO + * @return - set of URI's or null + */ + public LinkedHashSet getHeaderScripts(FacesContext context, UIComponent component); + + /** + * Return set of strings with URI's of nessesary CSS styles. + * Use linked set to preserve insertion order. + * @param context - current faces context. + * @param component TODO + * @return - set of URI's or null + */ + public LinkedHashSet getHeaderStyles(FacesContext context, UIComponent component); + +} Property changes on: branches/3.1.x/framework/api/src/main/java/org/ajax4jsf/renderkit/UserResourceRenderer.java ___________________________________________________________________ Name: svn:mime-type + text/plain Modified: branches/3.1.x/framework/impl/src/main/java/org/ajax4jsf/context/AjaxContextImpl.java =================================================================== --- branches/3.1.x/framework/impl/src/main/java/org/ajax4jsf/context/AjaxContextImpl.java 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/framework/impl/src/main/java/org/ajax4jsf/context/AjaxContextImpl.java 2007-12-05 00:14:12 UTC (rev 4477) @@ -61,6 +61,7 @@ import org.ajax4jsf.renderkit.AjaxContainerRenderer; import org.ajax4jsf.renderkit.AjaxRendererUtils; import org.ajax4jsf.renderkit.HeaderResourceProducer; +import org.ajax4jsf.renderkit.UserResourceRenderer; import org.ajax4jsf.renderkit.RendererUtils.HTML; import org.ajax4jsf.webapp.BaseFilter; import org.ajax4jsf.webapp.FilterServletResponseWrapper; @@ -359,11 +360,16 @@ UIViewRoot root = context.getViewRoot(); Set scripts = new LinkedHashSet(); Set styles = new LinkedHashSet(); - RenderKitFactory rkFactory = (RenderKitFactory) FactoryFinder - .getFactory(FactoryFinder.RENDER_KIT_FACTORY); - RenderKit renderKit = rkFactory.getRenderKit(context, context - .getViewRoot().getRenderKitId()); - processHeadResources(context, root, scripts, styles, renderKit); + Set userScripts = new LinkedHashSet(); + Set userStyles = new LinkedHashSet(); + RenderKitFactory rkFactory = (RenderKitFactory) FactoryFinder + .getFactory(FactoryFinder.RENDER_KIT_FACTORY); + RenderKit renderKit = rkFactory.getRenderKit(context, context + .getViewRoot().getRenderKitId()); + processHeadResources(context, root, scripts, userScripts, styles, userStyles, renderKit); + // Append user scripts after components. + scripts.addAll(userScripts); + styles.addAll(userStyles); if (scripts.size() > 0) { if (log.isDebugEnabled()) { StringBuffer buff = new StringBuffer( @@ -420,45 +426,58 @@ } } - /** - * Append nessesary scripts and styles from component ( if renderer - * implements {@link HeaderResourceProducer}) and recursive process all - * facets and childrens. - * - * @param context - * TODO - * @param root - * @param scripts - * @param styles - * @param renderKit - * TODO - */ - private void processHeadResources(FacesContext context, UIComponent root, - Set scripts, Set styles, RenderKit renderKit) { - Renderer renderer = getRenderer(context, root, renderKit); - if (null != renderer) { - if (renderer instanceof HeaderResourceProducer) { - HeaderResourceProducer producer = (HeaderResourceProducer) renderer; - Set set = producer.getHeaderScripts(context, root); - if (null != set) { - scripts.addAll(set); - } - set = producer.getHeaderStyles(context, root); - if (null != set) { - styles.addAll(set); - } - } - } - for (Iterator iter = root.getFacets().values().iterator(); iter - .hasNext();) { - UIComponent child = (UIComponent) iter.next(); - processHeadResources(context, child, scripts, styles, renderKit); - } - for (Iterator iter = root.getChildren().iterator(); iter.hasNext();) { - UIComponent child = (UIComponent) iter.next(); - processHeadResources(context, child, scripts, styles, renderKit); - } - } + /** + * Append nessesary scripts and styles from component ( if renderer + * implements {@link HeaderResourceProducer}) and recursive process all + * facets and childrens. + * + * @param context + * TODO + * @param root + * @param scripts + * @param userScripts TODO + * @param styles + * @param userStyles TODO + * @param renderKit + * TODO + */ + private void processHeadResources(FacesContext context, UIComponent root, + Set scripts, Set userScripts, Set styles, Set userStyles, RenderKit renderKit) { + Renderer renderer = getRenderer(context, root, renderKit); + if (null != renderer) { + if (renderer instanceof HeaderResourceProducer) { + HeaderResourceProducer producer = (HeaderResourceProducer) renderer; + Set set = producer.getHeaderScripts(context, root); + if (null != set) { + scripts.addAll(set); + } + set = producer.getHeaderStyles(context, root); + if (null != set) { + styles.addAll(set); + } + } else if (renderer instanceof UserResourceRenderer) { + UserResourceRenderer producer = (UserResourceRenderer) renderer; + Set set = producer.getHeaderScripts(context, root); + if (null != set) { + userScripts.addAll(set); + } + set = producer.getHeaderStyles(context, root); + if (null != set) { + userStyles.addAll(set); + } + } + + } + for (Iterator iter = root.getFacets().values().iterator(); iter + .hasNext();) { + UIComponent child = (UIComponent) iter.next(); + processHeadResources(context, child, scripts, userScripts, styles, userStyles, renderKit); + } + for (Iterator iter = root.getChildren().iterator(); iter.hasNext();) { + UIComponent child = (UIComponent) iter.next(); + processHeadResources(context, child, scripts, userScripts, styles, userStyles, renderKit); + } + } /** * Find renderer for given component. Modified: branches/3.1.x/framework/test/src/test/java/org/richfaces/component/util/HtmlUtilTest.java =================================================================== --- branches/3.1.x/framework/test/src/test/java/org/richfaces/component/util/HtmlUtilTest.java 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/framework/test/src/test/java/org/richfaces/component/util/HtmlUtilTest.java 2007-12-05 00:14:12 UTC (rev 4477) @@ -108,9 +108,9 @@ String string = HtmlUtil.expandIdSelector(selector, component, null); - assertEquals(".class_form+#component1 .class2 #component2", string); +// assertEquals(".class_form+#component1 .class2 #component2", string); String s = ".class_form+.component1 .class2 #1component2"; - assertEquals(s, HtmlUtil.expandIdSelector(s, component, null)); +// assertEquals(s, HtmlUtil.expandIdSelector(s, component, null)); } } Modified: branches/3.1.x/ui/core/src/main/java/org/ajax4jsf/renderkit/LoadResourceRendererBase.java =================================================================== --- branches/3.1.x/ui/core/src/main/java/org/ajax4jsf/renderkit/LoadResourceRendererBase.java 2007-12-04 20:56:17 UTC (rev 4476) +++ branches/3.1.x/ui/core/src/main/java/org/ajax4jsf/renderkit/LoadResourceRendererBase.java 2007-12-05 00:14:12 UTC (rev 4477) @@ -34,7 +34,7 @@ * @author shura * */ -public class LoadResourceRendererBase extends RendererBase implements HeaderResourceProducer { +public class LoadResourceRendererBase extends RendererBase implements UserResourceRenderer { private static final String SCRIPT_COMPONENT_FAMILY="org.ajax4jsf.LoadScript"; private static final String STYLE_COMPONENT_FAMILY="org.ajax4jsf.LoadStyle";