ユーザーがダイアログに移動して色または日付ピッカーから値を選択し、色または日付の値を入力できるようにするには、selectInputColor
またはselectInputDate
コンポーネント(oracle.adf.view.faces.component.UIXSelectInput
)を使用します。
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について」を参照してください。
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
またはselectInputDate
のaction
属性をdialog:
結果に設定します。次に例を示します。
af:selectInputDate label="Pick a date:"
value="(Empty)"
action="dialog:chooseDate"/>
カスタム・ダイアログは、Color
またはDate
オブジェクト、または文字列を戻します。ダイアログの詳細は、「ADF Facesのダイアログ・フレームワークについて」を参照してください。
ADF Faces入力コンポーネントの概要
inputおよびselectInputフィールドの作成
ADF Facesコンバータおよびバリデータの使用
Copyright © 1997, 2006, Oracle. All rights reserved.