Author: atsebro Date: 2008-09-30 04:29:23 -0400 (Tue, 30 Sep 2008) New Revision: 10613 Modified: trunk/docs/userguide/en/src/main/docbook/included/columns.xml trunk/docs/userguide/en/src/main/docbook/included/form.xml trunk/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.desc.xml trunk/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml trunk/docs/userguide/en/src/main/docbook/included/modalPanel.xml trunk/docs/userguide/en/src/main/docbook/included/repeat.xml trunk/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml trunk/docs/userguide/en/src/main/docbook/included/suggestionbox.xml trunk/docs/userguide/en/src/main/docbook/included/support.xml trunk/docs/userguide/en/src/main/docbook/included/tabPanel.xml trunk/docs/userguide/en/src/main/docbook/included/togglePanel.xml Log: RF-3560: Style class attributes Modified: trunk/docs/userguide/en/src/main/docbook/included/columns.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/columns.xml 2008-09-30 06:32:42 UTC (rev 10612) +++ trunk/docs/userguide/en/src/main/docbook/included/columns.xml 2008-09-30 08:29:23 UTC (rev 10613) @@ -105,7 +105,7 @@ <property>&quot;columns&quot;</property> </emphasis> attribute defines the count of columns. </para> <para> The <emphasis> - <property>&quot;rows&quot;</property> + <property>&quot;rowspan&quot;</property> </emphasis> attribute defines the number of rows to be displayed. If the value of this attribute is zero, all remaining rows in the table are displayed on a page. </para> @@ -123,7 +123,7 @@ </para> <programlisting role="XML"><![CDATA[... <rich:dataTable value="#{capitalsBean.capitals}" var="cap"> - <rich:columns value="#{capitalsBean.labels}" var="col" index="index" rows="0" columns="3" begin="1" end="2"> + <rich:columns value="#{capitalsBean.labels}" var="col" index="index" rowspan="0" columns="3" begin="1" end="2"> <f:facet name="header"> <h:outputText value="#{col.text}" /> </f:facet> @@ -247,18 +247,24 @@ </figure--> <note> <title>Note:</title> - <para> - The <emphasis role="bold"><property>&lt;rich:columns&gt;</property></emphasis> tag is initialized during components tree building process. - This process precedes page rendering at &quot;Render Response&quot; JSF phase. - To be rendered properly the component needs all it variables to be initialized while the components tree is being building. - A <emphasis>javax.servlet.jsp.JspTagException</emphasis> occurs if <emphasis role="bold"><property>&lt;rich:columns&gt;</property></emphasis> uses variables passed from other components, if these variables are initialized during rendering. - Thus, when <emphasis role="bold"><property>&lt;rich:columns&gt;</property></emphasis> is asking for such variables they do not already exist. - Use <property>&lt;c:forEach&gt;</property> JSP standard tag as workaround. - Compare two examples below. - </para> - <para> - This code calls the exception: - </para> + <para> The <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> tag is initialized during components tree + building process. This process precedes page rendering at + &quot;Render Response&quot; JSF phase. To be + rendered properly the component needs all it variables to be + initialized while the components tree is being building. A + <emphasis>javax.servlet.jsp.JspTagException</emphasis> + occurs if <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> uses variables passed from other components, if + these variables are initialized during rendering. Thus, when + <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> is asking for such variables they do not already + exist. Use <property>&lt;c:forEach&gt;</property> + JSP standard tag as workaround. Compare two examples below. </para> + <para> This code calls the exception: </para> <programlisting role="XML"><![CDATA[... <rich:dataTable value="#{bean.data}" var="var"> <rich:columns value="#{var.columns}"> @@ -267,9 +273,7 @@ </rich:dataTable> ... ]]></programlisting> - <para> - This code works properly: - </para> + <para> This code works properly: </para> <programlisting role="XML"><![CDATA[... <c:forEach items="#{bean.data}" var="var"> <rich:columns value="#{var.columns}"> @@ -279,8 +283,8 @@ ... ]]></programlisting> </note> - - + + <para> Information about sorting and filtering you can find <link linkend="sortAndFilter">here</link> . </para> Modified: trunk/docs/userguide/en/src/main/docbook/included/form.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/form.xml 2008-09-30 06:32:42 UTC (rev 10612) +++ trunk/docs/userguide/en/src/main/docbook/included/form.xml 2008-09-30 08:29:23 UTC (rev 10613) @@ -1,79 +1,91 @@ <?xml version='1.0' encoding='UTF-8'?> <chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:form</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Form</entry> - </row> - <row> - <entry>component-family</entry> - <entry>javax.faces.Form</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.AjaxForm</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.FormRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating on a page</title> - <para>Component definition on a page is similar to definition of the original component from JSF HTML library. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:form> + <chapterinfo> + <keywordset> + <keyword>a4j:form</keyword> + </keywordset> + </chapterinfo> + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Form</entry> + </row> + <row> + <entry>component-family</entry> + <entry>javax.faces.Form</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.AjaxForm</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.FormRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + + <section> + <title>Creating on a page</title> + <para>Component definition on a page is similar to definition of the original + component from JSF HTML library. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<a4j:form> <h:panelGrid> <h:commandButton value="Button" action="#{userBean.nameItMark}" /> </h:panelGrid> </a4j:form> ]]></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.ajax4jsf.component.html.AjaxForm; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.AjaxForm; ... AjaxForm myForm = new AjaxForm(); ...]]></programlisting> - </section> - <section> - <title>Key attributes and ways of usage</title> - <para>The difference with the original component is that all hidden fields required for command links are always rendered and it doesn't depend on links rendering on the initial page. It solves the problem with invalid links that weren't rendered on a page immediately, but after some Ajax request.</para> - <para>Beginning with release 1.0.5 additional attributes that make this form variant universal have appeared. - </para> - <para> - If <emphasis><property>&quot;ajaxSubmit&quot;</property></emphasis> attribute is true, - it becomes possible to set Ajax submission way for any components inside, - i.e. not a page URL is used as an <emphasis><property>&quot;action&quot;</property></emphasis> attribute, but the javascript: <code>A4J.AJAX.Submit(...)</code>call. - In this case, the <emphasis><property>&quot;reRender&quot;</property></emphasis> attribute contains a list of Ids of components defined for re-rendering. - If you have <emphasis role="bold"><property>&lt;h:commandButton&gt;</property></emphasis> or - <emphasis role="bold"><property>&lt;h:commandLink&gt;</property></emphasis> inside the form, they work as <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis>. - </para> - <para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[<a4j:form id="helloForm" ajaxSubmit="true" reRender="table"> + </section> + <section> + <title>Key attributes and ways of usage</title> + <para>The difference with the original component is that all hidden fields + required for command links are always rendered and it doesn't depend + on links rendering on the initial page. It solves the problem with + invalid links that weren't rendered on a page immediately, but after + some Ajax request.</para> + <para>Beginning with release 1.0.5 additional attributes that make this form + variant universal have appeared. </para> + <para> If <emphasis><property>&quot;ajaxSubmit&quot;</property> + </emphasis> attribute is true, it becomes possible to set Ajax + submission way for any components inside with the help of the javascript + <code>A4J.AJAX.Submit(...)</code>call. In this case, the <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute contains a list of Ids of components defined for + re-rendering. If you have <emphasis role="bold"> + <property>&lt;h:commandButton&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;h:commandLink&gt;</property> + </emphasis> inside the form, they work as <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis>. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<a4j:form id="helloForm" ajaxSubmit="true" reRender="table"> ... <t:dataTable id="table"... > ... @@ -85,33 +97,44 @@ ... </a4j:form ]]></programlisting> -<para>This example shows that in order to make <emphasis role="bold"> - <property>&lt;t:datascroller&gt;</property> - </emphasis> submissions to be Ajax ones it&apos;s required only to place this <emphasis role="bold"> - <property>&lt;t:datascroller&gt;</property> - </emphasis> into <emphasis role="bold"> - <property>&lt;a4j:form&gt;</property> - </emphasis>. In the other case it is necessary to redefine renders for its child links elements that are defined as <emphasis role="bold"> - <property>&lt;h:commandLink&gt;</property> - </emphasis> and can't be made Ajax ones with using e.g. <emphasis role="bold"> - <property>&lt;a4j:support&gt;</property> - </emphasis>. -</para> - <para> - With the help of <emphasis><property>&quot;limitToList&quot;</property></emphasis> attribute you can limit areas, which are updated after the responses. - If <emphasis><property>&quot;limitToList&quot;</property></emphasis> is true, only the reRender attribute is taken in account. - Therefore, if you use blocks of text wrapped with <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> and <code>ajaxRendered= &quot;true&quot;</code>, blocks of text are ignored. - </para> - <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>Relevant resources links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/form.jsf?c=... - you can see the example of <emphasis role="bold" - ><property>&lt;a4j:form&gt;</property></emphasis> usage and sources for the given example. - </para> - </section> + <para>This example shows that in order to make <emphasis role="bold"> + <property>&lt;t:datascroller&gt;</property> + </emphasis> submissions to be Ajax ones it&apos;s required only to + place this <emphasis role="bold"> + <property>&lt;t:datascroller&gt;</property> + </emphasis> into <emphasis role="bold"> + <property>&lt;a4j:form&gt;</property> + </emphasis>. In the other case it is necessary to redefine renders for + its child links elements that are defined as <emphasis role="bold"> + <property>&lt;h:commandLink&gt;</property> + </emphasis> and can't be made Ajax ones with using e.g. <emphasis + role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis>. </para> + <para> With the help of <emphasis> + <property>&quot;limitToList&quot;</property> + </emphasis> attribute you can limit areas, which are updated after the + responses. If <emphasis> + <property>&quot;limitToList&quot;</property> + </emphasis> is true, only the reRender attribute is taken in account. + Therefore, if you use blocks of text wrapped with <emphasis + role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis> and <code>ajaxRendered= &quot;true&quot;</code>, + blocks of text are ignored. </para> + <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>Relevant resources links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/form.jsf?c=... + >Here</ulink> you can see the example of <emphasis + role="bold"> + <property>&lt;a4j:form&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> </chapter> Modified: trunk/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.desc.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.desc.xml 2008-09-30 06:32:42 UTC (rev 10612) +++ trunk/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.desc.xml 2008-09-30 08:29:23 UTC (rev 10613) @@ -1,38 +1,64 @@ <?xml version="1.0" encoding="UTF-8"?> <section> -<sectioninfo> -<keywordset> - <keyword>rich:inputNumberSpinner</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>A single line input field that lets selecting a number using controls near a text field. - It&apos;s possible to change a value using &quot;Up/Down&quot; keyboard keys. The - keyboard input in a field is possible if it isn&apos;t locked by the - <emphasis ><property>&quot;manualInput&quot;</property></emphasis> - attribute. When arrow - controls are pressed, the cursor can be moved in any way without losing a dragged state.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:inputNumberSpinner&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inputNumberSpinner_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Fully skinnable control and input elements</para></listitem> - <listitem><para>3D look and feel with an easily customizable appearance</para></listitem> - <listitem><para>Attribute-managed positions of the controls (inside/outside of the input field)</para></listitem> - <listitem><para>Keyboard controls support</para></listitem> - <listitem><para>Optional disablement of the component on a page</para></listitem> - <listitem><para>Optional <emphasis><property>&quot;cycled&quot;</property></emphasis> mode of scrolling values</para></listitem> - <listitem><para>Optional manual/controls-only input into a value text field</para></listitem> - <listitem><para>Validation of manual input</para></listitem> - </itemizedlist> + <sectioninfo> + <keywordset> + <keyword>rich:inputNumberSpinner</keyword> + </keywordset> + </sectioninfo> + <section> + <title>Description</title> + <para>A single line input field that lets selecting a number using controls near + a text field. It&apos;s possible to change a value using + &quot;Up/Down&quot; keyboard keys. The keyboard input in a + field is possible if it isn&apos;t locked by the <emphasis> + <property>&quot;enableManualInput&quot;</property> + </emphasis> attribute. When arrow controls are pressed, the cursor can + be moved in any way without losing a dragged state.</para> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:inputNumberSpinner&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/inputNumberSpinner_init.png" + /> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Fully skinnable control and input elements</para> + </listitem> + <listitem> + <para>3D look and feel with an easily customizable + appearance</para> + </listitem> + <listitem> + <para>Attribute-managed positions of the controls + (inside/outside of the input field)</para> + </listitem> + <listitem> + <para>Keyboard controls support</para> + </listitem> + <listitem> + <para>Optional disablement of the component on a page</para> + </listitem> + <listitem> + <para>Optional <emphasis> + <property>&quot;cycled&quot;</property> + </emphasis> mode of scrolling values</para> + </listitem> + <listitem> + <para>Optional manual/controls-only input into a value text + field</para> + </listitem> + <listitem> + <para>Validation of manual input</para> + </listitem> + </itemizedlist> + </section> </section> -</section> \ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml 2008-09-30 06:32:42 UTC (rev 10612) +++ trunk/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml 2008-09-30 08:29:23 UTC (rev 10613) @@ -1,490 +1,432 @@ <?xml version='1.0' encoding='UTF-8'?> <section> - <sectioninfo> - <keywordset> - <keyword>input field</keyword> - <keyword>rich:inputNumberSpinner</keyword> - <keyword>HtmlInputNumberSpinner</keyword> - </keywordset> - </sectioninfo> + <sectioninfo> + <keywordset> + <keyword>input field</keyword> + <keyword>rich:inputNumberSpinner</keyword> + <keyword>HtmlInputNumberSpinner</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.inputNumberSpinner</entry> - </row> - <row> - <entry>component-class</entry> - <entry> - org.richfaces.component.html.HtmlInputNumberSpinner - </entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.inputNumberSpinner</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry> - org.richfaces.InputNumberSpinnerRenderer - </entry> - </row> - <row> - <entry>tag-class</entry> - <entry> - org.richfaces.taglib.InputNumberSpinnerTag - </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.inputNumberSpinner</entry> + </row> + <row> + <entry>component-class</entry> + <entry> + org.richfaces.component.html.HtmlInputNumberSpinner + </entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.inputNumberSpinner</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry> org.richfaces.InputNumberSpinnerRenderer + </entry> + </row> + <row> + <entry>tag-class</entry> + <entry> org.richfaces.taglib.InputNumberSpinnerTag + </entry> + </row> + </tbody> + </tgroup> + </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant on a page use the following - syntax: - </para> + <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> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:inputNumberSpinner minValue="0" maxValue="100" step="1"/> ... ]]></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.HtmlInputNumberSpinner; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlInputNumberSpinner; ... HtmlInputNumberSpinner mySpinner = new HtmlInputNumberSpinner (); ... ]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para> - <emphasis role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> - is used to facilitate your data input with rich UI Controls. - </para> - <para> - Here is the simplest variant of - <property>spinner</property> - definition with - <emphasis> - <property>&quot;minValue&quot;</property> - , - </emphasis> - <emphasis> - <property>&quot;maxValue&quot;</property> - </emphasis> - and - <emphasis> - <property>&quot;step&quot;</property> - </emphasis> - (on default is &quot;1&quot;) attributes, which define the - beginning and the end of numerical area and a - <property>spinner</property> - step. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + </section> + <section> + <title>Details of Usage</title> + <para> + <emphasis role="bold"> + <property>&lt;rich:inputNumberSpinner&gt;</property> + </emphasis> is used to facilitate your data input with rich UI + Controls. </para> + <para> Here is the simplest variant of <property>spinner</property> definition + with <emphasis> + <property>&quot;minValue&quot;</property> , </emphasis> + <emphasis> + <property>&quot;maxValue&quot;</property> + </emphasis> and <emphasis> + <property>&quot;step&quot;</property> + </emphasis> (on default is &quot;1&quot;) attributes, which + define the beginning and the end of numerical area and a + <property>spinner</property> step. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:inputNumberSpinner minValue="1" maxValue="100"/> ... ]]></programlisting> - <para>It generates on a page:</para> - <figure> - <title> - Generated - <emphasis role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inputNumberSpinner2.png" /> - </imageobject> - </mediaobject> - </figure> - <para> - There are also several attributes to define functionality - peculiarities: - </para> - <itemizedlist> - <listitem> - <para> - <emphasis> - <property>&quot;cycled&quot;</property> - </emphasis> - if the attribute is - &quot;true&quot; - after the current value reaches the border value - it&apos;s be reversed to another border value after next - increasing/decreasing. In other case possibilities - of next increasing/decreasing are locked - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;disabled&quot;</property> - </emphasis> - is an attribute that defines whether a component is - active on a page - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;manualInput&quot;</property> - </emphasis> - is an attribute that defines whether a keyboard - input is possible or only UI controls could be used - </para> - </listitem> - </itemizedlist> - <para> - Moreover, to add e.g. some JavaScript effects, events - defined on it are used - </para> - <itemizedlist> - <listitem> - <para><emphasis><property>&quot;onchange&quot;</property></emphasis></para> - </listitem> - <listitem> - <para><emphasis><property>&quot;onmouseover&quot;</property></emphasis></para> - </listitem> - <listitem> - <para><emphasis><property>&quot;onclick&quot;</property></emphasis></para> - </listitem> - <listitem> - <para><emphasis><property>&quot;onfocus&quot;</property></emphasis></para> - </listitem> - <listitem> - <para><emphasis><property>&quot;onmouseout&quot;</property></emphasis></para> - </listitem> - <listitem> - <para>etc.</para> - </listitem> - </itemizedlist> - <para> - The - <emphasis> - <property>&quot;label&quot;</property> - </emphasis> - attribute is a generic attribute. The - <emphasis> - <property>&quot;label&quot;</property> - </emphasis> - attribute provides an association between a component, and - the message that the component (indirectly) produced. This - attribute defines the parameters of localized error and - informational messages that occur as a result of conversion, - validation, or other application actions during the request - processing lifecycle. With the help of this attribute you - can replace the last parameter substitution token shown in - the messages. For example, {1} for - <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code> - , {2} for - <code>&quot;ShortConverter.SHORT&quot;</code> - . - </para> - </section> - <section> - <title>Look-and-Feel Customization</title> + <para>It generates on a page:</para> + <figure> + <title> Generated <emphasis role="bold"> + <property>&lt;rich:inputNumberSpinner&gt;</property> + </emphasis> + </title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/inputNumberSpinner2.png" + /> + </imageobject> + </mediaobject> + </figure> + <para> There are also several attributes to define functionality peculiarities: </para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>&quot;cycled&quot;</property> + </emphasis> if the attribute is + &quot;true&quot; after the current value + reaches the border value it&apos;s be reversed + to another border value after next + increasing/decreasing. In other case possibilities + of next increasing/decreasing are locked </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>&quot;disabled&quot;</property> + </emphasis> is an attribute that defines whether a + component is active on a page </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>&quot;enableManualInput&quot;</property> + </emphasis> is an attribute that defines whether a + keyboard input is possible or only UI controls + could be used </para> + </listitem> + </itemizedlist> + <para> Moreover, to add e.g. some JavaScript effects, events defined on it are + used </para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>&quot;onchange&quot;</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>&quot;onmouseover&quot;</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>&quot;onclick&quot;</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>&quot;onfocus&quot;</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>&quot;onmouseout&quot;</property> + </emphasis> + </para> + </listitem> + <listitem> + <para>etc.</para> + </listitem> + </itemizedlist> + <para> The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute is a generic attribute. The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute provides an association between a component, and + the message that the component (indirectly) produced. This attribute + defines the parameters of localized error and informational messages + that occur as a result of conversion, validation, or other application + actions during the request processing lifecycle. With the help of this + attribute you can replace the last parameter substitution token shown + in the messages. For example, {1} for + <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code> + , {2} for <code>&quot;ShortConverter.SHORT&quot;</code> . + </para> + </section> + <section> + <title>Look-and-Feel Customization</title> - <para> - For skinnability implementation, the components use a - <emphasis> - <property>style class redefinition method.</property> - </emphasis> - Default style classes are mapped on - <emphasis> - <property>skin parameters.</property> - </emphasis> - </para> + <para> 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:inputNumberSpinner&gt;</property> - </emphasis> - components at once: - </para> + <para> There are two ways to redefine the appearance of all <emphasis + role="bold"> + <property>&lt;rich:inputNumberSpinner&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:inputNumberSpinner&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:inputNumberSpinner&gt; + </property> + </emphasis> component </para> + </listitem> + </itemizedlist> + </section> - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a container</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>controlBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>subBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>subBorderColor</entry> - <entry>border-right-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title> - Skin parameters redefinition for an input field - </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>buttonSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>buttonFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> + <section> + <title>Skin Parameters Redefinition</title> + <table> + <title>Skin parameters redefinition for a container</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>controlBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>subBorderColor</entry> + <entry>border-bottom-color</entry> + </row> + <row> + <entry>subBorderColor</entry> + <entry>border-right-color</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title> Skin parameters redefinition for an input field </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>buttonSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>buttonFamilyFont</entry> + <entry>font-family</entry> + </row> + </tbody> + </tgroup> + </table> - </section> - <section> - <title>Definition of Custom Style Classes</title> - <para> - On the screenshot there are classes names that define styles - for component elements. - </para> - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/inputNumberSpinner_cn.png" /> - </imageobject> - </mediaobject> - </figure> + </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/inputNumberSpinner_cn.png" + /> + </imageobject> + </mediaobject> + </figure> - <table id="tab_cn1"> - <title> - Classes names that define a component appearance - </title> + <table id="tab_cn1"> + <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-spinner-c</entry> - <entry> - Defines styles for a wrapper table element - of a component - </entry> - </row> - <row> - <entry>rich-spinner-input-container</entry> - <entry>Defines styles for a container</entry> - </row> - <row> - <entry>rich-spinner-input</entry> - <entry> - Defines styles for a wrapper &lt;td&gt; - element for input fields - </entry> - </row> - <row> - <entry>rich-spinner-button</entry> - <entry>Defines styles for a button</entry> - </row> - <row> - <entry>rich-spinner-buttons</entry> - <entry>Defines styles for all buttons</entry> - </row> - </tbody> - </tgroup> - </table> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-spinner-c</entry> + <entry> Defines styles for a wrapper + table element of a component + </entry> + </row> + <row> + <entry>rich-spinner-input-container</entry> + <entry>Defines styles for a + container</entry> + </row> + <row> + <entry>rich-spinner-input</entry> + <entry> Defines styles for a wrapper + &lt;td&gt; element for + input fields </entry> + </row> + <row> + <entry>rich-spinner-button</entry> + <entry>Defines styles for a + button</entry> + </row> + <row> + <entry>rich-spinner-buttons</entry> + <entry>Defines styles for all + buttons</entry> + </row> + </tbody> + </tgroup> + </table> - <para> - In order to redefine styles for all - <emphasis role="bold"> - <property>&lt;rich:inputNumberSpinner&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_cn1">above</link> - ) and define necessary properties in them. An example is - placed below: - </para> + <para> In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:inputNumberSpinner&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_cn1">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[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .rich-spinner-input{ font-style:italic; } ...]]></programlisting> - <para>This is a result:</para> + <para>This is a result:</para> - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/inputNumberSpinner_pc.png" /> - </imageobject> - </mediaobject> - </figure> + <figure> + <title>Redefinition styles with predefined classes</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/inputNumberSpinner_pc.png" + /> + </imageobject> + </mediaobject> + </figure> - <para> - In the example an input text font style was changed. - </para> + <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:inputNumberSpinner&gt;</property> - </emphasis> - component. In this case you should create own style classes - and use them in corresponding - <emphasis role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> - attributes. An example is placed below: - </para> + <para> Also it&apos;s possible to change styles of particular <emphasis + role="bold"> + <property>&lt;rich:inputNumberSpinner&gt;</property> + </emphasis> component. In this case you should create own style + classes and use them in corresponding <emphasis role="bold"> + <property>&lt;rich:inputNumberSpinner&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[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .myClass{ font-family: Arial Black; } ...]]></programlisting> - <para> - The - <emphasis> - <property>&quot;inputClass&quot;</property> - </emphasis> - attribute for - <emphasis role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> - is defined as it&apos;s shown in the example below: - </para> + <para> The <emphasis> + <property>&quot;inputClass&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:inputNumberSpinner&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: inputNumberSpinner ... inputClass="myClass"/> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<rich: inputNumberSpinner ... inputClass="myClass"/> ]]></programlisting> - <para>This is a result:</para> + <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/inputNumberSpinner_oc.png" /> - </imageobject> - </mediaobject> - </figure> + <figure> + <title> Redefinition styles with own classes and <emphasis> + <property>styleClass</property> + </emphasis> attributes </title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/inputNumberSpinner_oc.png" + /> + </imageobject> + </mediaobject> + </figure> - <para> - As it could be seen on the picture above, the font family - for input text was changed. - </para> + <para> As it could be seen on the picture above, the font family for input text + was changed. </para> - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/inputNumber... - Here - </ulink> - you can see the example of - <emphasis role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> - usage and sources for the given example. - </para> - </section> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/inputNumber... + > Here </ulink> you can see the example of <emphasis + role="bold"> + <property>&lt;rich:inputNumberSpinner&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> </section> Modified: trunk/docs/userguide/en/src/main/docbook/included/modalPanel.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/modalPanel.xml 2008-09-30 06:32:42 UTC (rev 10612) +++ trunk/docs/userguide/en/src/main/docbook/included/modalPanel.xml 2008-09-30 08:29:23 UTC (rev 10613) @@ -1,71 +1,71 @@ <?xml version="1.0" encoding="UTF-8"?> <section> - <sectioninfo> - <keywordset> - <keyword>rich:modalPanel</keyword> + <sectioninfo> + <keywordset> + <keyword>rich:modalPanel</keyword> - <keyword>HtmlModalPanel</keyword> - </keywordset> - </sectioninfo> + <keyword>HtmlModalPanel</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.ModalPanel</entry> - </row> + <entry>org.richfaces.ModalPanel</entry> + </row> - <row> - <entry>component-class</entry> + <row> + <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlModalPanel</entry> - </row> + <entry>org.richfaces.component.html.HtmlModalPanel</entry> + </row> - <row> - <entry>component-family</entry> + <row> + <entry>component-family</entry> - <entry>org.richfaces.ModalPanel</entry> - </row> + <entry>org.richfaces.ModalPanel</entry> + </row> - <row> - <entry>renderer-type</entry> + <row> + <entry>renderer-type</entry> - <entry>org.richfaces.ModalPanelRenderer</entry> - </row> + <entry>org.richfaces.ModalPanelRenderer</entry> + </row> - <row> - <entry>tag-class</entry> + <row> + <entry>tag-class</entry> - <entry>org.richfaces.taglib.ModalPanelTag</entry> - </row> - </tbody> - </tgroup> - </table> + <entry>org.richfaces.taglib.ModalPanelTag</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>Here is a simple example as it could be used on a page:</para> + <para>Here is a simple example as it could be used on a page:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:modalPanel id="panel"> <f:facet name="header"> <h:outputText value="header" /> @@ -78,71 +78,79 @@ <a onclick="Richfaces.showModalPanel('modalPanelID');" href="#">Show</a> ... ]]></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.HtmlModalPanel; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlModalPanel; ... HtmlModalPanel myPanel = new HtmlModalPanel(); ... ]]></programlisting> - </section> + </section> - <section> - <title>Details of Usage</title> + <section> + <title>Details of Usage</title> - <para>The component is defined as a panel with some content inside that displays its content as - a modal dialog. To call it and to close it, the client API for the window is used.</para> + <para>The component is defined as a panel with some content inside that displays + its content as a modal dialog. To call it and to close it, the client + API for the window is used.</para> - <table> - <title>Functions description</title> + <table> + <title>Functions description</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> - <entry>Description</entry> - </row> - </thead> + <entry>Description</entry> + </row> + </thead> - <tbody> - <row> - <entry>RichFaces.showModalPanel (client Id)</entry> + <tbody> + <row> + <entry>RichFaces.showModalPanel (client + Id)</entry> - <entry>Opens a window with a specified client Id</entry> - </row> + <entry>Opens a window with a specified + client Id</entry> + </row> - <row> - <entry>RichFaces.hideModalPanel (client Id)</entry> + <row> + <entry>RichFaces.hideModalPanel (client + Id)</entry> - <entry>Closes a window with a specified client Id</entry> - </row> - </tbody> - </tgroup> - </table> + <entry>Closes a window with a specified + client Id</entry> + </row> + </tbody> + </tgroup> + </table> - <important> - <title>Important:</title> - <para>In order to avoid a bug in IE, the root node of the dialog is moved on the top of a DOM - tree. However, you should have a separate form inside the modal panel if you want to perform - submits from this panel (so, no form should be around the modal panel in this case).</para> - </important> + <important> + <title>Important:</title> + <para>In order to avoid a bug in IE, the root node of the dialog is + moved on the top of a DOM tree. However, you should have a + separate form inside the modal panel if you want to perform + submits from this panel (so, no form should be around the + modal panel in this case).</para> + </important> - <para>It&apos;s possible to add a <emphasis><property>&quot;header&quot;</property></emphasis> facet to the component to set - the content for the header.</para> + <para>It&apos;s possible to add a <emphasis> + <property>&quot;header&quot;</property> + </emphasis> facet to the component to set the content for the header.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:modalPanel id="panel" width="400" height="300"> <f:facet name="header"> <h:outputText value="Modal Panel"/> @@ -153,27 +161,32 @@ <a href="javascript:Richfaces.showModalPanel('form:panel');">Open</a> ...]]></programlisting> - <para>This defines a window with a particular size and ID. It includes one "Open" link. Clicking - on this link makes the modal window content appear.</para> + <para>This defines a window with a particular size and ID. It includes one + "Open" link. Clicking on this link makes the modal window content + appear.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis> with links</title> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> with links</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/modalPanel2.png"/> - </imageobject> - </mediaobject> - </figure> + <mediaobject> + <imageobject> + <imagedata fileref="images/modalPanel2.png"/> + </imageobject> + </mediaobject> + </figure> - <para>A facet named <emphasis><property>&quot;controls&quot;</property></emphasis> can be added to the component to place control - elements on a header.</para> + <para>A facet named <emphasis> + <property>&quot;controls&quot;</property> + </emphasis> can be added to the component to place control elements on + a header.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:modalPanel id="mp"> <f:facet name="header"> <h:outputText value="Modal Panel"/> @@ -185,95 +198,119 @@ </rich:modalPanel> ...]]></programlisting> - <para>The result is displayed here:</para> + <para>The result is displayed here:</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis> with control element</title> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> with control element</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/modalPanel3.png"/> - </imageobject> - </mediaobject> - </figure> + <mediaobject> + <imageobject> + <imagedata fileref="images/modalPanel3.png"/> + </imageobject> + </mediaobject> + </figure> - <para>To manage the placement of inserted windows, use the <emphasis> - <property>"zindex"</property> - </emphasis> attribute that is similar to the standard HTML attribute and can specify window - placement relative to the content.</para> + <para>To manage the placement of inserted windows, use the <emphasis> + <property>"zindex"</property> + </emphasis> attribute that is similar to the standard HTML attribute + and can specify window placement relative to the content.</para> - <para>To manage window placement relative to the component, there are <emphasis> - <property>"left"</property> - </emphasis> and <emphasis> - <property>"top"</property> - </emphasis> attributes defining a window shifting relative to the top-left corner of the - window.</para> + <para>To manage window placement relative to the component, there are <emphasis> + <property>"left"</property> + </emphasis> and <emphasis> + <property>"top"</property> + </emphasis> attributes defining a window shifting relative to the + top-left corner of the window.</para> - <para>Modal windows can also support resize and move operations on the client side. To allow or - disallow these operations, set the <emphasis> - <property>"resizeable"</property> - </emphasis> and <emphasis> - <property>"moveable"</property> - </emphasis> attributes to &quot;true&quot; or &quot;false&quot; values. Window - resizing is also limited by <emphasis> - <property>"minWidth"</property> - </emphasis> and <emphasis> - <property>"minHeight"</property> - </emphasis> attributes specifying the minimal window sizes.</para> - <para> You can pass your parameters during modalPanel opening or closing. This passing could be - performed in the following way: </para> + <para>Modal windows can also support resize and move operations on the client + side. To allow or disallow these operations, set the <emphasis> + <property>"resizeable"</property> + </emphasis> and <emphasis> + <property>"moveable"</property> + </emphasis> attributes to &quot;true&quot; or + &quot;false&quot; values. Window resizing is also limited by <emphasis> + <property>"minWidth"</property> + </emphasis> and <emphasis> + <property>"minHeight"</property> + </emphasis> attributes specifying the minimal window sizes.</para> + <para> You can pass your parameters during modalPanel opening or closing. This + passing could be performed in the following way: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[Richfaces.showModalPanel('panelId', {left: auto}, {param1: value1});]]></programlisting> - <para> Thus, except the standard modalPanel parameters you can pass any of your own parameters. </para> - <para> Also modalPanel allows to handle its own opening and closing events on the client side. - The <emphasis><property>&quot;onshow&quot;</property></emphasis> and <emphasis><property>&quot;onclose&quot;</property></emphasis> attributes are used in this - case. </para> - <para> The following example shows how on the client side to define opening and closing event - handling in such a way that your own parameters could also be obtained: </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[Richfaces.showModalPanel('panelId', {left: auto}, {param1: value1});]]></programlisting> + <para> Thus, except the standard modalPanel parameters you can pass any of your + own parameters. </para> + <para> Also modalPanel allows to handle its own opening and closing events on + the client side. The <emphasis> + <property>&quot;onshow&quot;</property></emphasis> attribute is used in this case. </para> + <para> The following example shows how on the client side to define opening and + closing event handling in such a way that your own parameters could + also be obtained: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> - <programlisting role="XML"><![CDATA[onshow="alert(event.parameters.param1)"]]></programlisting> + <programlisting role="XML"><![CDATA[onshow="alert(event.parameters.param1)"]]></programlisting> - <para> Here, during modalPanel opening the value of a passing parameter is output. </para> - <para> More information about this problem could be found on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Development Forum</ulink>.</para> - <para> There is a possibility to restore of the previous component state on a page (including - position on the screen) after submitting and reloading. The modalPanel has some special - attributes like <emphasis><property>&quot;showWhenRendered&quot;</property></emphasis> and <emphasis><property>&quot;keepVisualState&quot;</property></emphasis>. </para> - <para> <emphasis><property>&quot;showWhenRendered&quot;</property></emphasis> - This boolean attribute is used if modalPanel should be rendered after - first page loading. </para> - <para><emphasis><property> &quot;keepVisualState&quot;</property></emphasis> - Used if modalPanel should save state after submission. If - <code>keepVisualState=&quot;true&quot;</code> then parameters which modalPanel has during opening should be submitted - and passed to new page. </para> + <para> Here, during modalPanel opening the value of a passing parameter is + output. </para> + <para> More information about this problem could be found on the <ulink + url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... + >RichFaces Development Forum</ulink>.</para> + <para> There is a possibility to restore of the previous component state on a + page (including position on the screen) after submitting and + reloading. The modalPanel has some special attributes like <emphasis> + <property>&quot;showWhenRendered&quot;</property> + </emphasis> and <emphasis> + <property>&quot;keepVisualState&quot;</property> + </emphasis>. </para> + <para> + <emphasis> + <property>&quot;showWhenRendered&quot;</property> + </emphasis> - This boolean attribute is used if modalPanel should be + rendered after first page loading. </para> + <para><emphasis> + <property> &quot;keepVisualState&quot;</property> + </emphasis> - Used if modalPanel should save state after submission. + If <code>keepVisualState=&quot;true&quot;</code> then + parameters which modalPanel has during opening should be submitted and + passed to new page. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> - <programlisting role="XML"><![CDATA[... + <programlisting role="XML"><![CDATA[... <a href="javascript:Richfaces.showModalPanel('_panel', {top:'10px', left:'10px', height:'400'});">Show</a> ...]]></programlisting> - <para> Here, if you open modal dialog window using current link and after submits data then - modalPanel destination and height on new loaded page is restored. </para> - <para>if you need the content of the modalPanel to be submitted - you need to remember two important rules: </para> - <itemizedlist> - <listitem><para>modalPanel must have its own form if it has form elements (input or/and command - components) inside (as it was shown in the example above) </para></listitem> - <listitem><para>modalPanel must not be included into the form (on any level up) if it has the - form inside.</para></listitem> - </itemizedlist> - <para>Simple example of using commandButton within modalPanel is placed below.</para> - <para><emphasis role="bold">Example:</emphasis></para> + <para> Here, if you open modal dialog window using current link and after + submits data then modalPanel destination and height on new loaded page + is restored. </para> + <para>if you need the content of the modalPanel to be submitted - you need to + remember two important rules: </para> + <itemizedlist> + <listitem> + <para>modalPanel must have its own form if it has form + elements (input or/and command components) inside + (as it was shown in the example above) </para> + </listitem> + <listitem> + <para>modalPanel must not be included into the form (on any + level up) if it has the form inside.</para> + </listitem> + </itemizedlist> + <para>Simple example of using commandButton within modalPanel is placed below.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> - <programlisting role="XML"><![CDATA[... + <programlisting role="XML"><![CDATA[... <rich:modalPanel> <f:facet name="header"> <h:outputText value="Test" /> @@ -291,411 +328,446 @@ </h:form> ...]]></programlisting> - - <para>See also discussion about this problem on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Users Forum</ulink>.</para> - <para> - The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute is a generic attribute. - The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute provides an association between a component, and the message that the component (indirectly) produced. - This attribute defines the parameters of localized error and informational messages that - occur as a result of conversion, validation, or other application actions during the request - processing lifecycle. With the help of this attribute you can replace the - last parameter substitution token shown in the messages. For example, {1} for <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, {2} - for <code>&quot;ShortConverter.SHORT&quot;</code>. - </para> - <para> - <ulink url="http://wiki.jboss.org/auth/wiki/RichFacesCookbook/DetailModalPa... - Here - </ulink> - there is information for those of you who would like to click on a details link in table and have it show a modal panel with information loaded from the server. - </para> - </section> - - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>show()</entry> - <entry>Opens the corresponding modalPanel</entry> - </row> - - <row> - <entry>hide()</entry> - <entry>Closes the corresponding modalPanel</entry> - </row> - - </tbody> - </tgroup> - </table> - - </section> - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:modalPanel&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:modalPanel&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> + <para>See also discussion about this problem on the <ulink + url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... + >RichFaces Users Forum</ulink>.</para> + <para> The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute is a generic attribute. The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute provides an association between a component, and + the message that the component (indirectly) produced. This attribute + defines the parameters of localized error and informational messages + that occur as a result of conversion, validation, or other application + actions during the request processing lifecycle. With the help of this + attribute you can replace the last parameter substitution token shown + in the messages. For example, {1} for + <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, + {2} for <code>&quot;ShortConverter.SHORT&quot;</code>. </para> + <para> + <ulink + url="http://wiki.jboss.org/auth/wiki/RichFacesCookbook/DetailModalPa... + > Here </ulink> there is information for those of you who + would like to click on a details link in table and have it show a + modal panel with information loaded from the server. </para> + </section> - <section> - <title>Skin Parameters Redefinition</title> + <section> + <title>JavaScript API</title> + <table> + <title>JavaScript API</title> - <table> - <title>Skin parameters for a component</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <entry>Description</entry> + </row> + </thead> - <entry>CSS properties</entry> - </row> - </thead> + <tbody> - <tbody> - <row> - <entry>generalBackgroundColor</entry> + <row> + <entry>show()</entry> + <entry>Opens the corresponding + modalPanel</entry> + </row> - <entry>background-color</entry> - </row> + <row> + <entry>hide()</entry> + <entry>Closes the corresponding + modalPanel</entry> + </row> - <row> - <entry>panelBorderColor</entry> + </tbody> + </tgroup> + </table> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> + </section> - <table> - <title>Skin parameters redefinition for a header element</title> + <section> + <title>Look-and-Feel Customization</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <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> - <entry>CSS properties</entry> - </row> - </thead> + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> components at once:</para> - <tbody> - <row> - <entry>headerBackgroundColor</entry> + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> - <entry>background-color</entry> - </row> + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> - <row> - <entry>headerBackgroundColor</entry> + <section> + <title>Skin Parameters Redefinition</title> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> + <table> + <title>Skin parameters for a component</title> - <table> - <title>Skin parameters redefinition for a header content</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> - <entry>CSS properties</entry> - </row> - </thead> + <tbody> + <row> + <entry>generalBackgroundColor</entry> - <tbody> - <row> - <entry>headerSizeFont</entry> + <entry>background-color</entry> + </row> - <entry>background-color</entry> - </row> + <row> + <entry>panelBorderColor</entry> - <row> - <entry>headerTextColor</entry> + <entry>border-color</entry> + </row> + </tbody> + </tgroup> + </table> - <entry>font-size</entry> - </row> + <table> + <title>Skin parameters redefinition for a header element</title> - <row> - <entry>headerWeightFont</entry> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> - <entry>color</entry> - </row> + <entry>CSS properties</entry> + </row> + </thead> - <row> - <entry>headerFamilyFont</entry> + <tbody> + <row> + <entry>headerBackgroundColor</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> + <entry>background-color</entry> + </row> - <table> - <title>Skin parameters redefinition for a body element</title> + <row> + <entry>headerBackgroundColor</entry> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> + <entry>border-color</entry> + </row> + </tbody> + </tgroup> + </table> - <entry>CSS properties</entry> - </row> - </thead> + <table> + <title>Skin parameters redefinition for a header content</title> - <tbody> - <row> - <entry>generalSizeFont</entry> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> - <entry>font-size</entry> - </row> + <entry>CSS properties</entry> + </row> + </thead> - <row> - <entry>generalTextColor</entry> + <tbody> + <row> + <entry>headerSizeFont</entry> - <entry>color</entry> - </row> + <entry>background-color</entry> + </row> - <row> - <entry>generalFamilyFont</entry> + <row> + <entry>headerTextColor</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - </section> + <entry>font-size</entry> + </row> - <section> - <title>Definition of Custom Style Classes</title> + <row> + <entry>headerWeightFont</entry> - <figure> - <title><emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis> class name</title> + <entry>color</entry> + </row> - <mediaobject> - <imageobject> - <imagedata fileref="images/modalPanel_cn.png"/> - </imageobject> - </mediaobject> - </figure> + <row> + <entry>headerFamilyFont</entry> - <para>The screenshot shows the classes names for defining different elements.</para> - - <table id="mPC"> - <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-modalpanel</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element of a modalpanel</entry> - </row> - - <row> - <entry>rich-mpnl_panel</entry> - - <entry>Defines styles for a modalpanel</entry> - </row> - - <row> - <entry>rich-mpnl-mask-div</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element of a mask</entry> - </row> - - <row> - <entry>rich-mpnl-resizer</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element of a resizing element</entry> - </row> - - <row> - <entry>rich-mpnl-shadow</entry> - - <entry>Defines styles for a modalpanel shadow</entry> - </row> - - <row> - <entry>rich-mpnl-header</entry> - - <entry>Defines styles for a modalpanel header</entry> - </row> - - <row> - <entry>rich-mpnl-header-cell</entry> - - <entry>Defines styles for a header cell</entry> - </row> - - <row> - <entry>rich-mpnl-text</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element of a header text</entry> - </row> - - <row> - <entry>rich-mpnl-body</entry> - - <entry>Defines styles for a content inside a modalpanel</entry> - </row> - - <row> - <entry>rich-mpnl-controls</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element of a modalpanel control</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:modalPanel&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="mPC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... + <entry>font-family</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for a body element</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>generalSizeFont</entry> + + <entry>font-size</entry> + </row> + + <row> + <entry>generalTextColor</entry> + + <entry>color</entry> + </row> + + <row> + <entry>generalFamilyFont</entry> + + <entry>font-family</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + + <section> + <title>Definition of Custom Style Classes</title> + + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> class name</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/modalPanel_cn.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>The screenshot shows the classes names for defining different elements.</para> + + <table id="mPC"> + <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-modalpanel</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; element of + a modalpanel</entry> + </row> + + <row> + <entry>rich-mpnl_panel</entry> + + <entry>Defines styles for a + modalpanel</entry> + </row> + + <row> + <entry>rich-mpnl-mask-div</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; element of + a mask</entry> + </row> + + <row> + <entry>rich-mpnl-resizer</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; element of + a resizing element</entry> + </row> + + <row> + <entry>rich-mpnl-shadow</entry> + + <entry>Defines styles for a modalpanel + shadow</entry> + </row> + + <row> + <entry>rich-mpnl-header</entry> + + <entry>Defines styles for a modalpanel + header</entry> + </row> + + <row> + <entry>rich-mpnl-header-cell</entry> + + <entry>Defines styles for a header + cell</entry> + </row> + + <row> + <entry>rich-mpnl-text</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; element of + a header text</entry> + </row> + + <row> + <entry>rich-mpnl-body</entry> + + <entry>Defines styles for a content + inside a modalpanel</entry> + </row> + + <row> + <entry>rich-mpnl-controls</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; element of + a modalpanel control</entry> + </row> + </tbody> + </tgroup> + </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:modalPanel&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="mPC"> above</link>) and define necessary + properties in them. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .rich-mpnl-mask-div{ background-color:#fae6b0; } -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/modalPanel_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the background color for mask was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:modalPanel&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:modalPanel&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/modalPanel_pc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example the background color for mask was changed.</para> + + <para>Also it&apos;s possible to change styles of particular <emphasis + role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> component. In this case you should create own style + classes and use them in corresponding <emphasis role="bold"> + <property>&lt;rich:modalPanel&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-style:italic; } -...]]></programlisting> - <para>The <emphasis><property>&quot;headerClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:modalPanel&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:modalPanel ... headerClass="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/modalPanel_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above,the font style for header was changed.</para> - - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:modalPanel&gt;</property></emphasis> usage and sources for the given example. </para> - <para>Information about wizards using the <emphasis role="bold" - ><property>&lt;rich:modalPanel&gt;</property></emphasis> component could be found in the <ulink - url="http://labs.jboss.com/wiki/ModalPanelWizards">Wiki article</ulink> and in the <ulink - url="http://www.jboss.org/file-access/default/members/jbossrichfaces... chapter of the guide. </para> - <para>Examples of validation in <emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis> - could be found in the <ulink url="http://labs.jboss.com/wiki/ModalPanelValidation">Wiki article</ulink> and on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Users Forum</ulink>. </para> - <para> - <ulink - url="http://wiki.jboss.org/wiki/RichFacesPleaseWaitBox"> - Here - </ulink> - you can find information on how to show a &quot;Please Wait&quot; box and - block the input while the Ajax request is processed using combination of - <emphasis role="bold"> - <property>&lt;a4j:status&gt;</property> - </emphasis> - and - <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> - components - . - </para> - </section> - +...]]></programlisting> + <para>The <emphasis> + <property>&quot;headerClass&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:modalPanel&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:modalPanel ... headerClass="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/modalPanel_oc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above,the font style for header was + changed.</para> + + + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.... + >Here</ulink> you can see the example of <emphasis + role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> usage and sources for the given example. </para> + <para>Information about wizards using the <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> component could be found in the <ulink + url="http://labs.jboss.com/wiki/ModalPanelWizards">Wiki + article</ulink> and in the <ulink + url="http://www.jboss.org/file-access/default/members/jbossrichfaces... + >FAQ</ulink> chapter of the guide. </para> + <para>Examples of validation in <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> could be found in the <ulink + url="http://labs.jboss.com/wiki/ModalPanelValidation">Wiki + article</ulink> and on the <ulink + url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... + >RichFaces Users Forum</ulink>. </para> + <para> + <ulink url="http://wiki.jboss.org/wiki/RichFacesPleaseWaitBox"> Here + </ulink> you can find information on how to show a &quot;Please + Wait&quot; box and block the input while the Ajax request is + processed using combination of <emphasis role="bold"> + <property>&lt;a4j:status&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> components . </para> + </section> + + </section> Modified: trunk/docs/userguide/en/src/main/docbook/included/repeat.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/repeat.xml 2008-09-30 06:32:42 UTC (rev 10612) +++ trunk/docs/userguide/en/src/main/docbook/included/repeat.xml 2008-09-30 08:29:23 UTC (rev 10613) @@ -1,71 +1,75 @@ <?xml version='1.0' encoding='UTF-8'?> <chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:repeat</keyword> - </keywordset> - </chapterinfo> - <para><table frame="all"> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Repeat</entry> - </row> - <row> - <entry>component-family</entry> - <entry>javax.faces.Data</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlAjaxRepeat</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.RepeatRenderer</entry> - </row> - </tbody> - </tgroup> - </table></para> - - <section> - <title>Creating on a page</title> - <para>The component definition on a page is the same as for the - <property>facelets</property> - component:</para> - <programlisting role="XML"><![CDATA[<a4j:repeat id="detail" value="#{bean.props}" var="detail"> + <chapterinfo> + <keywordset> + <keyword>a4j:repeat</keyword> + </keywordset> + </chapterinfo> + <para> + <table frame="all"> + <title>Component identification parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Repeat</entry> + </row> + <row> + <entry>component-family</entry> + <entry>javax.faces.Data</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlAjaxRepeat</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.RepeatRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </para> + + <section> + <title>Creating on a page</title> + <para>The component definition on a page is the same as for the + <property>facelets</property> component:</para> + <programlisting role="XML"><![CDATA[<a4j:repeat id="detail" value="#{bean.props}" var="detail"> <h:outputText value="#{detail.someProperty}"/> </a4j:repeat>]]></programlisting> - <para>The output is generated according to a collection contained in - <code>bean.props</code> - with the <code>detail</code> key passed to child components.</para> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> + <para>The output is generated according to a collection contained in + <code>bean.props</code> with the <code>detail</code> key + passed to child components.</para> + </section> + <section> + <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlAjaxRepeat; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlAjaxRepeat; ... HtmlAjaxRepeat repeater = new HtmlAjaxRepeat (); ... ]]></programlisting> - </section> - <section> - <title>Key attributes and ways of usage</title> - <para>The main difference of this component from iterative components of other libraries is a special <emphasis > - <property>&quot;ajaxKeys&quot;</property> - </emphasis> attribute. This attribute defines row keys that are updated after an Ajax request. As a result it becomes easier to update several child components separately without updating the whole page.</para> + </section> + <section> + <title>Key attributes and ways of usage</title> + <para>The main difference of this component from iterative components of other + libraries is a special <emphasis> + <property>&quot;ajaxKeys&quot;</property> + </emphasis> attribute. This attribute defines row keys that are + updated after an Ajax request. As a result it becomes easier to update + several child components separately without updating the whole page.</para> - <programlisting role="XML"><![CDATA[... + <programlisting role="XML"><![CDATA[... <a4j:poll intervall="1000" action="#{repeater.action}" reRender="text"> <table> <tbody> @@ -82,33 +86,31 @@ ... ]]></programlisting> - <para>Thus, a list with a table structure from - <code>bean.props</code> - is output.</para> - <para>In the above-mentioned example the component <emphasis role="bold"> - <property>&lt;a4j:poll&gt;</property> - </emphasis> sends Ajax requests every second, calling the - <code>action</code> - method of the - <code>repeater</code> - bean. - </para> - <note> - <title>Note:</title> - <para>The <emphasis role="bold"> - <property>&lt;a4j:repeater&gt;</property> - </emphasis> component is defined as fully updated, but really updated there are only the row keys which <emphasis><property>&quot;rowKeys&quot;</property></emphasis> includes into the set - <emphasis><property>&quot;ajaxRowSet&quot;</property></emphasis> - defined in the <emphasis > - <property>&quot;ajaxKeys&quot;</property> - </emphasis> attribute </para> - <para>The set could be defined during the action method processing using data on a model from the property - <code>repeater.myRepeat</code> - </para> - </note> - <para>One more benefit of this component is absence of strictly defined markup as JSF HTML DataTable and TOMAHAWK DataTable has, hence the components could be used more flexibly anywhere where it&apos;s necessary to output the results of selection from some collection.</para> -<para>The next example shows collection output as a plain HTML list:</para> - <programlisting role="XML"><![CDATA[<ul> + <para>Thus, a list with a table structure from <code>bean.props</code> is + output.</para> + <para>In the above-mentioned example the component <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> sends Ajax requests every second, calling the + <code>action</code> method of the <code>repeater</code> bean. </para> + <note> + <title>Note:</title> + <para>The <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> component is defined as fully updated, but + really updated there are only the row keys which defined in the <emphasis> + <property>&quot;ajaxKeys&quot;</property> + </emphasis> attribute. </para> + <para>The set could be defined during the action method processing + using data on a model from the property + <code>repeater.myRepeat</code> + </para> + </note> + <para>One more benefit of this component is absence of strictly defined markup + as JSF HTML DataTable and TOMAHAWK DataTable has, hence the components + could be used more flexibly anywhere where it&apos;s necessary to + output the results of selection from some collection.</para> + <para>The next example shows collection output as a plain HTML list:</para> + <programlisting role="XML"><![CDATA[<ul> <a4j:repeat ...> <li>...<li/> ... @@ -116,18 +118,22 @@ </a4j:repeat> </ul> ]]></programlisting> - <para>All other general attributes are defined according to the similar attributes of iterative components (<emphasis role="bold"> - <property>&lt;h:dataTable&gt;</property> - </emphasis> or <emphasis role="bold"> - <property>&lt;ui:repeat&gt;</property> - </emphasis>) and are used in the same way.</para> - </section> - - <section> - <title>Relevant resources links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/repeat.jsf?... you can see the example of <emphasis role="bold" - ><property>&lt;a4j:repeat&gt;</property></emphasis> usage and sources for the given example. - </para> - </section> -</chapter> \ No newline at end of file + <para>All other general attributes are defined according to the similar + attributes of iterative components (<emphasis role="bold"> + <property>&lt;h:dataTable&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;ui:repeat&gt;</property> + </emphasis>) and are used in the same way.</para> + </section> + + <section> + <title>Relevant resources links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/repeat.jsf?... + >Here</ulink> you can see the example of <emphasis + role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</chapter> Modified: trunk/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml 2008-09-30 06:32:42 UTC (rev 10612) +++ trunk/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml 2008-09-30 08:29:23 UTC (rev 10613) @@ -1,110 +1,128 @@ <?xml version='1.0' encoding='UTF-8'?> <section> - <sectioninfo> - <keywordset> - <keyword>rich:scrollableDataTable</keyword> - </keywordset> - </sectioninfo> + <sectioninfo> + <keywordset> + <keyword>rich:scrollableDataTable</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.ScrollableDataTable</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlScrollableDataTable</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.component.ScrollableDataTable</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.renderkit.html.ScrollableDataTableRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ScrollableDataTableTag</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.ScrollableDataTable</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlScrollableDataTable</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.component.ScrollableDataTable</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.renderkit.html.ScrollableDataTableRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ScrollableDataTableTag</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:scrollableDataTable value="#{dataTableScrollerBean.allCars}" var="category"> <!--...//Set of columns and header/footer facets--> </rich:scrollableDataTable> ... ]]></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.HtmlScrollableDataTable; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlScrollableDataTable; ... HtmlScrollableDataTable myScrollableDataTable = new HtmlScrollableDataTable(); ... ]]></programlisting> - </section> + </section> - <section> - <title>Details of Usage</title> - <para> The component represents on a page as a scrollable table with some fixed (non-scrollable) - rows ( with header and footer) and columns. Like other tables <emphasis role="bold"><property>&lt;rich:scrollableDataTable&gt;</property></emphasis> also has optional footer and header that could be implemented using the corresponding facets. Columns of the table are optionally resizable. Resizing is - available using "drag and drop" of the column vertical borders. There is possibility to expand - or collapse the columns through JS API on the client side. You can define the number of the - fixed columns from the left side using attribute <emphasis> - <property>&quot;frozenColCount&quot;</property> - </emphasis> that is not scrolled via horizontal scroll. </para> - <para> There is possibility to increase component performance using attribute <emphasis> - <property>&quot;hideWhenScrolling&quot;</property> - </emphasis>. If attribute value is &quot;true&quot; data is hidden during scrolling. </para> + <section> + <title>Details of Usage</title> + <para> The component represents on a page as a scrollable table with some fixed + (non-scrollable) rows ( with header and footer) and columns. Like + other tables <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> also has optional footer and header that could be + implemented using the corresponding facets. Columns of the table are + optionally resizable. Resizing is available using "drag and drop" of + the column vertical borders. There is possibility to expand or + collapse the columns through JS API on the client side. You can define + the number of the fixed columns from the left side using attribute <emphasis> + <property>&quot;frozenColCount&quot;</property> + </emphasis> that is not scrolled via horizontal scroll. </para> + <para> There is possibility to increase component performance using attribute <emphasis> + <property>&quot;hideWhenScrolling&quot;</property> + </emphasis>. If attribute value is &quot;true&quot; data is + hidden during scrolling. </para> - <para> It&apos;s possible to select the whole row with onclick on the row or some set of rows. - Selection is optional and availability of such feature is defined on the component. There are - two ways to select a few rows: <itemizedlist> - <listitem><para>Just clicking the columns one by one.</para></listitem> - <listitem><para>Clicking some row with the SHIFT button hold. In this case all the rows starting - from last selected up to clicked should be selected.</para></listitem> - </itemizedlist> - </para> + <para> It&apos;s possible to select the whole row with onclick on the row or + some set of rows. Selection is optional and availability of such + feature is defined on the component. There are two ways to select a + few rows: <itemizedlist> + <listitem> + <para>Just clicking the columns one by one.</para> + </listitem> + <listitem> + <para>Clicking some row with the SHIFT button + hold. In this case all the rows starting + from last selected up to clicked should + be selected.</para> + </listitem> + </itemizedlist> + </para> - <para> The columns provides the possibility of expanding/collapsing on the client side through - the next JS API: <itemizedlist> - <listitem><para><code>collapse(columnId)</code> - Performs the collapse action for the column with the - corresponding id</para></listitem> - </itemizedlist> It&apos;s possible to sort the table content after clicks on the header. The - feature is optional. Every column should be pointed to the comparator method that is used - for sorting the table. In case the - <emphasis role="bold"><property>&lt;rich:scrollableDataTable&gt;</property></emphasis> is already sorted by some column - and the header of this column has been clicked again - the sorting is reversed. </para> - <para>After sorting selection that was made before is reset</para> + <para> The columns provides the possibility of expanding/collapsing on the + client side through the next JS API: <itemizedlist> + <listitem> + <para><code>collapse(columnId)</code> - Performs + the collapse action for the column with + the corresponding id</para> + </listitem> + </itemizedlist> It&apos;s possible to sort the table content after + clicks on the header. The feature is optional. Every column should be + pointed to the comparator method that is used for sorting the table. + In case the <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> is already sorted by some column and the header of this + column has been clicked again - the sorting is reversed. </para> + <para>After sorting selection that was made before is reset</para> - <para> - <emphasis role="bold">The typical variant of using:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">The typical variant of using:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:scrollableDataTable value="#{modelBuilder.model}" var="issues" frozenColCount="1" first="0" @@ -125,21 +143,22 @@ ... ]]></programlisting> - <para>The <emphasis> - <property>&quot;selection&quot;</property> - </emphasis> attribute allows to get the row data when using <property>one and multi-selection - rows mode</property>.</para> - <para>This attribute is a reference to object to the instace of - <code>org.richfaces.model.selection.Selection</code> interface, containing current - collection of objects selected by you.</para> - <para>In the following example when you submit the form, current collection of the selected objects - is placed in the object&apos;s property. Then on complete action the <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> with selected data is shown.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para>The <emphasis> + <property>&quot;selection&quot;</property> + </emphasis> attribute allows to get the row data when using + <property>one and multi-selection rows mode</property>.</para> + <para>This attribute is a reference to object to the instace of + <code>org.richfaces.model.selection.Selection</code> + interface, containing current collection of objects selected by you.</para> + <para>In the following example when you submit the form, current collection of + the selected objects is placed in the object&apos;s property. Then + on complete action the <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> with selected data is shown.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <h:form> <rich:spacer height="30" /> <rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="200px" @@ -187,468 +206,549 @@ </rich:dataTable> </rich:modalPanel> ...]]></programlisting> - <para>This is a result:</para> - <figure> - <title>The <emphasis><property>&quot;selection&quot;</property></emphasis> attribute usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/scrollableDataTable2.png"/> - </imageobject> - </mediaobject> - </figure> - <para><ulink url="http://wiki.jboss.org/wiki/RichFacesCookbook/ScrollableDataTabl... you can find fuller example of use of this attribute with example bean.</para> - <para> The <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> component has the following extra attributes for event processing on the client: <itemizedlist> - <listitem><para><emphasis><property>&quot;onselectionchange&quot;</property></emphasis></para></listitem> - <listitem><para><emphasis><property>&quot;oncomplete&quot;</property></emphasis></para></listitem> - <listitem><para><emphasis><property>&quot;onRowClick&quot;</property></emphasis></para></listitem> - <listitem><para><emphasis><property>&quot;onRowDblClick&quot;</property></emphasis></para></listitem> - <listitem><para><emphasis><property>&quot;onRowMouseUp&quot;</property></emphasis></para></listitem> - <listitem><para><emphasis><property>&quot;onRowMouseDown&quot;</property></emphasis></para></listitem> - </itemizedlist> - </para> - <para>Information about sorting and filtering you can find <link linkend="sort">here</link>.</para> - <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>JavaScript API</title> - <table> - <title>JavaScript API</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>collapse(columnId)</entry> - - <entry>Performs a collapse action for column with corresponding Id</entry> - </row> - - </tbody> - </tgroup> - </table> - - </section> - + <para>This is a result:</para> + <figure> + <title>The <emphasis> + <property>&quot;selection&quot;</property> + </emphasis> attribute usage</title> + <mediaobject> + <imageobject> + <imagedata + fileref="images/scrollableDataTable2.png" + /> + </imageobject> + </mediaobject> + </figure> + <para><ulink + url="http://wiki.jboss.org/wiki/RichFacesCookbook/ScrollableDataTabl... + >Here</ulink> you can find fuller example of use of this + attribute with example bean.</para> + <para> The <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> component has the following extra attributes for event + processing on the client: <itemizedlist> + <listitem> + <para> + <emphasis> + <property>&quot;onselectionchange&quot;</property> + </emphasis> + </para> + </listitem> + <!-- <listitem> + <para> + <emphasis> + <property>&quot;oncomplete&quot;</property> + </emphasis> + </para> + </listitem> --> + <listitem> + <para> + <emphasis> + <property>&quot;onRowClick&quot;</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>&quot;onRowDblClick&quot;</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>&quot;onRowMouseUp&quot;</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>&quot;onRowMouseDown&quot;</property> + </emphasis> + </para> + </listitem> + </itemizedlist> + </para> + <para>Information about sorting and filtering you can find <link linkend="sort" + >here</link>.</para> + <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> - <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> + <section> + <title>JavaScript API</title> + <table> + <title>JavaScript API</title> - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> components at once:</para> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> + <entry>Description</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:scrollableDataTable&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> + <tbody> - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters for all table</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>tableBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-width</entry> - </row> - </tbody> - </tgroup> - </table> + <row> + <entry>collapse(columnId)</entry> - <table> - <title>Skin parameters for header rows and cells</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> + <entry>Performs a collapse action for + column with corresponding + Id</entry> + </row> - <row> - <entry>headerTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-bottom-width</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-right-width</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-right-color</entry> - </row> - </tbody> - </tgroup> - </table> + </tbody> + </tgroup> + </table> - <table> - <title>Skin parameters for footer rows and cells</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableSubfooterBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> + </section> - <row> - <entry>tableBorderColor</entry> - <entry>border-right-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 for column cells </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBorderColor</entry> - <entry>border-right-color</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - </tbody> - </tgroup> - </table> + <section> + <title>Look-and-Feel Customization</title> - <table> - <title>Skin parameters for active rows</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> + <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 for selected rows</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> components at once:</para> - </section> + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> - <section> - <title>Definition of Custom Style Classes</title> + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> - <para>On the screenshot there are classes names that define styles for component elements.</para> + <section> + <title>Skin Parameters Redefinition</title> + <table> + <title>Skin parameters for all table</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>tableBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>tableBorderWidth</entry> + <entry>border-width</entry> + </row> + </tbody> + </tgroup> + </table> - <figure> - <title>Classes names</title> + <table> + <title>Skin parameters for header rows and cells</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>headerBackgroundColor</entry> + <entry>background-color</entry> + </row> - <mediaobject> - <imageobject> - <imagedata fileref="images/scrollableDataTable_cn.png" scale="90"/> - </imageobject> - </mediaobject> - </figure> + <row> + <entry>headerTextColor</entry> + <entry>color</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>tableBorderWidth</entry> + <entry>border-bottom-width</entry> + </row> + <row> + <entry>tableBorderColor</entry> + <entry>border-bottom-color</entry> + </row> + <row> + <entry>tableBorderWidth</entry> + <entry>border-right-width</entry> + </row> + <row> + <entry>tableBorderColor</entry> + <entry>border-right-color</entry> + </row> + </tbody> + </tgroup> + </table> - <table id="scrdattableC"> - <title>Classes names that define a component appearance</title> + <table> + <title>Skin parameters for footer rows and cells</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>tableSubfooterBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> + <row> + <entry>tableBorderColor</entry> + <entry>border-right-color</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + </tbody> + </tgroup> + </table> - <entry>Description</entry> - </row> - </thead> + <table> + <title>Skin parameters for column cells </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>tableBorderColor</entry> + <entry>border-right-color</entry> + </row> + <row> + <entry>tableBorderColor</entry> + <entry>border-bottom-color</entry> + </row> + </tbody> + </tgroup> + </table> - <tbody> - <row> - <entry>rich-sdt</entry> + <table> + <title>Skin parameters for active rows</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> - <entry>Defines styles for a component appearance</entry> - </row> + <table> + <title>Skin parameters for selected rows</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>additionalBackgroundColor</entry> + <entry>background-color</entry> + </row> + </tbody> + </tgroup> + </table> - </tbody> - </tgroup> - </table> + </section> - <table> - <title>Classes names that define footer and header elements</title> + <section> + <title>Definition of Custom Style Classes</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> + <para>On the screenshot there are classes names that define styles for component + elements.</para> - <entry>Description</entry> - </row> - </thead> + <figure> + <title>Classes names</title> - <tbody> + <mediaobject> + <imageobject> + <imagedata + fileref="images/scrollableDataTable_cn.png" + scale="90"/> + </imageobject> + </mediaobject> + </figure> - <row> - <entry>rich-sdt-header-cell</entry> + <table id="scrdattableC"> + <title>Classes names that define a component appearance</title> - <entry>Defines styles for header cells</entry> - </row> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> - <row> - <entry>rich-sdt-header-row</entry> + <entry>Description</entry> + </row> + </thead> - <entry>Defines styles for a header raw</entry> - </row> + <tbody> + <row> + <entry>rich-sdt</entry> - <row> - <entry>rich-sdt-column-cell</entry> + <entry>Defines styles for a component + appearance</entry> + </row> - <entry>Defines styles for column cells</entry> - </row> - <row> - <entry>rich-sdt-footer-cell</entry> + </tbody> + </tgroup> + </table> - <entry>Defines styles for footer cells</entry> - </row> + <table> + <title>Classes names that define footer and header elements</title> - <row> - <entry>rich-sdt-footer-row</entry> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> - <entry>Defines styles for a footer raw</entry> - </row> - <row> - <entry>rich-sdt-hsep</entry> + <entry>Description</entry> + </row> + </thead> - <entry>Defines styles for header separators</entry> - </row> + <tbody> - </tbody> - </tgroup> - </table> + <row> + <entry>rich-sdt-header-cell</entry> - <table> - <title>Classes names that define different states</title> + <entry>Defines styles for header + cells</entry> + </row> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> + <row> + <entry>rich-sdt-header-row</entry> - <entry>Description</entry> - </row> - </thead> + <entry>Defines styles for a header + raw</entry> + </row> - <tbody> + <row> + <entry>rich-sdt-column-cell</entry> - <row> - <entry>rich-sdt-row-active</entry> + <entry>Defines styles for column + cells</entry> + </row> + <row> + <entry>rich-sdt-footer-cell</entry> - <entry>Defines styles for an active row</entry> - </row> + <entry>Defines styles for footer + cells</entry> + </row> - <row> - <entry>rich-sdt-row-selected</entry> + <row> + <entry>rich-sdt-footer-row</entry> - <entry>Defines styles for a selected row</entry> - </row> + <entry>Defines styles for a footer + raw</entry> + </row> + <row> + <entry>rich-sdt-hsep</entry> - <row> - <entry>rich-sdt-column-sort-up</entry> + <entry>Defines styles for header + separators</entry> + </row> - <entry>Defines styles for ascending sorted column</entry> - </row> + </tbody> + </tgroup> + </table> - <row> - <entry>rich-sdt-column-sort-down</entry> + <table> + <title>Classes names that define different states</title> - <entry>Defines styles for descending sorted column</entry> - </row> - </tbody> - </tgroup> - </table> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="scrdattableC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>rich-sdt-row-active</entry> + + <entry>Defines styles for an active + row</entry> + </row> + + <row> + <entry>rich-sdt-row-selected</entry> + + <entry>Defines styles for a selected + row</entry> + </row> + + <row> + <entry>rich-sdt-column-sort-up</entry> + + <entry>Defines styles for ascending + sorted column</entry> + </row> + + <row> + <entry>rich-sdt-column-sort-down</entry> + + <entry>Defines styles for descending + sorted column</entry> + </row> + </tbody> + </tgroup> + </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to + create classes with the same names (possible classes could be found in + the tables <link linkend="scrdattableC"> above</link>) and define + necessary properties in them. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .rich-sdt-header-cell{ font-style:italic; } -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/scrollableDataTable_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font style for header cell was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:scrollableDataTable&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:scrollableDataTable&gt;</property></emphasis> <property>styleClass</property> 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/scrollableDataTable_pc.png" + /> + </imageobject> + </mediaobject> + </figure> + + <para>In the example the font style for header cell was changed.</para> + + <para>Also it&apos;s possible to change styles of particular <emphasis + role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> component. In this case you should create own style + classes and use them in corresponding <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> + <property>styleClass</property> attributes. An example is placed + below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .myClass{ background-color:#ffead9; } -...]]></programlisting> - <para>The <emphasis><property>&quot;selectedClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:scrollableDataTable&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:scrollableDataTable ... selectedClass="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/scrollableDataTable_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, background color for selected item was changed.</para> - - - - </section> +...]]></programlisting> + <para>The <emphasis> + <property>&quot;selectedClass&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> is defined as it&apos;s shown in the example below:</para> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableD... - >Here</ulink> you can see the example of <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> usage. </para> - </section> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<rich:scrollableDataTable ... selectedClass="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/scrollableDataTable_oc.png" + /> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above, background color for selected + item was changed.</para> + + + + </section> + + <section> + <title>Relevant Resources Links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableD... + >Here</ulink> you can see the example of <emphasis + role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> usage. </para> + </section> </section> Modified: trunk/docs/userguide/en/src/main/docbook/included/suggestionbox.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/suggestionbox.xml 2008-09-30 06:32:42 UTC (rev 10612) +++ trunk/docs/userguide/en/src/main/docbook/included/suggestionbox.xml 2008-09-30 08:29:23 UTC (rev 10613) @@ -1,55 +1,55 @@ <?xml version='1.0' encoding='UTF-8'?> <section> - <sectioninfo> - <keywordset> - <keyword>on-keypress suggestion</keyword> - <keyword>rich:suggestionBox</keyword> - <keyword>HtmlsuggestionBox</keyword> - </keywordset> - </sectioninfo> + <sectioninfo> + <keywordset> + <keyword>on-keypress suggestion</keyword> + <keyword>rich:suggestionBox</keyword> + <keyword>HtmlsuggestionBox</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.SuggestionBox</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlSuggestionBox</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.SuggestionBox</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.SuggestionBoxRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.SuggestionBoxTag</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.SuggestionBox</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlSuggestionBox</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.SuggestionBox</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.SuggestionBoxRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.SuggestionBoxTag</entry> + </row> + </tbody> + </tgroup> + </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> + <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> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <h:inputText value="#{bean.property}" id="suggest"/> <rich:suggestionbox for="suggest" suggestionAction="#{bean.autocomplete}" var="suggest"> <h:column> @@ -58,67 +58,76 @@ </rich:suggestionbBox> ... ]]></programlisting> - <para>Here is the <code>bean.autocomplete</code> method that returns the collection to pop up:</para> + <para>Here is the <code>bean.autocomplete</code> method that returns the + collection to pop up:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[public List autocomplete(Object event) { + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[public List autocomplete(Object event) { String pref = event.toString(); //collecting some data that begins with "pref" letters. ... return result; } ]]></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.HtmlSuggestionBox; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlSuggestionBox; ... HtmlSuggestionBox myList = new HtmlSuggestionBox(); ... ]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>As it is shown in the example above, the main component attribute are:</para> - <itemizedlist> - <listitem><para> - <emphasis> - <property>&quot;for&quot;</property> - </emphasis></para> - <para>The attribute where there is an input component which activation causes a - suggestion activation</para> - </listitem> - <listitem><para> - <emphasis> - <property>&quot;suggestionAction&quot;</property> - </emphasis></para> - <para> is an accepting parameter of a suggestionEvent type that returns as a result - a collection for rendering in a tool tip window.</para> - </listitem> - <listitem><para> - <emphasis> - <property>&quot;var&quot;</property> - </emphasis></para> - <para> a collection name that provides access for inputting into a table in a - popup</para> - </listitem> - </itemizedlist> - <para>There are also two size attributes (<emphasis> - <property>&quot;width&quot;</property> - </emphasis> and <emphasis> - <property>&quot;height&quot;</property> - </emphasis>) that are obligatory for the suggestion component. The attributes have - initial Defaults but should be specified manually in order to be changed.</para> - <para>The <property>suggestionBox</property> component, as it is shown on the screenshot, - could get any collection for an output and outputs it in a ToolTip window the same as a - custom dataTable (in several columns)</para> - <programlisting role="XML"><![CDATA[... + </section> + <section> + <title>Details of Usage</title> + <para>As it is shown in the example above, the main component attribute are:</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>&quot;for&quot;</property> + </emphasis> + </para> + <para>The attribute where there is an input component which + activation causes a suggestion activation</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>&quot;suggestionAction&quot;</property> + </emphasis> + </para> + <para> is an accepting parameter of a suggestionEvent type + that returns as a result a collection for + rendering in a tool tip window.</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>&quot;var&quot;</property> + </emphasis> + </para> + <para> a collection name that provides access for inputting + into a table in a popup</para> + </listitem> + </itemizedlist> + <para>There are also two size attributes (<emphasis> + <property>&quot;width&quot;</property> + </emphasis> and <emphasis> + <property>&quot;height&quot;</property> + </emphasis>) that are obligatory for the suggestion component. The + attributes have initial Defaults but should be specified manually in + order to be changed.</para> + <para>The <property>suggestionBox</property> component, as it is shown on the + screenshot, could get any collection for an output and outputs it in a + ToolTip window the same as a custom dataTable (in several columns)</para> + <programlisting role="XML"><![CDATA[... <rich:suggestionbox for="test" suggestionAction="#{bean.autocomplete}" var="cit" fetchValue="#{cit.text}"> <h:column> <h:outputText value="#{cit.label}"/> @@ -129,25 +138,28 @@ </rich:suggestionbox> ... ]]></programlisting> - <para>It looks on a page in the following way:</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:suggestionBox&gt;</property></emphasis> with ToolTip window</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox2.png"/> - </imageobject> - </mediaobject> - </figure> - <para>When some string is chosen input receives the corresponding value from the second - column containing <code>#{cit.text}</code></para> - <para>There is also one more important attribute named <emphasis> - <property>&quot;tokens&quot;</property> - </emphasis> that specifies separators after which a set of some characters sequence is - defined as a new prefix beginning from this separator and not from the string beginning.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para>It looks on a page in the following way:</para> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis> with ToolTip window</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox2.png"/> + </imageobject> + </mediaobject> + </figure> + <para>When some string is chosen input receives the corresponding value from the + second column containing <code>#{cit.text}</code></para> + <para>There is also one more important attribute named <emphasis> + <property>&quot;tokens&quot;</property> + </emphasis> that specifies separators after which a set of some + characters sequence is defined as a new prefix beginning from this + separator and not from the string beginning.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:suggestionbox for="test" suggestionAction="#{bean.autocomplete}" var="cit" selfRendered="true" tokens=","> <h:column> <h:outputText value="#{cit.text}"/> @@ -155,43 +167,48 @@ </rich:suggestionbox> ... ]]></programlisting> - <para>This example shows that when a city is chosen and a comma and first letter character - are input, Ajax request is called again, but it submits a value starting from the last - token:</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:suggestionBox&gt;</property></emphasis> with chosen word</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox3.png"/> - </imageobject> - </mediaobject> - </figure> - <para>For a multiple definition use either &quot;<code>,.;</code> &quot; syntax as a value for - tokens or link a parameter to some bean property transmitting separators collection.</para> - <para>The component also encompasses <emphasis> - <property>&quot;layout&quot;</property> - </emphasis> and <emphasis> - <property>&quot;style&quot;</property> - </emphasis> attributes corresponding to dataTable ones for a table appearing in popup - (for additional information, read JSF Reference) and custom attribute managing AJAX - requests sending (for additional information, see <ulink - url="http://www.jboss.org/projects/jbossajax4jsf">Ajax4JSF Project</ulink>).</para> - <para>In addition to these attributes common for Ajax action components and limiting - requests quantity and frequency, <property>suggestionBox</property> has one more its own - attribute limiting requests (the <emphasis> - <property>&quot;minChars&quot;</property> - </emphasis> attribute). The attribute defines characters quantity inputted into a field - after which Ajax requests are called to perform suggestion.</para> + <para>This example shows that when a city is chosen and a comma and first letter + character are input, Ajax request is called again, but it submits a + value starting from the last token:</para> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis> with chosen word</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox3.png"/> + </imageobject> + </mediaobject> + </figure> + <para>For a multiple definition use either &quot;<code>,.;</code> &quot; + syntax as a value for tokens or link a parameter to some bean property + transmitting separators collection.</para> + <para>The component also encompasses <emphasis> + <property>&quot;style&quot;</property> + </emphasis> attributes corresponding to dataTable ones for a table + appearing in popup (for additional information, read JSF Reference) + and custom attribute managing AJAX requests sending (for additional + information, see <ulink + url="http://www.jboss.org/projects/jbossajax4jsf">Ajax4JSF + Project</ulink>).</para> + <para>In addition to these attributes common for Ajax action components and + limiting requests quantity and frequency, + <property>suggestionBox</property> has one more its own attribute + limiting requests (the <emphasis> + <property>&quot;minChars&quot;</property> + </emphasis> attribute). The attribute defines characters quantity + inputted into a field after which Ajax requests are called to perform + suggestion.</para> - - <para> -There is possibility to define what be shown if the autocomplete returns empty list. -Attribute<emphasis><property> &quot;nothingLabel&quot; </property></emphasis>or facet with the same name could be used for it. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + + <para> There is possibility to define what be shown if the autocomplete returns + empty list. Attribute<emphasis> + <property> &quot;nothingLabel&quot; </property> + </emphasis>or facet with the same name could be used for it. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:suggestionbox nothingLabel="Empty" for="test" suggestionAction="#{bean.autocomplete}" var="cit"> <h:column> <h:outputText value="#{cit.text}"/> @@ -199,10 +216,10 @@ </rich:suggestionbox> ... ]]></programlisting> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:suggestionbox for="test" suggestionAction="#{bean.autocomplete}" var="cit"> <f:facet name="nothingLabel"> <h:outputText value="Empty"/> @@ -212,421 +229,465 @@ </h:column> </rich:suggestionbox> ... -]]></programlisting> - - - <para>It looks on a page in the following way:</para> +]]></programlisting> - <figure> - <title><emphasis role="bold"><property>&lt;rich:suggestionBox&gt;</property></emphasis> with empty list</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox4.png"/> - </imageobject> - </mediaobject> - </figure> - <para> - There is such feature in <emphasis role="bold"><property>&lt;rich:suggestionBox&gt;</property></emphasis> component as object selection. - If you want that selected item has been represented as object, you could set to "true" the value for - <emphasis><property> &quot;usingSuggestObjects&quot; </property></emphasis> attribute, "false" value means that selected item represents as string. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + + <para>It looks on a page in the following way:</para> + + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis> with empty list</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox4.png"/> + </imageobject> + </mediaobject> + </figure> + <para> There is such feature in <emphasis role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis> component as object selection. If you want that selected + item has been represented as object, you could set to "true" the value + for <emphasis> + <property> &quot;usingSuggestObjects&quot; + </property> + </emphasis> attribute, "false" value means that selected item + represents as string. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:suggestionbox for="test" suggestionAction="#{bean.autocomplete}" var="cit" usingSuggestObjects="true"> <h:column> <h:outputText value="#{cit.text}"/> </h:column> </rich:suggestionbox> ... -]]></programlisting> - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find <link linkend="process">here</link>. - </para> - <para> - <ulink url="http://wiki.jboss.org/wiki/RichFacesSuggestionGettingAdditional... </ulink> - you can find example of getting additional properties. - </para> -</section> - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>callSuggestion()</entry> - <entry>Calls the suggestion. If the &quot;ignoreMinChars&quot; value is &quot;true&quot; then the number of symbols to send a query is no longer actual for callSuggestion()</entry> - </row> - - <row> - <entry>getSelectedItems()</entry> - <entry>Returns the array of objects</entry> - </row> - - </tbody> - </tgroup> - </table> -</section> +]]></programlisting> + <para> Information about the <emphasis> + <property>&quot;process&quot;</property> + </emphasis> attribute usage you can find <link linkend="process" + >here</link>. </para> + <para> + <ulink + url="http://wiki.jboss.org/wiki/RichFacesSuggestionGettingAdditional... + >Here </ulink> you can find example of getting additional + properties. </para> + </section> + <section> + <title>JavaScript API</title> + <table> + <title>JavaScript API</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>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:suggestionBox&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:suggestionBox&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title> Skin Parameters Redefinition</title> - - <table> - <title>General skin parameters redefinition for popup list</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Parameters for popup list</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> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for shadow element of the list</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Parameters for shadow element of the list</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>shadowBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>shadowBackgroundColor</entry> - - <entry>border-color</entry> - </row> - - <row> - <entry>shadowOpacity</entry> - - <entry>opacity</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for popup table rows</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Parameters for popup table rows</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>generalSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>generalTextColor</entry> - - <entry>color</entry> - </row> - - <row> - <entry>generalFamilyFont</entry> - - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for selected row</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Parameters for selected row</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>headerBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>generalSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>generalFamilyFont</entry> - - <entry>font-family</entry> - </row> - <row> - <entry>headerTextColor</entry> - - <entry>color</entry> - </row> - - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <figure> - <title>Classes names</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>On the screenshot, there are classes names defining specified elements.</para> - - <table id="suggBoxC"> - <title>Classes names that define a suggestionBox</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-sb-common-container</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element of a suggestion container</entry> - </row> - - <row> - <entry>rich-sb-ext-decor-1</entry> - - <entry>Defines styles for the first wrapper &lt;div&gt; element of a suggestion box exterior</entry> - </row> - - <row> - <entry>rich-sb-ext-decor-2</entry> - - <entry>Defines styles for the second wrapper &lt;div&gt; element of a suggestion box exterior</entry> - </row> - - <row> - <entry>rich-sb-ext-decor-3</entry> - - <entry>Defines styles for the third wrapper &lt;div&gt; element of a suggestion box exterior</entry> - </row> - - <row> - <entry>rich-sb-overflow</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element</entry> - </row> - - <row> - <entry>rich-sb-int-decor-table</entry> - - <entry>Defines styles for a suggestion box table</entry> - </row> - - <row> - <entry>rich-sb-int</entry> - - <entry>Defines the styles for a suggestion box table rows (tr)</entry> - </row> - - <row> - <entry>rich-sb-cell-padding</entry> - - <entry>Defines the styles for suggestion box table cells (td)</entry> - </row> - - <row> - <entry>rich-sb-int-sel</entry> - - <entry>Defines styles for a selected row</entry> - </row> - - <row> - <entry>rich-sb-shadow</entry> - - <entry>Defines styles for a suggestion boxshadow</entry> - </row> - - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:suggestionBox&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="suggBoxC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>callSuggestion()</entry> + <entry>Calls the suggestion. If the + &quot;ignoreMinChars&quot; + value is + &quot;true&quot; then + the number of symbols to send + a query is no longer actual + for callSuggestion()</entry> + </row> + + <row> + <entry>getSelectedItems()</entry> + <entry>Returns the array of + objects</entry> + </row> + + </tbody> + </tgroup> + </table> + </section> + + <section> + <title>Look-and-Feel Customization</title> + + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property> + </emphasis> Default style classes are mapped on <emphasis> + <property>skin parameters.</property> + </emphasis></para> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:suggestionBox&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:suggestionBox&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> + + <section> + <title> Skin Parameters Redefinition</title> + + <table> + <title>General skin parameters redefinition for popup list</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Parameters for popup list</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> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for shadow element of the list</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Parameters for shadow element of + the list</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>shadowBackgroundColor</entry> + + <entry>background-color</entry> + </row> + + <row> + <entry>shadowBackgroundColor</entry> + + <entry>border-color</entry> + </row> + + <row> + <entry>shadowOpacity</entry> + + <entry>opacity</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for popup table rows</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Parameters for popup table rows</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>generalSizeFont</entry> + + <entry>font-size</entry> + </row> + + <row> + <entry>generalTextColor</entry> + + <entry>color</entry> + </row> + + <row> + <entry>generalFamilyFont</entry> + + <entry>font-family</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for selected row</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Parameters for selected row</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>headerBackgroundColor</entry> + + <entry>background-color</entry> + </row> + + <row> + <entry>generalSizeFont</entry> + + <entry>font-size</entry> + </row> + + <row> + <entry>generalFamilyFont</entry> + + <entry>font-family</entry> + </row> + <row> + <entry>headerTextColor</entry> + + <entry>color</entry> + </row> + + </tbody> + </tgroup> + </table> + </section> + + <section> + <title>Definition of Custom Style Classes</title> + + <figure> + <title>Classes names</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox_cn.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>On the screenshot, there are classes names defining specified elements.</para> + + <table id="suggBoxC"> + <title>Classes names that define a suggestionBox</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-sb-common-container</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; element of + a suggestion container</entry> + </row> + + <row> + <entry>rich-sb-ext-decor-1</entry> + + <entry>Defines styles for the first + wrapper &lt;div&gt; + element of a suggestion box + exterior</entry> + </row> + + <row> + <entry>rich-sb-ext-decor-2</entry> + + <entry>Defines styles for the second + wrapper &lt;div&gt; + element of a suggestion box + exterior</entry> + </row> + + <row> + <entry>rich-sb-ext-decor-3</entry> + + <entry>Defines styles for the third + wrapper &lt;div&gt; + element of a suggestion box + exterior</entry> + </row> + + <row> + <entry>rich-sb-overflow</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; + element</entry> + </row> + + <row> + <entry>rich-sb-int-decor-table</entry> + + <entry>Defines styles for a suggestion + box table</entry> + </row> + + <row> + <entry>rich-sb-int</entry> + + <entry>Defines the styles for a + suggestion box table rows + (tr)</entry> + </row> + + <row> + <entry>rich-sb-cell-padding</entry> + + <entry>Defines the styles for suggestion + box table cells (td)</entry> + </row> + + <row> + <entry>rich-sb-int-sel</entry> + + <entry>Defines styles for a selected + row</entry> + </row> + + <row> + <entry>rich-sb-shadow</entry> + + <entry>Defines styles for a suggestion + boxshadow</entry> + </row> + + </tbody> + </tgroup> + </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:suggestionBox&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="suggBoxC"> above</link>) and define + necessary properties in them. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .rich-sb-int{ font-weight:bold; } -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font weight for rows was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:suggestionBox&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:suggestionBox&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/suggestionbox_pc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example the font weight for rows was changed.</para> + + <para>Also it&apos;s possible to change styles of particular <emphasis + role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis> component. In this case you should create own style + classes and use them in corresponding <emphasis role="bold"> + <property>&lt;rich:suggestionBox&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{ background-color:#f0ddcd; } -...]]></programlisting> - <para>The <emphasis><property>&quot;selectedClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:suggestionBox&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:suggestionbox ... selectedClass="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/suggestionbox_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above,background color for selected item was changed.</para> - - - - </section> +...]]></programlisting> + <para>The <emphasis> + <property>&quot;selectedClass&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis> is defined as it&apos;s shown in the example below:</para> - - - <section> - <title>Relevant Resources Links</title> - <para> - Additional information on how to build - <emphasis role="bold"> - <property>&lt;rich:HtmlSuggestionBox&gt;</property> - </emphasis> - dynamically you can read - <ulink - url="http://wiki.jboss.org/wiki/RichFacesCookBookCreatingSuggestionB... - here - </ulink> - . - </para> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/suggestionB... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:suggestionBox&gt;</property></emphasis> usage and sources for the given - example. </para> - </section> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<rich:suggestionbox ... selectedClass="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/suggestionbox_oc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above,background color for selected + item was changed.</para> + + + + </section> + + + + <section> + <title>Relevant Resources Links</title> + <para> Additional information on how to build <emphasis role="bold"> + <property>&lt;rich:HtmlSuggestionBox&gt;</property> + </emphasis> dynamically you can read <ulink + url="http://wiki.jboss.org/wiki/RichFacesCookBookCreatingSuggestionB... + > here </ulink> . </para> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/suggestionB... + >Here</ulink> you can see the example of <emphasis + role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis> usage and sources for the given example. </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 06:32:42 UTC (rev 10612) +++ trunk/docs/userguide/en/src/main/docbook/included/support.xml 2008-09-30 08:29:23 UTC (rev 10613) @@ -1,65 +1,70 @@ <?xml version='1.0' encoding='UTF-8'?> <chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:support</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Support</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.AjaxSupport</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlAjaxSupport</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.AjaxSupportRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating on a page</title> - <para>To use a component, place <emphasis role="bold"> - <property>&lt;a4j:support&gt;</property> - </emphasis> as nested to the component requesting Ajax functionality and specify an event of a - parent component that generates Ajax request and the components to be rerendered after a response - from the server.</para> - <para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[<h:inputText value="#{bean.text}"> + <chapterinfo> + <keywordset> + <keyword>a4j:support</keyword> + </keywordset> + </chapterinfo> + <table> + <title>Component identification parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Support</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.AjaxSupport</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlAjaxSupport</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.AjaxSupportRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + + <section> + <title>Creating on a page</title> + <para>To use a component, place <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> as nested to the component requesting Ajax functionality + and specify an event of a parent component that generates Ajax request + and the components to be rerendered after a response from the server.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<h:inputText value="#{bean.text}"> <a4j:support event="onkeyup" reRender="repeater"/> </h:inputText> <h:outputText id="repeater" value="#{bean.text}"/>]]></programlisting> - <para>On every keyup event generated by an input field, a form is submitted on the server with the help of Ajax and - on a response coming from the server, element with <code>repeater</code> id, founded in a DOM tree is - redrawn according to a new data from the response.</para> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - <para>In order to add <emphasis role="bold"> - <property>&lt;a4j:support&gt;</property> - </emphasis> in Java code you should add it as <emphasis><property>facet</property></emphasis>, not children:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[HtmlInputText inputText = new HtmlInputText(); + <para>On every keyup event generated by an input field, a form is submitted on + the server with the help of Ajax and on a response coming from the + server, element with <code>repeater</code> id, founded in a DOM tree + is redrawn according to a new data from the response.</para> + </section> + <section> + <title>Creating the Component Dynamically Using Java</title> + <para>In order to add <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> in Java code you should add it as <emphasis> + <property>facet</property> + </emphasis>, not children:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[HtmlInputText inputText = new HtmlInputText(); ... HtmlAjaxSupport ajaxSupport = new HtmlAjaxSupport(); ajaxSupport.setActionExpression(FacesContext.getCurrentInstance().getApplication().getExpressionFactory().createMethodExpression( @@ -68,66 +73,112 @@ ajaxSupport.setReRender("output"); inputText.getFacets().put("a4jsupport", ajaxSupport); ]]></programlisting> - </section> - <section> - <title>Key attributes and ways of usage</title> - <para><emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> addition is very similar to correspondent event redefinition of a component, i.e. -</para> - <para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[... + </section> + <section> + <title>Key attributes and ways of usage</title> + <para><emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> addition is very similar to correspondent event + redefinition of a component, i.e. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <h:inputText value="#{bean.text}"> <a4j:support event="onkeyup" reRender="output" action="#{bean.action}"/> </h:inputText> -...]]></programlisting> -<para>Is decoded on a page as:</para> +...]]></programlisting> + <para>Is decoded on a page as:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> -<programlisting role="XML"><![CDATA[ + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[ <input onkeyup="A4J.AJAX.Submit( Some request parameters )"/> ]]></programlisting> - <para>As you see from the code, the <emphasis><property>&quot;onkeyup&quot;</property></emphasis> -event calls a utility RichFaces method that submit a form creating a special marks for a filter informing that it is an Ajax request. Thus, any supports quantity could be added to every component, the supports define component behavior on these events. </para> - <note> - <para>The components: <emphasis role="bold"><property>&lt;a4j:commandLink&gt;</property></emphasis>, <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis>, <emphasis role="bold"> - <property>&lt;a4j:poll&gt;</property> - </emphasis> and others from RichFaces library are already supplied with <emphasis role="bold"> - <property>&lt;a4j:support&gt;</property> - </emphasis> functionality and there is no necessity to add the support to them. </para> - </note> - <para>With the help of <emphasis > - <property>&quot;onsubmit&quot;</property></emphasis> and <emphasis > - <property>&quot;oncomplete&quot;</property></emphasis> attributes the component allows using JavaScript before (for request sending conditions checking) and after an Ajax response processing termination (for performance of user-defined activities on the client) </para> - <para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[<h:selectOneMenu value="#{bean.text}"> + <para>As you see from the code, the <emphasis> + <property>&quot;onkeyup&quot;</property> + </emphasis> event calls a utility RichFaces method that submit a form + creating a special marks for a filter informing that it is an Ajax + request. Thus, any supports quantity could be added to every + component, the supports define component behavior on these events. </para> + <note> + <para>The components: <emphasis role="bold"> + <property>&lt;a4j:commandLink&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> and others from RichFaces library are already + supplied with <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> functionality and there is no necessity to add + the support to them. </para> + </note> + <para>With the help of <emphasis> + <property>&quot;onsubmit&quot;</property> + </emphasis> and <emphasis> + <property>&quot;oncomplete&quot;</property> + </emphasis> attributes the component allows using JavaScript before + (for request sending conditions checking) and after an Ajax response + processing termination (for performance of user-defined activities on + the client) </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<h:selectOneMenu value="#{bean.text}"> <f:selectItem itemValue="First Item" itemLabel="First Item"/> <f:selectItem itemValue=" Second Item" itemLabel="Second Item"/> <f:selectItem itemValue=" Third Item" itemLabel="Third Item"/> <a4j:support event="onblur" reRender="panel" onsubmit="if(!confirm('Are you sure to change the option ?')) {form.reset(); return false;}" oncomplete="alert('Value succesfully stored')"/> </h:selectOneMenu>]]></programlisting> - <para>In example there is the condition checking (confirm) is used before request sending and message printing after the request processing is over. </para> - <para>The components allows different Ajax request managing ways for its various optimization in particular conditions such as: -<itemizedlist> - <listitem><para> - <emphasis role="bold">Limitation of the submit area and updating area for the request.</emphasis></para> - <para><emphasis ><property>&quot;ajaxSingle&quot;</property></emphasis> is an attribute that allows submission on the server only component sending a request, as if the component presented on a separate form. - -</para> - <para><emphasis ><property>&quot;limitToList&quot;</property></emphasis> is an attribute that allows to limit areas, which are updated after the responses. Only these components defined in the <emphasis><property> &quot;reRender&quot; </property></emphasis>attribute are updated. </para> - </listitem> - </itemizedlist></para> - <para><emphasis role="bold">Example 1:</emphasis></para> - <programlisting role="XML"><![CDATA[<h:form> + <para>In example there is the condition checking (confirm) is used before + request sending and message printing after the request processing is + over. </para> + <para>The components allows different Ajax request managing ways for its various + optimization in particular conditions such as: <itemizedlist> + <listitem> + <para> + <emphasis role="bold">Limitation of the + submit area and updating area + for the request.</emphasis> + </para> + <para><emphasis> + <property>&quot;ajaxSingle&quot;</property> + </emphasis> is an attribute that allows + submission on the server only component + sending a request, as if the component + presented on a separate form. </para> + <para><emphasis> + <property>&quot;limitToList&quot;</property> + </emphasis> is an attribute that allows + to limit areas, which are updated after + the responses. Only these components + defined in the <emphasis> + <property> + &quot;reRender&quot; + </property> + </emphasis>attribute are updated. + </para> + </listitem> + </itemizedlist></para> + <para> + <emphasis role="bold">Example 1:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<h:form> <h:inputText value="#{person.name}"> <a4j:support event="onkeyup" reRender="test" ajaxSingle="true"/> </h:inputText> <h:inputText value="#{person.middleName}"/> </form>]]></programlisting> - <para>In this example the request contains only the input component causes the request generation, not all the components contained on a form, because of <code>ajaxSingle=&quot;true&quot;</code> usage. </para> - <para><emphasis role="bold">Example 2:</emphasis></para> - <programlisting role="XML"><![CDATA[<h:form> + <para>In this example the request contains only the input component causes the + request generation, not all the components contained on a form, + because of <code>ajaxSingle=&quot;true&quot;</code> usage. </para> + <para> + <emphasis role="bold">Example 2:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<h:form> <a4j:outputPanel ajaxRendered="true"> <h:messages/> </a4j:outputPanel> @@ -136,43 +187,84 @@ </h:inputText> <h:outputText value="#{person.name}" id="test"/> </form>]]></programlisting> - <para>In this example the component <emphasis role="bold"><property>&lt;h:messages&gt;</property></emphasis> is always updated (as it capturing all Ajax requests, located in ajaxRendered <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis>), except the case when a response is sent from the input component from the example. On sending this component marks that updating area is limited to the defined in it components, it means that on its usage with <code>limitToList=&quot;true&quot;</code> the only component updated is the one with <code>id=&quot;test&quot;</code>.</para> - <itemizedlist> - <listitem><para> - <emphasis role="bold">Limitation of requests frequency and updates quantity after the responses. </emphasis></para> - <para><emphasis ><property>&quot;requestDelay&quot;</property></emphasis> is an attribute that defines a time interval in seconds minimally permissible between responses. - -</para> - <para><emphasis ><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 this time is over, the waiting event is taken away, replacing with a new one. - -</para> - <para><emphasis ><property>&quot;ignoreDupResponces&quot;</property></emphasis> is an attribute that allows to disable any updates on the client after an Ajax request if another Ajax request is already sent. -</para> - <para><emphasis ><property>&quot;timeout&quot;</property></emphasis> is an attribute that allows to set a time interval in millisecond to define a maximum time period of response wait time. In case of the interval interaction, a new request is sent and the previous one is canceled. Postprocessing of a response isn't performed. -</para> - <para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[<h:form> + <para>In this example the component <emphasis role="bold"> + <property>&lt;h:messages&gt;</property> + </emphasis> is always updated (as it capturing all Ajax requests, + located in ajaxRendered <emphasis role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis>), except the case when a response is sent from the input + component from the example. On sending this component marks that + updating area is limited to the defined in it components, it means + that on its usage with + <code>limitToList=&quot;true&quot;</code> the only component + updated is the one with <code>id=&quot;test&quot;</code>.</para> + <itemizedlist> + <listitem> + <para> + <emphasis role="bold">Limitation of requests + frequency and updates quantity after the + responses. </emphasis> + </para> + <para><emphasis> + <property>&quot;requestDelay&quot;</property> + </emphasis> is an attribute that defines a time + interval in seconds minimally permissible between + responses. </para> + <para><emphasis> + <property>&quot;eventsQueue&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 + this time is over, the waiting event is taken + away, replacing with a new one. </para> + <para><emphasis> + <property>&quot;ignoreDupResponces&quot;</property> + </emphasis> is an attribute that allows to disable + any updates on the client after an Ajax request if + another Ajax request is already sent. </para> + <para><emphasis> + <property>&quot;timeout&quot;</property> + </emphasis> is an attribute that allows to set a + time interval in millisecond to define a maximum + time period of response wait time. In case of the + interval interaction, a new request is sent and + the previous one is canceled. Postprocessing of a + response isn't performed. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<h:form> <h:inputText value="#{person.name}"> <a4j:support event="onkeyup" reRender="test" requestDelay="1000" ignoreDupResponces="true" eventsQueue="myQueue"/> </h:inputText> <h:outputText value="#{person.name}" id="test"/> </form>]]></programlisting> - <para>This example clearly shows mentioned above attributes. If quick typing in a text field happens, every next requests sending is delayed for a second and requests quantity is reduced. The requests are kept in the queue till its the sending. -Moreover, if the next request is already sent, the rerendering after the previous request is banned, and - it helps to avoid unnecessary processing on the client.</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> - </section> - - <section> - <title>Relevant resources links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf... you can see the example of <emphasis role="bold" - ><property>&lt;a4j:support&gt;</property></emphasis> usage and sources for the given example. - </para> - </section> - </chapter> \ No newline at end of file + <para>This example clearly shows mentioned above attributes. + If quick typing in a text field happens, every + next requests sending is delayed for a second and + requests quantity is reduced. The requests are + kept in the queue till its the sending. Moreover, + if the next request is already sent, the + rerendering after the previous request is banned, + and it helps to avoid unnecessary processing on + the client.</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> + </section> + + <section> + <title>Relevant resources links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf... + >Here</ulink> you can see the example of <emphasis + role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</chapter> Modified: trunk/docs/userguide/en/src/main/docbook/included/tabPanel.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/tabPanel.xml 2008-09-30 06:32:42 UTC (rev 10612) +++ trunk/docs/userguide/en/src/main/docbook/included/tabPanel.xml 2008-09-30 08:29:23 UTC (rev 10613) @@ -1,55 +1,55 @@ -<?xml version='1.0' encoding='UTF-8'?> +f<?xml version='1.0' encoding='UTF-8'?> <section> - <sectioninfo> - <keywordset> - <keyword>tab</keyword> - <keyword>rich:tabPanel</keyword> - <keyword>HtmltabPanel</keyword> - </keywordset> - </sectioninfo> + <sectioninfo> + <keywordset> + <keyword>tab</keyword> + <keyword>rich:tabPanel</keyword> + <keyword>HtmltabPanel</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.tabPanel</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmltabPanel</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.tabPanel</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.tabPanelRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.tabPanelTag</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.tabPanel</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmltabPanel</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.tabPanel</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.tabPanelRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.tabPanelTag</entry> + </row> + </tbody> + </tgroup> + </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> + <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> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:tabPanel> <!--//Set of Tabs inside--> <rich:tab> @@ -58,67 +58,89 @@ </rich:tabPanel> ... ]]></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.HtmltabPanel; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmltabPanel; ... HtmltabPanel mytabPanel = new HtmltabPanel(); ... ]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>As it was mentioned <link linkend="tabPanel">above</link>, <property>tabPanel</property> groups content on panels and - performs switching from one to another. Hence, modes of switching between panels are described - first of all.</para> - <note><title>Note:</title><para> All <property>tabPanels</property> should be wrapped into a form - element so as content is correctly submitted inside. If a form is placed into each tab, the - Action elements of Tab controls appear to be out of the form and content submission inside the - panels could be performed only for Action components inside tabs.</para></note> - <para>Switching mode could be chosen with the <property>tabPanel</property> attribute <emphasis> - <property>&quot;mode&quot;</property> - </emphasis> with three possible parameters.</para> - <itemizedlist> - <listitem><para><code>Server</code> (DEFAULT)</para><para>The common submission is performed around - <property>tabPanel</property> and a page is completely rendered on a called panel. Only - one at a time <property>tabPanel</property> is uploaded onto the client side.</para> - </listitem> - <listitem><para> <code>Ajax</code></para><para>AJAX form submission is performed around the - <property>tabPanel</property>, content of the called <property>tabPanel</property> is - uploaded on Ajax request and additionally specified elements in the <emphasis> - <property>&quot;reRender&quot;</property> - </emphasis> attribute are rendered. Only one at a time <property>tabPanel</property> is - uploaded on the client.</para> - </listitem> - <listitem><para> <code>Client</code></para><para> All <property>tabPanels</property> are uploaded on the client side. - The switching from the active to the hidden <property>panel</property> is performed with - client JavaScript.</para> - </listitem> - </itemizedlist> - <para>As a result, the <property>tabPanel</property> is switched to the second tab according to - the action returning outcome for moving onto another page and switching from the second to the - first tab is performed.</para> - <para>There is also the <emphasis> - <property>&quot;selectedTab&quot;</property> - </emphasis> attribute. The attribute keeps an active tab name; therefore, an active - <property>tabPanel</property> could be changed with setting a name of the necessary tab to - this attribute.</para> - <para>There is also the <emphasis> - <property>&quot;headerAlignment&quot;</property> - </emphasis> attribute responsible for rendering of <property>tabPanel</property> components. - The attribute has several values: &quot;left&quot; (Default), &quot;right&quot;, &quot;center&quot;, which specify Tabs components - location on the top of the tabPanel.</para> + </section> + <section> + <title>Details of Usage</title> + <para>As it was mentioned <link linkend="tabPanel">above</link>, + <property>tabPanel</property> groups content on panels and + performs switching from one to another. Hence, modes of switching + between panels are described first of all.</para> + <note> + <title>Note:</title> + <para> All <property>tabPanels</property> should be wrapped into a + form element so as content is correctly submitted inside. If + a form is placed into each tab, the Action elements of Tab + controls appear to be out of the form and content submission + inside the panels could be performed only for Action + components inside tabs.</para> + </note> + <para>Switching mode could be chosen with the <property>tabPanel</property> + attribute <emphasis> + <property>&quot;switchType&quot;</property> + </emphasis> with three possible parameters.</para> + <itemizedlist> + <listitem> + <para><code>Server</code> (DEFAULT)</para> + <para>The common submission is performed around + <property>tabPanel</property> and a page + is completely rendered on a called panel. Only one + at a time <property>tabPanel</property> is + uploaded onto the client side.</para> + </listitem> + <listitem> + <para> + <code>Ajax</code> + </para> + <para>AJAX form submission is performed around the + <property>tabPanel</property>, content + of the called <property>tabPanel</property> is + uploaded on Ajax request. Only one at a + time <property>tabPanel</property> is uploaded on + the client.</para> + </listitem> + <listitem> + <para> + <code>Client</code> + </para> + <para> All <property>tabPanels</property> are uploaded on + the client side. The switching from the active to + the hidden <property>panel</property> is performed + with client JavaScript.</para> + </listitem> + </itemizedlist> + <para>As a result, the <property>tabPanel</property> is switched to the second + tab according to the action returning outcome for moving onto another + page and switching from the second to the first tab is performed.</para> + <para>There is also the <emphasis> + <property>&quot;selectedTab&quot;</property> + </emphasis> attribute. The attribute keeps an active tab name; + therefore, an active <property>tabPanel</property> could be changed + with setting a name of the necessary tab to this attribute.</para> + <para>There is also the <emphasis> + <property>&quot;headerAlignment&quot;</property> + </emphasis> attribute responsible for rendering of + <property>tabPanel</property> components. The attribute has several + values: &quot;left&quot; (Default), &quot;right&quot;, + &quot;center&quot;, which specify Tabs components location on + the top of the tabPanel.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:tabPanel width="40%" headerAlignment="right"> <rich:tab label="Canon"> ... @@ -133,276 +155,327 @@ ... ]]></programlisting> - <figure> - <title><emphasis role="bold"><property>&lt;rich:tabPanel&gt;</property></emphasis> with right aligned tabs</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tabPanel2.png"/> - </imageobject> - </mediaobject> - </figure> - <para> - The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute is a generic attribute. - The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute provides an association between a component, and the message that the component (indirectly) produced. - This attribute defines the parameters of localized error and informational messages that - occur as a result of conversion, validation, or other application actions during the request - processing lifecycle. With the help of this attribute you can replace the - last parameter substitution token shown in the messages. For example, {1} for <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, {2} - for <code>&quot;ShortConverter.SHORT&quot;</code>. - </para> - <para>Except the specific attributes, the component has all necessary attributes for JavaScript - events definition.</para> - <itemizedlist> - <listitem><para> <emphasis><property>&quot;onmouseover&quot;</property></emphasis> </para></listitem> - <listitem><para> <emphasis><property>&quot;onmouseout&quot;</property></emphasis> </para></listitem> - <listitem><para> etc. </para></listitem> - </itemizedlist> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:tabPanel&gt;</property> + </emphasis> with right aligned tabs</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tabPanel2.png"/> + </imageobject> + </mediaobject> + </figure> + <para> The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute is a generic attribute. The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute provides an association between a component, and + the message that the component (indirectly) produced. This attribute + defines the parameters of localized error and informational messages + that occur as a result of conversion, validation, or other application + actions during the request processing lifecycle. With the help of this + attribute you can replace the last parameter substitution token shown + in the messages. For example, {1} for + <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, + {2} for <code>&quot;ShortConverter.SHORT&quot;</code>. </para> + <para>Except the specific attributes, the component has all necessary attributes + for JavaScript events definition.</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>&quot;onmouseover&quot;</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>&quot;onmouseout&quot;</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> etc. </para> + </listitem> + </itemizedlist> - </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:tabPanel&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:tabPanel&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> + </section> + <section> + <title>Look-and-Feel Customization</title> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a header</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-top-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for an internal content</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-right-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-left-color</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Definition of Custom Style Classes</title> + <para>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>On the screenshot there are classes names that define styles for component elements.</para> - <figure> - - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tabPanel_cn.png" scalefit="1"/> - </imageobject> - </mediaobject> - </figure> + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:tabPanel&gt;</property> + </emphasis> components at once:</para> - <table id="tab_cn5"> - <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-tabpanel</entry> - <entry>Defines styles for all tabPanel</entry> - </row> - <row> - <entry>rich-tabpanel-content</entry> - <entry>Defines styles for an internal content</entry> - </row> - <row> - <entry>rich-tabpanel-content-position</entry> - <entry>Defines styles for a wrapper element of a tabPanel content. It should define a shift equal to borders - width in order to overlap panel tabs</entry> - </row> - <row> - <entry>rich-tabhdr-side-border</entry> - <entry>Defines styles for side elements of a tabPanel header</entry> - </row> - <row> - <entry>rich-tabhdr-side-cell</entry> - <entry>Defines styles for a header internal element</entry> - </row> - <row> - <entry>rich-tab-bottom-line</entry> - <entry>Defines styles for a tab bottom line element of a tabPanel </entry> - </row> - </tbody> - </tgroup> - </table> - - - <table> - <title>Classes names that define different tab header states (corresponds to - rich-tabhdr-side-cell)</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-tabhdr-cell-active</entry> - <entry>Defines styles for an internal element of an active header</entry> - </row> - <row> - <entry>rich-tabhdr-cell-inactive</entry> - <entry>Defines styles for an internal element of an inactive label </entry> - </row> - <row> - <entry>rich-tabhdr-cell-disabled</entry> - <entry>Defines styles for an internal element of a disabled label </entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:tabPanel&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_cn5">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[... + <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:tabPanel&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + + </section> + + <section> + <title>Skin Parameters Redefinition</title> + <table> + <title>Skin parameters redefinition for a header</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>panelBorderColor</entry> + <entry>border-top-color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for an internal content</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>generalTextColor</entry> + <entry>color</entry> + </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-bottom-color</entry> + </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-right-color</entry> + </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-left-color</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + + <section> + <title>Definition of Custom Style Classes</title> + + <para>On the screenshot there are classes names that define styles for component + elements.</para> + <figure> + + <title>Style classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tabPanel_cn.png" + scalefit="1"/> + </imageobject> + </mediaobject> + </figure> + + <table id="tab_cn5"> + <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-tabpanel</entry> + <entry>Defines styles for all + tabPanel</entry> + </row> + <row> + <entry>rich-tabpanel-content</entry> + <entry>Defines styles for an internal + content</entry> + </row> + <row> + <entry>rich-tabpanel-content-position</entry> + <entry>Defines styles for a wrapper + element of a tabPanel content. + It should define a shift equal + to borders width in order to + overlap panel tabs</entry> + </row> + <row> + <entry>rich-tabhdr-side-border</entry> + <entry>Defines styles for side elements + of a tabPanel header</entry> + </row> + <row> + <entry>rich-tabhdr-side-cell</entry> + <entry>Defines styles for a header + internal element</entry> + </row> + <row> + <entry>rich-tab-bottom-line</entry> + <entry>Defines styles for a tab bottom + line element of a tabPanel + </entry> + </row> + </tbody> + </tgroup> + </table> + + + <table> + <title>Classes names that define different tab header states + (corresponds to rich-tabhdr-side-cell)</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tabhdr-cell-active</entry> + <entry>Defines styles for an internal + element of an active + header</entry> + </row> + <row> + <entry>rich-tabhdr-cell-inactive</entry> + <entry>Defines styles for an internal + element of an inactive label + </entry> + </row> + <row> + <entry>rich-tabhdr-cell-disabled</entry> + <entry>Defines styles for an internal + element of a disabled label + </entry> + </row> + </tbody> + </tgroup> + </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:tabPanel&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_cn5">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-tabhdr-cell-active{ font-weight: bold; } -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tabPanel_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a tab active font weight and text color were changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:tabPanel&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:tabPanel&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/tabPanel_pc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example a tab active font weight and text color were changed.</para> + + <para>Also it&apos;s possible to change styles of particular <emphasis + role="bold"> + <property>&lt;rich:tabPanel&gt;</property> + </emphasis> component. In this case you should create own style + classes and use them in corresponding <emphasis role="bold"> + <property>&lt;rich:tabPanel&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-style: italic; } -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:tabPanel&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:tabPanel ... activeTabClass="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/tabPanel_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, font style on inactive tab was changed.</para> - </section> +...]]></programlisting> + <para>The <emphasis> + <property>&quot;styleClass&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:tabPanel&gt; </property> + </emphasis> is defined as it&apos;s shown in the example below:</para> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/tabPanel.js... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:tabPanel&gt;</property></emphasis> usage and sources for the given example. </para> - </section> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<rich:tabPanel ... activeTabClass="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/tabPanel_oc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above, font style on inactive tab was + changed.</para> + </section> + + <section> + <title>Relevant Resources Links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/tabPanel.js... + >Here</ulink> you can see the example of <emphasis + role="bold"> + <property>&lt;rich:tabPanel&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> + </section> Modified: trunk/docs/userguide/en/src/main/docbook/included/togglePanel.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/togglePanel.xml 2008-09-30 06:32:42 UTC (rev 10612) +++ trunk/docs/userguide/en/src/main/docbook/included/togglePanel.xml 2008-09-30 08:29:23 UTC (rev 10613) @@ -1,55 +1,55 @@ <?xml version='1.0' encoding='UTF-8'?> <section> - <sectioninfo> - <keywordset> - <keyword>facet</keyword> - <keyword>rich:togglePanel</keyword> - <keyword>HtmltogglePanel</keyword> - </keywordset> - </sectioninfo> + <sectioninfo> + <keywordset> + <keyword>facet</keyword> + <keyword>rich:togglePanel</keyword> + <keyword>HtmltogglePanel</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.TogglePanel</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlTogglePanel</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.TogglePanel</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.TogglePanelRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.Taglib.togglePanelTag</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.TogglePanel</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlTogglePanel</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.TogglePanel</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.TogglePanelRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.Taglib.togglePanelTag</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 in a page: </para> + <section> + <title>Creating the Component with a Page Tag</title> + <para>Here is a simple example as it could be used in a page: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:togglePanel> <f:facet name="first"> ... @@ -63,62 +63,84 @@ <!--//Set of the toggleControls somewhere on a page.--> ... ]]></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.HtmltogglePanel; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmltogglePanel; ... HtmltogglePanel myPanel = new HtmltogglePanel(); ... ]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>As it was mentioned <link linkend="togglePanel">above</link>, <property>togglePanel</property> splits content into named - facets that become rendered and processed when a click performed on controls linked to this - <property>togglePanel</property> (either switched on the client or send requests on the - server for switching).</para> - <para>The initial component state is defined with <emphasis> - <property>&quot;initialState&quot;</property> - </emphasis> attribute, where a facet name that is shown at first is defined.</para> - <note><title>Note:</title><para> It&apos;s also possible to define an - <emphasis><property>&quot;empty&quot;</property></emphasis> facet to implement the functionality as - drop-down panels have and make the facet active when no content is required to be rendered.</para></note> - <para>Switching mode could be defined with the <emphasis> - <property>&quot;switchType&quot;</property> - </emphasis> attribute with three possible parameters:</para> - <itemizedlist> - <listitem><para> <code>Server</code> (DEFAULT)</para><para>The common submission is performed around - <property>togglePanel</property> and a page is completely rendered on a called panel. - Only one at a time the panel is uploaded onto the client side.</para> - </listitem> - <listitem><para> <code>Ajax</code></para><para>AJAX form submission is performed around the panel, content of the called - panel is uploaded on an Ajax request and additionally specified elements in the <emphasis> - <property>&quot;reRender&quot;</property> - </emphasis> attribute are rendered. Only one at a time the panel is uploaded on the client - side.</para> - </listitem> - <listitem><para> <code>Client</code></para><para> All panels are uploaded on the client side. The switching from the - active to the hidden panel is performed with client JavaScript.</para> - </listitem> - </itemizedlist> - <para>&quot;Facets&quot; switching order could be defined on the side of <emphasis - role="bold"> - <property>&lt;rich:toggleControl&gt;</property> - </emphasis> component or on the panel. On the side of the togglePanel it&apos;s possible - to define facets switching order with the <emphasis> - <property>&quot;stateOrder&quot;</property> - </emphasis> attribute. The facets names are enumerated in such an order that they are rendered - when a control is clicked, as it&apos;s not defined where to switch beforehand.</para> + </section> + <section> + <title>Details of Usage</title> + <para>As it was mentioned <link linkend="togglePanel">above</link>, + <property>togglePanel</property> splits content into named + facets that become rendered and processed when a click performed on + controls linked to this <property>togglePanel</property> (either + switched on the client or send requests on the server for switching).</para> + <para>The initial component state is defined with <emphasis> + <property>&quot;initialState&quot;</property> + </emphasis> attribute, where a facet name that is shown at first is + defined.</para> + <note> + <title>Note:</title> + <para> It&apos;s also possible to define an <emphasis> + <property>&quot;empty&quot;</property> + </emphasis> facet to implement the functionality as + drop-down panels have and make the facet active when no + content is required to be rendered.</para> + </note> + <para>Switching mode could be defined with the <emphasis> + <property>&quot;switchType&quot;</property> + </emphasis> attribute with three possible parameters:</para> + <itemizedlist> + <listitem> + <para> + <code>Server</code> (DEFAULT)</para> + <para>The common submission is performed around + <property>togglePanel</property> and a + page is completely rendered on a called panel. + Only one at a time the panel is uploaded onto the + client side.</para> + </listitem> + <listitem> + <para> + <code>Ajax</code> + </para> + <para>AJAX form submission is performed around the panel, + content of the called panel is uploaded on an Ajax + request . Only one at a + time the panel is uploaded on the client + side.</para> + </listitem> + <listitem> + <para> + <code>Client</code> + </para> + <para> All panels are uploaded on the client side. The + switching from the active to the hidden panel is + performed with client JavaScript.</para> + </listitem> + </itemizedlist> + <para>&quot;Facets&quot; switching order could be defined on the side of + <emphasis role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis> component or on the panel. On the side of the togglePanel + it&apos;s possible to define facets switching order with the <emphasis> + <property>&quot;stateOrder&quot;</property> + </emphasis> attribute. The facets names are enumerated in such an + order that they are rendered when a control is clicked, as + it&apos;s not defined where to switch beforehand.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:togglePanel id="panel" initialState="panelB" switchType="client" stateOrder="panelA,panelB,panelC"> <f:facet name="panelA"> @@ -134,126 +156,146 @@ <rich:toggleControl for="panel" value="Switch"/> ... ]]></programlisting> - <para>The example shows a <property>togglePanel</property> initial state when the second facet - (<code>panelB</code>) is rendered and successive switching from the first to the second happens.</para> - <para> - The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute is a generic attribute. - The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute provides an association between a component, and the message that the component (indirectly) produced. - This attribute defines the parameters of localized error and informational messages that - occur as a result of conversion, validation, or other application actions during the request - processing lifecycle. With the help of this attribute you can replace the - last parameter substitution token shown in the messages. For example, {1} for <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, {2} - for <code>&quot;ShortConverter.SHORT&quot;</code>. - </para> - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>The component doesn&apos;t have its own representation rendering only content of its - facets, thus all look and feel is set only for content.</para> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - <table id="togglePC"> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-toggle-panel</entry> - <entry>Defines styles for all component</entry> - </row> - - <row> - <entry>rich-tglctrl</entry> - <entry>Defines styles for a toggle control</entry> - </row> - - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:togglePanel&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="togglePC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... + <para>The example shows a <property>togglePanel</property> initial state when + the second facet (<code>panelB</code>) is rendered and successive + switching from the first to the second happens.</para> + <para> The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute is a generic attribute. The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute provides an association between a component, and + the message that the component (indirectly) produced. This attribute + defines the parameters of localized error and informational messages + that occur as a result of conversion, validation, or other application + actions during the request processing lifecycle. With the help of this + attribute you can replace the last parameter substitution token shown + in the messages. For example, {1} for + <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, + {2} for <code>&quot;ShortConverter.SHORT&quot;</code>. </para> + </section> + <section> + <title>Look-and-Feel Customization</title> + <para>The component doesn&apos;t have its own representation rendering only + content of its facets, thus all look and feel is set only for + content.</para> + </section> + + <section> + <title>Definition of Custom Style Classes</title> + <table id="togglePC"> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-toggle-panel</entry> + <entry>Defines styles for all + component</entry> + </row> + + <row> + <entry>rich-tglctrl</entry> + <entry>Defines styles for a toggle + control</entry> + </row> + + </tbody> + </tgroup> + </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:togglePanel&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="togglePC"> above</link>) and define + necessary properties in them. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .rich-toggle-panel{ font-style:italic; } -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/togglePanel_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font style for output text was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:togglePanel&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:togglePanel&gt;</property></emphasis> <property>styleClass</property> 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/togglePanel_pc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example the font style for output text was changed.</para> + + <para>Also it&apos;s possible to change styles of particular <emphasis + role="bold"> + <property>&lt;rich:togglePanel&gt;</property> + </emphasis> component. In this case you should create own style + classes and use them in corresponding <emphasis role="bold"> + <property>&lt;rich:togglePanel&gt;</property> + </emphasis> + <property>styleClass</property> attributes. An example is placed + below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .myClass{ background-color:#bed6f8; } -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:togglePanel&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:togglePanel ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>&quot;styleClass&quot;</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/togglePanel_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, background color for panel was changed.</para> - - - - - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/togglePanel... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:togglePanel&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:togglePanel&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:togglePanel ... styleClass="myClass"/> +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with own classes and <emphasis> + <property>&quot;styleClass&quot;</property> + </emphasis> attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/togglePanel_oc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above, background color for panel was + changed.</para> + + + + + </section> + + <section> + <title>Relevant Resources Links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/togglePanel... + >Here</ulink> you can see the example of <emphasis + role="bold"> + <property>&lt;rich:togglePanel&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> + </section>