Modelado de la agregración de portlets por medio de statecharts

Modelado de la agregración de portlets por medio de

statecharts

O. Díaz, A. Irastorza, M. Azanza, F.M. VilloriaONEKIN Research group

University of the Basque Country San Sebastián (Spain)

5 octubre 2006

Jornadas de Ingeniería del Software y Bases de Datos

O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria 2

El portal como agregador de portlets


Portlets. Definición

2Hand Car Database

Search for Cars

“Los portlets son Servicios Web interactivos, con interfaz de usuario y que pueden ser incrustados en

aplicaciones de organizaciones externas”

Flow +Presentation

BusinessLogic

Data

Complete Web Application


PORTAL

TAREAS ORQUESTACIÓN VISUALIZACIÓN

<<merge>>

EXO

PIM

PSM


PORTAL

TAREAS ORQUESTACIÓN VISUALIZACIÓN

<<merge>>

EXO

PIM

PSM


Tarea: ACM portlet

ACM


ISIWOKDelicious

Store

DBLP


Metamodelo de tareas

-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

TAREAS

ORQUESTACIÓN VISUALIZACIÓN

<<merge>>

EXO

PIM

PSM


Portal


Portlet

11..*

-text : String

HelpingText

1*

Portlet Preferences


Preference

1

1..*

10..1


PORTAL

TAREAS

ORQUESTACIÓN VISUALIZACIÓN

<<merge>>

EXO

PIM

PSM


Portal


Portlet

11..*

-text : String

HelpingText

1*

Portlet Preferences


Preference

1

1..*

10..1







DIAGRAMAS

DE

TRANSICIÓN

DE ESTADOS


DTE para modelar la orquestación

Transición: abstracción de la interacción de un usuario

Estado atómico: una unidad de visualización (p.e. un portlet)

Estado AND: agrupa “n” estados activos simultáneamente

Estado OR: agrupa “n” estados disjuntos

DTE = estados + transiciones


Diseño de la orquestación del portal

PaperSearch

IEEESearch

ACMSearch

AuthorSearch

CiteSeerSearch

DBLPSearch

2AuthorSearch


Diseño de la orquestación del portal

2AuthorSearch

2PaperSearch

SearchPaperSearch

IEEESearch

AuthorSearch

CiteSeerSearch

DBLPSearch

deliciousStore

2Delicious

2Search

ISIWoK

2ISIACMSearch

Browser


Metamodelo de orquestaciónStateMachine

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*

< Metamodelo UML >


PORTAL

TAREASORQUESTACIÓN

VISUALIZACIÓN

<<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*


VISUALIZACIÓN

PORTAL

TAREASORQUESTACIÓN

<<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*


Visualización del portal

Estructura del portal

Presentación del portal

Páginas

Estética


Visualización del portal. Páginas

En nuestro contexto, una página es un conjunto de portlets que son visulizados simultáneamente

Es decir, una CONFIGURACIÓN DE ESTADOS


Configuraciones de estados. Ejemplo

Página1={Browser, Search, PaperSearch, IEEESearch,ACMSearch}

Página2 = { Browser, Search, AuthorSearch, DBLPSearch, citeSeerSearch }

Página3 = { Browser, deliciousStore }

Página4 = { Browser, ISIWoK }


Visualización del portal

Las páginas (estructura) del portal se generan automáticamente a partir del DTE

La navegación entre páginas también se deriva del DTE


Configuraciones de estados. Ejemplo

Página1={Browser, Search, PaperSearch, IEEESearch,ACMSearch}

Página2 = { Browser, Search, AuthorSearch, DBLPSearch, citeSeerSearch }



2AuthorSearch

2Search

Incrustar un ancla en la página


anchor2event state2page

map

ping

Configuración

Páginaancla

Páginas del portal

cjtos. de fragmentos que provienen de los

portlets + anclas

+ Parámetros presentación

cont

rolle

r

evento


Visualización del portal. Estética

PortalAppDescriptor • Describe el formato externo, la estructura,

con el que se presentará el conjunto de los portlets y las anclas

WindowAppDescriptor y AnchorAppDescriptor

• Describen el formato externo con el que se presentarán los portlets y las anclas incluidos en el portal

• Describen la estética de presentación del contenido de los portlets y de las anclas


Página2 = {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;…}


PortalAppDescriptor {transition=anchor; distribution=detached; position=top; backgrd=white;…}WindowAppDescriptor {background=yellow; borderColor=orange; fontFamily=times;

color=black; fontSize=12pt; fontStyle=normal; …}AnchorAppDescriptor { background=orange; fontFamily=arial; color=black; fontSize=10pt;…}



PortalAppDescriptor {transition=anchor; distribution=detached; position=top; backgrd=white;…}WindowAppDescriptor {background=white; borderColor=white; fontFamily=times;

fontStyle=normal; color=yellow; fontSize=12pt; …}AnchorAppDescriptor { background=orange; fontFamily=arial; color=black; fontSize=10pt;…}


No hay reutilización

No hay abstracción


Usar la jerarquía en DTE para estructurar los parámetros de presentación

Añadir parámetros de presentación al DTE

Herencia de parámetros


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}


Metamodelo de visualización

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

TAREASORQUESTACIÓN

<<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*

VISUALIZACIÓN

13..*

-file

Banner

-file

Footer

10..1

1

0..1




PortalAppDescriptor


WindowAppDescriptor

-override : Boolean

AnchorAppDescriptor


Anchor1..*1


TextAppDescriptor


PORTAL

TAREASORQUESTACIÓN

<<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*

VISUALIZACIÓN

