Faces JSP ページへの入力コンポーネントの追加

入力コンポーネントは、ユーザーと対話して、対話の結果を処理のためにサーバーに送り返します。 Faces JSP ページに追加する入力コンポーネントは、 Web アプリケーションのデータを作成/更新する方法をユーザーに提供します。 パレットの「Faces コンポーネント」ドロワーにおける入力コンポーネントには、「入力」、「入力テキスト領域」、 「リッチ・テキスト領域」、「入力 - パスワード」、および「入力 - 非表示」などがあります。

始める前に

  1. Faces JSP 対応の Web プロジェクトの作成 (JSF 1.x).
  2. Faces JSP ページの作成 (JSF 1.x) を行います。

このタスクについて

入力コンポーネントを追加する方法は、コンポーネントによって異なります。

表 1. Faces JSP ページへの入力コンポーネントの追加
入力コンポーネント1 タグ 説明 ページにコンポーネントを追加する方法
入力 <h:inputText> 数値、日付、時刻、またはフォーマット済み文字列などのテキストまたはフォーマット済みテキストを入力するために使用される、単一行入力コントロールを作成します。 このコントロールには、キー・ストローク管理、先行入力サポート、ヘルパー・ボタンなどの、 さまざまな種類の入力支援コンポーネントを付加することができます。 以下のタイプのデータ用に入力フィールドを作成できます。
  • inputText
  • convertNumber
  • convertDateTime
  • convertMask
パレットからページに「入力」コンポーネントをドラッグします。
入力 - テキスト領域 <h:inputTextarea> 長い、フォーマットされていないテキストを入力するために使用される、 複数行入力コントロールを作成します。 パレットからページに「入力 - テキスト領域」コンポーネントをドラッグします。
入力 - リッチ・テキスト領域 <r:inputRichText> リッチ・テキスト・エディターのコンポーネントを挿入します。 「入力 - テキスト領域」コンポーネントと同様、 このコンポーネントは複数行にテキストを持つことができます。 「入力テキスト領域」とは異なり、 このコンポーネントにはさまざまなフォント、サイズ、テーブル、リンク、 番号付リスト、順不同リストなどを含めることが可能です。 パレットからページに「入力 - リッチ・テキスト領域」コンポーネントをドラッグします。
注: このコンポーネントは、パレットの「拡張 Faces コンポーネント」ドロワーでのみ使用可能です。
ヘルパー - 日付ピッカー <hx:inputHelperDatePicker> inputText フィールドに日付ピッカー・ヘルパー・ボタンを追加します。 ヘルパー・ボタンをクリックすると、 日付の選択に使用できるカレンダーを含むポップアップが表示されます。
  1. パレットからページに「入力」コンポーネントをドラッグします。
  2. 「入力」コンポーネントの「プロパティー」ビューの「h:inputText」タブで、 「フォーマット」リストから「日付/時刻」を選択します。
  3. 「ヘルパー・ボタンの表示」をクリックします。
ヘルパー - スライダー <hx:inputHelperSlider> inputText フィールドに数値スライダー・ヘルパー・ボタンを追加します。 ヘルパー・ボタンをクリックすると、数値の選択に使用できるスライダーを含むポップアップが表示されます。
  1. パレットからページに「入力」コンポーネントをドラッグします。
  2. 「入力」コンポーネントの「プロパティー」ビューの「h:inputText」タブで、 「フォーマット」リストから「数値」を選択します。
  3. 「ヘルパー・ボタンの表示」をクリックし、「タイプ」リストで「スライダー」をクリックします。
ヘルパー - スピナー <hx:inputHelperSpinner> inputText フィールドに上と下のスピナー・ボタンのペアを追加します。 スピナー・ボタンをクリックすると、数値または時刻値が増減します。
  1. パレットからページに「入力」コンポーネントをドラッグします。
  2. 「入力」コンポーネントの「プロパティー」ビューの「h:inputText」タブで、 「フォーマット」リストから「数値」を選択します。
  3. 「ヘルパー・ボタンの表示」をクリックし、「タイプ」リストで「スピナー」をクリックします。
