What is OpenLaszlo, and what's it good for?

OpenLaszlo is an open source platform for developing user friendly web based applications, which work identically across all popular browsers and platforms (Windows, Mac, Linux, IE, Firefox, Safari, etc). It's ideal for presenting and editing raw XML data generated by PHP and other web services.

OpenLaszlo supports a rich graphics model with scalable vectors, bitmaps, movies, animation, transparency, fonts, audio, streaming media, reusable components, user interface widgets, control panels, property sheets, keyboard navigation, browser "back button" navigation, as well as advanced WYSIWYG text and graphical editing tools. In other words, OpenLaszlo is the velvet glove for the iron fist of PHP. What can OpenLaszlo do?

Laszlo Mail

Laszlo Mail

Laszlo Mail is a great example of an advanced and robust mainstream OpenLaszlo application. EarthLink has deployed Laszlo Mail to millions of their customers, and Laszlo Systems also offers a free demo of Laszlo Mail for anyone to try. Be sure to check out the contact details, search interface, the WYSIWYG email editor, spelling checker, and how the user interface adapts as you resize the window.

Pandora

Pandora Music Discovery Service

The Pandora music discovery service is based on the music genome project, and it uses OpenLaszlo to implement a slick, easy to use interface for listening to your personalized internet radio stations via streaming MP3 audio. The service it available for free with advertisements, or by subscription without ads. Pandora's CTO, Tom Conrad, wrote on his blog about why they chose to use OpenLaszlo:

"Eight months ago when we sat down to figure out how were were going to deliver a compelling zero-install discovery and listening experience across Windows, Mac, and Linux in record time we considered everything you can imagine: plain old HTML, AJAX, Flex, OpenLaszlo to name just a few. In the end, Laszlo was the clear winner on all fronts. Mature, reliable, and the perfect tool for the job. This outcome was only remarkable in that the decision was made by some of the most capable AJAX developers on the planet. I'll have more to say about Laszlo in another post, but for now I just want to publicly say thanks to the great team at Lazslo. Pandora wouldn't be Pandora without you. (Tags: pandora, openlaszlo, ajax)"

Pie Menus

OpenLaszlo Pie Menu

Pie menus are a naturally efficient user-interface technique -- directional menu selection of pie slice-shaped targets. OpenLaszlo is perfect for developing reusable interface components such as pie menus, which are easily incorporated into Laszlo applications, and described and configured with XML. I've ported my open source JavaScript pie menu code to OpenLaszlo, and rewritten it to take advantage of Laszlo features like Flash graphics and animation, constraints, events, prototype customization, and XML data binding. I'm using the Laszlo pie menus in my own OpenLaszlo applications, including the Sims Content Catalog, the von Neumann 29 State Cellular Automata, and an experiment comparing Pie Menus -vs- Linear Menus. Here is the open source Laszlo Pie Menu Component Source Code, a live Laszlo Pie Menu Demo, and the Laszlo Pie Menu Demo Source Code, so you can see how easy it is to plug and play with Laszlo component, and define pie menus in XML.

Laszlo Explorer

OpenLaszlo Explorer

More live demos of open source example Laszlo applications are available online from Laszlo Systems, and their full source code and documentation is included with the free OpenLaszlo distribution. The Laszlo Reference Manual is itself a Laszlo application with many embedded live examples. And Laszlo in 10 Minutes with the Laszlo Explorer is one of the most amazing and educational hands-on demos: it walks you through key features of Laszlo, and actually lets you experiment with the example code, make changes, dynamically compile and instantly see the results as a running application.

What's the Future of OpenLaszlo?

OpenLaszlo is designed to use open standards, and built with open source tools and technologies. It's a high level architecture designed to target multiple rendering environments, and the first one it currently supports is Flash.

OpenLaszlo's platform independent architecture gives it the ability to target other runtime environments like DHTML, Java, XUL, Avalon, SVG, open source Flash players, cell phones and other embedded devices, as they become more powerful and mature. The Platform Roadmap describes the development goals and progress towards the next major release, which will include support for multiple runtimes, and many architectural improvements.

LZPIX OpenLaszlo DHTML AJAX Application

OpenLaszlo has announced that DHTML is the first alternative runtime.

LZPIX is an advanced AJAX photo sharing application that demonstrates how the same OpenLaszlo source code can be identically deployed with DHTML or Flash.

OpenLaszlo on a Cell Phone

