Dojo in XPages 12 – Animating DOM Elements with Simple Actions

One of the great features of Dojo is that it provides the ability to animate DOM elements. The easiest way to make use of that functionality in an XPages application is the built-in simple actions. In this post, we’ll look at the actions that are available and how to use them.

Dojo in XPages Series

Dojo in XPages — All Blog Posts

Animation Simple Actions

The easiest way to use common Dojo animations is to use the simple actions that are part of the Extension Library (and included with Notes 8.5.3 Upgrade Pack 1 and built into Notes 9).

To find them, select a component to which you can add an event handler. On the Events view, click the Client tab, ensure that Simple Actions is selected and click Add Action...

Change the Category drop-down to Dojo Effects and you’ll see a list of options.

Dojo_12a

  • Dojo Animation – Animates one or more attributes
  • Dojo Fade In Effect – Fades in a hidden element
  • Dojo Fade Out Effect – Fades out an element
  • Dojo Slide To Effect – Slides an element to a specific position
  • Dojo Wipe In Effect – Fades in a hidden element with a wipe in effect
  • Dojo Wipe Out Effect – Fades out an element with a wipe effect

Fading

All you have to do to use the fade and wipe actions is define the target node. You can choose an XPages component or define a hard-coded or computed client-side element ID.

For a page with a div that has an id of “mydiv”, these simple actions will fade the div out and back in:

Dojo_12b_FadeOut

Dojo_12c_FadeIn

The fade effects steadily change the opacity of the element from 1 to 0 and vice versa.

The duration specifies how long the animation will take to complete (in milliseconds). The default is 350 milliseconds. The easing property can take a javascript function that defines the rate of the animation. You can cause it to speed up or slow down or modulate.

Wiping

Similarly to the Fade animations, you can define the target node and the Wipe actions will work.

However, because this animates the height, be careful of using this with div tags. Once you wipe a div out, its height attribute is changed to auto, rather than its originally-defined. When you try to execute the Wipe In effect, there’s no height defined for the div, so it doesn’t display anything (aside from a small line during the animation, which goes away)! This appears to be the case both when the div is styled inline or with a class, using CSS. (The same issue does not seem to apply for other elements.)

SlideTo

The SlideTo animation moves an element on the page to a specific position, as defined by the top and left properties.

Dojo_12d_SlideTo

You can change the duration to speed it up or slow it down. You can also define an easing function to modify whether it speeds up or slows down.

Custom Animation

Aside from the built-in effects mentioned above, you can use the Dojo Animation action to animate other properties.

In addition to specifying the target element, you also define one or more properties to animate and the end state of each property. (It will start with the element’s current attributes if you don’t define start parameters.)

Here’s an example that will change the div color from red to blue and change its height from 100px to 200px:

Dojo_12e_Custom

NOTE: As mentioned in other recent posts, Dojo attribute names are very similar to CSS attribute names, but they do not allow hyphens. The background-color css attribute is defined as backgroundColor for this animation.

You can set the repeat property to perform the animation mutiple times, although it appears that you have to define the starting values if you do that. And the element ends up in its original state, rather than in the defined end state.

You can also set the frame rate and animation duration. You can also set a delay before the animation begins.

Up Next

In the next post, we’ll look at the dojo.fx module and see how to generate these animations with client-side code. This will allow you to further customize the animations and also to attach them to non-XPages elements.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: