Step 1) Create the app:

grails create-app grailbars

You’ll need to do the rest of this from inside the newly created “grailbars” directory:

cd grailbars

Step 2) Create a new domain object:

grails create-domain-class com.jamesward.grailbars.Bar

Step 3) Edit the grails-app/domain/com/jamesward/grailbars/Bar.groovy file so it looks like:

package com.jamesward.grailbars
 
class Bar {
    String name
}

Step 4) Create a controller for the Bar:

grails create-controller com.jamesward.grailbars.Bar

Step 5) Edit the grails-app/controllers/com/jamesward/grailbars/BarController.groovy file so it looks like:

package com.jamesward.grailbars
 
class BarController {
    def scaffold = Bar
}

Step 6) Run the app locally to test it out:

grails run-app

Now open it in your browser: http://localhost:8080/grailbars

Step 7) Update the data source configuration to use the free Postgres database on Heroku. First edit the grails-app/conf/DataSource.groovy file and replace the “production” section with:

production {
    dataSource {
        dbCreate = "update"
        driverClassName = "org.postgresql.Driver"
        dialect = org.hibernate.dialect.PostgreSQLDialect    
        uri = new URI(System.env.DATABASE_URL?:"postgres://test:test@localhost/test")
        url = "jdbc:postgresql://"+uri.host+uri.path
        username = uri.userInfo.split(":")[0]
        password = uri.userInfo.split(":")[1]
    }
}

Now add the Postgres JDBC driver as a dependency by adding the following to the “dependencies” section of the grails-app/conf/BuildConfig.groovy file:

runtime 'postgresql:postgresql:9.1-901-1.jdbc4'

Step 8) Setup a git repository for the project which will be used for transferring the files to Heroku:

grails integrate-with --git
git init
git add application.properties grails-app test web-app
git commit -m init

Step 9) Login with the Heroku CLI:

heroku login

Step 10) Ceate a new application using the “cedar” stack:

heroku create -s cedar

Step 11) Upload your application to Heroku:

git push heroku master

Now open the application running on Heroku in your browser (the URL was in the “heroku create” and “git push” output). Verify that it works. Awesome! You just built a Grails app and deployed it on the Cloud with Heroku! For more details on using Grails on Heroku, visit the Heroku Dev Center. Let me know if you have any questions. Thanks!

In this post, we explore an offline version of the same application: this new version gets its data from your device’s local database using the PhoneGap SQL database API.

By default, Backbone.js Models access their data using RESTful services defined by the Models “url” and “urlRoot” attributes. But Backbone.js also makes it easy and elegant to change your Models data access mechanism: All you have to do is override the Backbone.sync method. From the Backbone.js documentation:

Backbone.sync is the function that Backbone calls every time it attempts to read or save a model to the server. By default, it uses (jQuery/Zepto).ajax to make a RESTful JSON request. You can override it in order to use a different persistence strategy, such as WebSockets, XML transport, or Local Storage.

The documentation includes a useful example that shows how to replace the default Backbone.sync implementation with localStorage-based persistence where models are saved into JSON objects.

In our application, we will replace the default Backbone.sync implementation with SQL-based persistence using the device’s local database.

First, we create a data access object that encapsulates the logic to read (find), create, update, and delete wines. This simple application is read-only and only needs to retrieve collections. So, I only implemented the findAll() method and stubbed the other methods (find, create, update, destroy). WineDAO also has a “populate” function to populate the wine table with sample data.

window.WineDAO = function (db) {
    this.db = db;
};

