Mobile Web Wearable Web

Web UI Framework (UIFW)

Web UI Framework features allow you to create and manage various kinds of UI components. The components represent a visual UI element, such as a button or slider, which you can interact with and manipulate.

The Tizen UI components creation and features include:

For more information on the component details and the Tizen Advanced UI (TAU), see UI Component Reference (for mobile and wearable applications). TAU is the standard Web UI library for Tizen platform, originated from the Tizen Web UI Framework Library (standard library for Tizen 2.2.1), which was mainly an extension to jQuery Mobile. The key features of Web UI Framework Library were coding simplification and application creation speed. The purpose of TAU is to be the "framework advanced to the next level".

With TAU, you can take advantage of the following benefits in your code:

  • TAU is a standalone library, so no additional libraries are needed.
  • TAU can be used with jQuery, as it exposes a special API to the jQuery object identical to jQuery Mobile. Migration is painless.
  • TAU has been written with speed in mind, and all the code is tweaked for maximum performance.
  • Applications can be built to dramatically improve startup performance.
  • TAU is ECMAScript5- and HTML5-compliant.
  • As a large and open API, TAU methods and core functions (event utility functions) are available and not hidden.
  • TAU is customizable and easy to extend (to create new UI components).
  • TAU is optimized for wearable, mobile, and TV devices.
  • TAU supports various profiles (mobile, wearable, and TV).

UI Service Template

You can use the Web UI service by importing the Tizen Advanced UI (TAU) library by declaring the applicable script in the HTML header.

The following example shows a UI service template:

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Page Title</title>
      <script type="text/javascript" src="../lib/tau/mobile/js/tau.js"></script>
      <link rel="stylesheet" href="../lib/tau/mobile/theme/default/tau.css">
      <script src="myapp.js"></script>
      <link rel="stylesheet" href="my.css"/>
   </head>
   <body>
      <!--HTML body content-->
   </body>
</html>

To use the Web UI service template:

  1. Implement the HTML content.
  2. Scale the UI.
  3. Run the JavaScript API.

Implementing HTML Content

The Web UI service template structure begins with the HTML header:

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<script type="text/javascript" src="../lib/tau/mobile/js/tau.js"></script>
<link rel="stylesheet" href="../lib/tau/mobile/theme/default/tau.css">
<script src="myapp.js"></script>
<link rel="stylesheet" href="my.css"/>

In the header, use the following default elements:

  • <title>

    The <title> element is used to set the application title.

  • <script> and <style>

    The <script> elements are used to load the basic Tizen Advanced UI (TAU) libraries that must be included in Tizen Web applications. The loaded libraries are:

    • TAU library: tau(.min).js

      This element is mandatory, as it imports the TAU library, which you need to use the Web UI service.

    • TAU theme: tau(.min).css

      This element is also mandatory, as it imports the TAU theme.

You can add an additional <script src="<CUSTOM_LIBRARY>"> or <link rel="stylesheet" src="<CUSTOM_CSS>"> element to include your own scripts and style sheets. However, place them after the default <script> elements, as you can use any TAU APIs provided by the default libraries.

The body section of the HTML file contains 1 or more pages, where each page has a header, content, and a footer.

Scaling the UI

The Tizen Advanced UI (TAU) -based template provides 2 scaling methods: device-width and fixed-width.

  • Device-width scaling

    This scaling mode is suited for most mobile devices, such as Tizen, iPhone® and Android®. In this mode, the viewport width is set to device-width, enabling rem scaling using the Rem and Em units. These units calculate the size of a source element automatically based on the container font size (Em) or the base font size (Rem). In Tizen Web apps, a 320 px screen width is assumed.

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  • Fixed-width scaling

    This scaling mode is best suited for Tizen devices, since the entire screen can be scaled on the viewport level. In the viewport scaling mode, set the size of all resources to fit the 360 px screen width.

    You can also use fixed-width scaling if you do not want to scale your application, or if you want to set your own scale. In this case, declare a viewport, but note that the default viewport scaling is overridden by the declared viewport. In the Tizen Web UI components, viewport scaling is set automatically to device-width as follows:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    To enable fixed-width scaling, the header must contain the <meta name="viewport"> element:

    <meta name="viewport" content="width=360, initial-scale=1, user-scalable=no">

Running JavaScript API

To load your JavaScript file, include the file in the <script> element in the HTML header. Since the TAU files are already loaded, you can use any APIs from these libraries as well.

<script src="{YOUR_SCRIPT_PATH}"></script>

UI Framework Features

The Tizen Advanced UI (TAU) provides the following features:

  • Accessibility

    Accessibility enables you to use the text-to-speech functionality with the Tizen screen reader.

  • Localization

    Localization enables you to create locale-specific applications.

Accessibility

The WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a standard to support easy access to Web content in Web applications. The WAI-ARIA is composed of a role, states, and property, and its current version is 1.0. The Tizen screen reader sends the screen information to the user with the text-to-speech technology and WAI-ARIA data.

You must define the role, states, and property of the HTML elements in order to enable the Tizen screen reader.

The Tizen screen reader reads HTML elements in the following order:

  1. Content

    The actual element content is read first.

  2. Other attributes than role and aria-label
  3. role attribute
  4. aria-label attribute

The following examples show how WAI-ARIA code is read using the text-to-speech functionality of the screen reader:

  • Result: checkbox checked, double tap to uncheck 
    <div role="checkbox" aria-checked="true" aria-label="double tap to uncheck"></div>
  • Result: test button, double tap to click 
    <div role="button" aria-label="double tap to click">test</div>

When creating applications that use the Tizen screen reader, keep in mind the following exceptions:

  • If the aria-hidden attribute of an element is set to true, the screen reader does not read the content of the element or its child elements.

    In the following snippet, the screen reader reads "on", but not "off" or "child".

    <div tabindex="0">
   <div>on</div>
   <div aria-hidden="true">
      off
      <div>child</div>
   </div>
</div>
  • If the role attribute is not defined, it is not read.

    In the following snippet, the screen reader reads "test", but not "link".

    <a role="" href="test.html">test</a>
  • The screen reader does not read elements that are hidden, for example, if the display property is set to none.

The <img> element supports the image alt text through the alt attribute:

<img src="icon.jpg" alt="icon">
Note
The alt attribute need not be defined for the virtual grid component.

The accessibility feature is supported since Tizen 2.1.

Localization

The Tizen Advanced UI (TAU) components support localization. For example, the date-time picker component (in mobile applications only) shows the time depending on the current locale. When you define a language in the <html> element by adding a lang attribute, the defined language and locale are selected. For example, the date time picker component shows the time depending on the current locale:

<html lang="fr-FR">

If the lang attribute is not given in the <html> element, the browser's current locale, which is detected by reading the window.navigator.language value, is used by default. The localization feature is powered by the Globalize library, so you can use any APIs in Globalize.

Go to top