Sample Code
Tizen UX Conversion Tutorial: SearchForm - Part 1
PUBLISHED
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.
- Read more about Tizen UX Conversion Tutorial: SearchForm - Part 1
Tizen UX Conversion Tutorial: Long Form Tutorial - Part 1
PUBLISHED
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'.
Tizen UX Conversion Tutorial: Calculate Form - Part 1
PUBLISHED
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.
Tizen UX Conversion Tutorial: Fixed Column - Part 1
PUBLISHED
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).
Tizen UX Conversion Tutorial: Sign-In and Registration Form Tutorials - Part 1
PUBLISHED
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.
Web UI List Based Navigation
PUBLISHED
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.
Tizen UX Conversion Tutorial: Springboard-Based Navigation - Part 1
PUBLISHED
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.
JQuery to Tizen UX Conversion Tutorial: Page Carousel Tutorial - Part 1
PUBLISHED
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.
JavaScriptWebPage: Sample code for using Web class
PUBLISHED
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 using Tizen Time API
PUBLISHED
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.