Mixing Ajax, Swing
and 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

Copyright © Canoo Engineering AG 3
Overview
• Integration on the client
• Why mix technologies?
• How-tos and examples for
Ajax & Flash
•
Swing & Ajax
•
Swing & Flash
•

Copyright © Canoo Engineering AG 4
Integration on the Client
Swing
Client Ajax Flash
Server Server Server

Copyright © Canoo Engineering AG 5
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
• ...

Copyright © Canoo Engineering AG 6
Mixing Ajax & Flash
ExternalInterface
Ajax Flash
Flex Ajax Bridge

Copyright © Canoo Engineering AG 7
ExternalInterface
• Flash  Ajax
ExternalInterface.call(jsFunctionName [,param])
• Ajax  Flash
ExternalInterface.addCallback(ID, AS3Function)

Copyright © Canoo Engineering AG 8
ExternalInterface – Example
• Code and demo
Hybridstore
•

Copyright © Canoo Engineering AG 9
Ajax
hybridstore.html
flexApp = document.getElementById('flexApp');
...
flexApp.setCamera(camera.checked);
...
function setSelectedPhone(name, price) {
name.innerHTML = name;
price.innerHTML = price;
}
catalog.swf

Copyright © Canoo Engineering AG 10
Flex
catalog.mxml
private 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());
}

Copyright © Canoo Engineering AG 11
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);

Copyright © Canoo Engineering AG 12
ExternalInterface  Flex Ajax Bridge
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

Copyright © Canoo Engineering AG 13
Mixing Swing & Ajax
JavaScript
Swing Ajax
• Usage of Java Browser component
E.g. JDIC, JRex, WebRenderer
•

Copyright © Canoo Engineering AG 14
Mixing Swing & Ajax
• Swing  Ajax:
IWebBrowser.executeScript(...)
• Ajax  Swing:
No API to handle JS Events
•
 communication via proprietary URL-protocol
js2java://methodName?param1=value1&...

Copyright © Canoo Engineering AG 15
Swing & Ajax – Example
• Demo
SwingGoogleMap
•

Copyright © Canoo Engineering AG 16
Swing & Ajax – Example I
map.html
SwingGoogleMap
JDIC WebBrowser
Native Browser Engine

Copyright © Canoo Engineering AG 17
Swing & Ajax – Example II
Zoom In
Google Map
ActionListener
map.zoomIn
JDIC WebBrowser
executeScript map.getZoom

Copyright © Canoo Engineering AG 18
Swing & Ajax – Example III
NavBar
Google Map
setLocation
mouseMove
JS2JavaEventHandler EventListener
JDIC WebBrowser
JS2JavaEvent document.location

Copyright © Canoo Engineering AG 19
Mixing Swing & Flash – jFlash
Java API
Swing Flash
External API
• Integration with Java Flash player
e.g. jFlash
•

Copyright © Canoo Engineering AG 20
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
•

Copyright © Canoo Engineering AG 21
External API
• XML – Format of the External API
<invoke name=\"functionName\" returntype=\"xml\">
<arguments>
... (individual argument values)
</arguments>
</invoke>

Copyright © Canoo Engineering AG 22
Swing & Flash – Example
• Demo
JFlashHybridStore
•

Copyright © Canoo Engineering AG 23
Swing & Flash – Example I
store.swf
JFlashHybridStore
JFlash
IE Flash Plugin

Copyright © Canoo Engineering AG 24
Swing & Flash – Example II
Camera
Store
ActionListener
ActiveX.CallFunction
JFlash
callExternalAPI <invoke …

Copyright © Canoo Engineering AG 25
Swing & Flash – Example III
NavBar Store
setSelectedPhone
ThumbnailClickedEvent
JS2JavaEventHandler
JS2JavaEvent
JFlashEventHandler EventHandler
JFlashEvent
JFlash
<invoke… ExternalInterface.call

Copyright © Canoo Engineering AG 26
Mixing Swing & Flash – JDIC
JavaScript
ExternalInterface
Swing Flash
JavaScript
FABridge
URL loading

Copyright © Canoo Engineering AG 27
Swing & Flash – Example
• Demo
JDICHybridStore
•

Copyright © Canoo Engineering AG 28
Swing & Flash – Example I
store.html
JDICHybridStore
JDIC WebBrowser
Native Browser

Copyright © Canoo Engineering AG 29
Swing & Flash – Example II
Camera
Store
ActionListener
JDIC WebBrowser
executeScript store.html
<invoke …
flexApp.setCamera..

Copyright © Canoo Engineering AG 30
Swing & Flash – Example III
NavBar Store
ClickedEvent
setSelectedPhone
EventHandler
JS2JavaEventHandler ExternalInterface.call
store.html
JDIC WebBrowser
JS2JavaEvent document.location

Copyright © Canoo Engineering AG 31
JDIC  JFlash
All platforms supported Internet Explorer Flash plugin
Open source Commercial
JavaScript ActiveXControl
java.awt.Component java.awt.Component

Copyright © Canoo Engineering AG 32
Summary
• Ajax and Flash
Good integration support
•
Ongoing development (Apollo)
•

Copyright © Canoo Engineering AG 33
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
•

Copyright © Canoo Engineering AG 34
Summary
• Effort
Implementation
•
Deployment
•
• Maintainance
Loose coupling
•
All communication code in one technology
•
• Mixing technologies as an alternative

Copyright © Canoo Engineering AG 35
• Demos and source code on our RIA Blog:
• http://www.canoo.com/blog/
• Questions?

Copyright © Canoo Engineering AG 36
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/
•