ajax swing flash jazoon07
DESCRIPTION
The english version of our previous talk on integration Java, Ajax and Flash on the client.TRANSCRIPT
![Page 1: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/1.jpg)
Mixing Ajax, Swingand Flash
•Sibylle Peter, Matthias Huber, Canoo AG
![Page 2: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/2.jpg)
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
![Page 3: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/3.jpg)
Copyright © Canoo Engineering AG 3
Overview• Integration on the client• Why mix technologies?• How-tos and examples for• Ajax & Flash• Swing & Ajax• Swing & Flash
![Page 4: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/4.jpg)
Copyright © Canoo Engineering AG 4
Integration on the Client
Server Server
Ajax Flash SwingClient
Server
![Page 5: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/5.jpg)
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• ...
![Page 6: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/6.jpg)
Copyright © Canoo Engineering AG 6
Mixing Ajax & Flash
FlashAjaxExternalInterface
Flex Ajax Bridge
![Page 7: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/7.jpg)
Copyright © Canoo Engineering AG 7
ExternalInterface
• Flash AjaxExternalInterface.call(jsFunctionName [,param])
• Ajax FlashExternalInterface.addCallback(ID, AS3Function)
![Page 8: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/8.jpg)
Copyright © Canoo Engineering AG 8
ExternalInterface – Example
• Code and demo• Hybridstore
![Page 9: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/9.jpg)
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
![Page 10: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/10.jpg)
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
![Page 11: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/11.jpg)
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);
![Page 12: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/12.jpg)
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
![Page 13: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/13.jpg)
Copyright © Canoo Engineering AG 13
Mixing Swing & Ajax
• Usage of Java Browser component• E.g. JDIC, JRex, WebRenderer
Swing AjaxJavaScript
![Page 14: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/14.jpg)
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&...
![Page 15: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/15.jpg)
Copyright © Canoo Engineering AG 15
Swing & Ajax – Example• Demo• SwingGoogleMap
![Page 16: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/16.jpg)
Copyright © Canoo Engineering AG 16
SwingGoogleMap
Swing & Ajax – Example I
JDIC WebBrowser
Native Browser Engine
map.html
![Page 17: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/17.jpg)
Copyright © Canoo Engineering AG 17
Zoom In
ActionListener
JDIC WebBrowser
Google Map
executeScriptmap.zoomInmap.getZoom
Swing & Ajax – Example II
![Page 18: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/18.jpg)
Copyright © Canoo Engineering AG 18
NavBar
JS2JavaEventHandler
JDIC WebBrowser
Google Map
JS2JavaEvent document.location
EventListener
setLocationmouseMove
Swing & Ajax – Example III
![Page 19: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/19.jpg)
Copyright © Canoo Engineering AG 19
Mixing Swing & Flash – jFlash
• Integration with Java Flash player• e.g. jFlash
Swing FlashJava API
External API
![Page 20: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/20.jpg)
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
![Page 21: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/21.jpg)
Copyright © Canoo Engineering AG 21
External API• XML – Format of the External API
<invoke name="functionName" returntype="xml"> <arguments>
... (individual argument values) </arguments>
</invoke>
![Page 22: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/22.jpg)
Copyright © Canoo Engineering AG 22
Swing & Flash – Example• Demo• JFlashHybridStore
![Page 23: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/23.jpg)
Copyright © Canoo Engineering AG 23
Swing & Flash – Example I
JFlashHybridStore
JFlash
IE Flash Plugin
store.swf
![Page 24: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/24.jpg)
Copyright © Canoo Engineering AG 24
Swing & Flash – Example II
ActionListener
JFlash
Store
callExternalAPIActiveX.CallFunction
<invoke …
Camera
![Page 25: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/25.jpg)
Copyright © Canoo Engineering AG 25
Swing & Flash – Example III
JS2JavaEventHandler
JFlash
Store
ExternalInterface.call
NavBar
JFlashEvent
<invoke…
JFlashEventHandler
JS2JavaEvent
setSelectedPhone
EventHandler
ThumbnailClickedEvent
![Page 26: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/26.jpg)
Copyright © Canoo Engineering AG 26
Mixing Swing & Flash – JDIC
Swing
JavaScript
URL loading
FlashJavaScript
ExternalInterface
FABridge
![Page 27: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/27.jpg)
Copyright © Canoo Engineering AG 27
Swing & Flash – Example• Demo• JDICHybridStore
![Page 28: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/28.jpg)
Copyright © Canoo Engineering AG 28
Swing & Flash – Example I
JDICHybridStore
JDIC WebBrowser
Native Browser
store.html
![Page 29: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/29.jpg)
Copyright © Canoo Engineering AG 29
ActionListener
Store
<invoke …
Camera
JDIC WebBrowser
store.htmlexecuteScriptflexApp.setCamera..
Swing & Flash – Example II
![Page 30: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/30.jpg)
Copyright © Canoo Engineering AG 30
JS2JavaEventHandler
JDIC WebBrowser
Store
ExternalInterface.call
NavBar
JS2JavaEvent
setSelectedPhoneEventHandler
ClickedEvent
store.html
document.location
Swing & Flash – Example III
![Page 31: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/31.jpg)
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
![Page 32: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/32.jpg)
Copyright © Canoo Engineering AG 32
Summary• Ajax and Flash• Good integration support• Ongoing development (Apollo)
![Page 33: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/33.jpg)
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
![Page 34: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/34.jpg)
Copyright © Canoo Engineering AG 34
Summary• Effort• Implementation• Deployment
• Maintainance• Loose coupling• All communication code in one technology
• Mixing technologies as an alternative
![Page 35: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/35.jpg)
Copyright © Canoo Engineering AG 35
• Demos and source code on our RIA Blog:• http://www.canoo.com/blog/
• Questions?
![Page 36: Ajax Swing Flash Jazoon07](https://reader034.vdocuments.us/reader034/viewer/2022051616/553898f74a7959c36e8b478c/html5/thumbnails/36.jpg)
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/