I did some research and found a few ways to disable scrolling altogether by intercepting the touchstart and/or touchmove events and calling preventDefault() on the event.   After some experimentation and studying the touch events documentation, I found a near-perfect solution.

In simple terms, when your finger touches the screen, it fires the touchstart event.  I then capture the X/Y coordinates. As soon as your finger moves across the screen, it fires the touchmove event where I capture the new X/Y coordinates. I then check to see which way you are trying to move the page by comparing the movement along the X and Y axis.  If it’s vertical (change in Y > change in X), I call preventDefault(), which prevents the scroll.

Here’s the code:

var xStart, yStart = 0;

document.addEventListener('touchstart',function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
});

document.addEventListener('touchmove',function(e) {
	var xMovement = Math.abs(e.touches[0].screenX - xStart);
	var yMovement = Math.abs(e.touches[0].screenY - yStart);
    if((yMovement * 3) > xMovement) {
		e.preventDefault();
    }
});

Tweaks — I found that simply checking for change in Y > change in X wasn’t enough because I could drag diagonally at a near-45 degree angle and it would still tug my title bar down.  I wanted it to be more of a 20 degree check, so I added a multiplier of 3 on the y-axis movement (I don’t remember enough trig to know that 3  was the right multiplier to use — it was a bit of trial and error).

The results are good.  Grab your iPad and go to http://lottatweets.com, login, and once the tweets are displayed, try to scroll vertically.  The title bar and footer are locked in place nicely.  If you try hard enough, you can find an angle that will allow you to drag diagonally, but it’s good enough!

NOTE:  If you’re building an app with PhoneGap, there is a better solution that I blogged about earlier.  The above solution is for web apps accessed via iOS Safari.

Here is the list so far:

I hope to see you in one of these places if you are in the area.

What is it?

LottaTweets is a web-based tool that fills your screen with tweets in a multi-column, newspaper-style layout allowing super fast reading.  In addition to being able to quickly scan tweets, there are a few neat features:

• Color coded retweet rate — Tweets are color-coded based on the number of re-tweets per minute.  It’s a quick way to visually identify tweets that others have found important enough to share.  There is also a button that will toggle filtering based on the retweet rate.  I originally was only using the re-tweet count, but I realized that it’s not a good measure since older tweets will always have more retweets than new tweets.  The re-tweet rate seems to work well.
• Noise factor — Each tweet shows the noise factor of the tweeter.  The theory is that if you have tweeted 2000 times but only have 50 followers, you are “noisy”.  The noise factor is computed by number_of_tweets / number_of_followers.  There is also a button that will toggle filtering based on noise factor.
• Infinite horizontal scrolling — you can keep scrolling right and it continues to load more tweets for you to read.
• Auto-refresh — if you check the box for auto-refresh, it will prepend any new tweets every 60 seconds.
• It’s read-only –  I configured my Twitter API endpoint to be read-only, so you don’t have to worry about the app tweeting anything on your behalf.  Each tweet has a link (timestamp) to the tweet on Twitter.com so you can reply, retweet, etc.  Each thumbnail image is a link to that user’s Twitter page.

Technical Details and the Development Experience:

• Lotta tweets is a pure JavaScript app with no server infrastructure other than a web server and Twitter’s Anywhere APIs.
• The layout is using CSS3 columns and works great with latest versions of Chrome, Firefox, and Safari.  It’s about 90% functional with Opera (there are some re-layout issues when filters are applied).  CSS3 columns are not supported by IE6/7/8/9, but should be available in IE10.  In order to support IE 6/7/8/9, I would need to use another means of multi-column formatting such as the jQuery columnizer plugin.  For now, I’m leaving it as-is.
• I had a great head start on this project from Tom Germeau’s Fork-a-Twitter-Client (FATC) project.  This provided the basic Twitter API interactions and saved me some hours of hacking.  The project uses a StratifiedJS implementation called OniApollo.  This was the first time I’ve seen StratifiedJS.  It’s a clever way to simplify complicated asynchronous applications.
• I found a few browser bugs (no web dev project would be complete without finding new browser bugs!):
• Safari — I originally set each tweet div with overflow:hidden in case the tweet wrapped beyond the confines of the div.  This worked fine on Chrome, but on Safari, everything in columns two through n was hidden!  There were a lot of blank boxes with hidden text.  Only column one was correctly displayed.  I abandoned overflow:hidden for now since it’s very rarely needed.
• Firefox — Firefox doesn’t use up all of the vertical space when laying out the divs.  I always had a blank space that was a few pixels taller than what is required to hold another row.  I believe that this is a layout issue because it only happens with Firefox.  As a workaround, if the user is using Firefox, I manually increase the height of the wrapper div to trick Firefox into thinking another row will fit.
• Opera — when you resize the screen, or apply a filter, Opera doesn’t handle the re-layout correctly and things get a bit scrambled.
• Mobile — The site runs great on desktop Chrome, Safari, Firefox and Opera.  It runs OK in Safari on iPad, but the scrolling is a bit un-refined and slow.  I’ll work on this soon.  I haven’t tested yet on an Android tablet.  iPhone and other mobile phones are really too small for this type of layout.
• The font in the top bar is Felt Tip Roman, a font available on TypeKit.com, a fantastic service that I’ve only used once before on Phraffle.com.
• I use Modernizr to check if the user’s browser supports CSS3 columns.  A simple alert() is displayed if not.
• The Twitter Anywhere API uses OAuth to authenticate the user, but the cookie it drops is a session-only cookie, so you will have to re-connect each time you access the page after closing the browser.  The subsequent connects should only require a simple confirmation click and not your email/password.  If the site gets decent traction, I’ll look into using the “Sign into Twitter” APIs, which will give me more control over it.
• Yes, I know, I need a designer! (don’t we all?!)
• There is currently a bug – if you turn on a filter and it results in zero tweets, it will crash.  The workaround is to follow more people!
• The code is a bit messy and still fairly hack-ish, but it’s fairly easy to understand.  View the source, and let me know if you have any suggestions.

Any suggestions on features?

Any suggestions on code/architecture?

In this article, I describe a simple data synchronization strategy that uses the device’s (or browser’s) SQLite database. The implementation currently leverages the Web SQL API (even though the W3C is no longer actively maintaining the spec) because both iOS and Android support it, but they don’t support IndexedDB, the official alternative. However, the API described below — getLastSync(), getChanges(), applyChanges() — defines a generic synchronization contract, and the solution can be expanded and made “pluggable”: You could create different synchronization objects, each providing a different implementation of these methods. You could then choose which object to plug in based on the context and the platform your application is running on.

Try it in the Playground

Before looking at the code, you can try some offline syncing in this a hosted playground:

1. Open the Offline Client Playground in Chrome or Safari (they both support Web SQL).
2. Click the Synchronize button.
3. Look at the log (the textarea in the middle of the screen): Because it’s the first time you use the application, all the employees have been downloaded from the server and inserted in your local SQLite database.
4. Clear the log, click the Synchronize button, and look at the log again: because you now have an up-to-date local version of the data, the server didn’t return any change and your local database remains unchanged.
5. In another tab, open the Server Admin PlayGround.
6. Modify an existing employee and click Save. (Don’t worry, it’s using your own session-based data set).
7. Go back to the Offline Client tab, click Synchronize, and notice that the server returned one change, and that it was applied to your local database.
8. Go back to the Server Admin tab and modify (create, update, delete) other employees. Switch back to the Offline Client tab, click Synchronize, and see how these changes are applied to your local database.
9. You can also use the Resources Tab in the Chrome Developer Tools to inspect your local database.

Server API

The only piece of infrastructure you need at the server side is an API that returns the items that have changed (created, updated, or deleted) since a specific moment in time expressed as a timestamp.

Here is the RESTful API call used in my application:

http://coenraets.org/offline-sync/api/employees?modifiedSince=2012-03-01 10:20:56

The format of the data returned by the server is up to you and is part of the contract between the client and the server. In this application, the server returns the changes as an array of JSON objects. The server-side technology (RoR, PHP, Java, .NET, …) and database system (SQL, NoSQL, …) you use to generate the list of changes is also totally up to you. I provide a simple PHP implementation as part of the source code. That implementation manages a session-based data set that provides an isolated and transient playground. In a real-life application, you’d obviously get the data from some sort of database.

Client API

At the client side, our synchronization API consists of three methods.

getLastSync()

A method that returns a timestamp to be used as the query parameter for the next synchronization request. A common practice is to persist a timestamp after each synchronization request. But things can go wrong and the timestamp itself can get out-of-sync. I prefer to “recalculate” the lastSync timestamp before each synchronization request.

getLastSync: function(callback) {
    this.db.transaction(
        function(tx) {
            var sql = "SELECT MAX(lastModified) as lastSync FROM employee";
            tx.executeSql(sql, this.txErrorHandler,
                function(tx, results) {
                    var lastSync = results.rows.item(0).lastSync;
                    callback(lastSync);
                }
            );
        }
    );
}

getChanges()

This is a wrapper around an Ajax call to the server-side API that returns the items that have changed (created, updated, or deleted) since a specific moment in time defined in the modifiedSince parameter.

getChanges: function(syncURL, modifiedSince, callback) {

    $.ajax({
        url: syncURL,
        data: {modifiedSince: modifiedSince},
        dataType:"json",
        success:function (changes) {
            callback(changes);
        },
        error: function(model, response) {
            alert(response.responseText);
        }
    });

}

applyChanges()

A method that persists the changes in your local data store. Notice that SQLite supports a convenient “INSERT OR REPLACE” statement so that you don’t have to determine if you are dealing with a new or existing employee before persisting it.

applyChanges: function(employees, callback) {
    this.db.transaction(
        function(tx) {
            var l = employees.length;
            var sql =
                "INSERT OR REPLACE INTO employee (id, firstName, lastName, title, officePhone, deleted, lastModified) " +
                "VALUES (?, ?, ?, ?, ?, ?, ?)";
            var e;
            for (var i = 0; i < l; i++) {
                e = employees[i];
                var params = [e.id, e.firstName, e.lastName, e.title, e.officePhone, e.deleted, e.lastModified];
                tx.executeSql(sql, params);
            }
        },
        this.txErrorHandler,
        function(tx) {
            callback();
        }
    );
}

Synchronization Logic

With these server and client APIs in place, you can choreograph a data synchronization process as follows:

sync: function(syncURL, callback) {

    var self = this;
    this.getLastSync(function(lastSync){
        self.getChanges(syncURL, lastSync,
            function (changes) {
                self.applyChanges(changes, callback);
            }
        );
    });

}

Final Notes

• This solution currently supports unidirectional (server to client) data synchronization. It could easily be expanded to support bidirectional synchronization.
• This solution currently implements “logical deletes”: items are not physically deleted from the table, but the value of their “deleted” column is set to true.
• As mentioned above, you could replace the Web SQL implementation with another data access strategy. For example, take a look at Brian Leroux’ Lawnchair for another local persistence solution.

Source Code

The source code is available in this GitHub repository.

The trick is, once you select that option a project is created and opened just fine, but you MUST actually Run the application first to cause the special www folder (specific to PhoneGap projects and containing the main .js file PhoneGap needs to work) to be created in the same folder as the .xcodeproject file just created.

The instructions do mention executing the project and that you will get an error at that point, but don’t make it entirely clear that the important www folder will actually be created at that step. If you’re like me, you might decide to skip that instruction because you know it’s not going to work yet anyway since PhoneGap needs the www folder copied in. Yes, I can admit I did this the first time . Then you will probably try to follow the rest of the instructions to copy that www folder in and find that it’s not there. My personal assumption when I did this the first time is that the www folder was getting created for me when I selected the new Cordova-based Application option. Now that I have more experience, I can see how you may not ALWAYS want that www folder created upon project creation, such as the case where you are copying an existing one in, however I will have to follow-up more on this to see if there are changes coming in this workflow.

To illustrate, after creating your Cordova-based Application in XCode, if you right click on the root of the project in XCode and say Show in Finder, you will see this:

But after you actually Run the project in XCode and receive errors, then stop and right-click again on that root project in XCode to Show in Finder, you will the www folder was in fact created and is ready to copy in to XCode:

If you’re a developer that has run into this yourself (not one of those that always follows specific directions and never makes ANY assumptions ) then I hope this helped you quickly get to the bottom of it .

NOTE: This is specific to creating a brand new project, not porting over an existing www folder that already had the necessary contents where there is no need for a default one to be created.

However, I also discovered that starting with PhoneGap 1.5 (release notes), a new key was added to the PhoneGap.plist (now Cordova.plist) called UIWebViewBounce.  It’s set to YES by default (I have no idea why).  If you set it to NO, your app will be anchored in with nails and the bounce removed.

This is also now configurable with PhoneGap Build by setting webviewbounce to false in your config.xml (documented here).

What is it?

The crux of PhoneGap is essentially a big ‘ol .js file (per platform, separate one for iOS vs Android etc) along with some simple native code to enable it to work. In the main JavaScript file (phonegap.js or cordova.js) are a bunch of functions that give you access to native features including the camera, compass, accelerometer, file system, storage access, media capture, audio playback, notifications, contacts and network connection status etc, similar to what Adobe AIR APIs offer, with the addition of a couple more. You write your applications in HTML/JavaScript and use CSS to style them. PhoneGap apps are wrapped in a native web container component, which is why your HTML/JS/CSS work. This also means there is a dependency for your phone’s browser to be based on the WebKit engine. This really isn’t an issue though since WebKit is the default for iOS, Android, BlackBerry Tablet OS and webOS currently. A great overview of commonly asked questions about PhoneGap can be found on my teammate Andy Trice’s blog, as well as a bunch of other great PhoneGap posts, so definitely check out his blog for heaps of good content.

How Does it Work?

The API functions in the phonegap.js (or most recently cordova.js) files call native plugin/extension code to provide the access to the native features through JavaScript exec calls. If you’re an AIR developer, it’s similar to the AIR Native Extensions model, except in PhoneGap they’re called plugins, and the set of APIs listed above (notifications, compass etc) are included and set up for you by default in the PhoneGap download. There are a bunch of other open source plugins available too which can easily be added to your project, or if you don’t find one you need, they’re easy to write. Here you can find instructions on how to write one for Android, and here for iOS. You can see that the JavaScript exec calls for iOS use .h/.m files for the actual native implementation, and .java for Android.

When you’re ready to use one of the APIs in your application, it’s very straightforward and easy to use. Here’s an example of adding a notification to your application:

Code Example

...
    function showAlert() {
        navigator.notification.alert(
            'You are the winner!',  // message
            alertDismissed,         // callback
            'Game Over',            // title
            'Done'                  // buttonName
        );
    }
...

Here’s the result:

You will find that all of the APIs are accessed through a navigator variable (declared in the phonegap.js file). To see examples of how to use all of them, check out the nicely done API reference docs.

If you’re curious of how this works underneath, here’s the notification code snippet straight out of the cordova.js file (NOTE: remember phonegap and cordova are currently the same library, so if you download it now you may find that your main API files are named cordova.js file instead of phonegap.js):

phonegap.js Source for Notifications

...
/**
 * Open a native alert dialog, with a customizable title and button text.
 *
 * @param {String} message              Message to print in the body of the alert
 * @param {Function} completeCallback   The callback that is called when user clicks on a button.
 * @param {String} title                Title of the alert dialog (default: Alert)
 * @param {String} buttonLabel          Label of the close button (default: OK)
 */
Notification.prototype.alert = function(message, completeCallback, title, buttonLabel) {
    var _title = title;
    if (title == null || typeof title === 'undefined') {
        _title = "Alert";
    }
    var _buttonLabel = (buttonLabel || "OK");
    <strong>Cordova.exec(completeCallback, null, "org.apache.cordova.notification", "alert", [message,{ "title": _title, "buttonLabel": _buttonLabel}]);</strong>
};

