modeling portlet aggregation through statecharts

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 Irastorzaarantza.irastorza@ehu.es

Oscar Díazoscar.diaz@ehu.es

http://www.onekin.org