380 likes | 395 Views
WISE06. 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. Complete Web Application. Flow + Presentation. What is a portlet?.
E N D
WISE06 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
Complete Web Application Flow + Presentation What is a portlet? “Portlets are user-facing, multi-step interactive Web Services that can be plugged into third-party applications” Business Logic 2Hand Car Database Data Search for Cars
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
PORTAL TASK ORCHESTRATION RENDERING EXO TASK PIM <<merge>> PSM
DeliciousStore ISIWOK ACM DBLP The task model abstracts from the portlet realisation
TASK PORTAL ORCHESTRATION RENDERING EXO ORCHESTRATION PIM <<merge>> PSM
STATE TRANSITION DIAGRAMS Workflow support required
STD for orchestration modelling STD = states + transitions • 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
PaperSearch AuthorSearch CiteSeerSearch DBLPSearch 2AuthorSearch Orchestration model IEEESearch ACMSearch
Browser Search PaperSearch 2Search IEEESearch deliciousStore ACMSearch 2Delicious 2ISI 2Paper Search 2AuthorSearch ISIWoK CiteSeerSearch DBLPSearch AuthorSearch Orchestration model
Orchestration metamodel < UML metamodel >
TASK ORCHES TRATION PORTAL RENDERING EXO RENDERING PIM <<merge>> PSM
Portal rendering • Structure of the portal • Presentation of the portal Pages Aesthetics
Portal rendering. Pages • For our purposes, a page is the set of portlets that are rendered concurrently • That is, a STATE CONFIGURATION
State configurations. Example Page1={Browser, Search, PaperSearch, IEEESearch,ACMSearch} Page2={Browser,Search,AuthorSearch,DBLPSearch,citeSeerSearch} Page3= { Browser, deliciousStore } Page4= { Browser, ISIWoK }
Portal rendering From the STD portal pages (structure), and navigation among the pages are generated automatically
2Search 2Paper Search 2AuthorSearch State configurations. Example Include an anchor in the page Page1={Browser, Search, PaperSearch, IEEESearch,ACMSearch} Page2= { Browser, Search, AuthorSearch, DBLPSearch, citeSeerSearch } Page3= { Browser, deliciousStore } Page4= { Browser, ISIWoK }
page state2page mapping event configuration rendering parameters + controller Portal pages Fragment sets comming from portlets + anchors Dependiente plataforma anchor anchor2event Modelo de diseño
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 • WindowAppDescriptorand 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
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;…}
Portal aesthetics. Example No reuse No abstraction Page1 = { Browser, Search, PaperSearch, IEEESearch,ACMSearch} 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;…}
Solution • Use the state hierarchy to structure presentation parameters • This implies • associating presentation parameters to states • supporting parameter inheritance along the state hierarchy
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} Browser Search PaperSearch 2Search IEEESearch deliciousStore ACMSearch 2Delicious 2ISI 2Paper Search 2AuthorSearch ISIWoK CiteSeerSearch DBLPSearch AuthorSearch Portal rendering. Aesthetics AcademicBrowser
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} Browser Search PaperSearch 2Search IEEESearch deliciousStore ACMSearch 2Delicious 2ISI 2Paper Search 2AuthorSearch ISIWoK CiteSeerSearch AnchorAppDescriptor {background=green} WindowAppDescriptor {background=white; fontFamily=courier} AnchorAppDescriptor { } DBLPSearch AuthorSearch Portal rendering. Aesthetics AcademicBrowser
TASK ORCHES TRATION RENDER ING PORTAL EXO EXO PIM <<merge>> PSM
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
TASK ORCHES TRATION RENDER ING PORTAL PIM <<merge>> EXO PSM
TASK ORCHES TRATION RENDER ING PORTAL PIM <<merge>> EXO PSM
From PIM to PSM: transformation rules • RubyTL has been choosen • Based on Ruby • Permits: • recursive rules • code generation • Full code is generated !!
Transformation process STD + Rendering Descriptors STD transition distribution position Presentation parameters ToConfiguration presentationDef ConfigurationSet TRANSFORM TRANSFORM skin-config.xml browser-config.xml browser.css browser-pages.xml browser-navigation.xml
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 • …
Contact Arantza Irastorza arantza.irastorza@ehu.es Oscar Díaz oscar.diaz@ehu.es http://www.onekin.org