Problematic

I needed to look for the best technologies to use for a cross platform mobile application. I need to develop a simple application, linked with all Android/Iphone/Windows tools like the calendar, contacts, etc… and of course, the application must have a simple and integrated UI (as close as possible to the OS).

My first thought was to give NME a try for a non game application.

NME

NME is my favorite tool for a game or a big application (RIA) that needs good performances (when you compile, it produces C++ code and not Java or objective-C).

NME is not 100% integrated with all the OS. You can do it, but you have to code specific parts for each OS, and you have to know C++ and that’s not my case right now.

And finally, there is no simple UI framework that can be used with a cross platform mobile app (and for a commercial project, I’m not comfortable with using a young library like Cocktail or HaxeAsWing).

I’ve heard about PhoneGap, a simple tool that lets you code JavaScript and deploy it to all the most used mobile OS platforms. So why not give it a try?

What is PhoneGap ?

Developing with PhoneGap gives you the freedom to create mobile applications for iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian using the web code you know and love: HTML, CSS and Javascript.

How is PhoneGap working?

To deploy to a specific platform, you are going to need the SDK, and what’s best to compile and deploy (for Windows it’s Visual Studio, for the others you can just use the terminal with the SDK tools).

For each platform (I promise, that is the last time I’m saying that) you have to create a default project (look at the Getting Started Guide).

Now that you have the structure, we can start the JavaScript part.

Every JS (and html/css) files must be in the www directory.

Since I’m using Haxe, I need to generate all the externals for using code completion. Here is an example of what you have to do :

1
2
3
4
5
6
7
8
9

@:native("window.device")
extern class Device 
{
	//public static var name	(default, null) : String;
	public static var cordova	(default, null)	: String;
	public static var platform	(default, null)	: String;
	public static var uuid		(default, null)	: String;
	public static var version	(default, null)	: String;
}

Now in your JS project, if you want to display your uuid :

1

js.Lib.document.getElementById("uuid").innerHTML = Device.uuid;

And the HTML part :

1

<h4>UUID: <span id="uuid"> </span></h4>

PhoneGap allows you access to all the device functionalities. Look at the documentation for more details.

So now we have a basic project working, we have to search for an UI framework. And since we can use any JS framework … we have plenty of choices.

JavaScript UI framework

I personally have selected SenchaTouch for its community and its maturity.

Like PhoneGap, you have to generate externals. But since it’s a bigger library, we must automate that. So I’ve searched on the web to see if someone had already done that, and I found on Github externals that has been generated by Joshua Granick.

But there are some errors that prevent the compilation. After some research (and thanks to the Google Haxe Group) I found how to fix all the errors. There are two problems :

• args: must be changed to ?args: Array< Dynamic >
• The Array and the String class must be removed

Just to be sure I have the last SenchaTouch version, I’ve generated them by using (thanks again to Joshua) BuildHX. Since this tool is only working on Windows, I’ve updated the sources to use the Linux version of JSDuck.

Here is the package with all the externals classes for the last version of the SenchaTouch Framework (2.0.1.1).

You can now test the Getting Started Project. You can download here the Haxe portage (hosted on haxejs). There are some minor changes that need to be made for it to be working (It’s just some parameters that are missing).

Conclusion

From my point of view, PhoneGap is what’s better for me, mostly because of its HTML5 support. For the rest, I prefer the SenchaTouch approach and of course Haxe JS.