Weitere ähnliche Inhalte
Ähnlich wie Ajax Swing Flash Jazoon07 (20)
Kürzlich hochgeladen (20)
Ajax Swing Flash Jazoon07
- 2. 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
- 3. Copyright © Canoo Engineering AG 3
Overview
• Integration on the client
• Why mix technologies?
• How-tos and examples for
Ajax & Flash
•
Swing & Ajax
•
Swing & Flash
•
- 4. Copyright © Canoo Engineering AG 4
Integration on the Client
Swing
Client Ajax Flash
Server Server Server
- 5. 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
• ...
- 6. Copyright © Canoo Engineering AG 6
Mixing Ajax & Flash
ExternalInterface
Ajax Flash
Flex Ajax Bridge
- 7. Copyright © Canoo Engineering AG 7
ExternalInterface
• Flash Ajax
ExternalInterface.call(jsFunctionName [,param])
• Ajax Flash
ExternalInterface.addCallback(ID, AS3Function)
- 8. Copyright © Canoo Engineering AG 8
ExternalInterface – Example
• Code and demo
Hybridstore
•
- 9. 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
- 10. Copyright © Canoo Engineering AG 10
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());
}
- 11. Copyright © Canoo Engineering AG 11
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);
- 12. 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
- 13. Copyright © Canoo Engineering AG 13
Mixing Swing & Ajax
JavaScript
Swing Ajax
• Usage of Java Browser component
E.g. JDIC, JRex, WebRenderer
•
- 14. 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&...
- 15. Copyright © Canoo Engineering AG 15
Swing & Ajax – Example
• Demo
SwingGoogleMap
•
- 16. Copyright © Canoo Engineering AG 16
Swing & Ajax – Example I
map.html
SwingGoogleMap
JDIC WebBrowser
Native Browser Engine
- 17. Copyright © Canoo Engineering AG 17
Swing & Ajax – Example II
Zoom In
Google Map
ActionListener
map.zoomIn
JDIC WebBrowser
executeScript map.getZoom
- 18. Copyright © Canoo Engineering AG 18
Swing & Ajax – Example III
NavBar
Google Map
setLocation
mouseMove
JS2JavaEventHandler EventListener
JDIC WebBrowser
JS2JavaEvent document.location
- 19. Copyright © Canoo Engineering AG 19
Mixing Swing & Flash – jFlash
Java API
Swing Flash
External API
• Integration with Java Flash player
e.g. jFlash
•
- 20. 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
•
- 21. Copyright © Canoo Engineering AG 21
External API
• XML – Format of the External API
<invoke name=quot;functionNamequot; returntype=quot;xmlquot;>
<arguments>
... (individual argument values)
</arguments>
</invoke>
- 22. Copyright © Canoo Engineering AG 22
Swing & Flash – Example
• Demo
JFlashHybridStore
•
- 23. Copyright © Canoo Engineering AG 23
Swing & Flash – Example I
store.swf
JFlashHybridStore
JFlash
IE Flash Plugin
- 24. Copyright © Canoo Engineering AG 24
Swing & Flash – Example II
Camera
Store
ActionListener
ActiveX.CallFunction
JFlash
callExternalAPI <invoke …
- 25. Copyright © Canoo Engineering AG 25
Swing & Flash – Example III
NavBar Store
setSelectedPhone
ThumbnailClickedEvent
JS2JavaEventHandler
JS2JavaEvent
JFlashEventHandler EventHandler
JFlashEvent
JFlash
<invoke… ExternalInterface.call
- 26. Copyright © Canoo Engineering AG 26
Mixing Swing & Flash – JDIC
JavaScript
ExternalInterface
Swing Flash
JavaScript
FABridge
URL loading
- 27. Copyright © Canoo Engineering AG 27
Swing & Flash – Example
• Demo
JDICHybridStore
•
- 28. Copyright © Canoo Engineering AG 28
Swing & Flash – Example I
store.html
JDICHybridStore
JDIC WebBrowser
Native Browser
- 29. Copyright © Canoo Engineering AG 29
Swing & Flash – Example II
Camera
Store
ActionListener
JDIC WebBrowser
executeScript store.html
<invoke …
flexApp.setCamera..
- 30. Copyright © Canoo Engineering AG 30
Swing & Flash – Example III
NavBar Store
ClickedEvent
setSelectedPhone
EventHandler
JS2JavaEventHandler ExternalInterface.call
store.html
JDIC WebBrowser
JS2JavaEvent document.location
- 31. 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
- 32. Copyright © Canoo Engineering AG 32
Summary
• Ajax and Flash
Good integration support
•
Ongoing development (Apollo)
•
- 33. 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
•
- 34. Copyright © Canoo Engineering AG 34
Summary
• Effort
Implementation
•
Deployment
•
• Maintainance
Loose coupling
•
All communication code in one technology
•
• Mixing technologies as an alternative
- 35. Copyright © Canoo Engineering AG 35
• Demos and source code on our RIA Blog:
• http://www.canoo.com/blog/
• Questions?
- 36. 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/
•