Graphics Reference
In-Depth Information
"libs/jquery-ui.min.js",
"libs/jquery-ui.css"
],
callback: function(){
$( "#datepicker" ).datepicker();
}
});
The result in the browser looks as follows: (1) is the conventional text entry
field, and (2) is how it looks with the jQuery UI extension.
Figure 7.4
The date picker jQuery UI component in
the Edge Animate composition
7.2 Wiring Multiple Compositions on One Page
Of course, you can also use several compositions in one HTML document. To
do this, make sure that the composition files can be correctly accessed by the
HTML document, and that the blocks of script and the Stage DIV containers are
placed in the body segment of the HTML document. This can be done with
any number of components. To enable communication between the individual
compositions, the Edge Animate runtime provides a special bootstrap method.
This method is necessary because, for example, the Timeline control of a compo-
sition will require a reference to it. Since the compositions are loaded asynchro-
nously, there is no guarantee, for example, that in a
compositionReady
event of
a composition, the loading of another composition has already been completed.
The following example illustrates the use of the bootstrap method using two
compositions. The red composition, CompositionA, runs a simple animation on
the main Timeline, but is not automatically played. The second composition, in
green, contains a simple button that, when clicked, starts the animation in the
red composition.
