87 lines
3.7 KiB
HTML
87 lines
3.7 KiB
HTML
|
<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>
|
||
|
|
<script runat="server">
|
||
|
|
djConfig = {baseUrl:"/dojo/", // use the base path of dojo here
|
||
|
|
usePlainJson: true, parseOnLoad: true};
|
||
|
|
</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>
|
||
|
|
<script runat="server" type="text/javascript" src="../../../dojo/dojo.js"></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>
|
||
|
|
<script runat="server" type="text/javascript" src="../../../dojo/dojo.js"></script>
|
||
|
|
<script runat="server" type="text/javascript">dojo.require("dojo.jaxer");</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>
|