Minor PhoneGap Alert updates

Last night, and on my commute in to work this morning, I made some updates to my UIControls branch on Github, largely around adding callback and event support to the Alert notification code.

I’ve been working on providing more feedback into JavaScript from the commands run inside of Objective-C.  So far PhoneGap has been largely one-way, you push actions into PhoneGap and maybe you get some sort of response out in some general sort of way, but most of it has involved polling mechanisms.  Well the DOM and JavaScript in general has a native facility for dispatching ad-hoc events.  And it’s super easy to call from Objective-C, if only a little bit verbose:
[webView stringByEvaluatingJavaScriptFromString:
@”(function(){ “
“var e = document.createEvent(‘Events’); “
“e.initEvent(‘alertClosed’, ‘false’, ‘false’); “
“e.buttonIndex = %d; “
“document.dispatchEvent(e); “
“})()”,
buttonIndex
];
It looks a little complicated, but it really isn’t.  It’s calling some code in an anonymous function closure so this doesn’t leak any references or variables into the global scope, creates a DOM event, sets it with a custom event name, adds some arbitrary properties to it, and dispatches it against the document element.
This same pattern applies everywhere some event occurs, and something in the JavaScript side of the gap:// barrier might be interested in it.  Listening to this event is as simple as doing:
document.addEventListener(‘alertClosed’, function(e) {
debug.log(“Alert box with button ” + e.buttonIndex);
}, false);
Pretty simple, and super flexible.  If you’re interested in an event, you bind an event listener to it.  If you’re not, you simply ignore it.  I’m pretty excited about this design pattern since it reduces the complexity of having to loop and wait for something that might never happen.
Update: Oh, I almost forgot.  The main reason for doing all this is I added the capability to add a second button to the Alert popup.  So you can do “OK / Cancel”, or whatever else you want.  But doing so necessitated adding callback support so you could tell not only when the user closed the alert, but so you could tell which button they pressed.

Open letter to Apple iPhone Developer Support

I’m a big fan of all things Apple, and as you can tell from my past blog posts I’m a big fan of iPhone development. I’ve even dusted off my aging C skills, and have learned to love Objective-C. The one thing I haven’t learned to love, like all other iPhone app developers, is their application release process, and the seemingly arbitrary app store acceptance department.

Don’t get me wrong, I think how Apple fiercely guards the App Store to prevent bad, buggy, or offensive material from getting on there is a great thing. Some of my mother-in-law’s students in the class she works in have iPhones or iPod Touches, and these little 10-year-olds love the little apps I’ve put out. They’re fun, light-hearted, and they get a lot of enjoyment out of these and other apps. It’s reassuring to know that if I install an app, it won’t crash my phone (too badly) or that a child won’t be offended by them (too much).

However, the level of detail they give in their rejections seem both arbitrary and unnecessary. You develop an app and have to throw it over the fence to Apple, after which you wait with no level of detail as to the status, or success, or any sense of progress through whatever queue they have. Finally, you more often than not get a big fat rejection letter that gives you no detail as to why your app didn’t meet their secret criteria.

In my experience so far, this has actually been a virtue. My apps actually did have minor race conditions, or problems on specific platform versions. So, fair enough, I fix my changes and submit them in. But recently, the framework I work with and have been helping develop seems to be under fire from Apple for no apparent reason. And it’s the contradictory nature of their message that is what gets under my skin.

In a long thread on the PhoneGap mailing list, a number of developers writing their applications under PhoneGap have been given rejection letters saying something like:

Upon review of your application, cannot be posted to the
App Store due to the usage of private API. Usage of such non-public
API, as outlined in the iPhone SDK Agreement section 3.3.2 is
prohibited:

” An Application may not itself install or launch other executable
code by any means, including without limitation through use of a plug-
in architecture, calling other frameworks, other APIs or otherwise.
No interpreted code may be downloaded and used in an Application
except for code that is interpreted and run by Apple’s Published APIs
and built-in interpreter(s).

