UIの設計

詳細アイコン 詳細

  1. エディタ・ウィンドウで、上部の「Register.jsp」タブを選択してページを手前に表示します。
  2. ビジュアル・エディタで、ページ上部にRegistration Formと入力します。
    詳細アイコン 詳細
  3. コンポーネント・パレットで、ドロップダウン・リストからHTMLページを選択して「共通」パネルを開きます。
  4. 表アイコン 表」をクリックしてビジュアル・エディタにドラッグし、ページにドロップして表を追加します。
  5. 「Tableの挿入」ダイアログで、行数を3、列数を2に設定します。その他はデフォルトをそのまま使用して「OK」をクリックします。
    詳細アイコン 詳細
  6. コンポーネント・パレットで、ドロップダウン・リストからJSFページを選択し、「HTML」パネルを開きます。
    詳細アイコン 詳細
  7. 入力テキスト・アイコン 入力テキスト」を表の1行目の第2列にドラッグ・アンド・ドロップします。
    詳細アイコン 詳細
  8. もう1つの入力テキスト・アイコン 入力テキスト」を2行目の第2列にドラッグ・アンド・ドロップします。
  9. コマンド・ボタン・アイコン コマンド・ボタン」を3行目の第2列にドラッグ・アンド・ドロップします。プロパティ・インスペクタの「共通」セクションで、「値」フィールドをクリックし、デフォルト・テキストをSign Me Upに変更します。
  10. ビジュアル・エディタで、第1列にテキストを入力して入力フィールドのラベルを作成します。最初に、1行目の第1列のセル内をクリックしてUsername:と入力します。2行目の第1列のセル内をクリックしてEmail:と入力します。
    詳細アイコン IDE表示の詳細説明
キュー・カード・アイコン 次のステップ