Dojo Developer Guide

JSON fueled, delivered by Cloud CMS

Dojo Mobile is a world class HTML5 mobile JavaScript framework that enables rapid development of mobile web applications with a native look and feel on modern webkit-enabled mobile devices such as iPhone, iPod Touch, iPad, Android and RIM smartphones and tablets.

Cloud CMS provides the ideal cloud backbone for your Dojo Mobile applications that empowers your applications with services like data modeling, query/traversals, full-text search, mimetype transformations, data extractors, email, auditing, and more.

Sign up for Cloud CMS

If you already have a Cloud CMS subscription, you can skip ahead.
Otherwise, be sure to sign up for a trial account first, in order to use Cloud CMS.

API Keys

Every mobile app or web site that you build will need to have a set of API Keys that it will use to connect to your Cloud CMS platform on behalf of your code. These API keys consist of client and user key/secret pairs. You can generate a set of keys using the following steps:

  1. Log in to your Cloud CMS tenant at https://<yourdomain>
  2. Click on Developers

You will now see your API Keys for all of your platform's Application instances.
You can create as many Application instances as you'd like and each will have their own set of API Keys.

For more information, visit Configuring your API Keys.

Getting Started

Step 1:Download the Cloud CMS JavaScript driver

The Cloud CMS JavaScript driver handles all of the HTTPS calls, data conversions, OAuth2 authorization handshakes and any and all interaction with the Cloud CMS platform in a secure manner.

To get the latest version of the driver, please visit the JavaScript Driver for Cloud CMS page.

The driver comes as a single JS file that you can drop into your project. You can use either the minified or the uncompressed version (which is better, if you're debugging). It's up to you.

Step 2: Setup web server proxy

If we want to run our Cloud CMS powered Dojo Mobile app as a pure HTML5/JavaScript application, we will need to place it under a web server such as Apache web server.

Due to the cross domain limitation of ajax calls, we will need to setup a reverse proxy that forwards HTTP/HTTPS request “/proxy/*” to “*”.

Here is a sample Apache configuration file (replace server name, server alias and other
directories with your own settings).

<VirtualHost *:80>
RewriteEngine On
RewriteRule .* - [E=host:%{HTTP_HOST}]
ProxyRequests Off
ProxyPassInterpolateEnv On
ProxyPass /proxy interpolate
ProxyPassReverse /proxy interpolate
ProxyPassReverseCookieDomain interpolate
<Directory />
Options -Indexes
AllowOverride All

Place the above custom configuration file in your Apache conf directory and restart the
Apache server.

Step 3: Hello World

Let us first build a simple Hello World application (click here to download the full project).

1) Create a simple HTML5/JavaScript project with the Cloud CMS JavaScript driver.

2) Create a HelloWorld.js file. It will first create an instance of Cloud CMS driver that makes connection to to your Cloud CMS platform using the provided credentials. Once the connection is made, it will then print out the name of the authenticated user.

dojo.ready(function() {
var view1 = new{
id: "foo",
selected: true
}, "view1");
new Gitana({
"clientId" : "676e3450-6131-46c2-99cc-496aa2ad80fa",
"clientSecret" : "..."
"username" : "demo",
"password" : "demo"
}).then(function() {
var authInfo = this.getDriver().getAuthInfo();
var name = authInfo.getPrincipalName();
var heading1 = new{
label: 'Cloud CMS'
var msgPane = new{
shadow : true
msgPane.containerNode.innerHTML = 'Hello ' + name
+ '! Welcome to Cloud CMS!';

3) Create a hello-world.html file with links to the Cloud CMS JavaScript driver, Dojo Mobile library and the above HelloWorld.js file.

<!DOCTYPE html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Welcome to Cloud CMS</title>
<link href=""
<link href="../css/cloudcms.css"
<script src="../lib/cloudcms/gitana.js"></script>
<script src="">
<script src="../js/basic/HelloWorld.js"></script>
<script language="JavaScript" type="text/javascript">
<body style="visibility:hidden;">
<div id="view1"></div>

4) Open the hello-world.html with your browser and we should have a screen which looks like this.

Now let us take a step further and enhance the application (click here to download the full project) to retrieve a content node and its attached pictures from Cloud CMS repository and then renders carousel view using Dojo Mobile StoreCarousel widget.

For this application, we will use the Cloud CMS context API which takes configurations for credentials, targeted repository, default fault handler etc.

dojo.ready(function() {
var cloudCMSContextConfigs = {
"driver" : {
"clientId" : "676e3450-6131-46c2-99cc-496aa2ad80fa",
"clientSecret" : "......"
"authentication" : {
"username" : "demo",
"password" : "demo"
"repository" : {
"title" : "Westford Health Center Repository"
"error" : function(error) {
var view = new{
id: "foo",
selected: true
}, "photo-album");
Gitana.Context.create(cloudCMSContextConfigs).then(function() {
this.branch().readNode('whc:aboutus').then(function() {
var images = [];
this.listAttachments(true).each(function() {
if (this.getId() && this.getId().indexOf('photo')==0){
"src" : this.getDownloadUri()
}).then(function() {
var store = new{
id : "store",
data: images
var carousel = new{
height : "560px",
store : store,
numVisible : 1,
title : "Photo Gallery",
selectable : false

You can find more advanced examples from here. All source code of the examples can be downloaded from

GitHub Project for Cloud CMS Dojo Mobile Examples

To learn more about using Cloud CMS JavaScript driver, you can also check out our documentation site and hosted online samples.