git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/dtl/tests/demo_Templated_Jaxer.html

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