Master Detail
Master Detailパターンを使用すると、項目のマスターリストと各項目に関連する詳細を表示できます。たとえば、従業員のリストと各従業員に関する詳細を表示できます。
Master Detail UIパターンの使用方法
-
Service Studioのツールボックスで
Master Detail
を検索します。Master Detailウィジェットが表示されます。
-
ツールボックスから、Master Detailウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
デフォルトで、Master Detailウィジェットには右プレースホルダと左プレースホルダ(リストを想定)が含まれています。
-
リストを読み込むため、画面名を右クリックして[Fetch Data from Database]を選択し、Aggregateを作成します。
-
データベースエンティティを追加するため、画面上をクリックし、関連するエンティティを選択して[OK]をクリックします。この例では、Userエンティティを使用します。
Aggregateの名前は自動的に追加されます。この例では、Aggregateの名前はGetUsersです。
-
[Interface]タブで画面名をダブルクリックし、[LeftContent]プレースホルダでListウィジェットを選択します。[Properties]タブの[Source]ドロップダウンで、先ほど作成したAggregateを選択します。この例では、GetUsers.Listです。
-
[Interface]タブで、画面の左側に表示するアトリビュートに移動して、それをListにドラッグします。この例では、Nameアトリビュートを使用します。
これにより、画面の左側にすべてのユーザー名が表示されます。
-
リスト内の各項目をユーザーが選択できるようにするため、ListのExpressionを右クリックして[Link to -> New Client Action]を選択し、ユーザーアクションを作成します。
-
新しいクライアントアクションをダブルクリックして、名前を入力します。この例では、「ClickSelectedUser」という名前を付けます。
-
ツールボックスからAssignロジックをクライアントアクションに追加し、[Value]ドロップダウンでExpressionエディタを選択します。現在のユーザーIDに移動してダブルクリックし、[Done]をクリックします。
-
このユーザーIDを保存するため、画面名を右クリックして[Add Local Variable]を選択し、ローカル変数を作成します。変数の名前を入力します。この例では、「SelectedUserId」という名前を付けます。
-
Assignロジックを選択し、[Variable]ドロップダウンで作成したローカル変数(この例では、[SelectedUserId])を選択します。
注記: これで、Master Detailウィジェットの左側に表示される情報がすべて作成されました。以下の手順では、Master Detailウィジェットの右側に表示される情報を作成します。
-
選択されているユーザーの詳細を画面の右側に表示するため、画面名を右クリックして[Fetch Data from Database]を選択し、新しいAggregateを作成します。
-
Aggregateの名前を入力します。この例では、「GetUserDetails」という名前を付けます。
-
データベースエンティティを追加するため、画面上をクリックし、関連するエンティティを選択して[OK]をクリックします。この例では、Userエンティティを使用します。
-
[GetUserDetails]画面で、[Filters]をクリックして[Add Filter]をクリックします。
-
フィルタ条件エディタで以下の条件を入力し、[Done]をクリックします。
User.Id = SelectedUserId
これにより、Userエンティティのすべての結果を現在選択されているユーザーでフィルタリングします。
-
クライアントアクション名(この例では、ClickSelectedUser)をダブルクリックし、GetUserDetails Aggregateをクライアントアクションにドラッグします。これにより、現在選択されているユーザーでAggregateが実行されます。
- 画面名をダブルクリックし、GetUserDetails Aggregateから[RightContent]プレースホルダに表示するアトリビュートをドラッグします。この例では、UsernameアトリビュートとEmailアトリビュートを使用します。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
プロパティ | 説明 |
---|---|
LeftPercentage(Decimal型): オプション | LeftContentの幅をパーセンテージで設定します。デフォルト値は50%です。 |
OpenedOnPhone(Boolean型):オプション | スマホ上で詳細が開かれているかどうかを保持する変数。デフォルト値はFalseです。 |
Height(Text型):オプション | ウィジェットの高さ(ピクセル単位または%)を設定します。デフォルトでは、ウィンドウからタイトルとヘッダーを除いた高さです。 |
他のパターンとの互換性
このパターンは親の高さに合わせるため、画面コンテンツ内で単独で使用する必要があります。また、Tabsなど、スワイプイベントを使用するパターン内でのMaster Detailパターンの使用は避けてください。