Embedding Widget-as-a-Service into Dynamic GUI

Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014

1

Embedding Widget-as-a-Service

into Dynamic GUI

JCIS 2014, 16-19 sept 2014, Cadiz

Jesús Vallecillos, Javier Criado, Luis Iribarne and Nicolás Padilla Applied Computing Group, University of Almería, Spain

[email protected]

TIC-6114 TIN2013-41576-R


2

Index

•  Introduction

•  Architecture Layers

•  Component Data Model

•  WaaS-based Architecture deployment

•  Conclusions and future works


3

Index

•  Introduction






4

Introduction

¡Goal! User Interfaces that can be self-adapted to a lot of environments in function user needs.


5

Starting from the concept of mashup UI:

Introduction


6

Netvibes

My Yahoo Mashup examples

Wordpress

Introduction


7

Geographic Information Systems (GIS)

A testbed GIS mashup, Applied Computing Group: http://acg.ual.es/enia/jcis/

Introduction


8

Geographic Information Systems (GIS)

A testbed GIS mashup, Applied Computing Group: http://acg.ual.es/enia/jcis/

Introduction


9

Components Repository

The organization itself

External

Introduction


10

To achieve this goal:

-  Component-based engineering.

Introduction


11



Introduction

-  Model Driven Engineering.


12



Introduction


-  Client-Server Implementation.


13



Introduction


-  Client-Server Implementation.

-  Component data model for our widget-based user interface.


14

Index

•  Introduction






15

Architecture Layers

Platform independent layer

Platform dependent layer

Client layer


16

WaaS-based Architecture Model



Client layer

-  The client is upper layer of the architecture.

-  The client uses the deployed services in the platform dependent layer .

-  The client is a web application, which means that this application has been developed under this technology.

-  The widgets follow the recommendation of W3C widget specification.


17




Client layer

-  It represents the intermediate layer of the system architecture.

-  It provides the required services.

-  Interacting with the independent part of the platform.

-  Getting the necessary code to create the start-up web application.

-  Providing, to the platform independent, some information about the components.


18




Client layer

-  It contains a server that provides the system services that are valid for all platforms.

-  Its funcionalities are based only on the description of components and their relationships, regardless of the platform where they will be deployed.


19

Index

•  Introduction






20

Component Data Model


21


ECR = {ER1, ER2, …, ERn}

Platform Dependent


22


MCR = {MR0 , MR1, MR2, …, MRn}

Platform Dependent


23


Platform Independent


24

Index

•  Introduction






25




Client layer


26




Client layer

JAX-WS


27




Client layer


28




Client layer

http://acg.ual.es/wookie


29




Client layer

http://acg.ual.es/wookie/deploy/acg.ual.es/wookie/widgets/Map/index.html?idkey= tuV6YYw9ztkjVRHkTC6NDz25D.sl.Y.eq.\&proxy=http://\\acg.ual.es:80/wookie/proxy\&st=

http://acg.ual.es/wookie/widgets/Map

tuV6YYw9ztkjVRHkTC6NDz25D.sl.Y.eq


30




Client layer

Communication management from Node.js


31




Client layer

Web service invocation from Node.js


32




Client layer

GUI inicialization from Client


33

Resulting web application




Client layer


34


Client Layer Platform Dependent Layer Platform Independent Layer


35

Index

•  Introduction






36

-  Within architecture:

Conclusions

The client layer deploys the applications or communicates with rest of the system through services.

The dependent layer communicates with the platform independent layer, which offers services.

- Describe the component data model developed.

- Describe the use of widgets as a service to build GUIs.

- Describe the communication management through JavaScript server.


37

-  Increase the number scenarios.

Future works

-  Validate the proposed architecture in other platforms.

-  Improve the user’s experience when manage UI.


38

Contraportada

Embedding Widget-as-a-Service into Dynamic GUI

Education

Transcript of Embedding Widget-as-a-Service into Dynamic GUI