From SAM
Jump to: navigation, search

A widget is a component of a visual user interface, e.g. a website or a mobile application. From a structural view a widget consists of a window, a visible area which the user can interact with, and a non-visible area which stores the state of the component and communicate with the user interface. In websites widgets mostly consist of small code fragments using HTML and JavaScript.

Widgets can be used to display and merge information from different sources. More information in the section Mashup and Dashboard.


Lately it is getting more and more important to be updated in time. To reduce the manual gathering of information and to automate this behaviour, dashboards are used. Dashboards consists of many individual different widgets. Every Widget relates information from a source to represent it to the user. The word "Widget" is a composition of Window and Gadget. It is comparable as an Window associated object. Widgets are using web technologies including JavaScript, Flash, HTML and CSS. Widgets are stand-alone elements, which are responsible for one specialized task.

Relevance to SAM

In SAM widgets will be displayed in a dashboard, which will be implemented in WP7 Multi-Device Media Representation and Interaction. Widgets will be used to display content provided by the SAM platform, for example text, images and Social Media content. As describe in the technical specification widgets will be implemented using HTML5 and JavaScript. Communication between widgets will be enabled by a subcomponent of the Generic Dashboard component, the Widget Manager, which provides content to them, provided by other components of the SAM platform.

State of the Art Analytics

W3C Widgets

The World Wide Web Consortium released a recommendation regarding widgets (packaged web apps) in November 2012[1]. It standardizes the packaging format and metadata. As a archive format the PKWare's Zip specification will be used and contain all files the used by the widget. Metadata will be stored using XML and contains metadata and configuration parameters.

Inter-Widget Communication (IWC)

Inter-Widget communication is an important topic when information should be displayed on multiple widgets and multiple devices. Widgets normally communicate solely with the user interface without any interaction to other widgets but a communication between widgets can level the user experience. Regarding the 2nd Screen paradigm the synchronization of widgets running on different devices can be solved using IWC.


Apache Wookie

Apache Wookie is a Java server application which is capable of uploading and deploying widgets for applications. Apache Wookie is although based on W3C Widgets specifications, but extended APIs (for example Google Wave Gadgets and OpenSocial) can be included too. Additional to the standard elements, Widgets also include fully collaborative applications such as chats, quizzes and games. [2]

Apache Rave

Apache Rave merges the best of existing different projects. Apache Rave constitutes a web and social mashup engine that aggregates and serves web widgets. The Support for inter-gadget messaging, Dynamic and highly customizable front-end enginges are just some of the core features. Furthermore, Apache Rave supports W3C widgets. Generally it becomes a lightweight and open-standards-based extendible platform. [3]

FOKUS Mobile Widget Runtime

FOKUS Mobile Widget Runtime offers a platform supporting mobile Web 2.0 solutions. It can be used as a stand-alone platform or embedded in existing one. It is realized for J2ME CLDC and can handle JavaScript widgets. This runtime is heading to support compliance to the W3C Widget 1.0 Working Draft and rendering of HTML/CSS widgets.[4]

Related Projects


OMELETTE is a Mashup service platform and stands for Open Mashup Enterprise service platform for Linked data in the Telco domain. The focus in this project is located in breaking the barriers between the web, telecommunication and hybrid services, considering the convergence of IT/telecom/content systems. It is an innovative process of service development based on a mashup oriented approach.[5]

SAM Approach

Widgets are code snippets which contain different kind of information provided by the Syndicator component. The widgets are part of the Generic Dashboard component, which manage how and when the widgets should be shown.

Implementation and Technologies

Widgets are implemented using HTML5 and AngularJS. Each widget is connected to an AngularJS controller, which handles the data to be displayed and a HTML file, which provides the structure and the design of the widget. To enable different widget designs, each widget is adapted to a specific structure (class and id attributes).

Functionality and UI Elements

Widgets are used to present syndicated content to enrich the viewing experience. They are shown based on timelines provided by the media provider.


The look of a widget can be changed by using the Widget Editor. The Widget Editor is part of the SAM Marketplace and can be accessed by business customers. At this point of time the widget is divided in different areas and for each area the background and font color can be adapted.



There are different types of Widgets available to provide an adequate presentation of each of the contents. At the moment the following widgets are available:

  • Product widget
  • Wikipedia widget
  • Discover widget
  • External widget
  • Syndicator widget
  • Twitter widget
  • Facebook widget

Latest Developments

Based on feedback from the first trials, a new design of the Generic Dashboard component and the embedded widgets have been created and implemented.


  1. Packaged Web Apps (Widgets) - Packaging and XML Configuration (Second Edition) http://www.w3.org/TR/widgets/
  2. Apache Wookie http://wookie.apache.org/index.html
  3. Apache Rave https://rave.apache.org/
  4. FOKUS Mobile Widget Runtime http://www.fokus.fraunhofer.de/en/fame/projects/project_archive/cap/index.html
  5. OMELETTE Project Website http://www.ict-omelette.eu/