The PhoneGap API implemented in your application is an external
framework.

For those new to PhoneGap, it’s a project that gives you an XCode project directory with Obj-C classes pre-made that allow you to develop iPhone apps in HTML / JavaScript. It wraps up several of the iPhone’s native controls and exposes those capabilities to JavaScript. In this way, an application developer could write their app in a hybrid of native Objective-C code and the iPhone’s own native browser control, the UIWebView.

It seems though that Apple constitues the use of their own controls as a 3rd-party library. Apple’s own developer documentation includes code sample projects, much like PhoneGap’s, intended to get a developer started on using their SDK. Is it incorrect to assume that others can do the same?

Additionally, there are 3rd-party companies such as AdMob, Medialets, and a number of others that provide ads, application tracking, and other resources to iPhone developers. Their code is given to you as pre-compiled libraries, that are most certainly not included on the iPhone when you pull it out of its shrink-wrap. So how is it that all these apps are released to the App Store with these 3rd-party libraries linked in, and an app framework whose source code is freely available and uses officially documented features can’t be?

I decided to put an end to the speculation, and wrote a letter to Apple’s developer support on this matter. I’ll give it a chance to percolate through their support department, and if I don’t hear an answer back via email, I plan to call their support department until I can get an answer.

For future reference, and in the interests of keeping the discussion open, here’s a copy of the letter I sent in to Apple.

From: Michael Nachbaur
Date: May 17, 2009 6:04:28 PM PDT (CA)
To: idp-dts@apple.com
Subject: Library classification clarification

Hello, I’m an iPhone software developer, and one of the core developers of the PhoneGap project. A number of users of PhoneGap – a set of Objective-C classes aimed at leveraging the UIWebView to access iPhone-supported hardware features – have reported that their apps have been rejected from the App Store because they supposedly use a “3rd-Party Library”. I wanted to get some clarification about this, as this is not only untrue, it is completely at odds with the goals of our project.

PhoneGap only uses officially-supported features of the iPhone, as documented within XCode’s iPhone SDK documentation. We even make sure that we don’t even use deprecated features of the iPhone, as we want to ensure 100% compatibility. All the software we use is exposed natively by the iPhone, and is in use in many other apps on the App Store.

So I wanted to get an official clarification from Apple as to why these apps are being rejected, and what, if anything, we as the maintainers and developers of the PhoneGap project can do to rectify the situation. We are trying to empower developers with quality starting-blocks for developing their own applications, much as the Apple sample applications do.

So please, if there’s anything we’re doing wrong, we would more than happily change our code to accommodate Apple’s policies. As far as we can tell, we support Apple’s licenses even better than other apps on the App Store, because we don’t import 3rd-party libraries such as AdMob, Medialets, or any of the other ad and tracking libraries that are obviously featured on almost every app in the App Store. And these are quite plainly 3rd-party libraries, and as such should they not be even more restricted than we are?

As a community, of both software developers and of business-people, we are very anxious to hear back from you, and would like to discuss this with someone at Apple to get an official answer, instead of the conversation being one-sided and filled with speculation.

Thank you for your time, and I look forward to hearing back from someone soon.

What are your thoughts on the matter? Can anyone reading this find some reason why Apple would target PhoneGap?

Update: I got an update on this problem from Steve, one of the app reviewers, over at Apple.

So much to do, so little time

I think work wrecked my brain a bit today. I have so many ideas running through my head, and just not enough time to catch up to them all. It happens to all of us from time to time, but the thing is I have so much fun with work, that it’s hard to moderate myself. I think I’m going to head home, listen to some Bob Marley, and when I meet up with my wife and her parents at the pub, I’m going to watch the hockey game, drink some beer, and enjoy my evening without technology.

That being said, I’ve recently made some great updates to PhoneGap, and have added some docs. Check out the generated JavaScript documentation and iPhone documentation from my personal branch at Github. I’m sure we’ll get the docs pushed up to the main PhoneGap website soon.

PhoneGap UIControls ready to go

