ICSOFT-EA 2014, 9th International Conference on Software Engineering and Applications, 21-31 August 2014, Vienna (Austria)

1. TIN2013-41576-R TIC-6114
A Component-based User Interface
Approach for Smart TV
ICSOFT-EA 2014 - 9th International Conference on Software Engineering and Applications
Jesús Vallecillos, Javier Criado, Nicolás Padilla and Luis Iribarne
Applied Computing Group, University of Almería, Spain
jesus.vallecillos@ual.es
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 1

2. • Introduction
• Component-based UI on Smart TV
• Component types
• Relationships between components
• Implementation issues
• Conclusions and future works
A Component-based User Interface Approach for Smart TV
Index
Jesús Vallecillos Ruiz, ICSOFT’2014 2

3. • Introduction
• Component-based UI on Smart TV
• Component types
• Relationships between components
• Implementation issues
• Conclusions and future works
A Component-based User Interface Approach for Smart TV
Index
Jesús Vallecillos Ruiz, ICSOFT’2014 3

4. ¡Goal!
User Interfaces that can be self-adapted to a lot of environments in
function user needs.
A Component-based User Interface Approach for Smart TV
Introduction
Jesús Vallecillos Ruiz, ICSOFT’2014 4

5. Introduction
Starting from the concept of mashup UI:
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 5

6. Introduction
Mashup examples My Yahoo
Wordpress
A Component-based User Interface Approach for Smart TV
Netvibes
Jesús Vallecillos Ruiz, ICSOFT’2014 6

7. A Component-based User Interface Approach for Smart TV
Introduction
Geographic Information Systems (GIS)
A testbed GIS mashup, Applied Computing Group:
http://www.enia.dreamhosters.com/
Jesús Vallecillos Ruiz, ICSOFT’2014 7

8. A Component-based User Interface Approach for Smart TV
Introduction
Geographic Information Systems (GIS)
A testbed GIS mashup, Applied Computing Group:
http://www.enia.dreamhosters.com/
Jesús Vallecillos Ruiz, ICSOFT’2014 8

9. Components
Repository
The organization itself
External
A Component-based User Interface Approach for Smart TV
Introduction
Jesús Vallecillos Ruiz, ICSOFT’2014 9

10. A Component-based User Interface Approach for Smart TV
Introduction
To achieve this goal:
- Component-based engineering.
Jesús Vallecillos Ruiz, ICSOFT’2014 10

11. A Component-based User Interface Approach for Smart TV
Introduction
To achieve this goal:
- Component-based engineering.
- Model Driven Engineering.
Jesús Vallecillos Ruiz, ICSOFT’2014 11

12. A Component-based User Interface Approach for Smart TV
Introduction
To achieve this goal:
- Component-based engineering.
- Model Driven Engineering.
- Client-Server Implementation.
Jesús Vallecillos Ruiz, ICSOFT’2014 12

13. - Component model and relationship between components.
A Component-based User Interface Approach for Smart TV
Introduction
To achieve this goal:
- Component-based engineering.
- Model Driven Engineering.
- Client-Server Implementation.
Jesús Vallecillos Ruiz, ICSOFT’2014 13

14. • Introduction
• Component-based UI on Smart TV
• Component types
• Relationships between components
• Implementation issues
• Conclusions and future works
A Component-based User Interface Approach for Smart TV
Index
Jesús Vallecillos Ruiz, ICSOFT’2014 14

15. A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 15

16. A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 16

17. We manage an abstract representation of the UI
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 17

18. • Introduction
• Component-based UI on Smart TV
• Component types
• Relationships between components
• Implementation issues
• Conclusions and future works
A Component-based User Interface Approach for Smart TV
Index
Jesús Vallecillos Ruiz, ICSOFT’2014 18

19. Component types
A Component-based User Interface Approach for Smart TV
Consists of 2 modules:
Jesús Vallecillos Ruiz, ICSOFT’2014 19

20. Component types
User Interaction Module manages interaction
with the user.
A Component-based User Interface Approach for Smart TV
Consists of 2 modules:
Jesús Vallecillos Ruiz, ICSOFT’2014 20

21. Component types
User Interaction Module manages interaction
with the user.
Functional Module performs the main tasks of
the component.
A Component-based User Interface Approach for Smart TV
Consists of 2 modules:
Jesús Vallecillos Ruiz, ICSOFT’2014 21

22. Component types
User Interaction Module manages interaction
with the user.
Functional Module performs the main tasks of
the component.
A Component-based User Interface Approach for Smart TV
Consists of 2 modules:
Components:
- Functional component
- User Interaction component
- Container component
Jesús Vallecillos Ruiz, ICSOFT’2014 22

23. Component types
Functional Component: A component including only
this module is used basically to implement the
underlying functionality of an application.
A Component-based User Interface Approach for Smart TV
-
Jesús Vallecillos Ruiz, ICSOFT’2014 23

24. Component types
Functional Component: A component including only
this module is used basically to implement the
underlying functionality of an application.
User Interaction Component: A component that
includes only this module basically manages user
interaction and shows visual content related to the
domain information.
A Component-based User Interface Approach for Smart TV
-
-
Jesús Vallecillos Ruiz, ICSOFT’2014 24

