A1. Getting Started: Hello Dojo 1. Hellodojo Style: Style.Css

A1. Getting Started: Hello Dojo 1. HelloDojo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial: Hello Dojo!</title> </head> <body> <h1 id="greeting">Hello</h1>  <script src="/WebApp/dojo-release-1.10.4/dojo/dojo.js" data-dojo-config="async: true"></script> <script> require([ 'dojo/dom', 'dojo/dom-construct' ], function (dom, domConstruct) { var greetingNode = dom.byId('greeting'); domConstruct.place('<em> Dojo!</em>', greetingNode); }); </script> </body> </html> Style: style.css body { padding:2em; } h1 { margin-bottom:2em; } .add-borders ul, .add-borders li, .add-borders div, .add-borders a { padding: 2px; } .add-borders ul { border: 1px solid red; } .add-borders li { border: 1px solid blue; } .add-borders div { border: 1px solid green; 1 } .add-borders a { border: 1px solid black; } .bold { font-weight: bold; } .italic { font-style: italic; } .highlight { background-color: yellow; } .red { background-color: red; } .blue { background-color: blue; } A2. Getting Started: Configuring Dojo with dojoConfig 1. dojoConfig Programmatic <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: dojoConfig</title> <link rel="stylesheet" href="../../_common/demo.css" media="screen" type="text/css"> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen"> <style> #dialog { min-width: 200px; } </style> </head> <body class="claro"> <h1>Demo: dojo/_base/Config</h1> <div id="dialog" data-dojo-type="dijit/Dialog" data-dojo-props="title: 'dojo/_base/_config'"></div> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script> <script> require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog", "dojo/domReady!"], function(registry, parser, JSON, config) { parser.parse(); // Find the dialog var dialog = registry.byId("dialog"); // Set the content equal to what dojo.config is dialog.set("content", '<pre>' + JSON.stringify(config, null, '\t') + '</pre>'); // Show the dialog 2 dialog.show(); }); </script> </body> </html> 2. dojoConfig Declarative <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: data-dojo-config</title> <link rel="stylesheet" href="../../_common/demo.css" media="screen" type="text/css"> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen"> <style> #dialog { min-width: 200px; } </style> </head> <body class="claro"> <h1>Demo: data-dojo-config</h1> <div id="dialog" data-dojo-type="dijit/Dialog" data-dojo-props="title: 'data-dojo-config / dojo.config'"></div> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script> <script> // Require the registry, parser, Dialog, and wait for domReady require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog", "dojo/domReady!"] , function(registry, parser, JSON, config) { parser.parse(); // Find the dialog var dialog = registry.byId("dialog"); // Set the content equal to what dojo/_base/config is dialog.set("content", '<pre>' + JSON.stringify(config, null, '\t') + '</pre>'); // Show the dialog dialog.show(); }); </script> </body> </html> 3. Loader Configuration <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: dojo.config.baseUrl</title> <link rel="stylesheet" href="style.css" media="screen"> 3 <link rel="stylesheet" href="../../_common/demo.css" media="screen" type="text/css"> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen"> <style> #dialog { min-width: 200px; } </style> </head> <body class="claro"> <h1>Demo: dojo/_base/config.baseUrl</h1> <div id="dialog" data-dojo-type="demo/AuthoredDialog" data-dojo-props="title: 'dojo/_base/config.baseUrl demo', authorName: 'Sam Foster'"> </div> <script> var dojoConfig = { has: { "dojo-firebug": true, "dojo-debug-messages": true }, packages: [ { name: "demo", location: "/documentation/tutorials/1.10/dojo_config/demo" } ] }; </script> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script> <script> require(["demo/AuthoredDialog", "dijit/registry", "dojo/json", "dojo/_base/config", "dojo/parser", "dojo/domReady!"], function(AuthoredDialog, registry, JSON, config, parser) { parser.parse(); var dialog = registry.byId("dialog"); dialog.set("content", "<pre>" + JSON.stringify(config, null, "\t") + "</pre>"); dialog.show(); }); </script> </body> </html> 4. CustomProperties <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: Application Config</title> <link rel="stylesheet" href="../../_common/demo.css" media="screen" type="text/css"> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen"> <style> #dialog { min-width: 200px; } 4 </style> </head> <body class="claro"> <h1>Demo: Application Config</h1> <script> dojoConfig = { has: { "dojo-firebug": true, "dojo-debug-messages": true }, app: { userName: "Anonymous" } }; </script> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script> <script> require(["dijit/Dialog", "dijit/registry", "dojo/_base/config", "dojo/_base/lang", "dojo/json", "dojo/io-query", "dojo/domReady!"], function(Dialog, registry, config, lang, JSON, ioQuery) { // pull configuration from the query string // and mix it into our app config var queryParams = ioQuery.queryToObject(location.search.substring(1)); lang.mixin(config.app, queryParams); // Create a dialog var dialog = new Dialog({ title: 'Welcome back ' + config.app.userName, content: '<pre>' + JSON.stringify(config, null, '\t') + '</pre>' }); // Draw on the app config to put up a personalized message dialog.show(); }); </script> </body> </html> B1. DOM Basics: Dojo DOM Functions 1. Retrieval <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: byId</title> <link rel="stylesheet" href="../../_common/demo.css" media="screen"> 5 </head> <body> <h1>Demo: byId</h1> <ul id="list"> <li id="one">One</li> <li id="two">Two</li> <li id="three">Three</li> <li id="four">Four</li> <li id="five">Five</li> </ul>  <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script> <script> // Require the DOM resource require(["dojo/dom", "dojo/domReady!"], function(dom) { function setText(node, text){ node = dom.byId(node); node.innerHTML = text; } var one = dom.byId("one"); setText(one, "One has been set"); setText("two", "Two has been set as well"); }); </script> </body> </html> 2. Creation <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: create</title> <link rel="stylesheet" href="../../_common/demo.css" media="screen"> </head> <body> <h1>Demo: create</h1> <ul id="list"> <li id="one">One</li> <li id="two">Two</li> <li id="three">Three</li> <li id="four">Four</li> <li id="five">Five</li> 6 </ul>  <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script> <script> require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"], function(dom, domConstruct) { var list = dom.byId("list"), three = dom.byId("three"); domConstruct.create("li", { innerHTML: "Six" }, list); domConstruct.create("li", { innerHTML: "Seven", className: "seven", style: { fontWeight: "bold" } }, list); domConstruct.create("li", { innerHTML: "Three and a half" }, three, "after"); }); </script> </body> </html> 3. Placement <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: place</title> <link rel="stylesheet" href="../../_common/demo.css" media="screen"> <style> #three { background:#e3e3e3; } </style> </head> <body> <h1>Demo: place</h1> <h4>Move "Three" to the following position</h4> <button id="moveFirst">The first item</button> <button id="moveBeforeTwo">Before Two</button> <button id="moveAfterFour">After Four</button> 7 <button id="moveLast">The last item</button> <ul id="list"> <li id="one">One</li> <li id="two">Two</li> <li id="three">Three</li> <li id="four">Four</li> <li id="five">Five</li> </ul>  <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script> <script> require(["dojo/dom", "dojo/dom-construct", "dojo/on", "dojo/domReady!"], function(dom, domConstruct, on) { function moveFirst(){ var list = dom.byId("list"), three = dom.byId("three"); domConstruct.place(three, list, "first"); } function moveBeforeTwo(){ var two = dom.byId("two"), three = dom.byId("three"); domConstruct.place(three, two, "before"); } function moveAfterFour(){ var four = dom.byId("four"), three = dom.byId("three"); domConstruct.place(three, four, "after"); } function moveLast(){ var list = dom.byId("list"), three = dom.byId("three"); domConstruct.place(three, list); } // Connect the buttons on(dom.byId("moveFirst"), "click", moveFirst); on(dom.byId("moveBeforeTwo"), "click", moveBeforeTwo); on(dom.byId("moveAfterFour"), "click", moveAfterFour); on(dom.byId("moveLast"), "click", moveLast); }); </script> </body> </html> 4. Destruction 8 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8">

A1. Getting Started: Hello Dojo 1. Hellodojo Style: Style.Css

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support