iOS development and PhoneGap

I have spent some time recently working on iOS projects, mainly revolving around displaying web content and doing some fancy stuff with HTML5 such as drawing and annotating on a video. I faced several problems, partly from trying to develop an app using HTML & Javascript and also from the limitations of iOS.

HTML5 ...a work in progress
Now take the HTML5 video element for example. Now I don't want to enter the already heated debate around video formats, I want to talk about the underlying video element. Firstly you would think it would be easy to detect if a video is playing though an attribute such as VideoElement.isPlaying however you would be mistaken, instead you have to:

Check if the Video has loaded
Check if the Video isn't paused
Check if the Video  isn't buffering
Check if the Video hasn't ended
Check if there hasn't been an error

Easy I know... and then there are subtitles, or lack of them, their support is rather hit an miss. I tried to use SAMI subtitles (although I know this is an obscure format, this is what I had to work with) regrettably the video element doesn't support them so I had to develop a way of rendering them myself. That didn't sound so bad to begin with, SAMI is just sugar coated XML, which the XmlDOM parser won't correctly load, horray!

In the end I had to create my own SAMI parser and use transparent DIVs infront of the video element to render the correct subtitles during the videos on time change event. All in a days work!

PhoneGap
To make things easier I have started to use PhoneGap, which includes a growing API accessible via Javascript and best of all, allows the programmer to write plugin modules in Objective-C which can communicate with the DOM. This is where I really started noticing the iOS Objective-C libraries are no where near as mature as .Net, I even began to miss importing System.

JavaScript WebEngine

Wouldn't it be cool if you could run Javascript applications like normal desktop applications, where each app has its own window and where Window Management and Composition is handled for you, and where events are passed easier and with better cross browser support. Well this is what I've been trying to achieve with my WebEngine project.

All that is needed is an xml file containing the location of the Javascript file, the initially executed function and a few other optional fields such as description. (There is an IconUrl tag as in the future applications will be launched from the cloud desktop)

Paint.js

Paint.png

Paint

load_init

Within the Javascript file for your app all you need to do if have the initially called function have the variable uID passed to it - this is the globally unique identifier for your application that the composition engine associates with the application.

function HelloWorld(uID) {

}

The first thing you need to go is get the HTML 5 canvas element thats been created as the graphics layer for your application, you can resize the canvas and it will resize the application window when the composition engine next renders.

function HelloWorld(uID) {

// Store the canvas and its 2d context

hw_canvas = wec_GetCanvas(uID);

// Resize the window

hw_canvas.width = 300;

hw_canvas.height = 120;

}

Hooking up events is as simple as passing the applications uID and the event handler function, all the backend hookup and cross browser work is done for you.

// Hook up some events

wec_HookMouseDown(uID, hw_MouseDown);

...

function hw_MouseDown() {

alert("The Mouse has been Pressed");

}

Event information can be retrieved by the following:

var evt = wec_GetLastEvent(uID);

The event contains properties of the time of the event, mouse position(relative to the window), keys pressed etc.

In the coming version there will be a common widget library so it will be even easier to quickly make powerful Javascript applications that run on the framework.