ウィジェットをデータにバインドする

App Maker を使用すると、データ バインディングによってアプリの UI をデータに簡単に接続できます。データ バインディングは、ウィジェット プロパティとデータソースとの間の双方向リンクを確立します。このリンクにより、ウィジェットはモデル、リレーション、その他の App Maker プロパティのデータにアクセスして、データを更新できます。

データソース

データソースにより、ウィジェットからデータに簡単にアクセスできるようになります。主にデータモデル レコードやレコード関係などのデータを表す items リストが得られます。また、items リストで現在選択されているアイテムを表す、単数形の item もあります。ウィジェットはこのリストを使用して、レコードへのアクセス、関係の編集などを行います。

ウィジェットの現在のデータソースは、プロパティ エディタの datasource プロパティで確認できます。別のデータソースを明示的に割り当てない限り、ウィジェットは親ウィジェットからデータソースを継承します。割り当てられるのは、レイアウト ウィジェットのデータソースのみです。他のウィジェットはすべて継承を通じてデータソースを受け取るため、レイアウト ウィジェットを使用して他のウィジェットを視覚的にも論理的にもグループ化すると便利です。

モデル データソース

App Maker では、追加したモデルごとにモデル データソースが自動的に作成されます。モデル データソースは、アプリ内のウィジェットとサーバー上のデータとの間で橋渡しの役目を果たします。データソースは、サーバーに送信されたクエリから items リストを作成します。その後、ウィジェットはそのリストを使用することで、モデルからレコードを作成、読み取り、更新、削除できます。

モデル データソースの詳細

リレーション データソース

リレーション データソースはモデル データソースの拡張です。これによりユーザーは、選択したモデルのリレーションにアクセスし、変更できます。継承を使用して親ウィジェットのデータソースから現在選択されているレコードを見つけ、そのレコードに関係するレコードのリストを取得します。

リレーション データソースの items プロパティは、親ウィジェットの現在のレコードに関係する全レコードのリストです。item は、そのリストの単一のレコードです。リレーション データソースの item はレコードであるため、別のリレーション データソースに基づいてリレーション データソースを持つことができます。

リレーション データソースの詳細

その他のデータソース

モデル データソースとリレーション データソースが最も一般的ですが、App Maker では、アプリ内の任意のプロパティをデータソースとして使用できます。たとえば、ユーザー グループやカスタム プロパティをデータソースとして使用できます。他のデータソースにアクセスするには、[Choose datasource] ポップアップの下部にある [Advanced] をクリックします。

バインディング

バインディングは、ウィジェット プロパティと別のプロパティ(通常はそのウィジェットのデータソースのプロパティ)との間の双方向リンクです。バインディングは双方向であるため、バインドされた一方のプロパティへの変更は他方にも反映されます。たとえばテキスト ボックスの value プロパティを、オンボーディング アプリのモデル データソースの EmployeeName フィールドにバインドできます。ユーザーは、テキスト ボックスを使用してサーバー上の従業員名を更新できます。また、サーバー上の名前を変更すると、テキスト ボックスに表示されているテキストも自動的に更新されます。

バインディングを追加する

バインディング セレクタを開くには、プロパティ エディタでウィジェット プロパティの横にある arrow_drop_down chevron_right バインディング の順にクリックしてから、プロパティをクリックします。バインディング がすでに表示されている場合は、そのままプロパティをクリックします。

バインディング セレクタを使用すると、バインドされたプロパティが現在のウィジェットに対してどこにあるかを App Maker に知らせるバインディング パスを宣言することによって、バインディングを追加できます。セレクタには 2 つのモードがあります。

  • 単純: 単純バインディング セレクタは、データソースの現在のアイテムのプロパティを一覧表示し、選択に基づいて自動的にバインディング パスを作成します。バインディングが定義されていない場合や、定義されているバインディングが選択と一致する場合は、データソースを持つ任意のウィジェットに対してデフォルトで開きます。

  • 詳細: 詳細バインディング セレクタを使用すると、アプリ内の任意のプロパティをバインドできます。セレクタの上部にあるウィザードを使用してパスを生成するか、下部にある [Binding expression] フィールドに独自のパスを記述します。単純バインディング セレクタから [Open Advanced] をクリックして、詳細バインディング セレクタにアクセスします。デフォルトではデータソースのないウィジェットに対しても開き、また定義されたバインディングが単純バインディング セレクタの選択と一致しない場合はデータソースを持つウィジェットに対しても開きます。単純バインディング セレクタを表示するには、[Less...] をクリックします。

バインディング式

バインディング式は、バインディング パスの出力に対してオペレーションを実施できるようにする JavaScript 式です。単一のバインディング式には複数のバインディング パスを含められますが、JavaScript 式は 1 つのみです。複数の JavaScript 式が必要な場合は、バインディング式を使用してクライアント スクリプトを呼び出し、パラメータとしてバインディング パスを指定します。

App Maker は、式内の任意のバインディング パスの値が変化したとき、バインディング式を再計算します。バインディング式は、ウィジェットによるデータの表示方法にのみ影響し、バインディング パス内の実際のデータは変更できません。つまり、入力ウィジェットの value フィールドにはバインディング式を使用できません。代わりに単純バインディング パスを使用します。

バインディング式の例: "Hello, " + @user.username + ". My name is " + @widget.name + "."

射影

射影を使用すると、データソースの items リスト内のレコードからプロパティにアクセスできます。詳細バインディング ウィザードで ..projections.. オプションを使用するか、バインディング パスで投影演算子 .. を使用して、射影にアクセスします。たとえば name プロパティを持つ Employees データソースの場合、@datasources.Employee.items..name は、すべての従業員の名前のリストを返します。

カスタム プロパティ

カスタム プロパティは、単一のユーザー セッションのデータを格納する、ページレベルのプロパティです。カスタム プロパティは、複数のウィジェットのプロパティを単一の値にバインドする必要がある場合に便利です。たとえば、いくつかのメニュー ウィジェットの visible プロパティをブール値 ShowAll カスタム プロパティにバインドして、ウィジェットの公開設定をグループとして切り替えます。

ページのメインパネルを選択し、プロパティ エディタの [Custom Properties] グループをクリックして、カスタム プロパティを作成します。ウィザードの properties オプションかバインディング式の @properties ショートカットを使用して、詳細バインディング セレクタから現在のページのカスタム プロパティにアクセスします。別のページのカスタム プロパティにアクセスするには、ウィザードの page オプションか @pages ショートカットを使用します。

補足資料

  1. プロパティとバインディング: プロパティとバインディングを概念的に詳しく見ます。
  2. データソース: モデル データソースとリレーション データソースについて学びます。
  3. データモデルへの接続チュートリアル: リレーション データソースを実際に体験します。
  4. Client API - DataSource: クライアント スクリプトで使用可能なすべてのデータソース プロパティとメソッドを確認します。