I thought that it would be helpful to document the experience I have while building a web application using jQuery Mobile. And this is what this article is all about. But before going into details let me set the context.

I started building mobile applications a while ago using Adobe AIR and the Flex framework. My first “production ready” application is called aTabSplitter and it is available for download in Android and BlackBerry markets. It was a fun and eye opening experience. I mean it is one thing “to play” with technology and an entire different thing to build something that will be actually useful and people will love to use it.

Recently, as I was playing with jQuery mobile I had an idea: what if I’d try to rebuild the application using HTML, CSS, and JavaScript? To make the things more complicated I wanted to retain the same UI and user experience. In other words I treated the mobile application as the design and user workflows diagrams you’d get from a UX.

If you haven’t tried the application yet let me briefly describe it: it allows you to split a restaurant bill. The important workflows are the first screen, where you add new persons, delete them, move them around the table, or adjust the tip and the calculator screen where you add the items for a single person. Actually, I am pretty proud because I think I found a good/intuitive user interface.

And by the way, here is the link for this web app.

Here are screenshots with the application running on desktop and mobile devices.

Android 4 Phone:

On iPad:

The Plan

Here is what I was set to achieve: a web application that will work on mobile devices and desktop. Although I could have gone the PhoneGap route and pack the whole thing into a native app, I wanted to have a single base code for the first pass that will work in browsers on all these different devices. As a framework I decided to go with jQuery Mobile. This, at least in theory, was a perfect match for my application given the fact that all I needed was a nice way to keep the two screen separated from a functional point of view.

I didn’t see any need for other frameworks. So for the rest of functionality I wrote JavaScript and used HTML/CSS and images to create all the UI I needed. Because I went for a web application I chose to implement only the main features of the original AIR app. Nevertheless, I wanted to use all the new features available in modern browsers that made sense for my app so I can make a responsive and usable web app. For the rest of the article, I will highlight some of the things that were either trickier or unexpected and the general approach. I hope you will find it useful.

jQuery Mobile and architectural considerations

jQuery mobile was a pretty obvious choice because of the features it offers. The way it lets you organize your application using “pages” and keep them in the same HTML is perfect for what I needed. Remember that I wanted to build a small application which has only two “screens”.  Also I like the fact that I can define most of the UI using pure HTML without the need of writing JavaScript.

Once I had the UI in place, I started to write the JavaScript code that powers the user interface. Normally, I would wrap the different functionalities in a number of objects. However for this project I decided to go against the best practices and write mainly functions. The only way I organized them was by splitting them in three different files: home.js, calculator.js, and utils.js. The first two files hold the functions used for the home screen and calculator screen and the third one utilities functions. Why did I choose to go against best practices? One main reason: the application is too small to worth spending time on architecting the code.

Although conceptually there are two pages in my application as far as the browser is concerned there is only one page. This means that the JavaScript code has visibility over the whole application DOM.

In the index.html there is a little bit of JavaScript code used for boot strapping the application. It is the usual jQuery business, executing the bootstrap code on the jQuery ready event. This is where I attached various event listeners on UI components and I set the height for main UI components.

The part with setting up the height manually was a bit of surprised. I was expecting that jQuery Mobile will take care of this for me and when the content in the page doesn’t overflow it will set the size of the div to be equal to the viewport minus the header and footer. It’s not the case.

Other interesting things in the index.html is the array that holds references to all the plates on the screen, a reference to the trash bin image – so I can quickly check if the user wants to delete a plate (if you drag a plate on top of the trash bin it will be deleted).

One of the issues I had was how can I make sure that the user doesn’t land directly on the second page. It doesn’t make sense to support this and if it happens it is confusing for the user. After I spent some time reading the documentation and talking to my fellow evangelist Ray Camden I decided to go for an extreme solution. Inside the function executed for jQuery ready event I checked the current page value. If it is calculator (the second page) then I reload the page:

//forcing the app to load the first screen if the user lands directly on the second page
if ($.mobile.activePage[0].id === 'calculator') {
   l = window.location;
   l.hash = '';
   window.location = l;
}

Finally, I tried to keep the dependencies on jQuery at minimum. Why? Because I plan to re-write the application using other frameworks and if I decide to go without jQuery then I don’t want to have lots of code to clean up.

Custom Data Attributes

Obviously this application must have a data model, right? There are different approaches I could have used to store the data model. The one that made most sense to me is using custom data- attributes.

Each plate that you add, has the data stored in two attributes:

• data-i : stores the items you add. For example, if you added 5 + 12, then data-i = [5, 12]
• data-t: stores the total. Using the example above, data-t = 17

Touchstart event vs mouse click event

If you worked with mobile web apps then chances are that you already know this. If not then you should pay attention. If you use click events for your UI components (buttons for example) when you run the application on a mobile device (including most powerful tablets) you will notice a huge lag between the time you touched a button and the execution of the click event listener. It is so big that it renders the app almost not usable. The solution is pretty simple: use touchstart events instead of clickevents. On touch devices whenever you touch the screen you get events in the following order:

1. touchstart
2. touchmove
3. touchend

Dealing with multiple touch events

When you use touchstart and click events in your application a lot, you will end up in a situation where you need to add logic to handle some use cases. The first screen of my application is pretty heavy on touch events usage: you can touch the screen to add a new plate, you touch a plate to go the second screen and edit, you can move around a plate, or you can touch the slider to adjust the tip. I have all my events registered for the bubbling phase (if you need a refresh on the event phases check this resource).

Much to my surprise, I couldn’t use the slider on mobile devices. Every time I touched the slider a new plate was added to the screen. My solution to this issue was a quick hack to check for the target object in the event listener that adds a new plate – if the target is part of the slider then I don’t add a new plate.

Another area where I had to pay attention was the plate itself. You can touch/click a plate to move around or to edit. I decided that if you move a plate around it doesn’t necessary mean you want to edit. I change the app to edit plate screen if the plate moved more than 10 pixels on any direction.

Custom components

Most of the UI components I needed for my app were covered by the browser or jQuery Mobile. However there was one I needed to create – the component that represents one person on the first screen.

It is pretty simple component: an image that represents a plate and a label that displays the total. Or it is until you try to make it work. Because I wanted the text to be centered both vertically and horizontally. Also, if the text grows bigger than the image, I wanted to be centered (see the picture below).

After some try and errors I manage to come with the following code for this:

<div class="plate">
    <img src="assets/images/plate-big.png" alt="" />
    <div>0</div>
</div>

Here is the CSS for this component:

.plate {
      position: absolute;
      color: #000000;
      font-size: 20px;
      overflow: visible;
      text-align: center;
      -moz-user-select: -moz-none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      user-select: none;
}
.plate > div {
      text-align: center;
      margin-top: -65px;
      width: 100%;
}

