Bootstrapping Edge compositions with bootstrapCallback

We added a small feature with Adobe Edge preview 6 that makes a big difference if you are trying to combine multiple Edge compositions so that they will work together, or if you are integrating an Edge composition into a larger website framework. In this example, you will learn how to use the AdobeEdge.bootstrapCallback API that the Adobe Edge team added to preview 6, so that you can programmatically register a callback function when users land on HTML pages within your website; in short, this allows you and your applications to access event listeners for Symbol and Timeline events without editing an Edge composition xyz_edgeActions.js file directly.  

How does this work? The Edge preloader now defines the AdobeEdge.bootstrapCallback API, which allows you to register a callback function from the context of your HTML page that will be called when your Edge composition is loaded and ready to play. This callback provides a hook to register event listeners for Symbol and Timeline events, something that was previously only possible from within an Edge composition xyz_edgeActions.js file.

The following looks at an example that plays a series of compositions in sequence. The example ZIP file that you downloaded from the Requirements section contains three "finished" Edge compositions that allow you to focus on editing the wrapper.html file that combines the three compositions.  The compositions that we’ll use are very simple:

• page_a.html
• page_b.html
• page_c.html

Setting up the project

Edge does not support editing multiple compositions in the same file. You still might want to make edits to a composition after integrating it into a larger site. An emerging practice is to edit the compositions separately via a composition-specific HTML files and then combine then in a single wrapper.html file that your site uses to preview the combined work.

You can place the wrapper and each of the pages in the same directory so that they can share resources.

Including the three compositions

First the wrapper.html must include each of the compositions, as shown in the code in Figure 2.

Adding HTML markup for each stage

For each Edge composition, associate a stage DIV with a class name identical to the Edge composition’s ID.

Adding CSS to position three stages

Each Edge composition lives inside a stage DIV element. Without a little help from CSS, the three stages flow and display one after another. The stages also all appear when the page loads. In this example, the code hides the second and third stage until the right time in the sequence, as shown in the code for Figure 4.

Bootstrapping with JavaScript

Since Edge loads using a preloader script, very few JavaScript APIs are reliably available from the wrapper HTML page. The preloader downloads Edge and jQuery libraries dynamically; therefore, the HTML page needs a hard signal that indicates when it is safe to call into jQuery and Edge APIs. Add the following code to establish callback -- in other words, indicate -- when it is safe for your page to call jQuery and Edge APIs.

Coordinating multiple compositions

Your bootstrap function coordinates three compositions. As each composition loads and becomes ready, each composition calls the callback you’ve registered. Coordinate the compositions by keeping track of loading using the loadedComps variable.

Registering Edge-specific callbacks

The Edge composition is ready when the the Edge runtime issues the bootstrap callback. You can safely bind to Edge callback APIs. You can use the same syntax here as is in the xyz_edgeActions.js file. The following code listens for the timeline to complete. When one timeline completes, it hides the related composition and then shows and plays the next one in the sequence.

It is pretty simple!

Here is the finished result. (This finished result is more for you to inspect and see the functionality, rather than for your viewing pleasure.)

There are a host of great resources collected on the Adobe Edge website and the on the Adobe team blogs. If you require help or have suggestions for the Edge team, you can find the core engineering and product management team on the Adobe Edge user forum.