From richfaces-svn-commits at lists.jboss.org Fri Apr 10 06:02:32 2009 Content-Type: multipart/mixed; boundary="===============3849163550020733846==" MIME-Version: 1.0 From: richfaces-svn-commits at lists.jboss.org To: richfaces-svn-commits at lists.jboss.org Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r13483 - trunk/docs/userguide/en/src/main/docbook/included. Date: Fri, 10 Apr 2009 06:02:31 -0400 Message-ID: --===============3849163550020733846== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: msorokin Date: 2009-04-10 06:02:31 -0400 (Fri, 10 Apr 2009) New Revision: 13483 Modified: trunk/docs/userguide/en/src/main/docbook/included/layout.desc.xml trunk/docs/userguide/en/src/main/docbook/included/layout.xml trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.desc.xml trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.xml Log: https://jira.jboss.org/jira/browse/RF-6593 Added descriptions of layout components Modified: trunk/docs/userguide/en/src/main/docbook/included/layout.desc.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/layout.desc.xml 2009-= 04-10 00:14:07 UTC (rev 13482) +++ trunk/docs/userguide/en/src/main/docbook/included/layout.desc.xml 2009-= 04-10 10:02:31 UTC (rev 13483) @@ -10,13 +10,14 @@ Description The <rich:layout> - component is used to build the web page layout. + component is designed to build layouts. =
Key Features = - bla bla bla + Cross-borwser comparability + Easy markup creation = =
Modified: trunk/docs/userguide/en/src/main/docbook/included/layout.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/layout.xml 2009-04-10= 00:14:07 UTC (rev 13482) +++ trunk/docs/userguide/en/src/main/docbook/included/layout.xml 2009-04-10= 10:02:31 UTC (rev 13483) @@ -4,7 +4,7 @@ rich:layout rich:layout - breakBefore + = @@ -23,15 +23,15 @@ component-class - org.richfaces.com= ponent.html.Htmllayout + org.richfaces.com= ponent.html.HtmlLayout component-family<= /entry> - org.richfaces.lay= out + org.richfaces.Lay= out renderer-type - org.richfaces.lay= outRenderer + org.richfaces.Lay= outRenderer tag-class @@ -43,14 +43,16 @@ =
Creating the Component with a Page Tag - To create the simplest variant of layo= ut on a page, + To create the simplest layout with the <rich:layout> on a pag= e, use the following syntax: = Example: + ... + ... ]]>
@@ -60,9 +62,9 @@ Example: - Modified: trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.des= c.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.desc.xml = 2009-04-10 00:14:07 UTC (rev 13482) +++ trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.desc.xml = 2009-04-10 10:02:31 UTC (rev 13483) @@ -1,20 +1,25 @@ -
+
- = - layouPanel - rich:layouPanel + + rich:page - +
- Description - The - <rich:layouPanel> - is an auxiliary component used to create layout areas wit= hin the <rich:layout> container. - - - = -
- -
- = \ No newline at end of file + Description + The + <rich:layouPanel> + is an auxiliary component used to create layout areas = within the + <rich:layout> container. + + = +
+
+ Key Features = + + = + Option to change the renderer of the component= + = + = +
+ \ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.xml 2009-= 04-10 00:14:07 UTC (rev 13482) +++ trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.xml 2009-= 04-10 10:02:31 UTC (rev 13483) @@ -2,8 +2,8 @@
+ rich:layoutPanel layoutPanel - layoutPanel
@@ -18,23 +18,23 @@ component-type - org.richfaces.component.layoutPanel + org.richfaces.LayoutPanel component-class - org.richfaces.component.html.HtmllayoutPanel + org.richfaces.component.html.HtmlLayoutPanel component-family - org.richfaces.component.layoutPanel + org.richfaces.LayoutPanel renderer-type - org.richfaces.renderkit.html.layoutPanelRendere= r + org.richfaces.LayoutPanelRenderer tag-class - org.richfaces.taglib.layoutPanelTag + org.richfaces.taglib.LayoutPanelTag @@ -73,825 +73,10 @@ = The "position" attribute defines the position of the <rich:layoutPanel> in the area created with= <rich:layout> . - In more detail the component is covered in the <rich:layout> + In more detail the component is covered in the <rich:layout>. = -
- JavaScript API -
- JavaScript API - - - - Function - Description - - - - - - beforeSubmit() - Sets up necessary request parameters for fi= le uploading and submits - form to server by command button. This method = should be used together - with commands. - - - - clear() - Removes all files from the list. The functi= on can also get the $('id').component.entries[i] as = a parameter to remove a particular file. - - - - disable() - Disables the component - - - - enable() - Enables the component - - - - remove() - Cancels the request for uploading a file by= removing this file from - upload list and upload queue. Gets $(&= apos;id').component.entries[i] as a parameter. - - - - stop() - Stops the uploading process - - - - submitForm() - Submits form to server. All added files wil= l be put to model and - event. - - - - -
- - - - - Client side object properties - - - - Property - Description - - - - - - entries - Returns a array of all files in the list - - - - - - entries.length - Returns the number of files in the list - - - - - entries[i].fileName - Returns the file name, that is retrieved by= the array index - - - - - - entries[i].state - Returns the file state. Possible states are= - - - "initialized" - the fi= le is added, - corresponds to layoutPanelEntry.IN= ITIALIZED constant - - - "progress" - the file = is being uploaded, - corresponds to layoutPanelEntry.UP= LOAD_IN_PROGRESS - constant - - - "ready" - uploading is= in process, - corresponds to layoutPanelEntry.RE= ADY constant The file will - be uploaded on queue order. - - - "canceled" - uploading= of the file is - canceled, corresponds to layoutPan= elEntry.UPLOAD_CANCELED - constant - - - "done" - the file is u= ploaded - successfully, corresponds to layou= tPanelEntry.UPLOAD_SUCCESS - constant - - - "transfer_error" - a f= ile transfer error - occurred, corresponds to - layoutPanelEntry.UPLOAD_TRANSFER_E= RROR constant - - - "size_error" - the fil= e exceeded maximum - size, corresponds to layoutPanelEn= try.UPLOAD_SIZE_ERROR - constant - - - - - - - - - - - entries[i].size - Returns the size of the file. Available in= flash enabled version - only - - - entries[i].Type - Returns the mime type of the file. Availabl= e in flash enabled version - only - - - entries[i].creator - Returns the name of the author of the file.= Available in flash - enabled version only - - - entries[i].creationDate - Returns the date when the file was created.= Available in flash - enabled version only - - - entries[i].modificationDate - Returns the date of the last file modificat= ion. Available in flash - enabled version only - - - - - - - -
- - - - - - Client side object properties available with specific <= link - linkend=3D"layoutPanelEventAttributes"> event attribut= es</link> - - - - Property - Description - - - - - - - - - entry.state - Returns the file state. Possible states are= - - - "initialized" - the fi= le is added, - corresponds to layoutPanelEntry.IN= ITIALIZED constant - - - "progress" - the file = is being uploaded, - corresponds to layoutPanelEntry.UP= LOAD_IN_PROGRESS - constant - - - "ready" - uploading is= in process, - corresponds to layoutPanelEntry.RE= ADY constant The file will - be uploaded on queue order. - - - "canceled" - uploading= of the file is - canceled, corresponds to layoutPan= elEntry.UPLOAD_CANCELED - constant - - - "done" - the file is u= ploaded - successfully, corresponds to layou= tPanelEntry.UPLOAD_SUCCESS - constant - - - "transfer_error" - a f= ile transfer error - occurred, corresponds to - layoutPanelEntry.UPLOAD_TRANSFER_E= RROR constant - - - "size_error" - the fil= e exceeded maximum - size, corresponds to layoutPanelEn= try.UPLOAD_SIZE_ERROR - constant - - - - - - - - - entry.fileName - Returns the file's name. This property= works with all event - handlers except for "onadd". - - - - - - entry.size - Returns the size of the file. Available in= flash enabled version - only - - - entry.Type - Returns the mime type of the file. Availabl= e in flash enabled version - only - - - entry.creator - Returns the name of the author of the file.= Available in flash - enabled version only - - - entry.creationDate - Returns the date when the file was created.= Available in flash - enabled version only - - - entry.modificationDate - Returns the date of the last file modificat= ion. Available in flash - enabled version only - - - - - - - -
- - - - - - = -
- Facets - - Facets - - - - Facet name - Description - - - - - label - Defines the information regarding the ongoing process - - - progress - Defines the information regarding the uploading process - - - - -
-
- = -
- Look-and-Feel Customization - For skinnability implementation, the components use a - style class redefinition method. - Default style classes are mapped on - skin parameters. - - There are two ways to redefine the appearance of all - <layoutPanel> - components at once: - - Redefine the corresponding skin parameters - - - Add to your style sheets style classes used by = a - <layoutPanel> - component - - - -
- -
- Skin Parameters Redefinition - - - Skin parameters redefinition for a component - - - - Skin parameters - CSS properties - - - - - tableBackgroundColor - background-color - - - tableBorderColor - border-color - - - -
- - - Skin parameters redefinition for a font - - - - Skin parameters - CSS properties - - - - - generalFamilyFont - font-family - - - generalSizeFont - font-size - - - -
- - - Skin parameters redefinition for a toolbar - - - - Skin parameters - CSS properties - - - - - additionalBackgroundColor - background-color - - - tableBorderColor - border-bottom-color - - - tableBackgroundColor - border-top-color - - - tableBackgroundColor - border-left-color - - - - -
- - - Skin parameters redefinition for items in the list</tit= le> - <tgroup cols=3D"2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a "Cancel", - "Clear" links - - - - Skin parameters - CSS properties - - - - - generalLinkColor - color - - - -
- - - Skin parameters redefinition for a button - - - - Skin parameters - CSS properties - - - - - trimColor - background-color - - - -
- - Skin parameters redefinition for a button border - - - - Skin parameters - CSS properties - - - - - tableBorderColor - border-color - - - -
- - Skin parameters redefinition for a highlighted button</= title> - <tgroup cols=3D"2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>trimColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>selectControlColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a pressed button</titl= e> - <tgroup cols=3D"2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>selectControlColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for "Upload", - "Clean" buttons - - - - Skin parameters - CSS properties - - - - - generalTextColor - color - - - -
- - Skin parameters redefinition for a disabled "Start= " button - icon - - - - Skin parameters - CSS properties - - - - - tableBorderColor - color - - - -
- - Skin parameters redefinition for a disabled "Clear= " button - icon - - - - Skin parameters - CSS properties - - - - - tableBorderColor - color - - - -
-
- -
- Definition of Custom Style Classes - - The following picture illustrates how CSS classes define sty= les for component - elements. -
- Classes names - - - - - -
-
- Classes names - - - - - -
- - - Classes names that define a component representation</t= itle> - <tgroup cols=3D"2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-layoutPanel-list-decor</entry> - <entry>Defines styles for a wrapper <div> el= ement of a - layoutPanel</entry> - </row> - <row> - <entry>rich-layoutPanel-font</entry> - <entry>Defines styles for a font of buttons and it= ems</entry> - </row> - <row> - <entry>rich-layoutPanel-toolbar-decor</entry> - <entry>Defines styles for a toolbar</entry> - </row> - <row> - <entry> rich-layoutPanel-list-overflow</entry> - <entry>Defines styles for a list of files</entry> - </row> - </tbody> - </tgroup> - </table> - - - <table> - <title>Classes names that define buttons representation - - - - Class name - Description - - - - - rich-layoutPanel-button - Defines styles for a buttons - - - rich-layoutPanel-button-border - Defines styles for a border of buttons - - - rich-layoutPanel-button-light - Defines styles for a highlight of button - - - rich-layoutPanel-button-press - Defines styles for a pressed button - - - rich-layoutPanel-button-dis - Defines styles for a disabled button - - - rich-layoutPanel-button-selection - Defines styles for "Upload", - "Clean" buttons - - - -
- - - Classes names that define the representation of the but= tons' icons - - - - Class name - Description - - - - - rich-layoutPanel-ico - Defines styles for an icon - - - rich-layoutPanel-ico-add - Defines styles for a "Add" button= icon - - - rich-layoutPanel-ico-start - Defines styles for a "Upload" but= ton icon - - - rich-layoutPanel-ico-stop - Defines styles for a "Stop" butto= n icon - - - rich-layoutPanel-ico-clear - Defines styles for a "Clear" butt= on icon - - - rich-layoutPanel-ico-add-dis - Defines styles for a disabled "Add&quo= t; button - icon - - - rich-layoutPanel-ico-start-dis - Defines styles for a disabled "Upload&= quot; button - icon - - - rich-layoutPanel-ico-clear-dis - Defines styles for a disabled "Clear&q= uot; button - icon - - - -
- - - Classes names that define list items representation</ti= tle> - <tgroup cols=3D"2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-layoutPanel-table-td</entry> - <entry>Defines styles for a wrapper <td> ele= ment of a list - items</entry> - </row> - <row> - <entry>rich-layoutPanel-anc</entry> - <entry>Defines styles for "Cancel", - "Stop", "Clear" links</ent= ry> - </row> - </tbody> - </tgroup> - </table> - - - <para>In order to redefine styles for all <emphasis role=3D"bold"> - <property><layoutPanel></property> - </emphasis> components on a page using CSS, it's enough t= o create classes with - the same names (possible classes could be found in the tables = <link - linkend=3D"layoutPanelCN"> above</link>) and define necess= ary properties in them. </para> - <para> - <emphasis role=3D"bold">Example:</emphasis> - </para> - <programlisting role=3D"CSS"><![CDATA[... -.rich-layoutPanel-anc{ - font-weight:bold; - text-decoration:none; -} -...]]></programlisting> - - <para>This is the result:</para> - - <figure> - <title>Redefinition styles with predefined classes - - - - - - - - In the example above the font weight and text decoration for - "Cancel" and "Clear" links are changed. - - Also it's possible to change styles of particular - <layoutPanel> - component. In this case you should create own styl= e classes and use them in - the corresponding - <layoutPanel> - - - styleClass - attributes. An example is placed below: - - Example: - - - The - "addButtonClass" - attribute for - <layoutPanel> - is defined as it's shown in the example below= : - - Example: - - -]]> - - This is the result: -
- Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes - - - - - -
- - As it could be seen on the picture above, the font style for= "Add" - button is changed. - - - -
Relevant Resources Links