4.4.8. 標準コントロールスキニング (Standard Controls Skinning)

この機能は標準的な HTML エレメントと RichFaces コンポーネントのルックアンドフィールを統一するためのものです。エレメント名と属性タイプ (該当する場合)を基に、ページ上のすべてのコントロールにスキニングを適用することができます。特定のエレメントや、コントロールをネストするエレメントのコンテナに rich-* クラスを割り当てて、スキンが適用されるようにする CSS スタイルのセットも備えています。

標準コントロールスキニングには 基本 (Basic) と 拡張 (Extended) の2 つのレベルのスキニングがあります。検出されるブラウザのタイプにより使用されるレベルが決まります。ブラウザタイプが検出できない場合は、Extended が使用されますが、適用されるレベルを明示的に指定したい場合は、org.richfaces.CONTROL_SKINNING_LEVEL コンテキストパラメータを web.xml に追加し、値を basic または extended のどちらかに設定します。

基本レベルは基本的なスタイルプロパティのみカスタマイズを提供します。基本のスキニングは次のブラウザに適用されます。
- Internet Explorer 6
- BackCompat モードの Internet Explorer 7 (document.compatMode property in MSDN を参照)
- Opera
- Safari
拡張レベルは基本のスキニングの他にも多くのスタイルプロパティを導入し、リッチなビジュアルスタイリング制御機能と共にブラウザへ適用されます。拡張スキニングをサポートするブラウザは次の通りです。
- Mozilla Firefox
- 標準準拠モード (CSS1Compat) の Internet Explorer 7

スキンで変更できるエレメントは次の通りです。

input
select
textarea
keygen
isindex
legend
fieldset
hr
a (a:hover および a:visited 疑似エレメントと併用)

標準的な HTML コントロールのスキニングを初期化する方法は 2 つあります。

org.richfaces.CONTROL_SKINNING パラメータを web.xml に追加します。 org.richfaces.CONTROL_SKINNING は enable と disable をパラメータとして取ります。このメソッドは、スキニングスタイルプロパティがエレメントおよび属性タイプ(該当する場合)ごとに適用されることを意味します。他に必要な手順はありません。スキニングを適用できるエレメントについては、「標準レベル」と「拡張レベル」の表を参照してください。
org.richfaces.CONTROL_SKINNING_CLASSES パラメータを web.xml に追加します。 org.richfaces.CONTROL_SKINNING_CLASSES は enable と disable をパラメータとして取ります。有効にすると、 HTML コンポーネントへスキンを適用する事前定義された CSS クラスのセットが提供されます。

org.richfaces.CONTROL_SKINNING_CLASSES を有効にすると、以下に適用できるスタイルクラスが提供されます。

rich-container クラスでエレメント内にネストされる基本エレメント。例は次の通りです。
```
...
.rich-container select {
   //class content
}
...
```
```
...
.rich-container select {
   //class content
}
...
```
Copy to Clipboard Toggle word wrap
基本的なエレメント名またはタイプのうち 1 つと対応するクラス名を持つエレメントは以下の例のとおり rich-<elementName>[-<elementType>] スキームでマップされます。
```
...
.rich-select {
  //class content
}

.rich-input-text {
  //class content
}

...
```
```
...
.rich-select {
  //class content
}

.rich-input-text {
  //class content
}

...
```
Copy to Clipboard Toggle word wrap
注記
rich-link、 rich-link-hover、 rich-link-visited など、link タイプと疑似クラス名によってエレメントはクラスを割り当てられます。

提供される事前定義されたリッチ CSS クラスは、基本および複合 HTML エレメントの両方のクラスとして使用できます。

次のコードスニペットには例として複数のエレメントを示しています。

...
<u:selector name=".rich-box-bgcolor-header">
     <u:style name="background-color" skin="headerBackgroundColor" />
</u:selector>
<u:selector name=".rich-box-bgcolor-general">
     <u:style name="background-color" skin="generalBackgroundColor" />
</u:selector>
...
//gradient elements
...
<u:selector name=".rich-gradient-menu">
     <u:style name="background-image">
          <f:resource f:key="org.richfaces.renderkit.html.gradientimages.MenuGradientImage"/>
     </u:style>
     <u:style name="background-repeat" value="repeat-x" />
</u:selector>
<u:selector name=".rich-gradient-tab">
     <u:style name="background-image">
          <f:resource f:key="org.richfaces.renderkit.html.gradientimages.TabGradientImage"/>
     </u:style>
     <u:style name="background-repeat" value="repeat-x" />