_.extend(window.WineDAO.prototype, {

    findAll:function (callback) {
        this.db.transaction(
            function (tx) {
                var sql = "SELECT * FROM wine ORDER BY name";
                tx.executeSql(sql, [], function (tx, results) {
                    var len = results.rows.length;
                    var wines = [];
                    for (var i = 0; i < len; i++) {
                        wines[i] = results.rows.item(i);
                    }
                    callback(wines);
                });
            },
            function (tx, error) {
                alert("Transaction Error: " + error);
            }
        );
    },

    create:function (model, callback) {
//        TODO: Implement
    },

    update:function (model, callback) {
//        TODO: Implement
    },

    destroy:function (model, callback) {
//        TODO: Implement
    },

    find:function (model, callback) {
//        TODO: Implement
    },

//  Populate Wine table with sample data
    populate:function (callback) {
        this.db.transaction(
            function (tx) {
                console.log('Dropping WINE table');
                tx.executeSql('DROP TABLE IF EXISTS wine');
                var sql =
                    "CREATE TABLE IF NOT EXISTS wine ( " +
                        "id INTEGER PRIMARY KEY AUTOINCREMENT, " +
                        "name VARCHAR(50), " +
                        "year VARCHAR(50), " +
                        "grapes VARCHAR(50), " +
                        "country VARCHAR(50), " +
                        "region VARCHAR(50), " +
                        "description TEXT, " +
                        "picture VARCHAR(200))";
                console.log('Creating WINE table');
                tx.executeSql(sql);
                console.log('Inserting wines');
                tx.executeSql("INSERT INTO wine VALUES (1,'CHATEAU DE SAINT COSME','2009','Grenache / Syrah','France','Southern Rhone / Gigondas','The aromas of fruit and spice give one a hint of the light drinkability of this lovely wine, which makes an excellent complement to fish dishes.','saint_cosme.jpg')");
                tx.executeSql("INSERT INTO wine VALUES (2,'LAN RIOJA CRIANZA','2006','Tempranillo','Spain','Rioja','A resurgence of interest in boutique vineyards has opened the door for this excellent foray into the dessert wine market. Light and bouncy, with a hint of black truffle, this wine will not fail to tickle the taste buds.','lan_rioja.jpg')");
                tx.executeSql("INSERT INTO wine VALUES (3,'MARGERUM SYBARITE','2010','Sauvignon Blanc','USA','California Central Cosat','The cache of a fine Cabernet in ones wine cellar can now be replaced with a childishly playful wine bubbling over with tempting tastes of black cherry and licorice. This is a taste sure to transport you back in time.','margerum.jpg')");
                tx.executeSql("INSERT INTO wine VALUES (4,'OWEN ROE \"EX UMBRIS\"','2009','Syrah','USA','Washington','A one-two punch of black pepper and jalapeno will send your senses reeling, as the orange essence snaps you back to reality. Do not miss this award-winning taste sensation.','ex_umbris.jpg')");
                tx.executeSql("INSERT INTO wine VALUES (5,'REX HILL','2009','Pinot Noir','USA','Oregon','One cannot doubt that this will be the wine served at the Hollywood award shows, because it has undeniable star power. Be the first to catch the debut that everyone will be talking about tomorrow.','rex_hill.jpg')");
                tx.executeSql("INSERT INTO wine VALUES (6,'VITICCIO CLASSICO RISERVA','2007','Sangiovese Merlot','Italy','Tuscany','Though soft and rounded in texture, the body of this wine is full and rich and oh-so-appealing. This delivery is even more impressive when one takes note of the tender tannins that leave the taste buds wholly satisfied.','viticcio.jpg')");
                tx.executeSql("INSERT INTO wine VALUES (7,'CHATEAU LE DOYENNE','2005','Merlot','France','Bordeaux','Though dense and chewy, this wine does not overpower with its finely balanced depth and structure. It is a truly luxurious experience for the senses.','le_doyenne.jpg')");
                tx.executeSql("INSERT INTO wine VALUES (8,'DOMAINE DU BOUSCAT','2009','Merlot','France','Bordeaux','The light golden color of this wine belies the bright flavor it holds. A true summer wine, it begs for a picnic lunch in a sun-soaked vineyard.','bouscat.jpg')");
                tx.executeSql("INSERT INTO wine VALUES (9,'BLOCK NINE','2009','Pinot Noir','USA','California','With hints of ginger and spice, this wine makes an excellent complement to light appetizer and dessert fare for a holiday gathering.','block_nine.jpg')");
                tx.executeSql("INSERT INTO wine VALUES (10,'DOMAINE SERENE','2007','Pinot Noir','USA','Oregon','Though subtle in its complexities, this wine is sure to please a wide range of enthusiasts. Notes of pomegranate will delight as the nutty finish completes the picture of a fine sipping experience.','domaine_serene.jpg')");
                tx.executeSql("INSERT INTO wine VALUES (11,'BODEGA LURTON','2011','Pinot Gris','Argentina','Mendoza','Solid notes of black currant blended with a light citrus make this wine an easy pour for varied palates.','bodega_lurton.jpg')");
                tx.executeSql("INSERT INTO wine VALUES (12,'LES MORIZOTTES','2009','Chardonnay','France','Burgundy','Breaking the mold of the classics, this offering will surprise and undoubtedly get tongues wagging with the hints of coffee and tobacco in perfect alignment with more traditional notes. Breaking the mold of the classics, this offering will surprise and undoubtedly get tongues wagging with the hints of coffee and tobacco in perfect alignment with more traditional notes. Sure to please the late-night crowd with the slight jolt of adrenaline it brings.','morizottes.jpg')");
            },
            function (tx, error) {
                alert('Transaction error ' + error);
            },
            function (tx) {
                callback();
            }
        );
    }
});

I then added a “dao” attribute to the Models to specify which data object should be used to access their underlying data.

window.Wine = Backbone.Model.extend({
	urlRoot: "http://coenraets.org/backbone-cellar/part1/api/wines",
    dao: WineDAO
});

window.WineCollection = Backbone.Collection.extend({
	model: Wine,
	url: "http://coenraets.org/backbone-cellar/part1/api/wines",
    dao: WineDAO
});

NOTE: The application doesn’t need the url and urlRoot attributes anymore, but you can imagine a more sophisticated version of the app that would work with the RESTful services while online and fall back to the local database while offline.

With that infrastructure in place, we can now override Backbone.sync as follows:

