Your SlideShare is downloading. ×
0
Building complex and modularRIAs with OSGi™ and Flex®francois.fornaciari@zenika.comwww.zenika.com
Content Introduction OSGi™ and Flex® interactions Application modularization Demo Conclusion                 Mix-IT 2...
Bio Java EE / RIA consultant and trainer   × Working on Flex projects at Manpower Board member of the OSGi™ Users’ Group...
What is Flex® (1/2) Framework for building RIA  × Flash technology  × Flash Player (VM)  × Free Software Development Kit ...
What is Flex® (2/2) MXML: XML-based language ActionScript: ECMAScript-compliant  scripting Library of pre-built compone...
MXML XML-based language Declarative way to build applications   <s:Application      xmlns:fx="http://ns.adobe.com/mxml/2...
ActionScript Core of the Flex® Framework Familiar syntax    package com.zenika.flex {      public class MyClass interfac...
What is OSGi™ OSGi™ framework specifications (4.2)  × Core Specification  × Compendium Specification  × Enterprise Specif...
OSGi™ Bundles Bundle  × Deployment unit: JAR + MANIFEST  × Functional unit (provides services) Application  × Set of bun...
Bundle’s structure  Provided                                       Required                                    res  servic...
MANIFEST file # Package(s) requis Import-Package: com.zenika.interface;version=1.1.0 # Package(s) fournis Export-Package: ...
Bundle lifecycle           Mix-IT 2011 - François Fornaciari
OSGi™ Services (1/2)       Service Oriented Architecture                  Service broker   Lookup                         ...
OSGi™ Services (2/2) Java™ Interface   × Generally, the package is exported by a     dedicated bundle One or many implem...
Purpose Presentation of the main design patterns for  building complex and modular applications  with OSGi™ and Flex® Tw...
General architecture  Client (browser)                                                                  Server (Java)     ...
Handling remote calls HTTPService, WebService, Remote Objects, Consumer/Producer  × Asynchronous calls     × Result, Faul...
Service call example private function callService():void {   var service:MyService = new MyService(destination);   service...
Accessing web services (1/2) “Non-OSGi™” services Flex consumer objects  × HTTPService     × Supported methods: GET | PO...
Accessing web services (2/2) Expose OSGi™ services through the “Remote Services Specification”  × Development of OSGi™ st...
Accessing OSGi™ services In a transparent way Two communication types   × RemoteObject     × Simple call to an existing ...
AMF Protocol Action Message Format (v3)  × Binary format used to serialize ActionScript    objects     × Optimized transf...
Integration frameworks Existing open source frameworks  Name                    OSGi™ support        RemoteObject     OSG...
AMF3 for OSGi™ OSGi™ bundle description  × uk.co.arum.osgi.amf3     × Serialization-deserialization of AMF3 objects  × uk...
Apache Felix projects (1/2) Core of the server-side application  × Framework  × File Install     × Directory based OSGi™ ...
Apache Felix projects (2/2) Application-specific projects  × Event Admin Service     × OSGi™ EventHandler receives messag...
Event Admin Based on the Publish-Subscribe pattern                       postEvent                        (topics)       ...
Publishing OSGi™ services Additional service property  × AMF_SERVICE_NAME       × Instantiated with the service class nam...
Consuming OSGi™ services Flex RemoteObject  × Endpoint: AMF3 servlet path     × ex: http://localhost:8080/amf3osgi  × Des...
Type-safe objects Method arguments and result[RemoteClass(alias="com.zenika.systemmanager...SWFModule")][Bindable]public ...
Producer / Consumer (1/2) Bridge between Flex® events and  EventAdmin service Elements attributes  × Consumer: callback ...
Producer / Consumer (2/2) Destination configuration  × Set of channels used to send messages to a    target destination  ...
Sending messages (1/2) From OSGi™  × PublishedObjectEvent (channelID, object)  × Extends org.osgi.service.event.Event    ...
Sending messages (2/2) From Flex®  × Sending AsyncMessage through the producer     × Body: object to send     var message...
Receiving message (1/2)@Component(name="FlexEventHandler")@Providespublic class FlexEventHandler implements EventHandler {...
Receiving message (2/2) Start / cancel subscription Message: typed-object private function start():void {    consumer.su...
Some key elements We have seen how to:  × Interact with different communication types  × Standard web services  × Remote ...
Flex® modulesSWF FilesLoaded / unloaded at runtimeBetter encapsulationSeparated developmentsCompilation of one part of the...
Main goal OSGi™ is the Java modularity Flex® supports modules How can we build a complete modular application?         ...
Creating modules “Module” as root element  <mx:Module  xmlns:fx="http://ns.adobe.com/mxml/2009"     xmlns:s="library://ns...
Module lifecycle Start method is called when the module is  loaded Stop method is called before unloading the  module  ×...
Packaging                                         Each bundle                                             contains  Appli...
Application bundle User Interface skeleton Able to retrieve list of available modules  × OSGi™ service for getting modul...
Technical view (1/4) At startup, registers bundle resources by using the HTTP Service  × Main SWF, HTML files, … Gets re...
Technical view (2/4) Extender pattern  × Use of a BundleTracker in order to be notified    of bundles declaring Flex® mod...
Technical view (3/4)  var modules:ArrayCollection = event.result as  ArrayCollection;  for each(var module:SWFModule in mo...
Technical view (4/4) After bundle undeployment  × Call the stop method     × Stop properly on-going processes     × Warni...
Module bundle Autonomous module  × Contains its own UI and logic  × Good isolation  × Flex® modules have to be based upon...
DEMO
Conclusion (1/2) Flex®  × Development of rich interfaces  × Native support of modules     × Loading / unloading modules a...
Conclusion (2/2) Seamless communications  × Asynchronous remote calls  × Notifications Integration   × Application: set ...
References OSGi™ : www.osgi.org Apache Felix: felix.apache.org Adobe Flex® :  www.adobe.com/fr/products/flex AMF3 for ...
Questions     francois.fornaciari@zenika.com            www.zenika.com            Mix-IT 2011 - François Fornaciari
Upcoming SlideShare
Loading in...5
×

Building complex and modular RIAs with OSGi and Flex

3,591

Published on

François fornaciari @Mix-IT 2011

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
3,591
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Building complex and modular RIAs with OSGi and Flex"

  1. 1. Building complex and modularRIAs with OSGi™ and Flex®francois.fornaciari@zenika.comwww.zenika.com
  2. 2. Content Introduction OSGi™ and Flex® interactions Application modularization Demo Conclusion Mix-IT 2011 - François Fornaciari
  3. 3. Bio Java EE / RIA consultant and trainer × Working on Flex projects at Manpower Board member of the OSGi™ Users’ Group France Over the last 4 years × Participation in the refactoring of the new version of JOnAS based on OSGi™ Mix-IT 2011 - François Fornaciari
  4. 4. What is Flex® (1/2) Framework for building RIA × Flash technology × Flash Player (VM) × Free Software Development Kit (SDK) × Strong integration with Java × Tooling × Flash Builder™ : IDE based on Eclipse × IntelliJ IDEA Mix-IT 2011 - François Fornaciari
  5. 5. What is Flex® (2/2) MXML: XML-based language ActionScript: ECMAScript-compliant scripting Library of pre-built components Compiler: create SWFs from MXML/ActionScript files Mix-IT 2011 - François Fornaciari
  6. 6. MXML XML-based language Declarative way to build applications <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:Panel> <s:Label text="Label" /> <s:Button label="Button" /> </s:Panel> </s:Application> Mix-IT 2011 - François Fornaciari
  7. 7. ActionScript Core of the Flex® Framework Familiar syntax package com.zenika.flex { public class MyClass interface MyInterface { public function MyClass() { } public function doSomething():String { } } } Mix-IT 2011 - François Fornaciari
  8. 8. What is OSGi™ OSGi™ framework specifications (4.2) × Core Specification × Compendium Specification × Enterprise Specification A module system and service platform for the Java programming language Mix-IT 2011 - François Fornaciari
  9. 9. OSGi™ Bundles Bundle × Deployment unit: JAR + MANIFEST × Functional unit (provides services) Application × Set of bundles × Dynamically deployed × Potentially shared between applications Mix-IT 2011 - François Fornaciari
  10. 10. Bundle’s structure Provided Required res services classes services Exported Imported packages manifest packages Mix-IT 2011 - François Fornaciari
  11. 11. MANIFEST file # Package(s) requis Import-Package: com.zenika.interface;version=1.1.0 # Package(s) fournis Export-Package: com.zenika.service;version=2.0.0 # Identifiant du bundle : unique pour la plate-forme Bundle-SymbolicName: com.zenika.example # Version du bundle Bundle-Version: 2.1.0 # Nom du bundle Bundle-Name: Exemple # Nom de la classe Activator (l’équivalent du Main) Bundle-Activator: com.zenika.internal.Activator Mix-IT 2011 - François Fornaciari
  12. 12. Bundle lifecycle Mix-IT 2011 - François Fornaciari
  13. 13. OSGi™ Services (1/2) Service Oriented Architecture Service broker Lookup Register Specification Binding Consumer Provider Mix-IT 2011 - François Fornaciari
  14. 14. OSGi™ Services (2/2) Java™ Interface × Generally, the package is exported by a dedicated bundle One or many implementations × Packaged in a bundle × Generally not public: package not exported Identified by some properties Interface Implementation class com.zenika.device.PrintService com.zenika.printer.laser.Driver (color=true) Mix-IT 2011 - François Fornaciari
  15. 15. Purpose Presentation of the main design patterns for building complex and modular applications with OSGi™ and Flex® Two axes × Communication between Flex® and OSGi™ × Application modularization Mix-IT 2011 - François Fornaciari
  16. 16. General architecture Client (browser) Server (Java) Flex® HTTPService OSGi™ Framework WebService RemoteObject SWF Application Producer SWF Module SWF Module Consumer Bundle Bundle Bundle Mix-IT 2011 - François Fornaciari
  17. 17. Handling remote calls HTTPService, WebService, Remote Objects, Consumer/Producer × Asynchronous calls × Result, Fault or Message handlers × Arguments and result types × Strongly typed or generic objects × XML format × Properties × URL, destination, endpoint, id, … Mix-IT 2011 - François Fornaciari
  18. 18. Service call example private function callService():void { var service:MyService = new MyService(destination); service.addEventListener(ResultEvent.RESULT, onResult); service.addEventListener(FaultEvent.FAULT, onFault); service.send(); } private function onResult(event:ResultEvent):void { var result:MyObject = event.result as MyObject; ... } private function onFault(event:FaultEvent):void {...} Mix-IT 2011 - François Fornaciari
  19. 19. Accessing web services (1/2) “Non-OSGi™” services Flex consumer objects × HTTPService × Supported methods: GET | POST × HEAD | OPTIONS | PUT | TRACE | DELETE only through the server-based proxy service × WebService × Provides access to SOAP-based web services on local or remote servers Mix-IT 2011 - François Fornaciari
  20. 20. Accessing web services (2/2) Expose OSGi™ services through the “Remote Services Specification” × Development of OSGi™ standard services × Service properties for defining × SOAP-based services × RESTful JAXRS-based endpoints × Implementation: Distributed OSGi™ × Sub-project of Apache CXF Mix-IT 2011 - François Fornaciari
  21. 21. Accessing OSGi™ services In a transparent way Two communication types × RemoteObject × Simple call to an existing OSGi™ service × Strongly-typed arguments and result or … × … generic objects × Producer/Consumer × Topic subscription Mix-IT 2011 - François Fornaciari
  22. 22. AMF Protocol Action Message Format (v3) × Binary format used to serialize ActionScript objects × Optimized transferred data amount × Primarily used to exchange data between Adobe Flash applications and remote services × Specification since 2007 × Supported by many server-side languages and technologies: Java™, .NET, PHP, … Mix-IT 2011 - François Fornaciari
  23. 23. Integration frameworks Existing open source frameworks Name OSGi™ support RemoteObject OSGi™ EventAdmin bridge AMF3 for OSGi™ (LGPL) yes yes yes GraniteDS (LGPL) yes (prototype) yes (unstable) no Spring Flex (ASL) yes (Virgo) yes no AMF3 for OSGi™ (Christopher Brind) × Robust, OSGi™ compliant and easy to use × Only 3 bundles to deploy Mix-IT 2011 - François Fornaciari
  24. 24. AMF3 for OSGi™ OSGi™ bundle description × uk.co.arum.osgi.amf3 × Serialization-deserialization of AMF3 objects × uk.co.arum.osgi.amf3.http × Registers an HTTP servlet that is capable of reading and writing AMF3 objects × uk.co.arum.osgi.amf3.flex.remoting × Implements FlexRemoting over HTTP × Provides support for channel based messaging Mix-IT 2011 - François Fornaciari
  25. 25. Apache Felix projects (1/2) Core of the server-side application × Framework × File Install × Directory based OSGi™ management agent × Used internally by AMF3 for OSGi ™ × Declarative Service (SCR) × Event Admin Service × Log Service × HTTP Service (Jetty) Mix-IT 2011 - François Fornaciari
  26. 26. Apache Felix projects (2/2) Application-specific projects × Event Admin Service × OSGi™ EventHandler receives messages from Flex Producers × Messages posted by the OSGi™ EventAdmin service are received by Flex Consumers × iPOJO × Used to declare OSGi™ components × Support of annotations × Extensible handlers Mix-IT 2011 - François Fornaciari
  27. 27. Event Admin Based on the Publish-Subscribe pattern postEvent (topics) EventAdmin Publisher « service » EventHandler handleEvent « service » (topics) Mix-IT 2011 - François Fornaciari
  28. 28. Publishing OSGi™ services Additional service property × AMF_SERVICE_NAME × Instantiated with the service class name @Component(name="MyService") @Provides public class MyServiceImpl implements MyService { @ServiceProperty(name="AMF_SERVICE_NAME") private String serviceName = MyService.class.getName(); ... } Mix-IT 2011 - François Fornaciari
  29. 29. Consuming OSGi™ services Flex RemoteObject × Endpoint: AMF3 servlet path × ex: http://localhost:8080/amf3osgi × Destination: OSGi™ service class name <s:RemoteObject id="myService" endpoint="/amf3osgi" destination="com.zenika.service.MyService"> <s:method name="doSometing" result="onResult(event)" fault="onFault(event)" /> </s:RemoteObject> Mix-IT 2011 - François Fornaciari
  30. 30. Type-safe objects Method arguments and result[RemoteClass(alias="com.zenika.systemmanager...SWFModule")][Bindable]public class SWFModule Mix-IT 2011 - François Fornaciari
  31. 31. Producer / Consumer (1/2) Bridge between Flex® events and EventAdmin service Elements attributes × Consumer: callback when a message is received × Consumer and producer: destination <s:Consumer message="onMessage(event)" destination="events" fault="onFault(event)" /> <s:Producer destination="events" fault="onFault(event)" /> Mix-IT 2011 - François Fornaciari
  32. 32. Producer / Consumer (2/2) Destination configuration × Set of channels used to send messages to a target destination × QoS: many channels for network failure tolerance var channelSet:ChannelSet = new ChannelSet(); var channel:AMFChannel = new AMFChannel("events","/amf3osgi"); channel.pollingInterval = 5000; channelSet.addChannel(channel); consumer.channelSet = channelSet; Mix-IT 2011 - François Fornaciari
  33. 33. Sending messages (1/2) From OSGi™ × PublishedObjectEvent (channelID, object) × Extends org.osgi.service.event.Event @Bind public void bindEventAdmin(EventAdmin eventAdmin) { this.eventAdmin = eventAdmin; } private void sendMessage() { eventAdmin.postEvent( new PublishedObjectEvent("events", object)); } Mix-IT 2011 - François Fornaciari
  34. 34. Sending messages (2/2) From Flex® × Sending AsyncMessage through the producer × Body: object to send var message:AsyncMessage = new AsyncMessage(); message.body = messageObject; producer.send(message); Mix-IT 2011 - François Fornaciari
  35. 35. Receiving message (1/2)@Component(name="FlexEventHandler")@Providespublic class FlexEventHandler implements EventHandler { @ServiceProperty(name="event.topics") private String eventTopics = ".../amf3/flex/remoting/events/PublishedObjectEvent"; @ServiceProperty(name="event.filter") private String eventFilter = "(channel.id=events)"; public void handleEvent(Event event) { if (event instanceof PublishedObjectEvent) { ...} }} Mix-IT 2011 - François Fornaciari
  36. 36. Receiving message (2/2) Start / cancel subscription Message: typed-object private function start():void { consumer.subscribe(); } private function stop():void { consumer.unsubscribe(); } private function onMessage(event:MessageEvent):void { var msg:MyMessage = event.message.body as MyMessage; ... } Mix-IT 2011 - François Fornaciari
  37. 37. Some key elements We have seen how to: × Interact with different communication types × Standard web services × Remote Objects × Event-based messages × Expose OSGi™ services to Flex® × Handle events posted by the client-side or the backend Mix-IT 2011 - François Fornaciari
  38. 38. Flex® modulesSWF FilesLoaded / unloaded at runtimeBetter encapsulationSeparated developmentsCompilation of one part of the applicationCached by the browserMonitoring loading processCannot be run independently Mix-IT 2011 - François Fornaciari
  39. 39. Main goal OSGi™ is the Java modularity Flex® supports modules How can we build a complete modular application? Mix-IT 2011 - François Fornaciari
  40. 40. Creating modules “Module” as root element <mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" implements="...api.ModuleInterface" creationComplete="start()"> <fx:Script> <![CDATA[ public function start():void {...} public function stop():void {...} ]]> </fx:Script> <s:Label text="Label" /> </mx:Module> Mix-IT 2011 - François Fornaciari
  41. 41. Module lifecycle Start method is called when the module is loaded Stop method is called before unloading the module × Common interface between the application and the module package com.zenika.systemmanager.api { public interface ModuleInterface { function stop():void; } } Mix-IT 2011 - François Fornaciari
  42. 42. Packaging  Each bundle contains Application Module Bundle Bundle × Business logic × OSGi™ services manifest manifest × User interface × SWF file JAVA JAVA (OSGi™) (OSGi™)  Building tools like UI (SWF) UI (SWF) Maven, Ant or Gradle can ease the packaging phase Mix-IT 2011 - François Fornaciari
  43. 43. Application bundle User Interface skeleton Able to retrieve list of available modules × OSGi™ service for getting module URLs Flex® client notified when a module appears or disappears × Flex consumer is aware of events posted by the EventAdmin Mix-IT 2011 - François Fornaciari
  44. 44. Technical view (1/4) At startup, registers bundle resources by using the HTTP Service × Main SWF, HTML files, … Gets registered modules and listens to bundle arrival / departure × Implementation of the extender pattern Mix-IT 2011 - François Fornaciari
  45. 45. Technical view (2/4) Extender pattern × Use of a BundleTracker in order to be notified of bundles declaring Flex® modules × MANIFEST.MF : – SWF-Modules: [path]=[SWF name] × Register / unregister SWFs into path × Creation of a resource-aware context × Post event to notify Flex® client Mix-IT 2011 - François Fornaciari
  46. 46. Technical view (3/4) var modules:ArrayCollection = event.result as ArrayCollection; for each(var module:SWFModule in modules) { var loader:ModuleLoader = new ModuleLoader(module.url); // Register event listeners loader.addEventListener(ModuleEvent.READY, handleModuleReady); loader.addEventListener(ModuleEvent.ERROR, handleModuleError); // Start the module loading loader.load(); } Mix-IT 2011 - François Fornaciari
  47. 47. Technical view (4/4) After bundle undeployment × Call the stop method × Stop properly on-going processes × Warning: OSGi™ services have already been unregistered × Unload associated modules × Free-up memory and resources Mix-IT 2011 - François Fornaciari
  48. 48. Module bundle Autonomous module × Contains its own UI and logic × Good isolation × Flex® modules have to be based upon their own OSGi™ services × Avoid using unregistered services or managing service dynamicity on the client-side Mix-IT 2011 - François Fornaciari
  49. 49. DEMO
  50. 50. Conclusion (1/2) Flex® × Development of rich interfaces × Native support of modules × Loading / unloading modules at runtime OSGi™ × The Dynamic Module System for Java™ × Service Oriented Architecture × Service availability to Flex® Mix-IT 2011 - François Fornaciari
  51. 51. Conclusion (2/2) Seamless communications × Asynchronous remote calls × Notifications Integration × Application: set of autonomous bundles with their own interface and business logic Mix-IT 2011 - François Fornaciari
  52. 52. References OSGi™ : www.osgi.org Apache Felix: felix.apache.org Adobe Flex® : www.adobe.com/fr/products/flex AMF3 for OSGi™ : www.arum.co.uk/amf3osgi.php Mix-IT 2011 - François Fornaciari
  53. 53. Questions francois.fornaciari@zenika.com www.zenika.com Mix-IT 2011 - François Fornaciari
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×