180 likes | 336 Views
OpenLaszlo and iPhone: Open Standards Can Look Cool. Ooh, iPhone!. “Let’s build some iPhone apps !” “Great, where do I get the Apple iPhone SDK ?” “Um, there isn’t one .” “So how do I build iPhone apps?” “You have to use HTML .”
E N D
Ooh, iPhone! “Let’s build some iPhone apps!” “Great, where do I get the Apple iPhone SDK?” “Um, there isn’t one.” “So howdo I build iPhone apps?” “You have to use HTML.” “But I want it to look smooth and shiny and have rich interaction and use web services. Can’t I just wait for a Flash player, or Java, or something?” “Good luck with that. There’s got to be another way.” Laszlo Systems, Inc. - Proprietary and Confidential
What is OpenLaszlo? • Open source platform for building rich internet applications • lzx language : XML and JavaScript • Declarative UI descriptions • JavaScript • Cinematic user interface • Single-page experience • Animate anything Laszlo Systems, Inc. - Proprietary and Confidential
OpenLaszlo 4: Multiple Runtimes lzx code OpenLaszlo compiler svg dhtml swf bytecodes Laszlo Systems, Inc. - Proprietary and Confidential
The Challenge: iPhone Dev Camp • Two weeks after iPhone released • A big room, wifi, free food, tons o’ geeks, and a mission: write an iPhone app in a weekend. • Can a designer and a developer create an OpenLaszlo iPhone application in two days? Laszlo Systems, Inc. - Proprietary and Confidential
Safari Syllogism: too good to be true? • OpenLaszlo apps compiled to DHTML run in Safari. • The iPhone has Safari. • Therefore, OpenLaszlo apps run on the iPhone • “Hello, iPhone” <canvas width="320" height="356" bgcolor="white"> <text y="50" x="10" fontsize="36” fontstyle="bold">hello, iPhone</text> <view x="170" y="240" resource="../resources/laszlologo.gif" /> </canvas> Laszlo Systems, Inc. - Proprietary and Confidential
Appropriate Abstraction • Write code at the level of the things that you want to show • OL programming model matches how we talk & think about web applications Laszlo Systems, Inc. - Proprietary and Confidential
An OpenLaszlo App: newsmatch Laszlo Systems, Inc. - Proprietary and Confidential
Why use OpenLaszlo? • Fun to prgoram • Impedance matches service-oriented architectures and ajax • Easy to get something up fast • Possible to tweak almost all of it • Laszlo apps compile to multiple runtimes • Major DHTML browsesr (IE 6/7, Firefox, Safari) • Flash Player 7/8/9 Laszlo Systems, Inc. - Proprietary and Confidential
Loose glue & fluid development • OpenLaszlo nurtures/rewards correspondence between <view> and XML data structures • <views> are what you draw when you draw wireframes • XML is data • Data bindingis how you glue together <views> and data Laszlo Systems, Inc. - Proprietary and Confidential
Data Binding • Xml feed from provider: <item> <title>Ice clings to barbed-wire and grass stems Monday morning, Sept. ...</title> <media:content url="http://d.yimg.com/etc"/> </item> • Laszlo code to represent an item from an rss feed: <class name="rssitem"> <view name="thumbnail” source="$path{'content/@url'}"/> <text datapath="title[1]/text()" /> </class> <rssitem datapath="rss:/rss/channel/item[1]” /> • What you see: Laszlo Systems, Inc. - Proprietary and Confidential
Data Binding and Replication <rss> <channel> <item><title>Ice clings to barbed-wire and grass stems </title></item> <item><title>An artist makes a clay idol…</title></item> <item><title>A Palestinian boy uses a homemade sparkler…</title></item> <item><title>Two people reach for eachother</title></item> </channel> </rss> <view> <rssitem datapath="rss:/rss/channel/item[1-12]" width="320" /> <simplelayout axis=“y” </view> Laszlo Systems, Inc. - Proprietary and Confidential
JavaScript for complex / quick behaviors • Insert javascript almost anywhere • Local & global name scopes • Events for user interaction • Events for dependencies • JavaScript can express everything in lzx • And more! • Get set call fly! Laszlo Systems, Inc. - Proprietary and Confidential
Motion and Layout • Swoop, swoosh please • Animators • Constraints • Basic layouts are built-in • row, column, wrapping, border • Designed for the things you want to do with web applications • Or, write your own Laszlo Systems, Inc. - Proprietary and Confidential
Faster, Pussycat! • Lots of ways to speed things up • Trim data • XSLT! • Faster apparent startup: splash-magic • Defer downloads • Fewer constraints • Configure server to gzip javascript Laszlo Systems, Inc. - Proprietary and Confidential
“Tell me more…” • www.openlaszlo.org • Live iPhone app: • http://labs.openlaszlo.org/ipdc/awip03/ • Source code: • http://svn.openlaszlo.org/labs/newsmatch/ • “How do I spell Laszlo?” • “Ell ay ess, zee ell oh!” Laszlo Systems, Inc. - Proprietary and Confidential