Upload
crystal-oliver
View
215
Download
0
Tags:
Embed Size (px)
Citation preview
Modeling portlet aggregation through statecharts
O. Díaz, A. Irastorza, M. Azanza, F.M. VilloriaONEKIN Research group
University of the Basque Country San Sebastián (Spain)
25 october 2006
WISE06
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
BusinessLogic
Data
Complete Web Application
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 3
What is portlet aggregation?
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
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 5
PORTAL
TASK ORCHESTRATION RENDERING
<<merge>>
EXO
PIM
PSM
TASK
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 6
ISIWOK
The task model abstracts from the portlet realisation
DBLP
DeliciousStore
ACM
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 7
Task metamodel
-id : String-portalTitle : String-userProfile : String
Portal
-windowTitle : String-displayName : String-portletName : String-windowState : String-portletMode : String-showInfoBar : Boolean
Portlet
11..*
-text : String
HelpingText
1*
Portlet Preferences
-name[1]-read-only[0..1]-value[1..*]
Preference
1
1..*
10..1
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 8
PORTAL
TASK
ORCHESTRATION RENDERING
<<merge>>
EXO
PIM
PSM
-id : String-portalTitle : String-userProfile : String
Portal
-windowTitle : String-displayName : String-portletName : String-windowState : String-portletMode : String-showInfoBar : Boolean
Portlet
11..*
-text : String
HelpingText
1*
Portlet Preferences
-name[1]-read-only[0..1]-value[1..*]
Preference
1
1..*
10..1
ORCHESTRATION
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 9
Side-by-side integration… is not enough
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 10
Workflow support required
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 11
Workflow support required
STATE
TRANSITION
DIAGRAMS
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
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 13
Orchestration model
PaperSearch
IEEESearch
ACMSearch
AuthorSearch
CiteSeerSearch
DBLPSearch
2AuthorSearch
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 14
Orchestration model
2AuthorSearch
2PaperSearch
SearchPaperSearch
IEEESearch
AuthorSearch
CiteSeerSearch
DBLPSearch
deliciousStore
2Delicious
2Search
ISIWoK
2ISIACMSearch
Browser
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 15
Orchestration metamodelStateMachine
0..1
1..*
-isComposite-isOrthogonal-isSimple
State
-name
Transition
FinalState
-name
Vertex
Region0..1
* 1 *
0..1
*
-source
1 *
-target
1 *
Behavior
-kind : PseudoStateKind
Pseudostate
StateConfiguration
11..*
0..1
-exit-doActivity
Trigger
Constraint
0..1
0..1
-entry
0..1
0..1
0..1
0..1*
< UML metamodel >
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 16
PORTAL
TASKORCHESTRATION
RENDERING
<<merge>>
EXO
PIM
PSM
-id : String-portalTitle : String-userProfile : String
Portal
-windowTitle : String-displayName : String-portletName : String-windowState : String-portletMode : String-showInfoBar : Boolean
Portlet
11..*
-text : String
HelpingText
1*
Portlet Preferences
-name[1]-read-only[0..1]-value[1..*]
Preference
1
1..*
10..1
StateMachine
0..1
1..*
-isComposite-isOrthogonal-isSimple
State
-name
Transition
FinalState
-name
Vertex
Region0..1
* 1 *
0..1
*
-source
1 *
-target
1 *
Behavior
-kind : PseudoStateKind
Pseudostate
StateConfiguration
11..*
0..1
-exit-doActivity
Trigger
Constraint
0..1
0..1
-entry
0..1
0..1
0..1
0..1* RENDERING
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 17
Portal rendering
Structure of the portal
Presentation of the portal
Pages
Aesthetics
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
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 19
State configurations. Example
Page1={Browser, Search, PaperSearch, IEEESearch,ACMSearch}
Page2 ={Browser,Search,AuthorSearch,DBLPSearch,citeSeerSearch}
Page3 = { Browser, deliciousStore }
Page4 = { Browser, ISIWoK }
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
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 21
State configurations. Example
Page1={Browser, Search, PaperSearch, IEEESearch,ACMSearch}
Page2 = { Browser, Search, AuthorSearch, DBLPSearch, citeSeerSearch }
Page3 = { Browser, deliciousStore }
Page4 = { Browser, ISIWoK }
2AuthorSearch
Include an anchor in the page
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 22
anchor2event state2page
map
ping
configuration
pageanchor
Portal pages
Fragment sets comming from
portlets + anchors
rendering parameters+
cont
rolle
r
event
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
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 24
Portal aesthetics. ExamplePage2 = {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;…}
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
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
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 27
AcademicBrowser
Portal rendering. Aesthetics
2AuthorSearch
2PaperSearch
SearchPaperSearch
IEEESearch
AuthorSearch
CiteSeerSearch
DBLPSearch
deliciousStore
2Delicious
2Search
ISIWoK
2ISIACMSearch
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}
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 28
AcademicBrowser
Portal rendering. Aesthetics
2AuthorSearch
2PaperSearch
SearchPaperSearch
IEEESearch
AuthorSearch
CiteSeerSearch
DBLPSearch
deliciousStore
2Delicious
2Search
ISIWoK
2ISIACMSearch
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}
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 29
Rendering metamodel
13..*
-file
Banner
-file
Footer
10..1
1
0..1
-borderStyle : BorderSType-borderWidth : String-background : BackgroundCType-borderColor : ColorType-fontFamily : FontFType-fontSize : FontSType-fontStyle : FontStyleType-color : ColorType-textAlign : TextAType
AppearanceDescriptor
-transition : TransitionType-distribution : DistributionType-position : PositionType-textPosition : PositionType-presentationDef : PresentationType-alignment : AlignmentType-borderStyle : BorderSType-borderWidth : String-background : BackgroundCType-borderColor : ColorType
PortalAppDescriptor
-position : PositionType-alignment : AlignmentType
WindowAppDescriptor
-override : Boolean
AnchorAppDescriptor
-displayName : String-portletName : String
Anchor1..*1
-displayName : String-portletName : String
TextAppDescriptor
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 30
PORTAL
TASKORCHESTRATION
<<merge>>
EXO
PIM
PSM
-id : String-portalTitle : String-userProfile : String
Portal
-windowTitle : String-displayName : String-portletName : String-windowState : String-portletMode : String-showInfoBar : Boolean
Portlet
11..*
-text : String
HelpingText
1*
Portlet Preferences
-name[1]-read-only[0..1]-value[1..*]
Preference
1
1..*
10..1
StateMachine
0..1
1..*
-isComposite-isOrthogonal-isSimple
State
-name
Transition
FinalState
-name
Vertex
Region0..1
* 1 *
0..1
*
-source
1 *
-target
1 *
Behavior
-kind : PseudoStateKind
Pseudostate
StateConfiguration
11..*
0..1
-exit-doActivity
Trigger
Constraint
0..1
0..1
-entry
0..1
0..1
0..1
0..1*
RENDERING
13..*
-file
Banner
-file
Footer
10..1
1
0..1
-borderStyle : BorderSType-borderWidth : String-background : BackgroundCType-borderColor : ColorType-fontFamily : FontFType-fontSize : FontSType-fontStyle : FontStyleType-color : ColorType-textAlign : TextAType
AppearanceDescriptor
-transition : TransitionType-distribution : DistributionType-position : PositionType-textPosition : PositionType-presentationDef : PresentationType-alignment : AlignmentType-borderStyle : BorderSType-borderWidth : String-background : BackgroundCType-borderColor : ColorType
PortalAppDescriptor
-position : PositionType-alignment : AlignmentType
WindowAppDescriptor
-override : Boolean
AnchorAppDescriptor
-displayName : String-portletName : String
Anchor1..*1
-displayName : String-portletName : String
TextAppDescriptor
EXO
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
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 32
eXo metamodels
Page-Set
-owner[1]-name[1]-title[1]-viewPermission[1]-editPermission[1]-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Page
1
1..*
-windowId[1]-title[0..1]-portlet-style[0..1]-showInfoBar[0..1]-showWindowState[0..1]-showPortletMode[0..1]-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Portlet
Portlet Preferences
-name[1]-read-only[0..1]-value[1..*]
Preference
1
1..*
1
0..1
-*id[0..1]-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Container
0..1*
0..1*
0..1
*
0..1
*
**-pages.xml
-owner[1]
Node Navigation
-uri[1]-name[0..1]-label[1]-viewPermission[0..1]-editPermission[0..1]-description[0..1]-pageReference[1..*]
Node
0..1
1
0..1
*
**-navigation.xml
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 33
PORTAL
TASKORCHESTRATION
<<merge>>
EXO
PIM
PSM
-id : String-portalTitle : String-userProfile : String
Portal
-windowTitle : String-displayName : String-portletName : String-windowState : String-portletMode : String-showInfoBar : Boolean
Portlet
11..*
-text : String
HelpingText
1*
Portlet Preferences
-name[1]-read-only[0..1]-value[1..*]
Preference
1
1..*
10..1
StateMachine
0..1
1..*
-isComposite-isOrthogonal-isSimple
State
-name
Transition
FinalState
-name
Vertex
Region0..1
* 1 *
0..1
*
-source
1 *
-target
1 *
Behavior
-kind : PseudoStateKind
Pseudostate
StateConfiguration
11..*
0..1
-exit-doActivity
Trigger
Constraint
0..1
0..1
-entry
0..1
0..1
0..1
0..1*
RENDERING
13..*
-file
Banner
-file
Footer
10..1
1
0..1
-borderStyle : BorderSType-borderWidth : String-background : BackgroundCType-borderColor : ColorType-fontFamily : FontFType-fontSize : FontSType-fontStyle : FontStyleType-color : ColorType-textAlign : TextAType
AppearanceDescriptor
-transition : TransitionType-distribution : DistributionType-position : PositionType-textPosition : PositionType-presentationDef : PresentationType-alignment : AlignmentType-borderStyle : BorderSType-borderWidth : String-background : BackgroundCType-borderColor : ColorType
PortalAppDescriptor
-position : PositionType-alignment : AlignmentType
WindowAppDescriptor
-override : Boolean
AnchorAppDescriptor
-displayName : String-portletName : String
Anchor1..*1
-displayName : String-portletName : String
TextAppDescriptor
-owner[1]-locale[1]-viewPermission[0..1]-editPermission[0..1]
Portal Config
-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Portal Layout
1
1
-windowId[1]-title[0..1]-portlet-style[0..1]-showInfoBar[0..1]-showWindowState[0..1]-showPortletMode[0..1]-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Portlet
Portlet Preferences
-name[1]-read-only[0..1]-value[1..*]
Preference
1
1..*
0..1*1
0..1
-*id[0..1]-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Container
0..1
*
0..1
*
**-config.xml
-componentType[1]-componentId[1]
Body
10..1
0..1
*
Page-Set
-owner[1]-name[1]-title[1]-viewPermission[1]-editPermission[1]-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Page
1
1..*
-windowId[1]-title[0..1]-portlet-style[0..1]-showInfoBar[0..1]-showWindowState[0..1]-showPortletMode[0..1]-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Portlet
Portlet Preferences
-name[1]-read-only[0..1]-value[1..*]
Preference
1
1..*
1
0..1
-*id[0..1]-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Container
0..1*
0..1*
0..1
*
0..1
*
**-pages.xml
-owner[1]
Node Navigation
-uri[1]-name[0..1]-label[1]-viewPermission[0..1]-editPermission[0..1]-description[0..1]-pageReference[1..*]
Node
0..1
1
0..1
*
**-navigation.xml
skin-config.xmlSkin Config
Portal Decorators
-renderer-type
Decorator
-name-url
Style
Page Decorators Container Decorators Portlet Decorators
-portlet-name
Portlet-Style-Config
1 *10..1
1..* * *
1..*
10..1
1
0..11
0..1
1*
1
*
1
*
-
cssClassSet
-name[1]-background[0..1]-border-style[0..1]-border-width[0..1]-border-color[0..1]
Container-Class
-name[1]-background[0..1]-border-style[0..1]-border-width[0..1]-border-color[0..1]
Decorator-Class
-name[1]-font-family[0..1]-font-size[0..1]-font-style[0..1]-text-align[0..1]-color[0..1]
Portlet-Class
{portalTitle}.css
1 *1*1*
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 34
PORTAL
TASKORCHESTRATION
<<merge>>
EXO
PIM
PSM
-id : String-portalTitle : String-userProfile : String
Portal
-windowTitle : String-displayName : String-portletName : String-windowState : String-portletMode : String-showInfoBar : Boolean
Portlet
11..*
-text : String
HelpingText
1*
Portlet Preferences
-name[1]-read-only[0..1]-value[1..*]
Preference
1
1..*
10..1
StateMachine
0..1
1..*
-isComposite-isOrthogonal-isSimple
State
-name
Transition
FinalState
-name
Vertex
Region0..1
* 1 *
0..1
*
-source
1 *
-target
1 *
Behavior
-kind : PseudoStateKind
Pseudostate
StateConfiguration
11..*
0..1
-exit-doActivity
Trigger
Constraint
0..1
0..1
-entry
0..1
0..1
0..1
0..1*
RENDERING
13..*
-file
Banner
-file
Footer
10..1
1
0..1
-borderStyle : BorderSType-borderWidth : String-background : BackgroundCType-borderColor : ColorType-fontFamily : FontFType-fontSize : FontSType-fontStyle : FontStyleType-color : ColorType-textAlign : TextAType
AppearanceDescriptor
-transition : TransitionType-distribution : DistributionType-position : PositionType-textPosition : PositionType-presentationDef : PresentationType-alignment : AlignmentType-borderStyle : BorderSType-borderWidth : String-background : BackgroundCType-borderColor : ColorType
PortalAppDescriptor
-position : PositionType-alignment : AlignmentType
WindowAppDescriptor
-override : Boolean
AnchorAppDescriptor
-displayName : String-portletName : String
Anchor1..*1
-displayName : String-portletName : String
TextAppDescriptor
-owner[1]-locale[1]-viewPermission[0..1]-editPermission[0..1]
Portal Config
-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Portal Layout
1
1
-windowId[1]-title[0..1]-portlet-style[0..1]-showInfoBar[0..1]-showWindowState[0..1]-showPortletMode[0..1]-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Portlet
Portlet Preferences
-name[1]-read-only[0..1]-value[1..*]
Preference
1
1..*
0..1*1
0..1
-*id[0..1]-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Container
0..1
*
0..1
*
**-config.xml
-componentType[1]-componentId[1]
Body
10..1
0..1
*
Page-Set
-owner[1]-name[1]-title[1]-viewPermission[1]-editPermission[1]-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Page
1
1..*
-windowId[1]-title[0..1]-portlet-style[0..1]-showInfoBar[0..1]-showWindowState[0..1]-showPortletMode[0..1]-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Portlet
Portlet Preferences
-name[1]-read-only[0..1]-value[1..*]
Preference
1
1..*
1
0..1
-*id[0..1]-*renderer[0..1]-*decorator[0..1]-*width[0..1]-*height[0..1]
Container
0..1*
0..1*
0..1
*
0..1
*
**-pages.xml
-owner[1]
Node Navigation
-uri[1]-name[0..1]-label[1]-viewPermission[0..1]-editPermission[0..1]-description[0..1]-pageReference[1..*]
Node
0..1
1
0..1
*
**-navigation.xml
skin-config.xmlSkin Config
Portal Decorators
-renderer-type
Decorator
-name-url
Style
Page Decorators Container Decorators Portlet Decorators
-portlet-name
Portlet-Style-Config
1 *10..1
1..* * *
1..*
10..1
1
0..11
0..1
1*
1
*
1
*
-
cssClassSet
-name[1]-background[0..1]-border-style[0..1]-border-width[0..1]-border-color[0..1]
Container-Class
-name[1]-background[0..1]-border-style[0..1]-border-width[0..1]-border-color[0..1]
Decorator-Class
-name[1]-font-family[0..1]-font-size[0..1]-font-style[0..1]-text-align[0..1]-color[0..1]
Portlet-Class
{portalTitle}.css
1 *1*1*
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 !!
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 36
ToConfiguration
TRANSFORM TRANSFORM
ConfigurationSet
transitiondistributionposition
presentationDef
Presentationparameters
skin-config.xmlbrowser.cssbrowser-config.xml
STD
Transformation process
browser-navigation.xml
STD + Rendering Descriptors
browser-pages.xml
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– …
O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 38
Contact
Arantza [email protected]
Oscar Dí[email protected]
http://www.onekin.org