1:02 p.m.
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
===================================================================
--- 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 @@
<title>Description</title>
<para>The <emphasis role="bold">
<property><rich:layout></property>
- </emphasis> component is designed to build layouts.
+ </emphasis> component is designed to build layouts basing on Yahoo UI Grids
CSS
</para>
- </section>
+ </section>
+ <figure>
+ <title>The <emphasis
role="bold"><property><rich:layout></property></emphasis>
component</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/rich_layout.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
<section>
<title>Key Features</title>
<itemizedlist>
- <listitem><para>Cross-borwser
comparability</para></listitem>
- <listitem><para>Easy markup creation</para></listitem>
+ <listitem><para>Cross-borwser
compatibility</para></listitem>
+ <listitem><para>Easy layout creation</para></listitem>
</itemizedlist>
</section>
Modified: trunk/docs/userguide/en/src/main/docbook/included/layout.xml
===================================================================
--- 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 @@
</para>
<programlisting role="XML"><![CDATA[...
<rich:layout>
- ...
+ <rich:layoutPanel position="center">
+ <!--center-->
+ </rich:layoutPanel>
</rich:layout>
...
]]></programlisting>
@@ -71,12 +73,10 @@
<section>
<title>Details of Usage</title>
- <para>The <emphasis
role="bold"><property><rich:layout></property></emphasis>
allows to build a grid that can be used to arrange the layout on the page. The
<emphasis
role="bold"><property><rich:layout></property></emphasis>
is used in conjunction with the <emphasis
role="bold"><property><rich:layoutPanel></property></emphasis>
that is used as a child element and carries the main burned of building
grid.</para>
+ <para>The <emphasis
role="bold"><property><rich:layout></property></emphasis>
allows to build a grid that can be used to make the layout on the page. The <emphasis
role="bold"><property><rich:layout></property></emphasis>
is used in conjunction with the <emphasis
role="bold"><property><rich:layoutPanel></property></emphasis>
that is used as a child element and carries the main burden of building the
grid.</para>
- <para>Hence, you need to use the <emphasis
role="bold"><property><rich:layout></property></emphasis>
as a container and <emphasis
role="bold"><property><rich:layoutPanel></property></emphasis>
to create areas inside the container.</para>
- <para>By setting the
<emphasis><property>"position"</property></emphasis>
attribute of each <emphasis
role="bold"><property><rich:layoutPanel></property></emphasis>
to top, left, center, right, bottom
- you can build up to 5 corresponding areas.
- </para>
+ <para>Hence, you need to use the <emphasis
role="bold"><property><rich:layout></property></emphasis>
as a container and <emphasis
role="bold"><property><rich:layoutPanel></property></emphasis>
to create areas inside the container.</para> This is how you can make a layout with
5 areas:
+
<para>
<emphasis role="bold">Example:</emphasis>
@@ -101,48 +101,19 @@
</rich:layoutPanel>
</rich:layout>
...]]></programlisting>
+ <para>To get more details about <emphasis
role="bold"><property><rich:layoutPanel></property></emphasis>
please read the <link linkend="rich_layoutPanel"> corresponding
chapter</link> of the guide.</para>
+
- <note>
- <title>Note:</title>
- <para>Please keep in mind that no matter what layout
- composition you are creating you should have a
<emphasis role="bold"><property><rich:layoutPanel
></property></emphasis> with the
<emphasis><property>"position"</property></emphasis>
attribute set to "center". </para>
-
- </note>
+
-
-
- <para>To create a two-column layout you need to use two
- <emphasis
role="bold"><property><rich:layoutPanel></property></emphasis>
- one of which should be a central
area(<code>position="center"</code>) and the other one
should be either left or right.
- The following snippet will help you understand the way
<emphasis
role="bold"><property><rich:layout></property></emphasis>
works.</para>
-
-
- <programlisting role="XML"><![CDATA[...<rich:layout>
-<rich:layoutPanel position="left">
- <!--left-->
-</rich:layoutPanel>
-<rich:layoutPanel position="center">
- <!--center-->
-</rich:layoutPanel>
-</rich:layout>
- ...]]></programlisting>
-
-
-
- <para>Moreover, you can nest the <emphasis
role="bold"><property><rich:layoutPanel></property></emphasis>
tags into <emphasis
role="bold"><property><rich:layoutPanel></property></emphasis>
to divide the area as well.</para>
-
-
-
</section>
<section>
<title>Relevant Resources Links</title>
- <para>Vizit
- <ulink
url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j...
page at
- RichFaces live demo for examples of component usage and their sources.</para>
- <para>"
- <ulink url="http://www.jboss.org/community/docs/DOC-9607">Using the
"rendered" attribute of <rich:layout></ulink>"
article
- in RichFaces cookbook at JBoss portal gives an example of code of the component
usage case.
- </para>
+ <para>Visit
+ <ulink
url="http://livedemo.exadel.com/richfaces-demo/richfaces/layouts.jsf...
page at
+ RichFaces Live demo for examples of component usage and their sources.</para>
+ <para>The <ulink
url="http://www.jboss.org/community/docs/DOC-13336">Layout components for
RichFaces 3.3.1</ulink> on the JBoss.org Wiki</para>
+
</section>
</section>
Modified: trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.desc.xml
===================================================================
--- 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 @@
<?xml version="1.0" encoding="UTF-8"?>
-<section>
+<section id="layoutPanel">
<sectioninfo>
<keywordset>
- <keyword>rich:page</keyword>
+ <keyword>rich:layoutPanel</keyword>
</keywordset>
</sectioninfo>
<section>
@@ -18,8 +18,9 @@
<title>Key Features</title>
<itemizedlist>
- <listitem><para>Option to change the renderer of the
component</para></listitem>
-
+ <listitem><para>Cross-browser
compatibility</para></listitem>
+ <listitem><para>Provides possibility of an easy layout
creation</para></listitem>
+
</itemizedlist>
</section>
</section>
\ No newline at end of file
Modified: trunk/docs/userguide/en/src/main/docbook/included/layoutPanel.xml
===================================================================
--- 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 @@
</rich:layout>
...]]></programlisting>
+ <para>You can specify the width of the layout area with the
<emphasis><property>"width"</property></emphasis>attribute.</para>
- <para>In more detail the component is covered in the <link
linkend="DofURichLayout"><emphasis
role="bold"><property><rich:layout></property></emphasis></link>.</para>
-
</section>
<section>
<title>Relevant Resources Links</title>
<para><ulink
-
url="http://livedemo.exadel.com/richfaces-demo/richfaces/layoutPanel...
+
url="http://livedemo.exadel.com/richfaces-demo/richfaces/layouts.jsf...
On RichFaces LiveDemo page </ulink> you can see an example of
<emphasis role="bold">
-
<property><layoutPanel></property>
- </emphasis> usage and sources for the given example. </para>
+ <property><rich:layoutPanel></property>
+ </emphasis> usage and sources for the given example. </para>
+ <para>The <link linkend="rich_layout"><emphasis
role="bold"><property><rich:layout></property></emphasis></link>
chapter of the guide.</para>
+ <para>The <ulink
url="http://www.jboss.org/community/docs/DOC-13336">Layout components for
RichFaces 3.3.1</ulink> on the JBoss.org Wiki.</para>
</section>
</section>
Modified: trunk/docs/userguide/en/src/main/docbook/included/rich_page.desc.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/rich_page.desc.xml 2009-04-30
16:52:05 UTC (rev 13974)
+++ trunk/docs/userguide/en/src/main/docbook/included/rich_page.desc.xml 2009-04-30
17:02:02 UTC (rev 13975)
@@ -9,7 +9,7 @@
<title>Description</title>
<para>The <emphasis role="bold">
<property><rich:page></property>
- </emphasis> component is used to create structured layouts containing
header, bottom, center and left or right layout areas as well as to define the content
of the <head/> element, declare DOCTYPE etc.</para>
+ </emphasis> component is used to create basic (X)HTML markup and define
document parameters like DOCTYPE, title etc. The component also allows to build top level
layout: header, bottom, center and left or right layout areas.</para>
</section>
@@ -18,10 +18,10 @@
<itemizedlist>
- <listitem><para>Option to change the renderer of the
component</para></listitem>
+ <listitem><para>Option to change the renderer of the component
(themes support)</para></listitem>
<listitem><para>Possibility to define parameters of an HTML
page</para></listitem>
-
-
+ <listitem><para>Possibility to create page layout with
facets</para></listitem>
+ <listitem><para>Provides styling based on RichFaces
skinnability</para></listitem>
</itemizedlist>
</section>
</section>
\ No newline at end of file
Modified: trunk/docs/userguide/en/src/main/docbook/included/rich_page.xml
===================================================================
--- 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 @@
<emphasis role="bold">Example:</emphasis>
</para>
<programlisting role="XML"><![CDATA[...
-<rich:layout>
- <rich:layoutPanel position="center">
- <!--center-->
-</rich:layoutPanel>
-</rich:layout>
+<rich:page>
+ <!-- page body -->
+</rich:page>
...]]></programlisting>
</section>
<section>
@@ -60,16 +58,16 @@
<para>
<emphasis role="bold">Example:</emphasis>
</para>
- <programlisting role="JAVA"><![CDATA[import
org.richfaces.component.html.HtmllayoutPanel;
+ <programlisting role="JAVA"><![CDATA[import
org.richfaces.component.html.HtmlPage;
...
-HtmllayoutPanel mylayoutPanel = new HtmllayoutPanel();
+HtmlPage myHtmlPage = new HtmlPage();
...]]></programlisting>
</section>
<section>
<title>Details of Usage</title>
<para>The <emphasis
role="bold"><property><rich:page></property></emphasis>
- component together with the <emphasis
role="bold"><property><rich:laout></property></emphasis>
component provides
+ component together with the <emphasis
role="bold"><property><rich:layout></property></emphasis>
component provides
a full-fledged mechanism for markup creation. </para>
@@ -87,7 +85,7 @@
<listitem><para>"html-3.2"</para></listitem>
</itemizedlist>
-
+ <para>The default value is "html".</para>
<para>
The
<emphasis><property>"contentType"</property></emphasis>
allows to specify the type of the content and encoding for the page.
</para>
@@ -102,8 +100,7 @@
</para>
<programlisting role="XML"><![CDATA[...
-<rich:page pageTitle="The title of the page" markupType="xhtml"
- contentType="text/html; charset=utf-8">
+<rich:page pageTitle="The title of the page"
markupType="xhtml">
<f:facet name="pageHeader">
<meta content="The rich:page component" name="keywords" />
<link rel="shortcut icon" href="/images/favicon.ico" />
@@ -114,8 +111,8 @@
</rich:page>
...]]></programlisting>
- <para>The implementation of the <emphasis
role="bold"><property><rich:page></property></emphasis>
component provides three facets that you can use to arrange the layout of the page:
"header", "subheader", "sidebar"
and "footer". Their behavior is quite self-explanatory. </para>
- <para>The position of the panel rendered by a "sidebar"
facet can be set with the
<emphasis><property>"sidebarPosition"</property></emphasis>
attribute that can take either "right" or "left"
values, you can also specify width for this facet with the
"sidebarWidth" attribute. </para>
+ <para>The implementation of the <emphasis
role="bold"><property><rich:page></property></emphasis>
component provides four facets that you can use to arrange the layout of the page:
"header", "subheader", "sidebar"
and "footer". Their behavior is quite self-explanatory. </para>
+ <para>The position of the panel rendered by the "sidebar"
facet can be set with the
<emphasis><property>"sidebarPosition"</property></emphasis>
attribute that can take either "right" or "left" as
values, you can also specify the width for this facet with the
<emphasis><property>"sidebarWidth"</property></emphasis>
attribute. </para>
<para>
<emphasis role="bold">Example:</emphasis>
</para>
@@ -143,8 +140,11 @@
<para>Several templates are available for the <emphasis
role="bold"><property><rich:page></property></emphasis>
component. A template can be activated with the
<emphasis><property>"theme"</property></emphasis>
attribute.</para>
- <para>The template defines the way the <emphasis
role="bold"><property><rich:page></property></emphasis>
is rendered. Standard renderer(default) of the <emphasis
role="bold"><property><rich:page></property></emphasis>
</para>
+
+ <para>The theme defines the way the <emphasis
role="bold"><property><rich:page></property></emphasis>
is rendered. Default renderer(default theme) of the <emphasis
role="bold"><property><rich:page></property></emphasis>
has no mappings to skin parameters and just provides CSS classes for the page part.
However, the <property>simple</property> theme, which is an extension of the
default theme, has mappings to skin parameters and adds the RichFaces skinning for the
page elements. </para>
+ <para>As a whole, RichFaces provides 4 themes for the <emphasis
role="bold"><property><rich:page></property></emphasis>
component out-of-the-box: "simple", "violetRays",
"oldschool", "smooth". The <ulink
url="http://www.jboss.org/community/docs/DOC-13635">Creating a Theme for
<rich:page></ulink> article tells how you can create your custom theme
for the <emphasis
role="bold"><property><rich:page></property></emphasis>
component. </para>
+
</section>
<section>
@@ -187,7 +187,314 @@
</table>
</section>
+ <section>
+ <title>Skin Parameters for the "simple"
theme</title>
+ <table>
+ <title>Skin parameters for the <body/> HTML
element</title>
+ <tgroup cols="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</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>generalSizeFont</entry>
+ <entry>font-size</entry>
+ </row>
+
+ </tbody>
+ </tgroup>
+ </table>
+
+
+ <table>
+ <title>Skin parameters for the header</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>generalSizeFont </entry>
+ <entry>border-bottom-color</entry>
+ </row>
+
+ <row>
+ <entry>headerGradientColor</entry>
+ <entry>background-color</entry>
+ </row>
+
+ <row>
+ <entry>trimColor</entry>
+ <entry>color</entry>
+ </row>
+
+ <row>
+ <entry>headerFamilyFont</entry>
+ <entry>font-family</entry>
+ </row>
+
+ <row>
+ <entry>headerTextColor</entry>
+ <entry>color</entry>
+ </row>
+
+
+ <row>
+ <entry>headerSizeFont</entry>
+ <entry>font-size</entry>
+ </row>
+
+ </tbody>
+ </tgroup>
+ </table>
+
+
+ <table>
+ <title>Skin parameters for the content area of the page</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>generalBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+
+ <row>
+ <entry>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</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>generalBackgroundColor</entry>
+ <entry>border-top-color</entry>
+ </row>
+
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>background-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 side panel</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+
+ <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 h1,h2,h3 HTML tags</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+
+ <row>
+ <entry>headerFamilyFont</entry>
+ <entry>font-family</entry>
+ </row>
+
+ <row>
+ <entry>headTextColor</entry>
+ <entry>color</entry>
+ </row>
+
+ </tbody>
+ </tgroup>
+ </table>
+
+
+
+ <table>
+ <title>Skin parameters for p,ul,ol HTML tags</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+
+ <row>
+ <entry>generalFamilyFont</entry>
+ <entry>font-family</entry>
+ </row>
+
+ <row>
+ <entry>controlTextColor</entry>
+ <entry>color</entry>
+ </row>
+
+ </tbody>
+ </tgroup>
+ </table>
+
+
+
+ <table>
+ <title>Skin parameters for the hovered link</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+
+ <row>
+ <entry>hoverLinkColor</entry>
+ <entry>color</entry>
+ </row>
+
+
+ </tbody>
+ </tgroup>
+ </table>
+
+
+
+ <table>
+ <title>Skin parameters for the visited link</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+
+ <row>
+ <entry>visitedLinkColor</entry>
+ <entry>color</entry>
+ </row>
+
+
+ </tbody>
+ </tgroup>
+ </table>
+
+
+ </section>
+
<section>
<title>Component CSS Selectors</title>
@@ -240,4 +547,13 @@
</table>
</section>
+ <section>
+ <title>Relevant Resources Links</title>
+ <para>
+ <ulink
url="http://livedemo.exadel.com/richfaces-demo/richfaces/layouts.jsf...
+ >On the component Live Demo page</ulink> you can see the example
of <emphasis role="bold">
+ <property><rich:page></property>
+ </emphasis> component usage and sources for the given example.
</para>
+ <para>The <ulink
url="http://www.jboss.org/community/docs/DOC-13336">Layout components for
RichFaces 3.3.1</ulink> on the JBoss.org Wiki</para>
+ </section>
</section>
\ No newline at end of file