The above code shows the notification alert function definition to use for performing a native alert notification on iOS. The important line there is the Cordova.exec(…) call, which will use the native plugin code for iOS or Java to perform the notification. If you’re extra curious and want to see what the native code looks like for this, you can open the Notification.java or CDVNotification.m files such as shown (note: you need to download the actual cordova/phonegap project source from github here to view the source files for the core plugins. This is only necessary if you wish to view them or want to make your own custom changes to them, typically you would just install from here). I pasted a couple snippets from the native code files below to give an idea:

Java Source for Notifications

public PluginResult execute(String action, JSONArray args, String callbackId) {
    PluginResult.Status status = PluginResult.Status.OK;
    String result = "";   

    try {
      ...
      else if (action.equals("alert")) {
        this.alert(args.getString(0),args.getString(1),args.getString(2), callbackId);
        PluginResult r = new PluginResult(PluginResult.Status.NO_RESULT);
        r.setKeepCallback(true);
        return r;
      }
...

Objective-C Source for Notifications

...
- (void) alert:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options
{
    int argc = [arguments count];

	NSString* callbackId = argc > 0? [arguments objectAtIndex:0] : nil;
	NSString* message = argc > 1? [arguments objectAtIndex:1] : nil;
	NSString* title   = argc > 2? [arguments objectAtIndex:2] : nil;
	NSString* buttons = argc > 3? [arguments objectAtIndex:3] : nil;

	if (!title) {
        title = NSLocalizedString(@"Alert", @"Alert");
    }
	if (!buttons) {
        buttons = NSLocalizedString(@"OK", @"OK");
    }

	CDVAlertView *alertView = [[CDVAlertView alloc]
							  initWithTitle:title
							  message:message
							  delegate:self
							  cancelButtonTitle:nil
							  otherButtonTitles:nil];

	alertView.callbackId = callbackId;

	NSArray* labels = [buttons componentsSeparatedByString:@","];
	int count = [labels count];

	for(int n = 0; n < count; n++)
	{
		[alertView addButtonWithTitle:[labels objectAtIndex:n]];
	}

	[alertView show];
	[alertView release];
}
...

Common Questions

• What kind of UI Components does PhoneGap offer? PhoneGap does not offer UI Components, they leave that implementation up to you with your choice of HTML/JS/CSS or some other UI frameworks available like Twitter Bootstrap, jQuery Mobile, Kendo UI etc…
• How can I consume data in a PhoneGap app? The same way you consume data from a web application – REST, JSON, SOAP etc.
• What’s the difference between PhoneGap and Cordova? Cordova is the Apache Open Source project behind PhoneGap. If this is confusing to you, please read this post!
• What kind of development environment do I need? You can develop in your editor of choice on any platform. There are some workflow tips I can provide and will do so in the next post with my choices for editing, debugging etc. Once you have created your app in your platform of choice, you can just upload the source directly from your source control system or via zip file to PhoneGap Build as the screenshot below shows and it will create a ready to install package for all of the different platforms.

More Resources

Last week, I tried a variation of this at a Tampa meetup with an audience of about 100 people and it worked really well.  Late  Friday night, I created Phraffle (phone + raffle = Phraffle!) — http://phraffle.com.  It’s obviously a very simple and somewhat silly app, but it was fun to build.  It was also my first use of TypeKit (font used in the logo).  The spinning effect is based on a blog post I found by Saurabh Odhyan.  He basically pans an image across a div using JQuery.spritely.  Once the speed increases, the image is switched to a blurred version.   I loved the effect so I took his example and made some modifications until I had the right look and feel.

Let me know if you have any ideas on how to improve this or if you have seen other interesting ways of handling raffles.  I might create a tiny app for phones/tablets for off-line use-cases.  It all depends on how bored I get next weekend.

Details on the events are below:

Tampa Meetup
Orlando Meetup

There were only 10 spots left in the Tampa meetup when I last checked, so if you’re interested, be sure to sign up now !!

To demonstrate these features, I decided to revisit my wine cellar application, which was in need of a serious UI makeover.

You can run the application here.

This online version uses an in-memory datastore: all your changes will be lost the next time you start the application or hit your browser’s refresh button. The image upload feature is also disabled, but you can still drag an image from your file system and drop it in the Wine Form, which is pretty cool (see the note about browser support below). The source code available on GitHub includes a persistent back-end (in addition to the in-memory datastore), and a fully functional implementation of the file upload feature.

Code Highlights

Template Loader

This application features a template loader that now uses jQuery “deferreds” to load the HTML templates more efficiently.

Drag-and-Drop File Upload and HTML 5 File API

To upload an image file for a Wine, drag a file from your file system and drop it in the image box inside the Wine Form: The image is automatically displayed inside the img tag. This is done using the HTML 5 File API and doesn’t require a server roundtrip.

NOTE: This feature only works in Chrome at this time. I will implement an alternative implementation in a future version of the application to provide a consistent behavior across browsers.

The image is uploaded to the server using Ajax (XHR) when you save the form: no page refresh or iframe hack.

Paging

Twitter Bootstrap provides easy markup and styles to create paginated lists. In this application, the Bootstrap markup and styles are “componentized” or “widgetized” into a Backbone View (Paginator), which adds the appropriate pagination behavior.

NOTE: In the current implementation of this application, the entire data set is always retrieved from the server and paging is provided for a cosmetic/layout reason. You could easily replace this implementation with a true paging strategy where pages are lazy-loaded from the server as needed.

Forms

Backbone Cellar also uses Twitter Bootstrap’s forms, which greatly help with form layouts (see WineView).

Validation

Twitter Bootstrap also provides simple markup and styles to highlight validation errors in forms. In Backbone Cellar, Bootstrap’s validation markup and styles are wired with validation rules defined in the Backbone model. Note that at this time, the application doesn’t use the Backbone model’s default validate() method, but custom validateItem() and validateAll() methods instead.

The application also uses other Twitter Bootstrap features including thumbnails, dropdowns, alerts, etc.

Source Code

The source code is available in the bootstrap folder of the backbone-cellar repository on GitHub.

Disclaimer

This is a sample application, not a production application. Some trade-offs were made to keep the code generic, simple and readable. In a real-life application, you should consider implementing a namespacing scheme to keep the global namespace clean, and other optimization techniques such as view and/or data caching.

• Tampa —  5/9/2012 6:00PM please RSVP on the site – if it’s full, try again later in the day
• Orlando —  5/8/2012 6:00PM EDT at Full Sail University – DONE – Had a packed room and over 35 online!

Even if you have looked at PhoneGap already, we’re going much deeper than an introduction.  We’re going to show how to build production-quality, high-performing apps using HTML and JavaScript.  This goes well beyond the typical demos.  Micro-frameworks such as backbone.js, twitter boostrap and more will be used.

The folks at Full Sail University put together a poster for the Orlando event (see below).  Now I feel like we need some sort of cool music playing when we enter the room!

To give you a sense of the activity levels, here are a few ChessJam stats:

• At any time, day or night, there is an average of 100 users logged in playing chess.  We’ve seen it as high as 180 concurrent on weekends.
• Our average load is about 2 or 3 chess moves per second.
• During the month of March, 2012, more than 4,500 users played 128,920 games (5.8 million moves in one month)

Not bad for no marketing budget I think.  It’s not a huge amount of activity compared to a lot of applications, but the performance demands are very high. Serious chess players don’t tolerate delays in response time, so we have to make sure we have plenty of CPU and bandwidth to spare.

Hosting history:

Late 2009/Early 2010 — development and early production – hosting from my home office

During development and the first few months of production, ChessJam was hosted from a computer in my home office.  The cost was around $70/month for FiOS fixed IP address plus whatever power my server was drawing. This was fine until the Florida summer storms took out my power twice in a single month. That’s when we realized the difference between a real data center and my personal data center! It was also a bit stressful when I traveled because it left my wife in charge of late-night server repairs.

Late 2010 — moved to rack mounted servers in a real data center

We acquired two used (circa 2008) rack-mounted IBM servers and rented some rack space at a local data center.  Reliable power and Internet were no longer a problem, but the hardware was ours to manage and eventually repair.  It was better, but it wasn’t a great situation. Once we settled in, our cost was around $190/month (rack space rental and bandwidth).

Why didn’t we move to Amazon EC2 instead of the data center?  We did consider moving from my home office to Amazon EC2 instead of the data center, but at the time, Amazon didn’t have an instance type that suited us.  The small instance type was affordable, but it only offers 1.7GB of memory, which just won’t cut it for our server app (we tried). The next step up was the large instance type with 7.5GB of memory, but it was too expensive and overkill.

Two months ago, Amazon filled the huge gap between the small and large instance type by announcing the new “medium” instance type. It provides 3.75GB of memory as well as a decent amount of CPU for a good price… so we decided it was time to make the move.

Our EC2 configuration:

• Medium EBS instance running Ubuntu Linux.  EBS is “Elastic Block Store”, which basically means that the storage is persistent.  If you haven’t looked at EC2 in the past two years, you might not know that persistent storage on server instances is an now an option.  With EBS storage, you can shut down your server and all of the data is saved (just like a physical server).
• 200GB EBS disk volume – for our MySQL database and fast growing log files.

AWS and bill anxiety

Most people exploring Amazon EC2 ask the same question I asked… “What is this really going to cost me?”. When you dig into how EC2 is priced, you’ll find that there are multiple variables, which creates a bit of uncertainty. Basically, it boils down to the server instance type, the disk space used, and the amount of data moved in and out of the instance. There are other small charges for number of I/Os and any unused IP addresses, but these are typically only a few cents and don’t have much impact on the final bill (based on my experience).

• The server instance — this one is easy and predictable. Amazon charges by the hour. For example, our medium instance is $0.16 per hour. You could fire up a medium server instance and spend a full 8 hour work day playing with it and only pay about $1.30. Not bad! Our app runs 24/7 so 24 hours per day * 30 days = 720 hours per month. So, our monthly cost can be calculated with $0.16 * 720 = $115/month.  (later in this article, I explain how reserved instances work and how they can lower this price by nearly half)
• Disk volume – this one is also easy and predictable as well. It cost $0.10 per GB per month. We have a 200GB volume, so that’s 200*$0.10 = $20/month.
• Disk I/Os — The EC2 pricing page also shows a $0.10 charge per million I/Os. We do about 300,000 I/Os per day (based on my last bill) so that comes to about 9 million I/Os per month resulting in less than $1/month… so we’ll just call that a rounding error.
• Data transfer charges — this is the part that scared us. Amazon charges $0.12 per GB of data transferred out of our EC2 instance. They do not charge for inbound traffic. This method of charging for data is very different than how our data center charges us. The data center uses “95th percentile peak billing” which means we are charged based on the average rate that we move data, not the volume of data moved. I’ll spare you the details, but it doesn’t translate to Amazon’s model. However, our data center provider does have a report that shows the total amount of data transferred each month and we used that number to estimate. Now that we’ve been up and running a few days, I know that we transfer about 250MB of data every hour or 6GB of data per day. So, 6GB * 30 days * $0.12 = $21/month.

Summary: $115.20/month for our server instance, $20/month for our disk volume and $21/month for data transfer which comes to about $156.20/month. That’s already about $30 less than we were paying the data center.  That price is already lower than what we were paying… but with reserved instances, we can lower it considerably.

Saving money with reserved instances

A lot of companies use Amazon EC2 in a much more “elastic” fashion than ChessJam does.  They set up load balancers and auto-scaling to dynamically increase and decrease instances based on the load. However, our app is not nearly that sophisticated (although eventually our usage may justify re-architecting our back end!).  Our app uses a consistent amount of EC2 resources.  Thankfully, Amazon offers special pricing for this type of use-case called reserved instances. Reserved Instances give you the option to make a one-time payment for each instance you want to reserve and in turn, receive a significant discount on the hourly charge for that instance. Basically, Amazon is rewarding you for being predictable. There are three different options, light utilization, medium utilization, and heavy utilization. Our server is up and running 24/7, so our best deal is the heavy utilization model.

I reserved a medium instance for one year by paying an upfront fee of $390. Now, instead of paying $0.16 per hour, we pay $0.032 per hour (just over 3 cents!).  Some simple math shows the savings:

• With a normal “demand instance”, we paid $0.16 per hour * 24 hours per day * 365 days per year resulting in a yearly cost of $1,401.60 (plus disk, I/O, transfer)
• With the reserved instance, we paid $390 up front and then $0.032 per hour * 24 hours per day * 365 days per year resulting in a yearly cost of $670.32 (plus disk, I/O, transfer)

Bottom line cost including disk, data, etc.

• We paid around $2,280 a year to the data center.
• We now pay $1,160 a year to Amazon EC2 – saving us over $1,000 per year (not counting any hardware costs we could have incurred).

There are two smaller instance types – micro and small.  You might can get by far cheaper for your app/site.  With reserved instance pricing, you can get a micro instance for about $100 per year!  I currently host 6 low-use websites on a single micro instance (local bagel store, my aerial photo site, etc.).

TIP: If you plan to use Amazon’s micro instances, you should be aware of how they throttle CPU.  It’s unique to the micro instance type.  I blogged about this months ago.

TIP: Amazon’s billing data is updated several times per day, so you can quickly determine what your run-rate is for everything. I was able to project our monthly cost after 24 hours of activity.

We didn’t move to EC2 just to save money

Yes, we’re saving some money – that’s awesome, but to be honest, it’s not the reason we moved.   The real reason we wanted to move to a cloud solution like EC2 is for peace of mind and to prevent us from dealing with a hardware failures.  We had a backup server in the data center, but if there was a failure in the primary server, it would likely result in a 30 minute drive to the data center and a few hours in a cold room moving hard drives from server to server and hoping it all goes well.  It was a precarious situation!  Now, if there is a hardware failure (rare, but they happen on EC2), I simply launch a new instance with a few clicks of the mouse, mount our disk volume to it, tweak a few things, and get us back online.  All of this while watching Big Bang Theory in my PJs!

I know that a few of you IT-minded folks are seeing some holes in my final architecture, and yes, you’re correct. The above scheme doesn’t address a disk volume crash. Disk volume crashes are very rare on EC2, but I do plan to make a few more enhancements to the architecture. I could start up a new instance and use it as a slave server to replicate data from the primary server’s database (MySQL).  I could start this backup instance in a completely different zone, which basically means that it’s in a different physical facility.  This would allow us to quickly recover if Amazon has a massive failure like the one a year ago that brought down several popular sites for a few hours. However, I might go the cheap route and create a 2nd disk volume and use a file system that allows me to mirror the database between the two disk volumes. I think this will be adequate until someone buys us for a $1 billion.

Another option to mention is Amazon RDS (MySQL in the cloud). If we used RDS for our database, it would give us more redundancy and scalability, but for now, we’re going to avoid that cost and stay on the single instance until we grow more.

It may not be for all applications

Our experience with EC2 was very positive, especially with this application.  However, it’s not perfect for all applications.  The server is still “virtual” so the performance is not perfectly
consistent.  Things like disk I/O speed, network bandwidth, etc., is what it is.  You can’t tell Amazon that you need a SSD for your swap drive and 10,000RPM drives for your databases. In other words, you don’t have as many ways to tweak performance as you do by managing your own real hardware.  However, if your app runs well on EC2, why bother with that stuff?!  I personally feel that I’ve served my time in computer rooms during my career.

The rest of the Amazon Web Services world

Everything we’ve talked about in this article has been specific to the low-end instance types of Amazon EC2.  There are many other instance types and other related features including load balancers, auto-scaling, monitoring, automatic alerts, etc.  Also, EC2 is only one of many services offered by Amazon.  Check them all out at http://aws.amazon.com/.

Check it out for free

Amazon recently started offering a “free tier” for EC2 newbies. You basically get a year free of a micro instance along with some disk space and bandwidth. See http://aws.amazon.com/free for more details. Remember – you can resize instances anytime. It’s very common to use a micro instance during development, and then upgrade as needed when you go live.

May 2012 table of contents:

• CSS Regions and CSS Exclusions, by Deepa Subramaniam
• Drag and drop with jQuery UI on mobile devices, by Michaël Chaize
• JavaScript Object Creation, by Keith Peters
• Using Backbone with jQuery Mobile, by Christophe Coenraets
• Crafting native looking iOS apps with HTML, by Christophe Coenraets
• Demo of Handlebars, by Raymond Camden
• Real-time data exchange in HTML5, by Ryan Stewart
• Swipe to delete items, by Michaël Chaize
• App-UI, a library by Andrew Trice
• HTML5 Multimedia components, by Ian Devlin
• Interview of Pamela Fox
• Colour Match, Cutest Paw, Bit Timer: showcase
• Which Element ? Pull quotes, comments
• PhoneGap and the File API
• WTFJS: False advertising
• Generate color palettes from HTML5 video
• CSS variables draft
• News

More information at http://appliness.com/download-the-second-issue/

If you are a C++ programmer with a desire to work on a highly visible team that is having a huge impact on the future of the web, it’s time to apply!  You can go to http://adobe.com/jobs and search for the keyword “WebKit” to find the current open positions.  You can also email WebKitJobs at adobe dot com to apply.

After my recent post, Crafting Native Looking iOS Apps with HTML, a number of you asked for an offline version that would use a Local Database (instead of the simple in-memory store) and provide a mechanism to automatically keep the local database in sync with a server database.

I’ll save automatic data synchronization strategies for a future post, but here is the first step: an “offline” version of the application that uses the device’s or the browser’s local database as its data provider. This version still uses Backbone.js as its architectural framework. Backbone.js makes it easy to change its default data access mechanism (which assumes RESTful services). You just replace the default Backbone.sync implementation and provide your own data access logic: in this case, some local SQL logic.

Web SQL vs IndexedDB

As you probably know, there have been two competing database APIs for HTML. From the W3C web site:

• The Web SQL specification defines an API for storing data in databases that can be queried using a variant of SQL. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further.
• The Indexed Database specification defines APIs for a database of records holding simple values and hierarchical objects. It is a working draft, and “work in progress”.

Even though the W3C is no longer actively maintaining the spec, this application uses the Web SQL API because, as a mobile app, its two main target platforms are iOS and Android, which both currently support Web SQL but not IndexedDB. More detailed platform support information can be found on caniuse.com (Web SQL and IndexedDB).

Chrome, Safari, and Opera on the desktop also support Web SQL, which means that you can run the application in these browsers. Try it here. For example, using the Chrome Developer Tools you could debug the application and inspect the database as shown in this screenshot:

Firefox and IE don’t support Web SQL. You could easily create an alternative version of EmployeeDAO (described below) that uses IndexedDB instead. You could also create a version of the application that uses either Web SQL or IndexedDB depending on the platform it’s running on.

Code Highlights

The source code is available in the localdb folder of the backbone-directory repository on GitHub. Here is a quick walkthrough…

The data access logic is encapsulated in EmployeeDAO, which also has a “populate” function to populate the employee table with sample data.

directory.dao.EmployeeDAO = function(db) {
    this.db = db;
};

_.extend(directory.dao.EmployeeDAO.prototype, {

    findByName: function(key, callback) {
        this.db.transaction(
            function(tx) {

                var sql = "SELECT e.id, e.firstName, e.lastName, e.title, count(r.id) reportCount " +
                    "FROM employee e LEFT JOIN employee r ON r.managerId = e.id " +
                    "WHERE e.firstName || ' ' || e.lastName LIKE ? " +
                    "GROUP BY e.id ORDER BY e.lastName, e.firstName";

                tx.executeSql(sql, ['%' + key + '%'], function(tx, results) {
                    var len = results.rows.length,
                        employees = [],
                        i = 0;
                    for (; i < len; i = i + 1) {
                        employees[i] = results.rows.item(i);
                    }
                    callback(employees);
                });
            },
            function(tx, error) {
                alert("Transaction Error: " + error);
            }
        );
    },

    findById: function(id, callback) {
        // removed for brevity
    },

    findByManager: function(managerId, callback) {
        // removed for brevity
    },

    populate: function(callback) {
        // removed for brevity
    }
});

Models are annotated with a “dao” attribute to indicate which data object to use to access their underlying data.

directory.models.Employee = Backbone.Model.extend({

    dao: directory.dao.EmployeeDAO,

});

directory.models.EmployeeCollection = Backbone.Collection.extend({

    dao: directory.dao.EmployeeDAO,

    model: directory.models.Employee,

});

With that infrastructure in place, you can then override Backbone.sync to access data from the local database instead of RESTful services:

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

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

    if (method === "read") {
        if (model.id) {
            dao.findById(model.id, function(data) {
                options.success(data);
            });
        } else if (model.managerId) {
            dao.findByManager(model.managerId, function(data) {
                options.success(data);
            });
        }
        // removed for brevity
    }

};

Source Code

The source code is available in the localdb folder of the backbone-directory repository on GitHub.

Secondly, if you’re in or around the Dallas area, be sure to visit Greg Wilson and Jon Campos at the Flex User Group meeting on April 19, 2012. Details about the event can be found here!

Check out the video:

Appliness is available on the iPad and Android tablets.

If you have an iPad, you can get it from the “Newsstand”: http://itunes.apple.com/au/app/appliness/id510636049

If you have an Android tablet, Appliness is available as a standalone application on Google Play: https://play.google.com/store/apps/details?id=com.appliness.applinessAndroid

Appliness was created using the Adobe Digital Publishing Suite (DPS).

I’ve been blogging a lot about Backbone.js recently. Backbone.js is a lightweight architectural framework that brings structure to your Web applications. Backbone is not, however, a user interface framework that helps you with the way your application looks.

So, where do you turn to for help when you need to make your application look good?

For traditional web apps (delivered through a browser), Twitter Bootstrap can help (read here). But what about Mobile apps? I explored Backbone.js + jQuery Mobile here. Depending on what you are looking for, it may or may not be the right solution: jQM provides mobile skins, but they don’t look native. It’s also more of a full stack framework than a lightweight UI toolkit that you can easily layer on top of your app.

The alternative to using an existing UI toolkit is to roll your own styles to make your application look and behave like a native app. Sounds easy enough, but when you consider all the details and want to achieve “pixel perfection”, it becomes a daunting task.

As I was getting ready to tackle the challenge, and build a new native looking version of my Employee Directory app, I came across this great blog post by Chee Aun where he documents the process he went through to build his own Hacker News mobile app. His post is a real gem, and I ended up reusing a lot of the Hacker News app styles.

Compared to the Hacker News app, the Employee Directory page flow is more random. Here are a few examples:

1. SearchPage -> EmployeePage -> ReportsPage -> EmployeePage -> …
2. SearchPage -> EmployeePage -> EmployeePage (manager) -> Reports -> …
3. SearchPage -> EmployeePage -> EmployeePage (manager) -> EmployeePage (manager’s manager) -> …

As you can see, the page flow includes “same page transitions”, when the user navigates from one employee to his/her manager. To accommodate the Employee Directory page flow requirements, my Backbone.js infrastructure creates and destroys pages as needed with the appropriate slide-in/slide-out transitions. The implementation of these transitions was inspired by Wesley Hales’ article.

PhoneGap

Even though you can run this application in a browser (here), I built it with the intention of packaging it as a native app with PhoneGap so that you could start it like any other app from your iPhone home screen. If you are not familiar with PhoneGap, I’ll provide more details on packaging this app as a native app in my next post.

Source Code

I updated the backbone-directory GitHub repository to include this version: It is available in the iphone directory.

This will be a monthly magazine with articles about writing applications using web standards. Some of the articles have interactive content and video.

All of this was done using Adobe Digital Publishing Suite (the same technology used for popular magazines such as Wired, National Geographic, and many more).

Michael Chaize was the driving force behind this and has a blog post with more details. Maile Valentine also played a huge role in the creation of Appliness – THANK YOU BOTH!

Website and links

Appliness is now alive and has its own dedicated website: http://www.appliness.com

If you have an iPad, you can download the magazine on the app store. It will appear in the Newsstand application: http://itunes.apple.com/au/app/appliness/id510636049

If you have an Android tablet, Appliness is available as a standalone application on Google Play. https://play.google.com/store/apps/details?id=com.appliness.applinessAndroid

I’m currently working with Amazon to put it on the Amazon Appstore.

Digital Publishing Suite

To create this magazine, I used Adobe Digital Publishing Suite (DPS). First, I had to install and learn how to use InDesign CS5.5. I was happily surprised by the number of video tutorials available on the web. DPS adds some components and features to InDesign to create digital magazines. The extensions are free and you can create and test a magazine for free on your tablet. Basically, you create static articles and then you add interactive parts. At any time you can save and upload your work on acrobat.com. The free application “Adobe Content Viewer” available on the app store and on the android market lets you test your work on your tablet.

Add interactive content with DPS

The first panel with DPS installed is called “Overlay creator”. It’s a list of interactive components: slideshow, image sequence, Video, Panorama, Pan & Zoom and Web content. The last one was the most interesting for Appliness. It lets you load HTML content in a page. That’s why in some technical tutorials, you’ll find the source code of a sample and its execution right next to it. It’s an instant preview of HTML and JS code! You can even make it interactive so that the reader plays with your HTML samples. It’s a great way to share tutorials and learn new development tricks. DPS stores your HTML samples in a HTMLresources folder. You can update its content uploading a HTMLresources.zip file. The files will be embedded in your magazine and rendered even if the user if offline. Otherwise you can chose to execute remote HTML files hosted on your own server.

Organize your folio

The other panel that comes with DPS in InDesign is the “Folio Builder”. A folio is an issue of your magazine. It consists in a list of articles (InDesign files). Every time you modify the ordering of your articles and their metadata, the changes are synced on acrobat.com. By the way, a hosted version of the folio builder exists and it’s a fantastic Flex app. Once you sign-in on digitalpublishing.acrobat.com, you can access this app and order your articles, enter the descriptions, etc…

Create a native viewer

A viewer is a native application that you can customize (splash screen, icons…) and that will consume your folios published on acrobat.com. The Viewer Builder application is a desktop AIR app that lets you create a viewer for iPad or Android tablets. Basically, it’s a wizard to upload the icons of your application, the splash screen, the certificates… At the end of the process, this AIR application sends information to acrobat.com that will return an .ipa or an .apk file. You have the choice between several kinds of viewer applications: the single edition (one viewer per folio), the multi-folio, the multi-folio with subscriptions… You have a lot of options too: enable push notifications, in-app purchase, presence in the Apple Newsstand application.

Contribute

I’ve also launched a dedicated website: http://www.appliness.com. This magazine for developers and is edited by passionate developers and bloggers. That’s why it would be great to get your feedback. If you want to contribute, publish a tutorial or showcase your application, use the feedback form on appliness.com.

As described in my previous post, jQuery Mobile was (at least initially) intended as a full-stack framework as opposed to a pure UI toolkit like Twitter Bootstrap. As such, it overlaps with the Backbone.js infrastructure in some areas. In particular, the URL routing feature provided by both frameworks may clash. The approach used here is to disable the routing and navigation capabilities of jQuery Mobile, and essentially use it as a pure UI framework on top of Backbone.js. This approach and its caveats are described in my previous post.

Click here to run the application.

A Backbone.js + Twitter Bootstrap version of this application is available here.

Source Code

I updated the backbone-directory GitHub repository to include this version: It is available in the jquerymobile directory while the Twitter Bootstrap version is available in the web directory.

Backbone’s confined scope is a good thing: it’s lightweight, non-intrusive, not coupled to things you don’t need, and it lets you use the UI toolkit of your choice or simply roll your own styles and widgets. In my previous post, I demonstrated how to use Twitter Bootstrap on top of Backbone.

Quest for a Mobile UI Toolkit

After that post, I wanted to create a mobile version of the same application; a version that I could package with PhoneGap and that would look and behave like a native app. Twitter Bootstrap can probably be tweaked for that purpose as well, but I was looking for a UI toolkit dedicated to providing native looking controls and behaviors on mobile devices.

Another Way to Use jQuery Mobile

jQuery Mobile (jQM) is one option that I’ve explored before (here and here), but it fits more in the category of full-stack frameworks that tie together architectural structure and UI controls and behaviors. John Bender, my colleague at Adobe and member of the jQuery Mobile team, recently pointed out to me that you can disable the routing and navigation capabilities of jQM, and essentially use it as a pure UI framework on top of other architectural frameworks like Backbone.js.

Sample Application

I ended up spending a decent amount of time trying different things to get the two frameworks to play well together without stepping on each other. To save you some headaches if you are trying to do the same, I put together a simple application with the basic setup to combine Backbone (for the application structure and “routing”) and jQuery Mobile (for its styles and widgets).

NOTE: Another approach would be to use jQM’s “routing” instead of Backbone’s. Ben Nolan has an example of this approach here. I prefer to use Backbone’s routing because I find it more flexible and less “page-centric”.

Here is the app:

Click here to run the application in a separate window. The source code is available in this GitHub repository.

How it works

The key to this approach is to disable jQuery Mobile’s “routing”: In other words, you need to tell jQuery Mobile not to handle links, hash tag changes, and so on. I isolated that code in jqm-config.js:

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
});

