PhoneGap vs. Titanium from n00b eyes October 28, 2009
Posted by headwinds in Random.4 comments
I admit it – I’m a n00b when it comes to mobile development. I have experimented with Android’s Java and Objective C but I’ve come to realize that what I really need is something simple that will translate easily from the web to mobile. I also need simple, well-written getting started tutorials to make this transition even easier.
In most of my posts, I point to Flash as my weapon of choice. Its my Excalibur. But then again I’m no pendragon; I can’t pick and choose my technologies. I’m somewhere in the middle of the pack of dragon developers who require a larger arsenal depending where they need to stick their media. Don’t get us confused with the other jacks out there. We aspire to be specialists even gurus in a few languages and command them to do our bidding. For me, its all about the speed to prototype and a decent level of control over the media.
For this test to compare frameworks, my goal is to link together 3 html pages with a mixture of text, images, and interaction. I want to build an iPhone app in the simulator without an actual iPhone nor developer license.
PHONEGAP
I approached Phonegap first which now slants my take on Titantium because it took out most of my hair during this process. It helped me learn to how to think about html/css/javascript for mobile, and this made diving in Titantium easier.
After downloading and opening the PhoneGap project in XCode, I mainly struggled with the xcode interface itself so I can’t really fault phonegap for my not being comfortable with its in and outs. For instance, I could easily edit the html but it took me a long time to figure out how to add an image to my project. I also attempted to manually rename the PhoneGap project to my own project name and this caused havoc [specifically I got a weird pathing error to a missing configure folder] and I had to rename it back to get it to compile properly.
I think most of my problems could be cleared up if this tutorial was better though. In fact, because they have a wiki system, I (or you) should consider writing one.
Getting started with phonegap and iPhone
TITANIUM
For Titanium, I watched a few videos on their site [ youtube also has decent Phonegap videos] and then downloaded and installed their Titantium Developer tool for the Mac which allowed me to configure my iPhone app without even touching XCode!
Next, instead of wrestling with XCode, I decided to open a familiar html editor — Dreamweaver — and edit the index.html in this environment. Again, without using XCode, I created an images folder and linked my html to an image in that folder. I returned to the Titanium Developer and launched the app. I saw my html page and the image [ I never did get the image to appear in Phonegap but that's xCode's fault I'm sure]. From there, it was relatively easy to create another html page as they include an about.html to reach my goal of three html pages with images and some hyperlinking interactivity.
Getting started with titanium and iPhone
CONCLUSION
Phonegap supports Android, iPhone, and Blacberry while Titanium supports Android and iPhone. This difference doesn’t really matter to me as I’m currently focusing on iPhone and Android. If I write standards compliant html/javascript/css as my base, I should be able to an create app that works within any platform and it would then be a matter of learning the individual hooks. The underlining html/css/javascript should then in theory be web friendly too so that one could that work and create things like facebook pages. Its a little bizarre to be thinking about the mobile first then the web.
I’d like to see both Phonegap and Titantium add a big quick link to their iphone development getting started pages on their home page as I had trouble finding them initially. I would like to see Phonegap write their own official guide to getting started separate from their wiki page as much as I love wikis, it needs an authority voice.
For your next mobile project, look at what your app needs to do and consider using html/javascript/css. One might consider the following workflow but I’ll jump straight to steps 2/3 
1. create a prototype that works in a web browser
2. hook the prototype into a framework like phonegap or titanium in an iphone simulator
3. test the app on the actual device
I think I wanted PhoneGap to be a no brainer as it was recommended to me by friends. Right now, after about only 3 hours using each platform, I will have to recommend Titanium as I simply found it easier to get started with but I don’t know yet how it might limit me down the road.
* UPDATE *
Jesse MacFadyen has graciously provided the desired iPhone Phonegap tutorial. I’ve haven’t stopped following the Phonegap mailing list, and am continually impressed by their progress. I would now recommend giving both Phonegap and Titanium a shot and see which one best suits your needs.
receptionist friendly flash 10 xml editor October 21, 2009
Posted by headwinds in Development, Flash, Gaming.2 comments
XML is so simple even Maggie Gyllenhaal could update it but she never would; nor would your receptionist or even your PM.
In theory, non-technical people should be able to edit xml files. Creating configurable xml files are a relatively cheap solution to content management over one driven by a database. XML is really meant for other developers to manage your compiled work without having to dig around your source looking for variables.
On a side note, I’ve been building a lot of html, css and javascript lately so that I can eventually claim to be a true front-end developer not just a one-trick Flash pony. I’ve grown to realize that there is a cool conversation happening with html these days and I should be more versed in it. But I’ll save that tangent for another post. I only mention it here because I’m working with a django developer and learning django tags. In the django documentation, there is a line about the pains of having to hand write xml which they call “sadistic”.
As much as you try to keep it organized, xml becomes increasing more challenging to work with as the data grows beyond 100 lines. It would be nice to have something like form-based editor for it which could create the xml behind the scenes. But you need to model the xml first before you can create the editor. In most cases, its simply faster to edit the raw xml.
With the introduction of Flash player 10, we can now develop xml editors in CS4 without using AIR or ZINC. We have a new method on filereference: save(). We can use save to open file dialog so that the user can save the new file to their desktop. Currently, there is a bug though in the save method which won’t allow you to overwrite existing files — it will attempt to and actually append your data to the end of the file which isn’t good especially when dealing with xml.
You can get around this bug by creating a new file each time. In the below example, I simply added a timestamp to my file name to avoid this problem. Then, when I need to load this xml file, I open the latest version. Here is a small code sample demonstrating this save work around:
view code sample
download code sample
I liked these two blog posts about the filereference features and the known save bug:
deleteaso.com
dynamicflash.com
This post is a little backwards. I’m showing you a code sample before I reveal its purpose.
I like to evaluate new features in Flash by creating mini game engines. In order to get more comfortable with filereference and potentially use it my client work, I decided to design/develop a story editor which would allow me create reams of xml for a story-driven game like Mass Effect. For this exercise, I did the wireframing and coding simultaneously. This felt natural to me as I basically had an idea of what the end interface would look like, and, as I discovered missing controls, I could add them and wire them up as I went along. It’s a strange feeling when your interface starts to speak to you and recommends new features ;-D.
Along with the ability to create/edit scenarios, you can see a few other features sketched in this working wireframe like an image option which doesn’t do anything yet; the preview scenario which will show the images and cycle through the scenarios; and the bizarre “male” reference in the top right that tells me that this scenario is written from the main man’s point of view. I have to plans to add female, alien, and possibly unicorn POVs.
After the recent Adobe announcement about how they had managed to circumvent the Flash player on the iPhone by developing a way to convert AS3 to a native iPhone app, I did a black flip back into Flash and have pretty much abandoned my shallow dives in Android and Objective C. I’ll thrilled to be focusing on Flash again with some complementary side steps into javascript.
As much I know this scares some hardcode Apple developers who fear we’ll fill their precious little wonder with trivial bubble wrap apps, I’m dreaming of serious Flash games and apps on the iPhone now as an extension of our greater advertising campaigns that will uniquely consider an iPhone’s hardware requirements. As soon as CS5 is ready, I hope to have a Flash mobile game but in the meantime I’m starting to look at many of the Flash gaming portals with their reduced desktop space that seem like an ideal tank to test the waters.
