[richfaces-svn-commits] JBoss Rich Faces SVN: r2627 - trunk/docs/userguide/en/src/main/docbook/included.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Thu Aug 30 14:29:38 EDT 2007
Author: vkorluzhenko
Date: 2007-08-30 14:29:37 -0400 (Thu, 30 Aug 2007)
New Revision: 2627
Modified:
trunk/docs/userguide/en/src/main/docbook/included/calendar.xml
Log:
http://jira.jboss.com/jira/browse/RF-446 - added descriptions for classes
Modified: trunk/docs/userguide/en/src/main/docbook/included/calendar.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/calendar.xml 2007-08-30 17:04:47 UTC (rev 2626)
+++ trunk/docs/userguide/en/src/main/docbook/included/calendar.xml 2007-08-30 18:29:37 UTC (rev 2627)
@@ -399,198 +399,353 @@
</section>
- <!--section>
+ <section>
<title>Look-and-Feel Customization</title>
-
- <para>As this component is just a wrapper for its children its provide the only
- "rich-panel-menu" class for wrapper div element. To redefine appearance of
- particular panel menus, it's possible to define your own CSS class. And then just
- define it in the components class attribute. </para>
-
-</section-->
-
- <section>
- <title>Definition of Custom Style Classes</title>
- <figure>
- <title>Classes names</title>
+ <para>For skinnability implementation, the components use a <emphasis>
+ <property>style class redefinition method.</property>
+ </emphasis>
+ Default style classes are mapped on <emphasis>
+ <property>skin parameters.</property>
+ </emphasis></para>
+
+ <para>There are two ways to redefine the appearance of all <emphasis role="bold">
+ <property><rich:calendar></property>
+ </emphasis> components at once:</para>
+
+ <itemizedlist>
+ <listitem>
+ <para>Redefine the corresponding skin parameters</para>
+ </listitem>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/calendar1.png"/>
- </imageobject>
- </mediaobject>
- </figure>
+ <listitem>
+ <para>Add to a user's style sheets <emphasis>
+ <property>style classes</property>
+ </emphasis> used by a <emphasis role="bold">
+ <property><rich:calendar></property>
+ </emphasis> component</para>
+ </listitem>
+ </itemizedlist>
+ </section>
+
+ <!--section>
+ <title> Skin parameters redefinition</title>
- <para>On the screenshot, there are classes names defining specified elements.</para>
-
<table>
- <title>Classes names that define input field and button appearance</title>
+ <title>Skin parameters redefinition for table element of the first level group</title>
<tgroup cols="2">
<thead>
<row>
- <entry>Class name</entry>
+ <entry>Parameters for table element of the first level group</entry>
- <entry>Description</entry>
+ <entry>CSS properties</entry>
</row>
</thead>
<tbody>
<row>
- <entry>rich-calendar-input </entry>
+ <entry>headerWeightFont</entry>
- <entry>Defines input field</entry>
+ <entry>font-weight</entry>
</row>
<row>
- <entry>rich-calendar-popupicon</entry>
+ <entry>generalFamilyFont</entry>
- <entry>Defines icon for button</entry>
+ <entry>font-family</entry>
</row>
+ <row>
+ <entry>headerSizeFont</entry>
+
+ <entry>font-size</entry>
+ </row>
+
+ <row>
+ <entry>headerTextColor</entry>
+
+ <entry>color</entry>
+ </row>
+
+ <row>
+ <entry>headerBackgroundColor</entry>
+
+ <entry>background-color</entry>
+ </row>
</tbody>
</tgroup>
</table>
<table>
- <title>Classes names that define days appearance</title>
+ <title>Skin parameters redefinition for table element of the second and next levels groups</title>
<tgroup cols="2">
<thead>
<row>
- <entry>Class name</entry>
+ <entry>Parameters for table element of the second and next levels groups</entry>
- <entry>Description</entry>
+ <entry>CSS properties</entry>
</row>
</thead>
<tbody>
-
<row>
- <entry>rich-calendar-days</entry>
+ <entry>headerWeightFont</entry>
- <entry></entry>
+ <entry>font-weight</entry>
</row>
<row>
- <entry>rich-Weekendclass</entry>
+ <entry>headerFamilyFont</entry>
- <entry></entry>
+ <entry>font-family</entry>
</row>
<row>
- <entry>rich-calendar-week</entry>
+ <entry>headerSizeFont</entry>
- <entry></entry>
+ <entry>font-size</entry>
</row>
<row>
- <entry>rich-calendar-cell</entry>
+ <entry>generalTextColor</entry>
- <entry></entry>
+ <entry>color</entry>
</row>
<row>
- <entry>rich-calendar-holly</entry>
+ <entry>tableBorderColor</entry>
- <entry></entry>
+ <entry>border-top-color</entry>
</row>
-
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Skin parameter redefinition for wrapped div element of the first level group</title>
+
+ <tgroup cols="2">
+ <thead>
<row>
- <entry>rich-calendar-selected</entry>
+ <entry>Parameter for wrapped div element of the first level group</entry>
- <entry></entry>
+ <entry>CSS properties</entry>
</row>
-
+ </thead>
+
+ <tbody>
<row>
- <entry>rich-calendar-hover</entry>
+ <entry>panelBorderColor</entry>
- <entry></entry>
+ <entry>border-color</entry>
</row>
</tbody>
</tgroup>
</table>
-
+ </section-->
+
+ <section>
+ <title>Definition of Custom Style Classes</title>
+
+ <figure>
+ <title>Classes names</title>
+
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/calendar1.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ <para>On the screenshot, there are classes names defining specified elements.</para>
+
<table>
- <title>Classes names that define popup element</title>
-
+ <title>Classes names that define input field and button appearance</title>
+
<tgroup cols="2">
<thead>
<row>
<entry>Class name</entry>
-
+
<entry>Description</entry>
</row>
</thead>
-
+
<tbody>
+ <row>
+ <entry>rich-calendar-input </entry>
+
+ <entry>Defines the styles for the input field</entry>
+ </row>
+
+ <row>
+ <entry>rich-calendar-popupicon</entry>
+
+ <entry>Defines the styles for the icon for button</entry>
+ </row>
+
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Classes names that define days appearance</title>
+
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+
+ <entry>Description</entry>
+ </row>
+ </thead>
+
+ <tbody>
+
+ <row>
+ <entry>rich-calendar-days</entry>
+
+ <entry>Defines styles for names of working days in the header</entry>
+ </row>
+
+ <row>
+ <entry>rich-calendar-weekends</entry>
+
+ <entry>Defines styles for names of weekend in the header</entry>
+ </row>
+
+ <row>
+ <entry>rich-calendar-week</entry>
+
+ <entry>Defines styles for weeks numbers</entry>
+ </row>
<row>
- <entry>rich-calendar-exterior</entry>
+ <entry>rich-calendar-today</entry>
- <entry></entry>
+ <entry>Defines styles for today date</entry>
</row>
+
+ <row>
+ <entry>rich-calendar-cell</entry>
+
+ <entry>Defines styles for cells with days</entry>
+ </row>
+
+ <row>
+ <entry>rich-calendar-holly</entry>
+
+ <entry>Defines styles for hollydays</entry>
+ </row>
+
+ <row>
+ <entry>rich-calendar-select</entry>
+
+ <entry>Defines styles for selected day</entry>
+ </row>
+
+ <row>
+ <entry>rich-calendar-hover</entry>
+
+ <entry>Defines styles for hovered day</entry>
+ </row>
+
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Classes names that define popup element</title>
+
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+
+ <entry>Description</entry>
+ </row>
+ </thead>
+
+ <tbody>
+
+ <row>
+ <entry>rich-calendar-exterior</entry>
+
+ <entry>Defines styles for popup element</entry>
+ </row>
<row>
- <entry>rich-calendar-header-optional</entry>
+ <entry>rich-calendar-tool</entry>
- <entry></entry>
+ <entry>Defines styles for toolbars</entry>
</row>
<row>
- <entry>rich-calendar-footer-optional</entry>
+ <entry>rich-calendar-month</entry>
- <entry></entry>
+ <entry>Defines styles for names of months</entry>
</row>
-
+
<row>
+ <entry>rich-calendar-header-optional</entry>
+
+ <entry>Defines styles for optional header</entry>
+ </row>
+
+ <row>
+ <entry>rich-calendar-footer-optional</entry>
+
+ <entry>Defines styles for optional footer</entry>
+ </row>
+
+ <row>
<entry>rich-calendar-header</entry>
-
- <entry></entry>
+
+ <entry>Defines styles for header</entry>
</row>
-
+
<row>
<entry>rich-calendar-footer</entry>
-
- <entry></entry>
+
+ <entry>Defines styles for footer</entry>
</row>
-
+
<row>
- <entry>rich-calendar-today</entry>
-
- <entry></entry>
- </row>
-
- <row>
<entry>rich-calendar-boundary-dates</entry>
-
- <entry></entry>
+
+ <entry>Defines styles for active boundary button</entry>
</row>
-
+
<row>
<entry>rich-calendar-btn</entry>
-
- <entry></entry>
+
+ <entry>Defines styles for inactive boundary date</entry>
</row>
-
+
<row>
<entry>rich-calendar-current</entry>
-
- <entry></entry>
+
+ <entry>Defines styles for today control date</entry>
</row>
-
+
</tbody>
</tgroup>
</table>
-
- <para>In order to redefine the style for all calendars on a page using CSS,
- it's enough to create classes with the same names and define the necessary properties
- in them.</para>
-
- <para>To change the style of particular calendars define your own style
- classes in the corresponding calendar attributes. </para>
+
+ <para>In order to redefine the style for all <emphasis role="bold">
+ <property><rich:calendar></property>
+ </emphasis> components on a page using CSS, it's enough to create classes with the
+ same names and define the necessary properties in them.</para>
+
+ <para>To change the style of particular <emphasis role="bold">
+ <property><rich:calendar></property>
+ </emphasis> components define your own style classes in the corresponding <emphasis
+ role="bold">
+ <property><rich:calendar></property>
+ </emphasis>attributes.</para>
</section>
<section>
More information about the richfaces-svn-commits
mailing list