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

Author: alexsmirnov Date: 2007-10-17 19:09:13 -0400 (Wed, 17 Oct 2007) New Revision: 3436 Added: branches/3.1.x/docs/userguide/en/src/main/docbook/included/jQuery.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/jQuery.xml Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/column.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/columnGroup.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataGrid.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataList.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataTable.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/datascroller.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/gmap.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuGroup.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuItem.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuSeparator.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/message.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/messages.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/modalPanel.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/panel.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBar.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBarItem.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/separator.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/spacer.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/subTable.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/tab.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/tabPanel.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/toggleControl.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/togglePanel.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBar.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/tree.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/treeNode.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/virtualEarth.xml branches/3.1.x/docs/userguide/en/src/main/docbook/master.xml branches/3.1.x/docs/userguide/en/src/main/resources/css/html.css branches/3.1.x/docs/userguide/en/src/main/resources/images/dropDownMenu5.png branches/3.1.x/docs/userguide/pom.xml Log: Merge documentation from the latest trunk Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/column.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/column.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/column.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -198,10 +198,19 @@ <section> <title>Definition of Custom Style Classes</title> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis>attributes.</para> + </section> - <para>To redefine an appearance of all <property>columns</property> on a page, redefine the corresponding class in the CSS file used with the page.</para> - <para>To redefine a style of a particular page, use component class attributes which list is the same as the <property>column</property> one and is known to you.</para> - </section> <section> <title>Relevant Resources Links</title> <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/columnGroup.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/columnGroup.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/columnGroup.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -183,10 +183,17 @@ <section> <title>Definition of Custom Style Classes</title> - <para>To redefine an appearance of all <property>columnGroups</property> on a page, redefine the corresponding class in the - CSS file used with the page.</para> - <para>To redefine a style of a particular page, use component class attributes which list is the same - as the columnGroup one and is known to you.</para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:columnGroup&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:columnGroup&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:columnGroup&gt;</property> + </emphasis>attributes.</para> </section> <section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -152,8 +152,17 @@ </tgroup> </table> - <para>To redefine an appearance of all <property>dataDefinitionLists</property> on a page, just redefine one of this classes.</para> - <para>To redefine a style of a particular <property>dataDefinitionList</property>, use corresponding class attributes on the component.</para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:dataDefinitionList&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:dataDefinitionList&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:dataDefinitionList&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataGrid.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataGrid.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataGrid.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -81,7 +81,7 @@ </itemizedlist> <para>The component is created basing on the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> component and as a result the component could be partially updated with AJAX.</para> - <para>Here is an example for the first screenshot:</para> + <para>Here is an example for <link linkend="dataGrid">the first</link> screenshot:</para> <para> <emphasis role="bold">Example:</emphasis> @@ -121,10 +121,17 @@ - <para>To redefine an appearance of all <property>dataGrids</property> on a page, redefine the corresponding class in - the CSS file used with the page.</para> - <para>To redefine a style of a particular table, use <emphasis ><property>&quot;component class&quot;</property></emphasis> attributes which list is the same - as the <property>dataTable</property> one and is known to you.</para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataList.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataList.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataList.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -149,8 +149,17 @@ </table> - <para>To redefine an appearance of all <property>dataLists</property> on a page, just redefine one of this classes.</para> - <para>To redefine a style of a particular dataList, use corresponding class attributes on the component.</para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -147,8 +147,17 @@ </tgroup> </table> - <para>To redefine an appearance of all <property>dataOrderedLists</property> on a page,just redefine one of this classes.</para> - <para>To redefine a style of a particular dataOrderedList, use corresponding class attributes on the component.</para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataTable.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataTable.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dataTable.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -287,6 +287,10 @@ <entry>Defines styles for a header cell</entry> </row> <row> + <entry>rich-table-header-continue</entry> + <entry>Defines styles for all header lines after the first</entry> + </row> + <row> <entry>rich-table-subheader</entry> <entry>Defines styles for a column header</entry> </row> @@ -303,14 +307,10 @@ <entry>Defines styles for a table row</entry> </row> <row> - <entry>rich-table-subfooter</entry> - <entry>Defines styles for a column footer</entry> + <entry>rich-table-firstrow</entry> + <entry>Defines styles for a table start row</entry> </row> <row> - <entry>rich-table-subfootercell</entry> - <entry>Defines styles for a column footer cell</entry> - </row> - <row> <entry>rich-table-footer</entry> <entry>Defines styles for a footer row</entry> </row> @@ -318,15 +318,32 @@ <entry>rich-table-footercell</entry> <entry>Defines styles for a footer cell</entry> </row> + <row> + <entry>rich-table-footer-continue</entry> + <entry>Defines styles for all footer lines after the first</entry> + </row> + <row> + <entry>rich-table-subfooter</entry> + <entry>Defines styles for a column footer</entry> + </row> + <row> + <entry>rich-table-subfootercell</entry> + <entry>Defines styles for a column footer cell</entry> + </row> </tbody> </tgroup> </table> - <para>To redefine an appearance of all <property>tables</property> on a page, redefine the - corresponding class in the CSS file used with the page.</para> - <para>To redefine a style of a particular page, use <emphasis> - <property>&quot;component class&quot;</property> - </emphasis> attributes which list is the same as the <property>dataTable</property> one and is - known to you.</para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/datascroller.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/datascroller.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/datascroller.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -353,13 +353,22 @@ </thead> <tbody> <row> + <entry>rich-datascr</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a datascroller</entry> + </row> + <row> <entry>rich-dtascroller-table</entry> - <entry>Defines styles for a wrapper table element of the component</entry> + <entry>Defines styles for a wrapper table element of a datascroller</entry> </row> <row> <entry>rich-datascr-button</entry> <entry>Defines styles for a button</entry> </row> + + <row> + <entry>rich-datascr-ctrls-separator</entry> + <entry>Defines styles for a separator between buttons</entry> + </row> </tbody> </tgroup> @@ -389,9 +398,17 @@ </tbody> </tgroup> </table> - <para>To redefine an appearance of all scrollers on a page, just redefine one of these classes</para> - <para>And to redefine the appearance of the particular scroller, one may use corresponding class - attributes on the component.</para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -536,15 +536,27 @@ <entry>Defines styles for a general background list</entry> </row> + + <row> + <entry>rich-menu-list-strut</entry> + + <entry>Defines styles for a wrapper &lt;div&gt; element for a strut of a popup list</entry> + </row> </tbody> </tgroup> </table> - <para>In order to redefine the style for all drop-down menus on a page using CSS, it's enough to - create classes with the same names and define the necessary properties in them.</para> - - <para>To change the style peculiarities of the particular drop-down menus define your own style - classes in the corresponding dropDownMenu attributes.</para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis>attributes.</para> </section> <section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/gmap.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/gmap.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/gmap.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -163,9 +163,35 @@ </section> <section> <title>Definition of Custom Style Classes</title> - <para>rich-gmap is a predefined style class for the map. It&apos;s possible to define some - standard properties for all <property>maps</property> components on a page (padding, border, - etc.) with the definition of the component.</para> + <table> + <title>Classes names that define a map appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-gmap</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a gmap</entry> + </row> + </tbody> + </tgroup> + </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:gmap&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create class with the + same name and define necessary properties in it.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:gmap&gt;</property> + </emphasis> components, define your own style class in the corresponding <emphasis + role="bold"> + <property>&lt;rich:gmap&gt;</property> + </emphasis>attribute.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -308,7 +308,7 @@ <tbody> <row> <entry>rich-slider</entry> - <entry>Defines styles for a wrapper table element of the component</entry> + <entry>Defines styles for a wrapper table element of a component</entry> </row> <row> <entry>rich-inslider-track</entry> @@ -341,20 +341,24 @@ </tbody> </tgroup> </table> - <para>It&apos;s necessary only to define a class according to the corresponding name, so as - an appearance of all <property>sliders</property> on a page is changed at once. </para> - <para>To redefine appearance of particular <property>sliders</property>, it&apos;s possible - to define your own CSS class with one of the names listed there. And then just define one of - the components class attributes modifying component style properties.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:inputNumberSlider&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:inputNumberSlider&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:inputNumberSlider&gt;</property> + </emphasis>attributes.</para> + <para>CSS code piece used on a page:</para> <para> <emphasis role="bold">Example:</emphasis> </para> - <programlisting role="HTML"><![CDATA[... + <programlisting role="CSS"><![CDATA[... .rich-slider-handle{ border:2px solid; } Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -219,7 +219,7 @@ <tbody> <row> <entry>rich-spinner-c</entry> - <entry>Defines styles for a wrapper table element of the component</entry> + <entry>Defines styles for a wrapper table element of a component</entry> </row> <row> <entry>rich-spinner-input-container</entry> @@ -236,16 +236,18 @@ </tbody> </tgroup> </table> - <para>It&apos;s necessary only to define a class according to the corresponding name, so as - an appearance of all <property>spinners</property> on a page is changed at once. </para> - <para>To redefine appearance of the particular <property>spinner</property>, it&apos;s - possible to define your own CSS class. Then it&apos;s necessary just to define it in one - of the <emphasis> - <property>&quot;components class&quot;</property> - </emphasis> attributes modifying component style properties.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </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 and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:inputNumberSpinner&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:inputNumberSpinner&gt;</property> + </emphasis>attributes.</para> + <para>CSS code piece used on a page:</para> <para> Copied: branches/3.1.x/docs/userguide/en/src/main/docbook/included/jQuery.desc.xml (from rev 3435, tags/3.1.2.GA/docs/userguide/en/src/main/docbook/included/jQuery.desc.xml) =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/jQuery.desc.xml (rev 0) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/jQuery.desc.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> + <sectioninfo> + <keywordset> + <keyword>jQuery</keyword> + </keywordset> + </sectioninfo> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> allows to apply styles and behaviour to DOM objects.</para> + + <!--mediaobject> + <imageobject> + <imagedata fileref="images/jQuery.png"/> + </imageobject> + </mediaobject--> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem>Presents jQuery JavaScript framework functionality</listitem> + <listitem>Allows to apply onto JSF components and other DOM objects.</listitem> + <listitem>Works without conflicts with prototype.js library</listitem> + </itemizedlist> + </section> +</section> Copied: branches/3.1.x/docs/userguide/en/src/main/docbook/included/jQuery.xml (from rev 3435, tags/3.1.2.GA/docs/userguide/en/src/main/docbook/included/jQuery.xml) =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/jQuery.xml (rev 0) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/jQuery.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -0,0 +1,344 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> + <sectioninfo> + <keywordset> + <keyword>jQuery</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.JQuery</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlJQuery</entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.JQuery</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.JQueryRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.JQueryTag</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> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <rich:jQuery selector="#customList tr:odd" timing="onload" query="addClass(odd)" /> +...]]></programlisting> + </section> + + <section> + <title>Creating the Component Dynamically Using Java</title> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlJQuery; +... +HtmlJQuery myJQuery = new HtmlJQuery(); +... +]]></programlisting> + </section> + + <section> + <title>Details of Usage</title> + <para><emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> can be used in two main modes:</para> + <itemizedlist> + <listitem>as a one-time query applied immediately or on a document ready event</listitem> + <listitem>as a JavaScript function that can be invoked from the JavaScript code</listitem> + </itemizedlist> + <para>The mode is chosen with <emphasis> + <property>&quot;timing&quot;</property> + </emphasis> attribute that has the following options:</para> + <itemizedlist> + <listitem>immediate - applying a query immediately</listitem> + <listitem>onload - applying a query when a document is loaded</listitem> + <listitem>onJScall - applying a query by invoked JavaScript function defined with the <emphasis> + <property>&quot;name&quot;</property> + </emphasis> attribute</listitem> + </itemizedlist> + <para>Definition of the <emphasis> + <property>&quot;name&quot;</property> + </emphasis> attribute is mandatory when the value of <emphasis> + <property>&quot;timing&quot;</property> + </emphasis> attribute is <property>&quot;onJScall&quot;</property>. If the<emphasis> + <property>&quot;name&quot;</property> + </emphasis> attribute is defined when <emphasis> + <property>&quot;timing&quot;</property> + </emphasis> value equals to <property>&quot;immediate&quot;</property> or + <property>&quot;onload&quot;</property>, the query is applied according to this + value, but you still have an opportunity to invoke it by a function name.</para> + <para>The <emphasis> + <property>&quot;selector&quot;</property> + </emphasis> attribute defines an object or a list of objects. The query is defined with the <emphasis> + <property>&quot;query&quot;</property> + </emphasis>attribute.</para> + <para>Here is an example of how to highlight odd rows in a table:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <style> + .odd { + background-color: #FFC; + } + </style> + ... + + <rich:table id="customList" ...> + ... + </rich:table> + ... + <rich:jQuery selector="#customList tr:odd" timing="onload" query="addClass(odd)" /> +...]]></programlisting> + <para>The <emphasis> + <property>&quot;selector&quot;</property> + </emphasis> attribute uses defined by w3c consortium syntax for CSS rule <ulink + url="http://www.w3.org/TR/REC-CSS2/selector.html">selector&l... with some jQuery + extensions. </para> + <para>Those are typical examples of using selector in the <emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> component.</para> + + <table> + <title>Examples of using selector</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Selector</entry> + + <entry>Comment</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>&quot;p[a]&quot;</entry> + <entry>In a document all &quot;p&quot; tags with &quot;a&quot; tag + inside are selected</entry> + </row> + + <row> + <entry>&quot;ul/li&quot;</entry> + <entry>All &quot;li&quot; elements of unordered &quot;ul&quot; lists are selected + </entry> + </row> + + <row> + <entry>&quot;p.foo[a]&quot;</entry> + <entry>All &quot;p&quot; tags with &quot;foo&quot; class and inserted + &quot;a&quot; tag are selected</entry> + </row> + + <row> + <entry>&quot;input[@name=bar]&quot;</entry> + <entry>All &quot;input&quot; tags with &quot;name&quot; attribute which + value is &quot;bar&quot; are selected</entry> + </row> + + <row> + <entry>&quot;input[@type=radio][@checked]&quot;</entry> + <entry>All &quot;input&quot; tags with attribute + &quot;type&quot;=&quot;radio&quot; and attribute value = + &quot;chekced&quot; are selected</entry> + </row> + + <row> + <entry>&quot;p,span,td&quot;</entry> + <entry>All tag elements &quot;p&quot; or&quot;span&quot; or + &quot;td&quot; are selected</entry> + </row> + + <row> + <entry>&quot;p#secret&quot;</entry> + <entry>&quot;p&quot; paragraph element with &quot;id&quot; + identification = &quot;secret&quot; is selected</entry> + </row> + + <row> + <entry>&quot;p span&quot;</entry> + <entry>&quot;span&quot; tag is a (direct or non-direct) child of + &quot;p&quot; tag. If it&apos;s necessary, use &quot;p > + span&quot; or &quot;p/span&quot; is selected</entry> + </row> + + <row> + <entry>&quot;p[@foo^=bar]&quot;</entry> + <entry>&quot;p&quot; tag containing &quot;foo&quot; attribute with + textual value beginning with &quot;bar&quot; word is selected</entry> + </row> + + <row> + <entry>&quot;p[@foo$=bar] &quot;</entry> + <entry>&quot;p&quot; tag containing &quot;foo&quot; attribute with + textual value ending with &quot;bar&quot; word is selected</entry> + </row> + + <row> + <entry>&quot;p[@foo*=bar] &quot;</entry> + <entry>&quot;p&quot; tag with &quot;foo&quot; attribute containing + substring &quot;bar&quot; in any place is selected</entry> + </row> + + <row> + <entry>&quot;p//span &quot;</entry> + <entry>&quot;span&quot; tag that is a (direct or non-direct) child of + &quot;p&quot; tag is selected</entry> + </row> + + <row> + <entry>&quot;p/../span &quot;</entry> + <entry>&quot;span&quot; tag that is a grandchild of &quot;p&quot; tag is selected</entry> + </row> + + </tbody> + </tgroup> + </table> + + <para>In addition, RichFaces allows using either a component id or client id if you apply the + query to a JSF component. When you define a selector, RichFaces examines its content and + tries to replace the defined in the selector id with component id if it's found.</para> + <para>For example, you have the following code:</para> + + <programlisting role="XML"><![CDATA[... + <h:form id="form"> + ... + <h:panelGrid id="menu"> + <h:graphicImage ... /> + <h:graphicImage ... /> + ... + </h:panelGrid> + </h:form> +...]]></programlisting> + + <para>The actual id of the <emphasis role="bold"> + <property>&lt;h:panelGrid&gt;</property> + </emphasis> table in the browser DOM is &quot;form:menu&quot;. However, you still can + reference to images inside this table using the following selector: </para> + + <programlisting role="XML"><![CDATA[... + <rich:jQuery selector="#menu img" query="..." /> +...]]></programlisting> + + <para>You can define the exact id in the selector if you want. The following code reference to + the same set of a DOM object:</para> + + <programlisting role="XML"><![CDATA[... + <rich:jQuery selector="#form\\:menu img" query="..." /> +...]]></programlisting> + + <para>Pay attention to double slashes that escape a colon in the id.</para> + + <para>In case when the <emphasis> + <property>&quot;name&quot;</property> + </emphasis> attribute is defined, <emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> generates a JavaScript function that might be used from any place of JavaScript + code on a page.</para> + + <para>There is an example of how to enlarge the picture smoothly on mouse over event and return + back to the normal size on mouse out:</para> + + <programlisting role="XML"><![CDATA[... + <h:graphicImage onmouseover="enlargePic(this)" width="50" value="/images/price.gif" + onmouseover="enlargePic(this, {pwidth:'60px'})" onmouseover="releasePic(this)" /> + <h:graphicImage onmouseover="enlargePic(this)" width="50" value="/images/discount.gif" + onmouseover="enlargePic(this, {pwidth:'100px'})" onmouseover="releasePic(this)" /> + ... + <rich:jQuery name="enlargePic" timing="onJScall" query="animate({width:param.pwidth})" /> + <rich:jQuery name="releasePic" timing="onJScall" query="animate({width:'50px'})"/> +...]]></programlisting> + + <para>The JavaScript could use two parameters. The first parameter is a replacement for the + selector attribute. Thus, you can share the same query, applying it to the different DOM + objects. You can use a literal value or a direct reference for an existing DOM object. The + second parameter can be used to path the specific value inside the query. The JSON syntax is + used for the second parameter. The &quot;param.&quot; namespace is used for + referencing data inside the parameter value.</para> + + <para><emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> adds styles and behavior to the DOM object dynamically. This means if you replace + something on a page during an Ajax response, the applied artifacts will be overwritten. You + are resistible to apply them again after the Ajax response is complete.</para> + <para>Usually, it could be done with reRendering the <emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> components in the same Ajax interaction with the components these queries are + applied to. Note, that queries with <emphasis> + <property>&quot;timing&quot;</property> + </emphasis> attribute set to <property>&quot;onload&quot;</property> are not + invoked even the query is reRendered, because a DOM document is not fully reloaded during + the Ajax interaction. If you need to re-applies query with + <property>&quot;onload&quot;</property> value of <emphasis> + <property>&quot;timing&quot;</property> + </emphasis> attribute , define the <emphasis> + <property>&quot;name</property> + </emphasis> attribute and invoke the query by name in the <emphasis> + <property>&quot;oncomplete&quot;</property> + </emphasis> attribute of the Ajax component.</para> + + <para>RichFaces includes jQuery JavaScript framework. You can use the futures of jQuery directly + without defining the <emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> component on a page if it is convenient for you. To start using the jQuery feature + on the page, include the library to the page with the following code:</para> + + <programlisting role="XML"><![CDATA[... + <a4j:loadScript src="resource://jquery.js"/> +...]]></programlisting> + + <para>Refer to the <ulink url="http://docs.jquery.com/">jQuery documentation </ulink> for the + right sintax. Remember to use jQuery() function instead of $(), as soon as jQuery works + without conflicts with prototype.js.</para> + </section> + <section> + <title>Relevant Resources Links</title> + <para>More information about jQuery framework and its features you can read <ulink + url="http://jquery.com/">here</ulink>.</para> + <para>How to use jQuery with other libraries see <ulink + url="http://docs.jquery.com/Using_jQuery_with_Other_Libraries"&... + + </section> +</section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuGroup.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuGroup.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuGroup.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -310,11 +310,17 @@ </tbody> </tgroup> </table> - <para> In order to redefine the style for all menu groups on a page using CSS, it&apos;s - enough to create classes with the same names and define the necessary properties in - them. </para> - <para> To change style aspects of particular panel menu groups define your own style classes - in the corresponding menuGroup attributes. </para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:menuGroup&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:menuGroup&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:menuGroup&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuItem.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuItem.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuItem.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -346,11 +346,17 @@ </tbody> </tgroup> </table> - <para> In order to redefine the style for all menu items on a page using CSS, it&apos;s - enough to create classes with the same names and define the necessary properties in - them. </para> - <para> To change the style of particular menu items define your own style classes in the - corresponding menuItem attributes. </para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuSeparator.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuSeparator.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/menuSeparator.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -133,12 +133,17 @@ </tbody> </tgroup> </table> - <para> - In order to redefine a style for all menu separators in a page using CSS, it&apos;s enough to create classes with the same names and define the necessary properties in them. - </para> - <para> - To change the style peculiarities of the particular menu separators, define your own style classes in the corresponding menuSeparator attributes. - </para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:separator&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create class with the + same name and define necessary properties in it.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:separator&gt;</property> + </emphasis> components, define your own style class in the corresponding <emphasis + role="bold"> + <property>&lt;rich:separator&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/message.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/message.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/message.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -183,15 +183,17 @@ </tgroup> </table> - <para>In order to redefine the style for <emphasis role="bold"> - <property>&lt;rich:message&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names and define the necessary properties in them.</para> - - <para>To change the style of particular <emphasis role="bold"> - <property>&lt;rich:message&gt;</property> - </emphasis> components define your own style classes in the corresponding message attributes. - </para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:message&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:message&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:message&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/messages.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/messages.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/messages.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -178,17 +178,17 @@ </tgroup> </table> - <para>In order to redefine the style for <emphasis role="bold"> - <property>&lt;rich:message&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names and define the necessary properties in them.</para> - - <para>To change the style of particular <emphasis role="bold"> - <property>&lt;rich:messages&gt;</property> - </emphasis> components define your own style classes in the corresponding <emphasis role="bold"> + <para>In order to redefine styles for all <emphasis role="bold"> <property>&lt;rich:messages&gt;</property> - </emphasis> attributes. - </para> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/modalPanel.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/modalPanel.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/modalPanel.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -470,41 +470,93 @@ </figure> <para>The screenshot shows the classes names for defining different elements.</para> - + <table> - <title>Class names</title> - + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + <tbody> <row> - <entry>rich-mpnl-pnl-h</entry> - - <entry>This class defines the header style. It&apos;s applied to the header elements - of all panels.</entry> + <entry>rich-modalpanel</entry> + + <entry>Defines styles for a wrapper &lt;div&gt; element of a modalpanel</entry> </row> - + <row> - <entry>rich-mpnl-pnl-text</entry> - - <entry>This class defines the header content style. It&apos;s applied to the header - elements of all panels.</entry> + <entry>rich-mpnl_panel</entry> + + <entry>Defines styles for a modalpanel</entry> </row> - + <row> - <entry>rich-mpnl-pnl-body</entry> - - <entry>This class defines the style for the content inside a panel. It&apos;s - applied to the elements inside panels.</entry> + <entry>rich-mpnl-mask-div</entry> + + <entry>Defines styles for a wrapper &lt;div&gt; element of a mask</entry> </row> - + <row> - <entry>generalFamilyFont</entry> - - <entry>font-family</entry> + <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 and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/panel.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/panel.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/panel.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -268,7 +268,7 @@ </figure> <para>On the screenshot, there are classes names that define specified elements.</para> <table> - <title>Component skin class</title> + <title>Classes names that define a component appearance</title> <tgroup cols="2"> <thead> <row> @@ -279,30 +279,30 @@ <tbody> <row> <entry>rich-panel</entry> - <entry>The class defines a <property>panel</property> common style. It&apos;s used - in the outside <emphasis role="bold"> - <property>&lt;div&gt;</property> - </emphasis>element</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a panel</entry> </row> <row> <entry>rich-panel-header</entry> - <entry>The class defines a header style. It&apos;s applicable for header elements of - all panels</entry> + <entry>Defines styles for header element of a panel</entry> </row> <row> <entry>rich-panel-body</entry> - <entry>The class defines a content style inside a panel. It&apos;s applicable for - elements inside panels</entry> + <entry>Defines styles for a panel body</entry> </row> </tbody> </tgroup> </table> - <para>To redefine an appearance of a particular panel, define your own CSS class. Then - it&apos;s necessary just to define it in one of components class attributes modifying - component style properties.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:panel&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:panel&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:panel&gt;</property> + </emphasis>attribute.</para> <para>CSS code piece used on a page:</para> <para> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBar.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBar.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBar.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -120,7 +120,7 @@ </mediaobject> </figure> <table> - <title>Predefined component skin class</title> + <title>Classes names that define a component appearance</title> <tgroup cols="2"> <thead> <row> @@ -131,16 +131,15 @@ <tbody> <row> <entry>rich-panelbar</entry> - <entry>applicable for the whole panelBar (padding, border)</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a panelbar</entry> </row> + </tbody> </tgroup> </table> <para>Other classes responsible for elements rendering are described for child panelBarItem elements and could be found in the components chapters.</para> - <para>To change style peculiarities of the particular <property>panelBar</property> and - child elements, define your own style classes in the corresponding - <property>panelBar</property> attributes.</para> + <table> <title>Style component classes</title> <tgroup cols="2"> @@ -166,6 +165,17 @@ </tbody> </tgroup> </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis>attributes.</para> <para>CSS code piece used on a page:</para> <para> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBarItem.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBarItem.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelBarItem.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -166,10 +166,10 @@ </imageobject> </mediaobject> </figure> - <para>There are two predefined classes for the <property>panelBarItem</property> shown on the + <para>There are three predefined classes for the <property>panelBarItem</property> shown on the screenshot and described in the table below</para> <table> - <title>Predefined component skin class</title> + <title>Classes names that define a component appearance</title> <tgroup cols="2"> <thead> <row> @@ -180,19 +180,22 @@ <tbody> <row> <entry>rich-panelbar-header</entry> - <entry>applicable for panelBarItem headers</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a panelbar item header</entry> </row> + <row> + <entry>rich-panelbar-header-act</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of an acting panelbar item header</entry> + </row> + + <row> <entry>rich-panelbar-content</entry> - <entry>applicable for panelBarItem </entry> + <entry>Defines styles for a panelbar item content</entry> </row> </tbody> </tgroup> </table> - <para>It&apos;s necessary to define a class according to the corresponding name, so as an - appearance of all <property>panelBarItems</property> on a page is changed at once.</para> - <para>To change style peculiarities of the particular <property>panelBarItems</property>, define - your own style classes in the corresponding <property>panelBarItems</property> attributes.</para> + <table> <title>Style component classes</title> <tgroup cols="2"> @@ -214,9 +217,18 @@ </tbody> </tgroup> </table> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis>attributes.</para> <para>CSS code piece used on a page:</para> <para> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -386,7 +386,7 @@ <para>On the screenshot, there are classes names defining specified elements.</para> <table> - <title>Component skin class</title> + <title>Classes names that define an upper level nodes</title> <tgroup cols="2"> <thead> @@ -401,47 +401,105 @@ <row> <entry>rich-pmenu-top-group-div</entry> - <entry>Defines top panel menu group common styleClass. It&apos;s used in the outside - &lt;div&gt; element</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a top group</entry> </row> <row> <entry>rich-pmenu-top-group</entry> - <entry>Defines top panel menu group wrapper table element</entry> + <entry>Defines styles for a top group</entry> </row> <row> <entry>rich-pmenu-top-group-self-icon</entry> - <entry>Defines top panel menu group icon element</entry> + <entry>Defines styles for a top group icon</entry> </row> <row> <entry>rich-pmenu-top-group-self-label</entry> - <entry>Defines top panel menu group label element</entry> + <entry>Defines styles for a top group label</entry> </row> </tbody> </tgroup> </table> + + <table> + <title>Classes names that define a second and lower level nodes</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-pmenu-group-div</entry> + + <entry>Defines styles for a wrapper &lt;div&gt; element of a group</entry> + </row> + + <row> + <entry>rich-pmenu-group</entry> + + <entry>Defines styles for a group</entry> + </row> + + <row> + <entry>rich-pmenu-group-self-icon</entry> + + <entry>Defines styles for a group icon</entry> + </row> + + <row> + <entry>rich-pmenu-group-self-label</entry> + + <entry>Defines styles for a group label</entry> + </row> + </tbody> + + </tgroup> + </table> - <para>This classes set is related to upper level of nodes. For all nodes starting with the - second level there are similar classes:</para> - - <itemizedlist> - <listitem>rich-pmenu-group-div</listitem> - <listitem>rich-pmenu-group</listitem> - <listitem>rich-pmenu-group-self-icon</listitem> - <listitem>rich-pmenu-group-self-label</listitem> - </itemizedlist> - - <para>In order to redefine the style for all panel menu groups on a page using CSS, - it&apos;s enough to create classes with the same names and define the necessary properties - in them.</para> - - <para>To change the style of particular panel menu groups define your own style - classes in the corresponding panelMenuGroup attributes. </para> + <table> + <title>Classes names that define a group state</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-pmenu-hovered-element</entry> + + <entry>Defines styles for a hovered group element</entry> + </row> + + </tbody> + + </tgroup> + </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:panelMenuGroup&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:panelMenuGroup&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:panelMenuGroup&gt;</property> + </emphasis>attributes.</para> </section> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -344,7 +344,7 @@ <para>On the screenshot, there are classes names defining specified elements.</para> <table> - <title>Component skin class</title> + <title>Classes names that define first level items</title> <tgroup cols="2"> <thead> @@ -357,41 +357,96 @@ <tbody> <row> - <entry>rich-pmenu-item</entry> + <entry>rich-pmenu-top-item</entry> - <entry>Defines panel menu item common styleClass</entry> + <entry>Defines styles for a top panel menu item</entry> </row> <row> - <entry>rich-pmenu-item-icon</entry> + <entry>rich-pmenu-top-item-icon</entry> - <entry>Defines panel menu item icon</entry> + <entry>Defines styles for a top panel menu item icon</entry> </row> <row> - <entry>rich-pmenu-item-label</entry> + <entry>rich-pmenu-top-item-label</entry> - <entry>Defines panel menu item label element</entry> + <entry>Defines styles for a top panel menu item label</entry> </row> </tbody> </tgroup> </table> - <para>This classes set is related to the second and all other lower levels of items. For all - items starting from the first level there are similar classes:</para> + <table> + <title>Classes names that define second and lower levels items</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-pmenu-item</entry> + + <entry>Defines styles for a panel menu item</entry> + </row> + + <row> + <entry>rich-pmenu-item-icon</entry> + + <entry>Definesstyles for a panel menu item icon</entry> + </row> + + <row> + <entry>rich-pmenu-item-label</entry> + + <entry>Defines styles for a panel menu item label</entry> + </row> + + </tbody> + </tgroup> + </table> - <itemizedlist> - <listitem>rich-pmenu-top-item</listitem> - <listitem>rich-pmenu-top-item-icon</listitem> - <listitem>rich-pmenu-top-item-label</listitem> - </itemizedlist> - - <para>In order to redefine the style for all panel menu items on a page using CSS, it&apos;s - enough to create classes with the same names and define the necessary properties in them.</para> - - <para>To change the style of particular panel menu items define your own style - classes in the corresponding panelMenuItem attributes.</para> + <table> + <title>Classes names that define items state</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-pmenu-item-selected</entry> + + <entry>Defines styles for a panel menu selected item</entry> + </row> + + </tbody> + </tgroup> + </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:panelMenuItem&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:panelMenuItem&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:panelMenuItem&gt;</property> + </emphasis>attributes.</para> </section> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -370,7 +370,7 @@ <row> <entry>rich-sdt</entry> - <entry>Defines the styles for the component appearance</entry> + <entry>Defines styles for a component appearance</entry> </row> </tbody> @@ -398,12 +398,28 @@ </row> <row> + <entry>rich-sdt-header-raw</entry> + + <entry>Defines styles for a header raw</entry> + </row> + + <row> + <entry>rich-sdt-column-cell</entry> + + <entry>Defines styles for column cells</entry> + </row> + <row> <entry>rich-sdt-footer-cell</entry> <entry>Defines styles for footer cells</entry> </row> <row> + <entry>rich-sdt-footer-raw</entry> + + <entry>Defines styles for a footer raw</entry> + </row> + <row> <entry>rich-sdt-hsep</entry> <entry>Defines styles for header separators</entry> @@ -414,7 +430,7 @@ </table> <table> - <title>Classes names that define rows and cells appearance</title> + <title>Classes names that define different states</title> <tgroup cols="2"> <thead> @@ -428,35 +444,40 @@ <tbody> <row> - <entry>rich-sdt-column-cell</entry> + <entry>rich-sdt-row-active</entry> - <entry>Defines styles for column cells</entry> + <entry>Defines styles for an active row</entry> </row> <row> <entry>rich-sdt-row-selected</entry> - <entry>Defines styles for selected row</entry> + <entry>Defines styles for a selected row</entry> </row> <row> - <entry>rich-sdt-row-active</entry> + <entry>rich-sdt-column-sort-up</entry> - <entry>Defines styles for active row</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 the style for all <emphasis role="bold"> + <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 and define the necessary properties in them.</para> + same names and define necessary properties in them.</para> - <para>To change the style of particular <emphasis role="bold"> + <para>To change styles of particular <emphasis role="bold"> <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> components define your own style classes in the corresponding <emphasis + </emphasis> components, define your own style classes in the corresponding <emphasis role="bold"> <property>&lt;rich:scrollableDataTable&gt;</property> </emphasis>attributes.</para> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/separator.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/separator.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/separator.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -120,6 +120,7 @@ <property>&quot;styleClass&quot;</property> </emphasis>) modifying component property.</para> </section> + <section> <title>Relevant Resources Links</title> <para> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -230,7 +230,7 @@ <property>&lt;div&gt;</property> </emphasis> element. See the table:</para> <table> - <title>Predefined component skin classes</title> + <title>Classes names that define a component appearance</title> <tgroup cols="2"> <thead> <row> @@ -241,31 +241,26 @@ <tbody> <row> <entry>rich-stglpanel</entry> - <entry>The class defines a simpleTogglePanel common style. It&apos;s used in the - outside <emphasis role="bold"> - <property>&lt;div&gt;</property> - </emphasis>element</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a simpleTogglePanel</entry> </row> <row> <entry>rich-stglpanel-header</entry> - <entry>The class defines a header style. It&apos;s applicable for header elements of - all simple toggle panels</entry> + <entry>Defines styles for header element of a simpleTogglePanel</entry> </row> <row> + <entry>rich-stglpanel-marker</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element for a marker</entry> + </row> + + <row> <entry>rich-stglpanel-body</entry> - <entry>The class defines content style inside a panel. It&apos;s applicable for - elements inside simple toggle panels</entry> + <entry>Defines styles for a simpleTogglePanel body</entry> </row> </tbody> </tgroup> </table> - <para>To redefine a style of all simple toggle panels on a page with CSS, create classes with - the corresponding names and define the necessary properties in them.</para> - <para>To change style peculiarities of a particular <property>simpleTogglePanels</property>, - define your own style classes in the corresponding <property>simpleTogglePanels</property> - attributes.</para> - <para>It&apos;s necessary to define a class according to the corresponding name, so as an - appearance of all <property>simpleTogglePanels</property> on a page is changed at once.</para> + + <table> <title>Style component classes</title> <tgroup cols="2"> @@ -294,6 +289,18 @@ </tbody> </tgroup> </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:simpleTogglePanel&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:simpleTogglePanel&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:simpleTogglePanel&gt;</property> + </emphasis>attributes.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/spacer.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/spacer.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/spacer.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -99,6 +99,7 @@ <property>&quot;styleClass&quot;</property> </emphasis>) modifying component property.</para> </section> + <section> <title>Relevant Resources Links</title> <para> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/subTable.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/subTable.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/subTable.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -114,5 +114,93 @@ </itemizedlist> <para>To redefine a style of a particular page, use component class attributes which list is the same as the <property>subTable</property> one and is known to you.</para> -</section> + </section> + <section> + <title>Definition of Custom Style Classes</title> + + <table> + <title>Classes names that define a subtable appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-subtable</entry> + <entry>Defines styles for all subtable</entry> + </row> + <row> + <entry>rich-subtable-caption</entry> + <entry>Defines styles for a &quot;caption&quot; facet element</entry> + </row> + <row> + <entry>rich-subtable-header</entry> + <entry>Defines styles for a subtable header row</entry> + </row> + <row> + <entry>rich-subtable-headercell</entry> + <entry>Defines styles for a subtable header cell</entry> + </row> + <row> + <entry>rich-subtable-header-continue</entry> + <entry>Defines styles for all subtable header lines after the first</entry> + </row> + <row> + <entry>rich-subtable-subheader</entry> + <entry>Defines styles for a column header of subtable</entry> + </row> + <row> + <entry>rich-subtable-subheadercell</entry> + <entry>Defines styles for a column header cell of subtable</entry> + </row> + <row> + <entry>rich-subtable-cell</entry> + <entry>Defines styles for a subtable cell</entry> + </row> + <row> + <entry>rich-subtable-row</entry> + <entry>Defines styles for a subtable row</entry> + </row> + <row> + <entry>rich-subtable-firstrow</entry> + <entry>Defines styles for a subtable start row</entry> + </row> + <row> + <entry>rich-subtable-subfooter</entry> + <entry>Defines styles for a column footer of subtable</entry> + </row> + <row> + <entry>rich-subtable-subfootercell</entry> + <entry>Defines styles for a column footer cell of subtable</entry> + </row> + <row> + <entry>rich-subtable-footer</entry> + <entry>Defines styles for a subtable footer row</entry> + </row> + <row> + <entry>rich-subtable-footercell</entry> + <entry>Defines styles for a subtable footer cell</entry> + </row> + <row> + <entry>rich-subtable-footer-continue</entry> + <entry>Defines styles for all subtable footer lines after the first</entry> + </row> + </tbody> + </tgroup> + </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis>attributes.</para> + </section> </section> \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -409,7 +409,7 @@ <para>On the screenshot, there are classes names defining specified elements.</para> <table> - <title>Component skin class</title> + <title>Classes names that define a suggestionBox</title> <tgroup cols="2"> <thead> @@ -422,21 +422,45 @@ <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 the styles of outer div</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element</entry> </row> <row> <entry>rich-sb-int-decor-table</entry> - <entry>Defines the styles for suggestion box table</entry> + <entry>Defines styles for a suggestion box table</entry> </row> <row> <entry>rich-sb-int</entry> - <entry>Defines the styles for suggestion box table rows (tr)</entry> + <entry>Defines the styles for a suggestion box table rows (tr)</entry> </row> <row> @@ -446,24 +470,32 @@ </row> <row> - <entry>rich-sb-shadow</entry> + <entry>rich-sb-int-sel</entry> - <entry>Defines the styles for shadow</entry> + <entry>Defines styles for a selected row</entry> </row> <row> - <entry>rich-sb-int-sel</entry> + <entry>rich-sb-shadow</entry> - <entry>Defines the styles for selected row</entry> + <entry>Defines styles for a suggestion boxshadow</entry> </row> + </tbody> </tgroup> </table> - <para>In order to redefine the style for all saggestionbox components on a page using CSS, it's enough to - create classes with the same names and define the necessary properties in them.</para> + <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 and define necessary properties in them.</para> - <para>To change the style of particular suggestionbox components define your own style classes in the corresponding suggestionbox attributes. </para> + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis>attributes.</para> </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/tab.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/tab.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/tab.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -174,11 +174,59 @@ </section> <section> <title>Definition of Custom Style Classes</title> - - <para>The style peculiarities of a particular <property>Tab</property> variant could be changed with specification of your - own StyleClasses attributes.</para> - <para>It&apos;s necessary to define a class according to the corresponding name, so as an - -appearance of all slider on a page is changed at once.</para> + + <table> + <title>Classes names that define a tab</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tab-header</entry> + <entry>Defines styles for a tab header</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a tab states</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tab-active</entry> + <entry>Defines styles for an active tab</entry> + </row> + <row> + <entry>rich-tab-inactive</entry> + <entry>Defines styles for an inactive tab</entry> + </row> + <row> + <entry>rich-tab-disabled</entry> + <entry>Defines styles for a disabled tab</entry> + </row> + </tbody> + </tgroup> + </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:tab&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:tab&gt;</property> + </emphasis> components define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:tab&gt;</property> + </emphasis>attribute.</para> </section> </section> \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/tabPanel.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/tabPanel.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/tabPanel.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -184,7 +184,7 @@ of all tab panels on a page.</para> <table> - <title>Classes names that define appearance</title> + <title>Classes names that define a component appearance</title> <tgroup cols="2"> <thead> <row> @@ -194,21 +194,25 @@ </thead> <tbody> <row> + <entry>rich-tabpanel</entry> + <entry>Defines styles for all tabpanel</entry> + </row> + <row> <entry>rich-tabpanel-content</entry> - <entry>Tab internal content</entry> + <entry>Defines styles for an internal content</entry> </row> <row> <entry>rich-tabpanel-content-position</entry> - <entry>A class for wrapping element content. It should define a shift equal to borders - width in order to overlap a panel and tabs</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>A class for side elements of a tab header</entry> + <entry>Defines styles for side elements of a tabpanel header</entry> </row> <row> <entry>rich-tabhdr-side-cell</entry> - <entry>A class for a header internal element</entry> + <entry>Defines styles for a header internal element</entry> </row> </tbody> </tgroup> @@ -228,22 +232,30 @@ <tbody> <row> <entry>rich-tabhdr-cell-active</entry> - <entry>A class for an internal element of an active header</entry> + <entry>Defines styles for an internal element of an active header</entry> </row> <row> <entry>rich-tabhdr-cell-inactive</entry> - <entry>A class for internal element of an inactive label </entry> + <entry>Defines styles for an internal element of an inactive label </entry> </row> <row> <entry>rich-tabhdr-cell-disabled</entry> - <entry>A class for an internal element of a disabled label </entry> + <entry>Defines styles for an internal element of a disabled label </entry> </row> </tbody> </tgroup> </table> - <para>Also it is possible to change look-and-feel settings of individual tab panel component by - writing your own style classes in corresponding class attributes of - <property>tabPanel</property>.</para> + <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 and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:tabPanel&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:tabPanel&gt;</property> + </emphasis>attributes.</para> </section> <section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/toggleControl.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/toggleControl.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/toggleControl.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -123,4 +123,25 @@ </section> + <section> + <title>Definition of Custom Style Classes</title> + <table> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tglctrl</entry> + <entry>Defines styles for a toggle control</entry> + </row> + + </tbody> + </tgroup> + </table> + </section> </section> \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/togglePanel.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/togglePanel.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/togglePanel.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -143,6 +143,7 @@ <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>Relevant Resources Links</title> <para> @@ -151,5 +152,5 @@ </para> </section> - + </section> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBar.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBar.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBar.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -140,10 +140,41 @@ </section> <section> <title>Definition of Custom Style Classes</title> + <table> + <title>Classes names that define a toolBar</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-toolbar</entry> + <entry>Defines styles for a toolbar element</entry> + </row> + <row> + <entry>rich-toolbar-item</entry> + <entry>Defines styles for a toolbar item</entry> + </row> + </tbody> + </tgroup> + </table> <para>On generating, the component substitutes the default class rich-toolbar-exterior into <emphasis> <property>style class</property> - </emphasis> of a generated component, i.e. to redefine at once all - <property>toolBars</property> appearance on a page, redefine this class in your CSS.</para> + </emphasis> of a generated component.</para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:toolBar&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create class with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:toolBar&gt;</property> + </emphasis> components define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:toolBar&gt;</property> + </emphasis>attributes.</para> <para>The component also has the standard attributes <emphasis> <property>&quot;style&quot;</property> </emphasis> and <emphasis> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -161,19 +161,5 @@ </tgroup> </table> </section> - <section> - <title>Definition of Custom Style Classes</title> - <para>On generating, the component substitutes the default class rich-toolbar-interior into - <emphasis -><property>style class</property></emphasis> of a generated component, i.e. -to redefine at once all <property>toolBarGroups</property> appearance on a page, redefine this class in your CSS.</para> - <para>The component also has the standard attribute &quot;style&quot; and <emphasis - -><property>&quot;style class&quot;</property></emphasis> that could redefine an - appearance of particular component variants. - </para> - <para>It&apos;s necessary to define a class according to the corresponding name, so as an - -appearance of all <property>toolBarGroups</property> on a page is changed at once.</para> - </section> + </section> \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -238,13 +238,38 @@ <section> <title>Definition of Custom Style Classes</title> - <para> - <property>Tooltip</property> provides one class &quot;rich-tool-tip&quot; which applies to a wrapper element <emphasis><property>&quot;span&quot;</property></emphasis> or &quot;div&quot; - dependently to <property>tooltip</property> layout. In order to redefine style for all <property>tooltips</property> - on a page with using CSS it's enough to create classes with this name and define in it necessary properties. - To change style peculiarities of a particular <property>tooltips</property>, define your own style classes in the corresponding - <property>tooltips</property> attributes. - </para> + <table> + <title>Classes names that define a tooltip</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tool-tip</entry> + <entry>Defines styles for a wrapper &lt;span&gt; or &lt;div&gt; element of a tooltip</entry> + </row> + </tbody> + </tgroup> + </table> + + <para> + It depends on <emphasis role="bold"><property>&lt;rich:tooltip&gt;</property></emphasis> layout what a wrapper element <emphasis><property>&lt;span&gt;</property></emphasis> or <emphasis><property>&lt;div&gt;</property></emphasis>to choose. + </para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:tooltip&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create class with the + same name and define necessary properties in it.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:tooltip&gt;</property> + </emphasis> components define your own style class in the corresponding <emphasis + role="bold"> + <property>&lt;rich:tooltip&gt;</property> + </emphasis>attributes</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/tree.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/tree.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/tree.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -290,11 +290,35 @@ </section> <section> <title>Definition of Custom Style Classes</title> - <para>The <property>tree</property> also has only one predefined Style Class responsible for - displaying a wrapper element of the <property>tree</property> - <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> redefining of which will change look and feel of all <property>trees</property> on - the page.</para> + <table> + <title>Classes names that define a tree</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tree</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a tree</entry> + </row> + </tbody> + </tgroup> + </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create class with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> components define your own style class in the corresponding <emphasis + role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis>attribute.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/treeNode.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/treeNode.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/treeNode.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -253,17 +253,76 @@ </section> <section> <title>Definition of Custom Style Classes</title> - <para>The following classes are applied to a node element in three states: default, marked, - mouseovered:</para> - <itemizedlist> - <listitem>rich-tree-node</listitem> - <listitem>rich-tree-node-selected</listitem> - <listitem>rich-tree-node-highlighted</listitem> - </itemizedlist> - <para>Hence, in order to change an appearance of all <property>treeNodesAdaptor</property> on a page, - declare and customize the above-mentioned classes in your CSS.</para> - <para>It is also possible to change look and feel of specific <property>treeNodesAdaptor</property> - with the help of defining for them <emphasis> + <para>On the screenshot, there are classes that are applied to a node element in three states: default, marked, + mouseovered:</para> + + <table> + <title>Classes names that define a node element</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tree-node</entry> + <entry> Defines styles for a tree node</entry> + </row> + <row> + <entry>rich-tree-node-selected</entry> + <entry>Defines styles for a selected tree node </entry> + </row> + <row> + <entry>rich-tree-node-highlighted</entry> + <entry>Defines styles for a highlighted tree node </entry> + </row> + <row> + <entry>rich-tree-node-handleicon</entry> + <entry>Defines styles for a tree node handleicon</entry> + </row> + <row> + <entry>rich-tree-node-handleicon-collapsed</entry> + <entry>Defines styles for a collapsed tree node handleicon </entry> + </row> + <row> + <entry>rich-tree-node-handleicon-expanded</entry> + <entry>Defines styles for a expanded tree node handleicon</entry> + </row> + <row> + <entry>rich-tree-node-children</entry> + <entry>Defines styles for all tree node subnodes</entry> + </row> + <row> + <entry>rich-tree-node-text</entry> + <entry>Defines styles for a tree node text</entry> + </row> + <row> + <entry>rich-tree-node-icon</entry> + <entry>Defines styles for a tree node icon</entry> + </row> + <row> + <entry>rich-tree-node-icon-leaf</entry> + <entry>Defines styles for a tree node icon leaf</entry> + </row> + </tbody> + </tgroup> + </table> + + <para>In order to redefine the style for all <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define the necessary properties in them.</para> + + <para>To change the style of particular <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> components define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis>attributes.</para> + <para>It is also possible to change look and feel of specific <emphasis role="bold"><property>&lt;rich:treeNode&gt;</property> + </emphasis> with the help of defining for them <emphasis> <property>&quot;selectedClass&quot;</property> </emphasis> and <emphasis> <property>&quot;highlightedClass&quot;</property> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/virtualEarth.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/virtualEarth.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/virtualEarth.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -138,9 +138,35 @@ </section> <section> <title>Definition of Custom Style Classes</title> - <para>rich-virtualEarth map is a predefined style class for the map. It&apos;s possible to define some - standard properties for all <property>maps</property> components on a page (padding, border, - etc.) with the definition of the component.</para> + <table> + <title>Classes names that define a virtualEarth appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-virtualEarth</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a virtualEarth</entry> + </row> + </tbody> + </tgroup> + </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:virtualEarth&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create class with the + same name and define necessary properties in it.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:virtualEarth&gt;</property> + </emphasis> components, define your own style class in the corresponding <emphasis + role="bold"> + <property>&lt;rich:virtualEarth&gt;</property> + </emphasis>attribute.</para> </section> <section> <title>Relevant Resources Links</title> Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/master.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/master.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/master.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -46,6 +46,8 @@ <!ENTITY insert_table SYSTEM "../../../target/generated/insert.xml"> <!ENTITY treeModel_table SYSTEM "../../../target/generated/tree-model.xml"> <!ENTITY scrollableDataTable_table SYSTEM "../../../target/generated/scrollableDataTable.xml"> +<!ENTITY jQuery_table SYSTEM "../../../target/generated/jQuery.xml"> + <!ENTITY coreComponents_table SYSTEM "../../../target/generated/a4j.xml"> <!ENTITY rfcFAQ SYSTEM "modules/RFCfaq.xml"> @@ -90,6 +92,7 @@ &inputNumberSlider_table; &inputNumberSpinner_table; &insert_table; +&jQuery_table; &message_table; &modalPanel_table; &paint2D_table; Modified: branches/3.1.x/docs/userguide/en/src/main/resources/css/html.css =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/resources/css/html.css 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/en/src/main/resources/css/html.css 2007-10-17 23:09:13 UTC (rev 3436) @@ -347,3 +347,42 @@ cursor: pointer; } +.css_comment { +color:#3F5FBF; +} +.css_normal { +color:#000000; +} +.css_semi_colon { +color:#000000; +} +.css_curly_brace { +color:#000000; +} +.css_atmark_rule { +color:#3F7F7F; +} +.css_selector { +color:#3F7F7F; +} +.css_media { +color:#2A00FF; +} +.css_string { +color:#2A00FF; +} +.css_uri { +color:#2A00FF; +} +.css_property_value { +color:#2A00FF; +} +.css_colon { +color:#000000; +} +.css_error { +color:#BF3F3F; +} +.css_property_name { +color:#7F007F; +} Modified: branches/3.1.x/docs/userguide/en/src/main/resources/images/dropDownMenu5.png =================================================================== (Binary files differ) Modified: branches/3.1.x/docs/userguide/pom.xml =================================================================== --- branches/3.1.x/docs/userguide/pom.xml 2007-10-17 22:48:30 UTC (rev 3435) +++ branches/3.1.x/docs/userguide/pom.xml 2007-10-17 23:09:13 UTC (rev 3436) @@ -1,4 +1,6 @@ -<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> +<project xmlns="http://maven.apache.org/POM/4.0.0" + xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" + xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <parent> <artifactId>docs</artifactId> <groupId>org.richfaces</groupId> @@ -50,17 +52,19 @@ ${project.version} </version> </artifactItem> - + <artifactItem> <groupId> org.richfaces.ui </groupId> - <artifactId>calendar</artifactId> + <artifactId> + calendar + </artifactId> <version> ${project.version} </version> </artifactItem> - + <artifactItem> <groupId> org.richfaces.ui @@ -105,7 +109,7 @@ ${project.version} </version> </artifactItem> - + <artifactItem> <groupId> org.richfaces.ui @@ -117,19 +121,17 @@ ${project.version} </version> </artifactItem> - + <artifactItem> <groupId> org.richfaces.ui </groupId> - <artifactId> - effect - </artifactId> + <artifactId>effect</artifactId> <version> ${project.version} </version> </artifactItem> - + <artifactItem> <groupId> org.richfaces.ui @@ -172,14 +174,12 @@ ${project.version} </version> </artifactItem> - + <artifactItem> <groupId> org.richfaces.ui </groupId> - <artifactId> - insert - </artifactId> + <artifactId>insert</artifactId> <version> ${project.version} </version> @@ -362,7 +362,9 @@ <groupId> org.richfaces.ui </groupId> - <artifactId>treeModel</artifactId> + <artifactId> + treeModel + </artifactId> <version> ${project.version} </version> @@ -384,6 +386,15 @@ ${project.build.directory}/xslt </outputDirectory> </artifactItem> + <artifactItem> + <groupId> + org.richfaces.ui + </groupId> + <artifactId>jQuery</artifactId> + <version> + ${project.version} + </version> + </artifactItem> </artifactItems> <outputDirectory> ${project.build.directory}/library @@ -436,7 +447,8 @@ ${project.build.directory}/xslt/xslt/f.xsl </stylesheet> <fileMappers> - <fileMapper implementation="org.codehaus.plexus.components.io.filemappers.FileExtensionMapper"> + <fileMapper + implementation="org.codehaus.plexus.components.io.filemappers.FileExtensionMapper"> <targetExtension> xml </targetExtension> @@ -480,7 +492,8 @@ ${project.build.directory}/xslt/xslt/f.xsl </stylesheet> <fileMappers> - <fileMapper implementation="org.codehaus.plexus.components.io.filemappers.FileExtensionMapper"> + <fileMapper + implementation="org.codehaus.plexus.components.io.filemappers.FileExtensionMapper"> <targetExtension> xml </targetExtension> @@ -595,9 +608,7 @@ <imagePathSettingRequired> false </imagePathSettingRequired> - <finalName> - index.html - </finalName> + <finalName>index.html</finalName> </format> </formats>