ajax swing flash jazoon07
Post on 22-Apr-2015
6.986 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
Server Server
Ajax Flash SwingClient
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
FlashAjaxExternalInterface
Flex Ajax Bridge
Copyright © Canoo Engineering AG 7
ExternalInterface
• Flash AjaxExternalInterface.call(jsFunctionName [,param])
• Ajax FlashExternalInterface.addCallback(ID, AS3Function)
Copyright © Canoo Engineering AG 8
ExternalInterface – Example
• Code and demo• Hybridstore
Copyright © Canoo Engineering AG 9
flexApp = document.getElementById('flexApp');...flexApp.setCamera(camera.checked);...function setSelectedPhone(name, price) {
name.innerHTML = name;price.innerHTML = price;
}
catalog.swf
hybridstore.html
Ajax
Copyright © Canoo Engineering AG 10
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
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
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
Copyright © Canoo Engineering AG 13
Mixing Swing & Ajax
• Usage of Java Browser component• E.g. JDIC, JRex, WebRenderer
Swing AjaxJavaScript
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
SwingGoogleMap
Swing & Ajax – Example I
JDIC WebBrowser
Native Browser Engine
map.html
Copyright © Canoo Engineering AG 17
Zoom In
ActionListener
JDIC WebBrowser
Google Map
executeScriptmap.zoomInmap.getZoom
Swing & Ajax – Example II
Copyright © Canoo Engineering AG 18
NavBar
JS2JavaEventHandler
JDIC WebBrowser
Google Map
JS2JavaEvent document.location
EventListener
setLocationmouseMove
Swing & Ajax – Example III
Copyright © Canoo Engineering AG 19
Mixing Swing & Flash – jFlash
• Integration with Java Flash player• e.g. jFlash
Swing FlashJava API
External API
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
JFlashHybridStore
JFlash
IE Flash Plugin
store.swf
Copyright © Canoo Engineering AG 24
Swing & Flash – Example II
ActionListener
JFlash
Store
callExternalAPIActiveX.CallFunction
<invoke …
Camera
Copyright © Canoo Engineering AG 25
Swing & Flash – Example III
JS2JavaEventHandler
JFlash
Store
ExternalInterface.call
NavBar
JFlashEvent
<invoke…
JFlashEventHandler
JS2JavaEvent
setSelectedPhone
EventHandler
ThumbnailClickedEvent
Copyright © Canoo Engineering AG 26
Mixing Swing & Flash – JDIC
Swing
JavaScript
URL loading
FlashJavaScript
ExternalInterface
FABridge
Copyright © Canoo Engineering AG 27
Swing & Flash – Example• Demo• JDICHybridStore
Copyright © Canoo Engineering AG 28
Swing & Flash – Example I
JDICHybridStore
JDIC WebBrowser
Native Browser
store.html
Copyright © Canoo Engineering AG 29
ActionListener
Store
<invoke …
Camera
JDIC WebBrowser
store.htmlexecuteScriptflexApp.setCamera..
Swing & Flash – Example II
Copyright © Canoo Engineering AG 30
JS2JavaEventHandler
JDIC WebBrowser
Store
ExternalInterface.call
NavBar
JS2JavaEvent
setSelectedPhoneEventHandler
ClickedEvent
store.html
document.location
Swing & Flash – Example III
Copyright © Canoo Engineering AG 31
All platforms supported Internet Explorer Flash plugin
Open source Commercial
JavaScript ActiveXControl
java.awt.Component java.awt.Component
JDIC JFlash
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/
top related