Backbone.sync = function (method, model, options) {

    var dao = new model.dao(window.db);

    switch (method) {
        case "read":
            if (model.id)
                dao.find(model, function (data) {
                    options.success(data);
                });
            else
                dao.findAll(function (data) {
                    options.success(data);
                });
            break;
        case "create":
            dao.create(model, function (data) {
                options.success(data);
            });
            break;
        case "update":
            dao.update(model, function (data) {
                options.success(data);
            });
            break;
        case "delete":
            dao.destroy(model, function (data) {
                options.success(data);
            });
            break;
    }

};

And finally, we need to open the database (and populate it with sample data) at startup:

window.startApp = function () {
    var self = this;
    window.db = window.openDatabase("WineCellar", "1.0", "WineCellar Demo DB", 200000);
    var wineDAO = new WineDAO(self.db);
    wineDAO.populate(function () {
        this.templateLoader.load(['wine-list', 'wine-details', 'wine-list-item'], function () {
            self.app = new AppRouter();
            Backbone.history.start();
        });
    })
}

Download

I added this version of the application to the backbone-cellar GitHub repository here.

NOTE: You will have to create a PhoneGap project (see documentation here) or use the hosted build service to package the code as a native app for different mobile platforms.

Casting basic types from ActionScript 3 to C

Your probably first and immediate question when programming ANE for iOS is: “How to transfer data from AS3 to C and back to AS3?”. Once you break through this essential stage you enter the world of endless possibilities in Adobe AIR with native extensions.

There has been already plenty of articles on how to begin writing your native extensions, I am not going to explain that, just share the source code needed for that.
I am using Adobe Flash Builder 4.6 with ANE support for AS3 and Apple Xcode for coding the C part + packaging the static library (*.a file).
But let me quickly remind you the workflow. You need 3 projects, one is Flex Library project in FB (AS3 interface for C as *.swc), second is native library in Xcode (C interface and implementation as static library *.a), third is the actual test project in FB to run the native extension (*.ane).

Fig: Native Extension Creation Process

In this tutorial I want to illustrate how to transfer some basic types like Number, String, int/uint and Boolean from AS3 to C, process them and return back to AS3. In the next tutorial, we will look into more complex data types like Array, ByteArray and BitmapData.

Good starting point: Native C API Reference for Adobe AIR extensions. There is also a good page Coding native side with C for AIR.

But there is nothing better than samples. Let’s dig into some real code:

Number (AS3->C->AS3) Sum function

AS3 part:

public function sum(number1:Number,number2:Number):Number{
       // call C function sum with 2 arguments, number 1 and number2 and return a value
	var ret:Number = context.call("sum",number1,number2) as Number;
	return ret;
}

C part:

FREObject sum(FREContext ctx, void* funcData, uint32_t argc, FREObject argv[]){
    // argc ... argument count, uint
    // argv ... argument values, Array
 
    // retrieve first argument and write it to a variable
    double number1;
    FREGetObjectAsDouble(argv[0], &number1);
 
    // retrieve second argument and write it to a variable
    double number2;
    FREGetObjectAsDouble(argv[1], &number2);
 
    // add first and second number together
    double sum = number1 + number2;
 
    // write computed sum to FREObject that will be returned back to AS3
    FREObject sumToReturn = nil;
    FRENewObjectFromDouble(sum, &sumToReturn);
 
    return sumToReturn;
}

int (AS3->C->AS3) Subtract function

AS3 part:

public function subtract(int1:int,int2:int):int{
	var ret:Number = context.call("subtract",int1,int2) as int;
	return ret;
}

C part:

FREObject subtract(FREContext ctx, void* funcData, uint32_t argc, FREObject argv[]){
    int32_t int1;
    FREGetObjectAsInt32(argv[0], &int1);
 
    int32_t int2;
    FREGetObjectAsInt32(argv[1], &int2);
 
    int32_t sum = int1 - int2;
 
    NSLog(@"%d-%d=%d",int1,int2,sum);
 
    FREObject sumToReturn = nil;
    FRENewObjectFromInt32(sum, &sumToReturn);
 
    return sumToReturn;
}

uint (AS3->C->AS3) Multiply function

AS3 part:

public function multiply(uint1:uint,uint2:uint):uint{
	var ret:Number = context.call("multiply",uint1,uint2) as uint;
	return ret;
}

C part:

FREObject multiply(FREContext ctx, void* funcData, uint32_t argc, FREObject argv[]){
    uint32_t uint1;
    FREGetObjectAsUint32(argv[0], &uint1);
 
    uint32_t uint2;
    FREGetObjectAsUint32(argv[1], &uint2);
 
    uint32_t sum = uint1*uint2;
 
    NSLog(@"%d*%d=%d",uint1,uint2,sum);
 
    FREObject sumToReturn = nil;
    FRENewObjectFromUint32(sum, &sumToReturn);
 
    return sumToReturn;
}

String (AS3->C->AS3) Concatenate function

AS3 part:

public function concatenate(str1:String,str2:String):String{
	var ret:String = context.call("concatenate",str1,str2) as String;
	return ret;
}