I’ve merged the results of my UIControls branch on github into my master branch. I think my little experiment went well, and I’d love to get feedback from people on how this new API works for you. I still have some great plans for it, but before I get ahead of myself, let me cover what I’ve done:

Changes:
• Refactored the command call API to allow for a richer set of arguments to PhoneGap commands
• Moved some commands around to more appropriate classes (e.g. Alert and Vibrate both moved to Notifications)
• Reorganized the XCode project so commands are clearly separated from PhoneGap infrastructure
• Renamed the Settings.plist PhoneGap config file to PhoneGap.plist, and created a new Settings.plist file that contains custom application-specific configuration.
• Made all PhoneGap commands inherit from a common base-class that auto-loads its own Dictionary of configuration from the main PhoneGap.plist file.
• Added UIControls command class that exposes tab bars and toolbars to JavaScript.
• Updated the demo to show off tabs and toolbars

All that looks like a big change, but almost all of it was infrastructure changes that were necessary to get UIControls to work. Previously, all PhoneGap commands were class method calls, meaning it was very difficult to maintain state between command calls. Now that commands are actually called on an instance of a given command class, it’s easier to maintain state. So when a tab bar is created, multiple calls can be made, each to construct different aspects of the UI. Without all this, the following example would have been much more complicated:

uicontrols.createTabBarItem(“toprated”, “Top Rated”, “tabButton:TopRated”);
uicontrols.createTabBarItem(“recents”, “Recents”, “tabButton:Recents”);
uicontrols.createTabBarItem(“more”, “More”, “tabButton:More”);
uicontrols.showTabBar();
uicontrols.showTabBarItems(“toprated”, “recents”, “history”, “more”);

The changes to the PhoneGap configuration were necessary because now, when a PhoneGapCommand subclass is constructed, it will look in the PhoneGap.plist configuration file to see if there’s anything pertaining to it. So if there’s a key in the dictionary with the same name as the class being constructed, it will use that as a local configuration dictionary influencing just that one class. That way, if you don’t use a feature of PhoneGap, or you have to configure a lot of options for a single type of command, these options won’t be cluttered alongside the standard global PhoneGap settings.

I created Settings.plist because of experiences I had in an application I’ve been creating in order to test my new UIControls branch changes. I found that I wanted to set compile-time options (for instance a “lite_mode” boolean) that influenced the way my app runs, without having to change HTML or JavaScript code every time. So instead what I have is a configuration plist file that is used exclusively in JavaScript for my application. I’ve added the excellent SB-JSON framework in to the PhoneGap project, and use that to pass these settings into the JavaScript application at start-up time. So all you have to do is read Settings.lite_mode, for instance, in order to read properties set in your plist file.

Oh, and finally, I’ve moved the JavaScript documentation to javascript/docs, since they were practically impossible for new users to find in the past. I’ve been working on creating DoxyGen docs of the PhoneGap code for use in XCode’s documentation browser, but I haven’t gotten far enough there to actually check anything in besides comments. I found instructions on how to generate XCode docsets from DoxyGen, but I haven’t gotten it working just yet.

So please, try out my PhoneGap updates and let me know what you think of it. I think the integration of the JSON framework will make things like Contacts much simpler to implement.

Before I go though, I want to give a little “wish list” of features I’m planning on adding in the near future. I’ll get to them whenever I can, since my own app development takes priority of course.

• Toolbar buttons
• Tabbar show/hide animations
• File support (read / write local files)
• Camera and photo library support (POST to a server, save to a local file, etc)
• Native “Flip / Slide” transitions (no more having to mimic them in CSS)
• 3rd party API integration, like AdMob and Medialets (I already have both of these done, but I’m in discussions with both companies to determine if the terms of their license allows me to redistribute it)

Native UI Controls in PhoneGap coming along nicely

They say a picture’s worth a thousand words. Frankly I think inflation has really taken its toll on the cost of words, but nevertheless here’s a quick view of what’s been going on in my UIControls PhoneGap branch on Github.

