From richfaces-svn-commits at lists.jboss.org Thu Apr 30 13:03:43 2009 Content-Type: multipart/mixed; boundary="===============4015960662584342648==" 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: r13975 - trunk/docs/userguide/en/src/main/docbook/included. Date: Thu, 30 Apr 2009 13:02:03 -0400 Message-ID: --===============4015960662584342648== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: msorokin Date: 2009-04-30 13:02:02 -0400 (Thu, 30 Apr 2009) New Revision: 13975 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 trunk/docs/userguide/en/src/main/docbook/included/rich_page.desc.xml trunk/docs/userguide/en/src/main/docbook/included/rich_page.xml Log: https://jira.jboss.org/jira/browse/RF-6593 The components are documented 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-30 16:52:05 UTC (rev 13974) +++ trunk/docs/userguide/en/src/main/docbook/included/layout.desc.xml 2009-= 04-30 17:02:02 UTC (rev 13975) @@ -10,14 +10,22 @@ Description The <rich:layout> - component is designed to build layouts. + component is designed to build layouts basing on Yahoo UI= Grids CSS = - + +
+ The <emphasis role=3D"bold"><property><rich:layout></= property></emphasis> component + = + + = + + +
Key Features = - Cross-borwser comparability - Easy markup creation = + Cross-borwser compatibility + Easy layout 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-30= 16:52:05 UTC (rev 13974) +++ trunk/docs/userguide/en/src/main/docbook/included/layout.xml 2009-04-30= 17:02:02 UTC (rev 13975) @@ -51,7 +51,9 @@ - ... + + + ... ]]> @@ -71,12 +73,10 @@
Details of Usage = - The <rich:l= ayout> allows to build a grid that can be used to = arrange the layout on the page. The <r= ich:layout> is used in conjunction with the <rich:layoutPanel> = that is used as a child element and carries the main burned of building gri= d. + The <rich:l= ayout> allows to build a grid that can be used to = make the layout on the page. The <rich= :layout> is used in conjunction with the <rich:layoutPanel> tha= t is used as a child element and carries the main burden of building the gr= id. = - Hence, you need to use the <rich:layout> as a container and <rich:layoutPanel> to create areas inside the container. - By setting the "positio= n" attribute of each <rich:layoutPanel> to top, left, center,= right, bottom - you can build up to 5 corresponding areas. - + Hence, you need to use the <rich:layout> as a container and <rich:layoutPanel> to create areas inside the container. This is how you can make = a layout with 5 areas: + = = Example: @@ -101,48 +101,19 @@ ...]]> = + To get more details about <rich:layoutPanel> please read the = corresponding chapter of the gui= de. = + = - - Note: - Please keep in mind that no matter wha= t layout = - composition you are creating you s= hould have a <rich:layoutPanel > with the "position" attribute set to "center". - = - + = - = - = - To create a two-column layout you need to use t= wo = - <rich:l= ayoutPanel> - one of which should be a central area(= position=3D"center") and the other one should be either le= ft or right. - The following snippet will help you understa= nd the way <rich:layout>= works. - = - = - - - - - - - - - ...]]> = - = - = - = - Moreover, you can nest the <rich:layoutPanel> tags into <rich:layoutPanel> to divide the area as well. - = - = - =
=
Relevant Resources Links - Vizit = - layout page at = - RichFaces live demo for examples of component usage and their sources= . - " - Using the= "rendered" attribute of <rich:layout>" article = - in RichFaces cookbook at JBoss portal gives an example of code of the= component usage case. = - + Visit = + layout page at = + RichFaces Live demo for examples of component usage and their sources= . + The Layout components for RichFaces 3.3.1 on the JBos= s.org Wiki + =
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-30 16:52:05 UTC (rev 13974) +++ trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.desc.xml = 2009-04-30 17:02:02 UTC (rev 13975) @@ -1,8 +1,8 @@ -
+
- rich:page + rich:layoutPanel
@@ -18,8 +18,9 @@ Key Features = = - Option to change the renderer of the component= - = + Cross-browser compatibility + Provides possibility of an easy layout creatio= n + = =
\ 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-30 16:52:05 UTC (rev 13974) +++ trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.xml 2009-= 04-30 17:02:02 UTC (rev 13975) @@ -97,18 +97,19 @@ ...]]> = = + You can specify the width of the layout area with the "width"attribute. = = - In more detail the component is covered in the <rich:layout>. - =
Relevant Resources Links On RichFaces LiveDemo page you can see an exampl= e of - <layoutPanel> - usage and sources for the given example. + <rich:layoutPanel> + usage and sources for the given example. + The <rich:layout> chapter of the gui= de. + The Layout components for RichFaces 3.3.1 on the JBoss.org Wiki.<= /para>
= Modified: trunk/docs/userguide/en/src/main/docbook/included/rich_page.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/rich_page.desc.xml 20= 09-04-30 16:52:05 UTC (rev 13974) +++ trunk/docs/userguide/en/src/main/docbook/included/rich_page.desc.xml 20= 09-04-30 17:02:02 UTC (rev 13975) @@ -9,7 +9,7 @@ Description The <rich:page> - component is used to create structured layouts contain= ing header, bottom, center and left or right layout areas as well as to d= efine the content of the <head/> element, declare DOCTYPE etc. + component is used to create basic (X)HTML markup and d= efine document parameters like DOCTYPE, title etc. The component also allo= ws to build top level layout: header, bottom, center and left or right la= yout areas. = = @@ -18,10 +18,10 @@ = = - Option to change the renderer of the component= + Option to change the renderer of the component= (themes support) Possibility to define parameters of an HTML pa= ge - = - = + Possibility to create page layout with facets<= /para> + Provides styling based on RichFaces skinnabili= ty = \ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/rich_page.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/rich_page.xml 2009-04= -30 16:52:05 UTC (rev 13974) +++ trunk/docs/userguide/en/src/main/docbook/included/rich_page.xml 2009-04= -30 17:02:02 UTC (rev 13975) @@ -47,11 +47,9 @@ Example: - - - = - + = + + ...]]>
@@ -60,16 +58,16 @@ Example: -
Details of Usage The <rich:page> = - component together with the = <rich:laout> component provides + component together with the = <rich:layout> component provides a full-fledged mechanism for markup creation. = = @@ -87,7 +85,7 @@ "html-3.2" = - = + The default value is "html". The "contentType" allows to specify the type of the content and encoding for the page= . = @@ -102,8 +100,7 @@ = + @@ -114,8 +111,8 @@ ...]]> = = - The implementation of the = <rich:page> component provides three facets tha= t you can use to arrange the layout of the page: "header", "= subheader", "sidebar" and "footer". Their behavi= or is quite self-explanatory. - The position of the panel rendered by a "sidebar" = facet can be set with the "sidebarPosition" attribute that can take either "right" or &q= uot;left" values, you can also specify width for this facet with the = "sidebarWidth" attribute. + The implementation of the = <rich:page> component provides four facets that= you can use to arrange the layout of the page: "header", "s= ubheader", "sidebar" and "footer". Their behavio= r is quite self-explanatory. + The position of the panel rendered by the "sidebar"= ; facet can be set with the "sidebarPosition"= attribute that can take either "right" or = "left" as values, you can also specify the width for this facet w= ith the "sidebarWidth"= attribute. Example: @@ -143,8 +140,11 @@ = = Several templates are available for the <rich:page> component. A template= can be activated with the "theme"= attribute. - The template defines the way the <rich:page> is rendered. Standard render= er(default) of the <rich:page> + = + The theme defines the way the <rich:page> is rendered. Default renderer(d= efault theme) of the <rich:page> has no mappings to skin parameters and just provides CS= S classes for the page part. However, the simple theme= , which is an extension of the default theme, has mappings to skin paramete= rs and adds the RichFaces skinning for the page elements. = + As a whole, RichFaces provides 4 themes for the <rich:page> component out= -of-the-box: "simple", "violetRays", "oldschool&qu= ot;, "smooth". The Creating a Theme for <rich:page> article tells= how you can create your custom theme for the <rich:page> component. + =
=
@@ -187,7 +187,314 @@
= +
+ Skin Parameters for the "simple" theme + + Skin parameters for the <body/> HTML element</ti= tle> + <tgroup cols=3D"2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + = + </tbody> + </tgroup> + </table> + = + = + = + <table> + <title>Skin parameters for the whole page + + + + Skin parameters + CSS properties + + + + + generalSizeFont + font-size + + = + + +
+ = + = + + Skin parameters for the header + + + + Skin parameters + CSS properties + + + + + generalSizeFont + border-bottom-color + + = + + headerGradientColor + background-color + + = + + trimColor + color + + = + + headerFamilyFont + font-family + + = + + headerTextColor + color + + = + = + + headerSizeFont + font-size + + + + +
+ = + = + + Skin parameters for the content area of the page</titl= e> + <tgroup cols=3D"2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalBackgroundColor</entry> + <entry>background-color</entry> + </row> + = + <row> + <entry>panelBorderColor</entry> + <entry>border-top-color</entry> + </row> + = + <row> + <entry>trimColor</entry> + <entry>color</entry> + </row> + = + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + = + <row> + <entry>generalTextColor</entry> + <entry>color</entry> + </row> + = + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + = + </tbody> + </tgroup> + </table> + = + = + <table> + <title>Skin parameters for the footer + + + + Skin parameters + CSS properties + + + + + generalBackgroundColor + border-top-color + + = + + panelBorderColor + background-color + + = + + generalFamilyFont + font-family + + = + + generalTextColor + color + + = + + generalSizeFont + font-size + + = + + +
+ = + = + = + + Skin parameters for the side panel + + + + Skin parameters + CSS properties + + + + + + generalFamilyFont + font-family + + = + + generalTextColor + color + + = + + generalSizeFont + font-size + + = + + +
+ = + = + + Skin parameters for h1,h2,h3 HTML tags + + + + Skin parameters + CSS properties + + + + = + + headerFamilyFont + font-family + + = + + headTextColor + color + + = + + +
+ = + = + = + + Skin parameters for p,ul,ol HTML tags + + + + Skin parameters + CSS properties + + + + = + + generalFamilyFont + font-family + + = + + controlTextColor + color + + = + + +
+ = + = + = + + Skin parameters for the hovered link + + + + Skin parameters + CSS properties + + + + = + + hoverLinkColor + color + + = + = + + +
+ = + = + = + + Skin parameters for the visited link + + + + Skin parameters + CSS properties + + + + = + + visitedLinkColor + color + + = + = + + +
+ = + = +
= + =
Component CSS Selectors = @@ -240,4 +547,13 @@ = =
+
+ Relevant Resources Links + + On the component Live Demo page you can see the e= xample of + <rich:page> + component usage and sources for the given exam= ple. + The Layout components for RichFaces 3.3.1 on the JBoss.org Wiki +
\ No newline at end of file --===============4015960662584342648==--