dojo and Notes: Article 5 - dojo.fx -Animation

by Bernd Hort,
assono GmbH, Standort Hamburg,

dojo-Logo In the last article I introduced dojo.query(). In this one we will actually use dojo.query() also. But this time in combination of the dojo.fx package, which brings functions to animate elements in a web page. Specially in dynamic web applications, where elements appear only when they are needed or after the have been loaded, animations helps the user to notice the change. Instead of making an element just visible in a blink it is better to smoothly fade it in.

Actually we start in our sample application with some elements that will disappear, namely the session descriptions. We do so because in the next article we want them to appear at the push of a button.

Lets start with a look at the code.//Loads fx (animation) package
dojo.require("dojo.fx");

dojo.addOnLoad(function(){        
 // every odd div in the page with the class "session" assigned
 dojo.query(".session:nth-child(odd)").addClass("oddSession");
 // wipeOut all descriptions
 var descriptionsList = dojo.query(".sessionDescription");
 descriptionsList.forEach(function(currentNode, index, array){
   dojo.fx.wipeOut({node:currentNode}).play();
       });
});
As mentioned above, we will need the dojo.fx package. The command dojo.require ("dojo.fx") loads the package. These dependencies are automatically determined and if necessary additional packages also loaded. At this point a little note to the loading of packages. Although it is a good idea to load only the parts of dojo, which are really needed, this approach has one drawback. It loads a lot of small files. From a performance point of view it would be better to just load one file. Tim Tripcony has to write a blog entry about this: "I still have one concern about Dojo". The problem was recognized by the dojo developers too. The dojo Build System generates from a configuration file an individual version of dojo in one file that contains only the necessary elements. If performance is an issue, this would be a approach.

As usual, we use the dojo.addOnLoad function to run code after loading the web page. First, we need all the session descriptions.var descriptionsList = dojo.query(".sessionDescription");Using dojo.query("sessionDescription") all DOM nodes that use the CSS class to be collected in a dojo.NodeList and assigned to the variable descriptionsList.

The dojo.NodeList object has a method forEach, which expects as parameter a function that is then applied to each item in the list.descriptionsList.forEach(function(currentNode, index, array){
 dojo.fx.wipeOut({node:currentNode}).play();
});With dojo.fx.wipeOut a new animation object of type "WipeOut" is created. "WipeOut" means slowly shrinking of the element until it complete disappears. The constructor expects a configuration object with the details for the animation. This object is generated directly with {node:currentNode}. Where "node" is the property name and currentNode is the current DOM node from the forEach function. In this case it is the simplest form of a configuration object. You may select from among other things, the duration of the animation or the acceleration function. The method play () takes the animation directly.

The result can be viewed here. It should be pointed out once again that the sample database can be downloaded. For each step that I present here, there is a special form and a associated JavaScript library. For this article, it is the form "webSpeedAgendaing-Step 3 | SpeedAgendaing-3" and "SpeedAgendaing-Step3.js".
zip.gif
dojo-Sample.zip
(433 KB)
In the next article of our sample application is extended to the session description to be made in each case, clicking on the title visible.

Technical article IBM Domino JavaScript Development

Sie haben Fragen zu diesem Artikel? Kontaktieren Sie uns gerne: blog@assono.de

Do you want an individual solution? Contact us

More interesting entries

Any questions? Contact us.

If you want to know more about our offers, you can contact us at any time. There are several ways to contact us for a non-binding first consultation.

We don’t sell your data. 100% guaranteed. See: Privacy Policy
assono GmbH

Location Kiel (headquarters)
assono GmbH
Lise-Meitner-Straße 1–7
24223 Schwentinental

Location Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Phone numbers:
Human resources department: +49 4307 900 407
Marketing department: +49 4307 900 402

E-Mail adresses:
contact@assono.de
bewerbung@assono.de