[richfaces-svn-commits] JBoss Rich Faces SVN: r2391 - in trunk/samples/richfaces-demo/src/main/webapp/richfaces: effect and 2 other directories.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Tue Aug 21 20:53:20 EDT 2007
Author: SergeySmirnov
Date: 2007-08-21 20:53:20 -0400 (Tue, 21 Aug 2007)
New Revision: 2391
Added:
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/attributes.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/examples/diffTypes.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/snippets/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/snippets/usecases.html
Removed:
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/examples/edvToogl.xhtml
Modified:
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/usage.xhtml
Log:
demo updates. effects
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/attributes.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/attributes.xhtml (rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/attributes.xhtml 2007-08-22 00:53:20 UTC (rev 2391)
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:a4j="http://richfaces.org/a4j"
+ xmlns:rich="http://richfaces.org/rich">
+ <ui:composition template="/templates/component-sample.xhtml">
+ <ui:define name="sample">
+
+
+ <p>
+ <b>name</b> 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.
+ </p>
+ <p>
+ <b>type</b> attribute defines the type of effect. For example, "Fade", "Blind",
+ "Opacity". Take a look at scriptaculous documentation for set of available effect.
+ </p>
+
+ <p>
+ <b>for</b> attribute defines the id of the component or html tag, the effect will
+ be attached to. Richfaces converts the 'for' 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.<br/>
+ By default, the target of the effect is the same element that effect pointed to.
+ However, the target element is might be overridden with 'effectId' option passed
+ with 'params' attribute of with function paramenter.
+ </p>
+ <p>
+ <b>params</b> 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
+ rich:effect attribute. Those are:
+ <ul>
+ <li><b>targetId</b> allows to re-define the target of effect. The option
+ is overrire the value of 'for' attribute</li>
+ <li><b>type</b> defines the effect type. The option
+ is overrire the value of 'type' attribute</li>
+ </ul>
+ </p>
+
+
+ </ui:define>
+
+ </ui:composition>
+</html>
Copied: trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/examples/diffTypes.xhtml (from rev 2378, trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/examples/edvToogl.xhtml)
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/examples/diffTypes.xhtml (rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/examples/diffTypes.xhtml 2007-08-22 00:53:20 UTC (rev 2391)
@@ -0,0 +1,90 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:h="http://java.sun.com/jsf/html"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:a4j="http://richfaces.org/a4j"
+ xmlns:rich="http://richfaces.org/rich">
+
+<style type="text/css">
+ .box {
+ background-color: #FFF;
+ height:100px;
+ width: 200px;
+ text-align:center;
+ }
+ .cell {
+ height:120px;
+ width: 220px;
+ vertical-align:top;
+
+ }
+
+</style>
+
+<h:panelGrid columns="3" columnClasses="cell">
+
+ <rich:panel id="fadebox" styleClass="box">
+ <f:facet name="header">Fade Effect</f:facet>
+ <rich:effect event="onclick" type="Fade" />
+ <rich:effect event="onclick" for="fadebox" type="Appear" params="delay:3.0,duration:0.5" />
+ <h:outputText value="Click to Activate" />
+ </rich:panel>
+
+ <rich:panel id="bdbox" styleClass="box">
+ <f:facet name="header">BlindDown Effect</f:facet>
+ <rich:effect event="onclick" type="BlindDown" params="duration:0.8" />
+ <h:outputText value="Click to Activate" />
+ </rich:panel>
+
+ <rich:panel id="bubox" styleClass="box">
+ <f:facet name="header">BlindUp Effect</f:facet>
+ <rich:effect event="onclick" type="BlindUp" params="duration:0.8" />
+ <rich:effect event="onclick" for="bubox" type="Appear" params="delay:3.0,duration:0.5" />
+ <h:outputText value="Click to Activate" />
+ </rich:panel>
+
+ <rich:panel id="opacitybox" styleClass="box">
+ <f:facet name="header">Opacity Effect</f:facet>
+ <rich:effect event="onclick" type="Opacity" params="duration:0.8, from:1.0, to:0.1" />
+ <rich:effect event="onclick" for="opacitybox" type="Appear" params="delay:3.0,duration:0.5" />
+ <h:outputText value="Click to Activate" />
+ </rich:panel>
+
+ <rich:panel id="switchbox" styleClass="box">
+ <f:facet name="header">SwitchOff Effect</f:facet>
+ <rich:effect event="onclick" type="SwitchOff" params="duration:0.8" />
+ <rich:effect event="onclick" for="switchbox" type="Appear" params="delay:3.0,duration:0.5" />
+ <h:outputText value="Click to Activate" />
+ </rich:panel>
+
+ <rich:panel id="dobox" styleClass="box">
+ <f:facet name="header">DropOut Effect</f:facet>
+ <rich:effect event="onclick" type="DropOut" params="duration:0.8" />
+ <rich:effect event="onclick" for="dobox" type="Appear" params="delay:3.0,duration:0.5" />
+ <h:outputText value="Click to Activate" />
+ </rich:panel>
+
+ <rich:panel id="highlightbox" styleClass="box">
+ <f:facet name="header">Highlight Effect</f:facet>
+ <rich:effect event="onclick" type="Highlight" params="duration:0.8" />
+ <rich:effect event="onclick" for="highlightbox" type="Appear" params="delay:3.0,duration:0.5" />
+ <h:outputText value="Click to Activate" />
+ </rich:panel>
+
+ <rich:panel id="foldbox" styleClass="box">
+ <f:facet name="header">Fold Effect</f:facet>
+ <rich:effect event="onclick" type="Fold" params="duration:0.8" />
+ <rich:effect event="onclick" for="foldbox" type="Appear" params="delay:3.0,duration:0.5" />
+ <h:outputText value="Click to Activate" />
+ </rich:panel>
+
+ <rich:panel id="squishbox" styleClass="box">
+ <f:facet name="header">Squish Effect</f:facet>
+ <rich:effect event="onclick" type="Squish" params="duration:0.8" />
+ <rich:effect event="onclick" for="squishbox" type="Appear" params="delay:3.0,duration:0.5" />
+ <h:outputText value="Click to Activate" />
+ </rich:panel>
+
+</h:panelGrid>
+
+</ui:composition>
\ No newline at end of file
Deleted: trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/examples/edvToogl.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/examples/edvToogl.xhtml 2007-08-22 00:22:56 UTC (rev 2390)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/examples/edvToogl.xhtml 2007-08-22 00:53:20 UTC (rev 2391)
@@ -1,28 +0,0 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml"
- xmlns:ui="http://java.sun.com/jsf/facelets"
- xmlns:h="http://java.sun.com/jsf/html"
- xmlns:f="http://java.sun.com/jsf/core"
- xmlns:a4j="http://richfaces.org/a4j"
- xmlns:rich="http://richfaces.org/rich">
-
-<script>
- function fin(obj){
- alert(obj);
- /*
- for(var i in obj.effects){
- alert(obj.effects[i]['element'].id);
- }
- */
- }
-</script>
-
-<div id="dv2" style="width:200px;height:10px;background-color:lightgreen"></div>
-
-<div id="dv" style="width:200px;height:200px;background-color:lightblue"></div>
-
-<rich:effect event="onclick" for="dv" type="Opacity" params="from:1.0,to:.1,afterFinish:fin" />
-<rich:effect event="onclick" for="dv2" type="Opacity" params="targetId:'dv',from:0.3,to:1.0" />
-
-
-
-</ui:composition>
\ No newline at end of file
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/snippets/usecases.html
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/snippets/usecases.html (rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/snippets/usecases.html 2007-08-22 00:53:20 UTC (rev 2391)
@@ -0,0 +1,21 @@
+<!-- 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" />
\ No newline at end of file
Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/usage.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/usage.xhtml 2007-08-22 00:22:56 UTC (rev 2390)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/usage.xhtml 2007-08-22 00:53:20 UTC (rev 2391)
@@ -8,15 +8,17 @@
<ui:composition template="/templates/component-sample.xhtml">
<ui:define name="sample">
- <ui:include src="/richfaces/effect/examples/edvToogl.xhtml" />
- <ui:include src="/templates/include/sourceview.xhtml">
- <ui:param name="sourcepath" value="/richfaces/effect/examples/edvToogl.xhtml"/>
- </ui:include>
-
<p>rich:effect utilizes the set of effects provided by scriptaculous javascript library. It
allows to attach effects to JSF components and html tags. For the reference of the available
- effects and thier parameters see the scriptaculous documentation and wiki.
+ effects and thier parameters see the scriptaculous documentation and wiki. Those are
+ some of many possible effects available out-of-the-box:
</p>
+ <div class="sample-container">
+ <ui:include src="/richfaces/effect/examples/diffTypes.xhtml" />
+ <ui:include src="/templates/include/sourceview.xhtml">
+ <ui:param name="sourcepath" value="/richfaces/effect/examples/diffTypes.xhtml"/>
+ </ui:include>
+ </div>
<p>
It is possible to use rich:effect in two modes:
<ul>
@@ -27,93 +29,14 @@
function with defined name. When the function is called, the effect is applied</li>
</ul>
Those a the typical variants of using:
-<pre>
-<!-- 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" />
-</pre>
-
</p>
-
- <div class="sample-container" >
-
- <rich:separator height="1" style="padding-bottom:10px" />
-
-
- <div id="mypaneldiv" style="padding:6px;background-color:lightblue;width:300px" >
- <rich:effect for="mypaneldiv" event="onmouseout" type="Opacity" params="from:1.0,to:0.3" />
- <rich:effect for="mypaneldiv" event="onmouseover" type="Opacity" params="from:0.3,to:1.0" />
-
- The opacity of this panel will be set to 0.3 when the mouse cursor is out set
- to 1.0 if the mouse is over. The default opacity is set to 0.3 when the page
- is loaded.
-
- </div>
- <rich:effect for="window" event="load" type="Opacity" params="targetId:'mypaneldiv',from:1.0,to:0.3" />
+ <div class="sample-container">
+ <rich:insert src="/richfaces/effect/snippets/usecases.html" highlight="xhtml" />
+ </div>
+
- <rich:separator height="1" style="padding-top:10px" />
-
-
-
- </div>
- <h2>Key Attributes</h2>
- <p>
- <b>name</b> 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.
- </p>
- <p>
- <b>type</b> attribute defines the type of effect. For example, "Fade", "Blind",
- "Opacity". Take a look at scriptaculous documentation for set of available effect.
- </p>
-
- <p>
- <b>for</b> attribute defines the id of the component or html tag, the effect will
- be attached to. Richfaces converts the 'for' 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.<br/>
- By default, the target of the effect is the same element that effect pointed to.
- However, the target element is might be overridden with 'effectId' option passed
- with 'params' attribute of with function paramenter.
- </p>
- <p>
- <b>params</b> 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
- rich:effect attribute. Those are:
- <ul>
- <li><b>effectId</b> allows to re-define the target of effect. The option
- is overrire the value of 'for' attribute</li>
- <li><b>effectType</b> defines the effect type. The option
- is overrire the value of 'type' attribute</li>
- </ul>
- </p>
-
-
</ui:define>
- <ui:define name="sources">
- Here is a fragment of page sources for the given example:
- <iframe src="${facesContext.externalContext.requestContextPath}/richfaces/form/source/usage.html" class="source_frame"/>
- </ui:define>
+
</ui:composition>
</html>
Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect.xhtml 2007-08-22 00:22:56 UTC (rev 2390)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect.xhtml 2007-08-22 00:53:20 UTC (rev 2391)
@@ -11,6 +11,9 @@
<rich:tab label="Usage">
<ui:include src="/richfaces/effect/usage.xhtml"/>
</rich:tab>
+ <rich:tab label="Key Attributes">
+ <ui:include src="/richfaces/effect/attributes.xhtml"/>
+ </rich:tab>
</rich:tabPanel>
</ui:define>
</ui:composition>
More information about the richfaces-svn-commits
mailing list