1. Modeling portlet aggregation through statecharts O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria ONEKIN Research group University of the Basque Country San Sebastián (Spain) 25 october 2006 WISE06

2. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 2 What is a portlet? 2Hand Car Database Search for Cars “Portlets are user-facing, multi-step interactive Web Services that can be plugged into third-party applications” Flow + Presentation Business Logic Data Complete Web Application

3. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 3 What is portlet aggregation?

4. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 4 How to design portlet-based portals?  Portlets are Web components Presentation is included  Challenge on portlet orchestration portal engines not yet prepared depends on the vendor at hand  This calls for a MDA approach

5. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 5 PORTAL TASKORCHESTRATION RENDERING > EXO PIM PSM TASK

6. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 6 ISIWOK The task model abstracts from the portlet realisation DBLP Delicious Store ACM

7. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 7 Task metamodel

8. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 8 PORTAL TASK ORCHESTRATION RENDERING > EXO PIM PSM ORCHESTRATION

9. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 9 Side-by-side integration… is not enough

10. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 10 Workflow support required

11. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 11 Workflow support required STATE TRANSITION DIAGRAMS

12. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 12 STD for orchestration modelling  Transition: abstraction of a user interaction  Atomic state: a visualization unit (e.g. a portlet)  AND state: groups “n” concurrently active states  OR state: groups “n” disjoint states STD = states + transitions

13. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 13 Orchestration model PaperSearch IEEESearch ACMSearch AuthorSearch CiteSeerSearch DBLPSearch 2Author Search

14. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 14 Orchestration model 2Author Search 2Paper Search PaperSearch IEEESearch AuthorSearch CiteSeerSearch DBLPSearch deliciousStore 2Delicious 2Search ISIWoK 2ISI ACMSearch Browser

15. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 15 Orchestration metamodel

16. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 16 PORTAL TASK ORCHES TRATION RENDERING > EXO PIM PSM RENDERING

17. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 17 Portal rendering  Structure of the portal  Presentation of the portal Pages Aesthetics

18. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 18 Portal rendering. Pages  For our purposes, a page is the set of portlets that are rendered concurrently  That is, a STATE CONFIGURATION

19. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 19 State configurations. Example Page 1 ={Browser, Search, PaperSearch, IEEESearch,ACMSearch} Page 2 ={Browser,Search,AuthorSearch,DBLPSearch,citeSeerSearch} Page 3 = { Browser, deliciousStore } Page 4 = { Browser, ISIWoK }

20. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 20 Portal rendering From the STD portal pages (structure), and navigation among the pages are generated automatically

21. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 21 State configurations. Example Page 1 ={Browser, Search, PaperSearch, IEEESearch,ACMSearch} Page 2 = { Browser, Search, AuthorSearch, DBLPSearch, citeSeerSearch } Page 3 = { Browser, deliciousStore } Page 4 = { Browser, ISIWoK } 2Author Search 2Paper Search 2Search Include an anchor in the page

22. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 22 anchor2event state2page mapping configuration page anchor Portal pages Fragment sets comming from portlets + anchors Dependiente plataforma rendering parameters + controller Modelo de diseño event

23. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 23 Portal rendering. Aesthetics  PortalAppDescriptor Describes the external shape, i.e. the structure, which the set of portlets and anchors will be rendered to the user with  WindowAppDescriptor and AnchorAppDescriptor Describe the external shape which the portlets and anchors included in the portal will be rendered to the user with Describe the presentation aesthetics of the content of the portlets and anchors

24. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 24 Portal aesthetics. Example Page2 = {Browser, Search, AuthorSearch, DBLPSearch, citeSeerSearch } PortalAppDescriptor {transition=anchor; distribution=detached; position=top; backgrd=white;…} WindowAppDescriptor {alignment=row; background=yellow; borderColor=orange; fontFamily=times; color=black; fontSize=12pt; fontStyle=normal; …} AnchorAppDescriptor { background=orange; fontFamily=arial; color=black; fontSize=10pt;…}

25. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 25 Portal aesthetics. Example PortalAppDescriptor {transition=anchor; distribution=detached; position=top; backgrd=white;…} WindowAppDescriptor {alignment=column; background=white; borderColor=blue ; fontFamily=courier ; color=black; fontSize=12pt; fontStyle=normal; …} AnchorAppDescriptor { background=orange; fontFamily=arial; color=black; fontSize=10pt;…} Page1 = { Browser, Search, PaperSearch, IEEESearch,ACMSearch } No reuse No abstraction

26. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 26 Solution  Use the state hierarchy to structure presentation parameters  This implies associating presentation parameters to states supporting parameter inheritance along the state hierarchy

27. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 27 AcademicBrowser Portal rendering. Aesthetics 2Author Search 2Paper Search PaperSearch IEEESearch AuthorSearch CiteSeerSearch DBLPSearch deliciousStore 2Delicious 2Search ISIWoK 2ISI ACMSearch Browser PortalAppDescriptor {transition=anchor; distribution=detached; position=top; background=white; borderStyle=none; borderColor=transparent; borderWidth=0px} WindowAppDescriptor {alignment=column; background=yellow; borderStyle=solid; borderColor=blue; borderWidth=4px; fontFamily=times; color=black; fontSize=12pt; fontStyle=normal; textAlign=justify} AnchorAppDescriptor { background=orange; borderStyle=none; borderColor=transparent; borderWidth=0px; fontFamily=arial; color=black; fontSize=10pt; fontStyle=italic; textAlign=justify}

28. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 28 AcademicBrowser Portal rendering. Aesthetics 2Author Search 2Paper Search PaperSearch IEEESearch AuthorSearch CiteSeerSearch DBLPSearch deliciousStore 2Delicious 2Search ISIWoK 2ISI ACMSearch Browser WindowAppDescriptor { background=white ; fontFamily=courier } AnchorAppDescriptor { } PortalAppDescriptor {transition=anchor; distribution=detached; position=top; background=white; borderStyle=none; borderColor=transparent; borderWidth=0px} WindowAppDescriptor {alignment=column; background=yellow ; borderStyle=solid; borderColor=blue; borderWidth=4px; fontFamily=times ; color=black; fontSize=12pt; fontStyle=normal; textAlign=justify} AnchorAppDescriptor { background=orange ; borderStyle=none; borderColor=transparent; borderWidth=0px; fontFamily=arial; color=black; fontSize=10pt; fontStyle=italic; textAlign=justify} AnchorAppDescriptor { background=green }

29. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 29 Rendering metamodel

30. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 30 PORTAL TASK ORCHES TRATION > EXO PIM PSM RENDER ING EXO

31. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 31 eXo platform  Offers a common core, extensible and configurable, for the portal construction www.exo.org  The functionality, structure, orchestration and rendering of the portal are described through configuration files: browser-config.xml browser-pages.xml browser-navigation.xml skin-config.xml browser.css

32. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 32 eXo metamodels

33. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 33 PORTAL TASK ORCHES TRATION > EXO PIM PSM RENDER ING

34. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 34 PORTAL TASK ORCHES TRATION > EXO PIM PSM RENDER ING

35. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 35 From PIM to PSM: transformation rules  RubyTL has been choosen Based on Ruby Permits: –recursive rules –code generation  Full code is generated !!

36. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 36 ToConfiguration TRANSFORM ConfigurationSet transition distribution position presentationDef Presentation parameters skin-config.xml browser.css browser-config.xml STD Transformation process browser-navigation.xml STD + Rendering Descriptors browser-pages.xml

37. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 37 Conclusions  Contributions Portlet aggregation modeled through STDs State hierarchy used to arrange presentation parameters (skin-like approach) Mappings provided to the eXo as a PSM  Advantages Those derived from MDA –Portability –Improved quality –Reduced cost –…

38. O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 38 Contact Arantza Irastorza arantza.irastorza@ehu.es Oscar Díaz oscar.diaz@ehu.es http://www.onekin.org