[richfaces-svn-commits] JBoss Rich Faces SVN: r2215 - in trunk: samples/richfaces-demo/src/main/webapp/richfaces/effect and 5 other directories.

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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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="&lt;&lt;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>