Author: atsebro
Date: 2009-09-10 12:30:18 -0400 (Thu, 10 Sep 2009)
New Revision: 15533
Modified:
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_modalPanel.xml
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panel.xml
Log:
RF-7804: Rich Output component group description review --> rich:panel
Modified:
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_modalPanel.xml
===================================================================
---
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_modalPanel.xml 2009-09-10
15:46:40 UTC (rev 15532)
+++
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_modalPanel.xml 2009-09-10
16:30:18 UTC (rev 15533)
@@ -302,7 +302,7 @@
<tgroup cols="4">
<thead>
<row>
- <entry>Class name (selector)</entry>
+ <entry>Class name</entry>
<entry>Description</entry>
<entry>Skin Parameter</entry>
<entry>CSS property</entry>
Modified:
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panel.xml
===================================================================
---
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panel.xml 2009-09-10
15:46:40 UTC (rev 15532)
+++
branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panel.xml 2009-09-10
16:30:18 UTC (rev 15533)
@@ -1,270 +1,244 @@
<section role="NotInToc" id="rich_panel">
- <title>
- <
- rich:panel
- >
- <emphasis role="since">
- <superscript> available since <emphasis
role="version">3.0.0</emphasis>
- </superscript>
- </emphasis>
- </title>
- <section>
- <title>Description</title>
- <para>A skinnable <property>panel</property> that is rendered as
a bordered rectangle with or
- without a header.</para>
- <figure>
- <title>
- <emphasis role="bold">
- <property><rich:panel></property>
- </emphasis> component</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/panel_init.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- </section>
- <section>
- <title>Key Features</title>
- <itemizedlist>
- <listitem>
- <para>Highly customizable look and feel </para>
- </listitem>
- <listitem>
- <para>Support for any content inside</para>
- </listitem>
- <listitem>
- <para>Header adding feature</para>
- </listitem>
- </itemizedlist>
- </section>
- <section>
- <title>Details of Usage</title>
- <para>The <emphasis>
- <property>"header"</property>
- </emphasis> attribute defines text to be represented. If you can use the
- <emphasis>
- <property>"header"</property>
- </emphasis> facet, you can even not use the <emphasis>
- <property>"header"</property>
- </emphasis> attribute.</para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="XML"><![CDATA[...
-<rich:panel>
- <f:facet name="header">
- <h:graphicImage value="/images/img1.png"/>
- </f:facet>
- ...
- <!--Any Content inside-->
- ...
-</rich:panel>
-...
-]]></programlisting>
-
- <para>
- <emphasis role="bold">
- <property><rich:panel></property>
- </emphasis> components are used to group page content pieces on similarly
formatted
- rectangular <property>panels</property>. </para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="XML"><![CDATA[...
-<rich:panel>
- ...
-</rich:panel>
-...
-]]></programlisting>
- <para>It's generating on a page in the following way:</para>
- <figure>
- <title>
- <emphasis role="bold">
- <property><rich:panel></property>
- </emphasis> without header</title>
+ <title>< rich:panel > <emphasis
role="since"><superscript> available since <emphasis
role="version">3.0.0</emphasis></superscript></emphasis></title>
+ <section>
+ <title>Description</title>
+ <para>The component implements a bordered rectangular panel with or
without header.</para>
+ <figure>
+ <title>
+ The <rich:panel></title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/panel_init.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </section>
+
+ <section>
+ <title>Key Features</title>
+ <itemizedlist>
+ <listitem>
+ <para>May have any content inside</para>
+ </listitem>
+ <listitem>
+ <para>May have header</para>
+ </listitem>
+ <listitem>
+ <para>Has customizable look and feel </para>
+ </listitem>
+ </itemizedlist>
+ </section>
+
+ <section>
+ <title>Details of Usage</title>
+ <para>
+ The component groups page contents into notional blocks.
+ Borders separate this content visually from the rest of page.
+ To define the <emphasis
role="bold"><property><rich:panel></property></emphasis>
on a page the following code will be enough:
+ </para>
+ <programlisting role="XML"><![CDATA[<rich:panel
/>]]></programlisting>
+
+ <para>The result:</para>
+ <figure>
+ <title>Empty <rich:panel></title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/panel2.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ <para>
+ The <emphasis
role="bold"><property><rich:panel></property></emphasis>
supports <code>header</code> facet that defines header and text label on it.
+ Besides that there is
<emphasis><property>"header"</property></emphasis>
attribute that does the same job.
+ The following two entries
+ </para>
+ <programlisting role="XML"><![CDATA[<-- A -->
+<rich:panel header="I'm panel header" />
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/panel2.png"/>
- </imageobject>
- </mediaobject>
- </figure>
-
- <para>The example shows that similar rectangular areas are formed with a
particular style.</para>
- <para>When creating a <property>panel</property> with a header
element, one more <emphasis role="bold">
- <property><div></property>
- </emphasis> element is added with content defined for a
header.</para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="XML"><![CDATA[...
+<-- B -->
<rich:panel>
- <f:facet name="header">
- <h:outputText value="Olympus EVOLT E-500 "/>
- </f:facet>
- ...
-</rich:panel>
-...
-]]></programlisting>
- <para>It's displayed on a page in the following way:</para>
- <figure>
- <title>
- <emphasis role="bold">
- <property><rich:panel></property> with
header</emphasis>
- </title>
-
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/panel3.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>As it has been mentioned <link
linkend="panel">above</link>, the component is mostly used for a page
style definition,
- hence the main attributes are style ones.</para>
- <itemizedlist>
- <listitem>
+ <f:facet name="header">
+ <h:outputText value="I'm panel header"/>
+ </f:facet>
+</rich:panel>]]></programlisting>
+
+ <para>
+ have the same output:
+ </para>
+ <figure>
+ <title>The <rich:panel> with header</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/panel3.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </section>
+
+ <section>
+ <title>Reference Data</title>
<para>
- <emphasis>
- <property> "styleClass" </property>
- </emphasis>
+ <ulink url="&tlddoc;rich/panel.html">Table of
<rich:panel> attributes</ulink>.
</para>
- </listitem>
- <listitem>
+
+ <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.panel</entry>
+ </row>
+ <row>
+ <entry>component-class</entry>
+
<entry>org.richfaces.component.html.HtmlPanel</entry>
+ </row>
+ <row>
+ <entry>component-family</entry>
+ <entry>org.richfaces.panel</entry>
+ </row>
+ <row>
+ <entry>renderer-type</entry>
+
<entry>org.richfaces.PanelRenderer</entry>
+ </row>
+ <row>
+ <entry>tag-class</entry>
+
<entry>org.richfaces.taglib.PanelTag</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Facets</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Facet name</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>header</entry>
+ <entry>Defines panel header and text label on
it</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table id="tab_cn11">
+ <title>Style classes (selectors) and mapped skin
parameters</title>
+ <tgroup cols="4">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+ <entry>Description</entry>
+ <entry>Skin parameter</entry>
+ <entry>CSS property</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry
morerows="1">.rich-panel</entry>
+ <entry morerows="1">Defines styles
for a wrapper <div> element of a component</entry>
+ <entry>generalBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+
+ <row>
+ <entry
morerows="2">.rich-panel-body</entry>
+ <entry morerows="2">Defines styles
for a body element</entry>
+ <entry>generalFamilyFont</entry>
+ <entry>font-family</entry>
+ </row>
+ <row>
+ <entry>generalSizeFont</entry>
+ <entry>font-size</entry>
+ </row>
+ <row>
+ <entry>generalTextColor</entry>
+ <entry>color</entry>
+ </row>
+ <row>
+ <entry
morerows="5">.rich-panel-header</entry>
+ <entry morerows="5">Defines styles
for a header element</entry>
+ <entry>headerFamilyFont</entry>
+ <entry>font-family</entry>
+ </row>
+ <row>
+ <entry>headerSizeFont</entry>
+ <entry>font-size</entry>
+ </row>
+ <row>
+ <entry>headerWeightFont</entry>
+ <entry>font-weight</entry>
+ </row>
+ <row>
+ <entry>headerTextColor</entry>
+ <entry>color</entry>
+ </row>
+ <row>
+ <entry>headerBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ <row>
+ <entry>headerBackgroundColor</entry>
+ <entry>border-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Internal style classes (selectors)</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name (selector)</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>.rich-panel</entry>
+ <entry>Defines styles for a wrapper
<div> element of a component</entry>
+ </row>
+ <row>
+ <entry>.rich-panel-body</entry>
+ <entry>Defines styles for a body
element</entry>
+ </row>
+ <row>
+ <entry>.rich-panel-header</entry>
+ <entry>Defines styles for a header
element</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
<para>
- <emphasis>
- <property> "headerClass" </property>
- </emphasis>
+ You can find all necessary information about style classes redefinition
in <link linkend="customstyles">Definition of Custom Style
Classes</link> section.
</para>
- </listitem>
- <listitem>
+ </section>
+
+ <section>
+ <title>Relevant Resources Links</title>
<para>
- <emphasis>
- <property> "bodyClass" </property>
- </emphasis>
+ Visit <ulink
url="http://livedemo.exadel.com/richfaces-demo/richfaces/panel.jsf?c...
page</ulink> at RichFaces LiveDemo for examples of component usage and their
sources.
</para>
- </listitem>
- </itemizedlist>
- <para>Moreover, to add e.g. some JavaScript effects, events defined on it are
used.</para>
- <itemizedlist>
- <listitem>
- <para>
- <emphasis>
- <property>"onmouseover"</property>
- </emphasis>
- </para>
- </listitem>
- <listitem>
- <para>
- <emphasis>
- <property>"onclick"</property>
- </emphasis>
- </para>
- </listitem>
- <listitem>
- <para>
- <emphasis>
- <property>"onmouseout"</property>
- </emphasis>
- </para>
- </listitem>
- <listitem>
- <para> etc. </para>
- </listitem>
- </itemizedlist>
-
- </section>
- <section>
- <title>Reference Data</title>
- <para>
- <ulink url="&tlddoc;rich/panel.html">Table of
- <rich:panel>
- attributes</ulink>.
- </para>
- <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.panel</entry>
- </row>
- <row>
- <entry>component-class</entry>
- <entry>org.richfaces.component.html.HtmlPanel</entry>
- </row>
- <row>
- <entry>component-family</entry>
- <entry>org.richfaces.panel</entry>
- </row>
- <row>
- <entry>renderer-type</entry>
- <entry>org.richfaces.PanelRenderer</entry>
- </row>
- <row>
- <entry>tag-class</entry>
- <entry>org.richfaces.taglib.PanelTag</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Facets</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Facet name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>header</entry>
- <entry>Defines the header content</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- <table id="tab_cn11">
- <title>Classes names that define a component appearance</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Class description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>rich-panel</entry>
- <entry>Defines styles for a wrapper <div> element
of a component</entry>
- </row>
- <row>
- <entry>rich-panel-header</entry>
- <entry>Defines styles for a header element</entry>
- </row>
- <row>
- <entry>rich-panel-body</entry>
- <entry>Defines styles for a body element</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- You can find all necessary information about style classes redefinition in
- <link linkend="customstyles">Definition of Custom Style
Classes</link>
- section.
- </section>
- <section>
- <title>Relevant Resources Links</title>
- <para>
- <ulink
url="http://livedemo.exadel.com/richfaces-demo/richfaces/panel.jsf?c...
the component LiveDemo page</ulink> you can see the example of <emphasis
role="bold">
- <property><rich:panel></property>
- </emphasis> usage and sources for the given example. </para>
- </section>
-</section>
\ No newline at end of file
+ <para>
+ If you have any questions or ideas regarding the <emphasis
role="bold"><property><rich:panel></property></emphasis>
tell about them at the <ulink
url="http://www.jboss.com/index.html?module=bb&op=viewtopic&...
Users Forum</ulink>.
+ </para>
+ </section>
+</section>