カラー・ピッカー

<input type="text"> タグを、隣にボタンを含む フィールドに変更します。このボタンは、色の選択に使用するパレットを開く場合に使用できます。 コンポーネントは選択のみをサポートします。つまり、ユーザーは 色の名前を入力することはできず、代わりに色のリストから色を選択する必要があります。

JSFColorPicker コンポーネントは、カラー・パレットの表示およびその後の 色の選択に使用できるヘルパー・ボタンを、<input> フィールドに追加します。 入力フィールドのコンテンツは、カラー・スウォッチとして表示されます (オプションで、選択された色の名前がスウォッチに表示されます。)

JSFColorPicker は、 選択のみのコンポーネントです (色を入力することはできません)。つまり、このコンポーネントでは、 許容される選択項目のリストが事前に定義されます。許容される色のリストは、 コンポーネントの属性として指定されます。色は、16 進値で指定され、 オプションで、16 進値に一致する名前が付きます。 これは、値および値のラベルを指定する、<option> 子タグを含む HTML <select> タグと類似しています。

ヘルパー・ボタンは、入力フィールドの右側に追加されます。入力フィールドの 元の特性はすべて、ヘルパー・ボタンが追加された後もその制約内で維持されます。 例えば、入力フィールドが幅 120px に定義されている場合、 ヘルパー・ボタンが追加された結合コンポーネントの幅も 120px となります。このボタンには、入力フィールドに一致するスタイル・プロパティーが想定されます。 例えば、ボタンの境界線は入力フィールドの境界線と一致します。入力フィールドに適用される 適用可能な属性 (例えば、使用不可) も、このボタンに反映されます。

カラー・パレットを含むポップアップの振る舞いは、 Windows® ポップアップと同じです。 ポップアップでスウォッチをクリックすると、ポップアップは表示されなくなります。ポップアップの外側のページで任意の場所を クリックすると、ポップアップが表示されなくなります。ポップアップは通常、 入力フィールドの下に、左端に位置合わせして表示されます。ポップアップが入力フィールドの下に 収まらない (例えば、入力フィールドがウィンドウの下部付近にある) 場合、 入力フィールドの上に表示されます。これは、CSS クラスを介してスタイル設定できます。

コンポーネントを発行する JSF タグ

<hx:selectOneColor>

基本 HTML

<input type="text">

カラー・ピッカーの値は、 入力フィールドの値として渡されます。この値は、コンポーネント・コンストラクターで 指定される 16 進数のカラー値の 1 つである必要があります。最初にページに値が渡されない場合、 ピッカーは初期値を持ちません。

型テキストの入力に関連付けられたすべての属性が サポートされています。

型テキストの入力に関連付けられたすべてのイベント・ハンドラーが サポートされています。

JavaScript コンストラクター

hX_5.addComponent("id", new hX_5.JSFColorPicker(attributes)); 各部の意味は次のとおりです。

id

コンポーネントが付加される HTML タグの ID。

属性

コンマで区切られた属性のリスト。 各属性は、属性名と値から成る引用符付きストリングになっており、 コロンで区切られています (例: "label:MyLabel")。

表 1. JSF カラー・ピッカー属性

属性名

説明

button-border

入力フィールドに対するポップアップ・ボタンの表示方法を制御します。

button-color

ボタンの背景色を指定します。デフォルトでは、背景色は入力フィールドのボーダーの色に一致します。

css-prefix

カレンダーの外観を記述する、一連の CSS クラスの基底クラスです。

colors

セミコロン区切りの、色の値 (16 進数) のリスト。 ユーザーが色を選択できるパレットを表します。

color-names

リスト内の各色に対する、分かりやすい名前の並列リスト。

show-labels

これが指定された場合、 現在選択されている色の名前が、 カラー・スウォッチの上部にある入力フィールドに表示されます。 省略された場合は、名前は表示されません。 入力フィールドには、 現在選択されている色を示すカラー・スウォッチのみが表示されます。 アクセシビリティの関係上、 すべての場合において、色の名前は入力フィールドに存在します。 このオプションは、その名前を可視状態にするだけですので、 注意してください。

デフォルトのカラー・パレットは、以下の色で構成されています。
"#FDDDCE";"#FFD990";"#FFF799";"#C4DF9B";"#B3FFB2";"#7FCBAE";"#81D3EB";"#ADCDEC";"#D3B6D7";"#FCDEE0";
"#CC6666";"#FF9900";"#D3BD2A";"#8FB73E";"#6DB286";"#4F9BAA";"#6D9AB4";"#6F85C2";"#897AB9";"#B7798E";
"#ED1C24";"#FF6600";"#FFFF00";"#9ACA3C";"#00FF00";"#00FFFF";"#0000FF";"#4F57A6";"#800080";"#FF00FF";
"#FFFFFF";"#F2F2F2";"#E5E5E5";"#D9D9D9";"#CCCCCC";"#B3B3B3";"#999999";"#808080";"#666666";"#000000";

CSS クラス

ピッカーの CSS は複雑です。入力タグに適用されるクラスは入力フィールドをスタイル設定し、 さらに、その隣にあるポップアップ・ボタンをスタイル設定します。2 番目の独立したクラスのセットは、 ポップアップをスタイル設定します。css-prefix 属性を使用して個々のポップアップの表示を オーバーライドしない限り、このクラスのセットは、ページ内のすべてのポップアップに適用されます。 ポップアップのスタイル設定に使用されるクラスのセットは、 通常の hxclient 命名規則に従います。この命名規則では、単一の基底クラス名があり、 ポップアップのスタイル設定に使用される他のすべてのクラスは、その基底名を接尾部付きで使用します。