The second custom component was the keyboard I use on the second screen. All I needed was a basic calculator keyboard actually even simpler as I didn’t need all the operations. Why did I go for a custom keyboard? Because it makes my app more usable by giving the user only the keys he need.

I used the old school tables approach. And it worked beautifully on the desktop but not so good on the mobile phones – the keyboard was falling out the screen. After some debugging using weinreI realized what was happening. jQuery Mobile augments your code. Typically, for any button you have in your app it will generate a number of divs/spans that are positioned on top of the button and these elements actually provides the visual appearance of the button.

Because it does a generous use of padding and margins there was no way I will manage to fit 5 buttons on the same row on an iPhone or Android phone. How did I fix this? Well my solution is certainly not the most elegant but it works. I used Media Queries, CSS selectors, and the infamous !important to overwrite the jQuery styles for my keyboard when the app is running on mobile phones. If anyone knows a better solution please tell me!

Saving application state – Web Storage

Suppose you add some items and persons to the app and you accidentally hit the back button. Of course, that the whole state of the application will be lost. And this is something I didn’t want to happen.

I save the application state using the Web Storage localStorage feature. This feature is supported by all modern browsers and it offers a simple API to store key/value pairs (think of a hash map or associative array in PHP). The only catch is that the value is saved as a string. The application state is saved in the form of an array of objects where each object maps one of the plates: it holds the top and left position, the total, and the items. These information are enough for restoring the application state. The relevant code is in the scripts/home.jsfile. Here is the code for saving and reading:

//
function persistApplicationState(arr) {
    var i, l, toSave, el;
    toSave = [];
    for (i = 0, l = arr.length; i 0 && localStorage) {
       localStorage.setItem('plates', JSON.stringify(toSave));
   }
}

function getPersistedPlates() {
    var ret;
    if (!localStorage)
       return false;
    ret = JSON.parse(localStorage.getItem('plates'));
    if (!ret || ret.length === 0)
       return false;
    return ret;
}

Note that I am using JSON.stringify() and JSON.parse(). This is related to the fact that Web Storage saves only strings. In terms of size, most browsers offer by default 5MB (FireFox warns the users and asks for permission).

Reduce Loading Time – Application Cache

You might think of Application Cache like browser caching on steroids. By using Application Cache you can dramatically improve the loading speed of your application and the app can be used while users are offline.

This feature is pretty simple to use: you create a manifest file (which is simple text file with appcache extension and the first line must have this text CACHE MANIFEST). In this file you add entries for all the things you want to cache – could be CSS files, JS files, images, HTML. Then you enable the Application cache by setting the manifest attribute on the <html> tag:

<html manifest="app.appcache">

Now, every time you want to invalidate the cache and make the browser to reload the resources you change something in the application cache file. Most people add a commented line with a timestamp and version number and they just change this. Here is my cache file:

CACHE MANIFEST
# 2012-02-21:v9.5

CACHE:
index.html
styles/styles.css
styles/jquery.mobile-1.0.1.min.css
scripts/jquery-1.6.4.min.js
scripts/jquery.mobile-1.0.1.min.js
scripts/utils.js
scripts/home.js
scripts/calculator.js
assets/images/plate-big.png
assets/images/table_01.jpg
assets/images/bill.jpg
assets/images/trash.png
assets/favicon.ico
styles/images/ajax-loader.png
styles/images/icons-18-black.png
styles/images/icons-18-white.png
styles/images/icons-36-black.png
styles/images/icons-36-white.png

Once the application was loaded for the first time, you will notice that the second time loads extremely fast. This is happening because all the resources used in the app are cached locally. And remember that each time you change something in your application you have to invalidate the cache.

iOS Offline Web Application

iOS lets you save a web site/application to the home screen. This is the closest you ca get to a native app with HTML without using something like PhoneGap. Also this feature plays nicely with Application Cache.

You have control over a number of things: icon to be used for your application, an image to be used during the loading time (startup image), and if you want to hide the Safari Mobile chrome or not. All these are set or controlled by using <meta> or <link> tags added to the <head> section of your webpage.

In the index.html you will find these tags:

<!-- Hiding the browser chrome -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Setting a startup image for the app -->
<link rel="apple-touch-startup-image" href="assets/images/table_01.jpg">
<!-- Providing Icons for iOS and iPAd -->
<link rel="apple-touch-icon" href="apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" />

Here are screenshots with the app saved to the home screen and running without the browser chrome.

You can read more about this topic here.

Preparing the app for mobile browsers

By default on most mobile platforms you can scroll the page in the browsers few pixels up and down even when the page content fits to the screen. Man I so much hated this feature. Why? Because the main paradigm for using the first screen is by touch and dragging. Now every time you tried to move up or down a plate, the whole page was moving in the same direction. It was disturbing and annoying at the same time. In order to fix this I added a listener on the body for the touchmove event to prevent the default behavior:

// fix for canceling the scrolling of the body on mobile devices
 document.body.addEventListener('touchmove', function(event) {
           event.preventDefault();
      }, false);

The second thing I had to do was to set the layout viewport width to the device width and make sure scaling is disable – I didn’t feel that the user could benefit in any way by zooming in or out the app. So I placed the following meta tag in the head section:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">

This is a good read on understanding the mobile layouts viewports and screen sizes and the difference between screen resolution and CSS pixels.

Handling different screen sizes/devices – Media Queries

The Media Queries feature was quite handy especially for getting the second screen of the application right. Because on that screen there is a keyboard I had to make sure that the keyboard size is big enough to be usable on the phones and, at the same time it stays within the screen width.

Due to how layout viewport works on mobiles and jQuery Mobile styles buttons, the code that was working perfectly on desktop even when minimizing the browser window was entirely unusable on iPhone or Android phones. The keyboard (on the second screen) didn’t fit so almost half of it was invisible. By setting up two additional sections for devices with maximum width 720px (Samsung Nexus) and 640px (most Android phones and iPhone/iPod Touches) I managed to fix the problems.

//styles/styles.css

@media only screen and (max-device-width: 720px) {

...

}

@media only screen and (max-device-width: 640px) {

...

}

Debugging the code

Nothing new here. For desktop I used Web Inspector and for mobile weinre. In case you have never used weinre then you read my post on this topic here. I was so happy for having weinrebecause it helped me to understand and fix the issues I had with the layout on the calculator screen.

Google released this month a special build of Chrome for Android that enables remote debugging. Basically you get the web inspector on your desktop hooked up to the app running on your mobile device. Unfortunately, the application is not available in all the countries. I don’t exactly understand why and I don’t know when it will be available world wide.

