ajax swing flash jazoon07

Mixing Ajax, Swingand Flash

•Sibylle Peter, Matthias Huber, Canoo AG

Copyright © Canoo Engineering AG 2

• About Canoo• Founded 1999, Basel, Switzerland• Specialized in Rich Internet Applications

Products, Solutions, Consulting and Training

http://www.canoo.com


Overview• Integration on the client• Why mix technologies?• How-tos and examples for• Ajax & Flash• Swing & Ajax• Swing & Flash


Integration on the Client

Server Server

Ajax Flash SwingClient

Server


Why mix technologies?• Best-of-breed solution• Integration of existing components• Own components• Components which exists only in one technology

• Migration of an existing internet application• ...


Mixing Ajax & Flash

FlashAjaxExternalInterface

Flex Ajax Bridge


ExternalInterface

• Flash AjaxExternalInterface.call(jsFunctionName [,param])

• Ajax FlashExternalInterface.addCallback(ID, AS3Function)


ExternalInterface – Example

• Code and demo• Hybridstore


flexApp = document.getElementById('flexApp');...flexApp.setCamera(camera.checked);...function setSelectedPhone(name, price) {

name.innerHTML = name;price.innerHTML = price;

}

catalog.swf

hybridstore.html

Ajax


catalog.mxmlprivate function setupCallbacks():void { if (ExternalInterface.available) {

ExternalInterface.addCallback("setCamera", setCamera); ...

addEventListener(ThumbnailClickedEvent.THUMBNAIL_CLICK_EVENT, setSelectedPhoneEventHandler);

}}....private function setSelectedPhoneEventHandler(

event:ThumbnailClickedEvent):void { var thumb:Thumbnail = event.thumbnail; ExternalInterface.call("setSelectedPhone",

thumb.getName(), thumb.getPrice());

}

Flex


Flex Ajax Bridge• Flex:

<fab:FABridge xmlns:fab="bridge.*" />• JavaScript:

<script type="text/javascript" src="FABridge.js"/>

FABridge.flash.root().AS3Function(...)FABridge.flash.root().addEventListener(id, JSFunction);


Interface explicitly defined Public API of the application

Only primitive types and arrays User-defined AS3 types available

Part of Flex SDK 2 Part of LifeCycle Data Services 2.5

Free unlimited usage Free usage limited on one CPU

ExternalInterface Flex Ajax Bridge


Mixing Swing & Ajax

• Usage of Java Browser component• E.g. JDIC, JRex, WebRenderer

Swing AjaxJavaScript


Mixing Swing & Ajax• Swing Ajax:

IWebBrowser.executeScript(...)

• Ajax Swing:• No API to handle JS Events

communication via proprietary URL-protocol

js2java://methodName?param1=value1&...


Swing & Ajax – Example• Demo• SwingGoogleMap


SwingGoogleMap

Swing & Ajax – Example I

JDIC WebBrowser

Native Browser Engine

map.html


Zoom In

ActionListener

JDIC WebBrowser

Google Map

executeScriptmap.zoomInmap.getZoom

Swing & Ajax – Example II


NavBar

JS2JavaEventHandler

JDIC WebBrowser

Google Map

JS2JavaEvent document.location

EventListener

setLocationmouseMove

Swing & Ajax – Example III


Mixing Swing & Flash – jFlash

• Integration with Java Flash player• e.g. jFlash

Swing FlashJava API

External API


jFlash• Uses Flash plugin of IE• Java Flash• Calls ActiveXControl.CallFunction using an API of jFlash similar to

the reflection API

• Flash Java• ExternalInterface.call(...) calls as events


External API• XML – Format of the External API

<invoke name="functionName" returntype="xml"> <arguments>

... (individual argument values) </arguments>

</invoke>


Swing & Flash – Example• Demo• JFlashHybridStore


Swing & Flash – Example I

JFlashHybridStore

JFlash

IE Flash Plugin

store.swf


Swing & Flash – Example II

ActionListener

JFlash

Store

callExternalAPIActiveX.CallFunction

<invoke …

Camera


Swing & Flash – Example III

JS2JavaEventHandler

JFlash

Store

ExternalInterface.call

NavBar

JFlashEvent

<invoke…

JFlashEventHandler

JS2JavaEvent

setSelectedPhone

EventHandler

ThumbnailClickedEvent


Mixing Swing & Flash – JDIC

Swing

JavaScript

URL loading

FlashJavaScript

ExternalInterface

FABridge


Swing & Flash – Example• Demo• JDICHybridStore


Swing & Flash – Example I

JDICHybridStore

JDIC WebBrowser

Native Browser

store.html


ActionListener

Store

<invoke …

Camera

JDIC WebBrowser

store.htmlexecuteScriptflexApp.setCamera..

Swing & Flash – Example II


JS2JavaEventHandler

JDIC WebBrowser

Store

ExternalInterface.call

NavBar

JS2JavaEvent

setSelectedPhoneEventHandler

ClickedEvent

store.html

document.location

Swing & Flash – Example III


All platforms supported Internet Explorer Flash plugin

Open source Commercial

JavaScript ActiveXControl

java.awt.Component java.awt.Component

JDIC JFlash


Summary• Ajax and Flash• Good integration support• Ongoing development (Apollo)


Summary• Integration of Ajax/Flex in Swing• Mostly low level communication• One technology (Java browser component) available to integrate

Ajax and Flash• Ajax: Communication using JavaScript-injection• Flash: Communication using callbacks / Flex Ajax Bridge


Summary• Effort• Implementation• Deployment

• Maintainance• Loose coupling• All communication code in one technology

• Mixing technologies as an alternative


• Demos and source code on our RIA Blog:• http://www.canoo.com/blog/

• Questions?


Links• Adobe• Flex 2: http://www.adobe.com/products/flex/• HybridStore: http://www.adobe.com/devnet/flex/samples/hybrid_store/

• JDIC• https://jdic.dev.java.net

• JFlash• http://sesma.com/software/products/jflash/

• Sun (Mixing heavyweight & lightweight components)• http://java.sun.com/products/jfc/tsc/articles/mixing/

• WebRenderer• http://www.webrenderer.com/

ajax swing flash jazoon07

Technology