C/Obj-C part:
// in this sample I wanted to go even further and utilize Obj-C function for concatenating strings and also demonstrate how to pass strings between C and Obj-C

FREObject concatenate(FREContext ctx, void* funcData, uint32_t argc, FREObject argv[]){
    // To be filled
    uint32_t string1Length;
    const uint8_t *string1;
    FREGetObjectAsUTF8(argv[0], &string1Length, &string1);
 
    uint32_t string2Length;
    const uint8_t *string2;
    FREGetObjectAsUTF8(argv[1], &string2Length, &string2);
 
    // Convert C strings to Obj-C strings
    NSString *string1ObjC = [NSString stringWithUTF8String:(char*)string1];
    NSString *string2ObjC = [NSString stringWithUTF8String:(char*)string2];
 
    // Concat strings
    NSString *returnString = [string1ObjC stringByAppendingString:string2ObjC];
 
    // Convert Obj-C string to C UTF8String
    const char *str = [returnString UTF8String];
 
    // Prepare for AS3
    FREObject retStr;
	FRENewObjectFromUTF8(strlen(str)+1, (const uint8_t*)str, &retStr);
 
    // Return data back to ActionScript
	return retStr;
}

Boolean (AS3->C->AS3) Opposite function

AS3 part:

public function opposite(bool:Boolean):Boolean{
	var ret:Boolean = context.call("opposite",bool) as Boolean;
	return ret;
}

C part:

FREObject opposite(FREContext ctx, void* funcData, uint32_t argc, FREObject argv[]){
    uint32_t boolean;
    FREGetObjectAsBool(argv[0], &boolean);
 
    uint32_t oppositeValue = !boolean;
 
    FREObject retBool = nil;
    FRENewObjectFromBool(oppositeValue, &retBool);
 
    return retBool;   
}

Full C-part source code: IOSExtension.m
Download whole C-project for Xcode

Complete AS3 SWC lib part: IOSExtension.as

Test project source (SWF/IPA): IOSExtensionTest.as

For compiling native extension (*.ane) I use this command in Terminal.app.

compileExtension.sh file/script

unzip -o IOSExtension.swc
 
/PATH/TO/FLEX_AIR_SDK/bin/adt -package -target ane IOSExtension.ane extension.xml -swc IOSExtension.swc -platform iPhone-ARM library.swf libIOSExtension.a

extension.xml looks like this:

<extension xmlns="http://ns.adobe.com/air/extension/2.5">
    <id>com.krcha.IOSExtension</id>
    <versionNumber>1</versionNumber>
    <platforms>
      <platform name="iPhone-ARM">
        <applicationDeployment>
          <nativeLibrary>libIOSExtension.a</nativeLibrary>
          <initializer>ADBEExtInitializer</initializer>
          <finalizer>ADBEExtFinalizer</finalizer>
        </applicationDeployment>
      </platform>
    </platforms>
</extension>

PhoneGap — if you are not familiar with it — is an open source platform that allows you develop cross-platform Mobile applications using HTML and JavaScript. Specifically, it allows you to:

1. Package an HTML application as a native app on all the key mobile platforms (iOS, Android, BlackBerry, Windows Phone, WebOS, Symbian, Bada).
2. Access your device capabilities (Camera, GPS, database, accelerometer, etc) using a cross-platform JavaScript API.

Backbone.js is a great framework to give structure to your web application regardless of where it is running: in a traditional Web Browser, or as an app packaged with PhoneGap.

So, here is the app…

The UI is intentionally plain to keep the focus on the architectural framework. This is a simple ‘consumer’ version of the application: It allows you to look for wines in your Wine Cellar. The tutorial application mentioned above is an ‘admin’ version: You can create, update, delete wines in your Wine Cellar. Most of the code is shared between the Mobile ‘consumer’ version and the browser-based ‘admin’ version.

In this version, the application gets the data from RESTful services hosted on my server. In my next post, I will provide another version of the application that gets the data using a local database on your device.

Download

I added the source code for the mobile application to the backbone-cellar GitHub repository. You can download the zip file here. For your convenience, I created an iOS directory with the Xcode project and an Android directory with the Eclipse project. The core application is in the www directory (iOS and android) and it is the same code for both iOS and Android.

If you want to run the application on your Android device without installing the project, you can also download the apk file available in the bin directory.

Web browser modernization has paved the way to move from the old “browser as a thin client” model to more of a Client/Server model where the client-side of the application actually runs in the browser. There are a lot of names for this new model, Ajax being a step along the way, and perhaps HTML5 being the full realization of Client/Server web apps.

There are hundreds of new libraries, tools, programming languages, and services that support the creation of these next generation web (and mobile) apps. One thing that is certainly lacking is one cohesive, end-to-end solution. I have no doubt that we will be seeing those crop up soon, but in the mean time lets pick a few libraries and build a couple simple apps to get a better understanding of what this new model looks like.

I’ve decided to try this with a stack consisting of Scala for my back-end code, BlueEyes for handling data access and serialization with transport over HTTP, MongoDB for data storage, and JavaScript with jQuery for the client-side. I’m going to keep this very simple and not pull in anything else. In future articles I’ll expand on this foundation.