The Code

You can download the source code from GitHub or you can play with the application. I testet it on desktop (FireFox, Chrome, and Safari) and on Android Phones/iPad/iPhone4.

Conclusions

As I said at the beginning, I had lots of fun while building this. The fact that I was able to test some of the frameworks and HTML features I’ve been playing with in a real app was a bonus.

In terms of development effort, I spent most of the time on making the application look the same (or as close as possible) on different browsers/devices. I used Chrome during my development. And once everything was in place I was so sure that I’m done. Poor me, because I kid you not the app looked differently in FireFox, Safari, and Chrome – I mean each browser rendered something different than the other two :D

In terms of performances and quality there is a big difference between how the app performs on desktop and how it works on mobile. On mobile there are some screen flickering, the transitions are not always smooth, and the UI is not always perfectly aligned. You might argue that it is jQuery Mobile fault or my fault. My opinion is this: it is what it is. I mean mobile browsers have came a long way in recent years but there is still a gap between desktop and mobile. This is what is possible today. Tomorrow it will be better, no doubts.

Now, that I have the V.1 I am ready to experiment with different approaches. First on my list is to use PhoneGap to package my web application as a native application. This will give me a chance to add another feature from the original app: taking a photo with the device camera and replace the picture from the first screen. Second, I will try other frameworks than jQuery Mobile.

• http://www.adobe.com/devnet/flashplatform/whitepapers/roadmap.html

Or download a PDF version to read later.

Here is an excerpt, be sure to read the entire white paper for a clear outline of the future of Flash runtimes.   The future is going to be awesome.

Summary

For the past decade, Flash Player and, more recently, Adobe AIR have played a vital role on the web by providing consistent platforms for deploying rich, expressive content across browsers, desktops, and devices. Beginning as a platform for enabling animation, the Flash runtimes have evolved into a complete multimedia platform, enabling experiences that were otherwise not possible or feasible on the web.

Looking forward, Adobe believes that Flash is particularly suited for addressing the gaming and premium video markets, and will focus its development efforts in those areas. At the same time, Adobe will make architectural and language changes to the runtimes in order to ensure that the Flash runtimes are well placed to enable the richest experiences on the web and across mobile devices for another decade.

Flash Player 11.2 introduces new mouse features designed for game developers in mind, but many other developers can find them useful as well.

Demo

Try this technical demo using the new features, you need Flash Player 11.2 installed (download here).

http://flashrealtime.com/demos/newmousefeatures/

* Double click for fullscreen to enable mouseLock. Try also right click, middle click, click and mouse wheel.

The demo source code is available here: http://flashrealtime.com/demos/newmousefeatures/NewMouseFeatures.as

Mouse Lock

Locks the mouse in the center of the screen, gives you a relative position of the mouse (movementX, movementY), FULLSCREEN mode only. Mouse Lock is very powerful feature especially in first-person-shooter or third-person-shooter games as it allows you to move freely without reaching the screen boundaries.

New API:
- stage.mouseLock
- mouseEvent.movementX
- mouseEvent.movementY

private function startMouseLock():void{
	// go fullscreen
	stage.displayState = StageDisplayState.FULL_SCREEN;
 
	// activate mouseLock
	stage.mouseLock = true;
 
	// register event listener
	stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
 
}
 
protected function onMouseMove(event:MouseEvent):void
{
	if(stage.displayState == StageDisplayState.FULL_SCREEN){
		// movementX and movementY contain mouseLock delta positions
		trace("movementX: "+event.movementX + " - movementY: " + event.movementY);
	}
}

Right Click

Right click allows you to display your own context menu or in terms of first-person-shooter use another weapon or action, like throw a flare. The nice side-effect is that by registering right click on stage, you can get rid of the default “About Flash Player” context menu.

The usage is simple, like with standard CLICK:

// register right click listener
stage.addEventListener(MouseEvent.RIGHT_CLICK, onRightClickNow);
// ...
// the event listener itself
protected function onRightClickNow(event:MouseEvent):void
{
	trace("right click");
}

Middle Click

Same approach as Right Click, just register MouseEvent.MIDDLE_CLICK event.

stage.addEventListener(MouseEvent.MIDDLE_CLICK, onMiddleClick);

Setting up the Flash Builder

To access the new features you need to link new playerglobal.swc (download here) in you Flash Builder project. See screenshot:

You also need to set -swf-version=15 in ActionScript compiler settings. See screenshot:

It has been roughly two months since I left Adobe and I could not be happier with every aspect of my life. People ask me all the time what I’m going to do next and for the most part I say I still don’t know exactly, and then in a more serious note, I say that things are becoming more clear every day. I am going through this great exploratory phase where I embrace every opportunity that comes my way. I’m learning a great deal of new things and meeting great, supportive people along the way.

From everything I’m doing and Blogging about, there are certain topics that I’m clearly more passionate about. One of those topics is this mobile thing we are witnessing.

There’s no denying that we are in the midst of a mobile revolution that requires new ways of thinking about developing content and about meeting the ever-growing expectations we have as mobile users. This revolution needs new leaders and innovators, as well as new tools (or at least highly customized versions of existing ones). Mobile in general also requires new user experiences that in my opinion are very different from their desktop counterparts.

This mobile revolution is drastically changing everything we do today, from the way we shop and find the best deals; to how we consume the news and the way we communicate with people around the world. And yes, mobile is also changing the way we are thinking about Learning and developing the next generation of courses, most of us are calling this mobile learning or mLearning.

Just today a new statistic came out stating that less that 10% of the web today is mobile-ready and I would imagine that number drops dramatically when it comes to learning content being mobile-ready.

I don’t know about you, but I want to be an integral part of this revolution as it happens, and so today, I would like to share some new things I am doing as I ‘Blog the Mobile Learning Revolution’ in real time.

1) I’m officially changing the title of this Blog from Trends in eLearning and mLearning to The Mobile Learning Revolution Blog. It’s a subtle change but an important one nevertheless. The more I blog about different things, the more I realize that every time I talk about mobile, be it through statistics or Trends to watch, or educational apps I try, or even Interviews I do, I always get passionate about the topic. Furthermore, if I analyze what most of my Readers respond to and ReTweet the most, data shows that it’s these mobile topics that are at the top, so I think this new focus will resonate well with you, too.

