sourceforge > tacos
 
 

Effects and Popups

There are many tacos components ( AjaxDirectLink, AjaxSubmit, AjaxForm, AjaxLinkSubmit and AjaxEventSubmit ) that accept the effects, preEffects and popup parameters.

Effects

Specifies a list of effects to be applied to the returned response, being identified by one of three criteria:

  • Component ID - The unique id of the component
  • Element ID - The unique id of the html element
  • Any keyword - Effect will be applied to all response blocks, unless a specific effect has been specified for a particular component/element id.

All of the effects come from the dojo.fx dojo package. The parameter string is specified in the form of a javascript structure and its general structure is: {[effect name]:{[comp/elm id]:[parameters]}}

The currently available effects are:

NameParameters
highlight {[comp/elm id]:'[r,g,b],[delay in millis], [duration in millis]'}
  • Rgb is the color to highlight the area with
  • Delay is the number of milliseconds to wait before starting the effect.
  • Duration is how long the effect should last.
fadeshow {[comp/elm id]:'[duration in millis]'}
  • Duration is how long the effect should last.
fadehide {[comp/elm id]:'[duration in millis]'}
  • Duration is how long the effect should last.
fadein {[comp/elm id]:'[duration in millis]'}
  • Duration is how long the effect should last.
fadeout {[comp/elm id]:'[duration in millis]'}
  • Duration is how long the effect should last.
fade
Warning
Removed in dojo 0.3.1 - use fadein or fadeout
 {[comp/elm id]:'[duration in millis],[oppacityFrom],[oppacityTo]'}
  • Duration is how long the effect should last.
  • OppacityFrom is the oppacity that the element has when the effect starts.
  • OppacityTo is the oppacity that the element will have when the effect ends.
wipein {[comp/elm id]:'[duration]'}
  • Duration is how long the effect should last.
wipeout {[comp/elm id]:'[duration]'}
  • Duration is how long the effect should last.
explode {[comp/elm id]:'[nodeIdFrom], [nodeIdTo], [duration]'}
  • NodeIdFrom is used to define the initial position of the affected element.
  • NodeIdTo is used to define the final position of the affected element.
  • Duration is how long the effect should last.
implode {[comp/elm id]:'[nodeIdFrom], [nodeIdTo], [duration]'}
  • NodeIdFrom is used to define the initial position of the affected element.
  • NodeIdTo is used to define the final position of the affected element.
  • Duration is how long the effect should last.
slideto {[comp/elm id]:'[endCoords], [duration]'}
  • EndCoords are the coordinates to move the element to.
  • Duration is how long the effect should last.
slideby {[comp/elm id]:'[coords], [duration]'}
  • Coords are the relative coordinates by which to move the element.
  • Duration is how long the effect should last.
slide
Warning
Removed in dojo 0.3.1 - use slideto or slideby
 {[comp/elm id]:'[duration], [startCoords], [endCoords]'}
  • Duration is how long the effect should last.
  • StartCoords are the coordinates from where to move the element.
  • EndCoords are the coordinates to move the element to.

Example usage

				  
        <binding name="effects">
			template:{highlight:{
					  selectedCountries:'[255,255,184], 500, 500',
					  '${currItem}':'[255,255,184], 500, 500'
					  }}					  
        </binding>

PreEffects

Specifies a list of effects to be applied on the given elements before the ajax request is triggered. The syntax and the available effects are the same as the ones described on the previous section.

Note
The 'any' keyword can also be used with preEffects but it now has a slightly different meaning. In this case, it triggers the specified effect for all elements declared in the updateComponents parameter (unless a specific effect has already been specified for a particular component id).
Warning
Some effects and preEffects do NOT mix well together.
For instance, if one tries a fadehide preEffect followed by a fadeshow effect then only the fadehide will get executed. This happens because fadehide fades out an element and then completely removes it from the document tree. In this case, the solution is to do a fade from opacity 1 to 0 instead of a fadehide.
Warning
By default, dojo's effects for a single element are NOT serialized. They are all executed at the same time. So, it is possible (if the ajax request-response is fast enough ) for an effect to be started for an element before its preEffect has finished. This will usually result in flickering (the effects are competing one-another). The current proposed solution to this is to have a small duration for preEffects and a bigger for effects.

Popup

If specified, the updated content will be shown in a floating pane. This property defines a list of key-value parameters, some of which are used by dojo's FloatingPane and some by Tacos.

Dojo's FloatingPane Parameters

Name Description
title The title of the widget.
widgetId The unique id of the widget.
constrainToContainer Specifies if the widget is constrained to it's container.
toggle Sets the effect when showing and hiding the widget. Use one of: plain, fade, explode.
resizable if true, the widget is resizable.

Tacos used Parameters

Name Description
persistenceWidgetPosition If true, the widget's left, top, width, height will be stored in a cookie, and be loaded on next usage.
contentNodeId The updated component will be displayed in this node.
style Sets the style of the widget.
class Sets the class of the widget.

Example usage

                
        <binding name="popup">
            literal:{
            title:"Countries",
            widgetId:"selectCountryAreaWID",
            constrainToContainer:true,
            toggle:'fade',
            hasShadow:true,
            resizable:true,
            persistenceWidgetPosition: false,
            contentNodeId:'selectCountryArea',
            style:'width: 360px; height: 480px; left: 100px; top: 100px'
            }
        </binding>