UIの設計

デモ・アイコン デモ          詳細アイコン 詳細

  1. 開いているエディタ・ページで、データ表の表示に使用しているページのタブ(listDepts.jsp)を選択し、ビジュアル・エディタに開きます。
  2. ページをクリックして、このページの上部に表示するテキスト(例: Our Departments)を入力し、[Enter]を押します。
  3. コンポーネント・パレットで、JSF HTMLページを選択して「データ表」を選択し、データ表の作成ウィザードを起動します。
  4. 初期画面ページが表示された後、「次へ」をクリックします。
  5. バインディング・ページで、「データ表をすぐにバインド」が選択されていることを確認し、「次へ」をクリックします。
  6. データ表のバインド・ページの「値」に対して、マネージドBeanに作成したメソッドの式(例: #{depts.departmentsList})を入力するか、「バインド」をクリックしてメソッドを検索して式を作成します。
  7. 「クラス」に対して、Modelプロジェクトに作成した完全修飾データ転送オブジェクト(例: model.DepartmentsLocalDTO)を入力するか、「参照」をクリックしてクラスを検索します。
  8. 「Var」に対して、この表の行を参照するために使用する名前(例: dept)を入力します。その後、「次へ」をクリックします。
    詳細アイコン 詳細
  9. ヘッダーおよび行データ・ページに、表の列に挿入される詳細が表示されます。「終了」をクリックします。
    詳細アイコン 詳細
  10. 開いているエディタ・ページで、ようこそページとして使用しているページのタブ(home.jsp)を選択して、ビジュアル・エディタに開きます。
  11. ページをクリックし、ページに表示するテキスト(例: Welcome)を入力して[Enter]を押します。
    詳細アイコン IDE表示の詳細説明

キュー・カード・アイコン 次のステップへ