If jQuery Mobile is not in charge of page navigation, you also have to manually remove the pages from the DOM when they are not used anymore. Here is one way to do it:

$('div[data-role="page"]').live('pagehide', function (event, ui) {
    $(event.currentTarget).remove();
});

With this configuration in place, you use Backbone’s routing as usual:

var AppRouter = Backbone.Router.extend({

    routes:{
        "":"home",
        "page1":"page1",
        "page2":"page2"
    },

    home:function () {
        this.changePage(new HomeView());
    },

    page1:function () {
        this.changePage(new Page1View());
    },

    page2:function () {
        this.changePage(new Page2View());
    },

    changePage:function (page) {
        $(page.el).attr('data-role', 'page');
        page.render();
        $('body').append($(page.el));
        $.mobile.changePage($(page.el), {changeHash:false});
    }

});

Is this the right stack?

I like the idea of a lightweight architectural framework combined with a UI toolkit. Backbone + Twitter Bootstrap felt right because the two frameworks have different areas of concern and complement each other very well. I was happy to see you could decouple jQM from its navigation infrastructure. However, that’s probably not the main “design center” at this point. I think it would be interesting for jQM to focus on that utilization scenario as well. At the end of the day, frameworks are often a matter of personal preferences, and not all applications are equal. So try it, see if it works for you, and share your experience. What UI toolkit are you using?

Source Code

The source code is available in this repository on GitHub.

A More Real-Life Application

In my next post, I’ll share a Backbone.js + jQuery Mobile version of the Employee Directory application first explored with Backbone.js + Twitter Bootstrap.

Twitter Bootstrap is a UI toolkit that provides simple and flexible HTML, CSS, and Javascript to implement popular user interface components and interactions.

In other words, Backbone.js and Twitter Bootstrap focus on different areas of your application: core architecture and user interface respectively. Because of their well-defined and non-overlapping scope, Backbone.js and Twitter Bootstrap work well together. In general, I find a lightweight architectural framework and a UI toolkit to be a powerful combination, and an interesting alternative to full-stack frameworks: it gives you the flexibility to choose the library you like (if any) in the respective areas of your application.

The Sample Application

To give this combination a try, I put together a new sample application that uses Backbone.js to organize the code, and Twitter Bootstrap to organize the UI. The application is an Employee Directory that allows you to look for employees by name, view the details of an employee, and navigate up and down the Org Chart by clicking the employee’s manager or any of his/her direct reports.

You can run the application here.

Backbone Directory is a single page application: index.html is essentially empty. Views are injected into and removed from the DOM as needed. Even though it is a single page application, the Backbone.js Router makes it easy to keep the different states of the app “bookmarkable” and “deep-linkable”.

