tizenux ux design uxpatternsSubscribe to RSS - tizenux ux design uxpatterns

Tizen UX Conversion Tutorial: Expandable List - Part 1

Description

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

This article explains how to create Expandable List UI and image scroller using Tizen platform. The expandable list shows a parent list view where the list items expand into child lists.

Tizen UX Conversion Tutorial: Editable Table - Part 1

Overview

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

TableForm HTML Page

Editable Table is an appplication, where user is allowed to change the table content using selector and checkbox as shown in below screenshot. In this form, theme has been applied to table having different colors for alternative rows.

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: 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).

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.