レスポンシブ・アプリケーション表示ロジックの例

次の例は、レスポンシブ・アプリケーションの表示ロジックを構成する方法を示しています。デバイスの画面サイズ(小、中、大の画面など)に基づいてさまざまなフィールドを表示する動的コンポーネントが必要なとします。次に、現在のユーザー・デバイスの画面サイズをチェックするルールを作成し、その画面サイズに必要なフィールドを含むレイアウトを適用します。

説明するには、デフォルトのレイアウトに次の従業員フィールドを表示する動的フォームを検討してください: ID、名前、部門、電子メール、採用日。ユーザー・デバイス画面が小さい場合は、名前フィールドと電子メール・フィールドのみのある特定のレイアウト(たとえば、SmallScreenレイアウト)をページに表示できます。ユーザー・デバイス画面が中の場合、名前、部門および電子メール・フィールドを含む別のレイアウト(MediumScreenレイアウトなど)をページに表示できます。ユーザー・デバイス画面が大きい場合は、defaultレイアウトが表示される場合があります。

レスポンシブ・ロジックのルール・セットを構成するには:

デフォルトのルールを更新して、デバイスの画面サイズが大きいときにデフォルトのレイアウトを表示します:
1. ルール「表示ロジックの設定」セクションで、「クリックして条件を追加」をクリックします。
2. 属性ドロップダウン・リストの「レスポンシブ」の下にあるlgOnlyを選択し、演算子リストから===を選択し、いずれかの等号を削除し、値としてtrueを選択します。
3. 「完了」をクリックします。
「図responsive-lg.pngの説明」
必要に応じて既存のルールを複製し、さらにルールを作成するための基礎として使用します(この場合はMediumScreenおよびSmallScreenルール)。このステップでは、特定のレイアウトのコピーを作成するオプションがあり、その後、デバイス画面が小さいときやメディアの場合に、必要なフィールドを表示するように更新できます。
1. 複製アイコン()をクリックし、「重複するルール」ダイアログ・ボックスに新規ルールの名前を入力します。
  
  開始点として使用するレイアウトのコピーも作成するには、チェックボックスが選択されていることを確認します。「複製」をクリックします。
2. 新しいルールを編集して条件を定義します。例を続けるには、現在のユーザー画面サイズが中の場合にmdOnly属性を使用してMediumScreenレイアウトを表示し、現在のユーザー画面サイズが小さいときにsmOnly属性を使用してSmallScreenレイアウトを表示します。
3. 新しいルールの構成の一環として、「レイアウト」タブ(MediumScreen and SmallScreen)で新しく作成されたレイアウトをクリックし、デバイス画面が小さい(名前とEメール)とき、および中(名前、部門およびEメール)のときに表示するフィールドを選択します。
「図responsive-all.pngの説明」
「上に移動」および「下に移動」ボタンを使用して、評価する順序でルールが設定されていることを確認します。
ページ・デザイナ・ツールバーの様々な画面サイズを使用してアプリケーションをテストします。たとえば、iPhoneを使用して小さい画面の表示ロジックをテストし、iPadを使用して中サイズの画面表示をテストし、デスクトップを使用して大きい画面表示をテストします。