TIZENアプリ開発研究ブログ 興味しんしんドリーム

このブログはTIZENアプリ開発情報を実践して情報を共有する為のブログです。

Tizen Wep App のサンプルを動かしてみよう(TizenWinset)

前提条件

本記事の内容を試す場合は、以下のソフトウェアが必要となります。

  1. Tizen SDK

    Tizen SDKをインストールされていない場合は、次の記事を参考にインストールしてください。

    Tizenアプリケーション開発環境の構築 (Mac OS® X)

  2. Google Chrome

    Tizen Webシュミレータを動作させるために必要です。次のURLからダウンロードしてください。

    http://www.google.co.jp/intl/ja/chrome/browser

    Tizen Web シュミレータについての詳細はWeb Simulatorを参照ください。

TizenWinset を動かしてみる

TizenWinsetは、Tizen SDK付属のWeb Appのサンプルです。

このサンプルから、Tizen Web UI フレームワークの使い方がわかります。

では、サンプルを動かしてみましょう。

Tizen IDEを起動します。

もしWebcome画面が表示されていたら、邪魔なのでWebcome画面を最小化するか消してしまいましょう。

f:id:softolet:20130406132645p:plain

メニューから File -> New -> Tizen Web Project を選択します。

f:id:softolet:20130406132721p:plain

Sample -> Web App -> TizenWinsetを選択します。

Project name に名前を入力します。ここでは、TizenWinsetにします。

「Finish」を押して次に進みます。

f:id:softolet:20130406132814p:plain

Project Explorer に TizenWinsetが配置されました。

これから、TizenWinsetをWeb シュミレータで動かします。

メニューから、 Run -> Run を選択します。

f:id:softolet:20130406133030p:plain

Tizen Web simulator Application を選択します。

「OK」を押すと次に進みます。

f:id:softolet:20130406133038p:plain

Web シュミレータ が立ち上がりました。 UIの項目別にリストに分けられています。

f:id:softolet:20130406134409p:plain

UIをそれぞれスクリーンキャプチャで紹介します。

  • Controls

    • Button

      f:id:softolet:20130406134506p:plain

    • Check

      f:id:softolet:20130406134621p:plain

    • Flip Toggle Switch

      f:id:softolet:20130406134641p:plain

    • Radio

      f:id:softolet:20130406134654p:plain

    • Searchbar

      f:id:softolet:20130406134709p:plain

    • Entry

      f:id:softolet:20130406134746p:plain

    • Time picker

      f:id:softolet:20130406134804p:plain

    • Progressbar

      f:id:softolet:20130406134825p:plain

    • Slider

      f:id:softolet:20130406134844p:plain

    • Segment Control

      f:id:softolet:20130406134906p:plain

    • Group Control(new segment)

      f:id:softolet:20130406134926p:plain

    • Token Text Area

      f:id:softolet:20130406134940p:plain

  • Page Layout

    • Naviframe

      f:id:softolet:20130406134957p:plain

    • Header/Footer(fixed/non-fixed) Control

      f:id:softolet:20130406135028p:plain

    • Back Button Control

      f:id:softolet:20130406135047p:plain

  • Tabbar

    • Tabbar

      f:id:softolet:20130406135103p:plain

    • Persist toolbar

      f:id:softolet:20130406135118p:plain

  • Scrollview

    • Horizontal Scroll

      f:id:softolet:20130406135131p:plain

    • Vertical Scroll

      f:id:softolet:20130406135143p:plain

    • XY Scroll

      f:id:softolet:20130406135238p:plain

    • Handler

      f:id:softolet:20130406135259p:plain

    • Scroll Jump

      f:id:softolet:20130406135311p:plain

  • List

    • List

      f:id:softolet:20130406135324p:plain

    • Autodividers

      f:id:softolet:20130406135340p:plain

    • Fastscroll

      f:id:softolet:20130406135405p:plain

  • Popup

    • Popup

      f:id:softolet:20130406135421p:plain

    • Context Popup

      f:id:softolet:20130406135452p:plain

  • Notification

    • TickerNoti

      f:id:softolet:20130406135514p:plain

    • TickerNoti Interval

      f:id:softolet:20130406135716p:plain

    • Small Popup

      f:id:softolet:20130406135731p:plain

    • Small Popup Interval

      f:id:softolet:20130406135742p:plain

  • Gallery

    • Gallery

      f:id:softolet:20130406135759p:plain

  • Virtual Grid

    • Virtual Grid

      f:id:softolet:20130406135815p:plain

    • Virtual Grid - Rotation

      f:id:softolet:20130406140655p:plain

    • Virtual Grid - List

      f:id:softolet:20130406140710p:plain

    • Virtual Grid - X

      f:id:softolet:20130406140723p:plain

    • Virtual Grid - Size

      f:id:softolet:20130406140736p:plain

  • Multimedia View

    • Multimedia view

      f:id:softolet:20130406140756p:plain

  • Programming Tips

    • Generate Elements by JS

      f:id:softolet:20130406140810p:plain

    • Using custom Globalize culture files

      f:id:softolet:20130406141037p:plain

    • 2 line text

      f:id:softolet:20130406140913p:plain

    • Example for using listview

      f:id:softolet:20130406140926p:plain

    • Page transitions

      f:id:softolet:20130406140941p:plain

以上で サンブル TizenWinset の紹介を終わります。

Tizen Dev Guide

TizenWinset についての概要はTizenWinset Sample Overview を御覧ください。