2) I’m also launching a new Facebook page for my blog HERE. Over the weekend, I read this great article entitled 10 Social Media Tips for Bloggers and tip #2, specifically got me excited about launching a Facebook page for my Blog. I’ve been thinking about how to best use Facebook and then I read this article and thought what a great idea. My plan isn’t however to just broadcast my blog posts on Facebook, but rather to use the threaded conversations feature, to share and test thoughts and ideas that are trending for me. This is something I do on Twitter and when I see that something picks up steam because it’s compelling, I then head over to my blog for a more thorough post. What can you do now? You can navigate to this page and ‘Like’ it and let’s start collaborating on different ideas around mobile learning.

3) Finally, I’m also launching a new Blog, specifically for sharing my experience as an Evangelist. One thing I have learned as I slowly write my eBook on what I learned at Adobe and why companies need passionate Evangelists in the new Social Web, is that the best way to stay on track and motivated about writing a book is through a dedicated Blog. Having said that, I started a new Blog here: http://www.techevangelistblog.com/ At the time of this writing, I’m still working on the first post, but if you are interested in what I have to say about being an Evangelist, Social Media and Blogging, you can subscribe now.

So there you have it, from now on when someone asks me what I am doing, I will answer with “I’m Blogging the Mobile Learning Revolution as it happens.”

I hope you join me.

One of the caveats with Windows Phone development is that it has to be done from Windows, just like iOS development has to be done from OS X (normally, although some cross platform technologies enable development via other OS/platforms).

Of course, I did not want to give up OS X, so here’s how I have my environment setup…  I have a virtual machine running Windows 7, in which I can run the Visual Studio development tools.   I am able to deploy to a physical Windows Phone device using the USB connection.

Windows Phone Development with PhoneGap, on OS X

However, with this configuration you will NOT be able to use the Window Phone emulator, which is a part of the Windows Phone development SDK.   The Windows Phone emulator is not supported inside of a VMWare virtual machine because the emulated operating system environment does not meet the minimum requirements (specifically the graphics drivers are not WDDM 1.1 compliant).   If you try to use the phone emulator inside the virtual machine, you will just get a blank screen.   I spent a few hours trying to find a workaround, to no avail.   You can use the Windows Phone emulator if you boot your Mac into Windows using Bootcamp, but I wanted to keep OS X as my primary operating system.

Being able to deploy directly to a device works for me, and is (in my opinion) better than being able to deploy to an emulator, thus I am happy with this workflow.   I have heard that other people have had trouble deploying to Windows Phone devices through a VMWare emulator, so here are the details on how I have my environment setup and a few “getting started” links for PhoneGap development on Windows Phone:

Note: All of the project setup work will be done through the Windows virtual machine instance.

There is a detailed “Getting Started” guide for PhoneGap and Windows Phone available at http://phonegap.com/start#wp.  This will provide you with all the information that you need to get started with PhoneGap applications for Windows Phone.

As a part of the setup process, you will need to download and install the Windows Phone SDK from http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27570.   This will include a copy of Visual Studio Express 2010 for Windows Phone, as well as additional tools for Windows Phone development.

To be able to deploy an application to a physical Windows Phone device, you will need to register as a Windows Phone developer on MSDN App Hub at http://create.msdn.com/en-US/home/membership.   This is a very similar model to Apple’s iOS developer program.  There is a $99 annual fee, and once you are registered, you will be able to debug on devices and distribute applications via the Windows Phone Marketplace.   However, debug provisioning is much easier.   Instead of signing each application with a debug certificate, you just have to register your device as a development device.   Once the device is registered, you will be able to deploy to it without any other special steps; this is very similar to the provisioning model for Nook devices.

When linking my AppHub account to my Windows Live account (a required step), I ran into a vague error message “There’s a temporary problem with the service.  Please try again.  If you continue to get this error message, try again later.”   After scouring the web for this error message, I found a few threads that mentioned this error is likely the result of an incomplete profile for your Windows Live account. Sure enough, I went into live.com and filled out my profile (including contact information), and this error went away.

My Setup

Below are the specifics for my setup; I did not have any issues connecting a Windows Phone device with this configuration.

• MacBook Pro
• VMWare Fusion 4
• Windows 7 Enterprise (Virtual Machine)
• Visual Studio Express 2010 for Windows Phone (part of Win Phone SDK)
• Nokia Lumia 710

Device Registration

To deploy an application to a Windows Phone device, you just have to use the Windows Phone Developer Registration Tool, and walk through a few simple steps to associate your phone with your developer account.  This tool is installed when you install the Windows Phone SDK.   You can read full details about debugging Windows Phone applications on MSDN.

As I mentioned above, I have heard that others have encountered problems when trying to deploy applications to Windows Phone devices via a virtual machine on OSX, but I have not had any problems with this configuration.

The source can be downloaded here.

If you are looking for the compiled ANE instead, click here

The contents of the zip archive are,

• Android Native Project
• Actionscript Library Project
• Files required for compilation

The Library is responsible for creating a bridge between Actionscript and Native code. The code written here is also the entry point for APIs exposed by the ANE. Library and Native Projects are fairly descriptive and appropriately commented. I will just go through things that need to be in place to get this compiled.

If you just want to go ahead and try compilation, skip to the 5th step

• Import project listed under Android Native Project into a preferred IDE and export a JAR
• Import project listed under Actionscript Library Project into Flash Builder and export a SWC
• Notice the organization of files in the Files required for compilation directory. Replace JAR, SWC and extension.xml files in the appropriate directories with the one’s you just exported
• Without disturbing what you have already done, rename SpeechLibrary.swc to SpeechLibrary.zip and extract the library.swf file. Replace the one in Files required for compilation/NativeAndroid, with this.
• Open Files required for compilation/compile.bat in your favorite text editor. Going forward, I will be referring only to the Windows platform. For MAC, please read this document
• Customize attributes for 'root_directory' and 'signing_options' (Namely, CERTIFICATE_PATH - a P12 file and CERTIFICATE_PASSWORD)
• Exit editor, and run the compile.bat file to generate an ANE file !

That is as easy as it gets to generate an ANE file !

Feel free to make changes to the source and experiment. If you do extend the source, say make it iOS compatible, I'd be happy to link up here!

Here is another great resource you must have a look at before building native extensions, http://www.adobe.com/devnet/air/articles/developing-native-extensions-air.html

I wanted to make sure that people were aware that you can repurpose your content, and here’s an example of how.

A while back, I wrote a sample PhoneGap application that allows you to browse information from the 2010 US Census.  You can read more about this application and download the source code here. This application supports lots of platforms… iOS, Android, BlackBerry, and web (everything except IE because I was targetting WebKit browsers).

While this application is a mobile app wrapped in the PhoneGap container, I actually didn’t use any PhoneGap-specific libraries, so it was very easy to repurpose as a desktop application.   I created an AIR version of this application, which you can download at:

• tricedesigns.com/census/USCensusBrowser.air

US Census Browser in OSX

