embedding widget-as-a-service into dynamic gui
DESCRIPTION
JCIS 2014, 16-19 sept 2014, CádizTRANSCRIPT
![Page 1: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/1.jpg)
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
TIC-6114 TIN2013-41576-R
![Page 2: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/2.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
2
Index
• Introduction
• Architecture Layers
• Component Data Model
• WaaS-based Architecture deployment
• Conclusions and future works
![Page 3: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/3.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
3
Index
• Introduction
• Architecture Layers
• Component Data Model
• WaaS-based Architecture deployment
• Conclusions and future works
![Page 4: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/4.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
4
Introduction
¡Goal! User Interfaces that can be self-adapted to a lot of environments in function user needs.
![Page 5: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/5.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
5
Starting from the concept of mashup UI:
Introduction
![Page 6: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/6.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
6
Netvibes
My Yahoo Mashup examples
Wordpress
Introduction
![Page 7: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/7.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
7
Geographic Information Systems (GIS)
A testbed GIS mashup, Applied Computing Group: http://acg.ual.es/enia/jcis/
Introduction
![Page 8: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/8.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
8
Geographic Information Systems (GIS)
A testbed GIS mashup, Applied Computing Group: http://acg.ual.es/enia/jcis/
Introduction
![Page 9: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/9.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
9
Components Repository
The organization itself
External
Introduction
![Page 10: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/10.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
10
To achieve this goal:
- Component-based engineering.
Introduction
![Page 11: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/11.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
11
To achieve this goal:
- Component-based engineering.
Introduction
- Model Driven Engineering.
![Page 12: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/12.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
12
To achieve this goal:
- Component-based engineering.
Introduction
- Model Driven Engineering.
- Client-Server Implementation.
![Page 13: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/13.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
13
To achieve this goal:
- Component-based engineering.
Introduction
- Model Driven Engineering.
- Client-Server Implementation.
- Component data model for our widget-based user interface.
![Page 14: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/14.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
14
Index
• Introduction
• Architecture Layers
• Component Data Model
• WaaS-based Architecture deployment
• Conclusions and future works
![Page 15: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/15.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
15
Architecture Layers
Platform independent layer
Platform dependent layer
Client layer
![Page 16: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/16.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
16
WaaS-based Architecture Model
Platform independent layer
Platform dependent layer
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.
![Page 17: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/17.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
17
WaaS-based Architecture Model
Platform independent layer
Platform dependent layer
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.
![Page 18: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/18.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
18
WaaS-based Architecture Model
Platform independent layer
Platform dependent layer
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.
![Page 19: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/19.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
19
Index
• Introduction
• Architecture Layers
• Component Data Model
• WaaS-based Architecture deployment
• Conclusions and future works
![Page 20: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/20.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
20
Component Data Model
![Page 21: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/21.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
21
Component Data Model
ECR = {ER1, ER2, …, ERn}
Platform Dependent
![Page 22: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/22.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
22
Component Data Model
MCR = {MR0 , MR1, MR2, …, MRn}
Platform Dependent
![Page 23: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/23.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
23
Component Data Model
Platform Independent
![Page 24: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/24.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
24
Index
• Introduction
• Architecture Layers
• Component Data Model
• WaaS-based Architecture deployment
• Conclusions and future works
![Page 25: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/25.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
25
WaaS-based Architecture Model
Platform independent layer
Platform dependent layer
Client layer
![Page 26: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/26.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
26
WaaS-based Architecture Model
Platform independent layer
Platform dependent layer
Client layer
JAX-WS
![Page 27: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/27.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
27
WaaS-based Architecture Model
Platform independent layer
Platform dependent layer
Client layer
![Page 28: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/28.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
28
WaaS-based Architecture Model
Platform independent layer
Platform dependent layer
Client layer
http://acg.ual.es/wookie
![Page 29: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/29.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
29
WaaS-based Architecture Model
Platform independent layer
Platform dependent layer
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
![Page 30: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/30.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
30
WaaS-based Architecture Model
Platform independent layer
Platform dependent layer
Client layer
Communication management from Node.js
![Page 31: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/31.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
31
WaaS-based Architecture Model
Platform independent layer
Platform dependent layer
Client layer
Web service invocation from Node.js
![Page 32: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/32.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
32
WaaS-based Architecture Model
Platform independent layer
Platform dependent layer
Client layer
GUI inicialization from Client
![Page 33: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/33.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
33
Resulting web application
WaaS-based Architecture Model
Platform independent layer
Platform dependent layer
Client layer
![Page 34: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/34.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
34
WaaS-based Architecture Model
Client Layer Platform Dependent Layer Platform Independent Layer
![Page 35: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/35.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
35
Index
• Introduction
• Architecture Layers
• Component Data Model
• WaaS-based Architecture deployment
• Conclusions and future works
![Page 36: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/36.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
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.
![Page 37: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/37.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
37
- Increase the number scenarios.
Future works
- Validate the proposed architecture in other platforms.
- Improve the user’s experience when manage UI.
![Page 38: Embedding Widget-as-a-Service into Dynamic GUI](https://reader033.vdocuments.mx/reader033/viewer/2022060110/555e8563d8b42abd468b5081/html5/thumbnails/38.jpg)
Embedding Widget-as-a-Service into Dynamic GUI Jesús Vallecillos Ruiz, JCIS’2014
38
Contraportada