アプリケーションページ構造
以下の記事は、Tizen SDK Dev Guide にあるApplication Page Structure の日本語訳です。
その他のドキュメントの日本語訳はTIZEN 2.0 SDK Dev Guide 日本語訳 目次をご覧ください。
[x]が右横についているリンク先は、まだ日本語に翻訳していませんのでご了承下さい。
アプリケーションページ構造
TizenのWeb UIフレームワークでは、アプリケーションのページ構造はJQuiery Mobileに基づいています。JQuiery Mobileのページ構造はJQuery Mobleのページ構造についてのドキュメントに記載されています。
次の図に示すように、Tizenページはヘッダー、コンテンツ、フッターの3つの要素で構成されています。
Tizenのページ要素
ページとその要素（ヘッダー、コンテンツ、フッター）はすべて、特定のdata-roleプロパティを持つ<div>ブロックです。ヘッダは、上部に配置されページのタイトルを表示します。コンテンツはページのメインコンテンツを示し、ヘッダの下の領域に配置します。フッターが下部にあり、ページメニューを含んでいます。
アプリケーションにTizenページを追加するには、次のコードを使用します。
<div data-role="page" data-add-back-btn="footer">
<!--Page area-->
<div data-role="header"><!--Header area--></div>
<div data-role="content"><!--Content area--></div>
<div data-role="footer"><!--Footer area--></div>
</div>
ユーザーはデフォルトのヘッダーとフッターに任意のコンテンツを選択することはできませんし、デフォルトのヘッダーとフッターには、コンテキストメニューのイベントを発生しません。
次の表では、ページのオプションについて説明しています。
| オプション | 入力タイプ | 説明 |
|---|---|---|
| data-add-back-btn | 文字列 | ページの戻るボタンとその配置場所を設定します。使用可能な値はtrueとfalseで、デフォルト値はfalseです。 |
jQuery Mobileドキュメントに記載されているイベント用コールバックを、Tizenページがイベントのためにコールバックを定義することができます。
現在のページを更新するためにTizenページにrefreshメソッドを使用することができます。
| 注意 |
|---|
refreshメソッドはTizen2.0よりサポートされています。 |
次に読むドキュメント
日本語訳： yasuyk
This content is licensed under Creative Commons Attribution 3.0.
For details, see the Content License.