OpenLaszlo applications can run on cell phones with the Flash 7 compatible Flash Lite 2 player for mobile devices, like the Nokia 6680.

Why Flash Now?

The Flash player itself is not open source, but it's freely available, often pre-installed, and widely deployed on 97% of user desktops. Its advantage over DHTML is that it's perfectly consistent across all platforms, and seamlessly supports many advanced multimedia features.

How Does OpenLaszlo Relate to Flash?

While OpenLaszlo takes advantage of Flash, it also gives you independence from it. Because of its architecture, it's not tied to Flash the way Macromedia Flex is. It will support future versions of Flash, as well as other platforms as they become more widespread. The Flash authoring tool may be used to develop content for OpenLaszlo applications, but it is not required.

What are Flash's Limitations?

Flash does not have a JavaScript source code compiler or interpreter built into the player. The Laszlo compiler and Flash authoring tool both translate JavaScript source code into byte code instructions (like Java), and combine them with multimedia resources into a binary SWF files, that the Flash player can execute.

The Flash player can only read a limited set of multimedia data types, with certain restrictions. Other data types must be transcoded or pre-converted into formats directly supported by Flash, like SWF and JPEG files. The new Flash player version 8 supports other formats like GIF, PNG and progressive JPEG, but it's wise to support older versions of the Flash player, when possible.

It has an XML parser, but it doesn't have native support for other XML standards like XPath or XSLT, like many web browsers. The OpenLaszlo runtime supports XPath, and provides data binding as an alternative to XSLT.

Security restrictions prevent the Flash player from fetching XML from hosts other than the one it downloaded the SWF file from. It requires a crossdomain.xml permission file to exist on other servers from which Flash downloads content or calls web services. This can be a problem for implementing interfaces to web services that you don't have control over, that don't support crossdomain.xml.

The solution is for the OpenLaszlo Server or PHP to act as a proxy for other servers. An intelligent proxy can go further by transforming the data or mashing it up with other web services, databases or utilities, to provide unique and exciting new web services.

Understanding Important OpenLaszlo Concepts

OpenLaszlo application source code is written in the "LZX" language, which is XML with embedded JavaScript code. Laszlo programs can also include reusable component libraries and resources in various formats such as audio, images, SWF vector graphics, animations, movies, fonts, rich text and XML data. The OpenLaszlo Server provides a compiler that translates text LZX programs, libraries and binary resources into binary SWF files that the Flash player can execute directly.

OpenLaszlo Server Features

The OpenLaszlo server has many features: dynamically compile, debug and optimize OpenLaszlo programs; act as a proxy for OpenLaszlo applications, so the Flash player can communicate with other servers; perform XML-RPC and SOAP calls; send and receive messages over persistent connections with other clients; transform XML into an efficient binary representation; transcode various file formats into SWF files that the Flash player can digest directly.

"SOLO" Mode

Networked OpenLaszlo applications can take advantage of the OpenLaszlo Server by running in "proxied mode". And you can also develop applications that run independently in "SOLO Mode" (Standalone OpenLaszlo Output). SOLO applications talk directly to your PHP server, or other XML web services like Flikr, Google Maps, etc. Self-contained OpenLaszlo programs can run without any network server at all. They can even be deployed as desktop applications.

XML Data

OpenLaszlo uses XML data for structuring programs, reusable component libraries, class definitions, resources, declaring JavaScript classes, methods and attributes, creating and configuring objects and data bindings. XML datasets can be efficiently precompiled into OpenLaszlo programs, or asynchronously downloaded from web services, and then automatically bound to JavaScript objects.

JavaScript Code

OpenLaszlo uses JavaScript code for defining scripts and method bodies, event handlers, attribute expressions (automatically updated constraints!), as well as representing objects, XML structures and graphical views as JavaScript dictionaries. Laszlo represents and manipulates XML as JavaScript object dictionaries, and has a sophisticated asynchronous XML data binding system that uses two-way constraints to tie the properties of JavaScript objects together with XML data, and drive the creation and replication of intelligent data bound Laszlo views.

Declarative Programming

Declarative programming is an elegant way of writing code that describes what to do, instead of how to do it. OpenLaszlo supports declarative programming in many ways: using XML to declare JavaScript classes, create object instances, configure them with automatic constraints, and bind them to XML datasets. Declarative programming dovetails and synergizes with other important OpenLaszlo techniques including objects, prototypes, events, constraints, data binding and instance first development.

Constraints

