Our First iPhone App
Bret Simister and I spent this weekend hacking at iPhoneDevCamp, occasionally coming out of the code trance to tell people, "Open Laszlo compiles to standards-compliant DHTML that works well in every major browser, including Safari on the iPhone." Starting from scratch on Friday at 6 pm, we built a little app called NewsMatch using the Open Laszlo platform. We love the swoosh, zoom, whoosh feel of the iPhone ui, so we started with an app concept with a lot of room for swooshing. We also wanted to do something that wasn't completely silly; just a little silly would be fine. Bret suggested a matching game about the news, so off we went... I found an rss stream with photos for every item (thanks yahoo!), cached the xml locally with
curl http://rss.news.yahoo.com/imgrss/441 > news.xml, then set about showing it in OL. (Tutorial on how to do this in another article soon.) Poof, twenty lines or so, there's an RSS reader. Open Laszlo is seriously sweet for building applications around xml data.
I used the SOLO deployment wizard to create a set of files that I could post on the web, to view it on the iPhone. The SOLO deploy wizard gives me an html wrapper, main.lzx.html, into which I dropped some metadata:
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
This defeats the iPhone browser panning/scaling; the double-tap and the pinch/zoom-to-scale work really nicely for viewing a normal html page on the iPhone, but we're authoring this application directly to the iPhone screen size, so we don't want to permit any zoomies that we don't explicitly request.
That viewport tag is the only change I had to make to Open Laszlo's DHTML output to make it look great on the iPhone. Fonts, views, opacity, animation, events, handlers, custom classes, data binding... it all just works.
I added some game logic using vanilla javascript, and Bret buffed up the interface and animation, to hit the swoosh sweetspot. At that point It was 10 am Sunday and we still had four hours before the Hack-A-Thon ended. We did a few more tweaks to improve performance on the low-low-low bandwidth EDGE netowrk:
- We deferred loading the images until after the main ui has slid in, by adding an onstop handler to the intro animation.
- We made a custom splash in DHTML, to show while the rest of the application downloads. This was another tweak to the html wrapper page, this time in the lzsplash div. We just added a few divs that match the NEWS/MATCH title screen, for a seamless transition from vanilla DHTML to OpenLaszlo-generated DHTML.
That's all; it's up and running, in time for the Hack-A-Thon demos. Since then I've made a few small improvements, but what you see here is almost entirely the product of two days work by two people using Open Laszlo. The whole thing is around 400 lines of code.
View the source for this application or download it with
svn co http://svn.openlaszlo.org/sandbox/ben/smush.
July 9th, 2007 at 5:13 pm
Great work, guys! I wish I could have been there with you. The historic first iPhoneDevCamp with Laszlo participation!
July 9th, 2007 at 8:48 pm
[...] Ben Shine and Bret Simister had a good time at iPhoneDevCamp and came up with this amazing iPhone app called “News Match”. Look at the smooth animation, and yes, it’s OpenLaszlo, and yes, we do Ajax, too! You’ll find many more details on NewsMatch in the OpenLaszlo.org blog (thanks Ben). And for all of us outside the US with no access to an iPhone I made this screen cast (with the help of iPhoney). [...]
July 10th, 2007 at 2:40 am
What about performance?
Do the transitions feel as smooth as ‘native’ ones?
Is ‘click’ the only mouse event really supported or
could gestures be simulated through the laszlo service layer?
July 10th, 2007 at 3:34 am
How come, app breaks a bit in FF.
Try harder
July 10th, 2007 at 4:37 am
[...] la news et quelques précisions techniques sur le blog d’OpenLaszlo iPhone iPhoneDevCamp News Match openlaszlo [...]
July 10th, 2007 at 10:06 am
There’s a page on the OpenLaszlo wiki for discussing our experiences with iPhone:
http://wiki.openlaszlo.org/IPhone_Experiences
July 10th, 2007 at 1:58 pm
[...] iPhone Link : http://labs.openlaszlo.org/ipdc/newsmatch06/ Website : http://weblog.openlaszlo.org/archives/2007/07/our-first-iphone-app/ [...]
July 11th, 2007 at 10:42 am
This has inspired me to delve into OpenLaszlo more. Specifically, i made this little OpenLaszlo app that simply grabs the update xml feed from Twitter and show’s the latest status updates, complete with user images.
Although sadly i don’t have an iPhone, so i have no idea how my app fares. Still, it was a great learning experience making it.
July 11th, 2007 at 2:15 pm
[...] OpenLaszlo, which has been around the RIA world for a long time, added support for DHTML/JavaScript in OpenLaszlo 4. That meant that the iPhone was a logical jump and they demoed an OpenLaszlo application that ran on the iPhone. So with OpenLaszlo you can build Flash applications, DHTML applications and now iPhone applications all from the same basic code base. That’s pretty compelling. [...]
July 12th, 2007 at 5:50 am
[...] Y resulta que me encuentro la primera aplicación que no es de Apple y que corre sobre un iPhone y está escrita en un lenguaje (Openlaszlo) que estoy trasteando estas últimas semanas. Así que tendré que agenciarme un iPhone para practicar. Y ahora ya le veo otro uso al OpenLaszlo. De todas maneras las aplicaciones de este lenguaje también funcionan en mi feo teléfono móvil actual. Por cierto si no tenéis un iPhone y queréis ver la aplicación, pulsar en este enlace. [...]
July 31st, 2007 at 4:07 pm
[...] e sapete che lo stesso file lzx invece di produrre un oggetto flash può, dalla versione 4, produrre del dhtml? Date un occhio a our-first-iphone-app alla prossima! [...]
August 13th, 2007 at 4:32 pm
[...] You get more information about NewsMatch at Open Laszlo Org.. Check out NewsMatch here! [...]
August 15th, 2007 at 8:13 am
[...] www - src [...]
August 24th, 2007 at 12:19 pm
[...] After watching the OpenLaszlo 4 Programming Tutorial Screencast, I’m convinced that Laszlo is more capable than Flex, and there is less proprietary code to learn since you use Javascript instead of Actionscript. It’s all ECMA, XML and xPath, so I guess at some point it becomes 6 vs. a half dozen, but I will mention one small caveat: iPhone compatible. Oh yes, I’ve seen the first iPhone app in Laszlo, and it’s pretty and touch-screen happy. (I think it goes without saying that if it works on iPhone, it can work with all major browsers) [...]