Author: atsebro Date: 2009-09-05 06:47:29 -0400 (Sat, 05 Sep 2009) New Revision: 15471 Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_effect.xml Log: Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_effect.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_effect.xml 2009-09-04 17:17:33 UTC (rev 15470) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_effect.xml 2009-09-05 10:47:29 UTC (rev 15471) @@ -1,252 +1,200 @@ <section role="NotInToc" id="rich_effect"> <title> - &lt; - rich:effect - &gt; - <emphasis role="since"> - <superscript> available since <emphasis role="version">3.1.0</emphasis> - </superscript> - </emphasis> + &lt;rich:effect&gt; <emphasis role="since"><superscript> available since <emphasis role="version">3.1.0</emphasis></superscript></emphasis> </title> - <section> - <title>Description</title> - <para> - The <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis> utilizes a set of effects provided by the scriptaculous JavaScript library. - It allows to attach effects to JSF components and html tags. - </para> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem> - <para>No developers JavaScript writing needed to use it on pages</para> - </listitem> - <listitem> - <para>Presents scriptaculous JavaScript library functionality</para> - </listitem> - </itemizedlist> - </section> - <section> - <title>Details of Usage</title> - <para> It is possible to use <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis> in two modes: <itemizedlist> - <listitem> - <para>attached to the JSF components or html tags and triggered by a particular event. - Wiring effect with JSF components might occur on the server or client. Wiring with html - tag is possible only on the client side </para> - </listitem> - <listitem> - <para>invoking from the JavaScript code by an effect name. During the rendering, - <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis> generates the JavaScript function with defined name. - When the function is called, the effect is applied </para> - </listitem> - </itemizedlist> - </para> - <para> - <emphasis role="bold">Those a the typical variants of using:</emphasis> - </para> - <programlisting role="XML">... -&lt;!-- attaching by event --&gt; + + <section> + <title>Description</title> + <para> + The <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> utilizes a set of effects provided by the Scriptaculous JavaScript library. + It allows to attach effects to JSF components and HTML tags. + </para> + </section> + + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Represents Scriptaculous JavaScript library functionality</para> + </listitem> + <listitem> + <para>No JavaScript needed to the component</para> + </listitem> + </itemizedlist> + </section> + + <section> + <title>Details of Usage</title> + <para> + It is possible to use <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> in two modes: + </para> + <itemizedlist> + <listitem> + <para> + attached to a JSF component or HTML tag and triggered by a particular event. + Wiring effect with JSF components might occur on the server or client. + Wiring with html tag is possible only on the client side. + </para> + </listitem> + <listitem> + <para> + invoking from the JavaScript code by an effect name. + During the rendering, <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> generates the JavaScript function with defined name. + When the function is called, the effect is applied + </para> + </listitem> + </itemizedlist> + + <para> + <emphasis role="bold">Those a the typical variants of using:</emphasis> + </para> + <programlisting role="XML">&lt;!-- triggered by an event --&gt; &lt;rich:panel&gt; &lt;rich:effect event="onmouseout" type="Opacity" params="duration:0.8,from:1.0,to:0.3" /&gt; - &lt;!--panel content--&gt; + ... &lt;/rich:panel&gt; -... -&lt;!-- invoking from JavaScript --&gt; -&lt;div id="contentDiv"&gt; - &lt;!--div content--&gt; -&lt;/div&gt; - +&lt;!-- invoking by JavaScript --&gt; +&lt;div id="contentDiv"&gt;...&lt;/div&gt; &lt;input type="button" onclick="hideDiv({duration:0.7})" value="Hide" /&gt; &lt;input type="button" onclick="showDiv()" value="Show" /&gt; - &lt;rich:effect name="hideDiv" for="contentDiv" type="Fade" /&gt; &lt;rich:effect name="showDiv" for="contentDiv" type="Appear" /&gt; -&lt;!-- attaching to window on load and applying on particular page element --&gt; -&lt;rich:effect for="window" event="onload" type="Appear" params="targetId:'contentDiv',duration:0.8,from:0.3,to:1.0" /&gt; -... -</programlisting> +&lt;!-- attached to a window onload event and applied to a particular page element --&gt; +&lt;rich:effect for="window" event="onload" type="Appear" params="targetId:'contentDiv',duration:0.8,from:0.3,to:1.0" /&gt;</programlisting> <figure> - <title>Initial</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/effect_init.png"/> - </imageobject> - </mediaobject> + <title>Initial</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/effect_init.png"/> + </imageobject> + </mediaobject> </figure> + <figure> + <title>When the mouse cursor is over</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/effect_2.png"/> + </imageobject> + </mediaobject> + </figure> - <figure> - <title>When the mouse cursor is over</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/effect_2.png"/> - </imageobject> - </mediaobject> - </figure> - <para> - <emphasis> - <property>"name"</property> - </emphasis> attribute defines a name of the JavaScript function that is be generated on a page - when the component is rendered. You can invoke this function to activate the effect. The - function accesses one parameter. It is a set of effect options in JSON format. </para> + The <emphasis><property>&quot;name&quot;</property></emphasis> attribute defines a name of the JavaScript function that will be generated on a page after the component is rendered. + This function will activate the needed effect. + The function accesses one parameter. + It is a set of effect options in JSON format. </para> <para> - <emphasis> - <property>"type"</property> - </emphasis> attribute defines the type of an effect. For example, "Fade", "Blind", "Opacity". - Have a look at <ulink url="http://script.aculo.us">scriptaculous documentation</ulink> for set - of available effect. </para> + The <emphasis><property>&quot;type&quot;</property></emphasis> attribute defines the type of an effect that will be applied. + Possible values are <code>Fade</code>, <code>Blind</code>, <code>Opacity</code>. + </para> <para> - <emphasis> - <property>"for"</property> - </emphasis> attribute defines the id of the component or html tag, the effect is 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>"targetId"</property> - </emphasis> option passed with <emphasis> - <property>"params"</property> - </emphasis> attribute of with function paramenter. </para> + The <emphasis><property>&quot;for&quot;</property></emphasis> attribute defines the ID of the component or HTML tag, the effect is attached to. + RichFaces converts value of <emphasis><property>&quot;for&quot;</property></emphasis> attribute to a component client ID if such component is found. + In case if such component is not found the value is left because of possible wirings with some DOM element id on the client side. + By default, the target of the effect is the same element that effect is pointed to. + Тarget element can be redefined with the <emphasis><property>&quot;targetId&quot;</property></emphasis> attribute; + new parameters should be passed with the <emphasis><property>&quot;params&quot;</property></emphasis> attribute. + </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 <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis> - attribute. Those are: <itemizedlist> - <listitem> - <para> - <emphasis> - <property>"targetId"</property> - </emphasis> allows to re-define the target of effect. The option is override the value of <emphasis> - <property>"for"</property> - </emphasis> attribute.</para> - </listitem> - <listitem> - <para> - <emphasis> - <property>"type"</property> - </emphasis> defines the effect type. The option is override the value of <emphasis> - <property>"type"</property> - </emphasis> attribute.</para> - </listitem> - </itemizedlist> + The <emphasis><property>&quot;params&quot;</property></emphasis> attribute allows to define a set of options (<code>duration</code>, <code>delay</code>, <code>from</code>, <code>to</code>) possible for a particurar effect. + Additionally to the options used by the effect itself, there are two option that might override the <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis>attribute: + <itemizedlist> + <listitem> + <para> + <emphasis><property>&quot;targetId&quot;</property></emphasis> allows to re-define the target of effect. + The option is override the value of <emphasis><property>&quot;for&quot;</property></emphasis> attribute. + </para> + </listitem> + <listitem> + <para> + <emphasis><property>&quot;type&quot;</property></emphasis> defines the effect type. + The option is override the value of <emphasis><property>&quot;type&quot;</property></emphasis> attribute. + </para> + </listitem> + </itemizedlist> </para> - <para> You can use a set of effects directly without defining the <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis> component on a page if it's convenient for you. For that, load the - scriptaculous library to the page with the following code: </para> <para> - <emphasis role="bold">Example:</emphasis> + Besides all you can load the Scriptaculous library to the page and use it directly without <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis>: </para> - <programlisting role="XML">... -&lt;a4j:loadScript src="resource://scriptaculous/effect.js" /&gt; -... -</programlisting> - <para> If you do use the <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis>component, there is no need to include this library because it's already here. </para> - - <para>For more information look at <ulink url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&... - Users Forum</ulink>.</para> - </section> - <section> - <title>Reference Data</title> + <programlisting role="XML">&lt;a4j:loadScript src="resource://scriptaculous/effect.js" /&gt;</programlisting> <para> - <ulink url="&tlddoc;rich/effect.html">Table of - &lt;rich:effect&gt; - attributes</ulink>. - </para> + But if you use the <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> there is no need to include this library because it's already there. + </para> + </section> + + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/effect.html">Table of &lt;rich:effect&gt; attributes</ulink>. + </para> <table> - <title>Component Identification Parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> + <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.Effect</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> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Effect</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> - <section> + </section> + + <section> <title>Relevant Resources Links</title> <para> - <ulink url="http://wiki.jboss.org/wiki/CreateABannerUsingEffectsAndPoll&quo... - Here - </ulink> - you can get additional information how to create an image banner - using - <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis> - and - <emphasis role="bold"> - <property>&lt;a4j:poll&gt;</property> - </emphasis> - components and figure out how to create an HTML banner from - <ulink url="http://wiki.jboss.org/auth/wiki/CreateAHTMLBannerUsingEffectsAn... - "Creating HTML Banner Using Effects And Poll RichFaces Wiki" article - </ulink> - . - </para> - <para>In the - <ulink url="http://wiki.jboss.org/auth/wiki/RichFacesCookbook/SlideShow&quo... Cookbook article</ulink> - you can find information how to make a Slide Show with help of the - <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis> - and <emphasis role="bold"> - <property>&lt;a4j:poll&gt;</property> - </emphasis> components. - </para> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/effect.jsf?... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis> usage. </para> - <para>How to save <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis>status see on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>.</para> - </section> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/effect.jsf?... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. + </para> + <para>Useful articels:</para> + + <itemizedlist> + <listitem> + <para> + &quot;<ulink url="http://www.jboss.org/community/wiki/CreateABannerUsingEffectsAn... a banner using effects and poll</ulink>&quot; and + &quot;<ulink url="http://wiki.jboss.org/auth/wiki/CreateAHTMLBannerUsingEffectsAn... a HTML banner using effects and poll</ulink>&quot; at RichFaces wiki contains sorces for creating an image and HTML banners; + </para> + </listitem> + <listitem> + <para> + &quot;<ulink url="http://wiki.jboss.org/auth/wiki/RichFacesCookbook/SlideShow&quo... article at RichFaces Cookbook describes + how to make a slideshow with help of the <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> components; + </para> + </listitem> + </itemizedlist> + <para> + Look at Scriptaculous <ulink url="http://script.aculo.us">documentation</ulink> for set of available effect. + </para> + <para> + Find more information about the compinent at <ulink url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>. + </para> + </section> + </section> \ No newline at end of file