Cloud Connected

"I have been searching for a product like Cloud CMS for over 10 years.

After false starts with some typical content management solutions, we were finally able to design the content repository that our business required."
James Baddiley
James Baddiley, CEO

Building Your Dojo Mobile App with 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.

If you are a Dojo Mobile developer and looking for a CMS to empower your app, take a look at Cloud CMS, an ideal cloud based content platform for Mobile development. This blog provides details about how you can easily plug Cloud CMS into your new or existing Dojo Mobile applications.

If you haven’t already tried out Dojo Mobile, we recommend you visit Dojo Mobile’s web site to download their framework and check out their documentation.

Step 1 : Sign up with Cloud CMS

Cloud CMS offers a free sandbox account that you can use to play around with Cloud CMS at no cost. For the purposes of this guide, we’ll use this free sandbox account to connect and work with the APIs.

On the other hand, for your own private projects, you’ll want to first sign up with Cloud CMS for a free trial or a subscription account. If you have already signed up, then you can just substitute your own account details in the appropriate places.

Since Cloud CMS supports OAuth2 for platform authorization, you will need both client credential and user credential for your application.

To locate your client credential, sign in your Cloud CMS console and browse to Clients page and then select a client for authentication. From client dashboard page, you will find its key/secret pair.

For user credential, you can either use its username/password pair or any authentication grant that you have setup for that user.

Step 2 : Download Cloud CMS JavaScript driver

Cloud CMS JavaScript driver handles all HTTP/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, you can visit its hosting site and download either its minified version or uncompressed version.

Step 3 : Setup web server proxy

If we want to run our Cloud CMS powered Sancha Touch 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 ${host} interpolate

<Directory />
Options -Indexes
AllowOverride All


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

Step 4 : Build Cloud CMS powered Dojo Mobile applications

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.

Share this post

comments powered by Disqus