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 www directory 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.

Follow @ccoenraets

A number of people have asked for a similar example using a “classic” (non-Ajax) implementation where pages (markup + data) are entirely built at the server-side before being delivered to the client.

So, here is simpler version of the same application built “sans Ajax”. I used PHP in this version, but you can of course use your favorite server-side technology (Java, .NET, CF, RoR, etc).

Run the application

Click here to run the application.

Download the source code

Click here to download the source code. Edit config.php to make sure it matches your database configuration.

Running the Application with PhoneGap

With this implementation, the application files can’t be installed locally on the device since pages are created dynamically on the server side. So, in the PhoneGap application, instead of loading a local HTML file, you point to a file hosted on your web server. Here is the code for my main Android activity. Greg has a great post on this topic (I haven’t tried it on iOS myself yet).

package org.coenraets.directory;

import com.phonegap.DroidGap;

import android.os.Bundle;

public class EmployeeDirectoryJQMPHPActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setBooleanProperty("loadInWebView", true);
        super.loadUrl(
            "http://coenraets.org/apps/directory/jqmphp/index.php");
    }
}

Summary

To recap the difference between the two versions: In the original (Ajax) version, the server side code exposes a set of services consumed by an HTML/JS client. In this new (non-Ajax) version, the server-side code returns fully assembled HTML pages (markup + data).

The original (Ajax) version has many benefits:

1. Your UI code doesn’t have a dependency on a specific server-side technology.
2. Your data access logic doesn’t have a dependency on a specific UI technology.
3. You can manipulate the data on the client side (i.e. sort using different criteria) without requiring a server roundtrip.
4. That decoupled architecture also works offline when working with a local database.

When none of the items above is a requirement of your application, the “non-Ajax” approach may work too and may even have some benefits. In particular, it makes the jQuery Mobile page navigation model easier to handle.

Follow @ccoenraets

Flex is a powerful application framework for building first-class mobile applications for iOS, Android, and the BlackBerry PlayBook using a single programming model, a single tool, and a single code base.

If you are a Java developer, the Flex programming model is also easy to master because it is syntactically very close to Java. The Flex IDE (Flash Builder) is a plugin on top of Eclipse, which means that you can write, debug, and profile your client and server code in the same development environment.

You can also easily integrate Flex applications with a Java back end using the Remoting and Messaging services provided by BlazeDS (open source) or LCDS (commercial license). For Spring developers, the integration is even easier and more powerful using the Spring/BlazeDS integration project, which makes the Flex and Spring combination the best way to build cross-platform iOS, Android, and PlayBook applications with a Java back end.

I put together a new “Flex / Spring Mobile Test Drive” to help developers get started building these applications. The Test Drive consists of a web application with BlazeDS and the “Spring/BlazeDS integration” preconfigured and ready to use. It also includes two sample mobile applications running “out-of-the-box”: An Employee Directory and a Trader Desktop. The Employee directory demonstrates how to use Remoting to access Spring services. The Mobile Trader focuses on the Messaging integration: It shows a Spring component pushing real-time market data updates to a Flex applications.

The project is hosted on GitHub: https://github.com/ccoenraets/flex-spring-mobile-testdrive

Installation

1. Deploy flex-spring-mobile.war to your app server.
2. Import the projects into Flash Builder: (If you don’t have Flash Builder, you can download it here)
   • File > Import > General > Existing Projects into Workspace
   • Select ccoenraets-flex-spring-mobile-testdrive as the Root directory
   • Select all the projects (EmployeeDirectoryJ, flex-spring-mobile, and MobileTraderJ)
   • Click Finish
3. Running the EmployeeDirectory
   • Open config.xml in the src folder and modify the endpoint to match the hostname and port number of your app server
   • Right-click EmployeeDirectoryJ and select Run As > Mobile Application
   • Select a target platform (iOS, Android, or BlackBerry Tablet OS), select On desktop as the launch method and select a device to simulate
   • Click Run
