Sample CodeSubscribe to RSS - Sample Code

Tizen UX Conversion Tutorial: Long Form Tutorial - Part 1

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

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

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: Springboard-Based Navigation - Part 1

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

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

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

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.