So lets dive into some code. All of the code is on GitHub. If you want to get a local copy just do:

git clone git://github.com/jamesward/helloblueeyes.git

This project uses the Scala Build Tool (SBT) for downloading dependencies, compiling, and packaging. Follow the SBT setup instructions if you want to be able to compile the code on your machine. If you want to use IntelliJ or Eclipse then run one of the following commands:

sbt gen-idea

sbt eclipse

Lets start with some BlueEyes basics. BlueEyes is a lightweight web framework built on Netty (a really high performance, NIO-based HTTP library). BlueEyes makes it easy to define a tree of HTTP request handling patterns. I chose BlueEyes because it’s really lightweight and utilizes some nice features of the Scala language to make the code very concise. It’s kinda like a DSL for HTTP request handling.

To get started with BlueEyes we first need to create an AppServer that provides a way to start the server and a place to plug services into. Here is the code for the AppServer:

package net.interdoodle.example
 
object AppServer extends EnvBlueEyesServer with HelloHtmlServices with HelloJsonServices with HelloStartupShutdownServices with HelloMongoServices

My AppServer is an object which means it’s a singleton (that makes sense because I can’t have more than one of these in a single instance). The AppServer extends EnvBlueEyesServer which is a wrapper around the base BlueEyesServer that provides a way to get the HTTP port via an environment variable (this is necessary for running on Heroku – which we will get to later). The AppServer composes in a bunch of Services that actually setup HTTP request pattern trees.

Starting with the simplest one, HelloHtmlServices we have:

trait HelloHtmlServices extends BlueEyesServiceBuilder with BijectionsChunkString {
  val helloHtml = service("helloHtml", "0.1") { context =>
      request {
        path("/") {
          produce(text/html) {
            get { request =>
              val content = <html>
                <body>Hello, world!</body>
              </html>
              val response = HttpResponse(content = Some(content.buildString(true)))
              Future.sync(response)
          }
        }
      }
    }
  }
}

Using the BlueEyesServiceBuilder the HelloHtmlServices trait creates a service that consists of a big pattern match that goes something like this: For a request to path “/”, produce an HTML response when there is a HTTP GET request. Notice that the response is actually wrapped in a Future. This is an important part of the next generation web app architecture. Because the underlying HTTP server is NIO-based (non-blocking), the actual HTTP handling threads can be very efficiently managed so that a thread is only in use when actual IO is happening. BlueEyes supports this by using Future wrapped responses, allowing the HTTP thread to be unblocked by back-end processing.

If you want to try this out locally run the following to compile the app and create a Unix script that makes it easy to start the AppServer:

sbt stage

Now start the AppServer process:

target/start net.interdoodle.example.AppServer

Verify that HelloHtmlServices is working by opening the following URL in your browser:
http://localhost:8080/

Now lets walk through a few steps to deploy this application on the cloud with Heroku.
Step 1) Sign up for a Heroku account
Step 2) Install the Heroku Toolbelt
Step 3) Login to Heroku from the command line:

heroku login

Step 4) Create a new application on Heroku using the Cedar stack:

heroku create -s cedar

Step 5) Deploy the app on Heroku:

git push heroku master

Step 6) Verify that the app works in your browser:

heroku open

Great! We have an app built with Scala and BlueEyes running on the cloud. Now for the next piece of the architecture. The UI of the application will be written in JavaScript and will run on the client-side. But we need to have a way to transfer data between the client and the server. JSON has become the regular way to do this because it is parsed easily and quickly on the client. So a BlueEyes service will generate some JSON data that can then be consumed by a JavaScript application running on the client. But how do we get that JavaScript application running on the client? This is the next piece of the architecture.

Ideally the JSON services are served separately from the client-side of the application (where the client-side includes all HTML, JavaScript, CSS, images, and other static assets). It is also ideal to serve the client-side from a Content Delivery Network (CDN) so that it’s edge cached and loads super fast. Dynamic assets (the JSON services) can’t be edge cached so there is a logical (and functional) separation between the client-side and the server-side. But there is a problem with this approach.

The CDN and the JSON services hosts each have different DNS names and browsers don’t allow cross-origin requests (actually they don’t allow access to the responses). There are a few different ways to deal with this (JSONP, iframe hackery, etc) but the approach I’m taking is simple. The JSON services server will serve an entry point / thin shim web page. That shim then loads the rest of the client-side from the CDN and since the origin of the web page is the same as the JSON services, there is no need to make a cross-origin request. (Side note: There is a new way to do cross-origin requests cleanly and natively in the browser, but it’s not ubiquitously supported yet.)

Here is HelloJsonServices that illustrates these patterns:

