Wednesday, July 1, 2009

Adding a CEA widget to a page already using Dojo

The Dojo Toolkit, starting in version 1.1, offers the ability to use multiple versions of Dojo in the same page. This feature comes in handy when users want to experiment with a new version of Dojo or when using a custom namespaced library like the one shipped with the CEA Feature Pack. For a detailed description of how using multiple Dojo versions works please see this dojotoolkit article.

To enable users to utilize a previous version of Dojo, we provide a custom namespaced library called ceadojo and all of the components you need to embed the CEA widgets with their own dojo version. This custom namespaced library has baked-in a djConfig.scopeMap to map dojo, dijit and dojox to ceadojo, ceadijit and ceadojox respectively. This essentially allows a user to embed the CEA widgets and keep them isolated from an existing version of Dojo running on the page.

In the last two posts I covered how to embed the CEA widgets on a page that is not already using a Dojo Toolkit. This next example shows the updated steps to import ceadojo when your application is already using a Dojo Toolkit.

Here is an example of the existing script tag to include your version of Dojo for the page.
<script type="text/javascript" src="./dojo/dojo.js"
djconfig="parseOnLoad: true, isDebug: false"></script>
Widgets using this toolkit will use "dojoType" to define a widget. Typically this is the way that pages using Dojo instantiate a widget, so when embedding a CEA widget no changes are necessary to the widgets already placed on the page.

The next script tag is used to redefine djConfig to allow proper loading of the ceadojo NLS files.
<script type="text/javascript">
var djConfig = { baseUrl:"./ceadojo/dojo/" };
</script>
The final step is to import the ceadojo toolkit for use on the page. The CEA widgets are defined using "ceaDojoType".
<script type="text/javascript" src="./ceadojo/dojo/dojo.js"></script>
The HTML for importing the CSS and placing the widget on the page remain the same as the exanples in the last two posts.


0 comments:

Post a Comment