4/11/23

OpenLaszlo and iPhone:Open Standards Can Look Cool

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.”

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

Laszlo Systems, Inc. - Proprietary and Confidential4

OpenLaszlo 4: Multiple Runtimes

lzx code

OpenLaszlo compiler

dhtml swf bytecodes svg

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?

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>

Laszlo Systems, Inc. - Proprietary and Confidential7

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

Laszlo Systems, Inc. - Proprietary and Confidential9

An OpenLaszlo App: newsmatch

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

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

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.

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.

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!

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

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

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!”