chooseColorおよびchooseDateについて

selectInputColorおよびselectInputDateコンポーネントは、ユーザーによる値の入力を支援するダイアログの起動ボタンを備えた入力フィールドを作成します。ユーザーは、第2のウィンドウに移動して色または日付の値を選択するかわりに、chooseColorまたはchooseDateコンポーネント(oracle.adf.view.faces.component.UIXChoose)を使用して、selectInputColorまたはselectInputDateコンポーネント(oracle.adf.view.faces.component.UIXSelectInput)で使用するインライン・カラー・パレットまたはインライン・カレンダを作成できます。

selectInputコンポーネントを使用して、色または日付のインライン・ピッカーを作成および使用するには、chooseColorまたはchooseDateコンポーネントと同じページにselectInputコンポーネントを配置します。

ピッカーで色または日付が選択されたときに、selectInputコンポーネントが、そのコンポーネント自体を更新するタイミングを把握するには、selectInputコンポーネントのchooseId属性を、chooseColorまたはchooseDateコンポーネントのid値に設定します。

インライン・カラー・パレット

af:chooseColorコンポーネントは、インライン・カラー・パレットを作成します。このパレットには、次の2セットの色を表示できます。

ヒント: これら2つの属性は、色(java.awt.Color)のリスト(java.util.List)または配列(java.util.ArrayList)にバインドできます。

最初の図は、「Pick a color」というラベルの入力フィールドを示しています。ラベルの下には49色標準パレットがあり、入力フィールドの横には正方形のボックスがあります。

入力フィールドの下の49色デフォルト・パレット

2番目の図では、80色標準パレットの下にある追加カスタム・パレットを示しています。

入力フィールドの下の80色標準パレットと4色カスタム・パレット

ユーザーが標準またはカスタム・パレットで色をクリックすると、入力フィールドには選択した色の16進値(#FF99FFなど)が自動的に挿入され、入力フィールドの横の正方形ボックスが選択した色で塗りつぶされます。

JSFページには、次のコードを指定できます。

...
<af:selectInputColor id="sic1"
                     chooseId="cp1"
                     label="Pick a color"
                     value="#{myBean.colorValue1}"/>
<af:chooseColor id="cp1"
                colorData="#{adfFacesContext.colorPalette.default80}"
                customColorData="#{myBean.colorArray}"/>
...    

バッキングBeanでは、カスタム・カラー・データに対して次のコードを指定できます。

...
import java.awt.Color;
import java.util.ArrayList;
...
public Color[] getColorArray()
{
  Color[] colorArray = new Color[4];
  colorArray[0] = _colorValue1;
  colorArray[1] = _colorValue2;
  colorArray[2] = _colorValue3;
  colorArray[3] = _colorValue4;
  return colorArray;
}

private Color _colorValue1 = new Color(255, 0, 0);
private Color _colorValue2 = new Color(0, 255, 0);
private Color _colorValue3 = new Color(0, 0, 255);
private Color _colorValue4 = new Color(255, 255, 0);
...     

注意: カラー・パレット・コンポーネントは、PDA、電話および音声のクライアント・エージェントではサポートされません。

インライン・カレンダ

af:chooseDateコンポーネントは、次の操作で使用できるインライン・カレンダを作成します。

次の図は、「Pick a date」というラベルの入力フィールドを示しています。入力フィールドの横にはカレンダ・ボタンがあります。ラベルと入力フィールドの下には、月と年を選択する2つのドロップダウン・リストがあります。月のドロップダウン・リストの前には前月ボタンがあり、年のドロップダウン・リストの後には翌月ボタンがあります。ドロップダウン・リストの下には、月と年のドロップダウン・リストに表示されている月と年に対応する一連の日を示したカレンダがあります。

入力フィールドの下のカレンダ(6月)

カレンダ内の数字をクリックすると、入力フィールドには、日付がデフォルトの日付書式(6/7/05など)で自動的に挿入されます。

JSFページには、次のコードを指定できます。

...<af:selectInputDate id="df1a"
                    chooseId="idp1"/>
<af:chooseDate id="idp1"/>
...    

インライン・カレンダから選択できる日付の範囲を制限するには、af:chooseDateの次の属性を設定します。

最小または最大日付の範囲外の日付は、カレンダでグレー表示(無効)になります。

注意: ADF Facesでは、部分ページ・レンダリングをサポートしていないクライアント・ブラウザに、カレンダ・コンポーネントはレンダリングされません。


selectInputColorおよびselectInputDateについて
ADF Faces入力コンポーネントの概要
色および日付ピッカーの作成