selectInputColorおよびselectInputDateについて

ユーザーがダイアログに移動して色または日付ピッカーから値を選択し、色または日付の値を入力できるようにするには、selectInputColorまたはselectInputDateコンポーネント(oracle.adf.view.faces.component.UIXSelectInput)を使用します。

selectInputColor

af:selectInputColorコンポーネントは、色の値を入力するテキスト入力フィールドを作成します。たとえば、JSFページに次のコードを指定できます。

<af:selectInputColor label="Enter or select a color"
                     value="#{myBean.colorValue1}"
                     tip="Use format (#RRGGBB) or (r,g,b)"/>    

ラベルと色見本ボタンを備えた入力フィールド

前述の図のように、入力フィールドにはラベルを指定できます。入力フィールドの後には色見本/パレット・ボタンがあります。ユーザーは入力フィールドに色の値(#FFCCFFなど)を直接入力するか、ボタンをクリックして色の値を選択するダイアログを表示できます。デフォルトでは、selectInputColorコンポーネントは、色の値を設定および表現する際に#RRGGBB色フォーマット・パターンを受け入れて使用します。

ユーザーによる色の値の指定方法(入力または選択)に関係なく、色の値が入力または選択されると、選択した色で色見本が塗りつぶされます。ユーザーが色見本/パレット・ボタンをクリックすると、デフォルトのダイアログ・ウィンドウが開き、49色標準パレット(透明なエントリ1つを含む)と、「取消」および「適用」ボタンが表示されます。カラー・パレットの上には入力フィールドと空の正方形ボックスがあります。

「取消」と「適用」ボタンを備えたカラー・パレット・ダイアログ

ユーザーがダイアログのパレットで色をクリックすると、選択した色の16進値が入力フィールドに表示され、正方形ボックスが選択した色で塗りつぶされます。「適用」ボタンをクリックすると、ダイアログが閉じて、元のウィンドウで現在フォーカスが当てられている入力フィールドに、選択した色の値が自動的に挿入されます。

selectInputColorで受入れ可能な色フォーマット・パターン、およびselectInputColorが色の値の表示に使用するフォーマットを制御するには、convertColorコンポーネントを使用します。次に例を示します。

<af:selectInputColor label="Enter or select a color"...>
  <af:convertColor patterns="rrr-ggg-bbb #RRGGBB"
                   transparentAllowed="false" />
</af:selectInputColor>    

selectInputColorコンポーネントをchooseColorコンポーネントと併用すると、ユーザーは、色の値を選択する補助ダイアログに移動せずに、インライン・カラー・パレットで色を選択できます。詳細は、「chooseColorおよびchooseDateについて」を参照してください。

selectInputDate

af:selectInputDateコンポーネントは、日付の値を入力するテキスト入力フィールドを作成します。たとえば、JSFページに次のコードを指定できます。

<af:selectInputDate label="Enter or select a date"
                    value="#{myBean.date1}"/>    

ラベルとカレンダ・ボタンを備えた入力フィールド

前述の図のように、入力フィールドにはラベルを指定できます。入力フィールドの後にはカレンダ・ボタンがあります。ユーザーは入力フィールドに日付の値(7/04/2005など)を直接入力するか、ボタンをクリックして日付の値を選択するダイアログを表示できます。デフォルトでは、selectInputDateコンポーネントは、日付の値を設定および表現する際に現在のロケールのshortish日付スタイルを受け入れて使用します。

ユーザーがカレンダ・ボタンをクリックすると、デフォルトのダイアログ・ウィンドウが開き、現在の年月のカレンダと「取消」ボタンが表示されます。カレンダの上には、月と年を選択する2つのドロップダウン・リストがあります。月のドロップダウン・リストの前には、表示を前の月に切り替えるボタンがあり、年のドロップダウン・リストの後には、表示を次の月に切り替えるボタンがあります。

「取消」ボタンを備えたカレンダ・ダイアログ

ユーザーがダイアログのカレンダで日付をクリックすると、ダイアログが閉じて、元のウィンドウで現在フォーカスが当てられている入力フィールドに、選択した日付の値が自動的に挿入されます。

selectInputDateで受入れ可能な日付書式パターン、およびselectInputDateが日付の値の表示に使用するフォーマットを制御するには、convertDateTimeコンポーネントを使用します。次に例を示します。

<af:selectInputDate label="Enter or select date"...>
  <af:convertDateTime pattern="yyyy/M/d"
                      secondaryPattern="d/M/yyyy" />
</af:selectInputDate>    

selectInputDateコンポーネントをchooseDateコンポーネントと併用すると、ユーザーは、日付の値を選択する補助ダイアログに移動せずに、インライン・カレンダで日付を選択できます。詳細は、「chooseColorおよびchooseDateについて」を参照してください。

ダイアログのサポート

ADF Facesで提供されるデフォルトの色またはカレンダ・ダイアログを使用するかわりに、色およびカレンダについて独自のカスタム・ダイアログを用意できます。カスタム・ダイアログを起動するには、selectInputColorまたはselectInputDateaction属性をdialog: 結果に設定します。次に例を示します。

af:selectInputDate label="Pick a date:"
                   value="(Empty)"
                   action="dialog:chooseDate"/>    

カスタム・ダイアログは、ColorまたはDateオブジェクト、または文字列を戻します。ダイアログの詳細は、「ADF Facesのダイアログ・フレームワークについて」を参照してください。


ADF Faces入力コンポーネントの概要
inputおよびselectInputフィールドの作成
ADF Facesコンバータおよびバリデータの使用