Search Form

Overview

This article is part one of a two part series that demostrates the Search Form UI pattern, implemented using jQuery Mobile in part 1. Then in part 2, the UI is modified to follow the Tizen UX Guidelines.

Overview

This article is part one of a two part series that demostrates the Long Form UI pattern.  Then in part 2, the UI is modified to follow the Tizen UX Guidelines.

The Long Form UI pattern may be used to enter many types of data.  However, for the purposes of this article, we will use it to create an account profile.  

Pre-conditions

To develop Long Form UI 'jquery.js' and 'web-ui-fw.js' must be included inside 'script' tag of HTML 'head'.

Calculate Form

Overview

This article is part one of a two part series that demostrates the Calculate Form UI pattern, implemented in part 1 using jQuery. Then in part 2, the UI is modified to follow the Tizen UX Guidelines.

CalculateForm HTML Page

The CalculateForm UI pattern is an web based calculator pattern that calculates data based on user input. In this form, the buttons in the header and the footer are customized and a table view has been created, where the user can enter data, as shown in the screenshot below.

Description

This article is part one of a two part series that demostrates the Fixed Column UI pattern. Then in part 2, the UI is modified to follow the Tizen UX Guidelines.

This article explains how to create a Fixed Column UI using Tizen platform. This article is used to create an HTML table with fixed/frozen left column and scrollable body (other columns).

Sign In and Registration Form Tutorials

Overview

This article is part one of a two part series that demostrates the Sign In and Registration Form UI patterns, implemented in part 1 using jQuery Mobile. Then in part 2, the UI is modified to follow the Tizen UX Guidelines.

Overview

This article demostrates the code to create a List View UI pattern that follows the Tizen UX Guidelines, and it is based on the master-detail application template generated by Tizen Web UI Framework. The master-detail application template includes a header, content and footer with back functionality.

Springboard Menu

Overview

This Springboard sample application is based of jQuery multi page. The application demonstrates how the Springboard navigation menu can be designed for the Tizen applications. Let’s understand the implementation details for the application.

Note: Refer to Tizen-ux-conversion tutorial for coverting this jQuery design application to be in align with the Tizen UX guidelines.

PageCarousel

Overview

This article is part one of a two part series that demostrates the Page Carousel UI pattern, implemented in part 1 using jQuery. Then in part 2, the UI is modified to follow the Tizen UX Guidelines.

It also demonstrates how to create customized Photo Album withiImage followed by subtext and changing images of a given category in content view once the user selects any item in tabbed menu.

The JavaScriptWebPage item is a simple sample project that shows the steps to utilize Java Script in Tizen. A brief description about each class follows below.

It consists of the functional class WebManager and the user interface Form1. The WebManager item loads a webpage. In the sample project, WebManager loads the test html page containing Java Script to the web control. If the Initialize function is called in Form1, a WebControl is created and the webpage specified in Form1 appears.

Stopwatch is a time based utility that can be used to measure the amount of time elapsed from a particular time until a time of interest reached or an event occurs.

Using the application

There are three buttons. Initially all buttons are enabled.

1.     Start: - Initially the stopwatch is in zero position, “00:00:00:000”. On pressing the “Start” button, the stopwatch starts counting the time elapsed from the point of start.

After clicking on the “Start” button, “Reset” and “Start” buttons are disabled and “Stop” button is enabled.