25. Component types
Functional Component: A component including only
this module is used basically to implement the
underlying functionality of an application.
User Interaction Component: A component that
includes only this module basically manages user
interaction and shows visual content related to the
domain information.
Container Component: A component that does not
include any of the mentioned modules, is named as a
container.
A Component-based User Interface Approach for Smart TV
-
-
-
Jesús Vallecillos Ruiz, ICSOFT’2014 25

26. • Introduction
• Component-based UI on Smart TV
• Component types
• Relationships between components
• Implementation issues
• Conclusions and future works
A Component-based User Interface Approach for Smart TV
Index
Jesús Vallecillos Ruiz, ICSOFT’2014 26

27. Relationships between components
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 27

28. Relationships between components
Composition: shows that component is included in
another and cannot be accessed through its ports by
another component outside the composition.
A Component-based User Interface Approach for Smart TV
- No se
puede
mostrar
la
imagen.
Puede
Jesús Vallecillos Ruiz, ICSOFT’2014 28

29. Relationships between components
Composition: shows that component is included in
another and cannot be accessed through its ports by
another component outside the composition.
Association: between two components appears when
information necessary to both is exchanged between
them.
A Component-based User Interface Approach for Smart TV
-
No se
puede
mostrar
la
imagen.
Puede
-
No se
puede
mostrar
la
imagen.
Jesús Vallecillos Ruiz, ICSOFT’2014 29

30. Relationships between components
Composition: shows that component is included in
another and cannot be accessed through its ports by
another component outside the composition.
Association: between two components appears when
information necessary to both is exchanged between
them.
Dependency: exits when a component cannot exist, or
its existence makes no sense without another
component.
A Component-based User Interface Approach for Smart TV
-
No se
puede
mostrar
la
imagen.
Puede
-
No se
puede
mostrar
la
imagen.
-
No se
puede
mostr
ar la
Jesús Vallecillos Ruiz, ICSOFT’2014 30

31. Relationships between components
Composition: shows that component is included in
another and cannot be accessed through its ports by
another component outside the composition.
Association: between two components appears when
information necessary to both is exchanged between
them.
Dependency: exits when a component cannot exist, or
its existence makes no sense without another
component.
Producer-Consumer: occurs when a component
produces information which is consumed by another
component.
A Component-based User Interface Approach for Smart TV
-
No se
puede
mostrar
la
imagen.
Puede
-
No se
puede
mostrar
la
imagen.
-
No se
puede
mostr
ar la
-
No se
puede
mostr
ar la
Jesús Vallecillos Ruiz, ICSOFT’2014 31

32. Relationships between components
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 32

33. Relationships between components
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 33

34. Relationships between components
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 34

35. Relationships between components
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 35

36. Relationships between components
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 36

37. • Introduction
• Component-based UI on Smart TV
• Component types
• Relationships between components
• Implementation issues
• Conclusions and future works
A Component-based User Interface Approach for Smart TV
Index
Jesús Vallecillos Ruiz, ICSOFT’2014 37

38. Implementation issues
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 38

39. Implementation issues
A Component-based User Interface Approach for Smart TV
CLIENT
Jesús Vallecillos Ruiz, ICSOFT’2014 39

40. SMART TV APPLICATION
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 40

41. Implementation issues
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 41

42. A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 42

43. A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 43

44. Implementation issues
SERVER
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 44

45. A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 45

46. A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 46

47. A Component-based User Interface Approach for Smart TV
Client Side Server Side
Jesús Vallecillos Ruiz, ICSOFT’2014 47

48. • Introduction
• Component-based UI on Smart TV
• Component types
• Relationships between components
• Implementation issues
• Conclusions and future works
A Component-based User Interface Approach for Smart TV
Index
Jesús Vallecillos Ruiz, ICSOFT’2014 48

49. Development of component-based software
environment as applied to a Smart TV.
Development of a set of components to Smart TV.
Some components and present some relationships
between components.
The adaptive technology solutions to implement our
architecture in a Smart TV environment.
Development a web testbed that includes:
- the use of the emulator install process,
- the Samsung Smart TV project, and
- a video showing the interaction application.
http://acg.ual.es/enia/cbuismarttv/index.html
A Component-based User Interface Approach for Smart TV
Conclusions
-
-
-
-
-
Jesús Vallecillos Ruiz, ICSOFT’2014 49

50. To study the user profiles of the system (UI) to perform
a traceability of the interaction. This issue will allow to
study some UI’s adaptability issues.
To extend our systems with some new funtionalities to
provide support for cooperative tasks.
To deploy our system in others platforms, such as in
touch devices or other interaction methods centered in
Natural User Interface (NUI).
A Component-based User Interface Approach for Smart TV
Future work
-
-
-
Jesús Vallecillos Ruiz, ICSOFT’2014 50

51. Contraportada
A Component-based User Interface Approach for Smart TV
Jesús Vallecillos Ruiz, ICSOFT’2014 51