Author: vsukhov Date: 2008-03-12 16:15:23 -0400 (Wed, 12 Mar 2008) New Revision: 6770 Added: trunk/docs/userguide/en/src/main/resources/images/componentControl1.png Modified: trunk/docs/faq/en/src/main/docbook/module/RFCfaq.xml trunk/docs/userguide/en/src/main/docbook/included/comboBox.xml trunk/docs/userguide/en/src/main/docbook/included/componentControl.xml trunk/docs/userguide/en/src/main/docbook/included/pickList.xml Log: http://jira.jboss.com/jira/browse/RF-1216 corrected Skin Parameters Redefinition and style Classes also for pickList http://jira.jboss.com/jira/browse/RF-2390 ComponentControl: described the interaction with another components http://jira.jboss.com/jira/browse/RF-2061 Corrected data I've deleted How to use jsFunction with JSON section Modified: trunk/docs/faq/en/src/main/docbook/module/RFCfaq.xml =================================================================== --- trunk/docs/faq/en/src/main/docbook/module/RFCfaq.xml 2008-03-12 18:04:36 UTC (rev 6769) +++ trunk/docs/faq/en/src/main/docbook/module/RFCfaq.xml 2008-03-12 20:15:23 UTC (rev 6770) @@ -1777,67 +1777,70 @@ </h:form> ...]]></programlisting> </section> - <section> - <?dbhtml filename="HighlightRowDataTable.html"?> - <title>How to ReRender table cells with ajax support?</title> - <para>In order to ReRender table cells with ajax support you must set exact id values for a all updatable components, - and point this id's in the reRender parameters.</para> + <section id="reRenderCells"> + <?dbhtml filename="reRenderCells.html"?> + <title>How to reRender table cells with &lt;a4j:support&gt;?</title> + <para>In order to reRender table cells with <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> + you should set exact <property>ids</property> values for every updatable components + and point this <property>id</property> to the <emphasis><property>&quot;reRender&quot;</property></emphasis> attribute.</para> <note> <title>Note:</title> <para>The value of <emphasis><property>&quot;reRender&quot;</property></emphasis> attribute of the <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> tag defines which part(s) of our page is (are) to be updated. In this case, the only part of the page to update is the - <emphasis role="bold"><property>&lt;h:outputText&gt;</property></emphasis> tag because its ID value matches to the value of <emphasis><property>&quot;reRender&quot;</property></emphasis> + <emphasis role="bold"><property>&lt;h:outputText&gt;</property></emphasis> tag because its <property>id</property> + value matches to the value of <emphasis><property>&quot;reRender&quot;</property></emphasis> attribute. - As you see, it's not difficult to update multiple elements on the page, only list their IDs as the value of "reRender" .</para> + As you see, it's not difficult to update multiple elements on the page, only list their <property>ids</property> as the value of + <emphasis><property>&quot;reRender&quot;</property></emphasis> + attribute .</para> </note> <para> <emphasis role="bold">Example:</emphasis> </para> <programlisting role="XML"><![CDATA[... <rich:column> - <f:facet name="header"> - <h:outputText value="Input1"/> - </f:facet> - <f:facet name="footer"> - <h:outputText value="#{Controller.totalInput1}"/> - </f:facet> - <h:inputText id="input1" value="#{entry.input1}" > - <a4j:support actionListener="{Controller.updateEntry}"event="onblur" reRender="output1"> - </a4j:support> - </h:inputText> + <f:facet name="header"> + <h:outputText value="Input1"/> + </f:facet> + <f:facet name="footer"> + <h:outputText value="#{Controller.totalInput1}"/> + </f:facet> + <h:inputText id="input1" value="#{entry.input1}"> + <a4j:support actionListener="{Controller.updateEntry}"event="onblur" reRender="output1"/> + </h:inputText> </rich:column> <rich:column> - <f:facet name="header"> - <h:outputText value="Value2"/> - </f:facet> - <f:facet name="footer"> - <h:outputText value="#{Controller.totalOutput1}"/> - </f:facet> - <h:outputText id="output1" value="#{entry.output1}" > - </h:outputText> + <f:facet name="header"> + <h:outputText value="Value2"/> + </f:facet> + <f:facet name="footer"> + <h:outputText value="#{Controller.totalOutput1}"/> + </f:facet> + <h:outputText id="output1" value="#{entry.output1}"/> </rich:column> ...]]></programlisting> + <para>As it could be seen in the example above, the footer with <emphasis role="bold"><property>&lt;h:outputText&gt;</property></emphasis> reRenderes.</para> </section> - <section> + <!--section> <?dbhtml filename="HighlightRowDataTable.html"?> <title>How to use jsFunction with JSON?</title> - <para>There is some main cases to use jsFunction and JSON. An example use case: </para> + <para>JsFunction and JSON can be used in many ways, for example:</para> - <para>A user want to create device in a circuit diagram.</para> + <para>You want to create device in a circuit diagram. Here is the number of steps for creating:</para> <itemizedlist> <listitem> - He drags and drops it from the toolbox in our embedded Javascript(!) graphical editor. But first only a "please wait"-ModalPanel is shown. + You drag and drop it from the toolbox in our embedded Javascript(!) graphical editor. But first only a "please wait"-ModalPanel is shown. </listitem> <listitem> With JSFunction we come to the SessionBean and from there to the DB to fetch some Data for drawing the device in the Editor. </listitem> <listitem> - When the answer comes back, we asked the user with a modal panel to give a name to the device. + When the answer comes back, we asked you with a modal panel to give a name to the device. </listitem> <listitem> - After he clicks OK, the model panel disappears (and the please wait model panel shows up again) and another JSFunction call goes over the SessionBean to the DB to create the device data there. + After you click OK, the model panel disappears (and the please wait model panel shows up again) and another JSFunction call goes over the SessionBean to the DB to create the device data there. </listitem> <listitem> When the answer comes back, a JSON-String is created with all data for drawing the device (for example the given name) and the Editor is advised to draw it (and the please wait modal panel disappears again). @@ -1851,30 +1854,28 @@ <para> <emphasis role="bold">Example:</emphasis> </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.json.JSONException; - import org.richfaces.json.JSONObject; + <programlisting role="JAVA"><![CDATA[ import org.richfaces.json.JSONException; + import org.richfaces.json.JSONObject; public class SomeDataToJSON implements DataToJSON { - public String toJSON(Object obj) - { - SomeData data = (SomeData) obj; - JSONObject dataToJSON = new JSONObject(); - try - { - dataToJSON.put("ID", data.getObjPhysName()); - dataToJSON.put("name", data.getName()); - dataToJSON.put("width", data.getWidth()); - dataToJSON.put("height", data.getHeight()); - } - catch (JSONException e) - { - //TODO Approriate exception handling - e.printStackTrace(); - } - return dataToJSON.toString(); - } - } - ]]></programlisting> - <para>As you can see, the SimpleJSON library build the JSON-String for you (integrated in Richfaces). +public String toJSON(Object obj) +{ +SomeData data = (SomeData) obj; +JSONObject dataToJSON = new JSONObject(); +try +{ +dataToJSON.put("ID", data.getObjPhysName()); +dataToJSON.put("name", data.getName()); +dataToJSON.put("width", data.getWidth()); +dataToJSON.put("height", data.getHeight()); +} +catch (JSONException e) +{ +e.printStackTrace(); +} +return dataToJSON.toString(); +} +}]]></programlisting> + <para>As you can see, the SimpleJSON library build the JSON-String for you (integrated in RichFaces). Sometimes you have to add some brackets or something else.</para> <para>Here your Javascript code.</para> <para> @@ -1882,9 +1883,8 @@ </para> <programlisting role="JAVA"><![CDATA[var jsonString = executeObjectCreation("test", "anotherParam"); var myObject = eval(jsonString); - var name = myObject.name; -...]]></programlisting> +...]]></programlisting--> <!--para>You can use jsFunction to call the jsonTest backing bean that generates some random data in a JSON-String. That JSON-String is then passed to the updateFields method, which evaluates it and populates some html tags with its content. </para> <para> @@ -2020,11 +2020,13 @@ } } ...]]></programlisting--> - </section> - <section> - <?dbhtml filename="HighlightRowDataTable.html"?> - <title>How to DynamicColumns?</title> - <para>In order to create DynamicColumns you can use the rendered attribute of the rich:column. </para> + <!--/section--> + <section id="DinamicColumns"> + <?dbhtml filename="DinamicColumns.html"?> + <title>How to dynamic columns?</title> + <para>In order to create dynamic columns you could use the <emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> component + with the<emphasis><property>&quot;rendered&quot;</property></emphasis> attribute. You should just set the value of defined dynamic cell to the + <emphasis><property>&quot;rendered&quot;</property></emphasis> attribute field.</para> <para> <emphasis role="bold">Example:</emphasis> </para> @@ -2032,86 +2034,79 @@ <ui:composition template="/WEB-INF/layout/template.xhtml"> <ui:define name="body"> <h2>Table</h2> - <h:form> - <rich:dataTable id="aTable" onRowMouseOver="this.style.backgroundColor='#F1F1F1'" - onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" value="#{trb.tableData}" var="row"> - <f:facet name="header"> - <rich:columnGroup> - <rich:column colspan="2"> - Testing - </rich:column> - </rich:columnGroup> - </f:facet> - - <f:facet name="footer"> - <rich:columnGroup> - <rich:column colspan="2"> - Footer - </rich:column> - </rich:columnGroup> - </f:facet> - - <rich:column rendered="#{trb.cellRendered['value1']}"> - <f:facet name="header"> - - <s:div> - value1 <h:commandLink value="x" action="#{trb.hideColumn('value1')}"/> - </s:div> - </f:facet> - #{row.value1} - </rich:column> - - </rich:dataTable> - Generate new table values: - <h:commandButton value="generate" action="#{trb.createData}"/> - </h:form> - - <h:form> - Select which columns are rendered. - <br/> - <h:selectBooleanCheckbox title="value1" value="#{trb.cellRendered['value1']}"/> - <br/> - <h:commandButton value="Apply" action="rerender"/> - </h:form> - </ui:define> + <h:form> + <rich:dataTable id="aTable" onRowMouseOver="this.style.backgroundColor='#F1F1F1'" + onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" value="#{trb.tableData}" var="row"> + <f:facet name="header"> + <rich:columnGroup> + <rich:column colspan="2"> + Testing + </rich:column> + </rich:columnGroup> + </f:facet> + <f:facet name="footer"> + <rich:columnGroup> + <rich:column colspan="2"> + Footer + </rich:column> + </rich:columnGroup> + </f:facet> + <rich:column rendered="#{trb.cellRendered['value1']}"> + <f:facet name="header"> + <s:div> + value1 <h:commandLink value="x" action="#{trb.hideColumn('value1')}"/> + </s:div> + </f:facet> + #{row.value1} + </rich:column> + </rich:dataTable> + Generate new table values: + <h:commandButton value="generate" action="#{trb.createData}"/> + </h:form> + <h:form> + Select which columns are rendered. + <br/> + <h:selectBooleanCheckbox title="value1" value="#{trb.cellRendered['value1']}"/> + <br/> + <h:commandButton value="Apply" action="rerender"/> + </h:form> + </ui:define> </ui:composition> ...]]></programlisting> - <para>Here you can see the JAVA code.</para> + <para>In order to build this application, you can create a managed bean like this + one.</para> <para> <emphasis role="bold">Example:</emphasis> </para> <programlisting role="JAVA"><![CDATA[ -public class TableBackingRendered implements Serializable{ - /** - * - */ +public class TableBackingRendered implements Serializable { private static final long serialVersionUID = 1L; private Random rand = new Random(System.currentTimeMillis()); private List<TableItem> tableData; - private Map<String,Boolean> cellRendered = new HashMap<String,Boolean>(); - public TableBackingRendered(){ + private Map<String, Boolean> cellRendered = new HashMap<String, Boolean>(); + public TableBackingRendered() { createData(); allCellsRendered(); } public String createData(){ - int count = rand.nextInt(25)+1; - tableData = new ArrayList<TableItem>(count); - for(int i=0; i<count; i++){ - tableData.add( new TableItem( - "value1_" +i, - )); + int count = rand.nextInt(25)+1; + tableData = new ArrayList<TableItem>(count); + for(int i=0; i<count; i++){ + tableData.add( new TableItem( + "value1_" +i, + )); + } + return null; } - return null; - } - public String allCellsRendered(){ + public String allCellsRendered() { cellRendered.put("value1", Boolean.TRUE); return null; } - public String hideColumn(final String columnToHide){ + public String hideColumn(final String columnToHide) { cellRendered.put(columnToHide, Boolean.FALSE); return null; } - public List<TableItem> getTableData() { + public List<TableItem> getTableData() { return tableData; } public Map<String, Boolean> getCellRendered() { @@ -2143,10 +2138,10 @@ </rich:dataTable> ...]]></programlisting--> </section> - <section> - <?dbhtml filename="HighlightRowDataTable.html"?> - <title>RichFacesWithTrinidad?</title> - <para>Here is a stripped down version of web.xml that integrates Richfaces and Trinidad.</para> + <section id="Trinidad"> + <?dbhtml filename="Trinidad.html"?> + <title>RichFaces with Trinidad?</title> + <para>Here is a stripped down version of<property> web.xml</property> that integrates RichFaces and Trinidad.</para> <para> <emphasis role="bold">Example:</emphasis> Modified: trunk/docs/userguide/en/src/main/docbook/included/comboBox.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/comboBox.xml 2008-03-12 18:04:36 UTC (rev 6769) +++ trunk/docs/userguide/en/src/main/docbook/included/comboBox.xml 2008-03-12 20:15:23 UTC (rev 6770) @@ -289,9 +289,8 @@ </section> <section> <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a shadow</title> + <title>Skin parameters redefinition for a popup list</title> <tgroup cols="2"> <thead> <row> @@ -302,18 +301,18 @@ <tbody> <row> <entry>generalBackgroundColor</entry> - <entry>background-color</entry> + <entry>background</entry> </row> <row> - <entry>additionalBackgroundColor</entry> - <entry>background</entry> + <entry>buttonBorderColor</entry> + <entry>border-color</entry> </row> - </tbody> + + </tbody> </tgroup> </table> - - <table> - <title>Skin parameters redefinition for a button</title> + <table> + <title>Skin parameters redefinition for a button background, button background in pressed and disable state</title> <tgroup cols="2"> <thead> <row> @@ -326,10 +325,21 @@ <entry>generalBackgroundColor</entry> <entry>background-color</entry> </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Skin parameters redefinition for a button in inactive and disable state</title> + <tgroup cols="2"> + <thead> <row> - <entry>buttonBorderColor</entry> - <entry>border-color</entry> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> </row> + </thead> + <tbody> + <row> <entry>buttonBorderColor</entry> <entry>border-top-color</entry> @@ -338,14 +348,26 @@ <entry>buttonBorderColor</entry> <entry>border-left-color</entry> </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Skin parameters redefinition for a hovered button</title> + <tgroup cols="2"> + <thead> <row> - <entry>buttonBorderColor</entry> - <entry>border-bottom-color</entry> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> </row> + </thead> + <tbody> + <row> <entry>buttonBorderColor</entry> - <entry>border-right-color</entry> + <entry>border-color</entry> </row> + </tbody> </tgroup> </table> @@ -368,11 +390,15 @@ <entry>itemFamilyFont</entry> <entry>font-family</entry> </row> + <row> + <entry>itemTextColor</entry> + <entry>color</entry> + </row> </tbody> </tgroup> </table> <table> - <title>Skin parameters redefinition for a default label</title> + <title>Skin parameters redefinition for a font in inactive state</title> <tgroup cols="2"> <thead> <row> @@ -382,18 +408,31 @@ </thead> <tbody> <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> + <entry>itemSizeFont</entry> + <entry>font-size</entry> </row> <row> - <entry>additionalBackgroundColor</entry> - <entry>background</entry> + <entry>itemFamilyFont</entry> + <entry>font-family</entry> </row> <row> <entry>itemTextColor</entry> <entry>color</entry> </row> + </tbody> + </tgroup> + </table> + <table> + <title>Skin parameters redefinition for a font in disabled state</title> + <tgroup cols="2"> + <thead> <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> <entry>itemSizeFont</entry> <entry>font-size</entry> </row> @@ -401,12 +440,12 @@ <entry>itemFamilyFont</entry> <entry>font-family</entry> </row> - + </tbody> </tgroup> </table> <table> - <title>Skin parameters redefinition for a popup list</title> + <title>Skin parameters redefinition for an input field, input field in inactive and disable state</title> <tgroup cols="2"> <thead> <row> @@ -420,14 +459,28 @@ <entry>background-color</entry> </row> <row> - <entry>additionalBackgroundColor</entry> - <entry>background</entry> + <entry>inputFieldBorderColor</entry> + <entry>border-bottom-color</entry> </row> <row> - <entry>itemTextColor</entry> - <entry>color</entry> + <entry>inputFieldBorderColor</entry> + <entry>border-right-color</entry> </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Skin parameters redefinition for an item and selected item</title> + <tgroup cols="2"> + <thead> <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> <entry>itemSizeFont</entry> <entry>font-size</entry> </row> @@ -435,10 +488,15 @@ <entry>itemFamilyFont</entry> <entry>font-family</entry> </row> + <row> + <entry>itemTextColor</entry> + <entry>color</entry> + </row> </tbody> </tgroup> </table> + </section> <section> <title>Definition of Custom Style Classes</title> @@ -453,9 +511,9 @@ </imageobject> </mediaobject> </figure> - + <table id="comboBoxC"> - <title>Classes names that define shadow representation</title> + <title>Classes names that define popup list representation</title> <tgroup cols="2"> <thead> <row> @@ -464,25 +522,14 @@ </row> </thead> <tbody> + <row> - <entry>rich-combobox-shadow-tl</entry> - <entry>Defines styles for a top-left shadow</entry> + <entry>rich-combobox-list-decoration</entry> + <entry>Defines styles for a list</entry> </row> - <row> - <entry>rich-combobox-shadow-tr</entry> - <entry>Defines styles for a top-right shadow</entry> - </row> - <row> - <entry>rich-combobox-shadow-bl</entry> - <entry>Defines styles for a bottom-left shadow</entry> - </row> - <row> - <entry>rich-combobox-shadow-br</entry> - <entry>Defines styles for a bottom-right shadow</entry> - </row> </tbody> </tgroup> - </table> + </table> <table> <title>Classes names that define button representation</title> <tgroup cols="2"> @@ -493,25 +540,36 @@ </row> </thead> <tbody> + <row> - <entry>rich-combobox-button-background</entry> - <entry>Defines styles for a button background</entry> - </row> - <row> <entry>rich-combobox-button-inactive</entry> <entry>Defines styles for an inactive button</entry> </row> <row> + <entry>rich-combobox-button-disabled</entry> + <entry>Defines styles for a button in disabled state</entry> + </row> + <row> <entry>rich-combobox-button-hovered</entry> <entry>Defines styles for a hovered button</entry> </row> <row> - <entry>rich-combobox-button-icon-inactive</entry> - <entry>Defines styles for an inactive button icon</entry> + <entry>rich-combobox-button-background</entry> + <entry>Defines styles for a button background</entry> </row> + <row> + <entry>rich-combobox-button-background-inactive</entry> + <entry>Defines styles for an inactive button background</entry> + </row> + <row> + <entry>rich-combobox-button-pressed-background</entry> + <entry>Defines styles for a pressed button background</entry> + </row> + </tbody> </tgroup> </table> + <table> <title>Classes names that define font representation</title> <tgroup cols="2"> @@ -538,7 +596,7 @@ </tgroup> </table> <table> - <title>Classes names that define default label representation</title> + <title>Classes names that define input field representation</title> <tgroup cols="2"> <thead> <row> @@ -547,15 +605,25 @@ </row> </thead> <tbody> + <row> + <entry>rich-combobox-input</entry> + <entry>Defines styles for an input text</entry> + </row> + <row> + <entry>rich-combobox-input-disabled</entry> + <entry>Defines styles for an input text in disabled state</entry> + </row> + <row> <entry>rich-combobox-input-inactive</entry> - <entry>Defines styles for an inactive input</entry> + <entry>Defines styles for an inactive input text</entry> </row> - </tbody> + + </tbody> </tgroup> </table> <table> - <title>Classes names that define popup list representation</title> + <title>Classes names that define item representation</title> <tgroup cols="2"> <thead> <row> @@ -569,12 +637,13 @@ <entry>Defines styles for an item</entry> </row> <row> - <entry>rich-combobox-list-decoration</entry> - <entry>Defines styles for a list</entry> + <entry>rich-combobox-item-selected</entry> + <entry>Defines styles for a selected item</entry> </row> </tbody> </tgroup> </table> + <para>In order to redefine styles for all <emphasis role="bold"> <property>&lt;rich:comboBox&gt;</property> </emphasis> components on a page using CSS, it&apos;s enough to create classes with the Modified: trunk/docs/userguide/en/src/main/docbook/included/componentControl.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/componentControl.xml 2008-03-12 18:04:36 UTC (rev 6769) +++ trunk/docs/userguide/en/src/main/docbook/included/componentControl.xml 2008-03-12 20:15:23 UTC (rev 6770) @@ -168,7 +168,68 @@ </emphasis> component. The <emphasis> <property>&quot;operation&quot;</property> </emphasis> attribute contains a name of JavaScript API function. Thus, clicking on the link - represents the next year on the calendar.</para> + represents the next year on the calendar. + </para> + <para> + <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> interacts with such components as: + <itemizedlist> + <listitem><emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis></listitem> + <listitem><emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis></listitem> + <listitem><emphasis role="bold"> + <property>&lt;rich:modalPanel &gt;</property> + </emphasis></listitem> + <listitem><emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis></listitem> + <listitem><emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis></listitem> + </itemizedlist> + </para> + <para>In order to use <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> with another component you should place the id of this component into <emphasis> + <property>&quot;for&quot;</property> + </emphasis> attribute field. All operations with defined component you can find in the JavaScript API section of defined component.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<f:view> + <h:form> + <br> + <rich:toolTip id="toolTipFor" followMouse="false" direction="top-right" mode="ajax" value="This is button" horizontalOffset="5" verticalOffset="5" layout="block"> + </rich:toolTip> + </h:form> + <h:commandButton id="ButtonID" value="Button"> + <cc:componentControl for="toolTipFor" attachTo="ButtonID" operation="show" event="onclick"/> + </h:commandButton> +</f:view> +...]]></programlisting> + <para>This is a result:</para> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> with <emphasis><property> &quot;for&quot;</property></emphasis> attribute.</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/componentControl1.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + As it could be seen in the picture above, the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> shows after you click the button. + </para> + <!--para>One more example of <emphasis role="bold"> <property>&lt;rich:componentControl&gt;</property> </emphasis> usage is placed below:</para> Modified: trunk/docs/userguide/en/src/main/docbook/included/pickList.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/pickList.xml 2008-03-12 18:04:36 UTC (rev 6769) +++ trunk/docs/userguide/en/src/main/docbook/included/pickList.xml 2008-03-12 20:15:23 UTC (rev 6770) @@ -333,13 +333,17 @@ <entry>generalBackgroundColor</entry> <entry>background-color</entry> </row> + <row> + <entry>tableBorderWidth</entry> + <entry>border-width</entry> + </row> </tbody> </tgroup> </table> <table> - <title>Skin parameters redefinition for a button</title> + <title>Skin parameters redefinition for a button, button in disable state</title> <tgroup cols="2"> <thead> <row> @@ -515,18 +519,10 @@ </thead> <tbody> <row> - <entry>tableBorderColor</entry> + <entry>controlBorderColor</entry> <entry>border-color</entry> </row> - <row> - <entry>tableBottomBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>tableTopBorderColor</entry> - <entry>border-top-color</entry> - </row> - + </tbody> </tgroup> </table> @@ -565,10 +561,7 @@ <entry>rich-picklist-list</entry> <entry>Defines styles for a wrapper &lt;table&gt; element of a pickList</entry> </row> - <row> - <entry>rich-list-picklist</entry> - <entry>Defines styles for a wrapper &lt;table&gt; element of a pickList</entry> - </row> + </tbody> </tgroup> </table> @@ -591,29 +584,7 @@ <entry>rich-list-picklist-button-disabled</entry> <entry>Defines styles for a disabled button</entry> </row> - </tbody> - </tgroup> - </table> - - <table > - <title>Classes names that define pressed and highlighted button representation</title> - <tgroup cols="2"> - <thead> <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-list-picklist-button</entry> - <entry>Defines styles for a button</entry> - </row> - <row> - <entry>rich-list-picklist-button-disabled</entry> - <entry>Defines styles for a disabled button</entry> - </row> - <row> <entry>rich-list-picklist-button-press</entry> <entry>Defines styles for a pressed button</entry> </row> @@ -621,30 +592,21 @@ <entry>rich-list-picklist-button-light</entry> <entry>Defines styles for a button highlight</entry> </row> - </tbody> - </tgroup> - </table> - - <table > - <title>Classes names that define a button selection representation</title> - <tgroup cols="2"> - <thead> <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> <entry>rich-list-picklist-button-selection</entry> <entry>Defines styles for a button selection</entry> </row> - </tbody> + <row> + <entry>rich-list-picklist-button-content</entry> + <entry>Defines styles for a button content</entry> + </row> + </tbody> </tgroup> </table> - + + <table > - <title>Classes names that define a button content representation</title> + <title>Classes names that define a source and target items representation</title> <tgroup cols="2"> <thead> <row> @@ -653,17 +615,21 @@ </row> </thead> <tbody> - <row> - <entry>rich-list-picklist-button-content</entry> - <entry>Defines styles for a button content</entry> + <row> + <entry>rich-picklist-source-items</entry> + <entry>Defines styles for an item in a source list</entry> </row> + <row> + <entry>rich-picklist-target-items</entry> + <entry>Defines styles for an item in a target list</entry> + </row> </tbody> </tgroup> </table> <table > - <title>Classes names that define a source and target items representation</title> + <title>Classes names that define a source cell representation</title> <tgroup cols="2"> <thead> <row> @@ -673,20 +639,23 @@ </thead> <tbody> <row> - <entry>rich-picklist-source-items</entry> - <entry>Defines styles for an item in a source list</entry> + <entry>rich-picklist-source-cell</entry> + <entry>Defines styles for a cell in a source list</entry> </row> <row> - <entry>rich-picklist-target-items</entry> - <entry>Defines styles for an item in a target list</entry> + <entry>rich-picklist-source-cell-selected</entry> + <entry>Defines styles for a selected cell in a source list</entry> </row> - + <row> + <entry>rich-picklist-source-cell-active</entry> + <entry>Defines styles for an active cell in a source list</entry> + </row> </tbody> </tgroup> </table> <table > - <title>Classes names that define a source and target cell representation</title> + <title>Classes names that define a target cell representation</title> <tgroup cols="2"> <thead> <row> @@ -696,13 +665,17 @@ </thead> <tbody> <row> - <entry>rich-picklist-source-cell</entry> + <entry>rich-picklist-target-cel</entry> <entry>Defines styles for a cell in a source list</entry> </row> <row> - <entry>rich-picklist-target-cell</entry> - <entry>Defines styles for a cell in a target list</entry> + <entry>rich-picklist-target-cell-selected</entry> + <entry>Defines styles for a selected cell in a target list</entry> </row> + <row> + <entry>rich-picklist-target-cell-active</entry> + <entry>Defines styles for an active cell in a target list</entry> + </row> </tbody> </tgroup> </table> Added: trunk/docs/userguide/en/src/main/resources/images/componentControl1.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/componentControl1.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream