Custom Effects

We will first see how to implement the two new effects and then how to register them with tacos. So, let's define two new functions:

            borderOn = function(e){
            	e.style.border='2px solid blue;';
            }
            
            borderOff = function(e){
            	e.style.border='0px solid blue;';
            } 			
		

In the previous code, we are counting on tacos to pass a reference of the current HTML element in our function. Now, let's see how to register these effects with tacos:

            tacos.supportedEffects['borderOn'] = "borderOn(effectElement)";
		tacos.supportedEffects['borderOff'] = "borderOff(effectElement)";			
		

Here, we specify the name of each effect and the function call that will occur when one of those is encountered. The effectElement is a special keyword that tacos will substitute with the current HTML element. There's also another special keyword, the effectArguments, which instructs tacos to call our function with additional parameters - the ones defined in the effects and preEffects parameter (we'll see an example of this later on).
Now, we're ready to use them:

			
        <a href="#" jwcid="@tacos:AjaxDirectLink" listener="listener:empty"
            updateComponents="ognl:{'testData', 'testData2'}"          
            effects="literal:{borderOn:{any:'0'}}"                                    
            preEffects="literal:{borderOff:{any:'0'}}">Refresh</a>
							
		

The only thing worth noticing here is that we have to pass an additional parameter to both effects (it's the '0' but you can put anything there apart from ''), even though we're not using it. This requirement ensures that the generated javascript syntax is correct.

Using arguments in Custom Effects

Now, let's implement the same behaviour, while making use of effectArguments and of a single custom effect. Here's the complete code:

			
            borderSet = function(e, value){
            	try {e.style.border = value;}
				catch (exc) {}
            }
			
			tacos.supportedEffects['borderSet'] = "borderSet(effectElement, effectArguments)";
			
        <a href="#" jwcid="@tacos:AjaxDirectLink" listener="listener:empty"
            updateComponents="ognl:{'testData', 'testData2'}"          
            effects="literal:{borderSet:{any:'&quot;2px solid blue;&quot;'}}"                                    
            preEffects="literal:{borderSet:{any:'&quot;0px solid blue;&quot;'}}">Refresh</a>
					
		

Of course, you're not limited to these simple effects. You're free to add whatever you like - perhaps a more complex dojo effect (by combining many of the ones dojo provides), perhaps use effects provided by other javascript libraries or even add non-visual behavior.