ページレイアウトの作成と設計

Page DesignerビューでWeb UI Builder[x]アプリケーションページを作成し、設計することができます。

新しいWeb UI Builderアプリケーションページの作成

Web UI Builderアプリケーションに複数のページを作成することができます。新しいページを追加するには次の手順に従います。

IDEでFile > New > Otherを選択します。
Newウィンドウで、Tizen > Tizen Page Fileを選択します。
New Page Fileウィンドウで、ページのUI Builderプロジェクトを選択し、新しいページIDを入力します。
Finishをクリックします。

新しいページがPage Designerビューに表示されます。

Page Designerビューの使用

次の操作によってPage Designerビューでデザインエリアの設定変更ができます。

端末の向きを変更する
画面の拡大と縮小を行う
利用可能な画面スペースにデザイン領域を広げる
ディスプレイ解像度を変更する

Page DesignerビューでUIウィジェットを追加し、そのプロパティを設定できます。

Project Explorerビューで、ウィジェットを追加するページファイルをダブルクリックします。

Page Designerビューでページファイルのデザインエリアが表示されます。
Paletteエリアからデザイン領域にウィジェットをドラッグします。

デザイン領域かOutlineビューでウィジェットを選択します。
Propertiesビューでウィジェットのプロパティを設定します。

デザイン領域の中でウィジェットを移動することができます。

ウィジェットの配置

Page Designerで様々なウィジェットを配置することができます。

ウィジェットを配置するには、Paletteエリアからデザイン領域にウィジェットをドラッグします。デザイン領域の次の空の位置が点線の四角形でマークされてます。親ウィジェットまたはコンテンツオブジェクトは青色で表示されます。

リストのようなコンテナに子ウィジェットを追加することができます。たとえば、リストコンテナウィジェットにリスト項目ウィジェットを追加することができます。デザイン領域でリストコンテナウィジェットがリスト項目ウィジェットを含んでいない場合、リストウィジェットに"リスト項目をドロップ"というメッセージが表示されます。

コンテナウィジェットには特定のウィジェットのみ追加することができます。たとえば、リストウィジェットはリスト項目ウィジェットのみ追加することができます。リスト項目ウィジェットを適切でないウィジェットに追加しようとすると、デザイン領域は赤色に変化します。この赤色はウィジェットが配置できないことを意味します。ウィジェットを適切なコンテナウィジェットに追加すると、デザイン領域は青色に変化します。この青色はウィジェットが配置できることを意味します。