• Home
• Platform
• Download
• Documentation
• Community
• Wiki
• Blog

From OpenLaszlo

Introduction

Here is where you introduce your proposed change.

Proposal

Overview

We need an effective way to embed SWF runtime applications into DHTML applications. Right now that would be done by using an iFrame with the DHTML application to embed an SWF runtime OpenLaszlo app (e.g. a videoplayer within a Webtop window) into it. The use case would be to add multimedia (audio/video) functionality to a DHTML application. The SWF runtime still has so many problems with embedded iFrames, that it makes sense to deploy DHTML applications - making it easier to pull in other content - with some components implemented in Flash.

Use cases

Here's the list of use cases we came up with in the discussion:

• File upload in DHTML apps with process bar
• video support in Ajax apps (single video view)
• audio support in Ajax apps (wouldn't require a visible Flash app)
• Multiple audio/video SWFs within a DHTML app (e.g., list of movies); embedding multiple SWFs will lead to performance problems, so listed as separate from simple video support in Ajax

Approaches

There are several approaches which could be taken:

1. build a light-weight mediaplayer using AS3, which then can be attached to a view in LZX, using something like a <flashview> tag
2. extend the compiler to support setting a runtime for an LZX component, e.g. <videoplayer runtime="swf" />
3. build the SWF part of the application as a normal OpenLaszlo application deployed to SWF runtime, attached to a
   tag inside an LZX view

Considerations and questions

• What kind of runtimes should be supported? FABridge would only support SWF9 apps, do we need SWF8 support?
• File size: a simple AS3 video player could be as small as 15k, much smaller than even the simplest OL app in SWF mode
• Performance: imagine an OL app in DHTML mode with a list of 20 videos; embedding 20 SWFs into one DHTML app would lead to huge performance problems. Can one SWF be shared across the DHTML app in such a situation?
• Multi-runtime LFC - can the LFC be shared across multiple OL apps in different runtimes? See RSL as well
• LFC as RSL: Flex3 supports the concept of runtime-shared libraries (RSL). If you sign your RSL you can cache it in the Flash Player across domains. That would be a good way to reduce the file size for OL SWF apps embedded into DHTML apps. Readings for RSL
  • http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:Flex_3_RSLs
  • http://www.onflex.org/ted/2007/06/flex-3-thursday-dramatically-smaller.php

Layers of a combined DHTML-SWF OpenLaszlo app

Lorien had the idea to support something like a class/component runtime switch, meaning that component only would run in SWF mode within an OL app. The APIs should be auto-exposed to the embedding application. Here's a simple diagram describing that scenario.

]

Definitions

Define your terms, so we know what you are talking about. Use this format:

Term

Definition

Changes

Describe the precise changes necessary to implement this proposal.

Examples

Some examples to aid the reader:

1. The video player example (above)
2. Video Library component which might have a number of video players and other UI elements. This use case is the reason why I like the idea of specifying runtime="swf" on the instance rather than with a class definition
3. Any component that leveraged features that work better in Flash, such as rotating text or file upload.
4. Live example using the current APIs - see http://labs.openlaszlo.org/trunk-nightly/examples/musicdhtml/index.jsp

Ajax/Flash integration in Flex

Flex Ajax Bridge

It might be valuable to investigate if we can use the FABridge for exposing OL SWF app APIs to the embedding DHTML OL app.

Official documentation of the Flex Ajax Bridge (FABridge)

FABridge Subversion Repository

From the Adobe docs:

The Flex Ajax Bridge (FABridge) is a small code library that you can insert into an Flex application, a Flex component, or an empty SWF file to expose it to scripting in the browser.

Rather than having to define new, simplified APIs to expose a graph of ActionScript objects to JavaScript, with FABridge you can make your ActionScript classes available to JavaScript without any additional coding. After you insert the library, essentially anything you can do with ActionScript, you can do with JavaScript.

Adobe Flash Player has the native ability, through the External API (the ExternalInterface class), to call JavaScript from ActionScript, and vice versa. But ExternalInterface has some limitations:

• The ExternalInterface class requires you, the developer, to write a library of extra code in both ActionScript and JavaScript, to expose the functionality of your Flex application to JavaScript, and vice versa.
• The ExternalInterface class also limits what you can pass across the gap - primitive types, arrays, and simple objects are legal, but user-defined classes, with associated properties and methods, are off-limits.
• The ExternalInterface class lets you define an interface so your JavaScript can call your ActionScript. FABridge lets you write JavaScript instead of ActionScript.

When to use the Flex Ajax Bridge

The FABridge library is useful in the following situations:

• You want to use a rich Flex component in an Ajax application but do not want to write a lot of Flex code. If you wrap the component in a FABridge-enabled stub application, you can script it entirely from JavaScript, including using JavaScript generated remotely by the server.
• You have only one or two people on your team who know Flex. The FABridge library lets everyone on your team use the work produced by one or two Flex specialists.
• You are building an integrated rich Internet application (RIA) with Flex and Ajax portions.Although you could build the integration yourself using ExternalInterface, you might find it faster to start with the FABridge.

Requirements for using Adobe's FABridge

To use the FABridge library and samples, you must have the following:

• Flex Ajax Bridge, which is included in the following directory of the Flex 3 SDK installation:

installation_dir\frameworks\javascript\fabridge

• Adobe Flex SDK
• Adobe® Flash® Player 9 or Adobe® AIR™
• Microsoft Internet Explorer, Mozilla Firefox, or Opera with JavaScript enabled
• Any HTTP server to run the samples

To run the samples:

1. Browse to the files found within the installation_dir\frameworks\javascript\fabridge
2. Place the src and samples folders side by side on any HTTP server.
3. Open a web browser to http://yourwebserver/samples/FABridgeSample.html and samples/SimpleSample.html and follow the instructions there. Make sure you access the samples through http:// URLs and not file:// URLs. The Flash Player security sandbox prevents them from working correctly when they are accessed as local files.

Current bugs listed for the FABride

Here's a permlink to the current bugs listed in the Flash Player bug database at Adobe for FABridge: FABridge bug list

Adobe Flash - Runtime Shared Libraries

If a DHTML app contains multiple embedded SWF the total download size for the combined apps could be relatively large, especially if we choose to build the SWF portion with OL. In that case, every small SWF app would contain a copy of the LFC. It sure would be good if we could re-use the LFC accross multiple SWF apps in a page, utilizing the Flex Runtime Shared Library feature.

Flex 3 RSL features

OpenLaszlo & RSL

Andre and Henry have investigated RSL for OpenLaszlo. Here are the JIRA entries:

• http://jira.openlaszlo.org/jira/browse/LPP-7377
• http://jira.openlaszlo.org/jira/browse/LPP-7387

Open standards and formats based multimedia in HTML

HTML5 <video> tag

There has been a lot of activity around the <video> tag in HTML5 lately, and impressive demos like http://www.youtube.com/watch?v=Har-PRP4X9U, showing video playback integrated into SVG in Firefox.

• https://developer.mozilla.org/En/HTML/Element/Video
• TinyVid http://tinyvid.tv/ - examples using ogg files in HTML 5.
• Interesting blog post on HTML5 video Researching the HTML 5 Video Tag

We should do a proof-of-concept for using the HTML5 video tag in a DHTML application. Mozilla/Firefox, Safari and Opera will support it in the near future. And if you have control over the system/browser combination (like TV sets or set-top-boxes with integrated browser), it will be very useful to be independent of Flash for video.

Link

• Adobe Flex Livedocs - Flash-Ajax Bridge
• Ajax Chat AJAX Chat is a free and fully customizable open source web chat software implemented in JavaScript, PHP and MySQL. Sound support is implemented using Flash, Socket support using Flash on client-side and Ruby on server-side. The project uses FABridge for the Ajax/Flash integration.
• IBM Tutorial on Ajax-Flex integration\
• SWFObject and FABridge a blog post describing what kind of problems you can run into if you combine SWFObject embed code with FABridge. Based on what I've read that should be fixed with the latest version of SWFObject, but wanted to keep that information here, just in case.
• Flash Ajax Video Component at Adobe Labs The Adobe Flash Ajax Video (FAVideo) component is a small, open source Flash component that you can use to provide video playback within an Ajax application. It exposes all of the formatting and video playback controls necessary to build a video player customized entirely using HTML and Javascript.

History

Category: DraftProposal