trait HelloJsonServices extends BlueEyesServiceBuilder with BijectionsChunkJson with BijectionsChunkString {
  val helloJson:HttpService[ByteChunk] = service("helloJson", "0.1") { context:HttpServiceContext =>
    request {
      path("/json") {
        contentType(application/json) {
          get { request: HttpRequest[JValue] =>
            val jstring = JString("Hello World!")
            val jfield = JField("result", jstring)
            val jobject = JObject(jfield :: Nil)
            val response = HttpResponse[JValue](content = Some(jobject))
            Future.sync(response)
          }
        } ~
        produce(text/html) {
          get { request: HttpRequest[ByteChunk] =>
            val contentUrl = System.getenv("CONTENT_URL")
 
            val content = <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
                <script type="text/javascript" src={contentUrl + "jquery-1.7.min.js"}></script>
                <script type="text/javascript" src={contentUrl + "hello_json.js"}></script>
              </head>
              <body>
              </body>
            </html>
            Future.sync(HttpResponse[String](content = Some(content.buildString(true))))
          }
        }
      }
    }
  }
}

This service handles requests to “/json” and if the requested content type is JSON then a simple JSON object is returned. If the requested content is HTML then the shim web page is returned. Inside the shim web page an environment variable, CONTENT_URL, is used to specify the URLs to load the JavaScript for the application.

The first JavaScript is the minified jQuery library. This abstracts some browser differences, makes doing the JSON request and modifying the webpage very simple. Here is the main client application hello_json.js:

$(function() {
    $.ajax("/json", {
        contentType: "application/json",
        success: function(data) {
            $("body").append(data.result);
        }
    });
});

This application has a function handler for when the page has loaded. That function makes an ajax request to “/json” with the “application/json” content type. Then on a successful response it just appends the result into the web page.

To run this locally first set the CONTENT_URL environment variable to the CDN where I’ve put the JavaScript files:

export CONTENT_URL=http://cdn-helloblueeyes.interdoodle.net/

Now start (or restart) the server and open:
http://localhost:8080/json

To test the JSON service locally run:

curl --header "Content-Type:application/json" http://localhost:8080/json

You can also use a local static file server for testing, just run net.interdoodle.example.httpstaticfileserver.HttpStaticFileServer and set CONTENT_URL accordingly.

If you want to try this on Heroku then set CONTENT_URL for your application:

heroku config:add CONTENT_URL=http://cdn-helloblueeyes.interdoodle.net/

This will set the environment variable and restart the application. Then navigate to the your Heroku application’s “/json” URL in your browser. Now both the server-side and client-side are cloudified!

Side Note: I’m using Amazon CloudFront as the CDN for this example. But any CDN would work fine. There are various ways to upload files to Amazon CloudFront (actually they get uploaded to Amazon S3) but one thing I’m looking into is a SBT plugin that will do this.

Now lets add some simple data access into the mix. I’ve chosen MongoDB because it has native support for JSON and we can take advantage of Hammersmith – a non-blocking MongoDB driver. In this example I’m not using Hammersmith since support for it hasn’t been officially added to BlueEyes (but at least there is the opportunity to easily switch to Hammersmith in the future).

Here is the code for HelloMongoServices:

trait HelloMongoServices extends BlueEyesServiceBuilder with MongoQueryBuilder with BijectionsChunkJson with BijectionsChunkString {
 
  val helloMongo = service("helloMongo", "0.1") {
    logging { log => context =>
      startup {
        // use MONGOLAB_URI in form: mongodb://username:password@host:port/database
        val mongolabUri = Properties.envOrElse("MONGOLAB_URI", "mongodb://127.0.0.1:27017/hello")
        val mongoURI = new MongoURI(mongolabUri)
 
        HelloConfig(new EnvMongo(mongoURI, context.config.configMap("mongo"))).future
      } ->
      request { helloConfig: HelloConfig =>
        path("/mongo") {
          contentType(application/json) {
            get { request: HttpRequest[JValue] =>
              helloConfig.database(selectAll.from("bars")) map { records =>
                HttpResponse[JValue](content = Some(JArray(records.toList)))
              }
            }
          } ~
          contentType(application/json) {
            post { request: HttpRequest[JValue] =>
              request.content map { jv: JValue =>
                helloConfig.database(insert(jv --> classOf[JObject]).into("bars"))
                Future.sync(HttpResponse[JValue](content = request.content))
              } getOrElse {
                Future.sync(HttpResponse[JValue](status = HttpStatus(BadRequest)))
              }
            }
          } ~
          produce(text/html) {
            get { request: HttpRequest[ByteChunk] =>
              val contentUrl = System.getenv("CONTENT_URL")
 
              val content = <html xmlns="http://www.w3.org/1999/xhtml">
                              <head>
                                <script type="text/javascript" src={contentUrl + "jquery-1.7.min.js"}></script>
                                <script type="text/javascript" src={contentUrl + "hello_mongo.js"}></script>
                              </head>
                              <body>
                              </body>
                            </html>
              Future.sync(HttpResponse[String](content = Some(content.buildString(true))))
            }
          }
        }
      } ->
      shutdown { helloConfig: HelloConfig =>
        Future.sync(())
      }
    }
  }
}