In that screenshot the UIWebView frame, aka the actual webpage content of the app itself, was automatically resized so the toolbar and tabbar has room to be shown. And yes, those are native widgets for the toolbar and tabbar.

Currently the toolbar doesn’t support showing of any buttons, but the tab bar is fully functional. What it doesn’t support (or at least, it’s not tested at all yet) is using custom images in the tab bar items. But that’ll happen shortly.

Next on my roadmap before this feature can be pulled into the main PhoneGap branch is adding buttons to the toolbar, and animating the tool and tab bars when they’re shown. Currently they just pop into view. I’d like it to be possible for it to slide or fade in instead.

Check back here, or subscribe to my feed, to stay tuned on my additions to PhoneGap.

More changes coming to the iPhone branch of PhoneGap

Last Thursday I went down to Nitobi after work for a couple of beer and a chat about PhoneGap before I had to go give a couple lightning talks at the Vancouver.pm Perl Mongers group. My hour chat with a couple of the Nitobi crew turned into over 2 hours, making me late for Vancouver.pm, but I think the effort was worth it. First off, they have good taste in beer. Second, I had an opportunity to do a little show-and-tell of my PhoneGap branch on Github. Not only did they like my changes, but I told them what my roadmap of features for PhoneGap includes, and I think they’re on board.

So to that end, I’ve started with the changes I said I’d work on. I cleaned up the console / debug logging code I recently developed, to allow for the main meat of what I’m working on: A flexible API for dynamically creating native UI widgets such as toolbars and tabbars. But before I can do that, I wanted to refactor the calling method that PhoneGap uses.

In order to make PhoneGap commands stateful, and to be able to pass a richer set of instructions to those commands, I’m refactoring the call API to look like so:

gap://Class.Method/arrayEl1/arrayEl2/…?dictKey=dictVal&…

The first command to a given class will construct it, passing the reference to our UIWebView to it as a constructor argument. All command classes now inherit from a new class called PhoneGapCommand, which stores the webview as an instance property.

So then the first, and all subsequent commands, are invoked with two parameters:

  1. (NSMutableArray*)arguments
    This is a list of arguments passed on the path component of the URI. They’re URL decoded for you, so any %-encoded characters will be expanded for you.
  2. (NSMutableDictionary*)options
    This gives you a dictionary / hash of the query string component of the URI. This is always passed, but if a command doesn’t supply a query string, the dictionary will be empty.

Calls from within JavaScript will take the first hash (object in JavaScript notation) it sees and will use that as the query string. All other arguments need to be strings / numbers, or else they’ll be dropped. This means you can pass your options hash as the first, or even the last argument in a PhoneGap.exec call.

The bulk of this code is almost done, so I’m excited to hear what people think about this. I’m just getting the existing commands working with this model before pushing back out to Git, at which point I’ll continue on and implement native UI toolbars / tabbars.

Update: I’ve updated my branch on Github with my latest changes. I think they’re great, but there are still some changes that need to be made. I got most of the API working, except for contacts. But since they weren’t working so hot to begin with, and someone else has stepped up to the plate to improve Contacts, I’ll let him merge his updates in to my new code. Next up: native UI controls!

PhoneGap and JavaScript

I’ve been working on some pretty fun changes to PhoneGap recently, which hopefully will be merged into the main branch soon. (Brock? Any word on that? It’s now 12 days, and counting) In my branch of PhoneGap I added console logging support, I implemented queueing of commands so they don’t walk over each other, and finally (and perhaps more importantly) improved the JavaScript build system and infrastructure.

PhoneGap’s JavaScript Structure

PhoneGap is broken up into several different .js files, each of which implements a part of the PhoneGap API. And with recent changes to PhoneGap’s Objective-C code, the implementations of those commands are divided nicely into their own separate classes. Additionally, there’s platform-specific implementation hooks of those APIs which make the necessary calls in to the native code that implements those commands. At build time, a Rakefile is used to compile these together into one single “phonegap.js” file that can be included into your application.

