460 likes | 612 Views
Jornadas de Ingeniería del Software y Bases de Datos. Modelado de la agregración de portlets por medio de statecharts. O. Díaz, A. Irastorza , M. Azanza, F.M. Villoria ONEKIN Research group University of the Basque Country San Sebastián (Spain) 5 octubre 2006.
E N D
Jornadas de Ingeniería del Software y Bases de Datos Modelado de la agregración de portlets por medio de statecharts O. Díaz, A. Irastorza, M. Azanza, F.M. Villoria ONEKIN Research group University of the Basque Country San Sebastián (Spain) 5 octubre 2006
Complete Web Application Flow + Presentation Portlets. Definición “Los portlets son Servicios Web interactivos, con interfaz de usuario y que pueden ser incrustados en aplicaciones de organizaciones externas” Business Logic 2Hand Car Database Data Search for Cars
PORTAL TAREAS ORQUESTACIÓN VISUALIZACIÓN EXO PIM <<merge>> PSM
PORTAL TAREAS ORQUESTACIÓN VISUALIZACIÓN EXO PIM <<merge>> PSM
ACM Tarea: ACM portlet
DeliciousStore ISIWOK DBLP
TAREAS PORTAL ORQUESTACIÓN VISUALIZACIÓN EXO PIM <<merge>> PSM
TAREAS PORTAL ORQUESTACIÓN VISUALIZACIÓN EXO PIM <<merge>> PSM
DIAGRAMAS DE TRANSICIÓN DE ESTADOS El portal como agregador de portlets
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
PaperSearch AuthorSearch CiteSeerSearch DBLPSearch 2AuthorSearch Diseño de la orquestación del portal IEEESearch ACMSearch
Browser Search PaperSearch 2Search IEEESearch deliciousStore ACMSearch 2Delicious 2ISI 2Paper Search 2AuthorSearch ISIWoK CiteSeerSearch DBLPSearch AuthorSearch Diseño de la orquestación del portal
Metamodelo de orquestación < Metamodelo UML >
TAREAS ORQUES TACIÓN PORTAL VISUALIZACIÓN EXO PIM <<merge>> PSM
TAREAS ORQUES TACIÓN VISUALIZACIÓN PORTAL EXO PIM <<merge>> PSM
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
2Search 2Paper Search 2AuthorSearch Configuraciones de estados. Ejemplo Incrustar un ancla en la página Página1={Browser, Search, PaperSearch, IEEESearch,ACMSearch} Página2= { Browser, Search, AuthorSearch, DBLPSearch, citeSeerSearch } Página3= { Browser, deliciousStore } Página4= { Browser, ISIWoK }
ancla Página state2page mapping evento Configuración Parámetros presentación + controller Páginas del portal cjtos. de fragmentos que provienen de los portlets + anclas Dependiente plataforma anchor2event Modelo de diseño
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 • WindowAppDescriptory 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;…}
Página3 = { Browser, deliciousStore} 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;…}
Página4 = { Browser, ISIWoK} No hay reutilización No hay abstracción 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;…}
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
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 Visualización del portal. Estética 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 Visualización del portal. Estética AcademicBrowser
TAREAS ORQUES TACIÓN VISUALI ZACIÓN PORTAL EXO PIM <<merge>> PSM
TAREAS ORQUES TACIÓN VISUALI ZACIÓN PORTAL EXO PIM <<merge>> PSM
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
TAREAS ORQUES TACIÓN VISUALI ZACIÓN PORTAL PIM <<merge>> EXO PSM
TAREAS ORQUES TACIÓN VISUALI ZACIÓN PORTAL PIM <<merge>> Reglas RubyTL Colaboración Univ. Murcia EXO PSM
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 Irastorza arantza.irastorza@ehu.es http://www.onekin.org