This service has a startup hook that creates a MongoDB connection based on the MONGOLAB_URI environment variable or a default value. Then there are three request handlers for the “/mongo” path. The first handles JSON HTTP GET requests by fetching some data from MongoDB and returning it. A JSON HTTP POST handler inserts the JSON that was sent into MongoDB. Then there is a HTML HTTP GET request handler that returns the web page shim that loads the JavaScript from the CDN.

Here is the client-side of the application hello_mongo.js:

$(function() {
 
    $("body").append('<h4>Bars:</h4>');
    $("body").append('<ul id="bars"></ul>');
    $("body").append('<input id="bar"/>');
    $("body").append('<button id="submit">GO!</button>');
 
 
    $("#submit").click(addbar);
    $("#bar").keyup(function(key) {
        if (key.which == 13) {
            addbar();
        }
    });
 
    loadbars();
 
});
 
function loadbars() {
    $.ajax("/mongo", {
        contentType: "application/json",
        success: function(data) {
            $("#bars").children().remove();
            $.each(data, function(index, item) {
                $("#bars").append("<li>" + item.name + "</li>");
            });
        }
    });
}
 
function addbar() {
    $.ajax({
        url: "/mongo",
        type: 'post',
        dataType: 'json',
        success: loadbars,
        data: '{"name": "' + $("#bar").val() + '"}',
        contentType: 'application/json'
    });
}

This JavaScript application starts by adding some elements to the page for displaying and entering “bars”. The loadbars() function makes a ajax GET request to the JSON service and then appends the result into the element on the page with the id of bars. The addbar() method makes a POST request to the JSON service, passing serialized JSON containing the name of the “bar” to the JSON service, then on success it calls loadbars().

If you want to run this locally then you will need a MongoDB server setup and running locally. Make sure CONTENT_URL is set correctly and if your MongoDB settings differ from the default, then set the MONGOLAB_URI environment variable. Start the AppServer process and then open:
http://localhost:8080/mongo

You should be able to add new “bars” and see them listed.

To run on Heroku you will need to add the MongoLab add-on. When the MongoLab add-on is added the MONGOLAB_URI environment variable on your Heroku application will be automatically set with the connection information for the newly provisioned MongoDB system. To add the MongoLab add-on just run:

heroku addons:add mongolab

Now open your Heroku app’s “/mongo” URL in your browser. Wahoo! You have a client/server browser app running on the cloud! Hopefully that has helped you to get a glimpse of where web application architecture is going. This is just part of the picture and I have a few other articles planned that will cover some of the other pieces. So keep watching here and let me know what you think.

Acknowledgments: Mike Slinn, a friend of mine that does Scala and Akka consulting, helped me understand BlueEyes and helped write some of the code for this project. Mike is also the author of the recently released book Composable Futures with Akka 2.0 with Java and Scala Code Examples.

A while back, I promised to write some of the backstage tips that made it possible for Machinarium (1 GB sources!, 28 SWFs!) to run on an iPad with AIR, which requires only a single SWF.

One of the issues you run into is how to join/concatenate 28 SWFs into single SWF. I wrote an article about using SWC libraries for that here Compiling big Flash/AIR projects with lot of SWFs for iOS. This sometimes works, but very often the workflow is more complex and you want to keep the same SWF files for Android and iOS and use them at least in a bit similar way. On Android you can however load SWF files at the runtime and this is very effective for the memory usage. On iOS you have to watch this, especially when you have everything in a single SWF. So, ideally you place all assets into separate files and load them and dispose them on-demand. But that’s more of a general problem you should keep in mind – every asset that doesn’t contain AS3 (pictures, videos, music), put aside. But back to the topic.

Now comes the magic by David ‘Oldes’ Oliva (the lead developer of Machinarium) from Amanita Design, who made it all possible and wrote a script which can be used for joining SWFs together.

Note: This solution allows you to use multiple SWF files containing AS3 script and logic in each of them, not only for assets. That’s why it’s so powerful.

*prerequisite: you’ll need to understand how to work with the command-line on Mac or Windows.

Steps:

1) Prepare SWFs like you were using them the standard way, but instead of loading them dynamically via the Loader class, SWFLoader or a similar mechanism, each SWF has to be Class (or contain at least one, can contain more), which you can instantiate. That’s because once you join all SWFs together, you will be instantiating it’s contents, not loading.

2) Download the samples package rswf-join-example.7z (for unzipping use 7-zip compatible tool) / UPDATE: the file has been updated to support bitmap reduction

3) Download the REBOL script view environment http://www.rebol.com/download-view.html

Using the tool:

4) Navigate to the samples folder. There are three scripts that you might want adjust to fit your workflow:

compile-and-run.r
- this is the rebol script that does part of the job and runs Game.bat

Game.bat
- here you want to adjust the path to your Flex/AIR SDK so it points to the adl command

cd ./public/
/path/to/AIR_SDK/bin/adl Game.xml

Game.rswf
- here you specify the SWFs you want to compile together, in the samples, you can see FLAs and it’s content to understand how to prepare your own workflow.

5) Run the compilation (of course change the path to rebol to the directory, where you have downloaded it or stored it)

/path/to/REBOL/rebol compile-and-run.r