4. Running the MobileTrader Application
   • Right-click MobileTraderJ and select Run As > Mobile Application
   • Select a target platform (iOS, Android, or BlackBerry Tablet OS), select On desktop as the launch method and select a device to simulate
   • Click Run
   • The Settings view is automatically activated the first time you run the application. Enter the MessageBroker base URL, for example: http://localhost:8080/flex-spring-mobile/messagebroker (modify the endpoint to match the hostname and port number of your app server), select a Channel type, click Save Settings, and click Start Server Feed.
   • Access the Watch tab: The list should be automatically updated with the (simulated) real time updates pushed from the Spring web app.

Follow @ccoenraets

This version was built with the shipping version of Flex and Flash Builder 4.5.1 which has built-in support for iOS, Android and the BlackBerry PlayBook.

The most notable change in this version is that I enabled the real time collaboration feature (with your financial advisor). This includes video conference, user interface synchronization, etc. You will need a LiveCycle Collaboration Service room URL to enable this feature. You can sign up for a developer version here: https://afcs.acrobat.com. You can still use the application without enabling the real time collaboration feature.

Usual disclaimer about the source code: This is a sample application, I intentionally cut some corners, etc.

If you haven’t seen the application before, watch it here:

Follow @ccoenraets

NOTE: The shipping version of Flash Builder 4.5 provides full support for Flex projects on Android. Support for Flex projects on iOS and the PlayBook will be available in a June update. More information here.

Usual disclaimer about the source code: This is a sample application, I intentionally cut some corners, etc.

Follow @ccoenraets

For more data-visualization applications built with Flex, check out the Mobile Trader and the Sales Pipeline applications.

Usual disclaimer: I’m not a designer, so this is mostly developer artwork. You can of course polish, customize and style the out-of-the-box-experience.

Follow @ccoenraets

Over the past couple of weeks, I’ve visited many enterprise customers to spread the exciting news and discuss their mobile strategy. I found it interesting that most of them were focusing primarily on tablets (instead of phones), and that the application they were focusing on was almost always a dashboard or at least involved a lot of charting components. It is true that tablets such as the iPad, the Xoom, and the BlackBerry PlayBook are amazing devices for data visualization.

Multi-touch is revolutionizing the way we interact with applications. The idea of user interfaces behaving like real life objects has been kicked around for a long time, and touch screens remove an important barrier. In the area of data visualization, multi-touch can have a particularly transformative effect: there are definitely a lot of opportunities for more “natural” data manipulation and exploration.

So, as an exercise, I built an interactive sales dashboard using Flex to explore the possibilities.

Check out the video (running on an iPad). Of course, the same application can run on Android, on the BlackBerry PlayBook, and in the browser or as a desktop application on traditional computers.

This is just a small example of thinking about data visualization differently. Charts don’t have to be read-only: If the data isn’t right, change it right there (“in place editing”).

I’m looking forward to seeing what people will come up with in this exciting field.

Disclaimer: I’m not a designer. This is still mostly developer artwork. The goal of this demo is to experiment with new ways to visualize and modify data, and not to recommend this specific implementation.

Follow @ccoenraets

To install the application, just search for “Mobile Trader” on the Android Market, or access the following URL from your device’s browser: market://search?q=pname:air.MobileTrader.

You can download the source code (project file) here. You need Flash Builder Burrito (available here) to open this project.

Quick Application Walkthrough

The “Assets” tab shows a summary of your investment portfolio’s progress. You can use swipe and zoom gestures on the chart at the bottom of the screen to navigate through historical data. Notice that if you rotate your device (in landscape), the layout changes to display a full screen view of the chart. The charts in this application are built using simple FXG paths (not mx charts).

The “Watch” tab shows a price grid with values changing in real time. In this demo the feed is simulated at the client side, but I will post another version of the application that connects to an LCDS server. If you tap a stock in the list, you get a real time chart view of the updates of the selected stock.

If you rotate your device, the layout changes to better fit the chart in landscape view.

Follow @ccoenraets

This is a new version of the application. One of the new features in this version is that it allows you to easily import your own data (click the Menu button on your device to access the “Import Data” screen).

You can find more information on the application companion page: http://coenraets.org/directory.

Follow @ccoenraets

NOTE: This tutorial describes how to build the Employee Directory as a native Android application. I also built the same application in Flex deployed on AIR for Android. You can find the Flex version of the application here.

Follow @ccoenraets