The Basics Views/Headings/Lists Panes/Openers Forms
HIDE ALL NOTES

Getting Dojo

Download

http://www.dojotoolkit.org/download/

CDN (Content Distribution Network)

Google CDN

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>

Notes

In the CDN tag above, line breaks may be automatically added due to formatting constraints. These tags should be written as a single line.

These examples are using Dojo 1.9.1.

Git

Dojo's full source is made up of several repositories: dojo, dijit, util, and dojox. They can be cloned from https://github.com/dojo/[repository].git:

git clone https://github.com/dojo/dojo.git

Configuring Dojo

Using dojoConfig

<script>
  var dojoConfig = {
    isDebug: true // default is false
  }
</script>

Notes

The dojoConfig object must exist before the script tag that loads dojo.js.

Using data-dojo-config

<script src="dojo/dojo.js" data-dojo-config="isDebug: true"></script>

Notes

In the data-dojo-config example above, line breaks may be added automatically due to formatting constraints. This tag should be written as a single line.

Loading Dojo Mobile

dojox/mobile

Using dojox/mobile

require([
  "dojox/parser",
  "dojox/mobile",
  "dojox/mobile/compat",
  "dojox/mobile/deviceTheme",
  "dojo/domReady!"
], function(parser, mobile, compat){
  // Ready to run mobile app!
});

Notes

The code above assumes a declarative page that can be used with most desktop browsers. Using a desktop browser during development may be helpful.

Custom Packages/Namespaces

AMD Configuration

Using Custom Packages/Namespaces

require({
  packages: [
    { name: "package",
      location: "../package" }
  ],
  paths: {
    "package/subPackage":
      "../subPackage"
  }
});

Notes

Relative paths are relative to the directory containing dojo.js by default if no baseUrl is set.

If a package is not registered, Dojo will assume the package directory is a sibling of the directory containing dojo.js. This behavior can be disabled by setting tlmSiblingOfDojo to false in the Dojo configuration object, in which case package directories will be assumed to be inside the baseUrl directory.

Views

Views

Using dojox/mobile/View

<div id="view2"
  data-dojo-type="dojox/mobile/View">
  <h1
    data-dojo-type=
      "dojox/mobile/Heading"
    data-dojo-props='back:"View 1",
      moveTo:"view1"'>View 2</h1> </div>

Notes

JavaScript must be used to require the modules and parse the HTML.

Headings and ToolBars

Headings and ToolBars

Using Headings and ToolBars

<div data-dojo-type=
  "dojox/mobile/Heading">
  <span data-dojo-type=
    "dojox/mobile/ToolBarButton"
    data-dojo-props='label:"Done",
      defaultColor="mblColorBlue"'>
  </span>
  <span data-dojo-type=
    "dojox/mobile/ToolBarButton"
    data-dojo-props='
      label:"New Folder"'
    style="float:right;"></span>
</div>

Notes

JavaScript must be used to require the modules and parse the HTML.

Lists

Lists

Using dojox/mobile/RoundRectList

<ul data-dojo-type="dojox/mobile/RoundRectList">
  <li data-dojo-type=
    "dojox/mobile/ListItem"
    data-dojo-props=
      'icon:"images/i-icon-3.png",
      rightText:"Off",
      moveTo:"view1"'>Wi-Fi</li>
  <li data-dojo-type=
    "dojox/mobile/ListItem"
    data-dojo-props=
      'icon:"images/i-icon-4.png",
      rightText:"VPN",
      moveTo:"view2"'>VPN</li>
</ul>

Notes

JavaScript must be used to require the modules and parse the HTML.

Panes

Panes

Using Panes

<div data-dojo-type=
  "dojox/mobile/RoundRect"
  data-dojo-props='shadow:true'>   dojox/mobile/RoundRect
  provides a nice way to
  display content on
  a mobile device
</div>

Notes

JavaScript must be used to require the modules and parse the HTML.

Openers

Openers

  1. dojox/mobile/Opener
  2. dojox/mobile/Overlay
  3. dojox/mobile/Tooltip

Using dojox/mobile/Tooltip

HTML

<div id="textTooltip"
  data-dojo-type=
    "dojox.mobile.Tooltip"
    class="mblTooltipBubble">
      Enter a value.
</div>
<button type="button" id="btn">
  Button</button>

JavaScript

require(["
  dojo/parser",
  "dojo/dom",
  "dijit/registry",
  "dojo/on",
  "dojox/mobile/deviceTheme",
  "dojox/mobile/compat",
  "dojox/mobile",
  "dojox/mobile/Button",
  "dojox/mobile/Tooltip",
  "dojo/domReady!"
], function (parser, dom, registry, on) {
  parser.parse();
  var btn = registry.byId("btn");
  var tooltip =
    registry.byId("formTooltip");
  btn.on("click", function(evt){
    tooltip.show(dom.byId("btn"),
    ["after",
    "above-centered", "before"]);
  });
});

Forms

Forms

Using mobile forms

<form method="post" id="contactForm"
  data-dojo-type="dijit/form/Form">
  <label>E-mail:</label>
  <input type="text" name="email"
    id="email" data-dojo-type=
    "dojox/mobile/TextBox"
    data-dojo-props=
    "trim: true" />
  <button id="btnSubmit"
    type="submit"
    name="submit" data-dojo-type=
    "dojox/mobile/Button"
    class="mblBlueButton">
    Send
  </button>
</form>

Notes

dijit/form/Form may be used with mobile forms.

JavaScript must be used to require the modules and parse the HTML.