Author: atsebro Date: 2008-09-30 10:31:29 -0400 (Tue, 30 Sep 2008) New Revision: 10626 Modified: trunk/docs/userguide/en/src/main/docbook/included/calendar.xml trunk/docs/userguide/en/src/main/docbook/included/column.xml trunk/docs/userguide/en/src/main/docbook/included/datascroller.xml trunk/docs/userguide/en/src/main/docbook/included/menuItem.xml trunk/docs/userguide/en/src/main/docbook/included/messages.xml trunk/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml trunk/docs/userguide/en/src/main/docbook/included/support.xml Log: RF-3560: Style class attributes Modified: trunk/docs/userguide/en/src/main/docbook/included/calendar.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/calendar.xml 2008-09-30 14:09:06 UTC (rev 10625) +++ trunk/docs/userguide/en/src/main/docbook/included/calendar.xml 2008-09-30 14:31:29 UTC (rev 10626) @@ -175,7 +175,7 @@ load some data initially.</para> </note> <para><emphasis> - <property>&quot;ondataselect&quot;</property> + <property>&quot;ondateselect&quot;</property> </emphasis> attribute is used to define an event that is triggered before date selection.</para> <para><emphasis> @@ -194,7 +194,7 @@ </rich:calendar> ...]]></programlisting> <para><emphasis> - <property>&quot;ondataselect&quot;</property> + <property>&quot;ondateselect&quot;</property> </emphasis> could be used for possibility of date selection canceling. See an example below:</para> <programlisting role="XML"><![CDATA[... @@ -202,12 +202,12 @@ ...]]></programlisting> <para> <emphasis> - <property>&quot;oncurrentdataselected&quot;</property> + <property>&quot;oncurrentdateselected&quot;</property> </emphasis> event is fired when the "next/previous month" or "next/previous year" button is pressed, and the value is applied. </para> <para> <emphasis> - <property>&quot;oncurrentdataselect&quot;</property> + <property>&quot;oncurrentdateselect&quot;</property> </emphasis> event is fired when the "next/previous month" or "next/previous year" button is pressed, but the value is not applied yet (you can change the logic of applying the value). Also this event @@ -591,16 +591,21 @@ <ulink url="http://labs.jboss.com/file-access/default/members/jbossrichface... - properties. - </para> + properties. </para> <note> <title>Note:</title> - <para>Only for Internet Explorer 6 and later. - To make <emphasis role="bold"><property>&lt;rich:calendar&gt;</property></emphasis> inside <emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis> rendered properly, enable the standards-compliant mode. - Explore <ulink url="http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx&qu... reference at MSDN</ulink> to find out how to do this. - </para> + <para>Only for Internet Explorer 6 and later. To make <emphasis + role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> inside <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> rendered properly, enable the + standards-compliant mode. Explore <ulink + url="http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx" + >!DOCTYPE reference at MSDN</ulink> to find out + how to do this. </para> </note> - + </section> <section> Modified: trunk/docs/userguide/en/src/main/docbook/included/column.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/column.xml 2008-09-30 14:09:06 UTC (rev 10625) +++ trunk/docs/userguide/en/src/main/docbook/included/column.xml 2008-09-30 14:31:29 UTC (rev 10626) @@ -1,54 +1,55 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>rich:column</keyword> -<keyword>colspan</keyword> -<keyword>breakBefore</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.Column</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlColumn</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Column</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.ColumnRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ColumnTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <property>column</property> on a page, use the following syntax:</para> + <sectioninfo> + <keywordset> + <keyword>rich:column</keyword> + <keyword>colspan</keyword> + <keyword>breakBefore</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.Column</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlColumn</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Column</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.ColumnRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ColumnTag</entry> + </row> + </tbody> + </tgroup> + </table> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <section> + <title>Creating the Component with a Page Tag</title> + <para>To create the simplest variant of <property>column</property> on a page, + use the following syntax:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:dataTable var="set"> <rich:column> <h:outputText value="#{set.property1}"/> @@ -57,28 +58,32 @@ </rich:dataTable> ... ]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> + </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.HtmlColumn; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlColumn; ... HtmlColumn myColumn = new HtmlColumn(); ... ]]></programlisting> -</section> -<section> -<title>Details of Usage</title> -<para>To output a simple table, the <emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> component is used the same way as the standard -<emphasis role="bold"><property>&lt;h:column&gt;</property></emphasis>, i.e. the following code on a page is used:</para> + </section> + <section> + <title>Details of Usage</title> + <para>To output a simple table, the <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> component is used the same way as the standard <emphasis + role="bold"> + <property>&lt;h:column&gt;</property> + </emphasis>, i.e. the following code on a page is used:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> -<programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> <rich:column> <f:facet name="header">State Flag</f:facet> @@ -99,24 +104,30 @@ </rich:dataTable> ... ]]></programlisting> - <para>The result is:</para> - <figure> - <title>Generated <emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column2.png"/> - </imageobject> - </mediaobject> - </figure> -<para>Now, in order to group columns with text information into one row in one column with a flag, use - the <emphasis ><property>&quot;colspan&quot;</property></emphasis> attribute, which is similar to an HTML one, specifying that the first column contains 3 columns. - In addition, it&apos;s necessary to specify that the next column begins from the first row with the help of the - <code>breakBefore=&quot;true&quot;</code>.</para> + <para>The result is:</para> + <figure> + <title>Generated <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column2.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Now, in order to group columns with text information into one row in one + column with a flag, use the <emphasis> + <property>&quot;colspan&quot;</property> + </emphasis> attribute, which is similar to an HTML one, specifying + that the first column contains 3 columns. In addition, it&apos;s + necessary to specify that the next column begins from the first row + with the help of the + <code>breakBefore=&quot;true&quot;</code>.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> <rich:column colspan="3"> <h:graphicImage value="#{cap.stateFlag}"/> @@ -133,24 +144,32 @@ </rich:dataTable> ... ]]></programlisting> -<para>As a result the following structure is rendered:</para> -<figure> - <title><emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> modified with <emphasis ><property>&quot;colspan&quot;</property></emphasis> and - <emphasis><property>&quot;breakbefore&quot;</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column3.png"/> - </imageobject> - </mediaobject> - </figure> - <para>The same way is used for <property>columns</property> grouping with the <emphasis ><property>&quot;rowspan&quot;</property></emphasis> - attribute that is similar to an HTML one responsible for rows quantity definition occupied with the - current one. The only thing to add in the example is an instruction to move onto the next row for each next after the second column.</para> + <para>As a result the following structure is rendered:</para> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> modified with <emphasis> + <property>&quot;colspan&quot;</property> + </emphasis> and <emphasis> + <property>&quot;breakbefore&quot;</property> + </emphasis> attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column3.png"/> + </imageobject> + </mediaobject> + </figure> + <para>The same way is used for <property>columns</property> grouping with the <emphasis> + <property>&quot;rowspan&quot;</property> + </emphasis> attribute that is similar to an HTML one responsible for + rows quantity definition occupied with the current one. The only thing + to add in the example is an instruction to move onto the next row for + each next after the second column.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> <rich:column rowspan="3"> <f:facet name="header">State Flag</f:facet> @@ -169,34 +188,46 @@ </rich:dataTable> ... ]]></programlisting> -<para>As a result:</para> -<figure> - <title><emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> generated with <emphasis ><property>&quot;rowspan&quot;</property></emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column4.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Hence, additionally to a standard output of a particular row provided with the <emphasis role="bold"><property>&lt;h:column&gt;</property></emphasis> - component, it becomes possible to group easily the rows with special HTML attribute.</para> - <para>The columns also could be grouped in a particular way with the help of the <emphasis role="bold"><property>&lt;h:columnGroup&gt;</property></emphasis> - component that is described in <link linkend="columnGroup">the following chapter</link>.</para> - <para><ulink url="http://wiki.jboss.org/wiki/DynamicColumns">Here</uli... you can find additional information about dynamic columns.</para> -</section> - - <section> - <title>Sorting and Filtering</title> - <section id="sort"> - <title>Sorting</title> - <para> - In order to sort the columns you should use <emphasis><property>&quot;sortBy&quot;</property></emphasis> attribute that indicates what values to be sorted. - In order to sort the column you should click on its header. See the following example. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para>As a result:</para> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> generated with <emphasis> + <property>&quot;rowspan&quot;</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column4.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Hence, additionally to a standard output of a particular row provided with + the <emphasis role="bold"> + <property>&lt;h:column&gt;</property> + </emphasis> component, it becomes possible to group easily the rows + with special HTML attribute.</para> + <para>The columns also could be grouped in a particular way with the help of the + <emphasis role="bold"> + <property>&lt;h:columnGroup&gt;</property> + </emphasis> component that is described in <link linkend="columnGroup" + >the following chapter</link>.</para> + <para><ulink url="http://wiki.jboss.org/wiki/DynamicColumns">Here</uli... you + can find additional information about dynamic columns.</para> + </section> + + <section> + <title>Sorting and Filtering</title> + <section id="sort"> + <title>Sorting</title> + <para> In order to sort the columns you should use <emphasis> + <property>&quot;sortBy&quot;</property> + </emphasis> attribute that indicates what values to be + sorted. In order to sort the column you should click on its + header. See the following example. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <h:form> <rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="300px"> <f:facet name="header"> @@ -217,26 +248,31 @@ </rich:dataTable> </h:form> ...]]></programlisting> - <para>This is result:</para> - <figure> - <title> - <emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> with <emphasis><property>&quot;sortBy&quot;</property></emphasis> attribute - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column5.png"/> - </imageobject> - </mediaobject> - </figure> - <para> - The <emphasis><property>&quot;selfSorted&quot;</property></emphasis> attribute - that would add the possibility of automatic sorting by clicking the column header. - Default value is &quot;true&quot;. In the example below the second column is unavailable for sorting. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para>This is result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> with <emphasis> + <property>&quot;sortBy&quot;</property> + </emphasis> attribute </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column5.png" + /> + </imageobject> + </mediaobject> + </figure> + <para> The <emphasis> + <property>&quot;selfSorted&quot;</property> + </emphasis> attribute that would add the possibility of + automatic sorting by clicking the column header. Default + value is &quot;true&quot;. In the example below the + second column is unavailable for sorting. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:dataTable value="#{capitalsBean.capitals}" var="cap"> <rich:column> <f:facet name="header"> @@ -251,27 +287,31 @@ <h:outputText value="#{cap.state}"/> </rich:column> </rich:dataTable> -...]]></programlisting> - <para> - <emphasis><property>&quot;sortOrder&quot;</property></emphasis> attribute - is used for changing the sorting of columns by means of external controls. - </para> - <para>Possible values are:</para> - <itemizedlist> - <listitem><para> - &quot;ASCENDING&quot; - column is sorted in ascending - </para></listitem> - <listitem><para> - &quot;DESCENDING&quot; - column is sorted in descending - </para></listitem> - <listitem><para> - &quot;UNSORTED&quot; - column isn&apos;t sorted - </para></listitem> - </itemizedlist> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... +...]]></programlisting> + <para> + <emphasis> + <property>&quot;sortOrder&quot;</property> + </emphasis> attribute is used for changing the sorting of + columns by means of external controls. </para> + <para>Possible values are:</para> + <itemizedlist> + <listitem> + <para> &quot;ASCENDING&quot; - column is + sorted in ascending </para> + </listitem> + <listitem> + <para> &quot;DESCENDING&quot; - column is + sorted in descending </para> + </listitem> + <listitem> + <para> &quot;UNSORTED&quot; - column + isn&apos;t sorted </para> + </listitem> + </itemizedlist> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <h:form> <rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="300px"> <f:facet name="header"> @@ -292,39 +332,47 @@ </rich:dataTable> </h:form> ...]]></programlisting> - <para>Below you can see the result:</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> with <emphasis><property>&quot;sortOrder&quot;</property></emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column6.png"/> - </imageobject> - </mediaobject> - </figure> - <para> - In the example above the first column is sorted in descending order. But if recurring rows appear in the table the relative second column are sorted in ascending order. - </para> - <para>You can customize the sorting&apos;s icon element using &quot;rich-sort-icon&quot; class.</para> - <para> - The <emphasis><property>&quot;sortPriority&quot;</property></emphasis> attribute - defines a set of column <property>ids</property> in the order the columns could be set. - </para> - <para> - If the columns sort order changed externally sort priorities could be used to define which columns will be sorted first. - </para> - <!--para> + <para>Below you can see the result:</para> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> with <emphasis> + <property>&quot;sortOrder&quot;</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column6.png" + /> + </imageobject> + </mediaobject> + </figure> + <para> In the example above the first column is sorted in descending + order. But if recurring rows appear in the table the + relative second column are sorted in ascending order. </para> + <para>You can customize the sorting&apos;s icon element using + &quot;rich-sort-icon&quot; class.</para> + <!-- <para> The <emphasis> + <property>&quot;sortPriority&quot;</property> + </emphasis> attribute defines a set of column + <property>ids</property> in the order the columns could be + set. </para> + <para> If the columns sort order changed externally sort priorities + could be used to define which columns will be sorted first. </para> --> + <!--para> Note that <emphasis><property>&quot;sortPriority&quot;</property></emphasis> attribute is defined in the <emphasis role="bold"><property>&lt;rich:dataTable&gt;</property></emphasis> component! </para--> - <para> - The <emphasis><property>&quot;sortable&quot;</property></emphasis> attribute which is used - with <emphasis role="bold"><property>&lt;rich:scrollableDataTable&gt;</property></emphasis> component. - In the following example only the first column could be sorted. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> The <emphasis> + <property>&quot;sortable&quot;</property> + </emphasis> attribute which is used with <emphasis + role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> component. In the following example only the + first column could be sorted. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" id="carList" columnClasses="col" value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single" binding="#{dataTableScrollerBean.table}" @@ -349,50 +397,67 @@ </rich:column> </rich:scrollableDataTable> ...]]></programlisting> - <figure> - <title>The <emphasis><property>&quot;sortable&quot;</property></emphasis> attribute usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column7.png"/> - </imageobject> - </mediaobject> - </figure> - <para><emphasis><property>&quot;sortExpression&quot;</property></emphasis> attribute defines a bean property which is used for sorting of a column.</para> - </section> - - <section id="filter"> - <title>Filtering</title> - - <para> - There are two ways to filter the column value: - </para> - <itemizedlist> - <listitem> - <para> - Using built-in filtering. It uses <code>startsWith()</code> function to make filtering. - In this case you need to define <emphasis><property>&quot;filterBy&quot;</property></emphasis> attribute - at column you want to be filterable. This attribute defines iterable object property which is used when filtering performed. - </para> - <para> - The <emphasis><property>&quot;filterValue&quot;</property></emphasis> attribute is used to get or change current filtering value. - It could be defined with initial filtering value on the page or as value binding to get/change it on server. - If the <emphasis><property>&quot;filterValue&quot;</property></emphasis> attribute isn&apos;t empty from the beginning table is filtered on the first rendering. - </para> - <para> - You can customize the input form using &quot;rich-filter-input&quot; CSS class. - </para> - <para> - In order to change filter event you could use <emphasis><property>&quot;filterEvent&quot;</property></emphasis> attribute - on column, e.g. &quot;onblur&quot;(default value). - </para> - <!--para> + <figure> + <title>The <emphasis> + <property>&quot;sortable&quot;</property> + </emphasis> attribute usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column7.png" + /> + </imageobject> + </mediaobject> + </figure> + <para><emphasis> + <property>&quot;sortExpression&quot;</property> + </emphasis> attribute defines a bean property which is used + for sorting of a column.</para> + </section> + + <section id="filter"> + <title>Filtering</title> + + <para> There are two ways to filter the column value: </para> + <itemizedlist> + <listitem> + <para> Using built-in filtering. It uses + <code>startsWith()</code> + function to make filtering. In this case + you need to define <emphasis> + <property>&quot;filterBy&quot;</property> + </emphasis> attribute at column you want + to be filterable. This attribute defines + iterable object property which is used + when filtering performed. </para> + <para> The <emphasis> + <property>&quot;filterValue&quot;</property> + </emphasis> attribute is used to get or + change current filtering value. It could + be defined with initial filtering value + on the page or as value binding to + get/change it on server. If the <emphasis> + <property>&quot;filterValue&quot;</property> + </emphasis> attribute isn&apos;t + empty from the beginning table is + filtered on the first rendering. </para> + <para> You can customize the input form using + &quot;rich-filter-input&quot; + CSS class. </para> + <para> In order to change filter event you could + use <emphasis> + <property>&quot;filterEvent&quot;</property> + </emphasis> attribute on column, e.g. + &quot;onblur&quot;(default + value). </para> + <!--para> The <emphasis><property>&quot;filterDefaultLabel&quot;</property></emphasis> attribute defines the label that appears instead of input field. </para--> - <para>Below you can see the example:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para>Below you can see the example:</para> + <para> + <emphasis role="bold" + >Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="500px"> <rich:column filterBy="#{cap.state}" filterValue="#{filterName.filterBean}" filterEvent="onkeyup"> <h:outputText value="#{cap.state}"/> @@ -401,38 +466,47 @@ <h:outputText value="#{cap.name}"/> </rich:column> </rich:dataTable> -...]]></programlisting> - <para> - This is the result: - </para> - <figure> - <title>Built-in filtering feature usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column8.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para> - Using external filtering. In this case you need to write your custom filtering function or expression and define controls. - </para> - <para> - The <emphasis><property>&quot;filterExpression&quot;</property></emphasis> attribute is used to define expression evaluated to boolean value. - This expression checks if the object satisfies filtering condition. - </para> - <para> - The <emphasis><property>&quot;filterMethod&quot;</property></emphasis> attribute is defined with method binding. - This method accepts on Object parameter and return boolean value. - So, this method also could be used to check if the object satisfies filtering condition. - The usage of this attribute is the best way for implementing your own complex business logic. - </para> - <para>See the following example:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... +...]]></programlisting> + <para> This is the result: </para> + <figure> + <title>Built-in filtering feature usage</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/column8.png" + /> + </imageobject> + </mediaobject> + </figure> + </listitem> + <listitem> + <para> Using external filtering. In this case you + need to write your custom filtering + function or expression and define + controls. </para> + <para> The <emphasis> + <property>&quot;filterExpression&quot;</property> + </emphasis> attribute is used to define + expression evaluated to boolean value. + This expression checks if the object + satisfies filtering condition. </para> + <para> The <emphasis> + <property>&quot;filterMethod&quot;</property> + </emphasis> attribute is defined with + method binding. This method accepts on + Object parameter and return boolean + value. So, this method also could be + used to check if the object satisfies + filtering condition. The usage of this + attribute is the best way for + implementing your own complex business + logic. </para> + <para>See the following example:</para> + <para> + <emphasis role="bold" + >Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:dataTable value="#{capitalsBean.capitals}" var="cap" id="table"> <rich:column filterMethod="#{filteringBean.filterStates}"> <f:facet name="header"> @@ -454,126 +528,144 @@ </rich:column> </rich:dataTable> ...]]></programlisting> - </listitem> - </itemizedlist> - </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> 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> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="SPR"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... + </listitem> + </itemizedlist> + </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> 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> + </emphasis> components on a page using CSS, it&apos;s enough to + create classes with the same names (possible classes could be found in + the tables <link linkend="SPR"> above</link>) and define necessary + properties in them. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .rich-table-cell{ font-style: italic; } -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example cells font style was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:column&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:column&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... +...]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with predefined classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column_pc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example cells font style was changed.</para> + + <para>Also it&apos;s possible to change styles of particular <emphasis + role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> component. In this case you should create own style + classes and use them in corresponding <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> + <emphasis> + <property>styleClass</property> + </emphasis> attributes. An example is placed below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .myClass{ font-weight: bolder; } -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:column&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:column styleClass="myClass"> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font weight for second column was changed.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:column&gt;</property></emphasis> usage and sources for the given example. </para> - </section> +...]]></programlisting> + <para>The <emphasis> + <property>&quot;styleClass&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:column&gt; </property> + </emphasis> is defined as it&apos;s shown in the example below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<rich:column styleClass="myClass"> +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with own classes and <emphasis> + <property>styleClass</property> + </emphasis> attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column_oc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above, the font weight for second + column was changed.</para> + </section> + + <section> + <title>Relevant Resources Links</title> + <para><ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... + >Here</ulink> you can see the example of <emphasis + role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> </section> - \ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/datascroller.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/datascroller.xml 2008-09-30 14:09:06 UTC (rev 10625) +++ trunk/docs/userguide/en/src/main/docbook/included/datascroller.xml 2008-09-30 14:31:29 UTC (rev 10626) @@ -1,56 +1,56 @@ <?xml version='1.0' encoding='UTF-8'?> <section> - <sectioninfo> - <keywordset> - <keyword>scroller</keyword> - <keyword>rich:datascroller</keyword> - <keyword>Htmldatascroller</keyword> - <keyword>tables</keyword> - </keywordset> - </sectioninfo> + <sectioninfo> + <keywordset> + <keyword>scroller</keyword> + <keyword>rich:datascroller</keyword> + <keyword>Htmldatascroller</keyword> + <keyword>tables</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.Datascroller</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDatascroller</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Datascroller</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DataScrollerRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DatascrollerTag</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.richfaces.Datascroller</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDatascroller</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Datascroller</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DataScrollerRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DatascrollerTag</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> + <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[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <h:dataTable id="table"> ... </h:dataTable> @@ -58,64 +58,73 @@ <rich:datascroller for="table"/> ... ]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> + </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.HtmlDatascroller; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDatascroller; ... HtmlDatascroller myScroll = new HtmlDatascroller(); ... ]]></programlisting> - </section> - <section> - <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 - 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> - </emphasis> attribute. Note, that <emphasis><property>&quot;for&quot;</property></emphasis> is evaluated on view build, not on view render, that is why it will ignore JSTL tags.</para> - <para>The table should also have the defined <emphasis> - <property>&quot;rows&quot;</property> - </emphasis> attribute limiting the quantity of inputted table rows.</para> - <para>The scroller could limit the maximum quantity of rendered links on the table pages with - the help of the <emphasis> - <property>&quot;maxPages&quot;</property> - </emphasis> attribute.</para> - <para>Component provides two controllers groups for switching:</para> - <itemizedlist> - <listitem><para>Page numbers for switching onto a particular page</para></listitem> - <listitem><para>The controls of fast switching: <emphasis> - <property>&quot;first&quot;,</property> - </emphasis> - <emphasis> - <property>&quot;last&quot;,</property> - </emphasis> - <emphasis> - <property>&quot;next&quot;,</property> - </emphasis> - <emphasis> - <property>&quot;previous&quot;,</property> - </emphasis> - <emphasis> - <property>&quot;fastforward&quot;,</property> - </emphasis> - <emphasis> - <property>&quot;fastrewind&quot;</property> - </emphasis></para></listitem> - </itemizedlist> - <para>The controls of fast switching are created adding the facets component with the - corresponding name:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[ ... + </section> + <section> + <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 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> + </emphasis> attribute. Note, that <emphasis> + <property>&quot;for&quot;</property> + </emphasis> is evaluated on view build, not on view render, that is + why it will ignore JSTL tags.</para> + <para>The table should also have the defined <emphasis> + <property>&quot;rows&quot;</property> + </emphasis> attribute limiting the quantity of inputted table rows.</para> + <para>The scroller could limit the maximum quantity of rendered links on the + table pages with the help of the <emphasis> + <property>&quot;maxPages&quot;</property> + </emphasis> attribute.</para> + <para>Component provides two controllers groups for switching:</para> + <itemizedlist> + <listitem> + <para>Page numbers for switching onto a particular + page</para> + </listitem> + <listitem> + <para>The controls of fast switching: <emphasis> + <property>&quot;first&quot;,</property> + </emphasis> + <emphasis> + <property>&quot;last&quot;,</property> + </emphasis> + <emphasis> + <property>&quot;next&quot;,</property> + </emphasis> + <emphasis> + <property>&quot;previous&quot;,</property> + </emphasis> + <emphasis> + <property>&quot;fastforward&quot;,</property> + </emphasis> + <emphasis> + <property>&quot;fastrewind&quot;</property> + </emphasis></para> + </listitem> + </itemizedlist> + <para>The controls of fast switching are created adding the facets component + with the corresponding name:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[ ... <rich:datascroller for="table" maxPages="10"> <f:facet name="first"> <h:outputText value="First"/> @@ -126,36 +135,39 @@ </rich:datascroller> ... ]]></programlisting> - <figure> - <title><emphasis role="bold"><property>&lt;rich:datascroller&gt;</property></emphasis> controls of fast switching</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/datascroller2.png"/> - </imageobject> - </mediaobject> - </figure> - <para>The screenshot shows one controller from each group.</para> - <para> There are also facets used to create the disabled states: - <code>&quot;first_disabled&quot;,</code> - <code>&quot;last_disabled&quot;,</code> - <code>&quot;next_disabled&quot;,</code> - <code>&quot;previous_disabled&quot;,</code> - <code>&quot;fastforward_disabled&quot;,</code> - <code>&quot;fastrewind_disabled&quot;</code>. </para> - <para>For the <code>&quot;fastforward&quot;/&quot;fastrewind&quot;</code> - controls customization the additional <emphasis> - <property>&quot;fastStep&quot;</property> - </emphasis> attribute is used. The attribute indicates pages quantity to switch onto when fast - scrolling is used. </para> - - <para> - The <emphasis><property>&quot;page&quot;</property></emphasis> is a value-binding attribute used to - define and save current page number. The example is placed below. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> controls of fast switching</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datascroller2.png"/> + </imageobject> + </mediaobject> + </figure> + <para>The screenshot shows one controller from each group.</para> + <para> There are also facets used to create the disabled states: + <code>&quot;first_disabled&quot;,</code> + <code>&quot;last_disabled&quot;,</code> + <code>&quot;next_disabled&quot;,</code> + <code>&quot;previous_disabled&quot;,</code> + <code>&quot;fastforward_disabled&quot;,</code> + <code>&quot;fastrewind_disabled&quot;</code>. </para> + <para>For the + <code>&quot;fastforward&quot;/&quot;fastrewind&quot;</code> + controls customization the additional <emphasis> + <property>&quot;fastStep&quot;</property> + </emphasis> attribute is used. The attribute indicates pages quantity + to switch onto when fast scrolling is used. </para> + + <para> The <emphasis> + <property>&quot;page&quot;</property> + </emphasis> is a value-binding attribute used to define and save + current page number. The example is placed below. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <h:form id="myForm"> <rich:dataTable id="carList" rows="7" value="#{dataTableScrollerBean.allCars}" var="category"> <f:facet name="header"> @@ -193,24 +205,25 @@ ... ]]></programlisting> - <para> - In the example above you can enter the page number you want and set it by clicking - on the <emphasis role="bold"><property>&lt;h:commandButton&gt;</property></emphasis>. By the way, - if you use <emphasis role="bold"><property>&lt;rich:datascroller&gt;</property></emphasis> page links - the input field rerenders and current page number changes. - </para> - <para> - This is a result: - </para> - <figure> - <title>The <emphasis><property>&quot;page&quot;</property></emphasis> attribute usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/datascroller3.png"/> - </imageobject> - </mediaobject> - </figure> - <!-- + <para> In the example above you can enter the page number you want and set it by + clicking on the <emphasis role="bold"> + <property>&lt;h:commandButton&gt;</property> + </emphasis>. By the way, if you use <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> page links the input field rerenders and current page + number changes. </para> + <para> This is a result: </para> + <figure> + <title>The <emphasis> + <property>&quot;page&quot;</property> + </emphasis> attribute usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datascroller3.png"/> + </imageobject> + </mediaobject> + </figure> + <!-- The <emphasis><property>&quot;pageIndexVar&quot;</property></emphasis> and <emphasis> <property>&;pagesVar&quot;</property> </emphasis> attributes provide an ability to show the current page and the number of pages in @@ -218,23 +231,25 @@ <property>&lt;rich:datascroller&gt;</property> </emphasis>. --> - - - <para> - The <emphasis><property>&quot;pageIndexVar&quot;</property></emphasis> - and <emphasis><property>&quot;pagesVar&quot;</property></emphasis> attributes - define a request scope variables and provide an ability to show the current page - and the number of pages in the - <emphasis role="bold"><property>&lt;rich:datascroller&gt;</property></emphasis>. - </para> - <para> - These attributes are used for definition the names of variables, - that is used in the facet with name <emphasis><property>&quot;pages&quot;</property></emphasis>. - An example can be found below: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + + + <para> The <emphasis> + <property>&quot;pageIndexVar&quot;</property> + </emphasis> and <emphasis> + <property>&quot;pagesVar&quot;</property> + </emphasis> attributes define a request scope variables and provide an + ability to show the current page and the number of pages in the + <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis>. </para> + <para> These attributes are used for definition the names of variables, that is + used in the facet with name <emphasis> + <property>&quot;pages&quot;</property> + </emphasis>. An example can be found below: </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <h:form> <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> <rich:column> @@ -251,333 +266,383 @@ </h:form> ... ]]></programlisting> - <para> It&apos;s possible to insert optional separators between controls. For this purpose use a <emphasis> - <property>&quot;controlSeparator&quot;</property> - </emphasis> facet. An example is placed below. </para> - <programlisting role="XML"><![CDATA[ ... + <para> It&apos;s possible to insert optional separators between controls. + For this purpose use a <emphasis> + <property>&quot;controlSeparator&quot;</property> + </emphasis> facet. An example is placed below. </para> + <programlisting role="XML"><![CDATA[ ... <f:facet name="controlSeparator"> <h:graphicImage value="/image/sep.png"/> </f:facet> ... ]]></programlisting> - <para> - Starting from 3.2.1 of RichFaces multiple <emphasis role="bold"><property>&lt;rich:datascroller&gt;</property></emphasis> instances behavior and page bindings are corrected. Incorrect page after model changes handling is added. - Phase Listener called before RenderResponce scans the page for the <emphasis role="bold"><property>&lt;rich:datascroller&gt;</property></emphasis> and performs the following operations: - </para> - <itemizedlist> - <listitem> - <para> - Checks if the <emphasis role="bold"><property>&lt;rich:datascroller&gt;</property></emphasis> is rendered. (If the checking generates an exception, the <emphasis role="bold"><property>&lt;rich:datascroller&gt;</property></emphasis> is considered to be not rendered ) - </para> - </listitem> - <listitem> - <para> - If the <emphasis role="bold"><property>&lt;rich:datascroller&gt;</property></emphasis> is rendered - the table to which the <emphasis role="bold"><property>&lt;rich:datascroller&gt;</property></emphasis> is attached gets the value of the page attribute of <emphasis role="bold"><property>&lt;rich:datascroller&gt;</property></emphasis>. - </para> - </listitem> - </itemizedlist> - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find <link linkend="process">here</link>. - </para> - <note> - <title>Note:</title> - <para>Make sure, that all <emphasis role="bold"><property>&lt;rich:datascroller&gt;</property></emphasis> components, defined for a table, have same values for <emphasis><property>&quot;pages&quot;</property></emphasis> attributes. - The page, specified in the last <emphasis><property>&quot;page&quot;</property></emphasis>, will be rendered in browser. - </para> - </note> - </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:datascroller&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:datascroller&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a wrapper element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> + <para> Starting from 3.2.1 of RichFaces multiple <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> instances behavior and page bindings are corrected. + Incorrect page after model changes handling is added. Phase Listener + called before RenderResponce scans the page for the <emphasis + role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> and performs the following operations: </para> + <itemizedlist> + <listitem> + <para> Checks if the <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> is rendered. (If the checking + generates an exception, the <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> is considered to be not rendered ) + </para> + </listitem> + <listitem> + <para> If the <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> is rendered - the table to which the + <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> is attached gets the value of the page + attribute of <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis>. </para> + </listitem> + </itemizedlist> + <para> Information about the <emphasis> + <property>&quot;process&quot;</property> + </emphasis> attribute usage you can find <link linkend="process" + >here</link>. </para> + <note> + <title>Note:</title> + <para>Make sure, that all <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> components, defined for a table, have same + values for all<emphasis> + <property>&quot;page&quot;</property> + </emphasis> attributes. The page, specified in the last <emphasis> + <property>&quot;page&quot;</property> + </emphasis>, will be rendered in browser. </para> + </note> + </section> - <table> - <title>Skin parameters redefinition for a button</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> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> + <section> + <title>Look-and-Feel Customization</title> - <table> - <title>Skin parameters redefinition for an active button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>border-top-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> + <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> - <table> - <title>Skin parameters redefinition for an inactive button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>border-top-color</entry> - </row> - <row> - <entry>headerBackgroundColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - </section> + <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> - <section> - <title>Definition of Custom Style Classes</title> + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> - <para>On the screenshot there are classes names that define styles for component elements.</para> + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/datascroller_cn.png"/> - </imageobject> - </mediaobject> - </figure> + <section> + <title>Skin Parameters Redefinition</title> + <table> + <title>Skin parameters redefinition for a wrapper element</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>tableBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> + </tbody> + </tgroup> + </table> - <table id="tab_cn2"> - <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-datascr</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a datascroller</entry> - </row> - <row> - <entry>rich-dtascroller-table</entry> - <entry>Defines styles for a wrapper table element of a datascroller</entry> - </row> - <row> - <entry>rich-datascr-button</entry> - <entry>Defines styles for a button</entry> - </row> - - <row> - <entry>rich-datascr-ctrls-separator</entry> - <entry>Defines styles for a separator between buttons</entry> - </row> - </tbody> + <table> + <title>Skin parameters redefinition for a button</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> + <row> + <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + </tbody> + </tgroup> + </table> - </tgroup> - </table> - <table> - <title>Classes names that define a buttons appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-datascr-act</entry> - <entry>Defines styles for an active button</entry> - </row> - <row> - <entry>rich-datascr-inact</entry> - <entry>Defines styles for an inactive button</entry> - </row> - <row> - <entry>rich-datascr-button-dsbld</entry> - <entry>Defines styles for a disabled button</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the table <link linkend="tab_cn2">above</link>) and define necessary properties in them. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... + <table> + <title>Skin parameters redefinition for an active button</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalTextColor</entry> + <entry>border-top-color</entry> + </row> + <row> + <entry>generalTextColor</entry> + <entry>color</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for an inactive button</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>headerBackgroundColor</entry> + <entry>border-top-color</entry> + </row> + <row> + <entry>headerBackgroundColor</entry> + <entry>color</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</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>Style classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datascroller_cn.png"/> + </imageobject> + </mediaobject> + </figure> + + <table id="tab_cn2"> + <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-datascr</entry> + <entry>Defines styles for a wrapper + &lt;div&gt; element of + a datascroller</entry> + </row> + <row> + <entry>rich-dtascroller-table</entry> + <entry>Defines styles for a wrapper + table element of a + datascroller</entry> + </row> + <row> + <entry>rich-datascr-button</entry> + <entry>Defines styles for a + button</entry> + </row> + + <row> + <entry>rich-datascr-ctrls-separator</entry> + <entry>Defines styles for a separator + between buttons</entry> + </row> + </tbody> + + </tgroup> + </table> + <table> + <title>Classes names that define a buttons appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-datascr-act</entry> + <entry>Defines styles for an active + button</entry> + </row> + <row> + <entry>rich-datascr-inact</entry> + <entry>Defines styles for an inactive + button</entry> + </row> + <row> + <entry>rich-datascr-button-dsbld</entry> + <entry>Defines styles for a disabled + button</entry> + </row> + </tbody> + </tgroup> + </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to + create classes with the same names (possible classes could be found in + the table <link linkend="tab_cn2">above</link>) and define necessary + properties in them. An example is placed below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .rich-datascr-button{ color: #CD6600; } -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/datascroller_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example an input text font style was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:datascroller&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:datascroller&gt;</property></emphasis> <emphasis role="italic"><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... +...]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with predefined classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datascroller_pc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example an input text font style was changed.</para> + + <para>Also it&apos;s possible to change styles of particular <emphasis + role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> component. In this case you should create own style + classes and use them in corresponding <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> + <emphasis role="italic"> + <property>styleClass</property> + </emphasis> attributes. An example is placed below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .myClass{ background-color: #C6E2FF; } -...]]></programlisting> - <para>The <emphasis role="italic"><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:datascroller&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:datascroller ... selectedStyleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/datascroller_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, background color of the selected cell on scroller was changed.</para> - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTableSc... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:datascroller&gt;</property></emphasis> usage and sources for the given example. </para> - <para> The solution about how to do correct pagination using datascroller (load a part of data from - database) can 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 - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >here</ulink>.</para> - </section> +...]]></programlisting> + <para>The <emphasis role="italic"> + <property>&quot;styleClass&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:datascroller&gt; </property> + </emphasis> is defined as it&apos;s shown in the example below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<rich:datascroller ... selectedStyleClass="myClass"/> +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with own classes and <emphasis> + <property>styleClass</property> + </emphasis> attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datascroller_oc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above, background color of the selected + cell on scroller was changed.</para> + + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTableSc... + >Here</ulink> you can see the example of <emphasis + role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> usage and sources for the given example. </para> + <para> The solution about how to do correct pagination using datascroller (load + a part of data from database) can 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 + url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... + >here</ulink>.</para> + </section> </section> Modified: trunk/docs/userguide/en/src/main/docbook/included/menuItem.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/menuItem.xml 2008-09-30 14:09:06 UTC (rev 10625) +++ trunk/docs/userguide/en/src/main/docbook/included/menuItem.xml 2008-09-30 14:31:29 UTC (rev 10626) @@ -1,53 +1,53 @@ <?xml version="1.0" encoding="UTF-8"?> <section> - <sectioninfo> - <keywordset> - <keyword>rich:menuItem</keyword> - </keywordset> - </sectioninfo> + <sectioninfo> + <keywordset> + <keyword>rich:menuItem</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.MenuItem</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlMenuItem</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DropDownMenu</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.MenuItemRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.MenuItemTag</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.richfaces.MenuItem</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlMenuItem</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.DropDownMenu</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.MenuItemRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.MenuItemTag</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> + <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[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:dropDownMenu> ... <rich:menuItem value="Active"/> @@ -55,91 +55,98 @@ <rich:dropDownMenu> ... ]]></programlisting> - </section> + </section> - <section> - <title>Creating the Component Dynamically Using Java</title> + <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.HtmlMenuItem; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlMenuItem; ... HtmlMenuItem myMenuItem = new HtmlMenuItem(); ... ]]></programlisting> - </section> + </section> - <section> - <title>Details of Usage</title> - <para> The <emphasis> - <property>&quot;value&quot;</property> - </emphasis> attribute defines the text representation for an item element. </para> - <para> There are two icon-related attributes. The <emphasis> - <property>&quot;icon&quot;</property> - </emphasis> attribute defines an icon. The <emphasis> - <property>&quot;iconDisabled&quot;</property> - </emphasis> attribute defines an icon for a disabled item. Also you can use the <emphasis> - <property>&quot;icon&quot;</property> - </emphasis> and <emphasis> - <property>&quot;iconDisabled&quot;</property> - </emphasis> facets. If the facets are defined, the corresponding <emphasis> - <property>&quot;icon&quot;</property> - </emphasis> and <emphasis> - <property>&quot;iconDisabled&quot;</property> - </emphasis> attributes are ignored and the facets content is shown as an icon. It could - be used for an item check box implementation. </para> - <para> Here is an example: </para> - <programlisting role="XML"><![CDATA[... + <section> + <title>Details of Usage</title> + <para> The <emphasis> + <property>&quot;value&quot;</property> + </emphasis> attribute defines the text representation for an item + element. </para> + <para> There are two icon-related attributes. The <emphasis> + <property>&quot;icon&quot;</property> + </emphasis> attribute defines an icon. The <emphasis> + <property>&quot;iconDisabled&quot;</property> + </emphasis> attribute defines an icon for a disabled item. Also you + can use the <emphasis> + <property>&quot;icon&quot;</property> + </emphasis> and <emphasis> + <property>&quot;iconDisabled&quot;</property> + </emphasis> facets. If the facets are defined, the corresponding <emphasis> + <property>&quot;icon&quot;</property> + </emphasis> and <emphasis> + <property>&quot;iconDisabled&quot;</property> + </emphasis> attributes are ignored and the facets content is shown as + an icon. It could be used for an item check box implementation. </para> + <para> Here is an example: </para> + <programlisting role="XML"><![CDATA[... <f:facet name="icon"> <h:selectBooleanCheckbox value="#{bean.property}"/> </f:facet> ... ]]></programlisting> - <para>The <emphasis role="bold"> - <property>&lt;rich:menuItem&gt;</property> - </emphasis> - <emphasis> - <property>&quot;submitMode&quot;</property> - </emphasis> attribute can be set to three possible parameters:</para> + <para>The <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> + <emphasis> + <property>&quot;submitMode&quot;</property> + </emphasis> attribute can be set to three possible parameters:</para> - <itemizedlist> - <listitem> - <para><code>Server</code> (default)</para> - </listitem> - </itemizedlist> + <itemizedlist> + <listitem> + <para><code>Server</code> (default)</para> + </listitem> + </itemizedlist> - <para>Regular form submission request is used.</para> + <para>Regular form submission request is used.</para> - <itemizedlist> - <listitem> - <para><code>Ajax</code></para> - </listitem> - </itemizedlist> + <itemizedlist> + <listitem> + <para> + <code>Ajax</code> + </para> + </listitem> + </itemizedlist> - <para>Ajax submission is used for switching.</para> + <para>Ajax submission is used for switching.</para> - <itemizedlist> - <listitem> - <para><code>None</code></para> - </listitem> - </itemizedlist> + <itemizedlist> + <listitem> + <para> + <code>None</code> + </para> + </listitem> + </itemizedlist> - <para>The <emphasis> - <property>&quot;action&quot;</property> - </emphasis> and <emphasis> - <property>&quot;actionListener&quot;</property> - </emphasis> item&apos;s attributes are ignored. Menu items don&apos; fire any - submits themselves. The behavior is fully defined by the components nested into items.</para> - <para> For example, you can put any content into an item, but, in this case, you should set - the <emphasis> - <property>&quot;mode&quot;</property> - </emphasis> attribute as <emphasis> - <property>&quot;none&quot;</property> - </emphasis>.</para> - <para> Here is an example: </para> - <programlisting role="XML"><![CDATA[... + <para>The <emphasis> + <property>&quot;action&quot;</property> + </emphasis> and <emphasis> + <property>&quot;actionListener&quot;</property> + </emphasis> item&apos;s attributes are ignored. Menu items + don&apos; fire any submits themselves. The behavior is fully + defined by the components nested into items.</para> + <para> For example, you can put any content into an item, but, in this case, you + should set the <emphasis> + <property>&quot;submitMode&quot;</property> + </emphasis> attribute as <emphasis> + <property>&quot;none&quot;</property> + </emphasis>.</para> + <para> Here is an example: </para> + <programlisting role="XML"><![CDATA[... <rich:dropDownMenu> ... <rich:menuItem submitMode="none"> @@ -149,293 +156,327 @@ <rich:dropDownMenu> ... ]]></programlisting> - <para> You can use the <emphasis> - <property>&quot;disabled&quot;</property> - </emphasis> attribute to set the item state. </para> - <para> Here is an example: </para> - <programlisting role="XML"><![CDATA[... + <para> You can use the <emphasis> + <property>&quot;disabled&quot;</property> + </emphasis> attribute to set the item state. </para> + <para> Here is an example: </para> + <programlisting role="XML"><![CDATA[... <rich:dropDownMenu> <rich:menuItem value="Disable" disabled="true"/> <rich:dropDownMenu> ... ]]></programlisting> - <note><title>Note:</title><para> The <emphasis role="bold"> - <property>&lt;rich:menuItem&gt;</property> - </emphasis> component was designed to be used only for pop-up menu list creation.</para></note> - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find <link linkend="process">here</link>. - </para> - </section> + <note> + <title>Note:</title> + <para> The <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> component was designed to be used only for + pop-up menu list creation.</para> + </note> + <para> Information about the <emphasis> + <property>&quot;process&quot;</property> + </emphasis> attribute usage you can find <link linkend="process" + >here</link>. </para> + </section> - <section> - <title>Look-and-Feel Customization</title> + <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 <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> + <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> + <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:menuItem&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> + <listitem> + <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> - <title>Skin parameters redefinition for an item</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> + <section> + <title>Skin Parameters Redefinition</title> + <table> + <title>Skin parameters redefinition for an item</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + </tbody> + </tgroup> + </table> - <table> - <title>Skin parameters redefinition for a hovered item</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tipBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tipBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> + <table> + <title>Skin parameters redefinition for a hovered item</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>tipBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>tipBackgroundColor</entry> + <entry>background-color</entry> + </row> + </tbody> + </tgroup> + </table> - <table> - <title>Skin parameters redefinition for a disabled item</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> + <table> + <title>Skin parameters redefinition for a disabled item</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> - <table> - <title>Skin parameters redefinition for a label</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> - </tbody> - </tgroup> - </table> - </section> + <table> + <title>Skin parameters redefinition for a label</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> + </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/menuItem_cn.png"/> - </imageobject> - </mediaobject> - </figure> - <table id="tab_mI"> - <title>Classes names that define an appearance of item elements</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 a wrapper &lt;div&gt; element for an - item</entry> - </row> - <row> - <entry>rich-menu-item-label</entry> - <entry>Defines styles for a label of an item</entry> - </row> - <row> - <entry>rich-menu-item-icon</entry> - <entry>Defines styles for the left icon of an item</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-menu-item-disabled</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of an - item</entry> - </row> - <row> - <entry>rich-menu-item-enabled</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of an - enabled item</entry> - </row> - <row> - <entry>rich-menu-item-hover</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a hover - item</entry> - </row> + <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/menuItem_cn.png"/> + </imageobject> + </mediaobject> + </figure> + <table id="tab_mI"> + <title>Classes names that define an appearance of item elements</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 a wrapper + &lt;div&gt; element + for an item</entry> + </row> + <row> + <entry>rich-menu-item-label</entry> + <entry>Defines styles for a label of an + item</entry> + </row> + <row> + <entry>rich-menu-item-icon</entry> + <entry>Defines styles for the left icon + of an item</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-menu-item-disabled</entry> + <entry>Defines styles for a wrapper + &lt;div&gt; element of + an item</entry> + </row> + <row> + <entry>rich-menu-item-enabled</entry> + <entry>Defines styles for a wrapper + &lt;div&gt; element of + an enabled item</entry> + </row> + <row> + <entry>rich-menu-item-hover</entry> + <entry>Defines styles for a wrapper + &lt;div&gt; element of + a hover item</entry> + </row> - <row> - <entry>rich-menu-item-label-disabled</entry> - <entry>Defines styles for a label of a disabled item</entry> - </row> - <row> - <entry>rich-menu-item-icon-disabled</entry> - <entry>Defines styles for the left icon of a disabled item</entry> - </row> - <row> - <entry>rich-menu-item-label-enabled</entry> - <entry>Defines styles for a label of an enabled item</entry> - </row> - <row> - <entry>rich-menu-item-icon-enabled</entry> - <entry>Defines styles for the left icon of an enabled item</entry> - </row> - <row> - <entry>rich-menu-item-label-selected</entry> - <entry>Defines styles for a label of a selected item</entry> - </row> - <row> - <entry>rich-menu-item-icon-selected</entry> - <entry>Defines styles for the left icon of a selected item</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:menuItem&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="tab_mI"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... + <row> + <entry>rich-menu-item-label-disabled</entry> + <entry>Defines styles for a label of a + disabled item</entry> + </row> + <row> + <entry>rich-menu-item-icon-disabled</entry> + <entry>Defines styles for the left icon + of a disabled item</entry> + </row> + <row> + <entry>rich-menu-item-label-enabled</entry> + <entry>Defines styles for a label of an + enabled item</entry> + </row> + <row> + <entry>rich-menu-item-icon-enabled</entry> + <entry>Defines styles for the left icon + of an enabled item</entry> + </row> + <row> + <entry>rich-menu-item-label-selected</entry> + <entry>Defines styles for a label of a + selected item</entry> + </row> + <row> + <entry>rich-menu-item-icon-selected</entry> + <entry>Defines styles for the left icon + of a selected item</entry> + </row> + </tbody> + </tgroup> + </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to + create classes with the same names (possible classes could be found in + the tables <link linkend="tab_mI"> above</link>) and define necessary + properties in them. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .rich-menu-item-disabled{ font-style: italic; } -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuItem_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a disabled item font style was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:menuItem&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:menuItem&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... +...]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with predefined classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/menuItem_pc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example a disabled item font style was changed.</para> + + <para>Also it&apos;s possible to change styles of particular <emphasis + role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> component. In this case you should create own style + classes and use them in corresponding <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> + <emphasis> + <property>styleClass</property> + </emphasis> attributes. An example is placed below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .myClass{ border-color: #bed6f8; background-color: #ffffff; } -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:menuItem&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:menuItem ... selectStyle="myClass"> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuItem_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the background color and border color for selected item were changed. </para> - </section> - <section> - <title>Relevant Resources Links</title> - <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:menuItem&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> +...]]></programlisting> + <para>The <emphasis> + <property>&quot;styleClass&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> is defined as it&apos;s shown in the example below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<rich:menuItem ... selectStyle="myClass"> +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with own classes and <emphasis> + <property>styleClass</property> + </emphasis> attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/menuItem_oc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above, the background color and border + color for selected item were changed. </para> + </section> + <section> + <title>Relevant Resources Links</title> + <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:menuItem&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> </section> Modified: trunk/docs/userguide/en/src/main/docbook/included/messages.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/messages.xml 2008-09-30 14:09:06 UTC (rev 10625) +++ trunk/docs/userguide/en/src/main/docbook/included/messages.xml 2008-09-30 14:31:29 UTC (rev 10626) @@ -1,105 +1,155 @@ <?xml version='1.0' encoding='UTF-8'?> <section> - <sectioninfo> - <keywordset> - <keyword>messages</keyword> - <keyword>rich:messages</keyword> - <keyword>HtmlMessages</keyword> - </keywordset> - </sectioninfo> + <sectioninfo> + <keywordset> + <keyword>messages</keyword> + <keyword>rich:messages</keyword> + <keyword>HtmlMessages</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.component.RichMessages</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlRichMessages</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.component.RichMessages</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.renderkit.html.HtmlRichMessagesRendere</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.RichMessagesTag</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.richfaces.component.RichMessages</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlRichMessages</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.component.RichMessages</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.renderkit.html.HtmlRichMessagesRendere</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.RichMessagesTag</entry> + </row> + </tbody> + </tgroup> + </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <property>message</property> on a page, use the - following syntax:</para> + <section> + <title>Creating the Component with a Page Tag</title> + <para>To create the simplest variant of <property>message</property> on a page, + use the following syntax:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:messages/> ... ]]></programlisting> - </section> + </section> - <section> - <title>Creating the Component Dynamically Using Java</title> + <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.HtmlRichMessages; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlRichMessages; ... HtmlRichMessages myMessages = new HtmlRichMessages(); ... ]]></programlisting> - </section> + </section> - <section> - <title>Details of Usage</title> - <para> The component has the same behavior as standard <emphasis role="bold"> - <property>&lt;h:message&gt;</property> - </emphasis>component except next features: <itemizedlist> - <listitem><para>It&apos;s ajaxRendered. It means that the component is reRendered after Ajax - request automatically without outputPanel usage.</para></listitem> - <listitem><para>The component optionally provides &quot;passed&quot; state which will be - shown if no message to be displayed.</para></listitem> - <listitem><para>Provides possibility to add some marker to message. By default, a marker element - isn&apos;t shown.</para></listitem> - </itemizedlist> - </para> - <para>The component provides two parts to be optionally defined: marker and informational label - before the marker for every message.</para> - <para> Set of facet which can be used for a marker defining: <itemizedlist> - <listitem><para><emphasis><property>&quot;passedMarker&quot;</property></emphasis>. This facet is provided to allow setting a marker to be displayed if there is no message.</para></listitem> - <listitem><para><emphasis><property>&quot;errorMarker&quot;</property></emphasis>. This facet is provided to allow setting a marker to be displayed if there is a message with a severity class of &quot;ERROR&quot;.</para></listitem> - <listitem><para><emphasis><property>&quot;fatalMarker&quot;</property></emphasis>. This facet is provided to allow setting a marker to be displayed if there is a message with a severity class of &quot;FATAL&quot;.</para></listitem> - <listitem><para><emphasis><property>&quot;infoMarker&quot;</property></emphasis>. This facet is provided to allow setting a marker to be displayed if there is a message with a severity class of &quot;INFO&quot;.</para></listitem> - <listitem><para><emphasis><property>&quot;warnMarker&quot;</property></emphasis>. This facet is provided to allow setting a marker to be displayed if there is an message with a severity class of &quot;WARN&quot;.</para></listitem> - </itemizedlist> - </para> + <section> + <title>Details of Usage</title> + <para> The component has the same behavior as standard <emphasis role="bold"> + <property>&lt;h:message&gt;</property> + </emphasis>component except next features: <itemizedlist> + <listitem> + <para>It&apos;s ajaxRendered. It means that + the component is reRendered after Ajax + request automatically without + outputPanel usage.</para> + </listitem> + <listitem> + <para>The component optionally provides + &quot;passed&quot; state which + will be shown if no message to be + displayed.</para> + </listitem> + <listitem> + <para>Provides possibility to add some marker to + message. By default, a marker element + isn&apos;t shown.</para> + </listitem> + </itemizedlist> + </para> + <para>The component provides two parts to be optionally defined: marker and + informational label before the marker for every message.</para> + <para> Set of facet which can be used for a marker defining: <itemizedlist> + <listitem> + <para><emphasis> + <property>&quot;passedMarker&quot;</property> + </emphasis>. This facet is provided to + allow setting a marker to be displayed + if there is no message.</para> + </listitem> + <listitem> + <para><emphasis> + <property>&quot;errorMarker&quot;</property> + </emphasis>. This facet is provided to + allow setting a marker to be displayed + if there is a message with a severity + class of + &quot;ERROR&quot;.</para> + </listitem> + <listitem> + <para><emphasis> + <property>&quot;fatalMarker&quot;</property> + </emphasis>. This facet is provided to + allow setting a marker to be displayed + if there is a message with a severity + class of + &quot;FATAL&quot;.</para> + </listitem> + <listitem> + <para><emphasis> + <property>&quot;infoMarker&quot;</property> + </emphasis>. This facet is provided to + allow setting a marker to be displayed + if there is a message with a severity + class of + &quot;INFO&quot;.</para> + </listitem> + <listitem> + <para><emphasis> + <property>&quot;warnMarker&quot;</property> + </emphasis>. This facet is provided to + allow setting a marker to be displayed + if there is an message with a severity + class of + &quot;WARN&quot;.</para> + </listitem> + </itemizedlist> + </para> - <para>The following example shows different variants of customization of the component.</para> + <para>The following example shows different variants of customization of the + component.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <rich:messages layout="table" tooltip="true" showDetail="false" showSummary="true" passedLabel="No Errors" var="messages"> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <rich:messages layout="table" tooltip="true" showDetail="false" showSummary="true" passedLabel="No Errors" <f:facet name="errorMarker"> <h:graphicImage url="/image/error.png"/> </f:facet> @@ -113,146 +163,167 @@ ... ]]></programlisting> - </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>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> + <title>Look-and-Feel Customization</title> - <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/messages_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="tab_msC"> - <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-messages</entry> - - <entry>Defines styles for a wrapper element</entry> - </row> - - <row> - <entry>rich-messages-marker</entry> - - <entry>Defines styles for a marker</entry> - </row> - - <row> - <entry>rich-messages-label</entry> - - <entry>Defines styles for a label</entry> - </row> - - </tbody> - </tgroup> - </table> + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis></para> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:messages&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="tab_msC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... + <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> + <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/messages_cn.png"/> + </imageobject> + </mediaobject> + </figure> + + <table id="tab_msC"> + <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-messages</entry> + + <entry>Defines styles for a wrapper + element</entry> + </row> + + <row> + <entry>rich-messages-marker</entry> + + <entry>Defines styles for a + marker</entry> + </row> + + <row> + <entry>rich-messages-label</entry> + + <entry>Defines styles for a + label</entry> + </row> + + </tbody> + </tgroup> + </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to + create classes with the same names (possible classes could be found in + the tables <link linkend="tab_msC"> above</link>) and define necessary + properties in them. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .rich-messages-label{ font-style:italic; } -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/messages_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font style for messages was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:messages&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:messages&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... +...]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with predefined classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/messages_pc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example the font style for messages was changed.</para> + + <para>Also it&apos;s possible to change styles of particular <emphasis + role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis> component. In this case you should create own style + classes and use them in corresponding <emphasis role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis> + <emphasis> + <property>styleClass</property> + </emphasis> attributes. An example is placed below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .myClass{ color:red; } -...]]></programlisting> - <para>The <emphasis><property>&quot;errorClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:messages&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:messages ... errorClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/messages_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, color of messages was changed.</para> - - - - </section> - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/messsages.j... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:messages&gt;</property></emphasis> usage and sources for the given example. </para> - </section> +...]]></programlisting> + <para>The <emphasis> + <property>&quot;errorClass&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis> is defined as it&apos;s shown in the example below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<rich:messages ... errorClass="myClass"/> +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with own classes and <emphasis> + <property>styleClass</property> + </emphasis> attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/messages_oc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above, color of messages was changed.</para> + + + + </section> + <section> + <title>Relevant Resources Links</title> + <para><ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/messsages.j... + >Here</ulink> you can see the example of <emphasis + role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> </section> Modified: trunk/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml 2008-09-30 14:09:06 UTC (rev 10625) +++ trunk/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml 2008-09-30 14:31:29 UTC (rev 10626) @@ -1,138 +1,143 @@ <?xml version="1.0" encoding="UTF-8"?> <section> - <sectioninfo> - <keywordset> - <keyword>rich:panelMenuItem</keyword> - </keywordset> - </sectioninfo> + <sectioninfo> + <keywordset> + <keyword>rich:panelMenuItem</keyword> + </keywordset> + </sectioninfo> - <table> - <title>Component identification parameters</title> + <table> + <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> + <entry>Value</entry> + </row> + </thead> - <tbody> - <row> - <entry>component-type</entry> + <tbody> + <row> + <entry>component-type</entry> - <entry>org.richfaces.PanelMenuItem</entry> - </row> + <entry>org.richfaces.PanelMenuItem</entry> + </row> - <row> - <entry>component-class</entry> + <row> + <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlPanelMenuItem</entry> - </row> + <entry>org.richfaces.component.html.HtmlPanelMenuItem</entry> + </row> - <row> - <entry>component-family</entry> + <row> + <entry>component-family</entry> - <entry>org.richfaces.PanelMenuItem</entry> - </row> + <entry>org.richfaces.PanelMenuItem</entry> + </row> - <row> - <entry>renderer-type</entry> + <row> + <entry>renderer-type</entry> - <entry>org.richfaces.PanelMenuItemRenderer</entry> - </row> + <entry>org.richfaces.PanelMenuItemRenderer</entry> + </row> - <row> - <entry>tag-class</entry> + <row> + <entry>tag-class</entry> - <entry>org.richfaces.taglib.PanelMenuItemTag</entry> - </row> - </tbody> - </tgroup> - </table> + <entry>org.richfaces.taglib.PanelMenuItemTag</entry> + </row> + </tbody> + </tgroup> + </table> - <section> - <title>Creating the Component with a Page Tag</title> + <section> + <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> + <para>To create the simplest variant on a page use the following syntax:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:panelMenu> ... <rich:panelMenuItem value="Item1"/> ... </rich:panelMenu> ...]]></programlisting> - </section> + </section> - <section> - <title>Creating the Component Dynamically Using Java</title> + <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.HtmlPanelMenuItem; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPanelMenuItem; ... HtmlPanelMenuItem myPanelMenuItem = new HtmlPanelMenuItem(); ... ]]></programlisting> - </section> + </section> - <section> - <title>Details of Usage</title> + <section> + <title>Details of Usage</title> - <para>All attributes except <emphasis> - <property>&quot;label&quot;</property> - </emphasis> are optional. The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute defines text to be represented.</para> - <para>The <emphasis> - <property>&quot;mode&quot;</property> - </emphasis> attribute could be used with three possible parameters:</para> + <para>All attributes except <emphasis> + <property>&quot;label&quot;</property> + </emphasis> are optional. The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute defines text to be represented.</para> + <para>The <emphasis> + <property>&quot;mode&quot;</property> + </emphasis> attribute could be used with three possible parameters:</para> - <itemizedlist> - <listitem> - <para><code>Server</code> (default)</para> - </listitem> - </itemizedlist> + <itemizedlist> + <listitem> + <para><code>Server</code> (default)</para> + </listitem> + </itemizedlist> - <para>Regular form submission request is used.</para> + <para>Regular form submission request is used.</para> - <itemizedlist> - <listitem> - <para><code>Ajax</code></para> - </listitem> - </itemizedlist> + <itemizedlist> + <listitem> + <para> + <code>Ajax</code> + </para> + </listitem> + </itemizedlist> - <para>Ajax submission is used for switching.</para> + <para>Ajax submission is used for switching.</para> - <itemizedlist> - <listitem> - <para><code>None</code></para> - </listitem> - </itemizedlist> + <itemizedlist> + <listitem> + <para> + <code>None</code> + </para> + </listitem> + </itemizedlist> - <para><emphasis> - <property>&quot;Action&quot;</property> - </emphasis> and <emphasis> - <property>&quot;actionListener&quot;</property> - </emphasis> attributes are ignored. Items don&apos;t fire any submits itself. Behavior is - fully defined by the components nested into items.</para> + <para><emphasis> + <property>&quot;Action&quot;</property> + </emphasis> and <emphasis> + <property>&quot;actionListener&quot;</property> + </emphasis> attributes are ignored. Items don&apos;t fire any + submits itself. Behavior is fully defined by the components nested + into items.</para> - <para>Here is an example for value &quot;none&quot;:</para> + <para>Here is an example for value &quot;none&quot;:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:panelMenu> ... - <rich:panelMenuItem submitMode="none" onclick="document.location.href='http://labs.jboss.com/jbossrich... + <rich:panelMenuItem mode="none" onclick="document.location.href='http://labs.jboss.com/jbossrich... <h:outputLink value="http://labs.jboss.com/jbossrichfaces/"> <h:outputText value="RichFaces Home Page"></h:outputText> </h:outputLink> @@ -141,63 +146,67 @@ </rich:panelMenu> ...]]></programlisting> - <para>There are two icon-related attributes. The <emphasis> - <property>&quot;icon&quot;</property> - </emphasis> attribute defines an icon. The <emphasis> - <property>&quot;iconDisabled&quot;</property> - </emphasis> attribute defines an icon for a disabled item.</para> + <para>There are two icon-related attributes. The <emphasis> + <property>&quot;icon&quot;</property> + </emphasis> attribute defines an icon. The <emphasis> + <property>&quot;iconDisabled&quot;</property> + </emphasis> attribute defines an icon for a disabled item.</para> - <para>Default icons are shown on the picture below:</para> + <para>Default icons are shown on the picture below:</para> - <figure> - <title>Default icons</title> + <figure> + <title>Default icons</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuItem2.png"/> - </imageobject> - </mediaobject> - </figure> + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenuItem2.png"/> + </imageobject> + </mediaobject> + </figure> - <para>Here is an example:</para> + <para>Here is an example:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:panelMenu> ... - <rich:panelMenuItem ="Item 1.1" icon="chevronUp" /> + <rich:panelMenuItem value="Item 1.1" icon="chevronUp" /> ... </rich:panelMenu> ...]]></programlisting> - <para> As the result the picture is shown below:</para> + <para> As the result the picture is shown below:</para> - <figure> - <title>Using an <emphasis><property>&quot;icon&quot;</property></emphasis> attribute</title> + <figure> + <title>Using an <emphasis> + <property>&quot;icon&quot;</property> + </emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuItem3.png"/> - </imageobject> - </mediaobject> - </figure> + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenuItem3.png"/> + </imageobject> + </mediaobject> + </figure> - <para>It&apos;s also possible to define a path to the icon. Simple code is placed below.</para> + <para>It&apos;s also possible to define a path to the icon. Simple code is + placed below.</para> - <programlisting role="XML"><![CDATA[... + <programlisting role="XML"><![CDATA[... <rich:panelMenu> ... - <rich:panelMenuItem ="Item 1.1" icon="\images\img1.png" /> + <rich:panelMenuItem value="Item 1.1" icon="\images\img1.png" /> ... </rich:panelMenu> ...]]></programlisting> - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find <link linkend="process">here</link>. - </para> - </section> + <para> Information about the <emphasis> + <property>&quot;process&quot;</property> + </emphasis> attribute usage you can find <link linkend="process" + >here</link>. </para> + </section> - <!--section> + <!--section> <title>JavaScript API</title> <para>In Java Script code for expanding/collapsing group element creation it&apos;s necessary to use doExpand()/doCollapse() function.</para> @@ -233,299 +242,325 @@ </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: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 <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:panelMenuItem&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> + <section> + <title>Look-and-Feel Customization</title> - <section> - <title> Skin Parameters Redefinition</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> - <table> - <title>Skin parameters redefinition for a table element of the first level item</title> + <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> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> - <entry>CSS properties</entry> - </row> - </thead> + <listitem> + <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> - <tbody> - <row> - <entry>generalFamilyFont</entry> + <section> + <title> Skin Parameters Redefinition</title> - <entry>font-family</entry> - </row> + <table> + <title>Skin parameters redefinition for a table element of the first + level item</title> - <row> - <entry>generalWeightFont</entry> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> - <entry>font-weight</entry> - </row> + <entry>CSS properties</entry> + </row> + </thead> - <row> - <entry>generalSizeFont</entry> + <tbody> + <row> + <entry>generalFamilyFont</entry> - <entry>font-size</entry> - </row> + <entry>font-family</entry> + </row> - <row> - <entry>generalTextColor</entry> + <row> + <entry>generalWeightFont</entry> - <entry>color</entry> - </row> + <entry>font-weight</entry> + </row> - <row> - <entry>panelBorderColor</entry> + <row> + <entry>generalSizeFont</entry> - <entry>border-top-color</entry> - </row> - </tbody> - </tgroup> - </table> + <entry>font-size</entry> + </row> - <table> - <title>Skin parameter redefinition for a disabled item </title> + <row> + <entry>generalTextColor</entry> - <tgroup cols="2"> - <thead> - <row> - <entry>Parameter for disabled item</entry> + <entry>color</entry> + </row> - <entry>CSS properties</entry> - </row> - </thead> + <row> + <entry>panelBorderColor</entry> - <tbody> - <row> - <entry>tabDisabledTextColor</entry> + <entry>border-top-color</entry> + </row> + </tbody> + </tgroup> + </table> - <entry>color</entry> - </row> + <table> + <title>Skin parameter redefinition for a disabled item </title> - </tbody> - </tgroup> - </table> + <tgroup cols="2"> + <thead> + <row> + <entry>Parameter for disabled item</entry> - </section> + <entry>CSS properties</entry> + </row> + </thead> - <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/panelMenuItem_cn.png"></imagedata> - </imageobject> - </mediaobject> - </figure> - <figure> - <title>Classes names</title> + <tbody> + <row> + <entry>tabDisabledTextColor</entry> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuItem_cn2.png"/> - </imageobject> - </mediaobject> - </figure> + <entry>color</entry> + </row> - <table id="tab_cn_pMI"> - <title>Classes names that define the first level items</title> + </tbody> + </tgroup> + </table> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> + </section> - <entry>Description</entry> - </row> - </thead> + <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/panelMenuItem_cn.png"/> + </imageobject> + </mediaobject> + </figure> + <figure> + <title>Classes names</title> - <tbody> - <row> - <entry>rich-pmenu-top-item</entry> + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenuItem_cn2.png" + /> + </imageobject> + </mediaobject> + </figure> - <entry>Defines styles for a top panel menu item</entry> - </row> + <table id="tab_cn_pMI"> + <title>Classes names that define the first level items</title> - <row> - <entry>rich-pmenu-top-item-icon</entry> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> - <entry>Defines styles for a top panel menu item icon</entry> - </row> + <entry>Description</entry> + </row> + </thead> - <row> - <entry>rich-pmenu-top-item-label</entry> + <tbody> + <row> + <entry>rich-pmenu-top-item</entry> - <entry>Defines styles for a top panel menu item label</entry> - </row> + <entry>Defines styles for a top panel + menu item</entry> + </row> - </tbody> - </tgroup> - </table> + <row> + <entry>rich-pmenu-top-item-icon</entry> - <table> - <title>Classes names that define the second and lower level items</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-pmenu-item</entry> - - <entry>Defines styles for a panel menu item</entry> - </row> - - <row> - <entry>rich-pmenu-item-icon</entry> - - <entry>Defines styles for a panel menu item icon</entry> - </row> - - <row> - <entry>rich-pmenu-item-label</entry> - - <entry>Defines styles for a panel menu item label</entry> - </row> - - </tbody> - </tgroup> - </table> + <entry>Defines styles for a top panel + menu item icon</entry> + </row> - <table> - <title>Classes names that define items state</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-pmenu-item-selected</entry> - - <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> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:panelMenuItem&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="tab_cn_pMI"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... + <row> + <entry>rich-pmenu-top-item-label</entry> + + <entry>Defines styles for a top panel + menu item label</entry> + </row> + + </tbody> + </tgroup> + </table> + + <table> + <title>Classes names that define the second and lower level items</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-pmenu-item</entry> + + <entry>Defines styles for a panel menu + item</entry> + </row> + + <row> + <entry>rich-pmenu-item-icon</entry> + + <entry>Defines styles for a panel menu + item icon</entry> + </row> + + <row> + <entry>rich-pmenu-item-label</entry> + + <entry>Defines styles for a panel menu + item label</entry> + </row> + + </tbody> + </tgroup> + </table> + + <table> + <title>Classes names that define items state</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-pmenu-item-selected</entry> + + <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> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:panelMenuItem&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to + create classes with the same names (possible classes could be found in + the tables <link linkend="tab_cn_pMI"> above</link>) and define + necessary properties in them. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .rich-pmenu-hovered-element { background-color: #ff7800; } -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuItem_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a hovered element background color was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:panelMenuItem&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:panelMenuItem&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... +...]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with predefined classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenuItem_pc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example a hovered element background color was changed.</para> + + <para>Also it&apos;s possible to change styles of particular <emphasis + role="bold"> + <property>&lt;rich:panelMenuItem&gt;</property> + </emphasis> component. In this case you should create own style + classes and use them in corresponding <emphasis role="bold"> + <property>&lt;rich:panelMenuItem&gt;</property> + </emphasis> + <emphasis> + <property>styleClass</property> + </emphasis> attributes. An example is placed below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .myClass { color: #a0a0a0; } -...]]></programlisting> - <para>The <emphasis><property>&quot;disabledClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:panelMenuItem&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:panelMenuItem ... disabledClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuItem_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the text color for disabled item was changed.</para> - </section> - <section> - <title>Relevant resources links</title> - <para> - Some additional information about usage of component can be found - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelMenu.j...;. - </para> - </section> +...]]></programlisting> + <para>The <emphasis> + <property>&quot;disabledClass&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:panelMenuItem&gt;</property> + </emphasis> is defined as it&apos;s shown in the example below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<rich:panelMenuItem ... disabledClass="myClass"/> +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with own classes and <emphasis> + <property>styleClass</property> + </emphasis> attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenuItem_oc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above, the text color for disabled item + was changed.</para> + </section> + <section> + <title>Relevant resources links</title> + <para> Some additional information about usage of component can be found <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelMenu.j... + >here</ulink>. </para> + </section> </section> Modified: trunk/docs/userguide/en/src/main/docbook/included/support.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/support.xml 2008-09-30 14:09:06 UTC (rev 10625) +++ trunk/docs/userguide/en/src/main/docbook/included/support.xml 2008-09-30 14:31:29 UTC (rev 10626) @@ -211,7 +211,7 @@ interval in seconds minimally permissible between responses. </para> <para><emphasis> - <property>&quot;eventsQueue&quot;</property> + <property>&quot;eventQueue&quot;</property> </emphasis> is an attribute for naming of the queue where the next response is kept in till its processing, but if the next event comes in till