9:20 p.m.
Author: SergeySmirnov
Date: 2007-08-08 22:20:33 -0400 (Wed, 08 Aug 2007)
New Revision: 2166
Added:
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/source/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/source/usage.html
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/source/usage.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/usage.xhtml
Modified:
trunk/samples/effect-sample/src/main/webapp/effect.xhtml
trunk/samples/richfaces-demo/src/main/resources/org/richfaces/demo/common/components.properties
trunk/samples/richfaces-demo/src/main/webapp/richfaces/comingSoon.xhtml
trunk/ui/effect/src/main/templates/effect.jspx
Log:
effect demo
Modified: trunk/samples/effect-sample/src/main/webapp/effect.xhtml
===================================================================
--- trunk/samples/effect-sample/src/main/webapp/effect.xhtml 2007-08-09 02:08:46 UTC (rev
2165)
+++ trunk/samples/effect-sample/src/main/webapp/effect.xhtml 2007-08-09 02:20:33 UTC (rev
2166)
@@ -9,7 +9,7 @@
<f:view contentType="text/html" >
- <body>
+ <body style="opacity:0.4;">
<script>
ma = 1.4;
@@ -57,8 +57,17 @@
</h:panelGrid>
</h:form>
+ <div id="my2"
style="width:100px;height:100px;background-color:blue"> </div>
+ <script>
+ var ob = document.getElementById("my");
+ </script>
+
+
+ <e:effect event="load" for="window" type="Opacity"
params="id:document.body,duration:0.8,from:0.4,to:1.0"/>
+
+
<h:outputText value="Using function parameters:" />
<span
onclick="Richfaces.hideItP({id:'mynewpanel'})">Hide</span>
@@ -66,15 +75,19 @@
<div id="mynewpanel"
style="width:100px;height:100px;background-color:lightblue"> </div>
- <e:effect name="Richfaces.hideItP"
onmouseover="Richfaces.hideItP({id:'mynewpanel'})"
type="Opacity" params="duration:0.8, from:1.0, to:0.2" />
+ <e:effect name="Richfaces.hideItP" type="Opacity"
params="duration:0.8, from:1.0, to:0.2" />
<e:effect name="Richfaces.showItP" />
- <div id="dpanel"
style="width:100px;height:100px;background-color:lightgreen"> </div>
+ <div id="dpanel"
style="width:100px;height:100px;background-color:lightgreen"> </div>
- <e:effect event="onclick" for="dpanel" type="Fade"
params="duration:0.8, id:'my'" />
- <e:effect event="load" for="window" type="Fade"
params="duration:0.8" />
+<script>
+var bb=document.getElementById('dpanel');
+</script>
+
+ <e:effect event="onclick" for="my" type="Fade"
params="id:bb,duration:0.8" />
+
<div style="margin:10px;"><a
href='javascript:void(0)'
onclick='new Effect["Opacity"](
document.getElementById("mynewpanel"),{duration:0.8, from:1.0, to:0.2}
);'>Click for Demo!</a><br /></div>
<!--
Modified:
trunk/samples/richfaces-demo/src/main/resources/org/richfaces/demo/common/components.properties
===================================================================
---
trunk/samples/richfaces-demo/src/main/resources/org/richfaces/demo/common/components.properties 2007-08-09
02:08:46 UTC (rev 2165)
+++
trunk/samples/richfaces-demo/src/main/resources/org/richfaces/demo/common/components.properties 2007-08-09
02:20:33 UTC (rev 2166)
@@ -61,5 +61,5 @@
message= richMisc, Message, /images/ico_common.gif,
/images/cn_Message.gif,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
/richfaces/comingSoon.jsf
messages= richMisc, Messages, /images/ico_common.gif,
/images/cn_Messages.gif,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
/richfaces/comingSoon.jsf
virtualEarth= richMisc, Virtual Earth,
/images/ico_VirtualEarth.gif, /images/cn_VirtualEarth.gif,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
/richfaces/comingSoon.jsf
-effect= richMisc, Effect, /images/ico_common.gif,
/images/cn_Effect.gif,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
/richfaces/comingSoon.jsf
+effect= richMisc, Effect, /images/ico_common.gif,
/images/cn_Effect.gif,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
/richfaces/effect.jsf
scrollableGrid= richDataIterators, Scrollable Data Grid, /images/ico_common.gif,
/images/cn_ScrollableDataGrid.gif,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone...,
/richfaces/comingSoon.jsf
Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/comingSoon.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/comingSoon.xhtml 2007-08-09
02:08:46 UTC (rev 2165)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/comingSoon.xhtml 2007-08-09
02:20:33 UTC (rev 2166)
@@ -7,6 +7,7 @@
<ui:composition template="/templates/main.xhtml">
<ui:define name="title">RichFaces - Open Source Rich JSF
Components</ui:define>
<ui:define name="body">
+ <div id="coming" style="display:none">
<div style="text-align:center"><h:graphicImage
value="/images/coming_soon.gif" />
</div>
<p>The demo example development for this component is in progress. You can see
@@ -17,6 +18,9 @@
<a target="_blank"
href="http://jboss.com/index.html?module=bb&op=viewforum&...
http://jboss.com/index.html?module=bb&op=viewforum&f=261&...
</p>
+ </div>
+ <rich:effect event="load" for="window" type="Appear"
params="id:'coming',duration:1.0,from:0.1,to:1.0" />
+
</ui:define>
</ui:composition>
</html>
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/source/usage.html
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/source/usage.html
(rev 0)
+++
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/source/usage.html 2007-08-09
02:20:33 UTC (rev 2166)
@@ -0,0 +1 @@
+TODO: source should be added
\ No newline at end of file
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/source/usage.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/source/usage.xhtml
(rev 0)
+++
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/source/usage.xhtml 2007-08-09
02:20:33 UTC (rev 2166)
@@ -0,0 +1,6 @@
+<a4j:form ajaxSubmit="true" reRender="name">
+ <h:panelGrid>
+ <h:commandButton value="Set Local Name to John (Ajax)"
action="#{userBean.nameItJohn}" />
+ <h:outputText id="name" value="Name:#{userBean.name}" />
+ </h:panelGrid>
+</a4j:form>
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/usage.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/usage.xhtml
(rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/usage.xhtml 2007-08-09
02:20:33 UTC (rev 2166)
@@ -0,0 +1,80 @@
+<!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.ajax4jsf.org/rich">
+ <ui:composition template="/templates/component-sample.xhtml">
+ <ui:define name="sample">
+
+ <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.
+ </p>
+ <p>
+ It is possible to use rich:effect in two modes:
+ <ul>
+ <li>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</li>
+ <li>invoking from the javascript code by effect name. During the rendering,
rich:effect generates the javascript
+ 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" />
+
+ <rich:panel id="mypanel"
style="background-color:lightblue;width:300px" >
+ <rich:effect event="onmouseout" type="Opacity"
params="from:1.0,to:0.3" />
+ <rich:effect event="onmouseover" type="Opacity"
params="from:0.3,to:1.0" />
+
+ <f:verbatim>
+ 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.
+
+ </f:verbatim>
+
+ </rich:panel>
+ <rich:effect for="window" event="load"
type="Opacity" params="id:'mypanel',from:1.0,to:0.3" />
+
+ <rich:separator height="1" style="padding-top:10px" />
+
+ </div>
+
+
+ </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>
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect.xhtml
(rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect.xhtml 2007-08-09
02:20:33 UTC (rev 2166)
@@ -0,0 +1,17 @@
+<!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:rich="http://richfaces.ajax4jsf.org/rich">
+<ui:composition template="/templates/main.xhtml">
+ <ui:define name="title">RichFaces - Open Source Rich JSF Components -
Rich Effects</ui:define>
+ <ui:define name="body">
+ <rich:tabPanel switchType="server" styleClass="top_tab"
contentClass="content_tab" headerClass="header_tabs_class"
inactiveTabClass="inactive_tab" activeTabClass="active_tab">
+ <rich:tab label="Usage">
+ <ui:include src="/richfaces/effect/usage.xhtml"/>
+ </rich:tab>
+ </rich:tabPanel>
+ </ui:define>
+</ui:composition>
+</html>
Modified: trunk/ui/effect/src/main/templates/effect.jspx
===================================================================
--- trunk/ui/effect/src/main/templates/effect.jspx 2007-08-09 02:08:46 UTC (rev 2165)
+++ trunk/ui/effect/src/main/templates/effect.jspx 2007-08-09 02:20:33 UTC (rev 2166)
@@ -52,9 +52,13 @@
<c:if test="#{needsObserver}">
<script type="text/javascript"
x:passThruWithExclusions="name,type,for">
//<![CDATA[
+{
var pm ="{"+"#{params}"+"}";var ename =
Richfaces.effectEventOnOut('#{event}');
var obj= typeof #{forid} == "object"? #{forid}:$('#{forid}');
-Event.observe(obj,ename,
Function("Richfaces.processEffect('#{forid}','#{type}',{},pm
);"),{#{params}}.useCapture||false);
+var hash = { id: obj, params: pm };
+var bindedFunction = function(event){ return
Richfaces.processEffect(this.id,'#{type}',{},this.params); }.bind(hash);
+Event.observe(obj,ename, bindedFunction,{#{params}}.useCapture||false);
+}
//]]>
</script>
</c:if>