Twitter Bootstrap highlights

“Backbone Directory” uses a number of the Twitter Bootstrap styles, components, and interactions: the 12-column grid with nested columns, a “Navbar”, a “Search Form” with dropdown, the dropdown plugin, the Glyphicons icons, Info and Warning alerts, a “Well”, etc.

Backbone.js highlights

If you are new to Backbone.js, you may want to start with the tutorial (part 1, part 2, part 3, and postface) I blogged recently. “Backbone Directory” includes some interesting elements not covered in the tutorial:

• One-to-Many association. A one-to-many (Manager-to-Employees) association is defined in the Employee model (model/employeemodel.js) as a collection of employees (the direct reports). That collection is lazily fetched in the render() function of EmployeeFullView (view/employeedetails.js).
• Composite View. EmployeeFullView (views/employeedetails.js) is an example of a composite view. Its render() function instantiates two subviews: EmployeeView and EmployeeListView (to display the employee’s direct reports).

Source Code

The source code is available in this repository on GitHub.

Your feedback and comments are appreciated.

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.

But today, the Flex community is by far the strongest one on the RIA market and it’s not only due to Adobe. Flex is still the first-choice to build RIA because it’s consistent and because… it works. You should all read this fantastic article by Joao (RIA expert in Portugal). It’s also due to the fact that a lot of Flex developers were coming from various technical backgrounds: Java (mainly), PHP, AS3, .NET… And they tried to bring and translate their knowledge investing in areas not covered by Adobe’s engineers: data-visualization, backend integration, continuous integration, micro-architectures… As a tribute, I just wanted to summarize on one graph (inspired by Michell Zappa) some compelling projects developed by the community around Flex. All these projects are used by large organizations in strategic Enterprise applications. All these talents can now become official Flex contributors thanks to the Apache foundation. Flex is successful thanks to this constellation of talents, not thanks to Adobe.

Some projects are of course missing, I’m sorry for that, it’s not an exhaustive list; but this graph expresses all the efforts made by the community to make Flex a successful framework in a professional Enterprise environment. Just a few projects, such as BlazeDS, were initiated by Adobe on this map. Flex has been successful in the past thanks to the involvement of its vibrant community of talented developers… why would it change?  If you want to follow the Apache Flex project and get involved, check this page: http://incubator.apache.org/flex/

Thanks to all the folks who helped me build this list on Google Docs.

dpi
minResolution
aspectRatio

You can combine these attributes as well to get the best possible image selected. It’s very easy to implement, you simple create an MXML component based on the SplashScreenImage property and include as many SplashScreenImageSource objects to cover the number of situations needed. For example, in the following code I’m setting different images depending on both dpi and aspectRatio properties. Note that this example makes an assumption about tablets generally being 160 DPI (thus needing the bigger image), the 320 DPI being the iPhone 4 and above and most android phones at 240 and setting the image based on that. It also assumes that I want to use the landscape version of the image when the aspectRatio happens to be landscape on startup. You could also use the minResolution to further ensure that the 160 DPI is indeed a tablet etc and that will cause the the stage width and stage height to be compared on startup to find the largest number of the two. If it’s equal to or greater than your minResolution setting, it will select that image for the splash screen.

DynamicSplashScreen.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
	<s:SplashScreenImageSource dpi="160" aspectRatio="portrait" source="@Embed('assets/texas-768x1024.jpg')"/>
	<s:SplashScreenImageSource dpi="240" aspectRatio="portrait" source="@Embed('assets/texas-480x810.jpg')"/>
	<s:SplashScreenImageSource dpi="320" aspectRatio="portrait" source="@Embed('assets/texas-640x960.jpg')"/>
        <s:SplashScreenImageSource dpi="160" aspectRatio="landscape" source="@Embed('assets/texas-1024x768.jpg')"/>
	<s:SplashScreenImageSource dpi="240" aspectRatio="landscape" source="@Embed('assets/texas-810x480.jpg')"/>
	<s:SplashScreenImageSource dpi="320" aspectRatio="landscape" source="@Embed('assets/texas-960x640.jpg')"/>
>/s:SplashScreenImage>

Now in your main application root, you simply specify the name of your component defined above in the splashScreenImage property as follows:

<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
							xmlns:s="library://ns.adobe.com/flex/spark"
							firstView="views.FrontView"
							splashScreenImage="DynamicSplashScreen">
...
</s:ViewNavigatorApplication>

Adobe Flex to Apache Flex
Adobe Flex is now Apache Flex (in case you’ve been under a rock lately or perhaps just discovered Flex ). It’s been contributed to the Apache community and is in incubator status. Incubator status is a holding place for a new Apache project and basically a gateway to it becoming a full-fledged project after a release or two. It was great news that it was accepted recently and I have no doubt it will quickly move out of this stage into a full-fledged project. The project has an amazing amount of traction so far, and it’s awesome to see all the activity! If you want to stay on top of the latest, subscribe to the mailing list here, (note that your inbox will be flooded so you might want to use a separate email to track it, it’s a high traffic mailing list ). There are a bunch of extremely talented, well-known developers behind this project as well, which is huge and makes all the difference, in my opinion. The Open Spoon Foundation is also actively behind this project and if you aren’t aware of it, definitely make a point of checking it out. I attended the Flex Summit in December and learned a lot about the Apache process from Roy Fielding (Apache Co-Founder), with the biggest takeaway being that Apache projects are run as a meritocracy, so there is equal opportunity amongst all and that contributions of any kind, including code, bug fixes and documentation are welcome.

The State of Things…
So the big question everyone has been asking us, should we continue to build apps with Flex? I think the general consensus to be made is yes. There’s still a viable need for this technology and with the dedication and energy of the community so far I feel very positive about things. As I’ve stated before and will continue to state, as a developer you shouldn’t put all of your eggs in any one basket, and should be learning the latest technologies along with continuing your Flex development to ensure your relevance and development diversity, but Flex remains an excellent choice for the right type of application.

Here are some related links you should check out that I found very useful as a meter for what other great developers are thinking and doing:

Joseph Labrecque – Questioning the viability of Flex
Joao Saleiro – After 6 years doing Flex, am I moving to HTML5?
The Flex Show – Discussing the Future of Flex with Joseph Labrecque and Mark Ehlert

Hot Topics…
One big topic on the mailing list right now centers around a new logo for Apache Flex. The community held a contest (over 50 entries submitted!) and the submissions can be found here. The contest ended yesterday and now the voting process has begun. To vote you will need to start by subscribing to the mailing list. Once subscribed you can cast your votes with a point system defined in the mailing list. There are also some excellent summaries of what’s going on with the project being posted to this blog by Michael Schmalle (a current contributor). I would definitely make a point to skim those summaries to get a quick read on the status of things since it can be hard to keep up with the mailing list.

The following links are also useful to check out for more info:
The Flex Incubator Project
Contributors
JIRA Bug Tracking
Flex Incubator Status Page
The initial proposal from Adobe
Getting Involved

This Blog…
As far as me and my evangelism are concerned, I plan to continue to use Flex and blog about it as I have been. The 2012 Flex User Group Tour is about to start and my team will be visiting many locations over the next couple of months where we’ll discuss all the recent activity and announcements and talk about the latest 4.6 release. You can also plan on seeing some posts on other technologies as I’m exploring them myself. I will make a point of comparing them to Flex as I go along where possible. I’m also really looking forward to seeing what Adobe has in store this year to help utilize these other technologies like HTML5, JavaScript/jQuery etc and already excited by what I’ve heard! I will post information on these topics as I’m allowed .

Radio X-Track

UI considerations

Radio X-Track is a great project led by true music lovers. DJs, painters, actresses and sound designers work together to publish creative playlists of music, covering various styles and  stimulating your eyes with massive paintings. The web radio is also a place for networking with music lovers. Once logged-in with your Facebook account, you can start chatting directly on the website. This arty space is directed by X-Track, a famous sound design studio in France. You can visit the web radio here: http://radio.x-track.net/EN/

The development of the mobile application was challenging as the web radio is a Flash application connected to FMS. Thanks to the recent updates of Adobe AIR, I’ve been able to use Flex to stream the playlists on smartphones and tablets. First, I’ve decided to use my adaptive layout technique to code one UI and target both mobile and tablet screens. Here is a video that explains the trick. I’m playing with two view navigators that dynamically adapt their dimensions and their coordinates at runtime, depending on the screen resolution and the screen orientation.

That’s why on Android, you have a very simple user experience. The first view is the list of DJs, the second view displays a scrollable picture, streams the playlist and displays the title of the song.

Here is the link to the Android application:

https://market.android.com/details?id=air.com.riagora.Xtrack

With Flex, you code one project and then can publish it on both Android and iOS. So I submitted this application to Apple.

The App Store reviewers rejected the initial application for UI reasons. They told me that displaying a list and then a view could be done in the browser, and that it doesn’t justify the development of an application. They wanted me to develop the application using HTML5… well… live audio… html5… I had to consider a new strategy and worked on a totally different UI. I started studying the UI patterns of approved radio application and ended up with a new user experience. I’ve also added some features such as a twitter feed and the biographies of the artists. The application has been directly approved by Apple and is now available for iPhone and iPad users.

Here is the link to the iOS application:

http://itunes.apple.com/fr/app/radio-x-track/id467964868?mt=8

Some technical tips to manage audio content

As the music is streamed by FMS, you can use the classic NetConnection and NetStream object of the Flash API. When the user wants to hear another playlist, I kill the current NetStream object and create a new one (I keep in memory the NetConnection instance). FMS fires a RTMP message every time a new song is streamed. The client catches the message and displays the title of the song on the screen. The main challenge was to mimic the behavior of the iPod. If you shutdown the screen of your iPhone, or if you switch to another application, the radio is still supposed to stream audio. AIR 3 introduced a new feature to enable this behavior. At the end of the application descriptor of your Flex mobile application, you have a dedicated section for iPhone settings. You can set iOS keys such as UIApplicationExistsOnSuspend. All the iOS settings for Adobe AIR are listed on this page. In this case, I’m setting the UIBackgroundModes key to audio.

Code block

<iPhone>
        <InfoAdditions><![CDATA[
			<key>UIDeviceFamily</key>
			<array>
				<string>1</string>
 
			</array>
			<key>UIBackgroundModes</key>
			<array>
				<string>audio</string>
			</array>
		]]></InfoAdditions>
        <requestedDisplayResolution>high</requestedDisplayResolution>
</iPhone>

Unfortunately, it won’t display the “play” icon in the status bar of iOS. I guess it would require the development of a native extension. Radio X-Track is a free application. Enjoy !

Mioozic

Mioozic is also a Flex mobile application available on both Android and iOS. You start by choosing a theme or a category, and it will start streaming music on your device. This Flex application has been developed by Christophe Keromen, the author of “Flex 4.5 for mobile devices” (in French). It’s a great example of a high-performance Flex application running on smartphones.

Mioozic on Android : https://market.android.com/details?id=air.netrix.air.mioozic

Mioozix on the app store: http://itunes.apple.com/fr/app/mioozic/id479503574?mt=8

What’s that track

This game developed by Orange Labs and Deezer is also a very cool Flex mobile application. It’s a quiz game. You can play alone or with friends. The goal is very basic: hear a song, tap the screen if you think that you know the artist, and select the correct artist in a list of four. It’s a very cool game with a nice 70s UI. It’s already a popular app on Android (only). Have fun.

What’s that track on Android: https://market.android.com/details?id=air.com.orange.labs.whatsthattrack&hl=fr

We are looking for committers!!! If you want to participate in the success of Apache Flex, check this blog post. Yennick is one of these talented Flex developers who could become Apache Flex committers. He’s the project leader of GradleFx. I met him in Belgium during the Devoxx conference and he has been kind enough to accept an interview.

“Hi Yennick, can you introduce yourself, your background and your relationship with Flex:”

Hi, my name is Yennick Trevels and together with Steven Dick I started the GradleFx plugin. I work as a RIA Consultant at iDA MediaFoundry in Belgium where I do most of my projects in Java and Flex (desktop, web, mobile, …).

I started out as a Java developer for 3 years, but soon found out that I wanted to focus on frontend development and that’s how I got started with Flex. Flex has been somewhat of a passion for me now because it allows me to create good looking applications with lots of custom components and there are still a lot of oppertunities to create libraries which make our lives easier.

“GradleFx is a Gradle plugin. Can you explain us what Gradle is and who is using it today?”

Gradle is a new build tool which combines the best features of Ant and Maven and leaves the bad things behind. It has dependency management, convention-over-configuration, multi-project support and lot’s of other cool features. Build scripts are written in Groovy where you have access to the Gradle API, which gives your build scripts a lot of flexibility.

Lots of plugins are already available for Gradle, like the Java plugin, Maven plugin, Eclipse & Intellij plugins, Sonar plugin etc. These plugins make your build scripts a lot easier because most of the time the only thing you have to do is configure some variables. So build script in Gradle are shorter/easier and more flexible than Maven or Ant build scripts.

GradleFx uses these same principles because it’s a plugin for Gradle.

“Then I guess that GradleFx is just an extension for building Flex applications. How does it work and what do I need to make it run?”

GradleFx is indeed a plugin to build Flex applications.

First you’ll need to install the Gradle and Flex SDK, add the Gradle bin directory to your PATH environment variable and create a FLEX_HOME environment variable which points to your Flex SDK. Once you have these setup you can start to write your build script (in a build.gradle file). You don’t have to manually download GradleFx because it’s available on the Maven Central repository, so just specify it as a dependency for your build script and apply the plugin, that’s it.

“What are the features that the GradleFx plugin adds to Gradle.”

Right now the plugin has tasks to compile SWC, SWF and AIR projects, clean the build directory, copy your resources to the build directory, create an html wrapper and run FlexUnit tests.

“Automated builds are more and more strategic in our industry and most of the Flex projects are industrialized. In your opinion, what are the key differentiators of GradleFx compared to Ant or Maven for instance?”

Because GradleFx uses convention-over-configuration and builds scripts are written in Groovy your average build script will be a lot shorter and easier to read.

Another big advantage is the flexibility that Groovy offers, if you need to perform some custom functionality that isn’t available yet in any plugin then it’s much easier to write this yourself compared to Ant or Maven. Simple tasks like copying some files can be added in just a few lines of code.

GradleFx can use Ivy or Maven repositories to get its dependencies so you don’t need a separate repository for your existing Maven or Ant based build scripts.

“Can you share with us a sample to manage several project and comment the code?”

Ok, I’ll show you an example of a multi-project build which uses all the conventions provided by GradleFx.

This is the build script of the parent project and these settings are used by all sub-projects. This project doesn’t compile to a SWC or SWF.

Code block

//specify the GradleFx plugin as a dependency for this build script. Maven Central will be used to get it.
buildscript {
	repositories {
		mavenCentral()
	}
	dependencies {
		classpath group: 'org.gradlefx', name: 'gradlefx', version: '0.3.2'
	}
}
 
//specify settings common to all subprojects
subprojects {
 
	//apply the GradleFx plugin to this project
	apply plugin: 'gradlefx'
 
	version = '1.0-SNAPSHOT'
 
	//define the repositories from which the project dependencies
	//should be downloaded
    	repositories {
        		mavenCentral()
        		mavenRepo name: 'yoolab-releases',      url: "http://projects.yoolab.org/maven/content/repositories/releases"
        		mavenRepo name: 'yoolab-snapshots',     url: "http://projects.yoolab.org/maven/content/repositories/snapshots"
    	}
 
	// specify the project dependencies. Notice the 'external' marker,
	// which means that the library will not be compiled in the
	// swc of the subprojects
   	dependencies {
        		external group: 'org.as3commons', name: 'as3commons-collections',
			version: '1.1', ext: 'swc'
        		external group: 'org.as3commons', name: 'as3commons-lang',
			version: '0.3.2', ext: 'swc'
    	}
}

