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
ChilliSauce

Cloud CMS + jQuery Mobile in Five Minutes

Cloud CMS is an ideal cloud based content platform for jQuery Mobile framework. This blog provides details about how jQuery Mobile developers can easily plug Cloud CMS into their new or existing jQuery Mobile applications.

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

To build a jQuery Mobile application that uses Cloud CMS as its content platform, all you need to do is to take a few simple steps:

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 jQuery 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 “http://api.cloudcms.com:80/*”.

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

<VirtualHost *:80>

    ServerName YOUR.SERVER.NAME
    ServerAlias YOUR.SERVER.ALIAS

    DocumentRoot YOUR_DOCUMENT_ROOT_DIRECTORY
    ErrorLog YOUR_ERROR_LOG_DIRECTORY
    CustomLog YOUR_CUSTOM_LOG_DIRECTORY common

    RewriteEngine On
    RewriteRule .* - [E=host:%{HTTP_HOST}]

    ProxyRequests Off

    ProxyPassInterpolateEnv On
    ProxyPass /proxy http://api.cloudcms.com interpolate
    ProxyPassReverse /proxy http://api.cloudcms.com interpolate
    ProxyPassReverseCookieDomain api.cloudcms.com ${host} interpolate

<Directory />
    Options -Indexes
    AllowOverride All
</Directory>

</VirtualHost>



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

Step 4 : Build Cloud CMS powered jQuery 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 and all required jQuery Mobile library files.



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.

$(document).bind('pageinit', function() {
  new Gitana({
    "clientId" : "676e3450-6131-46c2-99cc-496aa2ad80fa",
    "clientSecret" : "......"
  }).authenticate({
    "username" : "demo",
    "password" : "demo"
  }).then(function() {
    var authInfo = this.getDriver().getAuthInfo();
    var name = authInfo.getPrincipalName();
    $('.content-primary h1').html('Hello '+name+'! Welcome to Cloud CMS!');
  });
});

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Hello world example that shows
how to connect to Cloud CMS using Cloud CMS JavaScript driver and
jQuery Mobile framework.">
  <title>Cloud CMS - jQuery UI Mobile Framework - Hello World</title>
  <link rel="stylesheet"
href="../css/themes/default/jquery.mobile-1.1.1.css"/>
  <link rel="stylesheet"  href="../css/cloudcms.css" />
  <script src="../lib/thirdparty/jquery/jquery.js"></script>
  <script src="../lib/thirdparty/jquery/jquery.mobile-1.1.1.js">
</script>
  <script src="../lib/cloudcms/js/gitana.js"></script>
  <script src="../js/basic/HelloWorld.js"></script>
</head>
<body>
<div data-role="page" class="type-index">
  <div data-role="header" data-theme="a">
    <h1>Cloud CMS jQuery Mobile Examples - Hello World</h1>
    <a href="../index.html" data-icon="home" data-iconpos="notext"
        data-direction="reverse">Home</a>
  </div>
  <div data-role="content">
    <div class="content-primary">
      <h1></h1>
    </div>
  </div>
  <div data-role="footer" class="footer-examples" data-theme="c">
    <p>Copyright &copy; 2012 Gitana Software | All Rights Reserved</p>
  </div>
</div>
</body>
</html>

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


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

GitHub Project for Cloud CMS jQuery Mobile Examples

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

Cloud CMS and Two-way Replication

When we designed Cloud CMS, we wanted to give our customers the choice of running the platform both in the cloud and on-premise.  The cloud makes sense for a lot of infrastructure needs but we recognize that some of our customers will want to have their own hosted installation of the platform.

We also wanted to give our customers the ability to push and pull data between their on-premise installations and the cloud platform (whether our public installation or a private cloud the customer runs).  There are times where it’s better to take advantage of the elastic storage and capacity of the cloud and other times where data is better suited to live on-premise.

To achieve this, Cloud CMS offers two-way replication.  It’s very similar to Git in that you can push and pull changes between your local installation and a cloud installation.

To pull, you browse the cloud and find a resource you would like to pull down into a local copy.  You then export that resource into an archive.  And then, on your local installation, you simply import the archive via its URL.  Your local copy of Cloud CMS will download the archive and seamlessly produce a replication of the data on your local instance.

Archives are stored in vaults and basically comprise a snapshot of the data along with all of its dependencies.  Archives are a lot like Maven Artifacts (if you’re familiar with Maven, Ivy, Gradle or other dependency management / build lifecycle tools).  They can contain either all of the data of your export or a partial subset depending on whether you’ve bounded the export by date or changeset IDs (in the case of changeset-versioned branches).

You’re free to work locally on your data and if you choose, at any time, you can push your data back to the cloud.  It’s basically the same operation but in reverse.  You export the archive.  And then, you either pull the archive to the cloud from the local installation or you push it from the local installation to the cloud.  The former is applicable if your local installation is visible from the cloud (depending on your firewall / IT restrictions).  The latter is often more preferable.  But in the end, they accomplish the same thing.

Cloud CMS really looks to Git and Mercurial as examples of great versioning systems that really get it right in terms of being distributed, changeset-driven and replication-friendly.  We didn’t seek to reinvent the wheel but instead opted to give our customers access to some wonderful tools for collaboration which, prior to Cloud CMS, were only available to command-line developers.

Building Applications with Ratchet JS MVC

Over the past few days, I’ve had a chance to delve back into ratchet.js which is a JavaScript MVC framework that I had a hand in building in 2010. By this point, there are a lot of JavaScript MVC frameworks that you can utilize. However, at the time we built it, we were very inspired by sammy.js, backbone.js and knockout.js.

A few points on these libraries:

  • I particularly liked sammy.js for its simplicity. The developers of that library do a great job minimizing the work and also utilized an interesting “chaining” approach during the rendering phase which was inspirational. We really liked the chaining approach and used it in Ratchet as well as our own Cloud CMS JavaScript Driver.
  • Both backbone.js and knockout.js are fantastic frameworks for defining scoped-observable variables in the model. They solve things like how to update content on the page in real-time, build components that listen for update events and pass messages between controls or elements on the site.

We sought to produce an MVC library that gave us the singular foundation that we needed to build really great HTML5 and JavaScript-based applications. Furthermore, we wanted a framework that would be ideal for real-time, cloud-connected applications. Thus, while it’s important to get the foundation bits right in terms of observables, components, templates, routes and so forth, we also felt it was very important to define an asynchronous rendering pipeline that could manage state for the backend, stream content forward and aggregate it into HTML5.

None of that is really too outlandish. A few years ago, for those old enough to recall (not that it was that long ago), everyone was crazy about mashups. The basic idea behind mashups was that content would be sourced from other locations and presented singularly. That idea hasn’t gone away and with the explosion of cloud-based services including Cloud CMS for all of your content and application services, we think its high time that a JS framework was built to address that need.

So that’s where we’re headed going forward. I find it an absolute joy to work with ratchet.js and would recommend to readers that they take a look. It’s a purely open-source project under the Apache 2 license. All of the source code is available on GitHub.