ajax iphone openlaszlo
TRANSCRIPT
![Page 1: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/1.jpg)
4/11/23
OpenLaszlo and iPhone:Open Standards Can Look Cool
![Page 2: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/2.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential2
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.”
“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.”
![Page 3: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/3.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential3
What is OpenLaszlo?
Open source platform for building rich internet applications
lzx language : XML and JavaScriptDeclarative UI descriptions
JavaScript
Cinematic user interface Single-page experience
Animate anything
![Page 4: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/4.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential4
OpenLaszlo 4: Multiple Runtimes
lzx code
OpenLaszlo compiler
dhtml swf bytecodes svg
![Page 5: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/5.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential5
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?
![Page 6: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/6.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential6
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>
![Page 7: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/7.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential7
![Page 8: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/8.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential8
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
![Page 9: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/9.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential9
An OpenLaszlo App: newsmatch
![Page 10: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/10.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential10
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 runtimesMajor DHTML browsesr (IE 6/7, Firefox, Safari)
Flash Player 7/8/9
![Page 11: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/11.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential11
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 binding is how you glue together <views> and data
![Page 12: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/12.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential12
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:QuickTime™ and a
TIFF (Uncompressed) decompressorare needed to see this picture.
![Page 13: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/13.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential13
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>
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
![Page 14: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/14.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential14
JavaScript for complex / quick behaviors
Insert javascript almost anywhereLocal & global name scopes
Events for user interaction
Events for dependencies
JavaScript can express everything in lzxAnd more!
Get set call fly!
![Page 15: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/15.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential15
Motion and Layout
Swoop, swoosh pleaseAnimators
Constraints
Basic layouts are built-inrow, column, wrapping, border
Designed for the things you want to do with web applications
Or, write your own
![Page 16: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/16.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential16
Faster, Pussycat!
Lots of ways to speed things upTrim data
XSLT!
Faster apparent startup: splash-magic
Defer downloads
Fewer constraints
Configure server to gzip javascript
![Page 17: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/17.jpg)
Laszlo Systems, Inc. - Proprietary and Confidential17
“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!”
![Page 18: Ajax iPhone Openlaszlo](https://reader033.vdocuments.site/reader033/viewer/2022042814/55378b7d5503467c7a8b4da8/html5/thumbnails/18.jpg)