*At this point, if you get permission denied on some of the files, make sure all the processing files have the proper rights; you can set the rights using chmod, for instance:

chmod 777 filename.bat

also 777 is pretty open rule, so consider 755 or 775 or similar.

6) Once the compilation is done, the SWF will open and you can successfully use it with adt command from the Flex/AIR SDK to compile the final IPA for iOS.

If you have any questions, please ask in the comments.

Good luck!

If you are new to my Wine Cellar application, it is a simple CRUD app that allows you to manage (create, update, delete) wines in a Wine Cellar. The data is stored in a MySQL database that the client application accesses through a simple RESTful API. This seemed to be a good fit since CRUD applications are often positioned as the sweet spot for Angular.js.

You can run the application here. The UI is intentionally plain to keep the focus on the key learning points. For obvious reasons, this online version is “read-only”. You can download the fully enabled version here.

Application Walkthrough

The best way to get started with Angular.js is to go through the excellent tutorial that is part of the documentation, so I’ll only provide a high level overview of my code here.

Like the Backbone.js implementation, the Angular.js version is a deep-linkable single page application. index.html is defined as follows:

<!DOCTYPE HTML>
<html xmlns:ng="http://angularjs.org">
<head>
<title>Angular Cellar</title>
<link rel="stylesheet" href="css/styles.css" />
</head>

<body ng:controller="RouteCtrl">

<div id="header">
    Angular Cellar
    <button ng:click="addWine()">New Wine</button>
</div>

<div id="sidebar">
    <ng:include src="'tpl/wine-list.html'"></ng:include>
</div>

<div id="content">
    <ng:view></ng:view>
</div>

<script src="lib/angular-0.9.19.min.js" ng:autobind></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>

</body>

</html>

The application is driven by a set of Controllers that I defined in controllers.js as follows:

function RouteCtrl($route) {

    var self = this;

    $route.when('/wines', {template:'tpl/welcome.html'});

    $route.when('/wines/:wineId', {template:'tpl/wine-details.html', controller:WineDetailCtrl});

    $route.otherwise({redirectTo:'/wines'});

    $route.onChange(function () {
        self.params = $route.current.params;
    });

    $route.parent(this);

    this.addWine = function () {
        window.location = "#/wines/add";
    };

}

function WineListCtrl(Wine) {

    this.wines = Wine.query();

}

function WineDetailCtrl(Wine) {

    this.wine = Wine.get({wineId:this.params.wineId});

    this.saveWine = function () {
        if (this.wine.id > 0)
            this.wine.$update({wineId:this.wine.id});
        else
            this.wine.$save();
        window.location = "#/wines";
    }

    this.deleteWine = function () {
        this.wine.$delete({wineId:this.wine.id}, function() {
            alert('Wine ' + wine.name + ' deleted')
            window.location = "#/wines";
        });
    }

}

RouteCtrl defines the routes of the application. Each route is defined by a template that is rendered in <ng:view> inside index.html. There can only be one <ng:view> in a document (more on that later). For example, here is the wine-list.html template:

<ul ng:controller="WineListCtrl">
    <li ng:repeat="wine in wines">
        <a href='#/wines/{{ wine.id }}'>{{ wine.name }}</a>
    </li>
</ul>

The WineListCtrl and WineDetailCtrl controllers provide access to the data using a service defined in services.js as follows:

angular.service('Wine', function ($resource) {
    return $resource('api/wines/:wineId', {}, {
        update: {method:'PUT'}
    });
});

Services provide a great way to abstract your data access logic, and to easily change it without impacting the rest of the application. For example, you could easily change the Wine service to use a Mock service instead of a RESTful service.

Impressions

I was able to build this application in a very limited amount of time with no prior knowledge of the framework. The data-binding implementation is nice, and, in general, the amount of boilerplate code you have to write is very limited. Frameworks are often a matter of style and personal preferences. Angular.js takes a more declarative approach than other frameworks. Based on this initial experience, I would also describe it as more prescriptive: I didn’t have to spend a lot of time wondering what was the best way to do things as Angular.js tends to have clear utilization patterns. I haven’t spend enough time with the framework to determine if that comes at the cost of less control, and I’d love to hear what other people are thinking.

The only problem I ran into while building the application is the “one route / one view” coupling I alluded to above. As suggested in this thread, you can use <ng:include> to bind partials in the page. The same thread also indicates that multiple <ng:views> per route definition will be supported in the future. I was able to handle the simple UI requirements of this app using one <ng:view> and one <ng:include>. For more complex applications, I’d love the routing infrastructure to allow me to easily and arbitrarily add, remove, change, or animate different elements of the DOM when the route changes in order to support deeper UI transformations. I’m sure there are ways to do this. If Angular.js folks are reading this post, I’d love to hear what they think and what’s coming.

Download

The application is available on GitHub here.

You will need the RESTful services to run this application. A PHP version (using the Slim framework) is available as part of the download. If you want to test the application with a Java back-end, you can download the Backbone version here, and reuse its JAX-RS back-end.