</u:selector>
...

...
<u:selector name=".rich-box-bgcolor-header">
     <u:style name="background-color" skin="headerBackgroundColor" />
</u:selector>
<u:selector name=".rich-box-bgcolor-general">
     <u:style name="background-color" skin="generalBackgroundColor" />
</u:selector>
...
//gradient elements
...
<u:selector name=".rich-gradient-menu">
     <u:style name="background-image">
          <f:resource f:key="org.richfaces.renderkit.html.gradientimages.MenuGradientImage"/>
     </u:style>
     <u:style name="background-repeat" value="repeat-x" />
</u:selector>
<u:selector name=".rich-gradient-tab">
     <u:style name="background-image">
          <f:resource f:key="org.richfaces.renderkit.html.gradientimages.TabGradientImage"/>
     </u:style>
     <u:style name="background-repeat" value="repeat-x" />
</u:selector>
...

Copy to Clipboard

Toggle word wrap

標準的なコンポーネントスキニングに関する詳細を知りたい場合は、 RichFaces SVN レポジトリの ui/core/src/main/resources/org/richfaces/ ディレクトリにある CSS ファイルを確認してみてください。

4.4.8.1. 標準レベル
リンクのコピー

Expand

表4.3 input、 select、 textarea、 button、 keygen、 isindex、 legend の HTML エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
font-size	generalSizeFont
font-family	generalFamilyFont
color	controlTextColor

Expand

表4.4 fieldset の HTML エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
border-color	panelBorderColor

Expand

表4.5 hr の HTML エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
border-color	panelBorderColor

Expand

表4.6 a の HTML エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
color	generalLinkColor

Expand

表4.7 a:hover の HTML エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
color	hoverLinkColorgeneralLinkColor

Expand

表4.8 a:visited の HTML エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
color	visitedLinkColor

Expand

表4.9 .rich-input、 .rich-select、 .rich-textarea、 .rich-keygen、 .rich-isindex、 .rich-link のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
font-size	generalSizeFont
font-family	generalFamilyFont
color	controlTextColor

Expand

表4.10 .rich-fieldset のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
border-color	panelBorderColor

Expand

表4.11 .rich-hr のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
border-color	panelBorderColor
border-width	1px
border-style	solid

Expand

表4.12 .rich-link のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
color	generalLinkColor

Expand

表4.13 .rich-link:hover のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
color	hoverLinkColor

Expand

表4.14 .rich-link:visited のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
color	visitedLinkColor

Expand

表4.15 .rich-field のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ / 値
border-width	1px
border-style	inset
border-color	panelBorderColor
background-color	controlBackgroundColor
background-repeat	no-repeat
background-position	1px 1px

Expand

表4.16 .rich-field-edit のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
border-width	1px
border-style	inset
border-color	panelBorderColor
background-color	editBackgroundColor

Expand

表4.17 .rich-field-error のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
border-width	1px
border-style	inset
border-color	panelBorderColor
background-color	warningBackgroundColor
background-repeat	no-repeat
background-position	center left
padding-left	7px

Expand

表4.18 .rich-button、 .rich-button-disabled、 .rich-button-over のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
border-width	1px
border-style	solid
border-color	panelBorderColor
background-color	trimColor
padding	2px 10px 2px 10px
text-align	center
cursor	pointer
background-repeat	repeat-x
background-position	top left

Expand

表4.19 .rich-button-press のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
background-position	bottom left

Expand

表4.20 .rich-container fieldset、 .rich-fieldset のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
border-color	panelBorderColor
border-width	1px
border-style	solid
padding	10px
padding	10px

Expand

表4.21 .rich-legend のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
font-size	generalSizeFont
font-family	generalFamilyFont
color	controlTextColor
font-weight	bold

Expand

表4.22 .rich-form のリッチエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
padding	0px
margin	0px

4.4.8. 標準コントロールスキニング (Standard Controls Skinning)

4.4.8.1. 標準レベル
リンクのコピー

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

多様性を受け入れるオープンソースの強化

会社概要

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

4.4.8. 標準コントロールスキニング (Standard Controls Skinning)

4.4.8.1. 標準レベルリンクのコピーリンクがクリップボードにコピーされました!

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

多様性を受け入れるオープンソースの強化

会社概要

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

4.4.8.1. 標準レベル
リンクのコピー