0
ChameRIA          Improving User Experience by Infusing             Web Technologies into DesktopsAlice Murphy, Clément Es...
ChameRIA    Chameria is a term used today    mostly by Albanians for parts of the    coastal region of Epirus in southern ...
ChameRIA       OW2 Chameleon    Rich Internet Application+                          =
Chame + RIA = ChameRIAOW2   ameleon   Rich Internet Application
Chame + RIAOW2     ameleon         Rich Internet Application                        Une pile logiciel ?      Service Catal...
Chame + RIAOW2     ameleon         Rich Internet Application      Service Catalog       Frameworks                        ...
Chame + RIAOW2     ameleon         Rich Internet Application      Service Catalog                              RoSe       ...
Chame + RIAOW2     ameleon              Rich Internet Application                        JSON,      Service Catalog   Synd...
Chame + RIA         OW2      ameleon            Rich Internet Application                                     JSON,       ...
Chame + RIAOW2      ameleon          Rich Internet Application                                                 JavaScript ...
Chame + RIAOW2      ameleon          Rich Internet Application                                                     JavaScr...
Chame + RIAOW2      ameleon                   Rich Internet Application                                                   ...
Chame + RIAOW2      ameleon                    Rich Internet Application                                                  ...
Chame + RIAOW2       ameleon          Rich Internet Application Service Catalog                             Web           ...
Chame + RIA  OW2       ameleon          Rich Internet Application   Service Catalog                             Web       ...
Pour quoi faire !          Swing   Modularity                  ThreadingJava UI   QT      Adaptation
Pour quoi faire !          Swing   Modularity                  ThreadingJava UI   QT      Adaptation          SWT     Manu...
Pour quoi faire !              Swing   Modularity                      Threading    Java UI   QT      Adaptation          ...
Pour quoi faire !Java UI + OSGi  ●    Pas de concept de service  ●    Réutilisation  ●    Maintenance  ●    Connaissance  ...
Pour quoi faire !
Pour quoi faire !    WEB UI + OSGi           WEB●  Concept de service●  Pas besoin de connaissances OSGi pour lUI●  Meille...
Pour quoi faire !
Pour quoi faire !     WEB UI + OSGi               WEB●  Concept de service●  Pas besoin de connaissances OSGi pour lUI●  M...
ChameRIA  OW2       ameleon        Rich Internet Application   Service Catalog                           Web              ...
Comment ?Combiner une passerelle OSGi avec Webkit
Comment ?
Comment ?1   Business logic in Java    ●        iPOJO components are POJOs
Comment ?1   Business logic in Java    ●        iPOJO components are POJOs2   UI is fully realized in web technologies    ...
Comment ?1   Business logic in Java    ●        iPOJO components are POJOs2   UI is fully realized in web technologies    ...
Comment ?
Comment ?
Comment ?
Comment ?Intégratation du WebKit ?1   Launcher    ●   Wrap the WebKit et le framework OSGi
Comment ?Intégratation du WebKit ?1   Launcher    ●   Wrap the WebKit et le framework OSGi2   WebViewFactory composant    ...
Comment ?Web User Interface - hubu1   Modèle à composant pour JavaScript    ●   Interaction basé sur des contrats   hubu  ...
Comment ?Web User Interface - hubu                 creationhub                        hub.registerComponent               ...
Comment ?<script src =”http://../jquery−latest.js”/><script src =” hubu. js”/>                    hubu<script src =” backe...
Comment ?<script src =”http://../jquery−latest.js”/><script src =” hubu. js”/>                    hubu<script src =” backe...
Comment ? hub . registerComponent ( backendComponent ( ) , {   component_name : ’ user ’ }) .registerComponent ( frontendC...
Comment ? hub . registerComponent ( backendComponent ( ) , {   component_name : ’ user ’ }) .registerComponent ( frontendC...
Comment ?var myComponent = function() {    /** Private part (members and functions) **/    return {        /** Component I...
Comment ?Intégration des composants WUI !1   Emballé dans un bundle !    ●   Et publier comme ressources via HttpService  ...
Comment ?Intégration des composants WUI !1   Emballé dans un bundle !    ●   Et publier comme ressources via HttpService2 ...
Comment ?Logique applicative !1   Bundles !    ●   Unité de déploiement
Comment ?Logique applicative !1   Bundles !    ●   Unité de déploiement2   iPOJO component !    ●   Un composant est un PO...
Comment ?@Component ( name=” acme.hello.component ” )@Provides // Provide HelloServicepublic class MyComponent implements ...
Comment ?Communication entre OSGi et WUI !1   RoSe !    ●   Injection de connecteurs    ●   Séparation des préoccupations ...
Comment ?”machine ” : { …   ”connection” : [       ”out” : {           ”servicefilter” : ” ( objectClass=acme.HelloService...
Comment ?...var jsonrpc = new JSONRpcClient(”/JSON−RPC”);var greeting = jsonrpc.helloService.hello(”Dave ”);$(’#greeting’)...
Comment ?Protocoles/standards supporté1   JSON-RPC (jabsorb)2   XML-RPC (Apache XML-RPC)3   JAX-RS (Jersey – export seulem...
Comment ?Protocoles/standards supporté
Comment ?Changements dynamique et couplage !                       ●                           BC: Business Logic componen...
Comment ?Bonne pratiques !1   All communication between the server and client is    contract-based and done through the us...
Comment ?Bonne pratiques !1   All communication between the server and client is    contract-based and done through the us...
Comment ?Bonne pratiques !1   All communication between the server and client is    contract-based and done through the us...
Chame + RIAOW2       ameleon          Rich Internet Application Service Catalog                             Web           ...
Expérience !Application de gestion de vannes deau
Expérience !Lecteur de document (avec DRM)
Conclusion1   Rhino plutôt que webkit et injection direct des    services dans la VM de Rhino !?
Conclusion1   Rhino plutôt que webkit et injection direct des    services dans la VM de Rhino !?2   Vers des applications ...
Merci !ChameRIA & Hubu●    http://github.com/akquinetChameleon & RoSe●    http://chameleon.ow2.org/●    http://github.com/...
Upcoming SlideShare
Loading in...5
×

Chame RIA

359

Published on

Modern applications are able to adapt their architecture dynamically in order to tackle requirements, correctives and context changes. Such dynamism is often an echo of complexity and is not well supported by traditional client and user software stacks making complex the design, implementation and maintenance of the end user interface. Meanwhile, the web has seen the emergence of user interface technologies (e.g. HTML5, CSS3, JavaScript) widely adopted by developers to create highly flexible user interfaces. However, such clients are intrinsically bound to run on a web browser which is out of the control of the application.

In this talk, we present ChameRIA, an application framework where a browser engine is reified as a component within the framework, thus allowing for better control over the rendering engine. We describe how we preserve a clear separation of concerns between the user interface and the application logic while maintaining coherence between them. We discuss how ChameRIA has been successfully used in two projects: a DRM document reader and a valve control application.

Jonathan Bardin, Laboratoire d'Informatique de Grenoble

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
359
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Chame RIA"

  1. 1. ChameRIA Improving User Experience by Infusing Web Technologies into DesktopsAlice Murphy, Clément Escoffier Philippe Lalanda, Jonathan Bardin akquinet AG Université de Grenoble & LIG Berlin, Germany Grenoble, France
  2. 2. ChameRIA Chameria is a term used today mostly by Albanians for parts of the coastal region of Epirus in southern Albania and northwestern Greece. http://en.wikipedia.org/wiki/Chameria
  3. 3. ChameRIA OW2 Chameleon Rich Internet Application+ =
  4. 4. Chame + RIA = ChameRIAOW2 ameleon Rich Internet Application
  5. 5. Chame + RIAOW2 ameleon Rich Internet Application Une pile logiciel ? Service Catalog Frameworks Core
  6. 6. Chame + RIAOW2 ameleon Rich Internet Application Service Catalog Frameworks OSGi runtime Core iPOJO configuration support
  7. 7. Chame + RIAOW2 ameleon Rich Internet Application Service Catalog RoSe Frameworks VisualVm OSGi runtime Core iPOJO configuration support
  8. 8. Chame + RIAOW2 ameleon Rich Internet Application JSON, Service Catalog Syndication, Chat, Twitter... RoSe Frameworks VisualVm OSGi runtime Core iPOJO configuration support
  9. 9. Chame + RIA OW2 ameleon Rich Internet Application JSON, Service Catalog Syndication, Chat, Twitter... RoSeDistributions ! Frameworks VisualVm OSGi runtime Core iPOJO configuration support
  10. 10. Chame + RIAOW2 ameleon Rich Internet Application JavaScript Service Catalog Desktop Web HTML apps apps CSS... RIA Frameworks Com Core protocols
  11. 11. Chame + RIAOW2 ameleon Rich Internet Application JavaScript Service Catalog Desktop Web HTML apps apps CSS... RIA Frameworks Com Core protocols JSON-RPC HTTP/1.1 ...
  12. 12. Chame + RIAOW2 ameleon Rich Internet Application JavaScript Service Catalog Desktop Web HTML apps apps CSS... Flash client RIA Frameworks Browser ... Com Core protocols JSON-RPC HTTP/1.1 ...
  13. 13. Chame + RIAOW2 ameleon Rich Internet Application Hubu JavaScript Service Catalog Desktop Web HTML apps apps CSS... Flash client RIA Frameworks Browser ... Com Core WebKit protocols JSON-RPC HTTP/1.1 ...
  14. 14. Chame + RIAOW2 ameleon Rich Internet Application Service Catalog Web Desktop + apps apps RIA Frameworks Com Core protocols
  15. 15. Chame + RIA OW2 ameleon Rich Internet Application Service Catalog Web Desktop + apps apps RIA Frameworks Com Core protocolsMais pourquoi Ok ... comment
  16. 16. Pour quoi faire ! Swing Modularity ThreadingJava UI QT Adaptation
  17. 17. Pour quoi faire ! Swing Modularity ThreadingJava UI QT Adaptation SWT Manual Object Deallocation
  18. 18. Pour quoi faire ! Swing Modularity Threading Java UI QT Adaptation SWT Manual Object Deallocation+ OSGi =
  19. 19. Pour quoi faire !Java UI + OSGi ● Pas de concept de service ● Réutilisation ● Maintenance ● Connaissance en OSGi pour faire lUI
  20. 20. Pour quoi faire !
  21. 21. Pour quoi faire ! WEB UI + OSGi WEB● Concept de service● Pas besoin de connaissances OSGi pour lUI● Meilleur séparation des préoccupations● Isolation !
  22. 22. Pour quoi faire !
  23. 23. Pour quoi faire ! WEB UI + OSGi WEB● Concept de service● Pas besoin de connaissances OSGi pour lUI● Meilleur séparation des préoccupations● Isolation !● Il faut des dévloppeurs web● Il faut un browser Hors du contrôle de lapplication Manque de fiabilité et de confort pour lutilisateur
  24. 24. ChameRIA OW2 ameleon Rich Internet Application Service Catalog Web Desktop + apps apps RIA Frameworks Com Core protocolsMais pourquoi Ok ... comment
  25. 25. Comment ?Combiner une passerelle OSGi avec Webkit
  26. 26. Comment ?
  27. 27. Comment ?1 Business logic in Java ● iPOJO components are POJOs
  28. 28. Comment ?1 Business logic in Java ● iPOJO components are POJOs2 UI is fully realized in web technologies ● JavaScript, HTML, CSS …
  29. 29. Comment ?1 Business logic in Java ● iPOJO components are POJOs2 UI is fully realized in web technologies ● JavaScript, HTML, CSS …3 Follow Service-Oriented Component principles ● Contract-based communication ● Service availability can change at runtime ● ...
  30. 30. Comment ?
  31. 31. Comment ?
  32. 32. Comment ?
  33. 33. Comment ?Intégratation du WebKit ?1 Launcher ● Wrap the WebKit et le framework OSGi
  34. 34. Comment ?Intégratation du WebKit ?1 Launcher ● Wrap the WebKit et le framework OSGi2 WebViewFactory composant ● Creer une nouvelle fenètre ● Fournit un BrowserService
  35. 35. Comment ?Web User Interface - hubu1 Modèle à composant pour JavaScript ● Interaction basé sur des contrats hubu ● Injection des dépendances ● Un composant = un fichier ● Communications synchrone et asynchrone ● Composant sont testables
  36. 36. Comment ?Web User Interface - hubu creationhub hub.registerComponent hubu configure hub.bind hub.start bind start hub.start hub.stop stop
  37. 37. Comment ?<script src =”http://../jquery−latest.js”/><script src =” hubu. js”/> hubu<script src =” backendComponent.js”/><script src =” f rontendComponent.js”/><!−− The contracts −−><script src =” UserServiceContract.js”/>
  38. 38. Comment ?<script src =”http://../jquery−latest.js”/><script src =” hubu. js”/> hubu<script src =” backendComponent.js”/><script src =” frontendComponent.js”/><!−− The contracts −−><script src =” UserServiceContract.js”/>
  39. 39. Comment ? hub . registerComponent ( backendComponent ( ) , { component_name : ’ user ’ }) .registerComponent ( frontendComponent ( ) , { hubu loginId : ’#login’ , logoutId : ’ #logout ’ , statusId : ’ #status’ , component_name : ’frontend’ }) // Declare a Binding .bind ({ component : ’user’ , to : ’ frontend ’ , into : ’ bind ’ , contract : UserServiceContract // The Interface }) //Start the app .start() ;}) ;
  40. 40. Comment ? hub . registerComponent ( backendComponent ( ) , { component_name : ’ user ’ }) .registerComponent ( frontendComponent ( ) , { hubu loginId : ’#login’ , logoutId : ’ #logout ’ , statusId : ’ #status’ , component_name : ’frontend’ }) // Declare a Binding .bind ({ component : ’user’ , to : ’ frontend ’ , into : ’ bind ’ , contract : UserServiceContract // The Interface }) //Start the app .start() ;}) ;
  41. 41. Comment ?var myComponent = function() { /** Private part (members and functions) **/ return { /** Component Interface **/ hubu getComponentName : function() { }, configure : function(theHub, configuration) { }, start: function() { }, stop: function() { }, // Public Interface // // Functions... }}
  42. 42. Comment ?Intégration des composants WUI !1 Emballé dans un bundle ! ● Et publier comme ressources via HttpService wui
  43. 43. Comment ?Intégration des composants WUI !1 Emballé dans un bundle ! ● Et publier comme ressources via HttpService2 WebExposer component ! ● Écoute un dossier ● Pas besoin de connaître OSGi ! wui
  44. 44. Comment ?Logique applicative !1 Bundles ! ● Unité de déploiement
  45. 45. Comment ?Logique applicative !1 Bundles ! ● Unité de déploiement2 iPOJO component ! ● Un composant est un POJO ! ● Injection des dépendances ● Cycle de vie
  46. 46. Comment ?@Component ( name=” acme.hello.component ” )@Provides // Provide HelloServicepublic class MyComponent implements HelloService { @Requires ( optional=true) // require a LogService private LogService logger; public String hello ( String name){ return ” Hello ”+name+”! ” ; } @Validate / /on validation callback private void start () { logger.log( INFO , ” HelloService started ” ) ; } @Invalidate // on invalidation callback private void stop (){ logger.log ( INFO , ” HelloService stopped” ) ; }}
  47. 47. Comment ?Communication entre OSGi et WUI !1 RoSe ! ● Injection de connecteurs ● Séparation des préoccupations ● Déclaratif (configuration) ● Dynamique
  48. 48. Comment ?”machine ” : { … ”connection” : [ ”out” : { ”servicefilter” : ” ( objectClass=acme.HelloService) ” , ”protocol” : [ ”jsonrpc” ] } ]
  49. 49. Comment ?...var jsonrpc = new JSONRpcClient(”/JSON−RPC”);var greeting = jsonrpc.helloService.hello(”Dave ”);$(’#greeting’).text(greeting);...
  50. 50. Comment ?Protocoles/standards supporté1 JSON-RPC (jabsorb)2 XML-RPC (Apache XML-RPC)3 JAX-RS (Jersey – export seulement)4 JAX-WS (Apache CXF)
  51. 51. Comment ?Protocoles/standards supporté
  52. 52. Comment ?Changements dynamique et couplage ! ● BC: Business Logic component ● SC: Service contracts ● WC: WUI component ● WV: Web view resources
  53. 53. Comment ?Bonne pratiques !1 All communication between the server and client is contract-based and done through the use of virtual objects (e.g. JSON-RPC proxies, REST virtual resources).
  54. 54. Comment ?Bonne pratiques !1 All communication between the server and client is contract-based and done through the use of virtual objects (e.g. JSON-RPC proxies, REST virtual resources).2 No part of the web client should be evoked, generated or templated from the server-side. This rules out in-line conditional HTML in JSP.
  55. 55. Comment ?Bonne pratiques !1 All communication between the server and client is contract-based and done through the use of virtual objects (e.g. JSON-RPC proxies, REST virtual resources).2 No part of the web client should be evoked, generated or templated from the server-side. This rules out in-line conditional HTML in JSP.3 The server will only implement the business logic.
  56. 56. Chame + RIAOW2 ameleon Rich Internet Application Service Catalog Web Desktop + apps apps RIA Frameworks Com Core protocols Des expériences ?
  57. 57. Expérience !Application de gestion de vannes deau
  58. 58. Expérience !Lecteur de document (avec DRM)
  59. 59. Conclusion1 Rhino plutôt que webkit et injection direct des services dans la VM de Rhino !?
  60. 60. Conclusion1 Rhino plutôt que webkit et injection direct des services dans la VM de Rhino !?2 Vers des applications WEB/Cloud ? 1 Attention aux passages à léchelle !
  61. 61. Merci !ChameRIA & Hubu● http://github.com/akquinetChameleon & RoSe● http://chameleon.ow2.org/● http://github.com/barjo/arvensis
  1. A particular slide catching your eye?

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

×