« 【Android】 アプリの管理画面を直接起動する(設定画面から起動するアレ) | トップページ | 【Tizen】別の画面を起動する »

2013年5月 6日 (月)

【Tizen】Tizen Web UI Frameworkを使って画面を作成する ~画面構成について~

Tizenの"Web UI Framework"の使い方について調べてたことを、

ここに書き残しておきたいと思います。

Tizenでは、標準のhtmlでガリガリとソースを書くことも出来るようですが、

どうやらこの"Web UI Framework"を使用することが一般的なようです。

●Tizen Web UI Frameworkの画面構成について

Web UI Frameworkの画面は、ヘッダー、コンテント、フッターの3つの要素から

構成されます。図に表すと、以下のようになります。

Tizen_blog7_2


●画面の単位について

画面1つあたりを、pageという単位で表されます。

よって、複数の画面を持つアプリは、複数のpageを持つということになります。

Androidでいうところの、Activityに当たります。

Tizen_blog72_4

●ソースを記述する

実際に、画面を構成するソースを記述していきます。

まず、画面を構成する各要素のタグ名等について、表にまとめておきます。

要素名 タグ プロパティ
ヘッダー div data-role header
コンテント div  data-role content
フッター div data-role footer
ページ div data-role page

では、早速ソースを書いてみます。

ソースは、以下のようになります。

あとは、各要素のタグに、配置したいウィジェットを配置すれば

手軽に画面が作れます。

« 【Android】 アプリの管理画面を直接起動する(設定画面から起動するアレ) | トップページ | 【Tizen】別の画面を起動する »

Tizen」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1882306/51509307

この記事へのトラックバック一覧です: 【Tizen】Tizen Web UI Frameworkを使って画面を作成する ~画面構成について~:

« 【Android】 アプリの管理画面を直接起動する(設定画面から起動するアレ) | トップページ | 【Tizen】別の画面を起動する »

購入


無料ブログはココログ