But in the main branch currently there’s a number of bugs that prevents this system from working. The JavaScript files were being loaded in a bad order, causing prototype methods to be overwritten instead of extended.

I’ve hacked something together to improve on this, but this is really just a stop-gap measure. Really what should happen is an actual JavaScript framework should be adopted to help with class loading, extending classes, and implementing interfaces.

JavaScript Frameworks FTW

I’m a big fan of MooTools, so most of my day-to-day web work is in that framework. But really, most libraries solve the basic problem of “Here’s a base class, I want to either add to it, or subclass it to add more behaviour”. You never know how much you rely on something like that until you have to do without.

I found myself in the uncomfortable position of having to implement prototype-based inheritance by hand, and not in the fun way. This brings me to the main reason for this post, besides the subtle prod to Brock.

I want to see a client-side library that works well for light-weight apps, but still provides capabilities to extend classes, find elements using CSS selectors, provide helper functions for performing CSS-based animations, and provide event binding and closure-wrapping support.

I started toying with JQTouch, and while it’s certainly intriguing, it doesn’t solve some things just yet.

  1. It’s still based on the stock jQuery, which is still pretty large, weighing in at 56KB
  2. jQuery’s event object doesn’t support any of the iPhone’s touch and rotate/scale event properties. You can get at it by saying “event.context.”, but at that point why bother? The native event object is just fine.
  3. It doesn’t address some basic issues I have such as function binding

So far I’ve managed to resolve my above issues with PhoneGap’s JavaScript API for the time being, but long term I think there’s some definite needs for the iPhone platform in general. We need to lose the platform-independant thinking of the standard frameworks (“Am I in IE? Am I in Opera?” needs to go). We need to have something that improves upon the already excellent CSS-based animation support of WebKit, and provide more abstract behaviours. And finally, we need to provide capabilities that let us define class-based applications with rich event and callback binding support.

The reason we’re developing applications under PhoneGap is because we want to build apps faster than we could if we developed in native Objective-C. So we need to have a JavaScript library that doesn’t get in our way, and actively solves the problems with JavaScript that WebKit doesn’t already solve.

I’m diving in to PhoneGap and ObjC, finally

I’ve managed to avoid C and C++ programming for most of my career of 15 years. I’ve dabbled, and then I’ve run back to my favourite languages. Besides, as a web developer there hasn’t often been a need for me to delve that deeply into the machine.

Now that I’m developing iPhone applications, that’s all changing. I’m using PhoneGap to develop my apps, but some of it was buggy, and others just didn’t do what I needed to do. I’m integrating the AdMob and Medialets APIs into my application, which means Objective-C programming. After picking my way around, and continuing on the work my friend Scott McWhirter developed, I think I’ve come up with something that not only works well, but helped me to learn and love Objective-C.

Why I started playing in ObjC

Scott had fixed a long-standing bug in PhoneGap which happened when multiple PhoneGap commands were made within the same event loop in JavaScript. After he figured out how it worked, and how to fix it, that showed me just how PhoneGap works. To be honest, this is the first time I really understood how it does what it does.

As I integrated Medialets in, I discovered that it has the capabillity of sending custom tracking events so developers of iPhone applications can not only analyze when and where people are using their application, but what they’re doing while they’re using it. I wanted to use this to see how effective parts of my first application are, so I can learn what to change in the future.

Sadly, since most of my application is written in HTML/JavaScript, there was no direct way I could call out to the Medialets ObjC API directly from my JavaScript events. I couldn’t do copy/paste code any longer, I needed to extend PhoneGap to add my own commands to it.

Why I Refactored PhoneGap

The way PhoneGap commands worked in the past is it would set “document.location” to an address that looks like “gap:command_name”. If any arguments were supplied, they’d be added on the end separated by colons. But since that is a relative path, it would be added on to the end of your application’s filename. So, since HTML files are loaded locally from within the app’s directory on the iPhone, a GAP command would look like:

