4.4.11. Plug-n-Skin (プラグアンドスキン)

プラグアンドスキン は、プロジェクトへカスタムスキンを簡単に作成、カスタマイズ、プラグできるようにします。事前定義された RichFaces スキンのパラメータを基にしてスキンを作成することができます。また、プラグアンドスキンはリッチコントロールの外見を標準の HTML エレメントと統合できるようにします。本項では、プラグアンドスキンで独自のスキンを作成するための段階的な手順を取り上げます。

最初に Maven を使用して、新しいスキンのテンプレートを作成します (RichFaces に Maven を設定する方法に関する詳細は JBoss wiki article を参照してください)。こうした Maven の手順はコマンドラインインターフェースにコピーして貼り付けることで実行できます。

...
mvn archetype:create
-DarchetypeGroupId=org.richfaces.cdk
-DarchetypeArtifactId=maven-archetype-plug-n-skin
-DarchetypeVersion=RF-VERSION
-DartifactId=ARTIFACT-ID
-DgroupId=GROUP-ID
-Dversion=VERSION
...

...
mvn archetype:create
-DarchetypeGroupId=org.richfaces.cdk
-DarchetypeArtifactId=maven-archetype-plug-n-skin
-DarchetypeVersion=RF-VERSION
-DartifactId=ARTIFACT-ID
-DgroupId=GROUP-ID
-Dversion=VERSION
...

Copy to Clipboard

Toggle word wrap

コマンドの主キーは次の通りです。

archetypeVersion — 3.3.1.GA のように RichFaces のバージョンを表します。
artifactId — プロジェクトのアーティファクト ID です。
groupId — プロジェクトのグループ ID です。
version — 作成するプロジェクトのバージョンです。デフォルトでは 1.0.-SNAPSHOT に設定されています。

この操作は ARTIFACT-ID にちなんで名付けられるディレクトリを作成します。このディレクトリには Maven プロジェクトのテンプレートが格納されます。

次の手順はスキン自体を作成するための手順です。

Maven プロジェクトのルートディレクトリより次のコマンドを実行します (このディレクトリには pom.xml ファイルが格納されます)。

...
mvn cdk:add-skin -Dname=SKIN-NAME -Dpackage=SKIN-PACKAGE
...

...
mvn cdk:add-skin -Dname=SKIN-NAME -Dpackage=SKIN-PACKAGE
...

Copy to Clipboard

Toggle word wrap

コマンドの主キーは次の通りです。

name — 新しいスキンの名前を定義します。
package — スキンの基本パッケージです。デフォルトではプロジェクトの groupId が使用されています。

コマンドのその他任意のキーは次の通りです。

baseSkin — ベーススキンの名前を定義します。
createExt — true に設定されると拡張 CSS クラスが追加されます。詳細は「標準コントロールスキニング (Standard Controls Skinning) 」を参照してください。

コマンドで作成されたファイルについては表4.34「mvn cdk:add-skin -Dname=SKIN-NAME -Dpackage=SKIN-PACKAGE コマンドで作成されたファイルとフォルダ」を参照してください。

Expand

