summaryrefslogtreecommitdiff
path: root/includes/js/dojox/dtl/tests/demo_Templated_Jaxer.html
blob: 29e5470eb47b6a2c90459a0a2894de0d04d8a7ec (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<html>
	<head>
			<title>Demo using dojox.dtl._Templated</title>
		<script runat="server">
			djConfig = {baseUrl:"/dojo/",usePlainJson: true, parseOnLoad: true};
		</script>
	    <script runat="server" type="text/javascript" src="../../../dojo/dojo.js"></script>
	    <script runat="server" type="text/javascript">
	    		dojo.require("dojo.jaxer");
	    		dojo.require("dijit.dijit");
					dojo.require("dojox.dtl._Templated");
	        dojo.require("dojo.parser");
					
					dojo.declare("Fruit", [dijit._Widget, dojox.dtl._Templated], {
						oldRepl: "Fruit: ",
						_dijitTemplateCompat: true,
						items: ["apple", "banana", "orange"],
						keyUp: function(e){
							if(e.keyCode == dojo.keys.ENTER){
								var i = dojo.indexOf(this.items, e.target.value);
								if(i != -1){
									this.items.splice(i, 1);
								}else{
									this.items.push(e.target.value);
								}
								e.target.value = "";
								this.render();
								dojo.query("input", this.domNode).forEach("item.focus();");
							}
						},
						templateString: '<div><input dojoAttachEvent="onkeyup: keyUp"><ul>{% for item in items %}<li>${oldRepl} {{ item }}</li>{% endfor %}</ul></div>'
					});
	    </script>
			<body>
				<h1>Using Dojo's Django Template language on Jaxer</h1>
				<p>
					Aptana's Jaxer is server side JavaScript (SSJS) server. With some modifications to
					a web page, Dojo can be run on the server. With Dojo running on the server, you can
					utilize the Dojo's Django Template library rendering engine to do templating within
					Jaxer. The latest build of Dojo includes some patches to properly work with Jaxer,
					so you need a build of Dojo later than 2/18/08 to work with Jaxer. Next, the
					following modifications to your page are needed to run Jaxer:
					<ul>
						<li>
							You must explicitly set the base url of the Dojo library. Jaxer does not provide
							the ability for Dojo to auto-detect the base url as it can in other environments.
							Therefore you must declare the base url with the djConfig global variable:
							<pre>
	&lt;script runat="server">
		djConfig = {baseUrl:"/dojo/", // use the base path of dojo here
					usePlainJson: true, parseOnLoad: true};
	&lt;/script>
							</pre>
						</li>
						<li>
							Next, you must add the runat attribute with a value of "server" to all of the script
							tags that you want executed on the server. Your script tags should look like:
							<pre>
	&lt;script runat="server" type="text/javascript" src="../../../dojo/dojo.js">&lt;/script>
							</pre>
						</li>
						<li>
							Last, you must dojo.require("dojo.jaxer") with a script tag. This should immediately 
							follow the declaration of dojo.js:
							<pre>
	&lt;script runat="server" type="text/javascript" src="../../../dojo/dojo.js">&lt;/script>
	&lt;script runat="server" type="text/javascript">dojo.require("dojo.jaxer");&lt;/script>
							</pre>
						</li>
					</ul>
				</p>
				<p>
					Once this is done, Dojo should load in Jaxer, and you can utilize the library capabilities of
					Dojo. In particular, you can now use DTL renderer as you would on
					the browser. If you are running this in Jaxer, below should be a working demonstration of
					a template that is rendered on the server.
				</p>
				<div dojoType="Fruit"></div>
				<p>
					It is important to note that Jaxer is not capable of transferring the programmaticaly set
					event handlers for widgets, it can only send the static HTML to the browser. This means
					you can use DTL as a templating engine to create HTML on the server, but Dojo client side widgets
					are still necessary if you want to use interactive widgets on the browser.
				</p>
			</body>
	</head>
</html>