[richfaces-svn-commits] JBoss Rich Faces SVN: r2430 - 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
Thu Aug 23 09:38:14 EDT 2007
Author: vkukharchuk
Date: 2007-08-23 09:38:13 -0400 (Thu, 23 Aug 2007)
New Revision: 2430
Added:
trunk/docs/userguide/en/src/main/docbook/included/effect.desc.xml
trunk/docs/userguide/en/src/main/docbook/included/effect.xml
trunk/docs/userguide/en/src/main/resources/images/effect0.png
trunk/docs/userguide/en/src/main/resources/images/effect1.png
Log:
http://jira.jboss.com/jira/browse/RF-639
Added: trunk/docs/userguide/en/src/main/docbook/included/effect.desc.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/effect.desc.xml (rev 0)
+++ trunk/docs/userguide/en/src/main/docbook/included/effect.desc.xml 2007-08-23 13:38:13 UTC (rev 2430)
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<section>
+ <sectioninfo>
+ <keywordset>
+ <keyword>effect</keyword>
+ </keywordset>
+ </sectioninfo>
+ <section>
+ <title>Description</title>
+ <para>
+ The <property>rich:effect</property> utilizes the set of effects provided by scriptaculous javascript library.
+ It allows to attach effects to JSF components and html tags.
+ </para>
+ </section>
+ <section>
+ <title>Key Features</title>
+ <itemizedlist>
+ <listitem>No developers JavaScript writing needed to use on the pages</listitem>
+ <listitem>Presents scriptaculous javascript library functionality</listitem>
+ </itemizedlist>
+ </section>
+</section>
Added: trunk/docs/userguide/en/src/main/docbook/included/effect.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/effect.xml (rev 0)
+++ trunk/docs/userguide/en/src/main/docbook/included/effect.xml 2007-08-23 13:38:13 UTC (rev 2430)
@@ -0,0 +1,165 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<section>
+ <sectioninfo>
+ <keywordset>
+ <keyword>effect</keyword>
+ <keyword>rich:effect</keyword>
+ <keyword>HtmlEffect</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.RichEffect</entry>
+ </row>
+ <row>
+ <entry>component-class</entry>
+ <entry>org.richfaces.component.html.HtmlEffect</entry>
+ </row>
+ <row>
+ <entry>component-family</entry>
+ <entry>org.richfaces.Effect</entry>
+ </row>
+ <row>
+ <entry>renderer-type</entry>
+ <entry>org.richfaces.EffectRenderer</entry>
+ </row>
+ <row>
+ <entry>tag-class</entry>
+ <entry>org.richfaces.taglib.EffectTag</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <section>
+ <title>Creating the Component with a Page Tag</title>
+ <para>To create the simplest variant of <property>rich:effect</property> on a page, use the
+ following syntax:</para>
+
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="XML"><![CDATA[...
+<rich:effect for="componentId" type="Appear"/>
+...
+]]></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.HtmlRichEffect;
+...
+HtmlRichEffect myEffect = new HtmlRichEffect();
+...
+]]></programlisting>
+ </section>
+
+ <section>
+ <title>Details of Usage</title>
+<para>
+ It is possible to use <property><rich:effect></property> in two modes:
+<itemizedlist>
+ <listitem>attached to the JSF components or html tags and triggered by particular event.
+ Wiring effect with JSF components might be occurs on the server or client.
+ Wiring with html tag is possible only on the client side </listitem>
+ <listitem>invoking from the javascript code by effect name.
+ During the rendering, <property>rich:effect</property> generates the javascript function with defined name. When the function is called,
+ the effect is applied </listitem>
+</itemizedlist>
+</para>
+ <para>
+ <emphasis role="bold">Those a the typical variants of using:</emphasis>
+ </para>
+ <programlisting role="XML"><![CDATA[...
+<!-- attaching by event -->
+<rich:panel>
+ <rich:effect event="onmouseout" type="Opacity" params="duration:0.8,from:1.0,to:0.3" />
+ .... panel content ....
+</rich:panel>
+...
+
+<!-- invoking from javascript -->
+<div id="contentDiv">
+ ..... div content ......
+</div>
+
+<input type="button" onclick="hideDiv({duration:0.7})" value="Hide" />
+<input type="button" onclick="showDiv()" value="Show" />
+
+<rich:effect name="hideDiv" for="contentDiv" type="Fade" />
+<rich:effect name="showDiv" for="contentDiv" type="Appear" />
+
+<!-- attaching to window on load and applying on particular page element -->
+<rich:effect for="window" event="onload" type="Appear" params="id:'contentDiv',duration:0.8,from:0.3,to:1.0" />
+...
+]]></programlisting>
+
+ <figure>
+ <title>Initial:</title>
+
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/effect1.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ <figure>
+ <title>When the mouse cursor is over:</title>
+
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/effect0.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+<para>
+<emphasis><property>"name"</property></emphasis> attribute defines the name of the javascript function will
+be generated on the page when the component is rendered. You can invoke this function to activate the effect. The function access one parameter.
+It is a set of effect options in JSON format.
+</para>
+
+<para>
+<emphasis><property>"type"</property></emphasis> attribute defines the type of effect. For example, "Fade", "Blind", "Opacity". Take a look at scriptaculous documentation
+for set of available effect.
+</para>
+
+<para>
+<emphasis><property>"for"</property></emphasis> attribute defines the id of the component or html tag, the effect will be attached to.
+Richfaces converts the <emphasis><property>"for"</property></emphasis> attribute value to the client id of the component if such component is found. If not, the value is left as is for possible
+wiring with on the DOM element's id on the client side.
+By default, the target of the effect is the same element that effect pointed to. However, the target element
+is might be overridden with <emphasis><property>"effectId"</property></emphasis> option passed with <emphasis><property>"params"</property></emphasis>
+attribute of with function paramenter.
+</para>
+
+<para>
+<emphasis><property>"params"</property></emphasis> attribute allows to define the set of options possible for particurar effect.
+For example, 'duration', 'delay', 'from', 'to'. Additionally to the options used by the effect itself, there are two option that might override
+the <property>rich:effect</property> attribute. Those are:
+<itemizedlist>
+ <listitem><emphasis><property>"effectId"</property></emphasis> allows to re-define the target of effect.
+ The option is overrire the value of <emphasis><property>"for"</property></emphasis> attribute</listitem>
+ <listitem><emphasis><property>"effectType"</property></emphasis> defines the effect type.
+ The option is overrire the value of <emphasis><property>"type"</property></emphasis> attribute</listitem>
+</itemizedlist>
+</para>
+
+ </section>
+</section>
Added: trunk/docs/userguide/en/src/main/resources/images/effect0.png
===================================================================
(Binary files differ)
Property changes on: trunk/docs/userguide/en/src/main/resources/images/effect0.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: trunk/docs/userguide/en/src/main/resources/images/effect1.png
===================================================================
(Binary files differ)
Property changes on: trunk/docs/userguide/en/src/main/resources/images/effect1.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
More information about the richfaces-svn-commits
mailing list