Cloud Connected

"The only difference between Cloud CMS and your current on-premise document repository is that you don't have to worry about software or hardware installation and upgrades any longer."
Jeff Potts, Founder
Metaversant Group

Need a Content Platform for Your Titanium Application?

 Appcelerator Titanium is a popular mobile framework for developing native, hybrid and mobile web applications from a single code base. However like many other mobile frameworks, it doesn’t come with a Content Management System (CMS). So for any content driven or content rich application, Titanium developers will have the need for a CMS that serves or stores content for their mobile applications.

On the other hand, Cloud CMS provides all of the back-end services and infrastructure for your mobile applications in the form of cloud based services. Its JSON and RESTful APIs can be easily integrated with any mobile framework.

To build a Titanium native application that talks to Cloud CMS and uses it as its content platform, all you need to do is to take a few simple steps

Step 1 : Sign up an account with Cloud CMS

To get your project started, you need to get a subscription to Cloud CMS which gives you your own platform, storage space and services for your projects and applications. To try out for free, you can use Cloud CMS free sandbox account (demo/demo).

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 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 : Build Cloud CMS powered Titanium applications

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

1) Create an empty Titanium Mobile project using Titanium Studio.

2) Create a cloudcms sub directory under the Resources directory and then place the Cloud CMS JavaScript driver under it.

3) Edit app.js and add the code that connects the app to Cloud CMS. This example will first create an instance of Cloud CMS driver which 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.

new Gitana({
    "baseURL" : '',
    "clientId" : "676e3450-6131-46c2-99cc-496aa2ad80fa",
    "clientSecret" : "......"
"username" : "demo",
"password" : "demo"
}).then(function() {
var authInfo = this.getDriver().getAuthInfo();
var label1 = Titanium.UI.createLabel({
color : '#999',
text : "Hello " + authInfo.getPrincipalName() + "!",
font : {
fontSize : 20,
fontFamily : 'Helvetica Neue'
textAlign : 'center',
width : 'auto'

4) Run the application using iPhone simulator and we should have a screen which likes this.

Now let us take a step further and enhance the application to read and display a content item from a Cloud CMS repository (click here to download the full project).

var cloudCMSContextConfigs = {
    "driver" : {
        "baseURL" : '',
        "clientId" : "676e3450-6131-46c2-99cc-496aa2ad80fa",
        "clientSecret" : "......"
    "authentication" : {
        "username" : "demo",
        "password" : "demo"
    "repository" : {
        "title" : "Creatures Content"
    "error" : function(error) {
        Ti.API.error("Error: " + JSON.stringify(error));

Gitana.Context.create(cloudCMSContextConfigs).then(function() {
    this.branch().readNode("creatures:coyote").then(function() {
        var node = this;
        var fullImageUrl = node.attachment('photo').getDownloadUri();
        var image = Titanium.UI.createImageView({
            image : fullImageUrl,
            width : '100%',
            height : 290,
            top : 5,
            bottom : 5,
            left : 5,
            right : 5
        var detailsLabel = Ti.UI.createLabel({
            text : node.get("details"),
            color : '#000000',
            shadowColor : '#FFFFE6',
            textAlign : 'left',
            shadowOffset : {
                x : 0,
                y : 1
            font : {
                fontSize : 13
            height : 'auto',
            width : 'auto',
            top : 10,
            left : 10,
            bottom : 10

For this application, we will use the Cloud CMS context API which takes configurations for credentials, targeted repository, default fault handler etc. Once we create an instance of Cloud CMS context, we will be able to use it to retrieve a content item and then show its metadata and its attached picture.

We’ve also put together a full reference application that demonstrates various features and capabilities that Cloud CMS can provide for your Titanium applications (click here to download the full project).

It can serve as a starting point for anyone interested in introducing Cloud CMS to their Titanium apps.

Source code on GitHub

YouTube Video on Cloud CMS/Titanium Integration

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