[richfaces-svn-commits] JBoss Rich Faces SVN: r2222 - in trunk/docs/userguide/en/src/main: resources/images and 1 other directory.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Mon Aug 13 10:06:44 EDT 2007
Author: vkukharchuk
Date: 2007-08-13 10:06:43 -0400 (Mon, 13 Aug 2007)
New Revision: 2222
Added:
trunk/docs/userguide/en/src/main/docbook/included/tooltip.desc.xml
trunk/docs/userguide/en/src/main/docbook/included/tooltip.xml
trunk/docs/userguide/en/src/main/resources/images/tooltip1.png
trunk/docs/userguide/en/src/main/resources/images/tooltip2.png
trunk/docs/userguide/en/src/main/resources/images/tooltip3.png
Log:
http://jira.jboss.com/jira/browse/RF-502
Added: trunk/docs/userguide/en/src/main/docbook/included/tooltip.desc.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/tooltip.desc.xml (rev 0)
+++ trunk/docs/userguide/en/src/main/docbook/included/tooltip.desc.xml 2007-08-13 14:06:43 UTC (rev 2222)
@@ -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
Added: trunk/docs/userguide/en/src/main/docbook/included/tooltip.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/tooltip.xml (rev 0)
+++ trunk/docs/userguide/en/src/main/docbook/included/tooltip.xml 2007-08-13 14:06:43 UTC (rev 2222)
@@ -0,0 +1,219 @@
+<?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
+"value" attribute as text or through any nested content. In case if both defined - value 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 name "defaultContent." This facet provides default content to be
+displayed while main content loaded to the page in Ajax mode. So after <property>tooltip</property> called in Ajax mode - it
+appeared with the content defined in the facet and after loading complete content changes to 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 tooltip 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 - developer
+can define appearance direction through the corresponding attribute "direction". And also it's possible to define vertical and horizontal
+offsets relatively to mouse position.
+</para>
+
+
+
+
+<para>
+<property>Tooltip</property> appears attached to the corner dependent on "direction" attribute. By default it is positioned bottom-right.
+<property>Tooltip</property> activation occurs after defined event (default=mouseover) on the parent component taking into consideration
+"delay" attribute (default=0) or after calling JS API function doShow(). <property>Tooltip</property> deactivation occurs after mouseout event
+on the parent component (except mouse hovered the <property>tooltip</property> itself) or after calling JS API function doHide().
+</para>
+
+<para>
+The "mode" attribute is provided to developer to control the way of data loading to <property>tooltip</property> and has following values:
+ <itemizedlist>
+ <listitem>Client</listitem>
+ <listitem>Ajax</listitem>
+ </itemizedlist>
+</para>
+
+<para>
+In client mode <property>tooltip</property> content is rendered once on server and could be reRendered only through external submit.
+In Ajax mode <property>tooltip</property> content will be requested from server every activation.
+</para>
+
+<para>
+Special JS API is provided to control of component behaviour:
+ <itemizedlist>
+ <listitem>doShow() - Show corresponding tooltip</listitem>
+ <listitem>doHide() - Hide corresponding tooltip</listitem>
+ <listitem>doEnable() - Enable corresponding tooltip</listitem>
+ <listitem>doDisable() - Disable corresponding tooltip</listitem>
+ </itemizedlist>
+</para>
+
+<para>
+Disabled <property>tooltip</property> will be rendered to the page as usual but JS that responds for its activation will be
+disabled until doEnable() will called.
+</para>
+<para>
+Moreover, to add some JavaScript effects, client events defined on it are used:
+</para>
+ <title>Standart:</title>
+ <itemizedlist>
+ <listitem>onclick</listitem>
+ <listitem>ondblclick</listitem>
+ <listitem>onmouseout</listitem>
+ <listitem>onmousemove</listitem>
+ <listitem>onmouseover</listitem>
+ </itemizedlist>
+ <title>Special:</title>
+ <itemizedlist>
+ <listitem>onshow - Called after the <property>tooltip</property> called (some element overed) but before its requesting
+ </listitem>
+ <listitem>oncomplete - Called just after the <property>tooltip</property> shown
+ </listitem>
+ <listitem>onhide - Called after the <property>tooltip</property> hidden
+ </listitem>
+ </itemizedlist>
+</section>
+
+
+
+
+
+
+ <section>
+ <title>Look-and-Feel Customization</title>
+ <para>For skinnability implementation the components use a <emphasis><property>style class redefinition method</property></emphasis>.
+ </para>
+ <para>Default style classes are mapped on <emphasis><property>skin parameters</property>.</emphasis></para>
+
+ <para>To redefine appearance of all <property>tooltip</property> at once, there are two ways:</para>
+ <itemizedlist>
+ <listitem>to redefine corresponding skin parameters</listitem>
+ <listitem>to add to a user's style sheets style classes used by a <property>tooltip</property></listitem>
+ </itemizedlist>
+ </section>
+
+ <section>
+ <title>Definition custom style classes:</title>
+ <para>
+ <property>Tooltip</property> provides one class 'rich-tool-tip' which applies to wrapper element 'span' or 'div'
+ dependently to <property>tooltip</property> layout. In order to redefine style for all <property>tooltips</property>
+ on the page with using CSS it's enough to create classes with this name and define in it necessary properties.
+ To change style peculiarities of the particular <property>tooltips</property>, define your own style classes in the corresponding
+ <property>tooltips</property> attributes.
+ </para>
+</section>
+</section>
+
\ No newline at end of file
Added: trunk/docs/userguide/en/src/main/resources/images/tooltip1.png
===================================================================
(Binary files differ)
Property changes on: trunk/docs/userguide/en/src/main/resources/images/tooltip1.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: trunk/docs/userguide/en/src/main/resources/images/tooltip2.png
===================================================================
(Binary files differ)
Property changes on: trunk/docs/userguide/en/src/main/resources/images/tooltip2.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: trunk/docs/userguide/en/src/main/resources/images/tooltip3.png
===================================================================
(Binary files differ)
Property changes on: trunk/docs/userguide/en/src/main/resources/images/tooltip3.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
More information about the richfaces-svn-commits
mailing list