デフォルトでは、ポップアップは、基底クラス inputColor_ColorPicker を使用してスタイル設定されます。 css-prefix 属性は、異なる基底クラスを指定する場合に使用できます。

再度記述すると、入力フィールドで指定されるクラスは、入力フィールドおよび関連付けられたボタンを スタイル設定します。個々のコンポーネントで css-prefix 属性が指定されない限り、 ページ内のすべての色指定ポップアップはクラス inputColor_ColorPicker (および関連付けられたサブクラス) によって スタイル設定されます。

表 2. JSF カラー・ピッカー CSS クラス

属性名

説明

base_ColorPicker

ポップアップを含む最外部の div のスタイルを設定します。 原則として、このクラスの高さと幅のプロパティーを、 明示的に設定することはできません。 その代わり、グリッド・セルのサイズを指定すると、 グリッド・セルのサイズに基づいて、 ポップアップのサイズが自動的に変更されます。

<base>_ColorPicker-Body

ポップアップをグリッドに編成する、 最外部の表のスタイルを設定します。

<base>_ColorPicker-GridCell

個々のグリッド (表の) セルのスタイルを、表内に設定します。

<base>_ColorPicker-GridSwatch

グリッド・セル内にある カラー・スウォッチのスタイルを、個別に設定します。

<base>_ColorPicker-GridCell-Selected

現在選択されている色を 表す、(1 つの) グリッド・セルのスタイルを指定します。

<base>_ColorPicker-GridCell-Hover

キーボードまたはマウスのいずれかで フォーカスされている、グリッド・セルのスタイルを指定します。

<base>_ColorPicker-GridCell-Hover-Selected

キーボードまたはマウスでフォーカスされていて、 かつ選択されているグリッド・セルのスタイルを指定します。

注: ポップアップをスタイル設定する基底クラスは、一部のブラウザーでポップアップ div に適用される 3 種類の効果をサポートします。 すべてのブラウザーがこれらの効果をサポートしているわけではありません。ブラウザーが効果をサポートしていない場合、 その効果は描画されません。

API 呼び出し

表 3. JSF カラー・ピッカー API 呼び出し

API 呼び出し

説明

redraw()

基本タグの属性/プロパティーに加えられた 変更内容が反映されるように、コンポーネントを書き直します。

uirelease()

コンポーネントに関連付けられたアクティブ UI をリリースします。

setValue(string)

コンポーネントの値を設定し、提供された値が有効であることを確認します。

object = getValue(boolean)

コンポーネントの値を取得します。 ブール値が false である場合は、基本タグの値を取得することに相当します。 ブール値が true である場合は、 ストリングではなく、JavaScript™ の 日付/時刻オブジェクトとして、値が戻されます。

object = setAttribute(attribute)

属性を設定します。 属性がすでに設定されたものである場合は、 その値を変更します。

string = getAttribute(attribute-name)

属性の現行値を取得します。

アクセシビリティ

カラー・ピッカーは完全に キーボードでアクセス可能です。コンボ・ボックスと同様に、入力エリアおよび ピッカー・ボタンは、タブ順序内の単一エンティティーとして処理されます。コンポーネントに フォーカスがある場合、上矢印キーまたは下矢印キーのいずれかを押すと、 ポップアップが開きます (さらに、フォーカスをそこへ移動します)。ポップアップにフォーカスがある場合、 スペース・バーまたは改行を押すと、(ポップアップが閉じて、フォーカスがコンポーネントに戻されて) 現在選択されている色が選択されます。ESC を押すとポップアップが閉じ、フォーカスがコンポーネントに戻され、 値は変更されません。左、右、上、および下矢印を押すと、フォーカスを持つスウォッチが 変わります。Home、PgUp、End、 PgDn を押すと、フォーカスがパレットの最初/最後の色に移動します。

カラー・ピッカーでは 現在、XML 役割/状態が報告されません (ただし、これは XHTML 準拠です)。 これは早急に追加されます。

サンプル・コード

32 色のカラー・ピッカーを ページに追加します。最初は、白が選択されています。

<input type="text" id="form1:text01" class="inputColor" size="20" value="#FFFFFF" />
<script>
hX.addComponent("form1:text01", new hX.JSFColorPicker(
    "colors:#FDDDCE;#FFD990;#FFF799;#C4DF9B;#B3FFB2;#7FCBAE;#81D3EB;#ADCDEC;#D3B6D7;#FCDEE0;#CC6666;#FF9900;#D3BD2A;#8FB73E;#6DB286;#4F9BAA;#6D9AB4;#6F85C2;#897AB9;#B7798E;#ED1C24;#FF6600;#FFFF00;#9ACA3C;#00FF00;#00FFFF;#0000FF;#4F57A6;#800080;#FF00FF;#FFFFFF;#F2F2F2;#E5E5E5;#D9D9D9;#CCCCCC;#B3B3B3;#999999;#808080;#666666;#000000",
    "color-names:pale red;pale orange;pale yellow;pale avocado;pale green;pale cyan;pale blue;pale cerulean;pale purple;pale magenta;dull red;dull orange;dull yellow;dull avocado;dull green;dull cyan;dull blue;dull cerulean;dull purple;dull magenta;red;orange;yellow;avocado;green;cyan;blue;cerulean;purple;magenta;white;very pale gray;pale gray;very light gray;light gray;gray;medium gray;dark gray;very dark gray;black"));
</script>

フィードバック