Then we have the build script of a library subproject which will compile to a SWC.

Code block

//specify the type of flex project
type = 'swc'
 
dependencies {
	// specifies a dependency to another subproject. This will compile
	// the other project before compiling this one and use its
	// compiled SWC in this project.
	external project(':util')
}

And finally we have the build script of the application project which compiles to a SWF.

Code block

//specify the type of flex project
type = 'swf'
 
dependencies {
	// specify two dependencies to library projects. These will be compiled
	// into the SWF file since they belong to the "merged" configuration.
	merged project(':util')
	merged project(':domain')
 
	//override the dependencies specified in the parent project so they
	//use the "merged" configuration
	merged group: 'org.as3commons', name: 'as3commons-collections',
		version: as3commons_collections_version, ext: 'swc'
	merged group: 'org.as3commons', name: 'as3commons-lang',
		version: as3commons_lang_version, ext: 'swc'
}
 
// add another source directory for the locale files. The srcDirs property is a
// GradleFx property which by default has the value ['src/main/actionscript']. This
// is the directory where you need to put your actionscript and mxml files.
srcDirs.add('src/main/locales/{locale}')
 
additionalCompilerOptions = [
		'-locale=en_US'
]

That’s it for this example. You can find more examples in our GradleFx examples repository: https://github.com/GradleFx/GradleFx-Examples

“What are you working on and what will be the next features of GradleFx?”

I just released version 0.4 which contains support for AIR projects.

Upcoming features are mobile projects support, project file generation for Eclipse and Intellij IDEA, automatic downloading of the Flex SDK and AS3Doc generation.

“GradleFx is open-source. How can we contribute?”

You can contribute in a number of ways.

One is by trying out the project and giving feedback on our support forum and/or log issues in our issue tracker on Github.  Or if you feel some documentation is missing, feel free to add it to our wiki on Github (or just tell us so we can add it). It’s the feedback that we get that also makes this project better and we always try to do something with it.

Another way is by forking the project on GitHub, add a feature or improve the code and apply a “pull request”. Then we can integrate those changes and put them in an official release.

“How do we know when a new version of GradleFx is released?”

You can follow me or Steven on twitter, this is where we announce all things related to GradleFx.
Yennick: @SlevinBE
Steven: @stevendick

Some useful links to get started:

• Site: http://gradlefx.github.com/
• Documentation: https://github.com/GradleFx/GradleFx/wiki
• Examples: https://github.com/GradleFx/GradleFx-Examples
• Help & Support: http://gradlefx.tenderapp.com/home
• Bug Tracking: https://github.com/GradleFx/GradleFx/issues
• Changelog: https://github.com/GradleFx/GradleFx/blob/master/CHANGELOG.textile

The Game of Flex consists of 16 questions which if answered correctly, will qualify you to win a free copy of Flash Builder 4.6! Ultimately though, it’s a learning tool, where we’ve included samples and source code for all of the new 4.6 features and other useful mobile features. Click the ‘Snippet’ button to get the source code for the sample within the app, and the ‘Tutorial’ button to link to tutorials with more details on how to use a certain feature.

Be sure to check out Michael’s post about the game, and visit the official website for it here!

Sample Question

Sample Code Snippet

“Game of Flex” is not just a game, it’s also a great way for us to showcase the great performance of Flex on tablet devices, and for you to discover the new components and features of our latest release of Flex! Indeed, Game of Flex is also a learning tool. At anytime, you can click on the “Snippet” button and read the source code of the current sample. You can also click on “Tutorial” to read an online tutorial about the current sample.

Download the game and the source code

The direct links to the application are:

Android tablets: https://market.android.com/details?id=air.com.riagora.flexgame
iPad: http://itunes.apple.com/us/app/game-of-flex/id483389384
BlackBerry Playbook: soon

You can also download the source code of the application. Install Flash Builder 4.6 and import this Flash Builder Project (FXP file): FLEXGAME.FXP

Some tips inside the code

If you want to check the source code of the app, you’ll learn…:

• How to use the new SplitViewNavigator architecture (portrait and landscape layouts on tablet devices)
• How to display HTML content inside a Flex app
• How to access the camera to take pictures
• How to use the BusyIndicator, ToggleSwitch and List components
• How to enable multi-touch
• How to manage your views
• How to use the accelerometer
• How to create custom AS3 item renderers for your lists
• How to access the local SQLite database
• How to use native extensions
• How to set up the new DateSpinner component
• How to display callout popups
• How to set up the software keyboard to match your needs
• How to declare spinner lists

To get started, first check out this sample application I’ve included the source and fxp for that was written by my friend Darin Weakley over at MapQuest. He’s done a great job of showcasing the fun cool features available in this app. I’ve included some screen shots below to give an idea of what it entails:

If you have an Android device, be sure to download the showcase application for free to your device!

To implement this in your own app you will need to create yourself an app key and join the developer program here before using the APIs. It’s fast and easy. Click ‘Join Now’. Also, don’t forget to include the latest MapQuest Flash API 7.07 mobile swc file in your project (see the sample for reference). This link also has documentation and other examples on the right side of the page to check out for more info!

MapQuest Flash Maps API Quick Links

Mobile Flash Maps API
Web/Desktop Flash Maps API
OpenStreetMap Mobile Flash Maps API – more information about OpenStreetMap (OSM)
OpenStreetMap Web/Desktop Flash Maps API

Now we can build applications with this type of layout simply using built-in Flex 4.6 features! The SplitViewNavigator extends ViewNavigatorBase, so it does not reside at the root level of the application but rather at the child level similar to ViewNavigator. Note that this component can only be used in a blank Application or within a TabbedViewNavigatorApplication. Here’s an example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160">

	<s:SplitViewNavigator id="svn" width="100%" height="100%">
		<s:ViewNavigator id="leftNav" width="30%" height="100%" firstView="views.LeftView"/>
		<s:ViewNavigator id="rightNav" width="100%" height="100%" firstView="views.RightView"/>
	</s:SplitViewNavigator>
</s:Application>

In this case my left view and right view are simple View classes showing a list of cities to click on and some dummy data about that particular city in the detail. I’ve included the code below for reference:

LeftView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" title="Left View">

	<fx:Script>
		<![CDATA[
			protected function list_clickHandler(event:MouseEvent):void
			{
				(this.parentDocument as Sample).rightNav.activeView.data=list.selectedItem;
			}
		]]>
	</fx:Script>

	<s:List id="list" width="100%" height="100%" click="list_clickHandler(event)">
		<s:dataProvider>
			<s:ArrayCollection>
				<fx:String>Atlanta, GA</fx:String>
				<fx:String>Baltimore, MD</fx:String>
				<fx:String>Boston, MA</fx:String>
				<fx:String>Chicago, IL</fx:String>
				<fx:String>Dallas, TX</fx:String>
				<fx:String>Detroit, MI</fx:String>
				<fx:String>Honolulu, HI</fx:String>
				<fx:String>Los Angeles, CA</fx:String>
				<fx:String>Minneapolis, MA</fx:String>
				<fx:String>New Orleans, LA</fx:String>
				<fx:String>New York, NY</fx:String>
				<fx:String>Richmond, VA</fx:String>
				<fx:String>San Francisco, CA</fx:String>
				<fx:String>San Jose, CA</fx:String>
				<fx:String>St. Louis, MO</fx:String>
				<fx:String>Washington, DC</fx:String>
			</s:ArrayCollection>
		</s:dataProvider>
	</s:List>
</s:View>

RightView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Detail View">
	<s:layout>
		<s:VerticalLayout paddingTop="15" paddingBottom="15" paddingLeft="15" paddingRight="15" gap="5"
						  horizontalAlign="center" verticalAlign="top"/>
	</s:layout>
	<s:Label text="Click on a location on the left to explore!" visible="{data==null?true:false}"/>
	<s:Label text="Information about {this.data}" visible="{data!=null?true:false}"/>

	<s:TextArea text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan felis ac tortor aliquam iaculis. Phasellus hendrerit viverra enim, sit amet scelerisque lectus dictum at. Aenean sodales nisi sed leo congue et porttitor ligula vehicula.
Pellentesque turpis massa, suscipit vel fermentum quis, dignissim sed ipsum. Nulla aliquet libero adipiscing risus lobortis eleifend quis at velit. Duis at leo urna.
Praesent facilisis faucibus neque, ut ullamcorper lacus gravida a. Donec vel iaculis sapien."  width="90%" editable="false" visible="{data!=null?true:false}"/>
</s:View>

The resulting application:

You could also set a layout on the SplitViewNavigator container so if you wanted it to split vertically for instance, you would simply set a VerticalLayout, and adjust the height percentages with the width set to 100%, such as:

<s:SplitViewNavigator id="svn" width="100%" height="100%">
	<s:layout>
	     <s:VerticalLayout/>
	</s:layout>
	<s:ViewNavigator id="leftNav" width="100%" height="30%" firstView="views.LeftView"/>
	<s:ViewNavigator id="rightNav" width="100%" height="70%" firstView="views.RightView"/>
</s:SplitViewNavigator>

Here’s the updated layout:

This split view approach works well for landscape mode, however, in portrait mode you may want to display it a little differently since the screen width is much less to work with. There are some built-in features to help you do this. There’s an autoHideFirstViewNavigator property on the SplitViewNavigator that will automatically hide the left side view when the application receives an orientation change event to portrait.

<s:SplitViewNavigator id="svn" width="100%" height="100%" autoHideFirstViewNavigator="true">
	<s:ViewNavigator id="leftNav" width="30%" height="100%" firstView="views.LeftView"/>
	<s:ViewNavigator id="rightNav" width="100%" height="100%" firstView="views.RightView"/>
</s:SplitViewNavigator>

Now when we run it, we will see the following:

Not very useful yet though since there’s no way to navigate to a different item in our list! So we need to take this one step further and use the showViewNavigatorInPopUp function from the SplitViewNavigator to pop up our list in a Callout while in portrait mode. We can call this function from a button in the right ViewNavigator’s actionBar navigationContent for instance such as the following:

<s:SplitViewNavigator id="svn" width="100%" height="100%" autoHideFirstViewNavigator="true">
		<s:ViewNavigator id="leftNav" width="30%" height="100%" firstView="views.LeftView"/>
		<s:ViewNavigator id="rightNav" width="100%" height="100%" firstView="views.RightView" >
			<s:navigationContent>
				<s:Button id="listButton" label="List" click="svn.showFirstViewNavigatorInPopUp(listButton)"/>
			</s:navigationContent>
		</s:ViewNavigator>
</s:SplitViewNavigator>

Note: Just to clarify, in the above we are using the actionBar already implicitly defined as part of the Spark ViewNavigator container and setting the parent for the popup to the listButton, so the Callout or popup arrow will stem from that button. Here’s what the above code will look like when run in portrait mode:

At this point, we probably don’t want this button to show though when going back into landscape mode, so we’ll need to add states management to set visible to false when in landscape. One way to determine when to update the state would be to add a resize event handler and check the width and height and update the state accordingly. Our code now looks like the following:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" resize="application1_resizeHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.events.ResizeEvent;

			protected function application1_resizeHandler(event:ResizeEvent):void
			{
				if (width>height)
					this.currentState="landscape";
				else this.currentState="portrait";
			}
		]]>
	</fx:Script>

	<s:states>
		<s:State name="portrait"/>
		<s:State name="landscape"/>
	</s:states>

	<s:SplitViewNavigator id="svn" width="100%" height="100%" autoHideFirstViewNavigator="true">
		<s:ViewNavigator id="leftNav" width="30%" height="100%" firstView="views.LeftView"/>
		<s:ViewNavigator id="rightNav" width="100%" height="100%" firstView="views.RightView" >
			<s:navigationContent>
				<s:Button id="listButton" label="List" click="svn.showFirstViewNavigatorInPopUp(listButton)" visible.landscape="false"/>
			</s:navigationContent>
		</s:ViewNavigator>
	</s:SplitViewNavigator>
</s:Application>

Now when we run the application in landscape mode, we can see the List button is not showing in the actionBar:

You can download the source and project file for this sample application here!

Also, if you haven’t looked at this yet, Christophe and I created an extensive SplitViewNavigator-based expense tracking tablet application called XpenseIt that includes a bunch of other Flex 4.6 features as well and can be downloaded here. Here is a screenshot from that application:

New set of mobile components

Tablet devices are incredibly successful. The Apple iPad introduced new ways to structure applications and new user interactions. The new set of components available in Flex 4.6 is inspired by classic tablet applications. As you’re targeting a larger screen than a smartphone, you need to review your UI navigation. I’ve already shared some thoughts on this in my post named “Adaptive UI”. Thanks to the new SplitViewNavigator, you can manage the layout of multiple views. The ‘Adaptive UI’ is managed by the component and is based on the device orientation.

How to use SpitViewNavigator:

Code block

<s:SplitViewNavigator width="100%" height="100%" id="splitViewNavigator" autoHideFirstViewNavigator="true">
		<s:ViewNavigator id="vnList" firstView="views.ListQuestions" width="300" height="100%"/>
		<s:ViewNavigator id="vnFull" firstView="views.FullView" width="100%" height="100%">
 
			<s:actionContent.portrait>
				<s:Button id="navigatorButton"   label="Show questions" click="splitViewNavigator.showFirstViewNavigatorInPopUp(navigatorButton)" />
			</s:actionContent.portrait>
		</s:ViewNavigator>
	</s:SplitViewNavigator>

More components are also available and directly inspired from iOS applications: the CallOutButton (popup related to a component), the SpinnerList, the ToggleSwitch and the famous DateSpinner.

Soft keyboard parameters

You can easily enhance the behavior of your soft keyboard. If you’re building a form, with a text input field that is waiting for a phone number, then you can modify the look of your mobile/tablet soft keyboard to display numbers only. You can also customize the label of the “return” key on the soft keyboard (and display “Join”, “Go” or “Search” for example). It’s a very nice feature detailed by Holly in this post.

You can set different values for the softKeyboardType property: number, email, punctuation, url, contact or default. For instance, to display numbers on the keyboard, just add a parameter to your TextInput component:

 <s:TextInput softKeyboardType="number" width="180"/>

AIR 3, native extensions and captive runtime

Air 3.1 is attached to Flex 4.6 developments. It means that you can easily embed ActionScript Native Extensions within your Flex mobile project. ANE are a bridge between your Flex mobile app and a native library that can extend the capabilities of the Flex SDK. A list of native extensions are available on adobe.com such as the Gyroscope API, Vibration, Notification, Kinnect… To import an ActionScript Native Extension within your project, just open the new tab in Flash Builder 4.6 dedicated to ANE.

Remember that you can also use the new captive runtime option while packaging a mobile application OR a desktop application. It will create a standalone application that is embedding the AIR runtime. On the desktop, it means that you can actually copy your application on a USB stick and launch it without administration rights! It’s a fantastic new way for deploying AIR apps. On mobile devices, we were already using this technic on iOS. Now you can use the same technic on Android and generate an .apk file that will embed a specific version of the AIR runtime.

Test Flex 4.6 apps on your device

There are already some Flex 4.6 apps available on the Android Market and on the App Store. If you have an iPhone, you can download the free music application called “Radio X-track”. It’s a Flex 4.6 app I’ve been working on, I’ll share more information about this app soon on this blog. Narcissus is also compiled with Flex 4.6 by the way and offers great performance on iPad tablets. Christophe and Holly shared an open-source tablet application to manage your expenses.I’ve also been working on a Flex 4.6 application for tablet users and Flex developers… This application is already secretly available on the Android Market but the app is still “in review” on the app store. As soon as it’s available for both iPad and Android tablets, I’ll showcase this application. More to come…

The evolution of Flex

