<div style="width:540px;"> <h1 style="text-align: center;">Programmatic Example</h1> <div style="width:50%;float: left;"> <h1>dijit/form/Select</h1> <label for="stateSelect">State:</label> <div id="stateSelect"></div> </div> <div style="width:50%;float: right;"><h1>Values:</h1> <div><strong>value:</strong> <span id="value"></span></div> <div><strong>displayedValue:</strong> <span id="displayedValue"></span></div> <h5>*Note how the submitted value will be the identity of the store item</h5> </div> </div> <?php Utils::printDojoScript("isDebug: true, async: true"); ?> <script> require(["dijit/form/Select", "dojo/store/Memory", "dojo/json", "dojo/text!./states.json", "dojo/ready"], function(Select, Memory, json, states, ready) { ready(function(){ // create store instance referencing data from states.json var stateStore = new Memory({ idProperty: "abbreviation", data: json.parse(states) }); // create Select widget, populating its options from the store
<link rel="stylesheet" href="contacts.css"> <?php include_once $_SERVER['DOCUMENT_ROOT'] . implode('/', array_slice(explode('/', dirname($_SERVER['PHP_SELF'])), 0, 4)) . '/Utils.php'; ?> <script src="/js/dojo/1.9/dojox/mobile/deviceTheme.js"></script> </head> <body> <script> // See the using Custom Modules with a CDN Tutorial for an explination of how // on how var dojoConfig = { async: true, dojoBlankHtmlUrl: location.pathname.replace(/\/[^/]+$/, "") + "/blank.html", packages: [{ name: "contactsApp", location: location.pathname.replace(/\/[^/]+$/, "") + "/" }] }; </script> <?php Utils::printDojoScript(); ?> <script> require(["contactsApp/contacts"]); </script> </body> </html>
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: DOH TestSuite - Author Bar</title> <link rel="stylesheet" href="style.css" media="screen"> <link rel="stylesheet" href="../../../../resources/style/demo.css" media="screen"> <?php include_once $_SERVER['DOCUMENT_ROOT'] . implode('/', array_slice(explode('/', dirname($_SERVER['PHP_SELF'])), 0, 4)) . '/Utils.php'; Utils::printClaroCss(); Utils::printDojoScript("isDebug: true, async: true, parseOnLoad: false, baseUrl: '.', tlmSiblingOfDojo: false, authorsUrl: '../resources/authors.json', authorName: 'Betsy Gamrat'"); ?> <script> require(["authorBar"],function(authorBar){ authorBar.update(); }); </script> </head> <body> <h1>Demo: Author Bar</h1> </body> </html>
<h3>Fruits</h3> <ul style="position:relative"> <li class="fresh">Apples</li> <li class="fresh">Persimmons</li> <li class="fresh">Grapes</li> <li class="fresh">Fresh Figs</li> <li class="dried">Dates</li> <li class="dried">Raisins</li> <li class="dried">Prunes</li> <li class="fresh dried">Apricots</li> <li class="fresh">Peaches</li> <li class="fresh">Bananas</li> <li class="fresh">Cherries</li> </ul> <?php Utils::printDojoScript("async: true"); ?> <script> require(["dojo/query", "dojo/NodeList-fx", "dojo/domReady!"], function(query){ query("#btn").on("click", function(){ query("li.fresh") .slideTo({ left: 200, auto: true }) .animateProperty({ properties: { backgroundColor: { start: "#fff", end: "#ffc" } } }) .play(); });
<?php Utils::printClaroCss(); ?> </head> <body class="claro"> <h1>dijit/form/TextBox and dijit/form/SimpleTextarea</h1> <div> <label for="text">Name:</label> <input id="text" data-dojo-type="dijit/form/TextBox" data-dojo-props="placeHolder:'Enter text here.'"> </div> <div> <label for="textarea">Description:</label> <textarea id="textarea" rows="5" cols="50" data-dojo-type="dijit/form/SimpleTextarea" data-dojo-props=" onFocus:function(){ console.log('textarea focus handler') }, onBlur:function(){ console.log('textarea blur handler') }, selectOnClick:true ">This is a sample SimpleTextarea.</textarea> </div> <?php Utils::printDojoScript("isDebug: true, async: true, parseOnLoad: true"); ?> <script> // load requirements for declarative widgets in page content require(["dojo/parser", "dijit/form/TextBox", "dijit/form/SimpleTextarea", "dojo/domReady!"]); </script> </body> </html>
<meta charset="utf-8"> <title>Demo: Dijit Menus</title> <link rel="stylesheet" href="../../../resources/style/demo.css" media="screen"> <?php include_once $_SERVER['DOCUMENT_ROOT'] . implode('/', array_slice(explode('/', dirname($_SERVER['PHP_SELF'])), 0, 4)) . '/Utils.php'; Utils::printClaroCss(); ?> </head> <body class="claro"> <h3>MenuBar Demo</h3> <div id="mainMenu"></div> <p>Last selected: <span id="lastSelected">none</span></p> <?php include_once $_SERVER['DOCUMENT_ROOT'] . implode('/', array_slice(explode('/', dirname($_SERVER['PHP_SELF'])), 0, 4)) . '/Utils.php'; Utils::printDojoScript("isDebug:1, async:1"); ?> <script> require([ "dijit/Menu", "dijit/MenuItem", "dijit/MenuBar", "dijit/MenuBarItem", "dijit/PopupMenuBarItem", "dijit/registry", "dojo/dom", "dojo/domReady!" ], function(Menu, MenuItem, MenuBar, MenuBarItem, PopupMenuBarItem, registry, dom){ // a menu item selection handler var onItemSelect = function(evt){ // retrieve the widget representing the item clicked
<?php include_once $_SERVER['DOCUMENT_ROOT'] . implode('/', array_slice(explode('/', dirname($_SERVER['PHP_SELF'])), 0, 4)) . '/Utils.php'; ?> <!DOCTYPE html> <html> <head> <title>Welcome</title> <link rel="stylesheet" href="style.css"> <?php Utils::printLinkStyleTags(array("dojo/resources/dojo.css", "dijit/themes/claro/claro.css")); ?> <?php Utils::printClaroGridCss(""); ?> </head> <body class="claro"> <h3>Select a User to View Their Details</h3> <br /> <div id="grid"></div> <?php Utils::printDojoScript(""); ?> <script src="demo4.js"></script> </body> </html>
<input type="password" name="password" id="password" value="" /> </div> <div> <label for="password2">Confirm Password*</label> <input type="password" name="password2" id="password2" value="" /> </div> <div> <label for="phone">Phone</label> <input type="text" name="phone" id="phone" value="" /> </div> <input type="submit" value="Post!" /> </form> <h3>Form validation results</h3> <div id="result" style="border-top:1px solid #999;"></div> <?php Utils::printDojoScript("async: true, parseOnLoad: true"); ?> <script> require(["dojo/dom", "dojo/_base/array", "dojo/_base/event", "dojo/query", "dojox/validate/web", "dojox/validate/us", "dojox/validate/check", "dojo/domReady!"], function(dom, arrayUtil, baseEvent, query, validate) { function doCheck(form){ var results = validate.check(form, profile), r = dom.byId("result"); if(results.isSuccessful()){ // everything passed, log it to the result div r.innerHTML = "Everything passed validation!"; } else { var s = "";
<title>Demo: data-dojo-config</title> <link rel="stylesheet" href="../../../resources/style/demo.css" media="screen"> <?php include_once $_SERVER['DOCUMENT_ROOT'] . implode('/', array_slice(explode('/', dirname($_SERVER['PHP_SELF'])), 0, 4)) . '/Utils.php'; Utils::printClaroCss(); ?> <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> <?php include_once $_SERVER['DOCUMENT_ROOT'] . implode('/', array_slice(explode('/', dirname($_SERVER['PHP_SELF'])), 0, 4)) . '/Utils.php'; Utils::printDojoScript("has:{'dojo-debugging-messages':true}, foo: 'bar', async: 1, isDebug: 1"); ?> <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) { // Explicitly parse the page 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>
<title>Demo: dojoConfig</title> <link rel="stylesheet" href="../../../resources/style/demo.css" media="screen"> <?php include_once $_SERVER['DOCUMENT_ROOT'] . implode('/', array_slice(explode('/', dirname($_SERVER['PHP_SELF'])), 0, 4)) . '/Utils.php'; Utils::printClaroCss(); ?> <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> <?php include_once $_SERVER['DOCUMENT_ROOT'] . implode('/', array_slice(explode('/', dirname($_SERVER['PHP_SELF'])), 0, 4)) . '/Utils.php'; Utils::printDojoScript("has:{'dojo-firebug':true}, foo: 'bar', async: 1, isDebug: 1"); ?> <script> require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog", "dojo/domReady!"], function(registry, parser, JSON, config) { // Explicitly parse the page 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 dialog.show(); }); </script> </body>
<!-- create the chart --> <div data-dojo-type="dojox.charting.widget.Chart" data-dojo-props="theme:dojox.charting.themes.Claro" id="viewsChart" style="width: 550px; height: 550px;"> <!-- Pie Chart: add the plot --> <div class="plot" name="default" type="Pie" radius="200" fontColor="#000" labelOffset="-20"></div> <!-- pieData is the data source --> <div class="series" name="Last Week's Visits" array="chartData"></div> </div> <!-- load dojo and provide config via data attribute --> <?php include_once $_SERVER['DOCUMENT_ROOT'] . implode('/', array_slice(explode('/', dirname($_SERVER['PHP_SELF'])), 0, 4)) . '/Utils.php'; Utils::printDojoScript(''); ?> <script> // x and y coordinates used for easy understanding of where they should display // Data represents website visits over a week period chartData = [ { x: 1, y: 19021 }, { x: 1, y: 12837 }, { x: 1, y: 12378 }, { x: 1, y: 21882 }, { x: 1, y: 17654 }, { x: 1, y: 15833 }, { x: 1, y: 16122 } ];
</p> <table data-dojo-type="MyGrid" id="grid"> <tr> <td data-dojo-type="MyCell">apple</td> <td data-dojo-type="MyCell">banana</td> <td data-dojo-type="MyCell">orange</td> </tr> <tr> <td data-dojo-type="MyCell">pear</td> <td data-dojo-type="MyCell">grapes</td> <td data-dojo-type="MyCell">strawberry</td> </tr> </table> <?php Utils::printDojoScript("parseOnLoad: false"); ?> <script> require([ "dojo/_base/declare", "dojo/_base/array", "dojo/_base/lang", "dojo/on", "dojo/parser", "dojo/query", "dijit/registry", "dijit/_WidgetBase", "dijit/_KeyNavMixin", "dojo/domReady!" ], function(declare, arrayUtil, lang, on, parser, query, registry, _WidgetBase, _KeyNavMixin){ MyGrid = declare([_WidgetBase, _KeyNavMixin], {
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo: DOH TestSuite - Author Bar</title> <link rel="stylesheet" href="../style.css" media="screen"> <link rel="stylesheet" href="../../../../../resources/style/demo.css" media="screen"> <?php include_once $_SERVER['DOCUMENT_ROOT'] . implode('/', array_slice(explode('/', dirname($_SERVER['PHP_SELF'])), 0, 4)) . '/Utils.php'; Utils::printClaroCss(); Utils::printDojoScript("isDebug: true, async: true, parseOnLoad: false, paths: { demo: location.pathname.substring(0, location.pathname.lastIndexOf('/tests')), doh: '/js/dojo/1.7/util/doh', }, authorsUrl: '../../resources/authors.json', authorName: 'Sam Foster'"); ?> <script> require(["doh/runner", "demo/authorBar", "dojo/dom", "dojo/_base/config", "demo/tests/util", "dojo/domReady!" ], function(doh, authorBar, dom, config, util){ var TF = util.Fixture; // register the browser test group doh.register("browser tests", [ // test to ensure the authorBar was rendered and has the right authorName in it new TF("authorBar rendered", function() { doh.t((dom.byId("author")!==null), "Element exists"); var html=dom.byId("author").innerHTML.toString(); doh.t(html.indexOf(config.authorName) > -1, "Element has our authorName in it"); }), // test to ensure the right styling is applied
<head> <meta charset="utf-8"> <title>Demo: i18n</title> <link rel="stylesheet" href="style.css" media="screen"> <link rel="stylesheet" href="../../../resources/style/demo.css" media="screen"> <?php Utils::printClaroCss(); ?> </head> <body class="claro"> <h1>Demo: Internationalization</h1> <h2>Change locale</h2> <ul> <li><a href="?en-us">en-us</a></li> <li><a href="?de-de">de-de</a></li> <li><a href="?fr-ca">fr-ca</a></li> <li><a href="?pt-pt">pt-pt</a></li> <li><a href="?es-es">es-es</a></li> <li><a href="?zh-cn">zh-cn</a></li> </ul> <p>Leave your cursor over the various editor buttons in order to see the internationalized tooltips</p> <div id="editor" data-dojo-type="dijit.Editor" data-dojo-props="style: 'height: 100px; width: 400px;', height: 100, width: 400"></div> <?php Utils::printDojoScript("async: true, parseOnLoad: true, locale: location.search.substring(1)"); ?> <script> require(["dijit/Editor", "dojo/parser", "dojo/i18n", "dojo/domReady!"]); </script> </body> </html>
<title>Demo: Locale options for dojo.config</title> <link rel="stylesheet" href="../../../resources/style/demo.css" media="screen"> <?php include_once $_SERVER['DOCUMENT_ROOT'] . implode('/', array_slice(explode('/', dirname($_SERVER['PHP_SELF'])), 0, 4)) . '/Utils.php'; Utils::printClaroCss(); ?> <style> #dialog { min-width: 200px; } </style> </head> <body class="claro"> <h1>Demo: Locale options for dojo/_base/config</h1> // look for a locale=xx query string param, else default to 'en-us' <?php include_once $_SERVER['DOCUMENT_ROOT'] . implode('/', array_slice(explode('/', dirname($_SERVER['PHP_SELF'])), 0, 4)) . '/Utils.php'; Utils::printDojoScript("has:{'dojo-firebug':true, 'dojo-debug-messages': true}, foo: 'bar', async: 1, isDebug: 1, locale: location.search.match(/locale=([\\w\\-]+)/) ? RegExp.\$1 : 'en-us'"); ?> <script> // require the locale, Dialog, json, config, dojo body, i18n, and domReady plugin require(["dojo/date/locale", "dijit/Dialog", "dojo/json", "dojo/_base/config", "dojo/_base/window", "dojo/i18n", "dojo/domReady!"] , function(locale, Dialog, JSON, config, win) { var now = new Date(); var dlg = new Dialog({ id: 'dialog', // set a title on the dialog of today's date, // using a localized date format title: 'Today: '+ locale.format(now, { formatLength:'full',selector:'date' }) }).placeAt(win.body()); dlg.startup();