file:///…MyApp.app/www/gap:command_name

So figuring out if a command is being called involved a lot of hackery around stripping out the gap: portion of the URL. Since this was difficult to deal with, and meant there was a lot of re-used code, not to mention commands couldn’t contain colons, or any characters that could potentially be URL encoded, I refactored GAP commands to be their own absolute paths, like so:

gap://command_name/arg1/arg2/arg3…

When this location is set, a callback within the Objective-C code (called shouldStartLoadWithRequest) checks the address and determines if the request is a real request and should be allowed to continue, or if it should process the command as a GAP command and disallow the link from being loaded.

So these URLs are never loaded outside of the phone. Once PhoneGap sees a gap:// URL, it parses it as a command request and never attempts to fetch the resource. The benefit of this is that the iPhone’s NSURLRequest and URL objects automatically decode the URI parts and escapes any %20-style encodings. It also is a lot simpler to find the name of the command to run, since all it has to do is fetch the URL’s hostname property.

I’ve pushed this to my own fork of PhoneGap up on GitHub if you want to try it yourself. Hopefully these changes get pulled down into the main branch of PhoneGap.

Next Steps

Realizing how easy it is to write Objective-C, I’m planning additional changes in the future. First, I would like to refactor the gap.js JavaScript code to use Joose, a light-weight meta-object class framework. This way, instead of calling out to a separate class like Device.exec to call out to PhoneGap, you could inherit from PhoneGap and create a class-based application that extends it instead.

I would also like to make the commands within PhoneGap pluggable, so one doesn’t have to extend one giant if/else block. Instead, it would be nice to have a pluggable framework where you can add commands by inheriting separate classes. I don’t know enough to do this yet, so unless someone else does something similar, it will have to wait.

Certainly I’ve learned quite a bit, and had a great time doing it! I’m really enjoying PhoneGap and iPhone development, and I’m looking forward to adding more as time goes on.

Second impressions with PhoneGap

WebKit

I’m now a registered iPhone App Developer! After the usual waiting, emailing, phoning, and faxing that I won’t bore you with because blogs all over the world are full of people ranting about Apple’s registration process, I now have my developer key. (Personally, I don’t see what people are complaining about…it wasn’t all that painful.)

So now that I’ve written two iPhone applications, the first thing I wanted to do was load them on the phone and see how they actually behaved on real hardware. The results were, lets just say, less than thrilling. While they ran and did everything I would have expected of them, there are strange inconsistencies between the rendering of WebKit on the phone vs the desktop.

What went wrong

First off, let me state for the record that these are development versions of my apps, and I hadn’t figured on them working well right away. Lets face it, as developers we spend most of our lives working with broken crap, and try our best to make it less broken. That being said, I’m still an optimist and I had hoped.

First, what worked:

  1. The app’s icon, start-up screen, and general layout all behaved. Everything was where it was supposed to be.
  2. The app started up fairly fast. The only other app I’ve used that’s based on PhoneGap is the Translink public transit app (since I take a combination of a bus and train to get to work). It takes far longer than most apps to start, so I had expected the worse for my app.
  3. Clicking on buttons and other UI elements in my first app worked just fine. My second app, which uses more complicated gestures (pinch, rotate, etc) also worked without a hitch.
  4. My JavaScript ran quite well, with only a few minor exceptions.

Now on to what didn’t work. Keep in mind, the list above is a lot longer than I’d expected, so the oddities below are tolerable, for the time being.

  1. My CSS transitions are behaving very oddly. Instead of smoothly fading from 0% to 100% opacity, they jump between 0% and 100% immediately, back down to 0%, and then fade gracefully back up to 100%.
  2. The toolbar of my app, which is implemented as HTML/CSS, flickers whenever I click on buttons anywhere on the screen. This is especially weird since the events for those buttons, located in the center of the screen, don’t touch or interact with the HTML or CSS attributes of the toolbar in any way.
  3. For one of my apps I use an element with CSS sprites. None of these seem to work. When I change CSS classes, instead of changing the background position of the sprite image, it stays in the same skewed position.

