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".
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.
