Ajax Swing Flash Jazoon07

4,274 views
4,201 views

Published on

The english version of our previous talk on integration Java, Ajax and Flash on the client.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,274
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
167
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajax Swing Flash Jazoon07

  1. 1. Mixing Ajax, Swing and Flash •Sibylle Peter, Matthias Huber, Canoo AG
  2. 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. 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. 4. Copyright © Canoo Engineering AG 4 Integration on the Client Swing Client Ajax Flash Server Server Server
  5. 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. 6. Copyright © Canoo Engineering AG 6 Mixing Ajax & Flash ExternalInterface Ajax Flash Flex Ajax Bridge
  7. 7. Copyright © Canoo Engineering AG 7 ExternalInterface • Flash  Ajax ExternalInterface.call(jsFunctionName [,param]) • Ajax  Flash ExternalInterface.addCallback(ID, AS3Function)
  8. 8. Copyright © Canoo Engineering AG 8 ExternalInterface – Example • Code and demo Hybridstore •
  9. 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. 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. 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. 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. 13. Copyright © Canoo Engineering AG 13 Mixing Swing & Ajax JavaScript Swing Ajax • Usage of Java Browser component E.g. JDIC, JRex, WebRenderer •
  14. 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. 15. Copyright © Canoo Engineering AG 15 Swing & Ajax – Example • Demo SwingGoogleMap •
  16. 16. Copyright © Canoo Engineering AG 16 Swing & Ajax – Example I map.html SwingGoogleMap JDIC WebBrowser Native Browser Engine
  17. 17. Copyright © Canoo Engineering AG 17 Swing & Ajax – Example II Zoom In Google Map ActionListener map.zoomIn JDIC WebBrowser executeScript map.getZoom
  18. 18. Copyright © Canoo Engineering AG 18 Swing & Ajax – Example III NavBar Google Map setLocation mouseMove JS2JavaEventHandler EventListener JDIC WebBrowser JS2JavaEvent document.location
  19. 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. 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. 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. 22. Copyright © Canoo Engineering AG 22 Swing & Flash – Example • Demo JFlashHybridStore •
  23. 23. Copyright © Canoo Engineering AG 23 Swing & Flash – Example I store.swf JFlashHybridStore JFlash IE Flash Plugin
  24. 24. Copyright © Canoo Engineering AG 24 Swing & Flash – Example II Camera Store ActionListener ActiveX.CallFunction JFlash callExternalAPI <invoke …
  25. 25. Copyright © Canoo Engineering AG 25 Swing & Flash – Example III NavBar Store setSelectedPhone ThumbnailClickedEvent JS2JavaEventHandler JS2JavaEvent JFlashEventHandler EventHandler JFlashEvent JFlash <invoke… ExternalInterface.call
  26. 26. Copyright © Canoo Engineering AG 26 Mixing Swing & Flash – JDIC JavaScript ExternalInterface Swing Flash JavaScript FABridge URL loading
  27. 27. Copyright © Canoo Engineering AG 27 Swing & Flash – Example • Demo JDICHybridStore •
  28. 28. Copyright © Canoo Engineering AG 28 Swing & Flash – Example I store.html JDICHybridStore JDIC WebBrowser Native Browser
  29. 29. Copyright © Canoo Engineering AG 29 Swing & Flash – Example II Camera Store ActionListener JDIC WebBrowser executeScript store.html <invoke … flexApp.setCamera..
  30. 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. 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. 32. Copyright © Canoo Engineering AG 32 Summary • Ajax and Flash Good integration support • Ongoing development (Apollo) •
  33. 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. 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. 35. Copyright © Canoo Engineering AG 35 • Demos and source code on our RIA Blog: • http://www.canoo.com/blog/ • Questions?
  36. 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/ •

×