Ajax Swing Flash Jazoon07

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


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


Integration on the Client

Swing
Client Ajax Flash

Server Server 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

ExternalInterface

Ajax Flash
Flex Ajax Bridge


ExternalInterface

• Flash  Ajax
ExternalInterface.call(jsFunctionName [,param])

• Ajax  Flash
ExternalInterface.addCallback(ID, AS3Function)


ExternalInterface – Example

• Code and demo
Hybridstore
•


Ajax
hybridstore.html
flexApp = document.getElementById('flexApp');
...
flexApp.setCamera(camera.checked);
...
function setSelectedPhone(name, price) {
name.innerHTML = name;
price.innerHTML = price;
}

catalog.swf


Flex
catalog.mxml
private function setupCallbacks():void {
if (ExternalInterface.available) {
ExternalInterface.addCallback(quot;setCameraquot;, setCamera);
...

addEventListener(ThumbnailClickedEvent.THUMBNAIL_CLICK_EVENT,
setSelectedPhoneEventHandler);
}
}
....
private function setSelectedPhoneEventHandler(
event:ThumbnailClickedEvent):void {
var thumb:Thumbnail = event.thumbnail;
ExternalInterface.call(quot;setSelectedPhonequot;,
thumb.getName(),
thumb.getPrice());
}


Flex Ajax Bridge
• Flex:
<fab:FABridge xmlns:fab=quot;bridge.*quot; />
• JavaScript:
<script type=quot;text/javascriptquot; src=quot;FABridge.jsquot;/>

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


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


Mixing Swing & Ajax

JavaScript
Swing Ajax

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


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
•


Swing & Ajax – Example I

map.html
SwingGoogleMap

JDIC WebBrowser

Native Browser Engine


Swing & Ajax – Example II

Zoom In
Google Map

ActionListener

map.zoomIn
JDIC WebBrowser
executeScript map.getZoom


Swing & Ajax – Example III

NavBar
Google Map
setLocation
mouseMove

JS2JavaEventHandler EventListener

JDIC WebBrowser
JS2JavaEvent document.location


Mixing Swing & Flash – jFlash

Java API
Swing Flash
External API

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


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=quot;functionNamequot; returntype=quot;xmlquot;>
<arguments>
... (individual argument values)
</arguments>
</invoke>


Swing & Flash – Example
• Demo
JFlashHybridStore
•


Swing & Flash – Example I

store.swf
JFlashHybridStore

JFlash

IE Flash Plugin


Swing & Flash – Example II

Camera
Store

ActionListener

ActiveX.CallFunction
JFlash
callExternalAPI <invoke …


Swing & Flash – Example III

NavBar Store
setSelectedPhone

ThumbnailClickedEvent
JS2JavaEventHandler

JS2JavaEvent

JFlashEventHandler EventHandler

JFlashEvent
JFlash
<invoke… ExternalInterface.call


Mixing Swing & Flash – JDIC

JavaScript
ExternalInterface

Swing Flash
JavaScript
FABridge
URL loading


Swing & Flash – Example
• Demo
JDICHybridStore
•


Swing & Flash – Example I

store.html
JDICHybridStore

JDIC WebBrowser

Native Browser


Swing & Flash – Example II

Camera
Store

ActionListener

JDIC WebBrowser

executeScript store.html
<invoke …
flexApp.setCamera..


Swing & Flash – Example III

NavBar Store

ClickedEvent
setSelectedPhone
EventHandler
JS2JavaEventHandler ExternalInterface.call

store.html

JDIC WebBrowser
JS2JavaEvent document.location


JDIC  JFlash

All platforms supported Internet Explorer Flash plugin

Open source Commercial

JavaScript ActiveXControl

java.awt.Component java.awt.Component


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

Recomendados

Recomendados

Más contenido relacionado

Similar a Ajax Swing Flash Jazoon07

Similar a Ajax Swing Flash Jazoon07 (20)

Último

Último (20)

Ajax Swing Flash Jazoon07