Author: alexsmirnov Date: 2007-12-11 19:45:15 -0500 (Tue, 11 Dec 2007) New Revision: 4756 Added: branches/3.1.x/docs/faq/ branches/3.1.x/docs/highlight/ branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionbox.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionbox.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolTip.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolTip.xml Removed: branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.desc.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.xml Modified: branches/3.1.x/docs/faq/en/pom.xml branches/3.1.x/docs/faq/pom.xml branches/3.1.x/docs/highlight/pom.xml branches/3.1.x/docs/pom.xml branches/3.1.x/docs/userguide/en/src/main/docbook/included/calendar.xml branches/3.1.x/docs/xslt/en/src/main/xslt/f.xsl branches/3.1.x/ui/assembly/pom.xml Log: Merged "faq" and "highlight" documentation modules from a trunk. Fix filenames registry for a tags descriptions. Copied: branches/3.1.x/docs/faq (from rev 4755, trunk/docs/faq) Modified: branches/3.1.x/docs/faq/en/pom.xml =================================================================== --- trunk/docs/faq/en/pom.xml 2007-12-11 23:30:42 UTC (rev 4755) +++ branches/3.1.x/docs/faq/en/pom.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -5,12 +5,12 @@ <parent> <groupId>org.richfaces.docs</groupId> <artifactId>faq</artifactId> - <version>3.2.0-SNAPSHOT</version> + <version>3.1.3-SNAPSHOT</version> <relativePath>../pom.xml</relativePath> </parent> <groupId>org.richfaces.docs.faq</groupId> <artifactId>${translation}</artifactId> - <version>3.2.0-SNAPSHOT</version> + <version>3.1.3-SNAPSHOT</version> <packaging>jdocbook</packaging> <name>Richfaces Manual (${translation})</name> Modified: branches/3.1.x/docs/faq/pom.xml =================================================================== --- trunk/docs/faq/pom.xml 2007-12-11 23:30:42 UTC (rev 4755) +++ branches/3.1.x/docs/faq/pom.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -2,13 +2,13 @@ <parent> <artifactId>docs</artifactId> <groupId>org.richfaces</groupId> - <version>3.2.0-SNAPSHOT</version> + <version>3.1.3-SNAPSHOT</version> </parent> <modelVersion>4.0.0</modelVersion> <groupId>org.richfaces.docs</groupId> <artifactId>faq</artifactId> <packaging>pom</packaging> - <version>3.2.0-SNAPSHOT</version> + <version>3.1.3-SNAPSHOT</version> <name>FAQ</name> <description>Frequently asked questions</description> <pluginRepositories> Copied: branches/3.1.x/docs/highlight (from rev 4755, trunk/docs/highlight) Modified: branches/3.1.x/docs/highlight/pom.xml =================================================================== --- trunk/docs/highlight/pom.xml 2007-12-11 23:30:42 UTC (rev 4755) +++ branches/3.1.x/docs/highlight/pom.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -5,12 +5,12 @@ <parent> <artifactId>docs</artifactId> <groupId>org.richfaces</groupId> - <version>3.2.0-SNAPSHOT</version> + <version>3.1.3-SNAPSHOT</version> </parent> <modelVersion>4.0.0</modelVersion> <groupId>org.richfaces.docs</groupId> <artifactId>highlight</artifactId> - <version>3.2.0-SNAPSHOT</version> + <version>3.1.3-SNAPSHOT</version> <name>RichFaces Code Highlighting</name> <dependencyManagement> Modified: branches/3.1.x/docs/pom.xml =================================================================== --- branches/3.1.x/docs/pom.xml 2007-12-11 23:30:42 UTC (rev 4755) +++ branches/3.1.x/docs/pom.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -34,17 +34,17 @@ <enabled>true</enabled> <updatePolicy>always</updatePolicy> </snapshots> - <id>maven2-snapshots.exadel.com</id> - <name>Exadel Repository for Maven Snapshots</name> - <url>http://maven.exadel.com/</url> + <id>maven2-snapshots.jboss.org</id> + <name>Jboss Repository for Maven Snapshots</name> + <url>http://snapshots.jboss.org/maven2</url> <layout>default</layout> </repository> </repositories> <pluginRepositories> <pluginRepository> - <id>maven2-snapshots.exadel.com</id> + <id>maven2-snapshots.jboss.org</id> <name>Exadel Repository for Maven Snapshots</name> - <url>http://maven.exadel.com/</url> + <url>http://snapshots.jboss.org/maven2</url> <releases> <enabled>false</enabled> </releases> @@ -78,10 +78,8 @@ <modules> <module>xslt</module> - <!-- - <module>docbook</module> - <module>maven-docbook-plugin</module> - --> + <module>highlight</module> + <module>faq</module> <module>userguide</module> </modules> </project> \ No newline at end of file Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/calendar.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/calendar.xml 2007-12-11 23:30:42 UTC (rev 4755) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/calendar.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -98,38 +98,64 @@ </mediaobject> </figure> <para>Usage <emphasis> - <property>&quot;currentDate&quot;</property> - </emphasis> attribute isn&apos;t available in the popup - mode.</para> + <property>&quot;currentDate&quot;</property> + </emphasis> attribute isn&apos;t available in the popup mode.</para> <para>The <emphasis role="bold"> <property>&lt;rich:calendar&gt;</property> - </emphasis> component ables to render pages of days in two modes. Switching mode - could be defined with the <emphasis> + </emphasis> component ables to render pages of days in two modes. Switching mode could be + defined with the <emphasis> <property>&quot;mode&quot;</property> - </emphasis> attribute with two possible parameters: Ajax and Client. Default value is set to - &quot;Client&quot;.</para> + </emphasis> attribute with two possible parameters: ajax and client. Default value is set to + the &quot;client&quot;.</para> <itemizedlist> <listitem> <para>Ajax</para> </listitem> </itemizedlist> - - <para>Calendar requests portions of data from Data Model for a page rendering. If - <emphasis> + <para>Calendar requests portions of data from Data Model for a page rendering. If <emphasis> <property>&quot;dataModel&quot;</property> - </emphasis> attribute has <property>&quot;null&quot;</property> value, data requests are - not sent. In this case the &quot;Ajax&quot; mode is equal to the - &quot;Client&quot; mode. </para> - + </emphasis> attribute has <property>&quot;null&quot;</property> value, data requests + are not sent. In this case the &quot;ajax&quot; mode is equal to the + &quot;client&quot;. </para> <itemizedlist> <listitem> <para>Client</para> </listitem> </itemizedlist> - - <para>Calendar loads an initial portion of data in a specified range and use this data to - render months. Additional data requests are not sent.</para> - + <para>Calendar loads an initial portion of data in a specified range and use this data to render + months. Additional data requests are not sent.</para> + <note> + <title>Note:</title><emphasis> + <property>&quot;preloadDateRangeBegin&quot;</property> + </emphasis> and <emphasis> + <property>&quot;preloadDateRangeEnd&quot;</property> + </emphasis> attributes was designed only for the + <property>&quot;client&quot;</property> mode to load some data initially.</note> + <para><emphasis> + <property>&quot;ondataselect&quot;</property> + </emphasis> attribute is used to define an event that is triggered before date selection.</para> + <para><emphasis> + <property>&quot;ondateselected&quot;</property> + </emphasis> attribute is used to define an event that is triggered after date selection. </para> + <para>For example, to fire some event after date selection you should use <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis>. And it should be bound to <emphasis> + <property>&quot;ondateselected&quot;</property> + </emphasis> event as it&apos;s shown in the example below:</para> + <programlisting role="XML"><![CDATA[... + <rich:calendar id="date" value="#{bean.dateTest}"> + <a4j:support event="ondateselected" reRender="mainTable"/> + </rich:calendar> +...]]></programlisting> + <para><emphasis> + <property>&quot;ondataselect&quot;</property> + </emphasis> could be used for possibility of date selection canceling. See an example below:</para> + <programlisting role="XML"><![CDATA[... + <rich:calendar id="date" value="#{bean.dateTest}" ondateselect="if (!confirm('Are you sure to change date?')){return false;}"/> +...]]></programlisting> + <para>How to use these attributes see also on the <ulink + url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... + >RichFaces Users Forum</ulink>.</para> <para>There are three button-related attributes:</para> <itemizedlist> <listitem> @@ -186,97 +212,139 @@ </emphasis> attribute is set to &quot;bottom-left&quot;.</para> <para>The <emphasis role="bold"> <property>&lt;rich:calendar&gt;</property> - </emphasis> component provides to use <emphasis> + </emphasis> component allows to use <emphasis> <property>&quot;header&quot;</property> - </emphasis> facet. For example, you can add following scrolling elements to the facet: - {currentMonthControl}, {nextMonthControl}, {nextYearControl}, {previousYearControl}, - {previousMonthControl}.</para> - <para>Simple example is placed below.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <f:facet name="header"> - <f:verbatim> - {previousMonthControl} | {nextMonthControl} - </f:verbatim> - </f:facet> -...]]></programlisting> - <para>It&apos;s possible to define <emphasis> + </emphasis>, <emphasis> <property>&quot;footer&quot;</property> - </emphasis> facet and replace in it (in the same way how it was described for <emphasis> - <property>&quot;header&quot;</property> - </emphasis> facet), for example, following today bar elements: {todayControl}, - {selectedDateControl}, {helpControl}.</para> - <para>Also you can use <emphasis> + </emphasis>, <emphasis> <property>&quot;optionalHeader&quot;</property> - </emphasis> and <emphasis> + </emphasis>, <emphasis> <property>&quot;optionalFooter&quot;</property> - </emphasis> facets. These facets define the top and the bottom elements of the calendar. They - are not attached to the control parts of the calendar. You can replace in them any content.</para> - <para>The <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> component provides the possibility to use <emphasis> + </emphasis> facets. The following elements are available in these facets: + {currentMonthControl}, {nextMonthControl}, {nextYearControl}, {previousYearControl}, + {previousMonthControl}, {todayControl}, {selectedDateControl}. These elements could be used + for labels output.</para> + <para>Also you can use <emphasis> <property>&quot;weekNumber&quot;</property> - </emphasis> and <emphasis> + </emphasis> facet with available {weekNumber}, {elementId} elements and <emphasis> <property>&quot;weekDay&quot;</property> - </emphasis> facets. For example, using these facets you can change text style for the elements - of the calendar as it&apos;s shown in the example below:</para> + </emphasis> facet with {weekDayLabel}, {weekDayLabelShort}, {weekDayNumber}, {isWeekend}, + {elementId} elements. {weekNumber}, {weekDayLabel}, {weekDayLabelShort}, {weekDayNumber} + elements could be used for labels output, {isWeekend}, {elementId} - for additional processing + in JavaScript code.</para> + <para>These elements are shown on the picture below.</para> + + <figure> + <title>Available elements</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar3.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>Simple example of usage is placed below.</para> <para> <emphasis role="bold">Example:</emphasis> </para> <programlisting role="XML"><![CDATA[... - <f:facet name="weekNumber"> - <h:outputText style="font-weight: bold;" value="{weekNumber}" /> - </f:facet> +<!--Styles for cells --> +<style> + .width100{ + width:100%; + } + .talign{ + text-align:center; + } +</style> + +<rich:calendar id="myCalendar" popup="true" locale="#{calendarBean.locale}" value="#{bean.date}" + preloadRangeBegin="#{bean.date}" preloadRangeEnd="#{bean.date}" selectedDate="#{bean.date}" cellWidth="40px" cellHeight="40px"> + +<!-- Customization with usage of facets and accessible elements --> + <f:facet name="header"> + <h:panelGrid columns="2" width="100%" columnClasses="width100, fake"> + <h:outputText value="{selectedDateControl}" /> + <h:outputText value="{todayControl}" style="font-weight:bold; text-align:left"/> + </h:panelGrid> + </f:facet> + <f:facet name="weekDay"> + <h:panelGroup style="width:60px; overflow:hidden;" layout="block"> + <h:outputText value="{weekDayLabelShort}"/> + </h:panelGroup> + </f:facet> + <f:facet name="weekNumber"> + <h:panelGroup> + <h:outputText value="{weekNumber}" style="color:red"/> + </h:panelGroup> + </f:facet> + <f:facet name="footer"> + <h:panelGrid columns="3" width="100%" columnClasses="fake, width100 talign"> + <h:outputText value="{previousMonthControl}" style="font-weight:bold;"/> + <h:outputText value="{currentMonthControl}" style="font-weight:bold;"/> + <h:outputText value="{nextMonthControl}" style="font-weight:bold;"/> + </h:panelGrid> + </f:facet> + <h:outputText value="{day}"></h:outputText> +</rich:calendar> ...]]></programlisting> - <para>The example of using JavaScript API is placed below:</para> + <para>This is a result:</para> + <figure> + <title>Using facets </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it&apos;s shown on the picture above {selectedDateControl}, {todayControl} elements + are placed in the <emphasis> + <property>&quot;header&quot;</property> + </emphasis> facet, {previousMonthControl}, {currentMonthControl}, {nextMonthControl} - in the <emphasis> + <property>&quot;footer&quot;</property> + </emphasis> facet, {weekDayLabelShort} - in the <emphasis> + <property>&quot;weekDay&quot;</property> + </emphasis> facet, {nextYearControl}, {previousYearControl} are absent. Numbers of weeks are + red colored.</para> + + <para>It&apos;s possible to program events for calendar from JavaScript code. A simplest example of + usage JavaScript API is placed below:</para> <para> <emphasis role="bold">Example:</emphasis> </para> <programlisting role="XML"><![CDATA[... <a4j:form id="form"> - <h:panelGroup id="test" columns="2" style="width: 300px"> - <h:selectBooleanCheckbox value="#{bean.check}"> - <a4j:support event="onchange" reRender="test" /> - <f:selectItem itemValue="true" itemLabel="Show" /> - <f:selectItem itemValue="false" itemLabel="Hide" /> - </h:selectBooleanCheckbox> - <rich:calendar popup="true" - rendered="#{!bean.check}" value="#{bean.date}" id="c"/> - <a onclick="$('form:c').component.doExpand()" href="#">Show</a> - </h:panelGroup> + <rich:calendar popup="true" rendered="#{!bean.check}" value="#{bean.date}" id="c"/> + <!--The link which is used to call a calendar popup externally--> + <a onclick="$('form:c').component.doExpand()" href="#">Show</a> </a4j:form> ... ]]></programlisting> - + <para>Also the discussion about this problem can be found on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - <para>The <emphasis role="bold"> <property>&lt;rich:calendar&gt;</property> </emphasis> component provides the possibility to use a special Data Model to define data for element rendering. Data Model includes two major interfaces: </para> - <itemizedlist> <listitem>CalendarDataModel</listitem> <listitem>CalendarDataModelItem</listitem> </itemizedlist> - <para><property>CalendarDataModel</property> provides the following function:</para> <itemizedlist> <listitem>CalendarDataModelItem[] getData(Date[]);</listitem> </itemizedlist> - <para>This method is called when it&apos;s necessary to represent the next block of CalendarDataItems. It happens during navigation to the next (previous) month or in any other case when calendar renders. This method is called in <emphasis> <property>&quot;Ajax&quot;</property> </emphasis> mode when the calendar renders a new page. </para> - <para><property>CalendarDataModelItem</property> provides the following function:</para> <itemizedlist> <listitem>Date getDate() - returns date from the item. Default implementation returns date.</listitem> @@ -293,7 +361,6 @@ object. It could be used in the custom date representation on the calendar (inside the custom facet).</listitem> </itemizedlist> - </section> <section> @@ -315,14 +382,14 @@ <row> <entry>selectDate(date)</entry> - <entry>Select the date specified. If the date isn&apos;t in current month - performs + <entry>Selects the date specified. If the date isn&apos;t in current month - performs request to select</entry> </row> <row> <entry>isDateEnabled(date)</entry> - <entry>Check if given date is selectable</entry> + <entry>Checks if given date is selectable</entry> </row> <row> @@ -352,55 +419,55 @@ <row> <entry>nextMonth()</entry> - <entry>Navigate to next month</entry> + <entry>Navigates to next month</entry> </row> <row> <entry>nextYear()</entry> - <entry>Navigate to next year</entry> + <entry>Navigates to next year</entry> </row> <row> <entry>prevMonth()</entry> - <entry>Navigate to previous month </entry> + <entry>Navigates to previous month </entry> </row> <row> <entry>prevYear()</entry> - <entry>Navigate to previous year</entry> + <entry>Navigates to previous year</entry> </row> <row> <entry>today()</entry> - <entry>Select today date</entry> + <entry>Selects today date</entry> </row> <row> <entry>getSelectedDate()</entry> - <entry>Return currently selected date</entry> + <entry>Returns currently selected date</entry> </row> <row> <entry>Object getData()</entry> - <entry>Return additional data for the date</entry> + <entry>Returns additional data for the date</entry> </row> <row> <entry>enable()</entry> - <entry>enables calendar</entry> + <entry>Enables calendar</entry> </row> <row> <entry>disable()</entry> - <entry>disables calendar</entry> + <entry>Disables calendar</entry> </row> <row> @@ -418,13 +485,13 @@ <row> <entry>doCollapse()</entry> - <entry>Collapse calendar element</entry> + <entry>Collapses calendar element</entry> </row> <row> <entry>doExpand()</entry> - <entry>Expand calendar element</entry> + <entry>Expands calendar element</entry> </row> </tbody> </tgroup> @@ -941,11 +1008,15 @@ </thead> <tbody> + <row> + <entry>rich-calendar-popup</entry> + <entry>Defines styles for a popup element</entry> + </row> <row> <entry>rich-calendar-exterior</entry> - <entry>Defines styles for a popup element</entry> + <entry>Defines styles for a popup element exterior</entry> </row> <row> @@ -997,7 +1068,7 @@ </row> <row> - <entry>rich-calendar-current</entry> + <entry>rich-calendar-toolfooter</entry> <entry>Defines styles for a today control date</entry> </row> @@ -1006,14 +1077,14 @@ </tgroup> </table> - <para>In order to redefine the style for all <emphasis role="bold"> + <para>In order to redefine styles for all <emphasis role="bold"> <property>&lt;rich:calendar&gt;</property> </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names and define the necessary properties in them.</para> + same names and define necessary properties in them.</para> - <para>To change the style of particular <emphasis role="bold"> + <para>To change styles of particular <emphasis role="bold"> <property>&lt;rich:calendar&gt;</property> - </emphasis> components define your own style classes in the corresponding <emphasis + </emphasis> components, define your own style classes in the corresponding <emphasis role="bold"> <property>&lt;rich:calendar&gt;</property> </emphasis>attributes.</para> Deleted: branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.desc.xml 2007-12-11 23:30:42 UTC (rev 4755) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.desc.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -1,48 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> -<keyword>suggestionBox</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>The component adds on-keypress suggestions capabilities to any input text component - (like <emphasis role="bold"><property>&lt;h:inputText&gt;</property></emphasis>). When a key - is pressed in the field Ajax request is sent to the server. When the suggestion action returns a - list of possible values, it pop ups them inside the - <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> element bellow the input.</para> - <figure> - <title>SuggestionBox component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox1.gif"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem>Fully skinnable component</listitem> - <listitem>Adds <emphasis><property>&quot;onkeypress&quot;</property></emphasis> suggestions capabilities to any input text component</listitem> - <listitem>Performs suggestion via Ajax requests without any line of JavaScript code written - by you</listitem> - <listitem>Possible to render table as a popup suggestion</listitem> - <listitem>Can be pointed to any Ajax request status indicator of the page</listitem> - <listitem>Easily customizable size of suggestion popup</listitem> - <listitem>Setting rules that appear between cells within a table of popup values</listitem> - <listitem><emphasis - -><property>&quot;Event queue&quot;</property></emphasis> and <emphasis - -><property>&quot;request delay&quot;</property></emphasis> attributes present to divide - frequently requests</listitem> - <listitem>Managing area of components submitted on Ajax request</listitem> - <listitem>Flexible list of components to update after Ajax request managed by attributes</listitem> - <listitem>Setting restriction to Ajax request generation</listitem> - <listitem>Easily setting action to collect suggestion data</listitem> - <listitem>Keyboard navigation support</listitem> - </itemizedlist> - </section> -</section> \ No newline at end of file Deleted: branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.xml 2007-12-11 23:30:42 UTC (rev 4755) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionBox.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -1,522 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>on-keypress suggestion</keyword> - <keyword>rich:suggestionBox</keyword> - <keyword>HtmlSuggestionBox</keyword> - </keywordset> - </sectioninfo> - - <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.SuggestionBox</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlSuggestionBox</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.SuggestionBox</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.SuggestionBoxRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.SuggestionBoxTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page: </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <h:inputText value="#{bean.property}" id="suggest"/> - <rich:suggestionbox for="suggest" suggestionAction="#{bean.autocomplete}" - var="suggest"> - <h:column> - <h:outputText value="#{suggest.text}"/> - </h:column> - </rich:suggestionbox> -... -]]></programlisting> - <para>Here is the <emphasis> - <property>bean.autocomplete</property> - </emphasis> method that returns the collection to pop up:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[public List autocomplete(Object event) { - String pref = event.toString(); - //collecting some data that begins with "pref" letters. - ... - return result; - } -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlSuggestionBox; -... -HtmlSuggestionBox myList = new HtmlSuggestionBox(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>As it is shown in the example above, the main component attribute are:</para> - <itemizedlist> - <listitem> - <emphasis> - <property>&quot;for&quot;</property> - </emphasis> - <para>The attribute where there is an input component which activation causes a - suggestion activation</para> - </listitem> - <listitem> - <emphasis> - <property>&quot;suggestionAction&quot;</property> - </emphasis> - <para> is an accepting parameter of a SuggestionEvent type that returns as a result - a collection for rendering in a tool tip window.</para> - </listitem> - <listitem> - <emphasis> - <property>&quot;var&quot;</property> - </emphasis> - <para> a collection name that provides access for inputting into a table in a - popup</para> - </listitem> - </itemizedlist> - <para>There are also two size attributes (<emphasis> - <property>&quot;width&quot;</property> - </emphasis> and <emphasis> - <property>&quot;height&quot;</property> - </emphasis>) that are obligatory for the suggestion component. The attributes have - initial Defaults but should be specified manually in order to be changed.</para> - <para>The <property>suggestionBox</property> component, as it is shown on the screenshot, - could get any collection for an output and outputs it in a tooltip window the same as a - custom dataTable (in several columns)</para> - <programlisting role="XML"><![CDATA[... - <rich:suggestionbox for="test" - suggestionAction="#{bean.autocomplete}" var="cit" fetchValue="#{cit.text}"> - <h:column> - <h:outputText value="#{cit.label}"/> - </h:column> - <h:column> - <h:outputText value="#{cit.text}"/> - </h:column> - </rich:suggestionbox> -... -]]></programlisting> - <para>It looks on a page in the following way:</para> - <figure> - <title>SuggestionBox with tooltip window</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox2.gif"/> - </imageobject> - </mediaobject> - </figure> - <para>When some string is chosen input receives the corresponding value from the second - column containing <property>#{cit.text}</property></para> - <para>There is also one more important attribute named <emphasis> - <property>&quot;tokens&quot;</property> - </emphasis> that specifies separators after which a set of some characters sequence is - defined as a new prefix beginning from this separator and not from the string beginning.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <rich:suggestiobox for="test" suggestionAction="#{bean.autocomplete}" var="cit" - selfRendered="true" tokens=","> - <h:column> - <h:outputText value="#{cit.text}"/> - </h:column> - </rich:suggestionbox> -... -]]></programlisting> - <para>This example shows that when a city is chosen and a comma and first letter character - are input, Ajax request is called again, but it submits a value starting from the last - token:</para> - <figure> - <title>SuggestionBox with chosen word</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox3.gif"/> - </imageobject> - </mediaobject> - </figure> - <para>For a multiple definition use either &quot;,.; &quot; syntax as a value for - tokens or link a parameter to some bean property transmitting separators collection.</para> - <para>The component also encompasses <emphasis> - <property>&quot;layout&quot;</property> - </emphasis> and <emphasis> - <property>&quot;style&quot;</property> - </emphasis> attributes corresponding to dataTable ones for a table appearing in popup - (for additional information, read JSF Reference) and custom attribute managing AJAX - requests sending (for additional information, see <ulink - url="http://www.jboss.org/projects/jbossajax4jsf">Ajax4JSF Project</ulink>).</para> - <para>In addition to these attributes common for Ajax action components and limiting - requests quantity and frequency, <property>suggestionBox</property> has one more its own - attribute limiting requests (the <emphasis> - <property>&quot;minChars&quot;</property> - </emphasis> attribute). The attribute defines characters quantity inputted into a field - after which Ajax requests are called to perform suggestion.</para> - - </section> - - <section> - <para> -There is possibility to define what be shown if the autocomplete returns empty list. -Attribute<emphasis><property> &quot;nothingLabel&quot; </property></emphasis>or facet with the same name could be used for it. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <rich:suggestiobox nothingLabel="Empty" for="test" suggestionAction="#{bean.autocomplete}" var="cit"> - <h:column> - <h:outputText value="#{cit.text}"/> - </h:column> - </rich:suggestionbox> -... -]]></programlisting> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:suggestiobox for="test" suggestionAction="#{bean.autocomplete}" var="cit"> - <facet name="nothingLabel"> - <h:outputText value="Empty"/> - </facet> - <h:column> - <h:outputText value="#{cit.text}"/> - </h:column> -</rich:suggestionbox> -... -]]></programlisting> - - - <para>It looks on a page in the following way:</para> - - <figure> - <title>SuggestionBox with empty list</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox5.gif"/> - </imageobject> - </mediaobject> - </figure> -</section> - - <section> - <title>Look-and-Feel Customization</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>&lt;rich:suggestionBox&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:suggestionBox&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title> Skin Parameters Redefinition</title> - - <table> - <title>General skin parameters redefinition for popup list</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Parameters for popup list</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for shadow element of the list</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Parameters for shadow element of the list</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>shadowBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>shadowBackgroundColor</entry> - - <entry>border-color</entry> - </row> - - <row> - <entry>shadowOpacity</entry> - - <entry>opacity</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for popup table rows</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Parameters for popup table rows</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>generalSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>generalTextColor</entry> - - <entry>color</entry> - </row> - - <row> - <entry>generalFamilyFont</entry> - - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for selected row</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Parameters for selected row</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>headerBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>generalSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>generalFamilyFont</entry> - - <entry>font-family</entry> - </row> - <row> - <entry>headerTextColor</entry> - - <entry>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/suggestionbox4.gif"/> - </imageobject> - </mediaobject> - </figure> - - <para>On the screenshot, there are classes names defining specified elements.</para> - - <table> - <title>Classes names that define a suggestionBox</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-sb-common-container</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element of a suggestion container</entry> - </row> - - <row> - <entry>rich-sb-ext-decor-1</entry> - - <entry>Defines styles for the first wrapper &lt;div&gt; element of a suggestion box exterior</entry> - </row> - - <row> - <entry>rich-sb-ext-decor-2</entry> - - <entry>Defines styles for the second wrapper &lt;div&gt; element of a suggestion box exterior</entry> - </row> - - <row> - <entry>rich-sb-ext-decor-3</entry> - - <entry>Defines styles for the third wrapper &lt;div&gt; element of a suggestion box exterior</entry> - </row> - - <row> - <entry>rich-sb-overflow</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element</entry> - </row> - - <row> - <entry>rich-sb-int-decor-table</entry> - - <entry>Defines styles for a suggestion box table</entry> - </row> - - <row> - <entry>rich-sb-int</entry> - - <entry>Defines the styles for a suggestion box table rows (tr)</entry> - </row> - - <row> - <entry>rich-sb-cell-padding</entry> - - <entry>Defines the styles for suggestion box table cells (td)</entry> - </row> - - <row> - <entry>rich-sb-int-sel</entry> - - <entry>Defines styles for a selected row</entry> - </row> - - <row> - <entry>rich-sb-shadow</entry> - - <entry>Defines styles for a suggestion boxshadow</entry> - </row> - - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:suggestionBox&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names and define necessary properties in them.</para> - - <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:suggestionBox&gt;</property> - </emphasis> components, define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:suggestionBox&gt;</property> - </emphasis>attributes.</para> - </section> - - - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/suggestionB... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:suggestionBox&gt;</property></emphasis> usage and sources for the given - example. </para> - </section> - -</section> Added: branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionbox.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionbox.desc.xml (rev 0) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionbox.desc.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -0,0 +1,48 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> +<sectioninfo> +<keywordset> +<keyword>suggestionBox</keyword> +</keywordset> +</sectioninfo> +<section> +<title>Description</title> + <para>The component adds on-keypress suggestions capabilities to any input text component + (like <emphasis role="bold"><property>&lt;h:inputText&gt;</property></emphasis>). When a key + is pressed in the field Ajax request is sent to the server. When the suggestion action returns a + list of possible values, it pop ups them inside the + <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> element bellow the input.</para> + <figure> + <title>SuggestionBox component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox1.gif"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem>Fully skinnable component</listitem> + <listitem>Adds <emphasis><property>&quot;onkeypress&quot;</property></emphasis> suggestions capabilities to any input text component</listitem> + <listitem>Performs suggestion via Ajax requests without any line of JavaScript code written + by you</listitem> + <listitem>Possible to render table as a popup suggestion</listitem> + <listitem>Can be pointed to any Ajax request status indicator of the page</listitem> + <listitem>Easily customizable size of suggestion popup</listitem> + <listitem>Setting rules that appear between cells within a table of popup values</listitem> + <listitem><emphasis + +><property>&quot;Event queue&quot;</property></emphasis> and <emphasis + +><property>&quot;request delay&quot;</property></emphasis> attributes present to divide + frequently requests</listitem> + <listitem>Managing area of components submitted on Ajax request</listitem> + <listitem>Flexible list of components to update after Ajax request managed by attributes</listitem> + <listitem>Setting restriction to Ajax request generation</listitem> + <listitem>Easily setting action to collect suggestion data</listitem> + <listitem>Keyboard navigation support</listitem> + </itemizedlist> + </section> +</section> \ No newline at end of file Property changes on: branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionbox.desc.xml ___________________________________________________________________ Name: svn:mime-type + text/plain Added: branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionbox.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionbox.xml (rev 0) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionbox.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -0,0 +1,522 @@ +<?xml version='1.0' encoding='UTF-8'?> +<section> + <sectioninfo> + <keywordset> + <keyword>on-keypress suggestion</keyword> + <keyword>rich:suggestionBox</keyword> + <keyword>HtmlSuggestionBox</keyword> + </keywordset> + </sectioninfo> + + <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.SuggestionBox</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlSuggestionBox</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.SuggestionBox</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.SuggestionBoxRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.SuggestionBoxTag</entry> + </row> + </tbody> + </tgroup> + </table> + + <section> + <title>Creating the Component with a Page Tag</title> + <para>Here is a simple example as it could be used on a page: </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <h:inputText value="#{bean.property}" id="suggest"/> + <rich:suggestionbox for="suggest" suggestionAction="#{bean.autocomplete}" + var="suggest"> + <h:column> + <h:outputText value="#{suggest.text}"/> + </h:column> + </rich:suggestionbox> +... +]]></programlisting> + <para>Here is the <emphasis> + <property>bean.autocomplete</property> + </emphasis> method that returns the collection to pop up:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[public List autocomplete(Object event) { + String pref = event.toString(); + //collecting some data that begins with "pref" letters. + ... + return result; + } +]]></programlisting> + </section> + <section> + <title>Creating the Component Dynamically Using Java</title> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlSuggestionBox; +... +HtmlSuggestionBox myList = new HtmlSuggestionBox(); +... +]]></programlisting> + </section> + <section> + <title>Details of Usage</title> + <para>As it is shown in the example above, the main component attribute are:</para> + <itemizedlist> + <listitem> + <emphasis> + <property>&quot;for&quot;</property> + </emphasis> + <para>The attribute where there is an input component which activation causes a + suggestion activation</para> + </listitem> + <listitem> + <emphasis> + <property>&quot;suggestionAction&quot;</property> + </emphasis> + <para> is an accepting parameter of a SuggestionEvent type that returns as a result + a collection for rendering in a tool tip window.</para> + </listitem> + <listitem> + <emphasis> + <property>&quot;var&quot;</property> + </emphasis> + <para> a collection name that provides access for inputting into a table in a + popup</para> + </listitem> + </itemizedlist> + <para>There are also two size attributes (<emphasis> + <property>&quot;width&quot;</property> + </emphasis> and <emphasis> + <property>&quot;height&quot;</property> + </emphasis>) that are obligatory for the suggestion component. The attributes have + initial Defaults but should be specified manually in order to be changed.</para> + <para>The <property>suggestionBox</property> component, as it is shown on the screenshot, + could get any collection for an output and outputs it in a tooltip window the same as a + custom dataTable (in several columns)</para> + <programlisting role="XML"><![CDATA[... + <rich:suggestionbox for="test" + suggestionAction="#{bean.autocomplete}" var="cit" fetchValue="#{cit.text}"> + <h:column> + <h:outputText value="#{cit.label}"/> + </h:column> + <h:column> + <h:outputText value="#{cit.text}"/> + </h:column> + </rich:suggestionbox> +... +]]></programlisting> + <para>It looks on a page in the following way:</para> + <figure> + <title>SuggestionBox with tooltip window</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox2.gif"/> + </imageobject> + </mediaobject> + </figure> + <para>When some string is chosen input receives the corresponding value from the second + column containing <property>#{cit.text}</property></para> + <para>There is also one more important attribute named <emphasis> + <property>&quot;tokens&quot;</property> + </emphasis> that specifies separators after which a set of some characters sequence is + defined as a new prefix beginning from this separator and not from the string beginning.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <rich:suggestiobox for="test" suggestionAction="#{bean.autocomplete}" var="cit" + selfRendered="true" tokens=","> + <h:column> + <h:outputText value="#{cit.text}"/> + </h:column> + </rich:suggestionbox> +... +]]></programlisting> + <para>This example shows that when a city is chosen and a comma and first letter character + are input, Ajax request is called again, but it submits a value starting from the last + token:</para> + <figure> + <title>SuggestionBox with chosen word</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox3.gif"/> + </imageobject> + </mediaobject> + </figure> + <para>For a multiple definition use either &quot;,.; &quot; syntax as a value for + tokens or link a parameter to some bean property transmitting separators collection.</para> + <para>The component also encompasses <emphasis> + <property>&quot;layout&quot;</property> + </emphasis> and <emphasis> + <property>&quot;style&quot;</property> + </emphasis> attributes corresponding to dataTable ones for a table appearing in popup + (for additional information, read JSF Reference) and custom attribute managing AJAX + requests sending (for additional information, see <ulink + url="http://www.jboss.org/projects/jbossajax4jsf">Ajax4JSF Project</ulink>).</para> + <para>In addition to these attributes common for Ajax action components and limiting + requests quantity and frequency, <property>suggestionBox</property> has one more its own + attribute limiting requests (the <emphasis> + <property>&quot;minChars&quot;</property> + </emphasis> attribute). The attribute defines characters quantity inputted into a field + after which Ajax requests are called to perform suggestion.</para> + + </section> + + <section> + <para> +There is possibility to define what be shown if the autocomplete returns empty list. +Attribute<emphasis><property> &quot;nothingLabel&quot; </property></emphasis>or facet with the same name could be used for it. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <rich:suggestiobox nothingLabel="Empty" for="test" suggestionAction="#{bean.autocomplete}" var="cit"> + <h:column> + <h:outputText value="#{cit.text}"/> + </h:column> + </rich:suggestionbox> +... +]]></programlisting> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:suggestiobox for="test" suggestionAction="#{bean.autocomplete}" var="cit"> + <facet name="nothingLabel"> + <h:outputText value="Empty"/> + </facet> + <h:column> + <h:outputText value="#{cit.text}"/> + </h:column> +</rich:suggestionbox> +... +]]></programlisting> + + + <para>It looks on a page in the following way:</para> + + <figure> + <title>SuggestionBox with empty list</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox5.gif"/> + </imageobject> + </mediaobject> + </figure> +</section> + + <section> + <title>Look-and-Feel Customization</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>&lt;rich:suggestionBox&gt;</property> + </emphasis> components at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> + + <section> + <title> Skin Parameters Redefinition</title> + + <table> + <title>General skin parameters redefinition for popup list</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Parameters for popup list</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>additionalBackgroundColor</entry> + + <entry>background-color</entry> + </row> + + <row> + <entry>panelBorderColor</entry> + + <entry>border-color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for shadow element of the list</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Parameters for shadow element of the list</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>shadowBackgroundColor</entry> + + <entry>background-color</entry> + </row> + + <row> + <entry>shadowBackgroundColor</entry> + + <entry>border-color</entry> + </row> + + <row> + <entry>shadowOpacity</entry> + + <entry>opacity</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for popup table rows</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Parameters for popup table rows</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>generalSizeFont</entry> + + <entry>font-size</entry> + </row> + + <row> + <entry>generalTextColor</entry> + + <entry>color</entry> + </row> + + <row> + <entry>generalFamilyFont</entry> + + <entry>font-family</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for selected row</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Parameters for selected row</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>headerBackgroundColor</entry> + + <entry>background-color</entry> + </row> + + <row> + <entry>generalSizeFont</entry> + + <entry>font-size</entry> + </row> + + <row> + <entry>generalFamilyFont</entry> + + <entry>font-family</entry> + </row> + <row> + <entry>headerTextColor</entry> + + <entry>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/suggestionbox4.gif"/> + </imageobject> + </mediaobject> + </figure> + + <para>On the screenshot, there are classes names defining specified elements.</para> + + <table> + <title>Classes names that define a suggestionBox</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-sb-common-container</entry> + + <entry>Defines styles for a wrapper &lt;div&gt; element of a suggestion container</entry> + </row> + + <row> + <entry>rich-sb-ext-decor-1</entry> + + <entry>Defines styles for the first wrapper &lt;div&gt; element of a suggestion box exterior</entry> + </row> + + <row> + <entry>rich-sb-ext-decor-2</entry> + + <entry>Defines styles for the second wrapper &lt;div&gt; element of a suggestion box exterior</entry> + </row> + + <row> + <entry>rich-sb-ext-decor-3</entry> + + <entry>Defines styles for the third wrapper &lt;div&gt; element of a suggestion box exterior</entry> + </row> + + <row> + <entry>rich-sb-overflow</entry> + + <entry>Defines styles for a wrapper &lt;div&gt; element</entry> + </row> + + <row> + <entry>rich-sb-int-decor-table</entry> + + <entry>Defines styles for a suggestion box table</entry> + </row> + + <row> + <entry>rich-sb-int</entry> + + <entry>Defines the styles for a suggestion box table rows (tr)</entry> + </row> + + <row> + <entry>rich-sb-cell-padding</entry> + + <entry>Defines the styles for suggestion box table cells (td)</entry> + </row> + + <row> + <entry>rich-sb-int-sel</entry> + + <entry>Defines styles for a selected row</entry> + </row> + + <row> + <entry>rich-sb-shadow</entry> + + <entry>Defines styles for a suggestion boxshadow</entry> + </row> + + </tbody> + </tgroup> + </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names and define necessary properties in them.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:suggestionBox&gt;</property> + </emphasis>attributes.</para> + </section> + + + + <section> + <title>Relevant Resources Links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/suggestionB... + >Here</ulink> you can see the example of <emphasis role="bold" + ><property>&lt;rich:suggestionBox&gt;</property></emphasis> usage and sources for the given + example. </para> + </section> + +</section> Property changes on: branches/3.1.x/docs/userguide/en/src/main/docbook/included/suggestionbox.xml ___________________________________________________________________ Name: svn:mime-type + text/plain Added: branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolTip.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolTip.desc.xml (rev 0) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolTip.desc.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -0,0 +1,29 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> +<sectioninfo> +<keywordset> +<keyword>tooltip</keyword> +</keywordset> +</sectioninfo> +<section> +<title>Description</title> + <para>The component used for creation non-modal popup that activated on some event and display some information. + </para> + <figure> + <title>Tooltip component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tooltip1.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem>Highly customizable look and feel </listitem> + <listitem>Different ways of data loading to tooltip</listitem> + <listitem>Disablement support</listitem> + </itemizedlist> +</section> +</section> \ No newline at end of file Property changes on: branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolTip.desc.xml ___________________________________________________________________ Name: svn:mime-type + text/plain Added: branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolTip.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolTip.xml (rev 0) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolTip.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -0,0 +1,368 @@ +<?xml version='1.0' encoding='UTF-8'?> +<section> +<sectioninfo> +<keywordset> +<keyword>tooltip</keyword> +<keyword>rich:tooltip</keyword> +<keyword>HtmlTooltip</keyword> +</keywordset> +</sectioninfo> + <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.component.ToolTip</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlToolTip</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.component.ToolTip</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.renderkit.html.ToolTipRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.HtmlToolTipTag</entry> + </row> + </tbody> + </tgroup> + </table> + + <section> + <title>Creating the Component with a Page Tag</title> + <para>To create the simplest variant of <property>tooltip</property> on a page, use the following syntax:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<h:commandButton value="Button"> + <rich:tooltip value="Tooltip content"/> +</h:commandButton> +... +]]></programlisting> + </section> + + <section> + <title>Creating the Component Dynamically Using Java</title> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlToolTip; +... +HtmlToolTip myToolTip = new HtmlToolTip(); +... +]]></programlisting> +</section> + +<section> +<title>Details of Usage</title> +<para> +<property>Tooltip</property> main area is a simple rectangle area with any information inside. The content may be defined via +&quot;value&quot; attribute as text or via any nested content. When both are defined, the value is displayed as text and nested content +after the text. <property>Tooltip</property> stretches if the content more than the <property>tooltip</property> sizes. +</para> +<para> +There is possibility to define a facet with the name &quot;defaultContent&quot;. This facet provides the default content to +display while the main content is loaded to a page in an Ajax mode. Thus when <property>tooltip</property> called in an Ajax mode, it +appears with the content defined in the facet and when loading is completed, the content is changed to a loaded one. +</para> +<para> + Here is an example: +</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<h:commandLink value="Simple Link"> + <rich:toolTip followMouse="true" direction="top-right" mode="ajax" value="#{bean.toolTipContent}" horizontalOffset="5" + verticalOffset="5" layout="block"> + <f:facet name="defaultContent"> + <f:verbatim>DEFAULT TOOLTIP CONTENT</f:verbatim> + </f:facet> + </rich:toolTip> +</h:commandLink> +... +]]></programlisting> + +<para> +This is the result: +</para> + <figure> + <title>Tooltip component with default content</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tooltip2.png"/> + </imageobject> + </mediaobject> + </figure> +<para> +And after <property>tooltip</property> loaded it will be changed to next one: +</para> + <figure> + <title>Tooltip component with loaded content</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tooltip3.png"/> + </imageobject> + </mediaobject> + </figure> +<para> +By default, <property>tooltip</property> appears smart positioned. But as you can see from the previous example, you +can define an appearance direction via the corresponding attribute &quot;direction&quot;. And also it's possible to define vertical and horizontal +offsets relatively to a mouse position. +</para> +<para> +<property>Tooltip</property> appears attached to the corner dependent on the <emphasis><property>&quot;direction&quot;</property></emphasis> attribute. By default it is positioned bottom-right. +<property>Tooltip</property> activation occurs after a defined event (default=mouseover) on the parent component takes into consideration +the &quot;delay&quot; attribute (default=0) or after calling JS API function doShow(). <property>Tooltip</property> deactivation occurs after mouseout event on the parent component (excepting the situation when the mouse is hovered onto the <property>tooltip</property> itself) or after calling JS API function doHide(). +</para> + +<note> +<title>Note:</title> +It is recommended to define parent component "id" for correction of <property>tooltip</property> work. +</note> + + <para>The attribute <emphasis><property>&quot;for&quot;</property></emphasis> is used for defining the <emphasis><property>&quot;id&quot;</property></emphasis> of an element a tooltip should be attached to. Look at the example: +</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<div id="elementId"> + <rich:toolTip for="elementId">Using a toolTip<rich:toolTip> + <p>The first simple example<p> +</div> +... +<div id="elementId"> + <p>The second simple example<p> +</div> +<rich:toolTip for="elementId">Using a toolTip<rich:toolTip> +... +]]></programlisting> + + <para>Here, the attribute <emphasis><property>&quot;for&quot;</property></emphasis> of a <emphasis role="bold"> + <property>&lt;rich:tooltip&gt;</property> + </emphasis> component is required. Whithout it an example doesn’t work because HTML elements aren't presented in component tree built by facelets. + </para> + +<para> +The <emphasis><property>&quot;mode&quot;</property></emphasis> attribute is provided you to control the way of data loading to <property>tooltip</property>. It has following values: + <itemizedlist> + <listitem>Client</listitem> + <listitem>Ajax</listitem> + </itemizedlist> +</para> +<para> +In a client mode, <property>tooltip</property> content is rendered once on the server and could be reRendered only via external submit. +In an Ajax mode, <property>tooltip</property> content is requested from server every activation. +</para> +<para> +Special JS API is provided to control the component behaviour: + <itemizedlist> + <listitem> - </listitem> + <listitem> - </listitem> + <listitem> - </listitem> + <listitem> - </listitem> + </itemizedlist> +</para> +<para> +Disabled <property>tooltip</property> is rendered to a page as usual but JS that responds for its activation is +disabled until doEnable() is called. +</para> +<para> +Moreover, to add some JavaScript effects, client events defined on it are used: +</para> +<para> + Standart: + <itemizedlist> + <listitem>onclick</listitem> + <listitem>ondblclick</listitem> + <listitem>onmouseout</listitem> + <listitem>onmousemove</listitem> + <listitem>onmouseover</listitem> + </itemizedlist> +</para> +<para> + Special: + <itemizedlist> + <listitem>onshow - Called after the tooltip is called (some element hovered) but before its request + </listitem> + <listitem>oncomplete - Called just after the tooltip is shown + </listitem> + <listitem>onhide - Called after the tooltip is hidden + </listitem> + </itemizedlist> +</para> +</section> + + <section> + <title>JavaScript API</title> + <table> + <title>JavaScript API</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>doShow()</entry> + + <entry>Shows the corresponding tooltip</entry> + </row> + + <row> + <entry>doHide()</entry> + + <entry>Hides the corresponding tooltip</entry> + </row> + + <row> + <entry>doEnable()</entry> + + <entry>Enables the corresponding tooltip</entry> + </row> + + <row> + <entry>doDisable()</entry> + + <entry>Disables the corresponding tooltip</entry> + </row> + + </tbody> + </tgroup> + </table> + + </section> + + <section> + <title>Look-and-Feel Customization</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>&lt;rich:tooltip&gt;</property> + </emphasis> components at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to your style sheets <emphasis> + <property>style classes</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:tooltip&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + + </section> + <section> + <title>Skin Parameters Redefinition</title> + <table> + <title>Skin parameters redefinition for a component</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>tipBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>tipBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>generalFontColor</entry> + <entry>color</entry> + </row> + </tbody> + </tgroup> + </table> + +</section> + + + <section> + <title>Definition of Custom Style Classes</title> + <table> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tool-tip</entry> + <entry>Defines styles for a wrapper &lt;span&gt; or &lt;div&gt; element of a tooltip</entry> + </row> + </tbody> + </tgroup> + </table> + + <para> + It depends on <emphasis role="bold"><property>&lt;rich:tooltip&gt;</property></emphasis> layout what a wrapper element <emphasis><property>&lt;span&gt;</property></emphasis> or <emphasis><property>&lt;div&gt;</property></emphasis>to choose. + </para> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:tooltip&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create class with the + same name and define necessary properties in it.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:tooltip&gt;</property> + </emphasis> components define your own style class in the corresponding <emphasis + role="bold"> + <property>&lt;rich:tooltip&gt;</property> + </emphasis>attributes</para> +</section> + <section> + <title>Relevant Resources Links</title> + <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/toolTip.jsf... + >Here</ulink> you can see the example of <emphasis role="bold" + ><property>&lt;rich:toolTip&gt;</property></emphasis> usage and sources for the given example. </para> + </section> +</section> + \ No newline at end of file Property changes on: branches/3.1.x/docs/userguide/en/src/main/docbook/included/toolTip.xml ___________________________________________________________________ Name: svn:mime-type + text/plain Deleted: branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.desc.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.desc.xml 2007-12-11 23:30:42 UTC (rev 4755) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.desc.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -1,29 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> -<keyword>tooltip</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>The component used for creation non-modal popup that activated on some event and display some information. - </para> - <figure> - <title>Tooltip component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tooltip1.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem>Highly customizable look and feel </listitem> - <listitem>Different ways of data loading to tooltip</listitem> - <listitem>Disablement support</listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.xml =================================================================== --- branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.xml 2007-12-11 23:30:42 UTC (rev 4755) +++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/tooltip.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -1,368 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> -<sectioninfo> -<keywordset> -<keyword>tooltip</keyword> -<keyword>rich:tooltip</keyword> -<keyword>HtmlTooltip</keyword> -</keywordset> -</sectioninfo> - <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.component.ToolTip</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlToolTip</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.component.ToolTip</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.renderkit.html.ToolTipRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.HtmlToolTipTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <property>tooltip</property> on a page, use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:commandButton value="Button"> - <rich:tooltip value="Tooltip content"/> -</h:commandButton> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlToolTip; -... -HtmlToolTip myToolTip = new HtmlToolTip(); -... -]]></programlisting> -</section> - -<section> -<title>Details of Usage</title> -<para> -<property>Tooltip</property> main area is a simple rectangle area with any information inside. The content may be defined via -&quot;value&quot; attribute as text or via any nested content. When both are defined, the value is displayed as text and nested content -after the text. <property>Tooltip</property> stretches if the content more than the <property>tooltip</property> sizes. -</para> -<para> -There is possibility to define a facet with the name &quot;defaultContent&quot;. This facet provides the default content to -display while the main content is loaded to a page in an Ajax mode. Thus when <property>tooltip</property> called in an Ajax mode, it -appears with the content defined in the facet and when loading is completed, the content is changed to a loaded one. -</para> -<para> - Here is an example: -</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:commandLink value="Simple Link"> - <rich:toolTip followMouse="true" direction="top-right" mode="ajax" value="#{bean.toolTipContent}" horizontalOffset="5" - verticalOffset="5" layout="block"> - <f:facet name="defaultContent"> - <f:verbatim>DEFAULT TOOLTIP CONTENT</f:verbatim> - </f:facet> - </rich:toolTip> -</h:commandLink> -... -]]></programlisting> - -<para> -This is the result: -</para> - <figure> - <title>Tooltip component with default content</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tooltip2.png"/> - </imageobject> - </mediaobject> - </figure> -<para> -And after <property>tooltip</property> loaded it will be changed to next one: -</para> - <figure> - <title>Tooltip component with loaded content</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tooltip3.png"/> - </imageobject> - </mediaobject> - </figure> -<para> -By default, <property>tooltip</property> appears smart positioned. But as you can see from the previous example, you -can define an appearance direction via the corresponding attribute &quot;direction&quot;. And also it's possible to define vertical and horizontal -offsets relatively to a mouse position. -</para> -<para> -<property>Tooltip</property> appears attached to the corner dependent on the <emphasis><property>&quot;direction&quot;</property></emphasis> attribute. By default it is positioned bottom-right. -<property>Tooltip</property> activation occurs after a defined event (default=mouseover) on the parent component takes into consideration -the &quot;delay&quot; attribute (default=0) or after calling JS API function doShow(). <property>Tooltip</property> deactivation occurs after mouseout event on the parent component (excepting the situation when the mouse is hovered onto the <property>tooltip</property> itself) or after calling JS API function doHide(). -</para> - -<note> -<title>Note:</title> -It is recommended to define parent component "id" for correction of <property>tooltip</property> work. -</note> - - <para>The attribute <emphasis><property>&quot;for&quot;</property></emphasis> is used for defining the <emphasis><property>&quot;id&quot;</property></emphasis> of an element a tooltip should be attached to. Look at the example: -</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<div id="elementId"> - <rich:toolTip for="elementId">Using a toolTip<rich:toolTip> - <p>The first simple example<p> -</div> -... -<div id="elementId"> - <p>The second simple example<p> -</div> -<rich:toolTip for="elementId">Using a toolTip<rich:toolTip> -... -]]></programlisting> - - <para>Here, the attribute <emphasis><property>&quot;for&quot;</property></emphasis> of a <emphasis role="bold"> - <property>&lt;rich:tooltip&gt;</property> - </emphasis> component is required. Whithout it an example doesn’t work because HTML elements aren't presented in component tree built by facelets. - </para> - -<para> -The <emphasis><property>&quot;mode&quot;</property></emphasis> attribute is provided you to control the way of data loading to <property>tooltip</property>. It has following values: - <itemizedlist> - <listitem>Client</listitem> - <listitem>Ajax</listitem> - </itemizedlist> -</para> -<para> -In a client mode, <property>tooltip</property> content is rendered once on the server and could be reRendered only via external submit. -In an Ajax mode, <property>tooltip</property> content is requested from server every activation. -</para> -<para> -Special JS API is provided to control the component behaviour: - <itemizedlist> - <listitem> - </listitem> - <listitem> - </listitem> - <listitem> - </listitem> - <listitem> - </listitem> - </itemizedlist> -</para> -<para> -Disabled <property>tooltip</property> is rendered to a page as usual but JS that responds for its activation is -disabled until doEnable() is called. -</para> -<para> -Moreover, to add some JavaScript effects, client events defined on it are used: -</para> -<para> - Standart: - <itemizedlist> - <listitem>onclick</listitem> - <listitem>ondblclick</listitem> - <listitem>onmouseout</listitem> - <listitem>onmousemove</listitem> - <listitem>onmouseover</listitem> - </itemizedlist> -</para> -<para> - Special: - <itemizedlist> - <listitem>onshow - Called after the tooltip is called (some element hovered) but before its request - </listitem> - <listitem>oncomplete - Called just after the tooltip is shown - </listitem> - <listitem>onhide - Called after the tooltip is hidden - </listitem> - </itemizedlist> -</para> -</section> - - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>doShow()</entry> - - <entry>Shows the corresponding tooltip</entry> - </row> - - <row> - <entry>doHide()</entry> - - <entry>Hides the corresponding tooltip</entry> - </row> - - <row> - <entry>doEnable()</entry> - - <entry>Enables the corresponding tooltip</entry> - </row> - - <row> - <entry>doDisable()</entry> - - <entry>Disables the corresponding tooltip</entry> - </row> - - </tbody> - </tgroup> - </table> - - </section> - - <section> - <title>Look-and-Feel Customization</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>&lt;rich:tooltip&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:tooltip&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - - </section> - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a component</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tipBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tipBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalFontColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - -</section> - - - <section> - <title>Definition of Custom Style Classes</title> - <table> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-tool-tip</entry> - <entry>Defines styles for a wrapper &lt;span&gt; or &lt;div&gt; element of a tooltip</entry> - </row> - </tbody> - </tgroup> - </table> - - <para> - It depends on <emphasis role="bold"><property>&lt;rich:tooltip&gt;</property></emphasis> layout what a wrapper element <emphasis><property>&lt;span&gt;</property></emphasis> or <emphasis><property>&lt;div&gt;</property></emphasis>to choose. - </para> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:tooltip&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create class with the - same name and define necessary properties in it.</para> - - <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:tooltip&gt;</property> - </emphasis> components define your own style class in the corresponding <emphasis - role="bold"> - <property>&lt;rich:tooltip&gt;</property> - </emphasis>attributes</para> -</section> - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/toolTip.jsf... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:toolTip&gt;</property></emphasis> usage and sources for the given example. </para> - </section> -</section> - \ No newline at end of file Modified: branches/3.1.x/docs/xslt/en/src/main/xslt/f.xsl =================================================================== --- branches/3.1.x/docs/xslt/en/src/main/xslt/f.xsl 2007-12-11 23:30:42 UTC (rev 4755) +++ branches/3.1.x/docs/xslt/en/src/main/xslt/f.xsl 2007-12-12 00:45:15 UTC (rev 4756) @@ -13,7 +13,11 @@ <xsl:variable name="excluded-tag-names"> header2,header3,header4,header5,header6 </xsl:variable> - + <xsl:comment> + XSLT Version = <xsl:copy-of select="system-property('xsl:version')"/> + XSLT Vendor = <xsl:copy-of select="system-property('xsl:vendor')"/> + XSLT Vendor URL = <xsl:copy-of select="system-property('xsl:vendor-url')"/> + </xsl:comment> <xsl:for-each select="javaee:tag | tag"> <!--xsl:value-of select="./name/text()" /--> Modified: branches/3.1.x/ui/assembly/pom.xml =================================================================== --- branches/3.1.x/ui/assembly/pom.xml 2007-12-11 23:30:42 UTC (rev 4755) +++ branches/3.1.x/ui/assembly/pom.xml 2007-12-12 00:45:15 UTC (rev 4756) @@ -149,6 +149,34 @@ ${project.build.directory}/docs/userguide/en </outputDirectory> </artifactItem> + <artifactItem> + <groupId> + org.richfaces.docs.userguide + </groupId> + <artifactId>en</artifactId> + <version> + ${project.version} + </version> + <type>war</type> + <classifier>pdf</classifier> + <outputDirectory> + ${project.build.directory}/docs/userguide/en + </outputDirectory> + </artifactItem> + <artifactItem> + <groupId> + org.richfaces.docs.faq + </groupId> + <artifactId>en</artifactId> + <version> + ${project.version} + </version> + <type>war</type> + <classifier>pdf</classifier> + <outputDirectory> + ${project.build.directory}/docs/faq/en + </outputDirectory> + </artifactItem> </artifactItems> <outputDirectory> ${project.build.directory}/docs