A Component-based User Interface Approach for Smart TV

The fast growth and diversity of technological devices currently being produced is benefiting areas such as “ambient intelligence”. This area attempts to integrate information technology in any personal environment. However, to construct service/application software that adapts to different environments, there must be techniques available that favor this type of development. Component-based software Engineering (CBSE) is a discipline of the software engineering that integrates (previously constructed) components to build new software systems. This paper presents a CBSE approach to build Graphical User Interfaces (GUI) at run-time. Both a component-based perspective of the user interface and a set of component relationships are presented in the paper. As a case study, this paper also describes an application built for an emerging computation environment, Smart TV. A running example is also presented through the paper putting some Web-based solutions to build User Interfaces together (e.g., Wookie, W3C Widgets, Node.js).

Development Process

The interest of our research is to describe how build a Component-based GUI at runtime for Samsung Smart TV, without we center in the adaptation process. In order to better explain the process, we will show how build a component-based GUI for Samsung Smart TV, which it is the binding relationship between components and what kind there are. Furthermore, we will display a operation sequence between the application and the system. Also, we will present a Samsung Smart TV application where a components-based GUI is observed.


Building a Component-based GUI for Samsung Smart TV

The research concentrates on developing component based software architectures for user interfaces. We will use CBUI to refer to Component- Based User Interfaces. Although these CBUI architectures may be applied in various environments, they are currently used exclusively to construct interactive systems. The user interface in our interactive system, could be visualized on different platforms supporting different technologies.

Adaptation of the UI

Application developments for Smart TV platforms are booming, and especially applications developed for the Samsung Smart TV.

Example of a CBUI in Samsung Smart TV

Previous figure shows a CBUI application being developed for the Andalusia Regional Government (Spain) based on this platform. This application implements an environmental management system called ENIA2 based on user profiles. In this application, the users interact for land uses and plant covers information in the Region of Andalusia. In this example, the interface is made up of a set of components associated with the workspace of a technical user profile. Since the Samsung Smart TV platform uses a Web-based technology, the application can easily be adapted to other environments that use the same technology.

Abstract representation of the CBUI example

Previous figure shows an abstract representation of this interface. This representation makes it easier to understand the functioning of our component architecture, since it enables it to be abstracted from the visual features and work only with its characteristics. Based on this abstract representation, an abstract model of components can be created. This abstraction allows you to describe the component distribution and composition in the interface, leading to a user interface component architecture model. Let us examine both previous figures together. A Header component is located at the top of both figures. This component controls the system access and language preferences. For this task, another three components are included in it: The User component, used to identify the user, the Languages component, responsible for changing the language of the interface components, and finally, the Logout component, which closes the session in the user-connected system. All these components share a common purpose, controlling the user profile. Component Header is a clear example of how CBSE is used to create more complex components by integrating more basic ones.

Other components, used by the user to perform the typical application domain tasks, appear in the interface. The component Mapshows a map of the study area with the results of the query. The map was implemented using OpenLayers3. Within this component is the Options component, which contains the queries that can be shown on the map. At the left of the Map component is the Elements component, which enables the user to select the components that can be shown on our interface prototype. Finally, underneath component Map, are two components (the Histogram and Pie Chart components) used to show information related to the current query.

[top]


What are the binding relationship between components and what kind of them are there?

Each component also has a set of internal ports by which it relates to other components, enabling message exchange among them and providing more dynamic, adaptable behavior. Management of these communications is done by a series of functions included in each component. The concept of a binding relationship must first be defined. A binding relationship is a connection between the ports of two components to understand the functioning of a port.

Components and their relationships

There can only be one binding relationship between two components. These binding relationships provide many possibilities by adding performance and restrictions to information exchange. There are different types of binding relationships, which are grouped in two blocks, binary and n-ary relationships. The binary relationships are between one component and another. The n-ary relationships are a set of binary relationships among a set of related components.

A composition relationship (i.e., between Map Component and Options Component) shows that a component is included in another and cannot be accessed through its ports by any other component outside the composition. We can see that there is a composition relationship between the Header component and the User, Logout and Languages components.

The association relationship (i.e., between User Component and User Components) between two components appears when information necessary to both is exchanged between them. The Languages component has an association relationship with the User component because the user can change the language of all the components, including the User component.

A dependency relationship (i.e., between User Component and Logout Component) exists when a component cannot exist, or its existence makes no sense without another component. Thus, there is a dependency relationship between the User component and the Logout component because it would make no sense for there to be a Logout component in the interface if the User component were not there.

Finally, the producer-consumer relationship (i.e., between Map Component and Histogram Component). This relationship occurs when a component produces information which is consumed (that is, used) by another component.

[top]


Operation sequence

Finally, let’s see now a example about system performance. In the example we show the steps to insert a new component in a user interface. In the main page file of the user interface, we wish to insert the Histogram component and select it from the Elements component. The next figure shows the sequence diagram describing the steps taken by the system to load the Histogram component. First, to initiate this process, the user should select the Histogram checkbox included in the Elements component (we can see this checkbox in the second Figure).

Operation sequence

Next, component Elements emits a message to Node.js server. Node.js is a server directed at events by making use of a non-blocking input/output model, which enables easy distributed construction of applications. The use of this server provides the capacity for making changes in the interface, such as loading, removing, resizing or redistributing a component within the interface itself without having to reload it. Node.js emits this message by means of the socket.emit function (message #2 in the sequence diagram). This function requires three parameters: the identifier of the port on which the message is issued (addWidget in this case), the owner of the graphical user interface (named as user), and the identifier of the component that must be inserted (Histogram in this case).

Then, the Node.js server invokes the addWidget function of the Kernel system based upon previous information (message #2.1). Sequentially, the Kernel calls the createWidgetInstance function of Wookie server (message #2.1.1). Now, Wookie creates a widget instance of the Histogram (componentID) component for the user stated and returns the corresponding widget instance data for identification and usage purposes (messages #2.1.1 and #2.1.2). Wookie is a server used to manage our component repository, making it possible to deploy, update and save components constructed following the W3C Widget specification.

Once this information is obtained, the Kernel builds the corresponding HTML code to be inserted into the user interface (message #2.1.3). This code is returned to Node.js server (message #2.1.4) and is emitted to the client application, that is, to the user interface (message #2.2). Into the client side, there is a function in charge of listening the addWidget web socket port and that inserts the new code in the SmartTV application (message #3).

Finally, since the new HTML code references the widget instance residing in Wookie, the client performs a GET method call to the Wookie server in order to obtain the new widget instance (messages #4 and #4.1).

[top]


Samsung Smart TV application

Now, we present the developed Samsung Smart TV application for the Andalusia Regional Government (Spain). If you want to try the Samsung Smart TV application, you should install the Samsung Smart TV simulator first. Here is the manual.

Then, you must download this project to test the Samsung Smart TV application. Decompress it and import it into the workspace.

Operation sequence

Select Samsung Smart TV Apps Project.

Operation sequence

Select the workspace and click on Finish.

Operation sequence

After that, run the project clicking in the "Run Current Project in Samsung Smart TV Emulator".

Operation sequence

Note

It is very important when you install the Samsung Smart TV Emulator that the Emulator Shared Folders must be into the Eclipse workspace. For example, if your workspace is in "C:\workspace", the "Folder Path" must be "C:\workspace" and the "Folder Name" must be "Apps" in the Emulator. In other case, the appiclation can be not executed. Pay attention to the information provided in the manual.

Operation sequence

[top]