UIの設計

詳細アイコン 詳細

  1. まだ開いていない場合は、アプリケーション・ナビゲータでJSFページ・アイコン Start.jsp」をダブルクリックして、ビジュアル・エディタでページを開きます。
  2. コンポーネント・パレットで、ドロップダウン・リストから「JSF」を選択し、「HTML」パネルを開きます。
    詳細アイコン 詳細
  3. 入力テキスト・アイコン 入力テキスト」をクリックしてビジュアル・エディタにドラッグし、空白ページにドロップして入力テキスト・フィールドを追加します。
  4. コマンド・ボタン・アイコン コマンド・ボタン」をクリックしてページにドラッグし、追加した入力フィールドの横にドロップします。プロパティ・インスペクタの「共通」セクションで「値」フィールドをクリックし、デフォルト・テキストをClick hereに変更します。
    詳細アイコン 詳細
  5. コンポーネント・パレットで、ドロップダウン・リストから「HTML」を選択し、次に「共通」パネルを開きます。Line Breakアイコン Line Break」をクリックし、ページにあるコマンド・ボタンの横にドラッグ・アンド・ドロップします。
  6. 「構造」ウィンドウで、「br」を右クリックし、「brの後ろに挿入」 次の選択 「JSF HTML」の順に選択します。「JSF HTMLアイテムの挿入」ダイアログで、出力テキスト・アイコン 出力テキスト」を選択して「OK」をクリックします。これで、出力テキスト・フィールドが入力テキスト・フィールドの下に追加されます。
  7. 出力テキスト・コンポーネントのプロパティ・インスペクタの「共通」セクションで、「値」フィールドのデフォルト・テキストを削除して[Enter]キーを押し、ページ上の出力テキスト・フィールドを空白にします。
  8. 「すべて保存」アイコン すべて保存」をクリックして作業を保存します。
    詳細アイコン IDE表示の詳細説明
キュー・カード・アイコン 次のステップ