Home

LZPIX Demo Script

LZPIX is an application that demonstrates how the same LZX source code can be compiled by OpenLaszlo to run in either Flash or Dynamic HTML (DHTML), natively supported in most browsers. LZPIX uses LZX to enrich the user experience of Flickr, a popular photo sharing site on the web, demonstrating dynamic interaction between a rich web client and a large, complex data base containing text and photos.

Click the button labeled View Source to see the application written in LZX, a declarative mark-up language based on XML. Please refer to Laszlo in 10 minutes and the documentation at this site for more information about LZX. After reviewing the code, close the browser window and you will be back on OpenLaszlo home page.

Now click the Launch Flash button and see the application compiled to run in a Flash® plug-in. Follow the ten-steps outlined below to see OpenLaszlo capabilities featured in the application. At any point right-click the mouse and notice that you’re using the Flash player.

Once you’ve gone through the Flash application, close the browser window and click the Launch DHTML button. This shows the identical OpenLaszlo application compiled to run using native browser functions, without the use of Flash. Go through the same steps in the application and notice the same features and performance. Right-click the mouse at any point and notice there’s no Flash to be found in this version.

NOTE: LZPIX uses a pre-alpha compiler that’s optimized for Firefox v1.5, so you may experience bugs and/or performance issues with other browsers. These issues will be fixed before this function is certified for commercial application deployment.

Follow these 10 quick steps to experience LZPIX:

  1. Click on one of the preset Flickr search thumbnails or enter a search term such as "festive" and hit return. LZPIX passes this request to Flickr and displays photos tagged with the specified search term and shows the number of photos found in the upper left corner of the application.
  2. Use the Image Size Control slider in the lower right to adjust the image sizes on screen - you'll notice a seamless transition as the photos grow or shrink in size and the number of photos per screen (to the right of the slider bar will change accordingly).
  3. Use the Left and Right arrows to navigate between screens of pictures found.
  4. Select one photo, click and hold, then drag it into the CLIPS tray.
  5. Click and hold the mouse in the white space behind any photo than drag the mouse to highlight two or more photos in view. Release the mouse button and then click and hold one of the photos hightlighted; drag to the CLIPS tray and notice how they animate into a stack.
  6. Click on the [+] button on the CLIPS tray to expand and notice that, apart from the header, the rest of the application is disabled.
  7. Select an Image to view by clicking on one photo. Notice a different animation that illustrates what is happening on screen along with more relevant data from Flickr being displayed. The first photo displayed is an enlarged thumbnail, which quickly translates into a higher resolution image upon retrieval from Flickr.
  8. Select another photo from the footer to see relevant details.
  9. Click on "Hide Details" to go back to the original.
  10. Try a different search term by entering it into the text box in the header and start again, but notice how your photos are still in your CLIPS tray.