Titanium Developer Guide

JSON fueled, delivered by Cloud CMS





Cloud CMS provides the ideal content platform for Appcelerator Titanium. This guide walks through how to plug Cloud CMS into new or existing Titanium applications running on iPad, iPhone, Android or other mobile devices.

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: Hello World

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" : 'http://api.cloudcms.com:80',
"clientId" : "676e3450-6131-46c2-99cc-496aa2ad80fa",
"clientSecret" : "......"
}).authenticate({
"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.


Step 3: Display a Content Item

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" : 'http://api.cloudcms.com:80',
"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.


Step 4: Full Reference Application

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).

The reference application provides as a helpful resource for anyone interested in introducing Cloud CMS to their Titanium apps.

Source code on GitHub

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

If you haven't already installed Appcelerator Titanium, we recommend you visit Appcelerator's web site to download their SDK.

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>.cloudcms.net
  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.