You can build complete AIR applications using HTML and JavaScript, even with full access to AIR APIs (network, file access, etc.).   You can read more about building AIR apps with HTML and JavaScript at: http://help.adobe.com/en_US/air/build/WS5b3ccc516d4fbf351e63e3d118666ade46-7ecc.html

I had to use my Android 2.x branch of the US Census Browser code because the WebKit instance inside of AIR doesn’t support SVG.  I also changed the container scrolling to use normal CSS “overflow: auto” instead of using iScroll for touch-based scrolling. There were a few other one-off CSS changes to tweak the layout in the AIR web container, but otherwise the code is identical.

You just need to create an AIR application XML file and point it to your HTML content, and then package it using ADT.

Here’s my AIR application XML:

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/3.1">
    <id>com.tricedesigns.USCensusBrowser</id>
    <versionNumber>1.0</versionNumber>
    <filename>USCensusBrowser</filename>
    <name>US Census Browser</name>
    <initialWindow>
        <content>www/index.html</content>
        <visible>true</visible>
        <width>1024</width>
        <height>768</height>
        <minSize>800 600</minSize>
    </initialWindow>
    <icon>
		<image16x16>icons/icon16.png</image16x16>
		<image32x32>icons/icon32.png</image32x32>
		<image48x48>icons/icon48.png</image48x48>
		<image128x128>icons/icon128.png</image128x128>
	</icon>
</application>

Notice that the “content” node just points to my “index.html” file.

Here’s the command to package it:

adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air HelloWorld-app.xml *

You can read more about this process in the Adobe AIR documentation.

If you were using PhoneGap APIs, you would have to migrate your code to take advantage of AIR APIs, but all other HTML/CSS/JS could be reused with minimal changes.

Even though I used AIR for this example, AIR isn’t the only game in town for HTML-based desktop applications…   There’s an open source project called MacGap, you can use HTA for Windows, and it’s not hard to write a HTML/Web View wrapper for any platform. It’s even been reported that you are going to be able to write apps for Windows 8 purely using HTML & JS, and you would be able to repurpose your code for this as well.

You can check out the AIR version of the US Census Browser at:

• tricedesigns.com/census/USCensusBrowser.air

Enjoy!

Sometimes you want to transfer custom objects instead of predefined ones (or basic types). This is very useful, for example, when you want to construct for instance an array of positions. Position is in this case defined by an object with x, y, z properties.

Let’s initiate an Array instance. I wrote a tutorial about that here HOWTO: Transfer Array and Vector from AS3 to C with AIR Native Extensions for iOS:

uint32_t arr_len = 10; // count of positions
FREObject objectsPosition = NULL;
FRENewObject((const uint8_t*)"Array", 0, NULL, &objectsPosition, NULL);
FRESetArrayLength(objectsPosition, arr_len);

Next we will define a custom Object, basically the same way as we did with the Array

// loop through array length and fill it with data
for(uint32_t i=0;i<arr_len;i++){
 
FREObject position;
// create an instance of Object and save it to FREObject position
FRENewObject((const uint8*)"Object", 0, NULL, &position,NULL);
 
// populate temporary vars x, y, z
FREObject xPos;
FREObject yPos;
FREObject zPos;
FRENewObjectFromInt32(10, &xPos);
FRENewObjectFromInt32(20, &yPos);
FRENewObjectFromDouble(30, &zPos);
 
// fill properties of FREObject position
FRESetObjectProperty(position, (const uint8*)"x", zPos, NULL);
FRESetObjectProperty(position, (const uint8*)"y", yPos, NULL);
FRESetObjectProperty(position, (const uint8*)"z", zPos, NULL);
 
// add position to the array
FRESetArrayElementAt(objectsPosition, i, position);
}

Done. Have fun.

Keeping the project source code in synch can be achieved using manual copy/paste between projects, but this is messy and error prone. The synchronization can also be scripted using ANT or other scripting language, but this requires an additional script and/or step in your build process. Although scripting is a reliable process, sometimes you just don’t need the script.

If you don’t want to manually synch things, and you don’t want a script, you can use a symlink to link directory paths. Basically, create a “src” folder outside of each project, and create a symlink reference to the src folder inside of the “www” folder for each project.   Symlinks allow a logical directory mapping, which actually points to another location on the hard disk.

From the command line, you just use the following command:

ln -s source target

To setup your project, first create your directory structure.  I created a parent folder for the project. Inside of that folder, I created a “project-ios” folder, “project-android” folder, and “src” folder.   The “src” folder will contain the shared HTML/JavaScript for the application.   The “project-ios” folder will contain the Xcode project, and the “project-android” folder will contain the Eclipse project.

Project Structure

Next, create the actual iOS and Android projects inside of these folders, following the normal setup instructions:

• iOS:   http://phonegap.com/start#ios-x4
• Android:   http://phonegap.com/start#android

Once you have set up both projects, you’ll need to configure the symlinks.   Put a copy of the “index.html” file into your “src” directory.  Next, go to the “www” directory for each project and delete the “index.html” file to remove any ambiguity or chance for error.

However, DO NOT DELETE THE PHONEGAP.js files!

The phonegap.1.4.1.js files are platform specific.  The Android version will not work with iOS, and the iOS version will not work with Android.

Next, navigate to your root folder that contains the “src”, “project-iOS”, and “project-Android” folders. Here you will create the actual symlink references.   When doing so, be sure to use the full path to the source and target destinations.  You will need to create a symlink reference from the “src” directory to “project-ios/www/src”, and a symlink reference from the “src” directory to “project-android/assets/www/src”.

If you try to use a relative path from your current location, it will give you errors and a massive headache.     You can use “pwd” to get a reference to the full path of your current directory.

Here are the commands that I used on my system, where the root directory is “/Users/triceam/Documents/dev/phonegap-sharedsource”:

ln -s /Users/triceam/Documents/dev/phonegap-sharedsource/src/ /Users/triceam/Documents/dev/phonegap-sharedsource/project-ios/www/src
ln -s /Users/triceam/Documents/dev/phonegap-sharedsource/src/ /Users/triceam/Documents/dev/phonegap-sharedsource/project-android/assets/www/src

You can see this in my console in the image below:

Create Symlinks

This will create logical links to the root “src” folder, which can be treated like any other directory structure.

Symlink References

In both Eclipse and Xcode, this will show up as a normal folder.  Any edits in one IDE will show up in the other IDE since they are pointing to the same physical directory on the hard disk.

Content in Eclipse & Xcode

Next, you’ll need to update the PhoneGap projects to point to the shared index.html file.