*入力 - 非表示 <h:inputHidden> 非表示の入力コンポーネントを挿入します。 このコンポーネントは、開発者がページ間またはページ上のコントロール間でデータを受け渡す際に、 よく使用されます。 パレットからページに「入力 - 非表示」コンポーネントをドラッグします。
入力 - パスワード <h:inputSecret> パスワード入力フィールドをページに追加します。 このフィールドに入力されたテキストは変更された形式 (通常はアスタリスク) でユーザーにエコーされ、ブラウザーは他のプログラムに対し、パスワードが平文としてアクセスされないように保護しようとします。 パレットからページに「入力 - パスワード」コンポーネントをドラッグします。
注: このコンポーネントは、パレットの「拡張 Faces コンポーネント」ドロワーでのみ使用可能です。
ファイル・アップロード <hx:fileupload> ファイルをアップロードするための入力フィールドと、 関連する「参照」ボタンを表示します。 「ファイル・アップロード」コンポーネントについて詳しくは、Web ページへのファイル・アップロード・コンポーネントの追加を参照してください。 パレットからページに「ファイル・アップロード」コンポーネントをドラッグします。
注: このコンポーネントは、パレットの「拡張 Faces コンポーネント」ドロワーでのみ使用可能です。
選択 - カレンダー <h:inputMiniCalendar> 小さなカレンダーをページに追加します。ユーザーは、カレンダー内の日付をクリックすることにより、日付を選択できます。 パレットからページに「選択 - カレンダー」コンポーネントをドラッグします。
注: このコンポーネントは、パレットの「拡張 Faces コンポーネント」ドロワーでのみ使用可能です。
チェック・ボックス <h:selectBooleanCheckbox> ラベルのない Boolean 型チェック・ボックスを作成します。このコンポーネントについて詳しくは、 JSF ページへの選択リストの追加を参照してください。 パレットからページに「チェック・ボックス」コンポーネントをドラッグします。
チェック・ボックス・グループ <h:selectManyCheckbox> ラベル付きのチェック・ボックスのセットを作成します。 ユーザーは、ボタンのリストからゼロ個またはそれ以上のボタンを選択できます。 このコンポーネントについて詳しくは、JSF ページへの選択リストの追加を参照してください。 パレットからページに「チェック・ボックス・グループ」コンポーネントをドラッグします。
ラジオ・ボタン・グループ <h:selectOneRadio> ラベル付きのラジオ・ボタンのグループを作成します。 ユーザーは、ボタンのリストから 1 つを選択できます。 このコンポーネントについて詳しくは、JSF ページへの選択リストの追加を参照してください。 パレットからページに「ラジオ・ボタン・グループ」コンポーネントをドラッグします。
コンボ・ボックス - 単一選択 <h:selectOneMenu> ユーザーが 1 つの項目を選択するドロップダウン・コンボ・ボックスを表示します。 コンボ・ボックスの入力フィールドは直接編集することはできません。このコンポーネントについて詳しくは、JSF ページへの選択リストの追加を参照してください。 パレットからページに「コンボ・ボックス」コンポーネントをドラッグします。
コンボ・ボックス - 複数選択 <h:selectManyMenu> ユーザーが 1 つ以上の項目を選択するドロップダウン・コンボ・ボックスを表示します。 コンボ・ボックスの入力フィールドは直接編集することはできません。このコンポーネントについて詳しくは、JSF ページへの選択リストの追加を参照してください。 パレットからページに「コンボ・ボックス - 複数選択」をドラッグします。
注: このコンポーネントは、パレットの「標準 Faces コンポーネント」ドロワーでのみ使用可能です。
色の選択 <h:selectOneColor> ユーザーが色を選択できるドロップダウン・コンボ・ボックスを表示します。 コンボ・ボックスの入力フィールドは直接編集することはできません。 パレットからページに「選択 - カラー」コンポーネントをドラッグします。
注: このコンポーネントは、パレットの「拡張 Faces コンポーネント」ドロワーでのみ使用可能です。
リスト・ボックス - 単一選択 <h:selectOneListbox> ユーザーが単一の項目を選択するリスト・ボックスを挿入します。 このコンポーネントについて詳しくは、JSF ページへの選択リストの追加を参照してください。 ページに「リスト・ボックス - 単一選択」コンポーネントをドラッグします。
リスト・ボックス - 複数選択 <h:selectManyListbox> ユーザーが複数の項目を選択できるリスト・ボックスを挿入します。 このコンポーネントについて詳しくは、JSF ページへの選択リストの追加を参照してください。 ページに「リスト・ボックス - 複数選択」コンポーネントをドラッグします。
1 リンクをクリックすると、コンポーネント・プロパティーが表示されます。

フィードバック