Loading Dynamic HTML Content Using the Dijit ContentPane | 2

Loading Dynamic HTML Content Using the Dijit ContentPane [con't]

A More Complex Dijit ContentPane Example

We can use the ContentPane widget's dynamic content support to display a series of HTML documents. To give the exercise some realism, I chose to integrate the StockInfo widget that I created for my Using the Dojo Framework to Build Custom HTML Widgets article into another page. It displays financial information on common commodities such as gold and crude oil, much like you would see on a site like the Yahoo! Finance. Widget components include a small graph as well as a list of details relating to that commodity. When we're done the page will iterate through four commodities.

This example makes a strong case for proper separation of style (CSS), content (HTML), and behavioral components (Scripts) in that all of the StockInfo widgets share all the same components except for the tag attributes that set its unique values. The best approach in my books is to include all of the external file references in the containing HTML page. That leaves only the widget's HTML markup in the file:

The following line will import the StockInfo widget's stylesheet into the main document:

The StockInfo widget was designed to work with a local copy of Dojo so we should replace the script tags with those from the widget's HTML:

We can also move the code into our main script block so that we can effectuate any modifications to the widget in one place:

Both the StockInfo HTML files and current index are stored in variables to make it easy to iterate through them:

There is no need for a loop because the iterating is event based. In the onDownloadEnd() event, a fadeIn is applied to the first widget instance. The onEnd() event is fired when the animation has completed. At that point, a fadeOut() occurs after a delay of eight seconds. In its onEnd() event, the contentPane's href is set to the next widget's HTML file. Closures are used to bind the contentPane to the inner functions, although we could just as easily fetch it when needed using dijit.byId():

<div id="contentPane" dojoType="dijit.layout.ContentPane" href="GoldInfo.html">
     <script type="dojo/connect" event="onDownloadEnd">
        dojo.style(this.id, "opacity", "0");
        (function(contentPane) {
            dojo.fadeIn({
                node: contentPane.id,
                duration: 2000,
                onEnd: function() {
                    dojo.fadeOut({
                          node: contentPane.id,
                          duration: 1500,
                          delay: 8000,
                          onEnd: function() {
                                  dojo.style(contentPane.id, "opacity", "100");
                                  contentPane.set("href", (function() {
                                      if (++index == stockArray.length) index = 0;
                                      return stockArray[index];
                                  })());
                          }
                    }).play();
                }
            }).play();
        })(this);
    </script>
</div>

Download the source files here, if you'd like to try it out (note that they do not include the Dojo libraries!).

Here's more information on some of today's topics:

Have a suggestion for an article topic? Do you have a product or service that you'd like reviewed? Email it to Rob .

resides in Ottawa, Canada, and is the founder of GravelleConsulting.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses. Rob to receive a free estimate on your software project. Should you hire Rob and his firm, you'll receive 15% off for mentioning that you heard about it here!

In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His former band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92). MP3s of his covers project are available from iTunes and other digital music sites.

Rob uses and recommends MochaHost, which provides Web Hosting at $3.10 per month, 2 LifeTime Free Domains, and 6 Months Free!

Original: April 23, 2010

[prev]

Loading Dynamic HTML Content Using the Dijit ContentPane | 2

Loading Dynamic HTML Content Using the Dijit ContentPane [con't]

A More Complex Dijit ContentPane Example

Find a programming school near you