In the Eclipse project, open your main Android activity and change the call to super.loadUrl to refer to the index.html file inside of the linked “src” directory in the onCreate method.

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.loadUrl("file:///android_asset/www/src/index.html");
}

In the iOS project, open AppDelegate.m. You’ll also need to update it to reference the index.html file inside of “src”. You’ll just need to edit the start page to “src/index.html” inside of the function: (BOOL) application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions

self.viewController.wwwFolderName = @"www";
self.viewController.startPage = @"src/index.html";

Also, be sure to update the link inside of “src/index.html” to point to the project-specific PhoneGap JavaScript files in the parent directory “../phonegap-1.4.1.js”
(they are not inside of the linked folder):

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

• Adobe’s view of Flex and its commitments to Flex in the future

Or, download and read the pdf version.

Here’s an excerpt:

Summary

Adobe believes that Flex is the best solution for enterprise and data-centric application development today and is moving Flex into a community-driven open source project to ensure the continued development and success of Flex for years to come. We are currently in the process of contributing the core Flex SDK, automation libraries, AIR SDK binaries, and documentation to the Apache Flex Project. We will also be contributing Falcon, Falcon JS, Mustella, and BlazeDS.

In addition to these contributions, Adobe is providing a team of full-time Flex SDK engineers who will contribute to and support the Apache Flex Project. These Adobe engineers will work directly with the highly skilled Flex developer community to maintain, support, and evolve the Flex SDK. We remain committed to enabling the success of all existing and new Flex projects.

I wanted to use this concept to show off the Audio capabilities in HTML5. Basically I want to:

• Play the Inception Score
• Play the Edith Piaf song
• Play the Edit Piaf song slowed down
• Play the Inception score over the slowed down Edith Piaf song.

But the vanilla tag didn't work for me. The tag does have the ability to be slowed down, but it seems that in Chrome and Safari, I could not get the rate below 50% of the original. On Chrome the sound stopped playing if the rate was below 50%, and on Safari the sound just never got slower even though the rate was below 50%.

I figured I would give the Web Audio API a try and see what it could do. So I wrote a function that could play back a sound at a given rate:

That worked. All I had to do was set up some HTML to display it, some CSS to make it look less plain, and some buttons to make it work.

There's a working demo here:

Audio API Demo

Oh before you click on that link - It only works on Chrome. And sometimes it has the tendency to stop working all together. The fix is to empty your browser cache, and restart Chrome. But hey, still a cool proof of concept.

If you build web pages that are interactive and work on desktops and mobile devices then chances are that you need to work with touch and click events. For mobile devices you’d want to use events like touchstart, touchmove, and touchend and for desktops you’d use mouse events (mousedown, mousemove, and mouseup).

Most of the time the code you execute as a response to these events is the same between these two platforms. So one way to avoid duplicating your code is to take advantage of the JavaScript’s dynamic nature to inject additional data into the event object and chain the click and touch event listeners.

Here is a snippet of code that illustrates my point:

function init() {
    var el = document.getElementById('myDiv');
    el.addEventListener('mousemove', onMouseMove);
    el.addEventListener('touchmove', onTouchMove);
}

function onMouseMove(e) {
    e.touches = [{clientX: e.clientX, clientY: e.clientY}];
    onTouchMove(e);
}

function onTouchMove(e) {
    //do something with e.touches[0].clientX or e.touches[0].clientY

}

The code should be pretty simple to follow:

• I register listeners for mousemove and touchmove
• If the code runs on a desktop then the mousemove listeners will be triggered. When this happens I inject the mouse X and Y position in the event object using the data structure used by touch events (touch events have a touches property, which is an array of objects that follow this pattern: {clientX: value, clientY: value}). The touches property is an array because you can expect more than one touch point on some devices. Then I call the onTouchMove function passing along the modified event object
• The logic I want to execute for that specific action is declared in a single place, the onTouchMove function

I put together a simple page so you can see the code and test it on you computer/devices: demo here.

What method do you use to deal with this?

I just thought I will share some of my findings around drag and drop support in WebKit, HTML5 and PhoneGap apps running on iOS and Android devices.

To make the story short drag and drop is NOT support out of the box in the current versions of WebKit that run on iOS or Android devices although you can simulate it using mousedown, mousemove and mouseup events.

When I clean the code a bit you can expect and update to this post

This time in the video below you will find a quick review of PhpStorm/WebStorm IDEs. As I mention in my recording this is one of those tools that I will stick with at least for now

It has really great debugging support (IMHO Firebug or WebInspector can’t even compete). Also because it is built on top of IntelliJ IDEA platform it has great code completion, rich set of refactoring features, and many others. Check out the video for more.

For what I was working on, this meant trying out the Web Audio API.  I stole some code that allowed for playback, got it working, then tried to manipulate the playbackRate for the clip. But no joy, no Chipmunks singing for me.

I looked up a couple of things, and many of them pointed at this statement from the HTML5Rocks Web Audio API FAQ:

Q: HOW CAN I CHANGE THE PITCH OF A SOUND USING THE WEB AUDIO API?
A: Change the playbackRate on the source node.

I tried and I tried for an hour to get this to work using this syntax:

source.playbackRate = 2.0;

Turns out you have to set it as:

source.playbackRate.value = 2.0;

Hopefully, this spares you some time.

In case you don’t feel like reading the whole thing, here are quicklinks to each question:

• What is PhoneGap?
• How does a PhoneGap application typically look?
• How do I get started in PhoneGap?
• How do you debug PhoneGap applications?
• How do you architect PhoneGap applications?
• How do you get phonegap apps on devices and into application ecosystems?
• What is the difference between PhoneGap and Adobe AIR?

What is PhoneGap?

PhoneGap is an application framework that enables you to build natively installed applications using HTML and JavaScript.  The easiest way to think of PhoneGap is a web view container that is 100% width and 100% height, with a JavaScript programming interface that allows you to access underlying operating system features.  You build your user interface using traditional web development skills (HTML, CSS, & JavaScript), and use the PhoneGap container to deploy to different application ecosystems and devices.  When packaged for deployment, the PhoneGap application is a binary distributable file that can be distributed by the “normal” application marketplaces (iTunes, Google App Market, Amazon Market, etc…).

PhoneGap is 100% open source, and also goes by the Apache name “Cordova”.  You can read more about Apache Cordova project status at: http://incubator.apache.org/projects/callback.html

PhoneGap can be used to build applications that target multiple platforms, including Apple iOS, Google Android, Windows Phone, BlackBerry, HP WebOS, Symbian, and Bada.

You can read more about the supported platforms and their supported features at http://phonegap.com/about/features

How does a PhoneGap application typically look?