This is a fairly long post, if you don’t have time to read it all right now, you may want to skip directly to What’s next for Flex. I’m French, I talk too much, and I’m not Victor Hugo… Whatever So feel free to skip this paragraph to focus on our future. But the history of Flex might help you understanding the difference between our past strategy and the new one.

Flex 1 was released in 2004. To develop and deploy a Flex app, you had to use a 15000$ server. I remember that I started looking at Flex 1.5 in 2005 at my previous company. Because of this economic model, I didn’t even try to develop a prototype. Then, after the acquisition of Macromedia, Flex 2 was launched with a free business model and an IDE based on Eclipse. It was 2006, when I started coding Flex projects and when I joined Adobe to promote this technology. In 2007, Flex 3 was open-sourced under the MPL license. Flex 4 introduced the Spark architecture that lets you skin visual components very easily and with a lot of freedom. Thanks to Flex 4.5.1 (and soon Flex 4.6) you can build “native-like” mobile apps and deploy them on Android, iOS and QNX. So what’s next?

I’m very close to the Java and the PHP community (I’m currently writing this post from the fantastic DEVOXX conference with 3200 Java developers around me). When we used to present Flex as an open-source technology, it was more a “you can view my source” one. That was a huge step, and it helped our community to understand how the framework works. After a few months, it also generated some frustration. Flex developers and strategic customers who are Flex masters wanted to contribute actively, optimize the code, etc… Some of them even started their own branches. The Spoon project is the expression of this will and the expression of our lack of efficiency in accepting contributions, which I think was because Flex was perceived and promoted as a product. What I want to express is that we were defining the new Flex features on our side, to (somewhat) surprise our community and generate excitement. It was of course based on customer and user feedback, but then the new features were only shared during main conferences (360Flex or MAX for instance), and this was related sometimes to our product strategy. And this system works very well to spur adoption and generate a lot of excitement: Flex is very successful in the Enterprise today thanks to this strategy.

What’s next for Flex ?

At the same time, HTML5 is moving very very fast — faster than most anyone would have predicted two years ago. This is mainly due to the success of the iPad. That’s why Adobe believes that within 3 to 5 years, depending on the complexity of your RIA, HTML5 should be able to enable decent Enterprise Application user experiences for desktop users, associated with a professional coding experience. What I would add, as an Enterprise consultant, is that we can easily add 2 or 3 years to this period of time. A significant part of the Enterprise customers I’m interacting with are still running on Windows XP. This is a reflection of the tempo of the Enterprise world that cannot be synced with the outside world for security, maintenance, training, and auditing reasons. So even if HTML5 integrates some key RIA concepts within 5 years, it means that browsers still have to implement them and that companies need to update to a recent browser… well, you know the story.

Flex is and will remain the leading framework for first-class Enterprise applications for many years. And by the way, don’t be scared. We’re not blind and we must accept the fact that HTML5 is making fantastic progress. That’s GREAT! And our community has A LOT of time to anticipate this shift and make the most of this transition. Adobe won’t let you down. We’ll contribute to open standards, and at the same time, Adobe, starting with my team, will make sure that you’ll make it through — and even thrive during — any shift in our industry. Don’t worry, if HTML5 becomes the standard for RIA apps, then the best HTML5 RIA developers of tomorrow will be today’s Flex developers. Why? Because RIA development is not just a matter of language. RIA developers have a lot of specific skills (design awareness, client-side architectures, service exposure architecture, user-experience, mobile applications conception and optimization to name a few). You have a unique knowledge of the market that goes beyond knowing a technology inside and out. Adobe is already a key player in the HTML industry, and we’ll deliver more and more advanced tools and technologies (you can already look at PhoneGap, Edge…).

That’s why we need to define the best strategy for the Flex framework and establish it as an Enterprise standard today! There are two options. The first option is to invest in more new features and hire more engineers on the Flex SDK team. For the long term, I don’t believe in this strategy. It’s the traditional way to proceed for software products but not for application development frameworks. The more committed and talented developers you have in the community, the more you need to let them interact with the source code of your technology. The more you have mission critical Flex apps deployed in large organizations, the more strategic customers need to trust the future of your technology. Open source can fulfill these needs. We all know that Flex is deeply linked to the Flash Player which boosted the innovation on the web, and then, consequently, in Rich Internet Applications. I believe that the Flex framework is very mature in terms of features and can answer pretty much all the current Enterprise needs. It can also answer  future needs as we can now rapidly build native apps for iOS, Android and QNX since Flex 4.5.

The second option is to consolidate the current SDK and transition to the next level of openness. That’s why we decided to propose incubating the Flex SDK to the Apache Software Foundation. I’m very happy and excited about this move for several reasons:

• Apache is a very respected foundation by developers and by large organizations. A lot of mission-critical Enterprise applications are already relying on Apache software: Axis, Ant, Maven, JackRabbit, Tomcat, Geronimo, ActiveMQ, Felix…
• We are not only proposing the Flex SDK, we’re also pushing BlazeDS (Java server libraries for data serialization and real-time messaging). In 2012, we’ll propose Falcon, a new generation compiler. We’ll also unveil and propose FalconJS, an experimental and advanced Flex to JavaScript compiler. More projects may also be proposed to Apache to build a first-class open Enterprise RIA stack.
• For the first time, Adobe won’t be the sole influencer on the Flex roadmap. We’ll still have engineers working on it but the effort will also be advanced directly by work of top Flex developers in the community (join the Spoon project if you’re one of them).

So Flex or HTML5 ?

I’ve been working on Rich Enterprise applications for more than 6 years and I can tell you that it requires a lot of different skills and specialized knowledge. RIA developers, and especially Flex developers, know how complex it is to combine an efficient user experience with a maintainable client architecture. Flex is really the only cross-platform solutions on the desktop for rich applications. Today, 90% of Flex applications are internal apps (statistics from what I see on the field) available on the intranet and on the extranet to share the screens with external partners or customers. Flex apps won’t run in mobile browsers as Apple and MSFT don’t host plugins on their tablets (we’re still waiting for the MSFT one by the way) and as Adobe announced its intent to discontinue Flash in mobile browsers. Thanks to this decision, Adobe engineers are now focusing on Adobe AIR, the runtime that can execute and package your Flex applications as native iOS, Android and QNX (BlackBerry) apps. With the arrival of Flex 4.6 at the end of November, Flex apps will perform even better to deliver “native-like” experiences on smartphones and tablet devices. So what’s the market for Flex? Well it’s huge because we are focusing on Enterprise apps and not on Customer apps, we’re focusing on Enterprise data-driven apps, on rebranding and re-architecting existing Enterprise apps developed with Web 1.0 technologies or even client-server ones. That’s a growing market in all industries. Tablets will accelerate this need of user-oriented architectures, because if you deliver a bad user experience on tablets, you’ll immediately fail. The potential of RIA for desktop and tablet users is higher than ever because it unlocks ROI (increase the productivity of your company, improve the decision making processes, reduce the learning curve and then the training costs for employees…). I know that today you’ll hear a lot of people talking about the growing role of tablet devices in our daily life, that tablets will replace PCs, etc… Who cannot agree? I’d like just to add that the Enterprise world is evolving at a different tempo. Believe me, you won’t see large organizations replacing all PCs by tablets next year. If it happens and if it makes sense, it will take years, maybe decades. Desktop users will still represent the main population of Enterprise apps end users for a very long time. With Flex, you can already target 100% of your desktop users without migrating to a new operating system or a new browser, and you can target 99% of tablet devices as you can now generate iOS and Android native apps.

This is regarding the market for Flex, but there’s also the “developer experience”. Flex has been designed for Enterprise developers who are used to working with object-oriented languages like Java, first-class debugging experiences (on the desktop and on mobile devices), continuous integration, agile development, modular applications managed by several development teams, productive tools based on Enterprise standard IDEs like Eclipse, etc… It’s by far the best and the most efficient coding experience on the market and that’s not trivial. Before developing a mission-critical application, you have to measure/estimate the development time. Flex is usually way faster than other solutions, for a better result at the end. That’s why it’s considered the leading RIA framework on the market. So, don’t be scared, Flex is not dead. I was not surprised to see some posts on the web promoting this idea. It’s a classic trend in our industry. Just to illustrate that point, I googled some queries. Here is my TOP 5 list of the dead technologies:

1. “.NET is dead” is the big winner with 576000 search results on Google. Congratulations.
2. “JAVA is dead” is following with 138.000 results. I can hardly feel this trend from Devoxx and the 3200 Java developers around me
3. “PHP is dead” is a little child with only 35.600 results.
4. “Ruby is dead” is in the same range with 30.700 results.
5. “AJAX is dead” generates 6500 results.

So we are newbies in this competition as “Flex is dead” only displays 5000 results I’m kidding of course, it’s a stupid analysis but it highlights that you shouldn’t always trust online articles about technologies lives. Try it with Flash, you’ll be amazed. Flash is a damned zombie . Ok… no more stupid games, let me go back to the future of Flex.

How can I contribute ?

After the announcement of our proposal to the Apache foundation, I received several emails from Flex developers and customers who want to contribute, to play a role in the roadmap, to fix bugs, etc… We’re still defining the process, so I cannot share any information on that today. But as soon as everything is defined, I’ll be the first writing tutorials to explain how to contribute. It’s such a big opportunity for the Flex community. It’s also a huge change of strategy and I’m aware of that, and some of you may be a little bit nervous. But Flex won’t be the only project in collaboration with Apache. We acquired Day software, and the engineers at Day are Apache masters, true open-source contributors. I like that. PhoneGap will also become an Apache project. Adobe is one of the top contributing companies to the Apache Foundation, and I fully embrace this strategy. I want Flex to become as popular as Tomcat in Enterprise architecture!

Let’s embrace this strategy together. Adobe is proud of Flex and super proud of what you achieve everyday with this framework. Based on the emotional reactions perceived on social networks this week, I can tell that we are all true and passionate Flex lovers. So let’s continue to build on that passion and work together on the future of Flex.

I’ve been working on a Flex mobile application called Narcissus, and I finally found the time to finalize and publish it on the App Store. Narcissus is a free application, available on the App Store for iPad users, and on your desktop thanks to the Adobe AIR runtime. Narcissus can analyze and segments the followers of a Twitter account. Inspired by Google + circles, Narcissus categorizes your followers in circles based on their activity on twitter (the number of tweets they sent) and their influence (the number of followers they get). It helps to understand who’s following you, how active your followers are on Twitter  and how influential they are. If you want your content to be re-tweeted and seen by a maximum of Twitter users, you’ll discover that you just need to focus on few people of your network. I’ve recorded a video that showcases the basic features of Narcissus.

This application has been developed with the Flex 4.5.1 framework and Flash Builder. It performs very well on all platforms (iPad, Android and the PlayBook), that’s why I want to share some tricks I’ve learnt building this app.

Design Driven Development

I’m clearly not a designer, but as I was the only person involved in this project, I forced myself to use the Design Driven Development methodology. It implies designing the full user-experience before writing one single line of code. As this project is a “data-visualization” application, the design process was obvious. The goal of a dashboard is to transform data into information. I know the data I can get from Twitter and I know what’s the user problem which is in this case: “how can I know better who’s following me on Twitter to be more efficient on my social network ?”. The UI of the application must bring solutions to that question. As it’s a dashboard application, I decided to use the “drill-down” strategy: start with a global view (using circles) and give the ability to drill-down (analyze the list of followers per category and get the details about a follower). I think I spent at least 4 hours in Photoshop to design the main screen, place the elements, design the circles, the callout popups, the icons… Then the second step is “what’s the best UI architecture to serve this design?”. I rapidly decided to use the new ViewNavigator class of Flex 4.5 and the IconItemRenderer to get the best performance on tablet devices. So I’m using a classic <s:Application> root tag that contains eight <s:ViewNavigator> components, one per circle. I spent two days on coding the application. Then I tested it on an iPAD, optimized the code (mainly my database code) and fixed some bugs.

Optimizing SQLite calls

When you test your application on your PC, SQLite always acts very well. When Narcissus retrieves the list of followers for one account, it needs to save all the ids in one table. So, if you analyze an account that has 2000 followers, it means that you need to fire 2000 INSERT SQL queries. On the desktop, it’s okay, it takes less than one second to Adobe AIR to save these 2000 lines. On the iPAD 1, it’s another story. It takes more or less 10 seconds, and it can freeze the UI. Very bad user-experience. That’s why I decided to use SQLite transactions. If you need to execute a batch of INSERT, DELETE or UPDATE queries, always use transactions. In other words, if you need to execute SQL queries that don’t return a result, you can use transactions. It reduced the SQLite processing time by 90% in my case. Here is a link to the doc that explains how it works, and the code I’m using in the application.

Code block

var sqlS:SQLStatement = new SQLStatement();
			sqlS.sqlConnection = sqlc;
			sqlS.text = "INSERT INTO "+ tableName+"(idUser,screenName,name,url,description,circle,nbFollowers,statusCount,picture) VALUES (@IDUSER,@SCREENNAME,@NAME,@URL,@DESCRIPTION,@CIRCLE,@NBFOLLOWERS,@STATUSCOUNT,@PICTURE)";
 
			sqlc.begin();
 
			for (var i:int = 0; i < arrayFollowers.length; i++)
			{
				objUser = arrayFollowers.getItemAt(i);
 
				sqlS.parameters['@IDUSER'] = objUser.idUser;
				sqlS.parameters['@SCREENNAME'] = objUser.screenName;
				sqlS.parameters['@NAME'] = objUser.name;
				sqlS.parameters['@URL'] = objUser.url;
				sqlS.parameters['@DESCRIPTION'] = myDescription;
				sqlS.parameters['@CIRCLE'] = objUser.circle;
				sqlS.parameters['@NBFOLLOWERS'] = objUser.nbFollowers;
				sqlS.parameters['@STATUSCOUNT'] = objUser.statusCount;
				sqlS.parameters['@PICTURE'] = objUser.picture;
				sqlS.execute();
			}
			sqlc.commit();

I’m also using incremental savings (auto-save) for performance and user-experience reasons.

How to persist simple parameters

I wanted to persist the settings (activity and influence thresholds) in a cleaner way than using a SQLite database. I started using the classic File API. The only directory that works on tablet devices is the Documents one. Here is some code that works both on desktop and tablet apps:

Code block

var file:File = File.documentsDirectory.resolvePath('settingsNarcissus.inf');
	if (file.exists) file.deleteFile();
 
	var fileStream:FileStream = new FileStream(); //create a file stream
	fileStream.open(file, FileMode.WRITE); // and open the file for write
	fileStream.writeObject(object); //write the object to the file
	fileStream.close();

But I’m not a big fan of the Files approach. That’s why I decided to use the Persitence Manager API. This class is so easy to use and so efficient!!! Here is how you can easily save and load settings from anywhere in your mobile project:

Code block

//SAVE
 
var object:SettingsObj = new SettingsObj(thresholdTweets,thresholdFollowers);
 
var persistenceMan:PersistenceManager = new PersistenceManager();
	persistenceMan.setProperty("settings",object);
	persistenceMan.save();
 
//LOAD
 
var persistenceMan:PersistenceManager = new PersistenceManager();
 
	try{
		var object:Object = persistenceMan.getProperty("settings");
 
		thresholdFollowers = object.savedThresholdFollowers;
		thresholdTweets = object.savedThresholdTweets;
	}catch(e:Error){
		//error management if empty
	}

Animations

Some developers asked me how I managed the animations and the transitions with the circles. For the animations, I’m simply declaring basic MXML sequences. When I get the profile image picture of a Twitter account, I’m assigning it to a circle, and then I change the xTo and yTo coordinates of the ‘moveProfile’ object. Here is how I declared the sequence.

Code block

