Jax07 - Mixing Ajax Swing and Flash

3,610 views

Published on

How to mix rich client application technologies

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

No Downloads
Views
Total views
3,610
On SlideShare
0
From Embeds
0
Number of Embeds
60
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Jax07 - Mixing Ajax Swing and Flash

    1. 1. Mixing Ajax, Swing und Flash Sibylle Peter, Matthias Huber, Canoo AG
    2. 2. <ul><li>Zu uns </li></ul><ul><ul><li>Java-basierte Webapplikationen </li></ul></ul><ul><ul><li>RIA-Produktentwicklung </li></ul></ul><ul><ul><li>Beratung im RIA-Umfeld </li></ul></ul><ul><ul><li>bei Canoo seit 2000/2001 </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>Zu Canoo </li></ul><ul><ul><li>Gegründet 1999, Basel /CH </li></ul></ul><ul><ul><li>R ich Internet Applications </li></ul></ul><ul><ul><ul><li>Produkte, E ntwicklung, </li></ul></ul></ul><ul><ul><ul><li>Beratung und Schulung </li></ul></ul></ul><ul><ul><li>http://www.canoo.com </li></ul></ul>
    3. 3. Übersicht <ul><li>Integration auf dem Client </li></ul><ul><li>Warum mehrere Technologien? </li></ul><ul><li>How to und Beispiele zu </li></ul><ul><ul><li>Ajax & Flash </li></ul></ul><ul><ul><li>Swing & Ajax </li></ul></ul><ul><ul><li>Swing & Flash </li></ul></ul>
    4. 4. Clientseitige Integration Server Server Ajax Flash Swing Client Server
    5. 5. Warum mehrere Technologien? <ul><li>Best-of-breed Solution </li></ul><ul><li>Integration bestehender Komponenten </li></ul><ul><ul><li>Eigene Komponenten </li></ul></ul><ul><ul><li>Komponenten, die nur in einer Technologie existieren </li></ul></ul><ul><li>Migration einer Internet-Applikation </li></ul><ul><li>... </li></ul>
    6. 6. Mixing Ajax & Flash Flash Ajax ExternalInterface Flex Ajax Bridge
    7. 7. ExternalInterface <ul><li>Flash  Ajax </li></ul><ul><ul><li>ExternalInterface.call(jsFunctionName [,param]) </li></ul></ul><ul><li>Ajax  Flash </li></ul><ul><ul><li>ExternalInterface.addCallback(ID, AS3Function) </li></ul></ul>
    8. 8. ExternalInterface - Beispiel <ul><li>Code & Demo </li></ul><ul><ul><li>Hybridstore </li></ul></ul>
    9. 9. Ajax flexApp = document.getElementById('flexApp'); ... flexApp.setCamera(camera.checked); ... function setSelectedPhone( name, price) { name.innerHTML = name; price.innerHTML = price; } catalog.swf hybridstore.html
    10. 10. Flex catalog.mxml private function setupCallbacks():void { if (ExternalInterface.available) { ExternalInterface.addCallback(&quot;setCamera&quot;, setCamera); ... addEventListener(ThumbnailClickedEvent.THUMBNAIL_CLICK_EVENT, setSelectedPhoneEventHandler); } } .... private function setSelectedPhoneEventHandler( event:ThumbnailClickedEvent):void { var thumb:Thumbnail = event.thumbnail; ExternalInterface.call(&quot;setSelectedPhone&quot;, thumb.getName(), thumb.getPrice()); }
    11. 11. Flex Ajax Bridge <ul><li>Flex: </li></ul><ul><ul><li><fab:FABridge xmlns:fab=&quot;bridge.*&quot; /> </li></ul></ul><ul><li>JavaScript : </li></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;FABridge.js&quot;/> </li></ul></ul><ul><ul><li>FABridge.flash.root().AS3Function(...) </li></ul></ul><ul><ul><li>FABridge.flash.root().addEventListener(id, JSFunction); </li></ul></ul>
    12. 12. ExternalInterface  Flex Ajax Bridge <ul><li>Explizit definierte Schnittstelle </li></ul><ul><li>Public API der Applikation </li></ul><ul><li>Nur primitive Typen und Arrays als Parameter </li></ul><ul><li>Benutzerdefinierte AS3 Typen in JS verfügbar </li></ul><ul><li>Teil von Flex 2 SDK </li></ul><ul><li>Teil von LifeCycle Data Services 2.5 </li></ul><ul><li>Unbeschränkt einsetzbar </li></ul><ul><li>Einschränkung auf 1 CPU </li></ul>
    13. 13. Mixing Swing & Ajax <ul><li>Verwendung von Java Browserkomponente </li></ul><ul><ul><li>z. B. JDIC, JRex, WebRenderer </li></ul></ul>Swing Ajax JavaScript
    14. 14. Mixing Swing & Ajax <ul><li>Swing  Ajax: </li></ul><ul><ul><li>IWebBrowser.executeScript(...) </li></ul></ul><ul><li>Ajax  Swing: </li></ul><ul><ul><li>Kein API um direkt auf JS Events zu reagieren </li></ul></ul><ul><ul><li> Kommunikation über proprietäres URL-Protokoll </li></ul></ul><ul><ul><li>js2java://methodName?param1=value1&... </li></ul></ul>
    15. 15. Swing & Ajax – Beispiel I SwingGoogleMap JDIC WebBrowser Native Browser Engine map.html
    16. 16. Swing & Ajax – Beispiel II Zoom In ActionListener JDIC WebBrowser Google Map executeScript map.zoomIn map.getZoom
    17. 17. Swing & Ajax – Beispiel III NavBar JS2JavaEventHandler JDIC WebBrowser Google Map EventListener JS2JavaEvent document.location setLocation mouseMove
    18. 18. Mixing Swing & Flash - jFlash <ul><li>Integration durch Java Flashplayer </li></ul><ul><ul><li>Z. B. jFlash </li></ul></ul>Swing Flash Java API External API
    19. 19. External API <ul><li>XML – Format von External API </li></ul><ul><ul><li><invoke name=&quot;functionName&quot; returntype=&quot;xml&quot;> </li></ul></ul><ul><ul><li><arguments> </li></ul></ul><ul><ul><li>... (individual argument values) </li></ul></ul><ul><ul><li></arguments> </li></ul></ul><ul><ul><li></invoke> </li></ul></ul>
    20. 20. Swing & Flash – Beispiel JFlashHybridStore JFlash IE Flash Plugin store.swf
    21. 21. Swing & Flash – Beispiel II ActionListener JFlash Store callExternalAPI ActiveX.CallFunction <invoke … Camera
    22. 22. Swing & Flash – Beispiel III JS2JavaEventHandler JFlash Store NavBar JFlashEventHandler EventHandler ExternalInterface.call JFlashEvent <invoke… JS2JavaEvent setSelectedPhone ThumbnailClickedEvent
    23. 23. jFlash <ul><li>Flash plugin von IE </li></ul><ul><li>Java  Flash </li></ul><ul><ul><li>Aufruf von ActiveXControl.CallFunction über reflection-ähnliches API von jFlash </li></ul></ul><ul><li>Flash  Java </li></ul><ul><ul><li>ExternalInterface.call(...) als Event </li></ul></ul>
    24. 24. Mixing Swing & Flash - JDIC Swing JavaScript URL loading Flash JavaScript ExternalInterface FABridge
    25. 25. Swing & Flash – Beispiel JDICHybridStore JDIC WebBrowser Native Browser store.html
    26. 26. Swing & Flash – Beispiel II ActionListener Store <invoke … Camera JDIC WebBrowser store.html executeScript flexApp.setCamera..
    27. 27. Swing & Flash – Beispiel III JS2JavaEventHandler JDIC WebBrowser Store ExternalInterface.call NavBar JS2JavaEvent setSelectedPhone EventHandler ClickedEvent store.html document.location
    28. 28. JDIC  JFlash <ul><li>Alle Plattformen unterstützt </li></ul><ul><li>Internet Explorer Flash Plugin </li></ul><ul><li>open source </li></ul><ul><li>Kommerziell </li></ul><ul><li>JavaScript </li></ul><ul><li>ActiveXControl </li></ul><ul><li>java.awt.Component </li></ul><ul><li>java.awt.Component </li></ul>
    29. 29. Zusammenfassung <ul><li>Ajax und Flash </li></ul><ul><ul><li>Integration gut unterstützt </li></ul></ul><ul><ul><li>Ongoing development (Apollo) </li></ul></ul>
    30. 30. Zusammenfassung <ul><li>Integration in Swing </li></ul><ul><ul><li>Kommunikation z. T. low level </li></ul></ul><ul><ul><li>Java WebBrowser für Ajax und Flash </li></ul></ul><ul><ul><li>Ajax: JavaScript-Injection </li></ul></ul><ul><ul><li>Flash: Callbacks / Flex Ajax Bridge </li></ul></ul>
    31. 31. Zusammenfassung <ul><li>Aufwand </li></ul><ul><ul><li>Implementierung </li></ul></ul><ul><ul><li>Deployment </li></ul></ul><ul><li>Wartbarkeit </li></ul><ul><ul><li>Entkopplung </li></ul></ul><ul><ul><li>Kommunikation in einer Technologie </li></ul></ul><ul><li>Technologie-Mix als valide Alternative </li></ul>
    32. 32. <ul><li>Demos und Sourcecode auf unserem RIA Blog: </li></ul><ul><ul><li>http://www. canoo .com/ blog / </li></ul></ul><ul><li>Fragen? </li></ul>
    33. 33. Links <ul><li>Adobe </li></ul><ul><ul><li>Flex 2: http://www.adobe.com/products/flex/ </li></ul></ul><ul><ul><li>HybridStore: http://www.adobe.com/ devnet /flex/samples/hybrid_store/ </li></ul></ul><ul><li>JDIC </li></ul><ul><ul><li>https://jdic.dev.java.net </li></ul></ul><ul><li>jFlash </li></ul><ul><ul><li>http://sesma.com/software/products/jflash/ </li></ul></ul><ul><li>Sun (Mixing heavyweight & lightweight components) </li></ul><ul><ul><li>http://java.sun.com/products/jfc/tsc/articles/mixing/ </li></ul></ul><ul><li>WebRenderer </li></ul><ul><ul><li>http://www. webrenderer .com/ </li></ul></ul>

    ×