1. TIN2013-41576-R TIC-6114
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
Embedding Widget-as-a-Service into Dynamic GUI
jesus.vallecillos@ual.es
Jesús Vallecillos Ruiz, JCIS’2014 1

2. Embedding Widget-as-a-Service into Dynamic GUI
Index
• Introduction
• Architecture Layers
• Component Data Model
• WaaS-based Architecture deployment
• Conclusions and future works
Jesús Vallecillos Ruiz, JCIS’2014 2

3. Embedding Widget-as-a-Service into Dynamic GUI
Index
• Introduction
• Architecture Layers
• Component Data Model
• WaaS-based Architecture deployment
• Conclusions and future works
Jesús Vallecillos Ruiz, JCIS’2014 3

4. ¡Goal!
User Interfaces that can be self-adapted to a lot of environments in
function user needs.
Embedding Widget-as-a-Service into Dynamic GUI
Introduction
Jesús Vallecillos Ruiz, JCIS’2014 4

5. Introduction
Starting from the concept of mashup UI:
Embedding Widget-as-a-Service into Dynamic GUI
Jesús Vallecillos Ruiz, JCIS’2014 5

6. Embedding Widget-as-a-Service into Dynamic GUI
Introduction
Mashup examples My Yahoo
Netvibes
Wordpress
Jesús Vallecillos Ruiz, JCIS’2014 6

7. Embedding Widget-as-a-Service into Dynamic GUI
Introduction
Geographic Information Systems (GIS)
A testbed GIS mashup, Applied Computing Group:
http://acg.ual.es/enia/jcis/
Jesús Vallecillos Ruiz, JCIS’2014 7

8. Embedding Widget-as-a-Service into Dynamic GUI
Introduction
Geographic Information Systems (GIS)
A testbed GIS mashup, Applied Computing Group:
http://acg.ual.es/enia/jcis/
Jesús Vallecillos Ruiz, JCIS’2014 8

9. Components
Repository
The organization itself
External
Embedding Widget-as-a-Service into Dynamic GUI
Introduction
Jesús Vallecillos Ruiz, JCIS’2014 9

10. Embedding Widget-as-a-Service into Dynamic GUI
Introduction
To achieve this goal:
- Component-based engineering.
Jesús Vallecillos Ruiz, JCIS’2014 10

11. Embedding Widget-as-a-Service into Dynamic GUI
Introduction
To achieve this goal:
- Component-based engineering.
- Model Driven Engineering.
Jesús Vallecillos Ruiz, JCIS’2014 11

12. Embedding Widget-as-a-Service into Dynamic GUI
Introduction
To achieve this goal:
- Component-based engineering.
- Model Driven Engineering.
- Client-Server Implementation.
Jesús Vallecillos Ruiz, JCIS’2014 12

13. - Component data model for our widget-based user interface.
Embedding Widget-as-a-Service into Dynamic GUI
Introduction
To achieve this goal:
- Component-based engineering.
- Model Driven Engineering.
- Client-Server Implementation.
Jesús Vallecillos Ruiz, JCIS’2014 13

14. Embedding Widget-as-a-Service into Dynamic GUI
Index
• Introduction
• Architecture Layers
• Component Data Model
• WaaS-based Architecture deployment
• Conclusions and future works
Jesús Vallecillos Ruiz, JCIS’2014 14

15. Architecture Layers
Client layer
Platform dependent layer
Platform independent layer
Embedding Widget-as-a-Service into Dynamic GUI
Jesús Vallecillos Ruiz, JCIS’2014 15

16. WaaS-based Architecture Model
Client layer
Platform dependent layer
Platform independent 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.
Embedding Widget-as-a-Service into Dynamic GUI
Jesús Vallecillos Ruiz, JCIS’2014 16

17. WaaS-based Architecture Model
Client layer
Platform dependent layer
Platform independent layer
- It represents the intermediate layer of the system architecture.
- 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.
Embedding Widget-as-a-Service into Dynamic GUI
- It provides the required services.
Jesús Vallecillos Ruiz, JCIS’2014 17

18. WaaS-based Architecture Model
Client layer
Platform dependent layer
Platform independent 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.
Embedding Widget-as-a-Service into Dynamic GUI
Jesús Vallecillos Ruiz, JCIS’2014 18

