[richfaces-svn-commits] JBoss Rich Faces SVN: r2215 - in trunk: samples/richfaces-demo/src/main/webapp/richfaces/effect and 5 other directories.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Sun Aug 12 23:44:40 EDT 2007
Author: SergeySmirnov
Date: 2007-08-12 23:44:40 -0400 (Sun, 12 Aug 2007)
New Revision: 2215
Modified:
trunk/samples/effect-sample/src/main/webapp/effect.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/usage.xhtml
trunk/samples/richfaces-demo/src/main/webapp/templates/include/sourceview.xhtml
trunk/ui/effect/src/main/config/component/effect.xml
trunk/ui/effect/src/main/java/org/richfaces/component/UIEffect.java
trunk/ui/effect/src/main/resources/org/richfaces/renderkit/html/script/processEffect.js
trunk/ui/effect/src/main/templates/effect.jspx
Log:
refactoring for effect
Modified: trunk/samples/effect-sample/src/main/webapp/effect.xhtml
===================================================================
--- trunk/samples/effect-sample/src/main/webapp/effect.xhtml 2007-08-12 23:41:51 UTC (rev 2214)
+++ trunk/samples/effect-sample/src/main/webapp/effect.xhtml 2007-08-13 03:44:40 UTC (rev 2215)
@@ -46,9 +46,59 @@
<h:outputText value="JSF Component with Event:" />
<h:form id="myform2">
- <h:panelGrid id="mypanel2" border="1" style="background-color:#CCC">
+ <h:panelGrid id="mypanel2" border="1" style="background-color:#CCC">
<e:effect event="onclick" type="Opacity" params="duration:0.5,from:0.4,to:1.0"/>
<e:effect event="onmouseout" type="Opacity" params="duration:0.5,from:1.0,to:0.4"/>
+
+ <h:outputText value="Panel Content" />
+ </h:panelGrid>
+ </h:form>
+
+
+ <h:outputText value="JSF Component with Event and non-jsf target. Click panel" />
+
+ <h:form id="myform2a">
+ <h:panelGrid id="mypanel2a" border="1" style="background-color:#CCC">
+ <e:effect event="onclick" targetId="my2a" type="Opacity" params="duration:0.5,from:0.4,to:1.0"/>
+ <e:effect event="onmouseout" type="Opacity" params="targetId:'my2a',duration:0.5,from:1.0,to:0.4"/>
+
+ <h:outputText value="Panel Content" />
+ </h:panelGrid>
+
+ </h:form>
+
+ <div id="my2a" style="width:100px;height:10px;background-color:blue"> </div>
+
+ <h:outputText value="JSF Component with Event and jsf target. Click panel" />
+
+ <h:form id="myform2b">
+
+ <h:panelGrid id="my2b" style="width:100px;height:10px;background-color:blue">
+ <h:outputText value="jsf panelGrid"/>
+ </h:panelGrid>
+
+
+ <h:panelGrid id="mypanel2b" border="1" style="background-color:#CCC">
+ <e:effect event="onclick" targetId="my2b" type="Opacity" params="duration:0.5,from:0.4,to:1.0"/>
+ <e:effect event="onmouseout" targetId="my2b" type="Opacity" params="duration:0.5,from:1.0,to:0.4"/>
+
+ <h:outputText value="Panel Content" />
+ </h:panelGrid>
+
+
+
+
+ </h:form>
+
+
+
+
+ <h:outputText value="JSF Component with Event. Client wiring:" />
+
+ <h:form id="myform3">
+ <h:panelGrid id="mypanel3" border="1" style="background-color:#CCC">
+ <e:effect event="onclick" for="mypanel3" type="Opacity" params="duration:0.5,from:0.4,to:1.0"/>
+ <e:effect event="onmouseout" for="mypanel3" type="Opacity" params="duration:0.5,from:1.0,to:0.4"/>
<f:facet name="header">
<h:outputText value="Panel Header" />
</f:facet>
@@ -57,28 +107,33 @@
</h:panelGrid>
</h:form>
+
<div id="my2" style="width:100px;height:100px;background-color:blue"> </div>
<script>
- var ob = document.getElementById("my");
+ var ob = document.getElementById("my2");
</script>
+ <e:effect for="ob" event="onmouseover" type="Opacity" params="duration:0.5,from:1.0,to:0.2" />
+ <e:effect for="ob" event="onmouseout" type="Opacity" params="targetId:ob,duration:0.5,from:0.2,to:1.0" />
- <e:effect event="load" for="window" type="Opacity" params="id:document.body,duration:0.8,from:0.4,to:1.0"/>
+ <e:effect event="load" for="window" type="Opacity" params="targetId: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>
- <span onclick="Richfaces.showItP({id:'mynewpanel', type:'Appear', duration:2.5})">Show</span>
+ <span onclick="Richfaces.hideItP({targetId:'mynewpanel'})">Hide</span>
+ <span onclick="Richfaces.showItP({targetId:'mynewpanel', type:'Appear', duration:2.5})">Show</span>
<div id="mynewpanel" style="width:100px;height:100px;background-color:lightblue"> </div>
<e:effect name="Richfaces.hideItP" type="Opacity" params="duration:0.8, from:1.0, to:0.2" />
<e:effect name="Richfaces.showItP" />
+ <h:outputText value="Click box below:" />
+
<div id="dpanel" style="width:100px;height:100px;background-color:lightgreen"> </div>
<script>
@@ -86,10 +141,8 @@
</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>
+ <e:effect event="onclick" for="bb" type="Fade" params="targetId:ob,duration:0.8" />
+ <e:effect event="onmouseout" for="bb" targetId="ob" type="BlindDown" params="duration:0.8" />
<!--
<script>
Event.observe(window,'click', mess, false );
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-12 23:41:51 UTC (rev 2214)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/effect/usage.xhtml 2007-08-13 03:44:40 UTC (rev 2215)
@@ -7,6 +7,11 @@
xmlns:rich="http://richfaces.ajax4jsf.org/rich">
<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
@@ -63,15 +68,12 @@
</div>
- <rich:effect for="window" event="load" type="Opacity" params="id:'mypaneldiv',from:1.0,to:0.3" />
+ <rich:effect for="window" event="load" type="Opacity" params="targetId:'mypaneldiv',from:1.0,to:0.3" />
<rich:separator height="1" style="padding-top:10px" />
+
- <ui:include src="/templates/include/sourceview.xhtml">
- <ui:param name="sourcepath" value="/richfaces/effect/source/usage.html"/>
- </ui:include>
-
</div>
<h2>Key Attributes</h2>
<p>
Modified: trunk/samples/richfaces-demo/src/main/webapp/templates/include/sourceview.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/templates/include/sourceview.xhtml 2007-08-12 23:41:51 UTC (rev 2214)
+++ trunk/samples/richfaces-demo/src/main/webapp/templates/include/sourceview.xhtml 2007-08-13 03:44:40 UTC (rev 2215)
@@ -62,8 +62,8 @@
<f:subview>
<div>
<a4j:outputPanel styleClass="viewsourcelooklink" id="look">
- <rich:effect for="look" event="onclick" type="BlindDown" params="id:'source1',duration:1.0,from:0.0,to:1.0" />
- <rich:effect for="look" event="onclick" type="Appear" params="id:'source1',duration:0.5,from:0.0,to:1.0" />
+ <rich:effect for="look" event="onclick" type="BlindDown" targetId="source1" params="duration:1.0,from:0.0,to:1.0" />
+ <rich:effect for="look" event="onclick" type="Appear" targetId="source1" params="duration:0.5,from:0.0,to:1.0" />
<rich:effect for="look" event="onclick" type="Fade" params="duration:0.0" />
<h:outputText escape="false" value="#{empty openlabel?'View Source' : openlabel }" />
</a4j:outputPanel>
@@ -76,8 +76,8 @@
</div>
<a4j:outputPanel id="hide" styleClass="viewsourcehidelink">
- <rich:effect for="hide" event="onclick" type="BlindUp" params="id:'source1', duration:1.0" />
- <rich:effect for="hide" event="onclick" type="Appear" params="id:'look', delay:1.0, duration:1.0" />
+ <rich:effect for="hide" event="onclick" type="BlindUp" targetId="source1" params="id:'source1', duration:1.0" />
+ <rich:effect for="hide" event="onclick" type="Appear" targetId="look" params="delay:1.0, duration:1.0" />
<h:outputText style="padding-right:5px" value="<<Hide Source"/>
</a4j:outputPanel>
Modified: trunk/ui/effect/src/main/config/component/effect.xml
===================================================================
--- trunk/ui/effect/src/main/config/component/effect.xml 2007-08-12 23:41:51 UTC (rev 2214)
+++ trunk/ui/effect/src/main/config/component/effect.xml 2007-08-13 03:44:40 UTC (rev 2215)
@@ -45,15 +45,26 @@
<classname>java.lang.String</classname>
<description>
Parameters passed to the effect function.
- Example params="{id:'foo',type:'Fade'}"
+ Example params="{duration:0.2,from:1.0,to:0.1}"
</description>
<defaultvalue>""</defaultvalue>
</property>
+ <property>
+ <name>targetId</name>
+ <classname>java.lang.String</classname>
+ <description>
+ The id of the element the effect apply to. Might be component id
+ or client id of jsf component or html tag. If targetId is not defined
+ the value of the attribute 'for' or the 'targetId' option effect
+ play its role
+ </description>
+ <defaultvalue>""</defaultvalue>
+ </property>
<property el="false" >
<name>event</name>
<classname>java.lang.String</classname>
<description>
- Event of the parent
+ Event on the component or html tag the effect is attached to
</description>
<defaultvalue>""</defaultvalue>
</property>
Modified: trunk/ui/effect/src/main/java/org/richfaces/component/UIEffect.java
===================================================================
--- trunk/ui/effect/src/main/java/org/richfaces/component/UIEffect.java 2007-08-12 23:41:51 UTC (rev 2214)
+++ trunk/ui/effect/src/main/java/org/richfaces/component/UIEffect.java 2007-08-13 03:44:40 UTC (rev 2215)
@@ -21,14 +21,19 @@
package org.richfaces.component;
+import java.util.Iterator;
import org.ajax4jsf.Messages;
import org.ajax4jsf.component.EventValueBinding;
import javax.faces.component.UIComponent;
import javax.faces.component.UIComponentBase;
+import javax.faces.component.NamingContainer;
+import javax.faces.context.FacesContext;
import org.ajax4jsf.component.AjaxSupport;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
+import org.ajax4jsf.renderkit.RendererUtils;
+
/**
* JSF component class
*
@@ -41,6 +46,7 @@
private static final Log log = LogFactory.getLog(UIEffect.class);
+ private static RendererUtils rendererUtils = new RendererUtils();
/**
* @return JavaScript eventString. Rebuild on every call, since
@@ -49,24 +55,38 @@
public String getEventString()
{
StringBuffer buildOnEvent = new StringBuffer();
-/*
- String onsubmit = getOnsubmit();
- // Insert script to call before submit ajax request.
- if (null != onsubmit) {
- buildOnEvent.append(onsubmit).append(";");
- }
- // Due to JSF RI 1.1 bug, clear cached clientId
- setId(getId());
- buildOnEvent.append(AjaxRendererUtils.buildOnEvent(this, getFacesContext(),
- getEvent()));
- String script = buildOnEvent.toString();
-*/
- buildOnEvent.append("Richfaces.processEffect(this,'");
- buildOnEvent.append(getType());
- buildOnEvent.append("',{},'{");
- buildOnEvent.append(getParams());
- buildOnEvent.append("}')");
- return buildOnEvent.toString();
+
+ String targetId=getTargetId();
+ String targetPart = "{}";
+ UIComponent targetComponent=null;
+
+ if (!"".equals(targetId)) {
+ targetComponent=rendererUtils.findComponentFor(FacesContext.getCurrentInstance(),this,targetId);
+ }
+ if (targetComponent!=null) {
+ targetPart = "{targetId:'"+targetComponent.getClientId(FacesContext.getCurrentInstance())+"'}";
+ } else {
+ // it might be html tag id or DOM object
+ targetPart = targetId != ""
+ ? "typeof "+targetId+"=='object'?{targetId:"+targetId+"}:{targetId:$('"+targetId+"')}" : "{}" ;
+ }
+
+ String type=getType();
+ String typePart = type!=""?"{type:'"+type+"'}":"{}";
+
+ String params=getParams();
+ String paramsPart = params!=""?"{"+params+"}":"{}";
+
+
+ buildOnEvent.append("Richfaces.processEffect(Object.extend(Object.extend({targetId:this},"+targetPart+"),"+
+ "Object.extend("+typePart+","+paramsPart+") ) )");
+
+ return buildOnEvent.toString();
+
+//if (typeof '' == 'object') {pm.attachId= '';if (''=='') pm.targetId=''; };
+
+
+
}
public abstract String getEvent();
@@ -79,6 +99,9 @@
public abstract String getType();
public abstract void setType(String value);
+ public abstract String getTargetId();
+ public abstract void setTargetId(String value);
+
public abstract String getParams();
public abstract void setParams(String value);
/**
@@ -113,5 +136,7 @@
if (getFor() == "" && getEvent() !="" ) {
parent.setValueBinding(getEvent(), new EventValueBinding(this));
}
- }
+ }
+
+
}
Modified: trunk/ui/effect/src/main/resources/org/richfaces/renderkit/html/script/processEffect.js
===================================================================
--- trunk/ui/effect/src/main/resources/org/richfaces/renderkit/html/script/processEffect.js 2007-08-12 23:41:51 UTC (rev 2214)
+++ trunk/ui/effect/src/main/resources/org/richfaces/renderkit/html/script/processEffect.js 2007-08-13 03:44:40 UTC (rev 2215)
@@ -2,22 +2,10 @@
window.Richfaces = {};
}
-Richfaces.processEffect = function(cid, etype, aparam, param) {
- var h=Object.extend(param, aparam);
- new Effect[h.type||etype]($(h.id||cid),h);
+Richfaces.processEffect = function(pm) {
+ new Effect[pm.type]($(pm.targetId),pm);
};
Richfaces.effectEventOnOut = function(ename) {
return ename.substr(0,2) == 'on' ? ename.substr(2) : ename;
};
-
-/*
-Richfaces.addEffectObserve= new Function("oid", "oevent","otype","oparams","useCapture",
-"var funcpart='{}';"+
-"var func='Richfaces.processEffect(oid,otype, oparams,'+funcpart+')';"+
-"func='Function('+func+')';"+
-"alert(func);"+
-"Event.observe($(oid),oevent,"+func+",useCapture);");
-*/
-// Function("Richfaces.processEffect('#{forid}','#{type}',{}, '{#{params}}');"),false);
-
Modified: trunk/ui/effect/src/main/templates/effect.jspx
===================================================================
--- trunk/ui/effect/src/main/templates/effect.jspx 2007-08-12 23:41:51 UTC (rev 2214)
+++ trunk/ui/effect/src/main/templates/effect.jspx 2007-08-13 03:44:40 UTC (rev 2215)
@@ -15,25 +15,62 @@
<c:set var="event" value="#{component.attributes['event']}"/>
<c:set var="name" value="#{component.attributes['name']}"/>
<c:set var="type" value="#{component.attributes['type']}"/>
- <c:set var="params" value="#{this:convertParameters(context, component)}"/>
+ <c:set var="targetId" value="#{component.attributes['targetId']}"/>
+ <c:set var="params" value="#{component.attributes['params']}"/>
<h:scripts>new org.ajax4jsf.javascript.PrototypeScript(),scripts/scriptaculous/scriptaculous.js,scripts/scriptaculous/effects.js,/org/richfaces/renderkit/html/script/processEffect.js</h:scripts>
<jsp:scriptlet>
<![CDATA[
String sid = (String) variables.getVariable("for");
- String event = (String) variables.getVariable("event");
-
+ variables.setVariable("attachObj","''");
if (! "".equals(sid)) {
UIComponent forcomp = getUtils().findComponentFor(context, (UIComponent)component,sid);
if (forcomp != null) {
- variables.setVariable("forid",forcomp.getClientId(context));
+ String cid= forcomp.getClientId(context);
+ variables.setVariable("forPart",
+ "{targetId:'"+cid+"',attachId:'"+cid+"'}");
} else {
- // if no corresponded component id, may be it is non-jsf id.
+ // if no corresponded component id, may be it is non-jsf id.
// So, returning the id as is
- variables.setVariable("forid",sid);
+ variables.setVariable("forPart","{targetId:'"+sid+"',attachId:'"+sid+"'}");
+ // it might be the DOM object
+ variables.setVariable("attachObj",sid);
}
+ } else {
+ variables.setVariable("forPart","{}");
}
+ String tid = (String) variables.getVariable("targetId");
+ variables.setVariable("targetObj","''");
+ if (! "".equals(tid)) {
+ UIComponent targetcomp = getUtils().findComponentFor(context, (UIComponent)component,tid);
+ if (targetcomp != null) {
+ variables.setVariable("targetPart","{targetId:'"+targetcomp.getClientId(context)+"'}");
+ } else {
+ // if no corresponded component id, may be it is non-jsf id.
+ // So, returning the id as is
+ variables.setVariable("targetPart","{targetId:'"+tid+"'}");
+ variables.setVariable("targetObj",tid);
+ }
+ } else {
+ variables.setVariable("targetPart","{}");
+ }
+
+ String type = (String) variables.getVariable("type");
+ if (!"".equals(type)) {
+ variables.setVariable("typePart","{type:'"+type+"'}");
+ } else {
+ variables.setVariable("typePart","{}");
+ }
+
+ String params = (String) variables.getVariable("params");
+ if (!"".equals(params)) {
+ variables.setVariable("paramsPart","{"+params+"}");
+ } else {
+ variables.setVariable("paramsPart","{}");
+ }
+
+ String event = (String) variables.getVariable("event");
String name = (String)variables.getVariable("name");
Boolean needsFunction = new Boolean(! "".equals(name) && "".equals(event));
variables.setVariable("needsFunction",needsFunction);
@@ -45,7 +82,7 @@
<c:if test="#{needsFunction}">
<script type="text/javascript" x:passThruWithExclusions="name,type,for">
//<![CDATA[
-#{name} = function () { return Richfaces.processEffect('#{forid}','#{type}',arguments[0]||{}, #{params}); };
+#{name} = function () { return Richfaces.processEffect(Object.extend(Object.extend( Object.extend(#{typePart},#{forPart}), Object.extend (#{targetPart},#{paramsPart})), arguments[0]||{})); };
//]]>
</script>
</c:if>
@@ -53,16 +90,15 @@
<script type="text/javascript" x:passThruWithExclusions="name,type,for">
//<![CDATA[
{
-var pm = #{params};
-
+var pm = Object.extend( Object.extend(#{typePart},#{forPart}), #{targetPart} );
/* pm.id can have a special meaning, let's check */
-pm.id = #{this:convertElementParameter(pmId)};
-
+//pm.id = #{this:convertElementParameter(pmId)};
+if (typeof #{attachObj} == 'object') {pm.attachId= #{attachObj};if (#{targetObj}=='') pm.targetId=#{attachObj}; };
+if (typeof #{targetObj} == 'object') pm.targetId= #{targetObj};
+pm = Object.extend(pm, {#{params}});
var ename = Richfaces.effectEventOnOut('#{event}');
-var obj= #{this:convertElementParameter(forid)};
-var hash = { id: obj, params: pm };
-var bindedFunction = function(event){ return Richfaces.processEffect(this.id,'#{type}',{},this.params); }.bindAsEventListener(hash);
-Event.observe(obj,ename, bindedFunction, pm.useCapture||false);
+var bindedFunction = function(event){ return Richfaces.processEffect(this); }.bindAsEventListener(pm);
+Event.observe(pm.attachId,ename, bindedFunction, pm.useCapture||false);
}
//]]>
</script>
More information about the richfaces-svn-commits
mailing list