13..*

-file

Banner

-file

Footer

10..1

1

0..1




PortalAppDescriptor


WindowAppDescriptor

-override : Boolean

AnchorAppDescriptor


Anchor1..*1


TextAppDescriptor


Plataforma eXo

Ofrece un núcleo común extensible y configurable para la construcción de portales

La funcionalidad, estructura, orquestación y visualización del portal se describen a través de ficheros de configuración:

• browser-config.xml• browser-pages.xml• browser-navigation.xml• skin-config.xml• browser.css


<page-set xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<page renderer="PageRowRenderer" decorator="academicBrowserPageDecorator">

<owner>@owner@</owner>

<name>/home</name><title>SearchingInPapers</title><viewPermission>any</viewPermission><editPermission>owner</editPermission><container renderer="ContainerRowRenderer" decorator="academicBrowserTransparentDecorator">

<portlet renderer="PortletRenderer" decorator="ToIsiSDecorator"><portlet-style>ToIsiSStyle</portlet-style><showInfoBar>false</showInfoBar><title>Step Navigation</title><windowId>@owner@:/navigationstep/step/E5</windowId><portlet-preferences>

<preference><name>transitionTitle</name><value>2Isi</value><read-only>false</read-only>

</preference><preference>

<name>defaultPageName</name><value>SC4</value><read-only>false</read-only>

</preference></portlet-preferences>

</portlet></container><portlet renderer="PortletRenderer" decorator="acmSearchPDecorator">

<portlet-style>acmSearchPStyle</portlet-style><title>acmSearch</title><windowId>@owner@:/acmLibrary/acmLibrary/S6</windowId>

</portlet>…

</page-set>

browser-pages.xml


Metamodelos eXo (I)

-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


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

*


Metamodelos eXo (II)

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..*


Portlet

Portlet Preferences


Preference

1

1..*

1

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

TAREASORQUESTACIÓN

<<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*

VISUALIZACIÓN

13..*

-file

Banner

-file

Footer

10..1

1

0..1




PortalAppDescriptor


WindowAppDescriptor

-override : Boolean

AnchorAppDescriptor


Anchor1..*1


TextAppDescriptor


Portal Config


Portal Layout

1

1


Portlet

Portlet Preferences


Preference

1

1..*

0..1*1

0..1


Container

0..1

*

0..1

*

**-config.xml


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

TAREASORQUESTACIÓN

<<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*

VISUALIZACIÓN

13..*

-file

Banner

-file

Footer

10..1

1

0..1




PortalAppDescriptor


WindowAppDescriptor

-override : Boolean

AnchorAppDescriptor


Anchor1..*1


TextAppDescriptor


Portal Config


Portal Layout

1

1


Portlet

Portlet Preferences


Preference

1

1..*

0..1*1

0..1


Container

0..1

*

0..1

*

**-config.xml


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*

ReglasRubyTL

Colaboración Univ. Murcia


Taskmetamodel

Orchestrat. metamodel

Rendering metamodel

EXO metamodelbrowser.css

Portal

portalTitle= {portalTitle}

RootState

PortalAppDescriptor

presentationDef= “portal”

{borderStyle}{borderWidth}

{backgroundColor}{borderColor}

.{portalTitle}PageDecorator { {AttributesPD} }

.{portalTitle}CDecorator { {AttributesCD} }

.{portalTitle}TransparentDecorator { background: transparent; border-style: none }

WindowAppDescriptor

{borderStyle}{borderWidth}

{backgroundColor}{borderColor}

.{portalTitle}PDecorator { {AttributesWD} }

…

Transformaciones


TransformacionesTask

metamodelOrchestr.

metamodelRendering metamodel

EXO metamodelskin-config.xml

Portal


RootState PortalAppDescriptor

presentationDef=“portal”

<page-decorators><decorator>

<renderer-type>PageRowRenderer</renderer-type>

<style name="{portalTitle}PageDecorator" url="/…/../{portalTitle}.css"/></decorator> …

</page-decorators><portlet-decorators>

<decorator><renderer-type>PortletRenderer</renderer-

type><style name="{portalTitle}PDecorator"

url="/…/../{portalTitle}.css"/></decorator>

</portlet-decorators> <portlet-decorators><decorator>

<renderer-type>PortletRenderer</renderer-type>

<style name="{portalTitle}AnchorDecorator“ url="/…/.../{portalTitle}.css"/>

</decorator></portlet-decorators>…


Taskmetamodel

Orchestrat.metamodel

Renderingmetamodel

EXO metamodelbrowser-pages.xml

Portal


stateConfig.RootState

name={Name}

PortalAppDescriptor

transition=”anchor”distribution=”together”

position=”top”

<page renderer="PageRowRenderer” decorator="{portalTitle}PageDecorator">

<owner>@owner@</owner><name>”/config”+{Name}+

apply_templates_select(children(RootState))</name><viewPermission>any</viewPermission><editPermission>owner</editPermission>

<container renderer="ContainerColumnRenderer”

decorator="{portalTitle}TransparentDecorator">

apply_templates_select(transition(config))

</container>

apply_templates_select(children(RootState))

</page>

Transformaciones


Conclusiones

Un método para el diseño de portales agregadores de portlets• Basado en DTEs para el comportamiento• Utiliza la jerarquía de los estados de un DTE

para definir la visualización

Enfoque MDA• Modelo complejo• Transformaciones recursivas• Se genera todo el código

¡¡¡¡ FUNCIONA !!!!


Contacto

Arantza [email protected]

http://www.onekin.org

Documents

Modelado de la agregración de portlets por medio de statecharts