レイアウトの最適化

詳細アイコン 詳細

  1. エディタ・ウィンドウで、「br-o.jspx」タブをクリックして参照ページを前面に表示します。
  2. ビジュアル・エディタで列をクリックします。
  3. 「構造」ウィンドウで「tr:table」を選択します。
  4. プロパティ・インスペクタで、「行」プロパティの値を2に変更して[Enter]を押します。
  5. 「構造」ウィンドウで、「trh:html」の下にある「trh:head - br-o」を右クリックし、「HTML/JSPの挿入」を選択します。
  6. 次の行をテキスト・ボックスにコピー・アンド・ペーストし、テキストをカッコ内に挿入します。次にテキスト・ボックスを閉じます。
    meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/
    詳細アイコン 詳細
  7. エディタ・ウィンドウで、「ed-o.jspx」タブをクリックして編集ページを前面に表示します。
  8. 「構造」ウィンドウで、「trh:html」の下にある「trh:head - ed-o」を右クリックし、「HTML/JSPの挿入」を選択します。
  9. 次の行をテキスト・ボックスにコピー・アンド・ペーストし、テキストをカッコ内に挿入します。次にテキスト・ボックスを閉じます。
    meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/
  10. 「ed-o.jspx」の「構造」ウィンドウで、「tr:panelGroupLayout」「tr:panelFormLayout」の順に開きます。
  11. 「tr:inputText」のコンポーネントである「OrderId」「CustomerId」「ShipToAddressId」および「ShippingOptionId」を選択します。
  12. プロパティ・インスペクタで、「列」プロパティの値を5に変更して[Enter]を押します。
    詳細アイコン 詳細
  13. ビジュアル・エディタで、「tr:inputText」のコンポーネントである「OrderDate」「OrderShippedDate」「OrderTotal」「ShipToName」「ShiptoPhoneNumber」および「GiftwrapMessage」を選択します。
  14. プロパティ・インスペクタで、「列」プロパティの値を12に変更して[Enter]を押します。
  15. エディタ・ウィンドウで「faces-config.xml」タブをクリックして、このファイルを手前に表示します。
  16. ページ・フロー・ダイアグラムで、「br-o.jspx」ページ・アイコンを右クリックして「実行」を選択します。
    詳細アイコン IDE表示の詳細説明
キュー・カード・アイコン 次のステップ