<s:Sequence id="seqAnimationProfile" target="{profileImageComp}" effectEnd="seqAnimationProfile_effectEndHandler(event)">
			<s:Fade  alphaFrom="0" alphaTo="100" duration="500"/>
			<s:Move id='moveProfile'  xFrom="480" yFrom="380" duration="800">
				<s:easer>
 
					<s:Sine/>
 
				</s:easer>
			</s:Move>
			<s:Fade alphaFrom="100" alphaTo="0" duration="500"/>
			<s:Move  xTo="480" yTo="380" duration="50"/>
		</s:Sequence>

Regarding the circles, I’m using the default transitions of the ViewNavigator object. To enjoy the background image, I’m placing eight ViewNavigator with a transparent background which load views with transparent background. Just set the backgroundAlpha property to 0 in the ViewNavigator tags AND in the View tags. The circles are also animated. To do so, I’m playing with MXML graphic properties. The static parts are PNG files (the background and the reflection effet at the top of the circle), the animated part is a Spark Graphic component. Here is the MXML code for a circle:

Code block

<s:Image horizontalCenter="0" source="assets/images/circleBack.png"   verticalCenter="-20"/>
	<s:Graphic id="theCircle"  version="2" horizontalCenter="0" verticalCenter="-20">
		<s:Ellipse height="{radiusCircle}" width="{radiusCircle}">
			<s:fill>
				<s:SolidColor color="{data.colorCircle}"/>
			</s:fill>
		</s:Ellipse>
	</s:Graphic>
	<s:Image horizontalCenter="0" source="assets/images/circleReflect.png" verticalCenter="-87"/>

To animate the circles with some easing, I declared a Resize effect.

Code block

<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<s:Resize id="fxResize"  duration="500"  target="{theCircle}">
			<s:easer>
 
				<s:Sine/>
 
			</s:easer>
		</s:Resize>
 
	</fx:Declarations>

Leveraging the MXML tags of the Flex framework, you can very quickly build a professional iPAD application. Narcissus has been immediately approved by Apple on the App Store.

Links

If you want to use Narcissus on your desktop (MAC & Windows), install this AIR application:

http://www.riagora.com/narcissus/Narcissus.air

If you have an iPAD, then you can find it on the App Store:

http://itunes.apple.com/us/app/narcissus/id472974421?mt=8

Feel free to add a nice review on the App Store. If you don’t like the app, don’t say anything

Narcissus is just a small app that showcases how creative you can be with basic Flex components on tablet devices. I’m working on the Android version (I just need to fix some relative coordinates stuff to accept all screen resolutions).

I hope you’ll like it. Enjoy  !

One of the challenges in the world of HTML/JavaScript/CSS app development is cobbling together your kitchen sink of frameworks, tools and other technologies. When you start looking around, it feels like there is an endless list of options, which is good and bad!  Recently, I’ve been gathering a list of what’s popular these days and thought it might be useful for others to share. If you see anything obvious missing, please let me know.  Thanks to the following for helping me put together this list: Ray Camden, Andy Trice, Philip Wilson, Christophe Coenraets, Piotr Walczyszyn, and James Brown.

In no particular order:

• Adobe Edge – HTML5/JS/CSS animation/interaction tool - http://labs.adobe.com/technologies/edge/
• Less Framework – CSS grid system/layout - http://lessframework.com/
• Less – alternative CSS syntax – supports OO-like syntax – referenced by Google at Google IO – used in many projects - http://lesscss.org/
• Saas – another alternative CSS syntax – similar to Less - http://sass-lang.com/
• Kendo UI Framework (mobile coming soon) - http://www.kendoui.com/
• Sencha - http://www.sencha.com/ - multiple products – including Sencha Touch, Charts, etc.
• JQuery UI - http://jqueryui.com/
• JQuery (core) - http://jquery.com/
• JQuery Mobile - http://jquerymobile.com/
• xui -minimalist JQuery-like framework - http://xuijs.com/
• zepto.js – minimalist JQuery-like framework - http://zeptojs.com/
• Backbone.js MVC framework for JavaScript - http://documentcloud.github.com/backbone/
• Underscore.js – Kitchen-sink utilities for JavaScript - http://documentcloud.github.com/underscore/
• Modernizr – JavaScript library to detect device features – very popular - http://modernizr.com/
• cubiq.org – home of iScroll, a very popular scroll/list lib - http://cubiq.org/
• appMobi – web-based dev with emulation, etc.  Also has an HTML5-framework - http://www.appmobi.com/
• LeviRoutes - lightweight routes framework for hooking in to HTML5 history - https://github.com/PaulKinlan/leviroutes
• Mustache – “logic-less templates” – mentioned by Google presenters at Google IO - http://mustache.github.com/
• Midori – JavaScript framework – JQuery-like with some unique features - http://www.midorijs.com/
• Knockout.js – JavaScript UI framework – implements MVVM pattern – recommended by Greg’s brother – popular - http://knockoutjs.com/
• AngularJS – MVC framework, two-way data binding, JQuery-compatible - http://angularjs.org/
• JSFiddle – online tool for doing lint/tidy/debugging - http://jsfiddle.net/
• HighCharts – fantastic looking charts - http://www.highcharts.com/
• ZingCharts – HTML5/SVG/VML and Flash charts - http://www.zingchart.com/#welcome
• AMCharts – JavaScript/HTML5-based charts.  They also offer Flash-based charts. - http://www.amcharts.com/javascript/
• HTML5 Boiler Plate – assist with cross-browser issues and other utils - http://html5boilerplate.com/
• Bootstrap, from Twitter - Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. http://twitter.github.com/bootstrap/
• Popcorn.js – HTML5/JS Media Framework - http://popcornjs.org/
• Three.js – JavaScript 3D engine - https://github.com/mrdoob/three.js and http://www.aerotwist.com/lab/getting-started-with-three-js/
• PhoneGap – http://phonegap.com
• PhoneGap Plugins - https://github.com/phonegap/phonegap-plugins
• Require.js – http://requirejs.org - RequireJS is a JavaScript file and module loader
• Brunch - http://brunch.io/ - A lightweight approach to building HTML5 applications with emphasis on elegance and simplicity.

Google Analytics is also trying to ease the addition of tracking events inside Flex applications. Unfortunately, the current version of the Google Analytics Tracker library doesn’t support Flex mobile projects. As I really needed this feature for a mobile app (that I will unveil next week), I modified the source code of the GATracker library and now it works like a charm. You can track everything, I mean everything:

- If you have HTTPService requests, you can track how many successful results your users get and  compared this number with the number HTTP fault events.

- If you have 5 tabs in your mobile apps, measure what is the most used tab, check if they are all used. You can also imagine to track the most common path for your app and track scenarios such as “the user hits tab 1, then tab 3 and then tab 2, is the main use case”.

Your mission is to defined what makes sense in your application, and which information will help optimizing it. Here are the steps I used to add Google Analytics tracking information in my mobile application:

1. Download the source (not the SWC) of the Google Analytics for Flash library:  http://code.google.com/p/gaforflash/

2. Open your Flex mobile project and add the code inside your project. It will create a com.google.analytics package with a lot of AS3 classes.

In your Google Analytics console, you need to measure an existing website (in my case riagora.com) and add the classic Google Analytics JavaScript library. Then your website will be validated and you’ll be given an ID for your website by Google. We’ll surcharge the tracking information of your website with mobile tracking information. The ID of your website should look like this chain of characters: UA-2999999-2.

3. On the application level (your root MXML file), create an AnalyticsTracker variable and instantiate a GATracker. The tracking variable is public. Add this code for instance:

Code block

public var tracker:AnalyticsTracker;
protected function viewnavigatorapplication1_creationCompleteHandler(event:FlexEvent):void
{
	// TODO Auto-generated method stub
	tracker = new GATracker(this,"YOUR_GOOGLE_ANALYTICS_WEBSITE_ID","AS3",false);
}

4. If you want to track something, just call the trackPageview method. It’s waiting for the name of the HTML page as a parameter. Create custom names such as “/mobileApp-Success”, or “/mobileApp-tab1″.

Code block

protected function button1_clickHandler(event:MouseEvent):void
{
	// TODO Auto-generated method stub
					FlexGlobals.topLevelApplication.tracker.trackPageview('/mobileApp-tab1');
}

5. Now if you compile your project, you’ll get error messages such as the famous TypeError #1009, also known as “the error that doesn’t help”. Let’s start modifying the Google Analytics code.

6. Open the class components/FlexTracker.as

7. Search and replace this code:

Code block

var appclass:Object = getDefinitionByName( "mx.core::Application" );
 _app = appclass.application;

by code that doesn’t refer to MX Application. In Flex 4.5, we don’t use MX applications anymore, but we can use the FlexGlobals class

Code block

appclass = getDefinitionByName( "mx.core::FlexGlobals" );
 
_app = appclass.topLevelApplication;

8. Then we need to add the root URL of our virtual website (in my case riagora.com). By default, the library tries to get the URL from browser information… well this cannot work with a mobile app running in AIR, so we’ll hard-code the URL Open the GATracker.as class. Comment the _env.url line and add your own root URL.

Code block

//_env.url = _display.stage.loaderInfo.url;
_env.url = "http://www.riagora.com/";

9. We still have to deal with small ‘stage’ issues. Open the core/IdleTimer.as class and comment two lines of code that deal with the Stage:

Code block

_debug      = debug;
         //   _stage      = display.stage;
            _buffer     = buffer;
            _lastMove   = getTimer();
            _inactivity = inactivity * 1000; //milliseconds
 
            _loop.addEventListener( TimerEvent.TIMER, checkForIdle );
            _session.addEventListener( TimerEvent.TIMER_COMPLETE, endSession );
          //  _stage.addEventListener( MouseEvent.MOUSE_MOVE, onMouseMove );

10. And that’s it!!! Within the Google Analytics console, you can now create custom dashboards, filtering the visited pages that starts with “/mobileApp”.

11. You can download this sample Flex 4.5.1 project that contains my updated Google Analytics library. Here is the link to this Flash Builder project: http://riagora.com/pvt_content/android/GoogleAnalytics.fxp

WARNING: Google Analytics doesn’t display the results in real-time ! You have to wait for 24 hours before seeing some tracking results.

When you look at how humans have interacted with enterprise knowledge over the years and even today, paper is still very present. You often interact directly with the knowledge on a horizontal plan using a pen, but this can hardly be centralized. Collaboration on a whiteboard is also an interesting case. You share and review the knowledge on a vertical plane. Often this knowledge is lost as collaboration is thought of as a temporary step in an enterprise workflow or a decision making process. These two interactions (paper and whiteboard) are still very common in large organizations, and that’s how we learn things at school. Personal computers introduced a different approach due to the rise of mice and keyboards. You move your mouse on an horizontal plane, it acts on a vertical plane that hosts the knowledge. For the first time the knowledge could be easily centralized and shared beyond the firewall (the extended company) with partners and external customers. Inspired by typewriters, PCs are not mobile at all, even less mobile than paper. The laptop was the first attempt of mobility. It automatically extended our work area and let us interact with the enterprise knowledge from home and on the road. But it also introduced some of the worst interactions ever (trackpad, balls, etc…). Smartphones are the real truly mobile device, the first that can answer the “anywhere and at any time” requirement. But the typing experience is bad and the small screens don’t let you review documents for instance. For all these reasons, you can see why tablets are a natural evolution. Although there’s still progress to be made, tablets are fully mobile, the typing experience is good, the large screen lets you review documents, and for the first time, and you can combine pleasure and work on the same device.

The rise of tablet devices in large organizations introduces new challenges for IT services. They have to define new processes to secure the configuration and deployment of apps, they have to ensure that mobile apps are auditable and compliant, and, most of all, they have to run existing applications. On the other side, end users are already tablet ninjas. That’s why there will be a gap between what IT services can deliver and users’ expectations. I also believe that native applications deliver the experience that people expect. If you deliver a classic web app on a tablet, employees won’t feel the benefits and they will wait until they are in front of a PC to interact with your app. By the way, I don’t think that tablet devices will replace laptops or PC. Sometimes, it will be complementary, and sometimes yes, there will be some cannibalization. If you look at the enterprise apps developed on tablets in 2011, they were mainly targeting three populations: the top managers, the sales force and the inspectors. Top managers need a real-time access to strategic information. They want dashboards to accelerate and improve their decision making time. The sales force uses tablets for two reasons. It’s a fantastic device to showcase the products  you’re selling, and it’s also a nice way to interact with the CRM. Inspectors, or employees that need to audit external environments, are naturally using tablets to access technical information, capture data in the field and collaborate. Tomorrow, anyone is a potential tablet candidate. Even I as a developer, I can imagine having a tablet with a companion app, helping me browsing the AS3 doc for instance (I think that someone had this idea before me… more to come…).

Flex developers can answer these new needs very easily. We are in pole position. If we embrace a Design-Driven Development methodology, we’ll be very successful. DDD consists of defining the technical infrastructure of your solution based on the user experience. The UI is here to solve end users’ problems, and the system serves the UI. If you build a system-centric application on a tablet, with a UI that reflects the system, then you’ll fail. I hope that tablets will boost the Design-Driven methodology in large organizations. It would also increase the number of Rich Internet Applications. Today, RIA frameworks (and especially Flex) are much more mature than enterprise IT services.  Even with the best technology, if IT services stick to their traditional way of developing products, they will fail again and again. Flex developers need to become DDD sponsors.

Here is the recording of my presentation. You’ll also find my slides (hosted by SlideShare) at the end of this article.

Stuff needed:

• Small Phillips-head screwdriver
• T6 Torx screwdriver (I found one at the local CompUSA as part of a small computer toolkit that cost less than $15)
• New hard drive – in my case, it’s the Intel 320 Series 300GB SATA 3.0 GB-s 2.5″ Solid State drive
• SATA USB Docking station – allows you to access the new hard drive as a USB drive.  There are many alternatives.  I’ve had the Thermaltake BlacX for a couple of years.
• Software to clone hard drives.  There are a few options, but I use Carbon Copy Cloner.  This software is also good for creating bootable USB drive images of your main drive.  In a pinch, you could boot off your USB drive and keep going if your main drive crashes.
• Good directions on replacing the hard drive.  The iFixit site always has good directions.  For my early-2011 MacBook pro 15″, I used this page.

     

1. I cleaned up my existing hard drive.  Since I was downsizing (for the first time in my life!), I had to do some serious space making (long overdue).
2. I plugged my new SSD into the SATA USB Dock and connected it to my computer.
3. I formatted the drive using Disk Utility.  I used the same format as my main drive (Mac OS Extended (Journaled)).
4. I ran Carbon Copy Cloner and set it to copy everything.  This took about 4 hours on my machine.  During that 4 hours, I continued to work knowing that I would be slightly out of sync when the cloning process was complete.
5. After the clone was finished, I shut down Mail, Calendar, Eclipse, Evernote, etc., and ran the clone process again as an incremental update.  This took less than 30 minutes.
6. I then shut down the MacBook Pro, unplugged it and flipped it upside down to start the surgery.
7. I followed the instructions at http://www.ifixit.com/Guide/Installing-MacBook-Pro-15-Inch-Unibody-Early-2011-Hard-Drive-Replacement/5895/1 to swap the drives.  Depending on which model of MacBook you have, you may need to find alternative instructions.  For the early 2011 MacBook Pro 15″, it’s a piece of cake.  The only nervous moment was getting the bottom panel to snap off.  It takes some gentle prying.  Everything else was easy.  Since I was only replacing the hard drive, I skipped the step about disconnecting the battery.  (Do this at your own risk)
8. I put everything back together and booted it up.
9. After it was up and going, I turned off the hard drive sleep feature in SETTINGS, ENERGY SAVER (uncheck the “Put the hard disks(s) to sleep when possible” on both BATTERY and POWER ADAPTER).
10. All modern MacBooks have sudden motion sensors that halt the hard drive when motion is detected to save the drive heads.  Since this is a solid state drive with no moving parts, I turned off this feature using the following command in terminal: sudo pmset -a sms 0
11. I then went to disk utility and verified the disk, and ran the repair permissions function.  This is always a good idea after doing any drive swap.