Next steps

From here, I think I need to either use CSS classes, or set style properties from JavaScript exclusively. Mixing and matching might be causing problems. What do you think?

However, as I finish this, my wife and my in-laws want to go to the pub. So screw this hacking on frustrating code from home. I’m going for a pint and some appies!

Before I go though, I’m going to appeal to the iPhone and PhoneGap developer community at large: Have any of you encountered these problems before? Do you have any suggestions on how to make things work better?

First impressions with PhoneGap

A few months ago I had the opportunity to meet with the crew developing PhoneGap down at their headquarters (Nitobi, down in Gastown district of Vancouver). It’s only a few blocks away from where I work, but the horrible downpour of rain made me think twice about going (hey, it is Vancouver after all). Next time I’ll bring my laptop with me, but it gave me an introduction to what they’re looking for help with, and where they’re taking PhoneGap.

Due to work and home commitments however, I haven’t been able to develop any applications for it until recently. I was stuck at home for almost a week with a terrible flu, and that gave me the opportunity to tinker, and helped me to avoid daytime television.

First Attempts

At first I tried to develop an app much in the same way I develop web applications on other browsers. I built a MooTools package including the dependancies I needed, stuck it in a directory, and began writing classes to implement the UI logic I needed. After compiling and getting it all onto the iPhone simulator, I screeched to a halt.

None of my logic worked. The static HTML was just that…static. So, I trimmed code, recompiled, rinse, repeat. Try again with jQuery, no joy. Try with XUI, and still things were behaving oddly.

Essentially I discovered that I was just trying to do too much. I pulled everything back, simplified my code, and did away with the external libraries. Importing MooTools and jQuery weren’t the problems exactly, though I figured it wasn’t helping. The thing I discovered is that WebKit, CSS3 and Safari’s JavaScript engine are sophisticated enough that there isn’t much need for complicated JavaScript toolkits.

Second, more successful attempts

After taking a step back, I went back to basics. I built my class using basic prototype class construction (though I miss “new Class({})” from MooTools). Instead of using JavaScript-based animations, I read up and implemented CSS3 transitions. I did my HTML layout debugging in Firefox with Firebug, proofed them in Safari on my desktop, and only then did I compile and test in the iPhone simulator.

My biggest problem was the lack of a debugger or JavaScript console on the iPhone simulator. My only way of accurately testing where my code was falling down was by issuing “alert()” statements, which of course breaks the flow of code.

I now have my app running smoothly, and as soon as my business name and licenses go through, I’m going to register as an Apple iPhone developer so I can test my app on my iPhone. With luck, I’ll be pushing my application through the AppStore release procedure, which I’m sure will be another learning curve as well.

For now, I’m happy with what I have. I’ve created a simple application that works client/server via XHR with fall-back to disconnected mode when there’s no network connection, the animations and transitions are smooth, and the JavaScript is minimal with no external libraries other than gap.js needed.

I’ll post again once I release, so everyone can see what it is I’ve been working with. I have great plans for future applications, and I’m excited about PhoneGap.

PhoneGap Impressions

Before I go though, I want to make a few points about my observations of PhoneGap. I might be misinformed on a few points, but the lack of documentation and its relative alpha/beta state may just mean that these features are coming.

  • No JavaScript console available
  • XCode can’t figure out when HTML/JavaScript dependancies change, so you have to do a “Clean All” before recompiling and testing your changes
  • XUI really isn’t ready for broad use, in my opinion. It seems like a great idea, and I would like to contribute to it, but it’s easier right now for me to write plain JavaScript.
  • Use CSS3 whenever possible; avoid issuing animations in JavaScript.
  • If you do have to do more complicated animations, use JavaScript only to piece together different sets of CSS3 animations by setting different CSS classes at intervals.

Fortunately, the PhoneGap google group is active, and quick to respond. I’m looking forward to becoming more involved as I build more with PhoneGap.