Since the UI rendering engine is the mobile device’s web browser, PhoneGap applications can literally look like anything.   You can use standard HTML & CSS to make it look like a normal web page, you can use a UI framework like jQuery UI, Kendo UI, Sencha, Twitter Bootstrap, or Skeleton (or any other HTML/CSS/JS user interface framework). You can also use CSS styles/themes to make your web content look like native apps, such as iUI to mimic iOS or Android, or bbUI  to mimic BlackBerry.

PhoneGap applications can have static UIs based on normal HTML, or can have dynamic & interactive experiences developed using JavaScript.   It depends upon the specific application, user experience design, target audience, and use cases to dictate how a PhoneGap application will appear.

PhoneGap applications can use pinch/zoom gestures to zoom in & out, or you can lock the viewport scale using the viewport metadata tag.   You can have the page scroll using normal browser behaviors, or you can use a library like iScroll to enable touch-based scrolling of specific container elements.

There really are lots of ways to create a user interface with HTML, CSS & JavaScript, so there really isn’t any “typical” look.   If you do not apply any CSS styles at all, then all user interface elements will use the operating system/browser default for that specific platform.   This includes buttons, links, and color/highlight states.   This behaves in the exact same manner as the operating system’s default web browser.

How do I get started in PhoneGap?

Getting started in PhoneGap is easy.   For 90% of a PhoneGap application, all you need is a text editor.  PhoneGap also integrates with device-specific development environments very easily.   You can view “getting started” guides for all application platforms at the links below:

• iOS: http://phonegap.com/start#ios-x4
• Android: http://phonegap.com/start#android
• BlackBerry: http://phonegap.com/start#blackberry
• Windows Phone: http://phonegap.com/start#wp
• WebOS: http://phonegap.com/start#webos
• Symbian: http://phonegap.com/start#symbian

When developing PhoneGap applications, just keep in mind that you are running code inside of a web browser instance.   You develop your applications using HTML and JavaScript, not native code, so you don’t need anything special.   In fact, I personally do most of my development on the desktop using an HTML editor and the Chrome browser.  When I need device-specific functionality, or I need to test on a device, then I switch over the the device-specific environments.

How do you debug PhoneGap applications?

Debugging PhoneGap applications can sometimes be the trickiest part of development.   If you are testing on a physical device, you can’t always get access to JavaScript exceptions when they happen.   There are a few strategies for debugging PhoneGap applications.

Develop as much as possible on the desktop browser

Since PhoneGap applications are written with HTML, CSS, and JavaScript, you can develop most of them using any HTML editor and debug them within a desktop web browser.  The latest versions of all major web browsers (including Chrome, IE, Firefox, Opera and Safari) provide rich debugging features. In the developer tools for the browsers, you can inspect HTML DOM elements, inspect CSS styles, set breakpoints in JavaScript, and introspect into memory & JavaScript variables.   You can learn more about the desktop browser development tools at:

• Chrome Developer Tools: http://code.google.com/chrome/devtools/docs/overview.html
• Firefox via FireBug: http://getfirebug.com/
• Safari Developer Tools: https://developer.apple.com/technologies/safari/developer-tools.html
• IE Developer Tools: http://msdn.microsoft.com/en-us/ie/aa740478
• Opera Developer Tools: http://dev.opera.com/articles/view/opera-developer-tools/

Once you build the main aspects of your application using desktop tools, you can switch over to a device-specific environment to add device-specific behavior and integrate with PhoneGap APIs.

It is imperative that you test your applications on actual devices!   Actual devices will have different runtime performance than desktop browsers and simulators, and may unearth different bugs/issues including API differences and different UX scenarios.

Debug With debug.phonegap.com

Remote Web Inspector Through iOS 5

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Uncomment to enable remote debugging
    [NSClassFromString(@"WebView") _enableRemoteInspector];
    ...
}

More Debugging Info

How do you architect PhoneGap applications?

You generally architect PhoneGap applications the same way that you create mobile web experiences. The difference is that the initial HTML assets are available locally, instead of on a remote server.   The PhoneGap application loads the initial HTML, which can then request resources from a server, or from the local environment.   Since PhoneGap is based in a browser, it behaves exactly as you would expect a web browser to behave.  You can load multiple pages; however, keep in mind that once you load/unload a page you may lose any data that is stored in memory via JavaScript.   PhoneGap also supports the single-page web experience model. I strongly suggest using the single-page architecture approach.

Single-Page Architecture

A single-page architecture refers to the practice of having a single HTML page that dynamically updates based upon data and/or user input.  You can think of this as closer to a true client/server architecture where there is a client application (written with HTML & JS) and a separate server structure for serving data.  All client-side application logic resides in JavaScript.  The client application may request data and update its views without reloading the current web page.

Using a Single-Page architecture allows you to maintain data in-memory, in JavaScript, which allows you to have a stateful, yet dynamic user interface.   You can read more about single-page architectures at: http://en.wikipedia.org/wiki/Single-page_application

PhoneGap applications can be architected with any of the common JS architectural frameworks, including Angular, Ember, Backbone, Mustache, etc…   Fellow Adobe evangelist Christophe Coenraets has some great content on these topics.

How do you get PhoneGap apps on devices and into application ecosystems?

PhoneGap applications can be deployed using the same guidelines for native applications for each given platform.   You must follow the rules of each hardware platform/vendor, and there is no way to get around that.     You can compile the executables for each platform yourself using each platform’s specific build process, or you can use build.phonegap.com to compile them for you.   build.phonegap.com is a hosted service that will compile platform-specific application distributable files for you.   In either case, the output of the build process is a platform-specific binary file: IPA for iOS, APK for Android, etc…   You can read more about distributing to various application ecosystems, and each system’s signing/certificate requirements at:

• iOS App Store: https://developer.apple.com/programs/ios/distribute.html
• Google Android Market: https://market.android.com/publish
• Amazon App Store: https://developer.amazon.com/welcome.html
• BlackBerry App World: https://bdsc.webapps.blackberry.com/devzone/appworld
• Barnes & Nobe Nook Store: https://nookdeveloper.barnesandnoble.com
• Windows Phone Marketplace: http://msdn.microsoft.com/en-us/library/ff941089(v=vs.92).aspx

What is the difference between PhoneGap and AIR?

The most fundamental differences between PhoneGap and AIR is that you develop AIR applications using tools rooted in the Flash Platform (Flex, Flash, ActionScript, MXML), and you develop PhoneGap applications using HTML, CSS, & JavaScript.   AIR applications use the AIR runtime, which allows you to have a single code base, with the exact same expected behavior across all supported platforms.   PhoneGap applications run inside of the native web browser component for each supported platform.  For this reason, a PhoneGap codebase may behave slightly different between separate platforms, and you will need to account for this during your development efforts.