• diskutil eject /dev/disk1  – ejects my 2nd hard drive which forces it to power down.  The drive is then unavailable until you remount it using the following command.
• diskutil mountDisk /dev/disk1  — mounts the drive again.

The OWC Data Doubler:

Simply modify the main Java Class of your PhoneGap Android project and set the loadInWebView property to true – then simply load your content using http:// instead of file://. If you try using http:// without setting the loadInWebView property, it will open the page in the device’s browser and your code won’t have access to the device APIs.

For example:

package com.gregwilson.gregpg1;

import com.phonegap.*;

public class GregPG1Activity 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://somewebsite/index.html");
        //ORIGINAL--> super.loadUrl("file:///android_asset/www/index.html");
    }
}

Since the web content is loaded and executed in the PhoneGap container, you can use any PhoneGap JavaScript APIs you desire just as if the code was loaded from the device. A few thoughts:

• This could actually speed up parts of the development workflow because now I can simply modify the HTML/CSS/JS and reload the page (once I add a reload button!). It avoids having to deploy the app over and over.
• This opens up a huge security hole. Imagine if someone could hack your web server and inject some new JavaScript. Since the JavaScript executes on the device, in the PhoneGap container, it could easily extract or delete your contacts, determine your location and many other devious things. Therefore, I would NOT recommend doing this for anything other than testing.
• There might be some interesting hybrid apps where some of the content is sourced from the server while other content is on the device, but I’m fairly sure this would not be a “best practice” without further code changes to avoid the security issues.
• Assuming this is possible on iOS, I’m fairly certain that your app could be rejected since you are loading external code (a no-no in iOS-land).

I’m not a PhoneGap expert (yet!), so feel free to correct me. I’m basically blogging as I learn!

The PhoneGap announcement at MAX 2011 really got a lot of people excited (including me!), and it raised a few questions about how it changes our jobs as evangelists.  PhoneGap gives us the means to build cross-platform apps with HTML5 with hooks into the device’s native APIs (see my previous post).  Having new things to show off to developers and customers is always a good thing, especially when this new thing lets us stretch our new HTML5 muscles on mobile devices.  I’m already playing around with using Adobe Edge to animate some interactions in a mobile app (stay tuned!).

As a technical evangelist talking to developers, having PhoneGap in my arsenal removes the  ”HTML vs Flash/Flex” religion  from the discussion and allows us to have a real conversation about which technology is the best solution for the requirements at hand.

Here’s an analogy:  If I worked for a company that sells tile flooring, it would be tough for me to convince someone that tile is the best choice for a particular room because they will expect me to say that tile is best for everything.  Conversely, if I worked for a company that sells wood flooring, they expect me to say wood is best.  However, if I work for a company that sells both types of flooring, I can have a real discussion about which is best on a room by room basis because I will have credibility in both types of flooring.

Now the conversation starts at a higher level and allows me to be more effective at demonstrating the value that Adobe offers to anyone building mobile apps.

There are clearly use-cases where PhoneGap will indeed be the better choice because of the lightweight nature, broader device support and the availability of the required skillset to build these types of apps.  However, there will continue to be use-cases that go beyond the capabilities of HTML5 and will demand the more capable Flash/Flex platform.  Features such as collaboration, complex UIs, handling of large data sets, real-time data processing, and rich data visualization are just a few examples where HTML5 simply won’t cut it today.  However, as the capabilities of the platforms evolve, Adobe is in a good position to provide solutions across the spectrum.

Our team is in rapid learning mode now, but that’s why we do this job.  New products, new technologies and new ways of approaching problems is what fuels us.  We’re basically professional learners.  During the next few months, you’ll see more content related to PhoneGap as well as the new features coming in Flex 4.6, and much more.  Fun, fun!

Since I’m more familiar with Android than iOS, I’ll explain how it works for Android.

First, you create a new Android project in Eclipse (requires the Android SDK), add the phonegap.jar file to the lib folder, and make a few tweaks to the manifest and other files (details here). The main java file is modified as follows:

package com.gregwilson.gregpg1;

import com.phonegap.*;
import android.os.Bundle;

public class GregPG1Activity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

Notice the highlighted line (line 11) —  We’ve created a native Android app, and this native app loads android_assets/www/index.html in WebView when launched.  WebView is a class in the Android SDK that allows you to display web pages as a part of your layout.  It’s like having a web browser inside of your app and uses the device’s existing implementation of WebKit.  In iOS, it’s UIWebView.  Other mobile OSes use similar techniques.

Below is my project in both Eclipse (Android) and Xcode (iOS).  The web application is in the www folder indicated by the red arrows.

Now you simply compile, build, deploy like any other Android project.

Basically, PhoneGap apps are HTML/JS/CSS apps that run within the WebView (or equiv) component. If you are like me, at this point you are thinking, “Uh – that’s lame – is that it? I can do that today without any additional software”.

But there’s more… PhoneGap extends the WebView class to give it hooks back to the device itself and exposed them as JavaScript.  Remember the jar file that is in the project?  The project also includes a phonegap.js file, which exposes many new functions that make this much more than simply displaying a web page in a WebView component.

Check out the code below for accessing the device GPS (copied from one of the many great examples from http://docs.phonegap.com).  If you create an PhoneGap project and copy the code below to your index.html file, you can see it run.

<!DOCTYPE html>
<html>
  <head>
    <title>Device Properties Example</title>

    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for PhoneGap to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // PhoneGap is ready
    //
    function onDeviceReady() {
        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    }

    // onSuccess Geolocation
    //
    function onSuccess(position) {
        var element = document.getElementById('geolocation');
        element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' +
                            'Longitude: '          + position.coords.longitude             + '<br />' +
                            'Altitude: '           + position.coords.altitude              + '<br />' +
                            'Accuracy: '           + position.coords.accuracy              + '<br />' +
                            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +
                            'Heading: '            + position.coords.heading               + '<br />' +
                            'Speed: '              + position.coords.speed                 + '<br />' +
                            'Timestamp: '          + new Date(position.timestamp)          + '<br />';
    }

    // onError Callback receives a PositionError object
    //
    function onError(error) {
        alert('code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');
    }

    </script>
  </head>
  <body>
    <p id="geolocation">Finding geolocation...</p>
  </body>
</html>

Now your “web app” has access to Accelerometer, Camera, Compass, Contacts, and many other device capabilities.

Some observations:

• Since the app itself is super small, it loads crazy fast – less than one second on my HTC Inspire and iPad 2.  You probably won’t even need a splash screen.
• The framework is simple and lightweight, so the resulting app has a very small memory footprint. This allows apps to work on older and slower hardware like the original iPhone and older BlackBerry phones.
• The PhoneGap docs and examples are fantastic – clear and concise.  I was able to copy/paste every sample and see the results. (one note — the phonegap-1.1.0.js for Android is different than the phonegap-1.1.0.js for iOS – I initially made the mistake of assuming they were identical and killed a few hours trying to figure out why certain samples wouldn’t run)
• The platform support is broad. As of this article, PhoneGap supports iOS (iPhone, iPhone 3G/3Gs/4/4S, iPad 1/2, Android (all versions), BlackBerry OS 4.6 and newer, WebOS, Symbian, Bada and they have recently started to support Windows Mobile. See http://www.phonegap.com/about/features for a list of what’s supported on each.
• Your HTML/JS/CSS run in the native WebView so you are free to use any frameworks you desire such as JQuery Mobile, Sencha, whatever. PhoneGap gives you a WebView/UIWebView with hooks to the device. The rest is up to you.
• PhoneGap is free, open-source and will become an Apache project very soon (translation – it will remain free).
• PhoneGap is extendable via a plugin model giving you a bridge between native code capabilities and JavaScript.
• There is already a great collection of community-created plugins at https://github.com/phonegap/phonegap-plugins.
• I haven’t figured out a good way to debug these types of apps yet.  I suspect that this will be a bit of a challenge.  There is a console.log() function that will send messages back to your Eclipse console.  When the camera sample wasn’t working, I really had no clues as to why.  It’s likely that I’m missing something, so it’s too early to judge.

PhoneGap Build

As you start building mobile apps in any technology, you soon discover that each platform has it’s own deployment steps and tooling requirments (some of which are amazingly tedious and error-prone).  For example, to build a native iOS app, you use Xcode, which only runs on Mac OS X.  To build for BlackBerry phones, you have to use their tooling that only runs on Windows.  To build for both platforms, you’ll need two machines (or use virtualization).  This is why http://build.phonegap.com was created.  The service allows you to upload your www project folder (or give it a GitHub URL) and it will package your app for the supported platforms.  The specific steps are documented at https://build.phonegap.com/docs/start.  NOTE: Adobe has stated that this service will continue as part of the recently announced “Adobe Creative Cloud” but no details have been provided nor has any pricing been announced.

What’s next

If you’re intrigued, I encourage you to go to http://phonegap.com, where you’ll find everything you need to build an app. I was able to get a Hello World app running on both Android and iOS in under 30 minutes (not counting the downloading of Xcode).  The “Getting Started” section is excellent.

…but then when you turn it landscape, you get the white borders (or whatever your app background color is):

…so you change the splashScreenScaleMode property to “stretch” and you get this (destroys the image):

…so then you start looking into how to include multiple splash screens, which requires a custom preloader and additional image work.

Below is the same splash screen, but as you can see, I used a single square image that works with both orientations.

What about handling multiple device sizes? The same technique works, as long as you keep the content within the center square that has a width/height equal to the short side of the smallest device you intend to install on.

Below are two images; one for tablets, and one for phones. I’ve drawn the portrait and landscape edges of several popular devices.

Tablets:
The largest tablet I’ve seen is the Motorola Zoom and Samsung Galaxy Tab 10.1, both of which are 1280×800, so my diagram below assumes that it is the largest possible resolution by making the splash screen image 1280×1280:

Click for full-size

Phones:
Phones come in many resolutions. The image below assumes that the largest resolution is 960×640 (iPhone 4), so the image is 960×960:

Click for full-size

Depending on your splash screen design, you could get away with only two images, one for tablets and one for phones. I typically do three images, one for the low-resolution iPhone 3Gs, one for other phones, and one for tablets.

If you are building an app that targets multiple device resolutions, I suggest you use the code below as your preloader. It assumes three images – tablet, high-res phones, low-res phones. It selects the image based on the length of the longest edge of the screen.

// Based on original DPI-based code by Jason San Jose at http://www.adobe.com/devnet/flex/articles/mobile-skinning-part2.html#articlecontentAdobe_numberedheader_5
// Improved by Christophe Coenraets to select image based on length of longest edge of device - http://coenraets.org
// Simplied by Greg Wilson to use only 3 images for all devices
package
{
	import flash.desktop.NativeApplication;
	import flash.display.NativeWindow;
	import flash.display.Stage;
	import flash.display.StageAspectRatio;
	import flash.display.StageOrientation;
	import flash.system.Capabilities;

	import mx.core.DPIClassification;
	import mx.core.mx_internal;

	import spark.preloaders.SplashScreen;

	use namespace mx_internal;

	public class MultiDPISplashScreen extends SplashScreen
	{
		[Embed(source="assets/splash-tablet.png")]
		private var SplashImageTablet:Class;

		[Embed(source="assets/splash-high-phone.png")]
		private var SplashImageHighPhone:Class;

		[Embed(source="assets/splash-low-phone.png")]
		private var SplashImageLowPhone:Class;

		public function MultiDPISplashScreen()
		{
			super();
		}

		override mx_internal function getImageClass(dpi:Number, aspectRatio:String):Class
		{
			var min:int = Math.min(Capabilities.screenResolutionX, Capabilities.screenResolutionY);

			if (min > 960)
				return SplashImageTablet;
			else if (min > 320)
				return SplashImageHighPhone;
			else
				return SplashImageLowPhone;
		}
	}
}

Problem: After updating to OS X Lion, I noticed that the fans were spinning constantly and my battery was being quickly drained.  A quick look at the activity monitor showed a process called VShieldUpdate.

VShieldUpdate is a virus scanning app that is part of VMWare Fusion.  For some reason, the updater for this app gets hung after updating to Lion.

Solution:  Uninstall it with the following commands (from Terminal):

After a couple of seconds, life returns to normal. My VMWare images might be missing some virus protection, but for me, that’s not a problem.

I had WiFi on this flight... Cloud Computing?

During the past year, I’ve learned a lot about various cloud computing offerings including Amazon EC2 / S3 / CloudFront / Beanstalk / RDS / etc., Rackspace Cloud, Salesforce.com, Cloud Foundry, Heroku, and of course, the growing number of Adobe cloud-related offerings.  I’ve also learned that “cloud” is probably the most overused word I’ve come across in 20+ years in technology!  I’ve put together a crash course MAX session to introduce people to what cloud computing is really all about.  My goal is to use only a few slides and spend most of the session doing some real demos that really show off what’s cool in cloud computing.   It’ll be action packed, so come check it out!  The information is below:

When: Wednesday, October 5, 11:00 a.m. – 12:00 p.m, I’m doing the following session at Adobe MAX 2011

Migration to the Cloud: How Do I Get There?

Cut through the hype and see what cloud computing is really all about. Take a tour of cloud infrastructure-as-a-service (IaaS) and platform-as-a-service (PaaS) solutions. Watch a live deployment of a server infrastructure that supports a new mobile app built with Adobe Flex. Learn how to create a new virtual server, configure it, and bring it online—all in a few minutes. Then see how the infrastructure is horizontally scaled to support 1,000,000+ users. During the demonstration, you’ll learn about reliability, redundancy, disaster recovery, geographic distribution, and other important considerations for migrating to the cloud.

CODE:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   applicationComplete="init()">

	<fx:Script>
		<![CDATA[
			import flash.sensors.Geolocation;

			protected var geo:Geolocation;
			protected var geoLastEvent:GeolocationEvent;
			protected var geoCheckCount:int;
			protected var geoTimer:Timer;

			protected function init():void
			{
				log.text = "App Starting\n";
				if(Geolocation.isSupported)
				{
					geoCheckCount = 0;
					geo = new Geolocation();
					geo.setRequestedUpdateInterval(500); 		// suggest a very frequent update of 500ms
					geo.addEventListener(GeolocationEvent.UPDATE, onUpdate);

					// Create a timer
					geoTimer = new Timer(30000,1);
					geoTimer.addEventListener(TimerEvent.TIMER_COMPLETE,onTimeout);
					geoTimer.start();
				} else {
					log.appendText("GPS not supported on this device\n");
				}
			}

			protected function onUpdate(event:GeolocationEvent):void
			{
				++geoCheckCount;
				if(geoCheckCount <= 1) return; // Throw away the first location event because it's almost always the last known location, not current location
				geoLastEvent = event;

				if(event.horizontalAccuracy <= 150)
				{
					geoTimer.removeEventListener(TimerEvent.TIMER_COMPLETE,onTimeout);
					geoTimer.stop();
					log.appendText("LOCATION: " + event.latitude + " / " + event.longitude + " - " + event.horizontalAccuracy + "\n");
					geo.removeEventListener(GeolocationEvent.UPDATE, onUpdate);
					geo = null;
				}
			}

			protected function onTimeout(event:TimerEvent):void
			{
				geoTimer.removeEventListener(TimerEvent.TIMER_COMPLETE,onTimeout);
				geoTimer.stop();
				geoTimer = null;
				if(geoLastEvent != null)
				{
					log.appendText("Timed out - best location is: " + geoLastEvent.latitude + " / " + geoLastEvent.longitude + " - " + geoLastEvent.horizontalAccuracy + "\n");
				} else {
					log.appendText("Unable to determine location before timeout\n");
				}
				geo.removeEventListener(GeolocationEvent.UPDATE, onUpdate);
				geo = null;
			}

		]]>

	</fx:Script>
	<s:TextArea id="log" width="100%" height="100%"/>
</s:Application>