modeling portlet aggregation through statecharts o. díaz, a. irastorza, m. azanza, f.m. villoria...

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


What is portlet aggregation?


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

<<merge>>

EXO

PIM

PSM

TASK


ISIWOK

The task model abstracts from the portlet realisation

DBLP

DeliciousStore

ACM


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


PORTAL

TASK

ORCHESTRATION RENDERING

<<merge>>

EXO

PIM

PSM


Portal


Portlet

11..*

-text : String

HelpingText

1*

Portlet Preferences


Preference

1

1..*

10..1

ORCHESTRATION


Side-by-side integration… is not enough


Workflow support required


Workflow support required

STATE

TRANSITION

DIAGRAMS


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


Orchestration model

PaperSearch

IEEESearch

ACMSearch

AuthorSearch

CiteSeerSearch

DBLPSearch

2AuthorSearch


Orchestration model

2AuthorSearch

2PaperSearch

SearchPaperSearch

IEEESearch

AuthorSearch

CiteSeerSearch

DBLPSearch

deliciousStore

2Delicious

2Search

ISIWoK

2ISIACMSearch

Browser


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 >


PORTAL

TASKORCHESTRATION

RENDERING

<<merge>>

EXO

PIM

PSM


Portal


Portlet

11..*

-text : String

HelpingText

1*

Portlet Preferences


Preference

1

1..*

10..1

StateMachine

0..1

1..*


State

-name

Transition

FinalState

-name

Vertex

Region0..1

* 1 *

0..1

*

-source

1 *

-target

1 *

Behavior


Pseudostate

StateConfiguration

11..*

0..1

-exit-doActivity

Trigger

Constraint

0..1

0..1

-entry

0..1

0..1

0..1

0..1* RENDERING


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


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


anchor2event state2page

map

ping

configuration

pageanchor

Portal pages

Fragment sets comming from

portlets + anchors

rendering parameters+

cont

rolle

r

event


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


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;…}


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


Solution

Use the state hierarchy to structure presentation parameters

This implies

• associating presentation parameters to states

• supporting parameter inheritance along the state hierarchy


AcademicBrowser


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}


AcademicBrowser


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}


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


TextAppDescriptor


PORTAL

TASKORCHESTRATION

<<merge>>

EXO

PIM

PSM


Portal


Portlet

11..*

-text : String

HelpingText

1*

Portlet Preferences


Preference

1

1..*

10..1

StateMachine

0..1

1..*


State

-name

Transition

FinalState

-name

Vertex

Region0..1

* 1 *

0..1

*

-source

1 *

-target

1 *

Behavior


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




PortalAppDescriptor


WindowAppDescriptor

-override : Boolean

AnchorAppDescriptor


Anchor1..*1


TextAppDescriptor

EXO


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


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


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


PORTAL

TASKORCHESTRATION

<<merge>>

EXO

PIM

PSM


Portal


Portlet

11..*

-text : String

HelpingText

1*

Portlet Preferences


Preference

1

1..*

10..1

StateMachine

0..1

1..*


State

-name

Transition

FinalState

-name

Vertex

Region0..1

* 1 *

0..1

*

-source

1 *

-target

1 *

Behavior


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




PortalAppDescriptor


WindowAppDescriptor

-override : Boolean

AnchorAppDescriptor


Anchor1..*1


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


Portlet

Portlet Preferences


Preference

1

1..*

0..1*1

0..1


Container

0..1

*

0..1

*

**-config.xml

-componentType[1]-componentId[1]

Body

10..1

0..1

*

Page-Set


Page

1

1..*


Portlet

Portlet Preferences


Preference

1

1..*

1

0..1


Container

0..1*

0..1*

0..1

*

0..1

*

**-pages.xml

-owner[1]

Node Navigation


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


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*


PORTAL

TASKORCHESTRATION

<<merge>>

EXO

PIM

PSM


Portal


Portlet

11..*

-text : String

HelpingText

1*

Portlet Preferences


Preference

1

1..*

10..1

StateMachine

0..1

1..*


State

-name

Transition

FinalState

-name

Vertex

Region0..1

* 1 *

0..1

*

-source

1 *

-target

1 *

Behavior


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




PortalAppDescriptor


WindowAppDescriptor

-override : Boolean

AnchorAppDescriptor


Anchor1..*1


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


Portlet

Portlet Preferences


Preference

1

1..*

0..1*1

0..1


Container

0..1

*

0..1

*

**-config.xml

-componentType[1]-componentId[1]

Body

10..1

0..1

*

Page-Set


Page

1

1..*


Portlet

Portlet Preferences


Preference

1

1..*

1

0..1


Container

0..1*

0..1*

0..1

*

0..1

*

**-pages.xml

-owner[1]

Node Navigation


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


Container-Class


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*


From PIM to PSM: transformation rules

RubyTL has been choosen

• Based on Ruby

• Permits:

– recursive rules

– code generation

Full code is generated !!


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


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 [email protected]

Oscar Dí[email protected]

http://www.onekin.org

modeling portlet aggregation through statecharts o. díaz, a. irastorza, m. azanza, f.m. villoria...

Documents

exitdoact daz

portlet realisationo

portlet preferencesname1

modeling portlet aggregation

portletbased portals

villoriatask metamodelid

groups n

user interactionatomic