Constraints in OpenLaszlo are object attributes whose values are defined as functions of other object or XML data attributes. They're used to configure the relationships between objects, their attributes, and XML data. Like a spreadsheet, Laszlo conveniently keeps track of all dependencies, and automatically updates constraints when the values they depend on change. Constraints can refer to object attributes with JavaScript expressions, and also XML data with XPath expressions.

Automatic constraints are a wonderful feature, for the same reason that automatic garbage collection is great. They save programmers a huge amount of tedious error-prone effort and repetitive coding, by automatically and reliably performing intricate housekeeping tasks. They also make the code much more readable and concise, by letting you express what to do, instead of how to do it (which is the essence of declarative programming).

XML Data Binding

XML data bindings are XPath based constraints that create two-way connections between object attributes and XML data. When an XML data bound attribute is changed, the XML data and all constraints that depend on it are updated, so it's easy to implement automatic updating of multiple XML data views and editors.

XML data bindings can also cause the replication of exemplary Laszlo objects (prototypes), so you can declare how one object will look in terms of an XML element, and it will automatically replicate a separate instance for each XML element in the dataset.

Debugging OpenLaszlo Applications

To interactively explore and debug an OpenLaszlo application, run it with debugging enabled, by opening its URL with the "debug=true" parameter:

http://localhost/lzxnet/my-apps/helloworld.lzx?debug=true

That will load the application and open a Laszlo Debugger window, with an input text field at the bottom. First, click on the "Hello World" button to make sure it works. Then click in the text field at the bottom of the debugger window, type "responseText", and press return. The text you entered will be echoed in green, and then the debugger will print out the object as a blue hyperlink. Then, click in the debugger window on the object link "<<LzText#0| #responseText>>", and it will print out the attributes of the JavaScript object:

OpenLaszlo Debugger

All the blue attributes are links that you can click on, to examine their values. Try clicking on the "parent" attribute to look at the root canvas object, "<<LzCanvas#4| This is the canvas>>". Then you can explore the canvas's attributes, and look at all the JavaScript data structures that make up the application.

You can type JavaScript expressions into the debugger, and it will compile the expression and print out the result. You can type "responseText.visible" and press return, to see the current value of the visible attribute. Then enter the command "responseText.setAttribute('visible', false)", and notice that the responseText message disappears from the screen. Press the "Hello World" button again, and it will reappear!

The interactive debugger is an extremely powerful (and fun) tool for testing and debugging OpenLaszlo programs. The debugger window will show any runtime errors and warning messages in red text. You should always test out your programs in debug mode, and fix any problems that cause warnings or errors.

Another useful debugging technique is calling "Debug.write('message', value, ...)". That function takes any number of arguments of any type, and it prints them out to the debugger window, showing any object or array values you pass as blue hypertext links. That makes it easy to click on the debugger log to examine objects of interest.

Spice up PHP applications with OpenLaszlo

Nicholas Chase an I have just written a three part tutorial for the IBM DeveloperWorks web site, about using OpenLaszlo and PHP to develop a distributed Knock Knock Joke (Ha! or Not!) application.

This "Spice up PHP applications with OpenLaszlo" tutorial series shows you how to use OpenLaszlo to create a more interactive interface for your PHP applications and how to use PHP to create more dynamic OpenLaszlo applications. It requires a basic understanding of -- or willingness to learn -- XML, JavaScript, and PHP. Each is well worth knowing for its own merits, plus they plug and play together nicely, since they're all based on synergistic open standards.

This series chronicles the creation of a rating system for knock-knock jokes ("Ha! or Not!"). Part 1 has been published, and the others are in the pipeline and will appear soon.

Part 1 talks about the knock-knock protocol, discusses ReSTian protocol design, and covers the creation of the basic PHP application and a simple OpenLaszlo interface, with graphics and sound, for that application.

Part 2 will discuss deployment options, and show the creation of the OpenLaszlo application as a stand-alone piece that can be deployed on any Web server and communicate directly with a PHP application.

Part 3 expands the application to create a system in which PHP stores the jokes and votes in an SQL database, and creates the OpenLaszlo code dynamically.

You will learn about PHP and OpenLaszlo, how to set up the development environment, and create a basic OpenLaszlo application that will serve as an interface for a joke rating service. OpenLaszlo is a free XML/JavaScript-based Web application programming language that enables you to write interactive multimedia applications that can ultimately be deployed to the browser in many ways. Currently, the target environment is a Flash movie, playable on virtually any modern browser without user intervention.