表4.34 mvn cdk:add-skin -Dname=SKIN-NAME -Dpackage=SKIN-PACKAGE コマンドで作成されたファイルとフォルダ
ファイル名	場所	内容
`BaseImage.java`	`\src\main\java\SKIN-PACKAGE\SKIN-NAME\images\`	イメージを格納するために使用する基本クラスです。
BaseImageTest.java	`\src\test\java\SKIN-PACKAGE\SKIN-NAME\images\`	イメージを格納するクラスのテストバージョンです。
XCSS files	`\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\`	新しいスキンに影響された RichFaces コンポーネントの新しい外見を定義します。
`SKIN-NAME.properties`	`\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\`	新しいスキンのプロパティを含むファイルです。 `SKIN-NAME.properties` ファイルの設定に使用されるプロパティは次の通りです。 `baseSkin` 独自のスキンの基準として使用されるスキン名です。定義するスキンの外見は新しいスタイルのプロパティにより影響を受けます。 `generalStyleSheet` 新しいスキンが修正するコンポーネントのスタイルシートをインポートするスタイルシート (`SKIN-NAME.xcss`) へのパスです。 `extendedStyleSheet` RichFaces コンポーネントと標準 HTML コントロールの外見を統一するために使用されるスタイルシートへのパスです。詳細は「標準コントロールスキニング (Standard Controls Skinning) 」を参照してください。 `gradientType` 新しいスキンに適用されるグラデーションのタイプを設定する事前定義したプロパティです。可能な値は `glass`、`plastic`、`plain` です。グラデーションの実装に関する詳細は本章の後半で説明します。
`SKIN-NAME.xcss`	`src\main\resources\META-INF\skins`	新しいスキンが修正したコンポーネントの XCSS ファイルをインポートする XCSS ファイルです。
XCSS files	`\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\`	`createExt` キーが `true` に設定されている場合に、標準コントロールのスタイルを決定します (`extended_classes.xcss` と `extended.xcss`)。
`SKIN-NAME-ext.xcss`	`src\main\resources\META-INF\skins`.	`createExt` が `true` に設定されている場合に、標準コントロールの定義のスタイルをインポートします。
`SKIN-NAME-resources.xml`	`src\main\config\resources`.	前回にリストされた全ファイルの詳細が含まれています。

これで \src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\ にある XCSS ファイルの編集を開始できるようになりました。次のいずれかの方法で ( XCSS ファイルにリストされている) セレクタに新しいスタイルプロパティを割り当てます。

標準 CSS コーディングアプローチ (CSS プロパティをセレクタに追加) です。セレクタは <f:verbatim> </f:verbatim> タグ内にあるようにしてください。例は以下のとおりです。
```
...
.rich-calendar-cell {
     background: #537df8;
}
...
```
```
...
.rich-calendar-cell {
     background: #537df8;
}
...
```
Copy to Clipboard Toggle word wrap

XCSS コーディングアプローチ (RichFaces で XCSS ファイルを作成する通常のメソッド) です。XCSS タグは <f:verbatim> </f:verbatim> タグの外に配置されている必要があります。

...
<u:selector name=".rich-calendar-cell">
     <u:style name="border-bottom-color" skin="panelBorderColor"/>
     <u:style name="border-right-color" skin="panelBorderColor"/>
     <u:style name="background-color" skin="tableBackgroundColor"/>
     <u:style name="font-size" skin="generalSizeFont"/>
     <u:style name="font-family" skin="generalFamilyFont"/>
</u:selector>
...

...
<u:selector name=".rich-calendar-cell">
     <u:style name="border-bottom-color" skin="panelBorderColor"/>
     <u:style name="border-right-color" skin="panelBorderColor"/>
     <u:style name="background-color" skin="tableBackgroundColor"/>
     <u:style name="font-size" skin="generalSizeFont"/>
     <u:style name="font-family" skin="generalFamilyFont"/>
</u:selector>
...

Copy to Clipboard

Toggle word wrap

これまでの手順を実行し、 XCSS ファイルを編集したら、新しいスキンをビルドし、プロジェクトへプラグします。スキンをビルドするにはスキンプロジェクトのルートディレクトリ (pom.xml ファイルを格納するディレクトリ) より次のコマンドを実行します。

...
mvn clean install
...

...
mvn clean install
...

Copy to Clipboard

Toggle word wrap

プラグアンドスキン機能には事前定義されたグラデーションが複数あります。次のコードを使用してグラデーションを適用することができます。

...
<u:selector name=".rich-combobox-item-selected">
	<u:style name="border-width" value="1px" />
	<u:style name="border-style" value="solid" />
	<u:style name="border-color" skin="newBorder" />
	<u:style name="background-position" value="0% 50%" />
	<u:style name="background-image">
		<f:resource f:key="org.richfaces.renderkit.html.CustomizeableGradient">
			<f:attribute name="valign" value="middle" />
			<f:attribute name="gradientHeight" value="17px" />
			<f:attribute name="baseColor" skin="headerBackgroundColor" />
		 </f:resource>
	</u:style>
</u:selector>
...

...
<u:selector name=".rich-combobox-item-selected">
	<u:style name="border-width" value="1px" />
	<u:style name="border-style" value="solid" />
	<u:style name="border-color" skin="newBorder" />
	<u:style name="background-position" value="0% 50%" />
	<u:style name="background-image">
		<f:resource f:key="org.richfaces.renderkit.html.CustomizeableGradient">
			<f:attribute name="valign" value="middle" />
			<f:attribute name="gradientHeight" value="17px" />
			<f:attribute name="baseColor" skin="headerBackgroundColor" />
		 </f:resource>
	</u:style>
</u:selector>
...

Copy to Clipboard

Toggle word wrap

background-image CSS プロパティは <f:resource f:key="org.richfaces.renderkit.html. CustomizeableGradient"> で定義され、グラデーションを設定します。グラデーションのタイプは gradientType プロパティを使って SKIN-NAME.properties で指定することができ、glass、plastic または plain に設定可能です。前のコードスニペットで見たとおりグラデーションは baseColor、gradientColor、gradientHeight、valign 属性で調整することも可能です。

これで、 web.xml ファイルに新しいスキンパラメータを追加し、スキンを格納する JAR ファイル (スキンプロジェクトの target ディレクトリに存在) を \WebContent\WEB-INF\lib\ に配置するとプロジェクトの新規作成されたスキンを使用することができるようになりました。

...
<context-param>
    <param-name>org.ajax4jsf.SKIN</param-name>
    <param-value>SKIN-NAME</param-value>
</context-param>
...

...
<context-param>
    <param-name>org.ajax4jsf.SKIN</param-name>
    <param-value>SKIN-NAME</param-value>
</context-param>
...

Copy to Clipboard

Toggle word wrap

4.4.11.1. 使用詳細
リンクのコピー

本項ではプラグアンドスキン実装の実用面について取り上げます。プラグアンドスキンのプロトタイプ作成プロセスを説明する項を読んでから本項を読むようにしてください。

最初に、新しいスキンを作成する必要あります (前項の説明通り)。以下は新しいスキンプロジェクトのテンプレートを作成します。

mvn archetype:create
-DarchetypeGroupId=org.richfaces.cdk
-DarchetypeArtifactId=maven-archetype-plug-n-skin
-DarchetypeVersion=3.3.1.GA
-DartifactId=P-n-S
-DgroupId=GROUPID
-Dversion=1.0.-SNAPSHOT

mvn archetype:create
-DarchetypeGroupId=org.richfaces.cdk
-DarchetypeArtifactId=maven-archetype-plug-n-skin
-DarchetypeVersion=3.3.1.GA
-DartifactId=P-n-S
-DgroupId=GROUPID
-Dversion=1.0.-SNAPSHOT

Copy to Clipboard

Toggle word wrap

これで、作成したファイルやフォルダを確認するため P-n-S ディレクトリを閲覧できるようになりました。

次に、 Maven を使用して次のように必要なファイルをすべてスキンプロジェクトに追加します。

mvn cdk:add-skin -DbaseSkin=blueSky  -DcreateExt=true -Dname=PlugnSkinDemo -Dpackage=SKINPACKAGE

mvn cdk:add-skin -DbaseSkin=blueSky  -DcreateExt=true -Dname=PlugnSkinDemo -Dpackage=SKINPACKAGE

Copy to Clipboard

Toggle word wrap

前項で説明した通り、 -DbaseSkin はベースとして使用する RichFaces のビルトインスキンを定義し、-DcreateExt=true は、新しいスキンがリッチコンポーネントと標準 HTML コントロールの外見を統一する XCSS ファイルを含んでいることを判断します。

リソースが作成された時点で、新規作成されたスキンを設定し直し始めることができます。リッチコンポーネントの XCSS ファイルの編集から始めます。

プラグアンドスキン機能の例として、<rich:calendar> スタイル属性といくつかの基本的な HTML コントロールを編集します。以下のように行います。

<rich:calendar> の現在日の背景色を変更します。
標準 HTML 提出ボタンの色を変更します。

<rich:properties> のスタイルプロパティを編集するには、P-n-S\src\main\resources\skinpackage\plugnskindemo\css\ にある calendar.xcss ファイルを開く必要があります。

calendar.xcss ファイルで .rich-calendar-today セレクタを探し、 background-color: #075ad1; のように変更します。これにより現在日の背景色が変更します。

次に、標準 HTML 提出ボタンのフォントスタイルを変更します。 P-n-S\src\main\resources\skinpackage\plugnskindemo\css\ ディレクトリより extended.xcss ファイルを開き、次のようにセレクタの波括弧の間に font-weight: bold; を挿入します。

button[type="button"], button[type="reset"], button[type="submit"], input[type="reset"], input[type="submit"], input[type="button"] {
	font-weight: bold;
}

button[type="button"], button[type="reset"], button[type="submit"], input[type="reset"], input[type="submit"], input[type="button"] {
	font-weight: bold;
}

Copy to Clipboard

Toggle word wrap

変更が適用されたため、次に新しい PlugnSkinDemo スキンをビルドし、プロジェクトへインポートすることができます。

P-n-S ディレクトリより mvn clean install を実行し、スキンをビルドします。これにより、新たにコンパイルされたスキンを持つ JAR ファイルが格納されている target ディレクトリが作成されます。この例では、ファイル名は P-n-S-1.0.-SNAPSHOT.jar です。

次に、新しい PlugnSkinDemo スキンをプロジェクトへインポートします。

P-n-S-1.0.-SNAPSHOT.jar ファイルを \WebContent\WEB-INF\lib\ ディレクトリへコピーします。

次のように新しいスキンの名前を web.xml ファイルに追加します。

 <context-param>
	<param-name>org.ajax4jsf.SKIN</param-name>
	<param-value>PlugnSkinDemo</param-value>
</context-param>

 <context-param>
	<param-name>org.ajax4jsf.SKIN</param-name>
	<param-value>PlugnSkinDemo</param-value>
</context-param>

Copy to Clipboard

Toggle word wrap

標準コントロールスキニングが web.xml で有効になっていなければなりません。以下を追加して標準コントロールスキニングを有効にします。

<context-param>
	<param-name>org.richfaces.CONTROL_SKINNING</param-name>
	<param-value>enable</param-value>
</context-param>

<context-param>
	<param-name>org.richfaces.CONTROL_SKINNING</param-name>
	<param-value>enable</param-value>
</context-param>

Copy to Clipboard

Toggle word wrap

下図はスキンに行った各変更の結果を表しています。

図4.6 プラグアンドスキン機能の実行

4.4.11. Plug-n-Skin (プラグアンドスキン)

4.4.11.1. 使用詳細
リンクのコピー

詳細情報

試用、購入および販売

コミュニティー

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

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

会社概要

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

4.4.11. Plug-n-Skin (プラグアンドスキン)

4.4.11.1. 使用詳細リンクのコピーリンクがクリップボードにコピーされました!

詳細情報

試用、購入および販売

コミュニティー

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

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

会社概要

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

4.4.11.1. 使用詳細
リンクのコピー