A1. Getting Started: Hello Dojo 1. Hellodojo Style: Style.Css
Total Page:16
File Type:pdf, Size:1020Kb
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> <!-- load Dojo --> <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> <!-- load dojo and provide config via data attribute --> <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> <!-- load dojo and provide config via data attribute --> <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> <!-- load dojo and provide config via data attribute --> <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">