ページエディタの基本

App Maker のページエディタでは、アプリのインターフェースを簡単かつ視覚的に構築できます。ウィジェットをキャンバスにドラッグしてデータにバインドすると、UI が完成します。

ページエディタは、UI を構築するキャンバス、必要な UI 要素がすべて含まれたウィジェット パレット、詳細を制御できる右サイドバーという、3 つの主要部分からなります。

キャンバス

キャンバスを使用すると、アプリの UI を構成するウィジェットというコンポーネントの配置と調整ができます。アプリを公開またはプレビューするまでプレースホルダを使用してレンダリングされる databound ウィジェットのプロパティを除き、キャンバスは WYSIWYG(表示どおりの出力)です。

キャンバスにウィジェットを追加したら、キャンバスのサイズを変更して、さまざまな画面サイズでアプリがどのように表示されるかを確認できます。詳しくは、さまざまな画面サイズのスタイルをご覧ください。

ウィジェット パレット

ウィジェットをウィジェット パレットからキャンバスにドラッグします。一部のウィジェットには、データにバインドするうえで役立つウィザードがあります。デフォルトのデータソースがページに設定されている場合、一部のデータ バインディングは自動的に行われます。

右サイドバーには、UI の構築に必要な 3 種類のツールがあります。

ツール説明
プロパティ エディタ選択されたウィジェットがデータを操作する方法、イベントに応答する方法、ページに読み込む方法などを決定するプロパティのリスト。
スタイル エディタキャンバス上のウィジェットの外観を制御するパネル。組み込みのテーマを選択し、CSS を使用して独自のスタイルを作成できます。
アウトラインページのウィジェット間の関係を表示するリスト。ウィジェットを非表示にして所定の位置に固定できます。

プロパティ エディタによるデータ バインディング

プロパティ エディタを使用すると、ウィジェットのほとんどの面(配置場所、表示内容、動作方法)を制御するプロパティを編集できます。たとえばラベル ウィジェットには、表示するテキストを決定する text プロパティがあります。

プロパティを設定する方法は 3 つあります。プロパティを複数の方法で設定できる場合は、プルダウン リストアイコン arrow_drop_down をクリックしてプロパティの設定方法を選択します。

  • 静的値等しい) - 直接入力できますがユーザーがアプリを操作しても変更されないため、静的値は便利です。

  • バインディング式バインディング) - UI をデータモデルに接続でき、データの入力時や編集時に動的に応答できるようになるため、バインディング式は強力です。

  • 選択more_horiz) - プリセット オプションの中から選択するか、複数のオプションを定義(および選択)します。たとえば、ページのデータソースを選択するか、クラス名のリストを styles プロパティに追加します。

キャンバスのヒント

キャンバスを扱うときのヒントとコツは次のとおりです。

  • 複数のウィジェットを選択するには、Shift キーを押しながらマウスをドラッグします。

  • 複数のウィジェットを選択すると、グループとしての移動や共有プロパティの編集ができます。

  • コンテキスト依存のメニューを表示するには、ウィジェットやキャンバスを右クリックします。

  • キャンバスのスナップ配置ガイドラインを一時的に無効にするには、Ctrl キーを押したままウィジェットを並べ替えます。

  • 一度に 1 ピクセルずつウィジェットを移動するには、矢印キーを使用します。

関連情報