19. Embedding Widget-as-a-Service into Dynamic GUI
Index
• Introduction
• Architecture Layers
• Component Data Model
• WaaS-based Architecture deployment
• Conclusions and future works
Jesús Vallecillos Ruiz, JCIS’2014 19

20. Component Data Model
Embedding Widget-as-a-Service into Dynamic GUI
Jesús Vallecillos Ruiz, JCIS’2014 20

21. Component Data Model
Embedding Widget-as-a-Service into Dynamic GUI
ECR = {ER1, ER2, …, ERn}
Platform Dependent
Jesús Vallecillos Ruiz, JCIS’2014 21

22. Component Data Model
Embedding Widget-as-a-Service into Dynamic GUI
Platform Dependent
MCR = {MR0 , MR1, MR2, …, MRn}
Jesús Vallecillos Ruiz, JCIS’2014 22

23. Component Data Model
Embedding Widget-as-a-Service into Dynamic GUI
Platform Independent
Jesús Vallecillos Ruiz, JCIS’2014 23

24. Embedding Widget-as-a-Service into Dynamic GUI
Index
• Introduction
• Architecture Layers
• Component Data Model
• WaaS-based Architecture deployment
• Conclusions and future works
Jesús Vallecillos Ruiz, JCIS’2014 24

25. WaaS-based Architecture Model
Client layer
Platform dependent layer
Platform independent layer
Embedding Widget-as-a-Service into Dynamic GUI
Jesús Vallecillos Ruiz, JCIS’2014 25

26. WaaS-based Architecture Model
Client layer
Platform dependent layer
Platform independent layer
Embedding Widget-as-a-Service into Dynamic GUI
JAX-WS
Jesús Vallecillos Ruiz, JCIS’2014 26

27. WaaS-based Architecture Model
Client layer
Platform dependent layer
Platform independent layer
Embedding Widget-as-a-Service into Dynamic GUI
Jesús Vallecillos Ruiz, JCIS’2014 27

28. WaaS-based Architecture Model
Client layer
Platform dependent layer
Platform independent layer
http://acg.ual.es/wookie
Embedding Widget-as-a-Service into Dynamic GUI
Jesús Vallecillos Ruiz, JCIS’2014 28

29. WaaS-based Architecture Model
Client layer
Platform dependent layer
Platform independent layer
http://acg.ual.es/wookie/widgets/Map
tuV6YYw9ztkjVRHkTC6NDz25D.sl.Y.eq
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=
Embedding Widget-as-a-Service into Dynamic GUI
Jesús Vallecillos Ruiz, JCIS’2014 29

30. WaaS-based Architecture Model
Client layer
Platform dependent layer
Platform independent layer
Communication management from Node.js
Embedding Widget-as-a-Service into Dynamic GUI
Jesús Vallecillos Ruiz, JCIS’2014 30

31. WaaS-based Architecture Model
Client layer
Platform dependent layer
Platform independent layer
Embedding Widget-as-a-Service into Dynamic GUI
Web service invocation from Node.js
Jesús Vallecillos Ruiz, JCIS’2014 31

32. WaaS-based Architecture Model
Client layer
Platform dependent layer
Platform independent layer
Embedding Widget-as-a-Service into Dynamic GUI
GUI inicialization from Client
Jesús Vallecillos Ruiz, JCIS’2014 32

33. WaaS-based Architecture Model
Client layer
Platform dependent layer
Platform independent layer
Embedding Widget-as-a-Service into Dynamic GUI
Resulting web application
Jesús Vallecillos Ruiz, JCIS’2014 33

34. WaaS-based Architecture Model
Client Layer Platform Dependent Layer Platform Independent Layer
Embedding Widget-as-a-Service into Dynamic GUI
Jesús Vallecillos Ruiz, JCIS’2014 34

35. Embedding Widget-as-a-Service into Dynamic GUI
Index
• Introduction
• Architecture Layers
• Component Data Model
• WaaS-based Architecture deployment
• Conclusions and future works
Jesús Vallecillos Ruiz, JCIS’2014 35

36. 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.
Embedding Widget-as-a-Service into Dynamic GUI
- Within architecture:
Conclusions
Jesús Vallecillos Ruiz, JCIS’2014 36

37. - Validate the proposed architecture in other platforms.
- Improve the user’s experience when manage UI.
Embedding Widget-as-a-Service into Dynamic GUI
Future works
- Increase the number scenarios.
Jesús Vallecillos Ruiz, JCIS’2014 37

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