Air applications can be built for iOS, Android, BlackBerry Playbook, and the desktop (mac and windows), with future support for Windows Metro (Windows 8 mobile interface). You can read more about AIR’s supported platforms at: http://www.adobe.com/products/air/tech-specs.html

PhoneGap applications can be built for iOS, Android, BlackBerry, Windows Phone 7, HP WebOS, Symbian, and Samsung Bada. You can read more about PhoneGap’s supported platforms at: http://phonegap.com/about/features

ActionScript has strongly-typed objects and supports classical inheritance programming models. AIR applications can also be built using the Flex framework, which allows you to rapidly build enterprise-class applications.   Components in AIR applications are logical objects that have behaviors, properties, and a graphics context.

JavaScript-based applications support prototypal inheritance, and have numerous open-source frameworks/tools that can be used.   HTML/JS applications are all visualized through HTML DOM elements.  HTML interfaces can be created through basic string concatenation or JavaScript templating, but in the end you are really just creating DOM elements that have properties and styles.

There are some fundamental difference in the syntax of building these applications, however the basic concepts of interactive design and interactive development are identical.   Both platforms have valid strengths, which I could write about ad nauseum… I’ll save that for another post.

Where to go next?

Go download PhoneGap and get started at: http://phonegap.com/ or check out what other people have been building in the PhoneGap showcase at: http://phonegap.com/apps

Over the weekend, I was looking at the entries submitted to the Adobe Captivate HTML5 Contest, hosted by my former Adobe colleagues. The basic idea behind this contest is that Adobe Captivate 5.5 users create a project and then use the HTML5 Converter for Adobe Captivate to convert it into HTML5. The entry with the most votes wins.

First, I’d like to say that I applaud the idea around this contest because it adds some much-needed engagement to the Captivate community, however I wonder if Adobe may be sending the wrong message to users who are interested in mobile, regarding what mobile learning (mLearning) is.

In other words, while I think HTML5 will play a big role in how we develop and deploy learning and how our learners will consume those learning experiences on mobile, I think mLearning should be a lot more than just ‘converting’ desktop eLearning to HTML5.

Mobile experiences are radically different from traditional desktop experiences and thus it’s important to approach the transition to mLearning thinking that our mLearners are used to and expect different things.

Mobile requires a different strategy, a different way of thinking about content, navigation and how to best utilize the device’s real estate and built-in mobile features like gps, camera, accelerometer, etc.

I think the onus is on eLearning Tools Vendors (i.e. Articulate, Adobe, Lectora, TechSmith, Zebra Apps, etc) to really think about this and make sure the next generation of their tools provides new and innovating ways of truly harnessing the power of mobile learning.

Luckily for all of us in eLearning, we won’t the first industry to make this transition to mobile and because many other industry have gone through, or are going through this same process, there’s a lot to learn from their experiences. I’ve been bookmarking and taking lots of notes recently on great examples I find of companies that are approaching this transition, and it’s my plan to share some lesson that I feel are important for us to emulate. Please stay tuned.

Until then, I leave you with a lively discussion I had on Twitter on this very subject and the replies I received from some of my followers who are also very excited about mobile learning. Let me know what you think about this by leaving a comment below:

Check this pretty app by Silicon Jelly from Prague.

Fill the full name and the birth date of you and your companion and hit the buttons.

Download:
iOS: http://itunes.apple.com/us/app/love-case/id500708508
Android: https://market.android.com/details?id=com.siliconjelly.lovebox

Trailer:

Lil’ Doodle is a great new iPad application for entertaining both you and your children! If you know how to use a children’s magnetic drawing toy, then you know how to use Lil’ Doodle. Pick a “pen” shape, and start doodling. Your imagination is your only limit. If you want to erase everything and start over, just use the slider at the bottom. Doodle and have fun!

Using the HTML5 Canvas inside of PhoneGap has great performance on iOS, and building the application using purely HTML, CSS, and JavaScript made it incredibly simple. After I wrote the core drawing engine for a previous blog post, I whipped up the UI in one evening, and then started user testing with my little beta tester.  She found some issues that I had overlooked, and a few days later I submitted it to the app store.

…and yes, she really does play with it:

The app is currently available for iPad devices on iTunes – I’m about to start researching/testing performance on other platforms, so maybe soon it will be out in other ecosystems… we’ll see.   You can get it now at:

tricedesigns.com/go?lildoodle

Enjoy!

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.

I am happy to announce that the second event of the Adobe WebUp series has been announced and you can register yourself here. In the meantime we’ve changed the name from “Adobe Developer Days – Web Platform” to “Adobe WebUP”.

The second event is dedicated to HTML5 forms: what HTML5 forms are, how to style them, and browsers support for them.

I hope you’ll join us on February 23rd. You have to register here if you want to participate.

AGENDA:

1. Android Tablet Development (Lance Nanek & Michael Ludden, HTC)

2. Debugging and Deploying with PhoneGap (Ryan Stewart, Adobe)

===============================

Android Tablet Development. HTCdev has created a PhoneGap plugin for their Scribe Pen enabled tablets, one of which they will be giving away to a lucky developer. Check out www.htcdev.com for details.

Two of their lead developer evangelists will be demonstrating how HTCdev can help apps gain visibility, and how to easily program apps that let you create using Pen-based input.

Presenters:

Michael Ludden (twitter.com/Michael_Ludden) is a Developer Evangelist at HTC. Tasked with developer enablement, Michael is focusing on how best to help developers differentiate without fragmenting on HTC devices – creating great, unique user experiences that widen appeal of apps and catch that all important user’s attention. He will be showing how developers can take advantages of HTC’s app promotional programs, support, co marketing and robust toolsets to maximize an app’s influence. He has a bachelor’s degree from UCLA and has been working in development and with developers for years.

Lance Nanek (http://nanek.name) is a Developer Evangelist at HTC. He has ten years of experience in information technology: implementing web metrics for ibm.com at IBM, writing Java web applications at State University of New York System Administration, and working on Android apps for many companies, including CardioTrainer by WorkSmart Labs with over three million downloads. He has a master’s degree in Computer Science from State University of New York University at Albany.

Debugging and Deploying with PhoneGap. In this session, Ryan Stewart, a web developer evangelist from Adobe, will cover how to debug and deploy PhoneGap applications. He will talk about how to use Winere to get some insight into how your PhoneGap application is behaving on the device and how to set up the application so that it can easily be debugged. He will also cover some of the deployment options, including a deep dive on the ways to use PhoneGap Build to deploy quickly across multiple devices and operating systems. You’ll learn about things to be aware of, and things you can do to streamline the process.