[richfaces-svn-commits] JBoss Rich Faces SVN: r4784 - trunk/docs/userguide/en/src/main/docbook/included.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Wed Dec 12 11:13:24 EST 2007
Author: vkorluzhenko
Date: 2007-12-12 11:13:24 -0500 (Wed, 12 Dec 2007)
New Revision: 4784
Removed:
trunk/docs/userguide/en/src/main/docbook/included/toolTip.desc.xml
trunk/docs/userguide/en/src/main/docbook/included/toolTip.xml
Log:
http://jira.jboss.com/jira/browse/RF-1614 - fixed file names.
Deleted: trunk/docs/userguide/en/src/main/docbook/included/toolTip.desc.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/toolTip.desc.xml 2007-12-12 16:09:47 UTC (rev 4783)
+++ trunk/docs/userguide/en/src/main/docbook/included/toolTip.desc.xml 2007-12-12 16:13:24 UTC (rev 4784)
@@ -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: trunk/docs/userguide/en/src/main/docbook/included/toolTip.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/toolTip.xml 2007-12-12 16:09:47 UTC (rev 4783)
+++ trunk/docs/userguide/en/src/main/docbook/included/toolTip.xml 2007-12-12 16:13:24 UTC (rev 4784)
@@ -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
-"value" 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 "defaultContent". 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 "direction". 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>"direction"</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 "delay" 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>"for"</property></emphasis> is used for defining the <emphasis><property>"id"</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>"for"</property></emphasis> of a <emphasis role="bold">
- <property><rich:tooltip></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>"mode"</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><rich:tooltip></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><rich:tooltip></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 <span> or <div> element of a tooltip</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <para>
- It depends on <emphasis role="bold"><property><rich:tooltip></property></emphasis> layout what a wrapper element <emphasis><property><span></property></emphasis> or <emphasis><property><div></property></emphasis>to choose.
- </para>
- <para>In order to redefine styles for all <emphasis role="bold">
- <property><rich:tooltip></property>
- </emphasis> components on a page using CSS, it'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><rich:tooltip></property>
- </emphasis> components define your own style class in the corresponding <emphasis
- role="bold">
- <property><rich:tooltip></property>
- </emphasis>attributes</para>
-</section>
- <section>
- <title>Relevant Resources Links</title>
- <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/toolTip.jsf?c=toolTip"
- >Here</ulink> you can see the example of <emphasis role="bold"
- ><property><rich:toolTip></property></emphasis> usage and sources for the given example. </para>
- </section>
-</section>
-
\ No newline at end of file
More information about the richfaces-svn-commits
mailing list