Adding dojo.E

> > >

Now that we have made sure that Dojo is running properly, we can go ahead and create our first dojo.E page.

While we have previously talked about dojo.E Markup and dojo.E Runtime and their differences, the underlying mechanism to include any type of dojo.E markup in your pages is the same. You can either use script tags (declarative approach) or you can use HTTP requests (programmatic approach).

For now, we will focus on the declarative approach. If you want to learn more about the programmatic approach, it will be covered later here.

The script tag and dojo.E

As previously mentioned, you can include dojo.E in your pages by using script tags. Set the script type attribute as text/xml and the dojoType attribute as dojoe.XmlScript so the Dojo parser can recognize it as a Dojo object and load it. So your tag should look something like this:

 
<script type="text/xml" dojotype="dojoe.XmlScript" xmldocument="[object]"></script>

The script tag can embed the dojo.E markup directly as shown in the following example or it can have an src attribute pointing to the URL containing the markup. Each approach should work; however, use the src attribute when you have dojo.E code that is shared between different pages, this makes it much easier to maintain.

You can try this example which shows how to embed a very simple piece of dojo.E markup in an HTML page.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
          "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
		<title>Test dojo.E Markup</title> 
		<script type="text/javascript" src="js/dojo/dojo/dojo.js" 
				djConfig="isDebug: true, parseOnLoad: true"></script> 
		<script type="text/javascript"> 
			dojo.require("dojoe.dojoe"); 
		</script> 
	</head> 
	<body style="padding: 50px;"> 
		<h1 class="testTitle">Test dojo.E Markup</h1> 
		If this page executes succesfully, a Lorem Ipsum paragraph should follow. 
		<script type="text/xml" dojoType="dojoe.XmlScript"> 
			<ui> 
			<p> 
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
			sed magna aliqua.  Ut enim ad minim veniam, quis nostrud 
			exercitation consequat. Duis aute irure dolor in 
			reprehenderit in voluptate Excepteur sint 
			occaecat cupidatat non proident, sunt in culpa. 
			</p> 
			</ui> 
		</script> 
	</body> 
</html>

This next example, shows you how to execute programmatically a simple piece of dojo.E Runtime inserted declaratively. Note that the script tag pulls the dojo.E markup from a URL.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
	<head> 
		<title>Test dojo.E Runtime</title> 
		<script type="text/javascript" src="dojo/dojo.js" 
			djConfig="isDebug: true, parseOnLoad: true"></script> 
		<script type="text/javascript"> 
			dojo.require("dijit.form.Button"); 
			dojo.require("dojoe.dojoe"); 
			dojo.addOnLoad(function(){ 
				dojoe.macros.testMacro.execute(); 
			}); 
		</script> 
	</head> 
	<body> 
		<h1 class="testTitle">Test dojo.E: Simple Macro</h1> 
		<p id='testDescription'> If this page executes succesfully, 
		a paragraph indicating success should follow. </p> 
		<script type="text/xml" dojoType="dojoe.XmlScript" 
				src="testMacro.xml"></script> 
	</body> 
</html>

And here is the contents of the testMacro.xml referenced by the script tag.

 
<declarations> 
	<dojoe.Macro id="testMacro"> 
		<dojoe.Xmodify> 
			<insert-after query="p[id='testDescription']"> 
				This test seems to work! 
			</insert-after> 
		</dojoe.Xmodify> 
	</dojoe.Macro> 
</declarations>

Note: This file should be located at the same level as the HTML file. Correct the src attribute of the script tag in your HTML if you want to place it somewhere else. In most applications this file will be generated dynamically by the backend server.