jboss enterprise application platform...jboss enterprise application platform 5 richfaces...

JBoss Enterprise Application Platform5

RichFaces 開発者ガイド

JBoss Enterprise Application Platform 5 向けエディッション 5.1.2

Last Updated: 2017-10-26

JBoss Enterprise Application Platform 5 RichFaces 開発者ガイド

JBoss Enterprise Application Platform 5 向けエディッション 5.1.2

Red Hat Documentation Group

法律上の通知法律上の通知

Copyright © 2011 Red Hat, Inc.

This document is licensed by Red Hat under the Creative Commons Attribution-ShareAlike 3.0Unported License. If you distribute this document, or a modified version of it, you must provideattribution to Red Hat, Inc. and provide a link to the original. If the document is modified, all Red Hattrademarks must be removed.

Red Hat, as the licensor of this document, waives the right to enforce, and agrees not to assert,Section 4d of CC-BY-SA to the fullest extent permitted by applicable law.

Red Hat, Red Hat Enterprise Linux, the Shadowman logo, JBoss, OpenShift, Fedora, the Infinitylogo, and RHCE are trademarks of Red Hat, Inc., registered in the United States and othercountries.

Linux ® is the registered trademark of Linus Torvalds in the United States and other countries.

Java ® is a registered trademark of Oracle and/or its affiliates.

XFS ® is a trademark of Silicon Graphics International Corp. or its subsidiaries in the United Statesand/or other countries.

MySQL ® is a registered trademark of MySQL AB in the United States, the European Union andother countries.

Node.js ® is an official trademark of Joyent. Red Hat Software Collections is not formally related toor endorsed by the official Joyent Node.js open source or commercial project.

The OpenStack ® Word Mark and OpenStack logo are either registered trademarks/service marksor trademarks/service marks of the OpenStack Foundation, in the United States and other countriesand are used with the OpenStack Foundation's permission. We are not affiliated with, endorsed orsponsored by the OpenStack Foundation, or the OpenStack community.

All other trademarks are the property of their respective owners.

概要概要

本ガイドは JBoss Enterprise Platforms で RichFaces を使用する開発者向けです。

http://creativecommons.org/licenses/by-sa/3.0/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

目次目次

第第1章章はじめにはじめに

第第2章章 RICHFACES の利用の利用2.1. RICHFACES を持つ単純な JSF

2.1.1. RichFaces ライブラリをプロジェクトに追加する2.1.2. web.xml に RichFaces を登録する2.1.3. 管理 Bean2.1.4. Bean を faces-cofig.xml に登録2.1.5. RichFaces Greeter の index.jsp

2.2. 関連するリソースのリンク

第第3章章異なる環境の設定異なる環境の設定3.1. WEB アプリケーション記述子パラメータ3.2. SUN JSF RI3.3. FACELETS サポート3.4. JBOSS SEAM サポート

第第4章章 RICHFACES フレームワークの基本概念フレームワークの基本概念4.1. はじめに4.2. RICHFACES アーキテクチャの概要4.3. 要求エラーとセッションの期限切れへの対処

4.3.1. 要求エラーへの対処4.3.2. セッションの期限切れへの対処

4.4. SKINNABILITY (スキンの有効性)4.4.1. Skinnability を使用する理由4.4.2. Skinnability の使用4.4.3. 例4.4.4. RichFaces のスキンパラメータテーブル4.4.5. 独自のスキンファイルの作成および使用4.4.6. RichFaces のビルトイン Skinnability4.4.7. ランタイム時のスキン変更4.4.8. 標準コントロールスキニング (Standard Controls Skinning)

4.4.8.1. 標準レベル4.4.8.2. 拡張レベル

4.4.9. 拡張スキニングサポートのクライアント側スクリプト4.4.10. XCSS ファイル形式4.4.11. Plug-n-Skin (プラグアンドスキン)

4.4.11.1. 使用詳細4.5. ステートマネージャ API4.6. ユーザーロールの特定

付録付録A 改訂履歴改訂履歴

3

55557789

1010131314

1717172020212222222323262627293136394041454751

53

目次目次

1

RichFaces 開発者ガイド開発者ガイド

2

第1章はじめにRichFaces は、 JavaScript に頼らず AJAX の機能を既存の JSF アプリケーションに追加するオープンソースのフレームワークです。

RichFaces は、ライフサイクル、検証、変換ファシリティや、静的および動的リソースの管理などが含まれる JSF (JavaServer Faces) フレームワークのアスペクトを利用します。ビルトイン AJAX サポートや容易にカスタマイズ可能なルックアンドフィールを持つ RichFaces コンポーネントは、簡単にJSF アプリケーションに組み入れることができます。

RichFaces は以下を可能にします。

AJAX を使用しながら JSF の利点を体験できます。 RichFaces は JSF のライフサイクルに完全に統合されます。他のフレームワークは管理 Bean ファシリティのみにアクセスできるような場合でも、 RichFaces を使用するとアクションおよび値変更リスナへアクセスし、 AJAX の要求応答サイクル中にサーバー側バリデータやコンバータを呼び出すことができます。

既存の JSF アプリケーションに AJAX の機能を追加できます。 RichFaces フレームワークには 2 つのコンポーネントライブラリ (Core AJAX および UI) があります。 Core ライブラリはAJAX の機能を既存ページに追加するため、 JavaScript を書いたり、手作業で既存コンポーネントを新しい AJAX コンポーネントに置き換える必要がありません。 RichFaces は、コンポーネント全体の AJAX サポートではなく、ページ全体のサポートを有効にするため、ページ上でイベントを定義する機会を提供します。

そのまま使用できるさまざまなコンポーネントを用いて、異なるビューを簡単、迅速に作成できます。 RichFaces UI ライブラリにはリッチユーザーインターフェース (UI) 機能を JSF アプリケーションに追加するコンポーネントが含まれているため、拡張スキンサポートで AJAX が有効なコンポーネントの数々を提供します。 RichFaces コンポーネントは他のサードパーティコンポーネントライブラリとシームレスに統合することを目的としているため、アプリケーションの開発時により多くのオプションを利用できます。

ビルトイン AJAX サポートで独自のリッチコンポーネントを書くことができます。 CDK (コンポーネント開発キット) は常に拡張されています。 CDK には、コード生成とテンプレーティングファシリティの両方と、簡単な JSP (JavaServer Pages) に似た構文が含まれているため、ビルトイン AJAX 機能を用いてファーストクラスのリッチコンポーネントを作成することができます。

アプリケーション Java クラスでリソースをパッケージ化できます。 RichFaces は、イメージや JavaScript コード、 CSS スタイルシートなどの異なるリソースタイプを管理する上級サポートを提供します。リソースフレームワークは、カスタムのコンポーネントコードを使用してこれらリソースの JAR ファイルへの格納を容易にします。

バイナリリソースを簡単、迅速に生成できます。リソースフレームワークはイメージやサウンド、 Excel 形式のスプレッドシートなどをリアルタイムで生成できるため、 Java Graphics 2Dライブラリやその他類似のリソースを使用してイメージなどを作成できます。

スキンベースの技術を用いてご使用のユーザーインターフェースのルックアンドフィールをカスタマイズできます。RichFaces によりスキンパラメータスキンパラメータを使用して様々な配色と他のユーザーインターフェースのパラメータを簡単に定義、管理できます。そのため JSP と Java コードから UI パラメータにアクセスでき、リアルタイムで UI 調整できます。RichFaces には、アプリケーション開発を促進するための多くの事前定義したスキンが含まれていますが、簡単に独自のカスタムスキンを作成することができます。

コンポーネント、アクション、リスナ、ページを同時に作成しテストすることができます。開発を行いながらコンポーネントのテストケースを生成できる自動化されたテストファシリティが近日中に RichFaces に導入される予定です。テストフレームワークはコンポーネントを

第第1章章はじめにはじめに

3

テストするだけでなく、 Servlet コンテナにテストアプリケーションをデプロイせずにせずにJavaScript コードなどサーバー側またはクライアント側の他の機能をテストします。

RichFaces UI コンポーネントはそのまま即座に実装できます。そのため、開発時間を短縮でき、即座に RichFaces Web アプリケーションの開発機能を使用できるため、簡単かつ迅速に RichFaces を体験できます。


4

第2章 RICHFACES の利用本章では、 RichFaces のコンポーネントを JSF アプリケーションへプラグする方法を説明します。手順は、必要なライブラリのダウンロードからブラウザでのアプリケーション実行まで、単純なRichFaces を持つを持つ JSF の作成プロセスを基にしています。これらの手順は使用する統合開発環境には依存しません。

2.1. RICHFACES を持つ単純な JSF

シンプルなアプリケーションである RichFaces Greeter は、一般的な hello world アプリケーションと似ています。ただし 1 つの例外は、RichFaces では最初にユーザーに「Hello!」と挨拶することです。

Greeter という名前の標準的な JSF 1.2 プロジェクトを作成します。必要なライブラリがすべて含まれるようにし、後述の手順に従ってください。

2.1.1. RichFaces ライブラリをプロジェクトに追加する

RichFaces バイナリファイルを展開した RichFaces フォルダより、 lib を開きます。このフォルダには API、 UI、実装ライブラリを持つ 3 つの *.jar ファイルが格納されています。これらの JAR を lib から Greeter JSF アプリケーションの WEB-INF/lib ディレクトリへコピーします。

重要重要

RichFaces を持つ JSF アプリケーションは、プロジェクトに次の JAR があることを想定します。

commons-beanutils-1.7.0.jar

commons-collections-3.2.jar

commons-digester-1.8.jar

commons-logging-1.0.4.jar

jhighlight-1.0.jar

2.1.2. web.xml に RichFaces を登録する

プロジェクトに RichFaces ライブラリを追加したら、プロジェクトの web.xml ファイルに登録しなければなりません。以下を web.xml に追加します。

...<context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>blueSky</param-value></context-param>

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

第第2章章 RICHFACES の利用の利用

5

RichFaces スキンの詳細は「Skinnability (スキンの有効性)」を参照してください。

web.xml は次のようになるはずです。

<filter> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher></filter-mapping>...

<?xml version="1.0"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><display-name>Greeter</display-name> <context-param> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>server</param-value></context-param> <context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>blueSky</param-value></context-param>

<context-param> <param-name>org.richfaces.CONTROL_SKINNING</param-name> <param-value>enable</param-value></context-param> <filter> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter>

<filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher>


6

2.1.3. 管理 Bean

RichFaces Greeter アプリケーションには管理 Bean が必要です。プロジェクトの JavaSource ディレクトリで、demo パッケージの user という新しい管理 Bean を作成します。user で次のコードを配置します。

2.1.4. Bean を faces-cofig.xml に登録

user Bean を登録するには、以下を faces-config.xml ファイルに追加します。

</filter-mapping> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class></listener> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup></servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern></servlet-mapping> <login-config> <auth-method>BASIC</auth-method> </login-config></web-app>

package demo;

public class user { private String name=""; public String getName() { return name; } public void setName(String name) { this.name = name; }}

<?xml version="1.0" encoding="UTF-8"?><faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"> <managed-bean>


7

2.1.5. RichFaces Greeter の index.jsp

RichFaces Greeter には 1 つだけ JSP ページがあります。 WEB CONTENT フォルダのルートに index.jsp を作成し、以下を JSP ファイルに追加します。

<description>UsernName Bean</description> <managed-bean-name>user</managed-bean-name> <managed-bean-class>demo.user</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>name</property-name> <property-class>java.lang.String</property-class> <value/> </managed-property> </managed-bean></faces-config>

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %><%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%><%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> <html> <head> <title>RichFaces Greeter</title> </head> <body> <f:view> <a4j:form> <rich:panel header="RichFaces Greeter" style="width: 315px"> <h:outputText value="Your name: " /> <h:inputText value="#{user.name}" > <f:validateLength minimum="1" maximum="30" /> </h:inputText> <a4j:commandButton value="Get greeting" reRender="greeting" /> <h:panelGroup id="greeting" > <h:outputText value="Hello, " rendered="#{not empty user.name}" /> <h:outputText value="#{user.name}" /> <h:outputText value="!" rendered="#{not empty user.name}" /> </h:panelGroup> </rich:panel> </a4j:form> </f:view> </body></html>


8

アプリケーションは 3 つの RichFaces コンポーネントを使用します。<rich:panel> は情報の仮想コンテナとして使用されます。ビルトインの AJAX サポートがある <a4j:commandButton> は、応答が返った後に動的に挨拶を表示させます。<a4j:form> はボタンがアクションを実行できるようにします。

注記注記

RichFaces タグライブラリを各 JSP ページに宣言する必要があります。 XHTML ページについては、次の行を追加してタグライブラリを宣言します。

ここで、ブラウザで index.jsp ページである http://localhost:8080/Greeter/index.jsf を示し、サーバー上でアプリケーションを実行します。

図図2.1 「「RichFaces Greeter」のアプリケーション」のアプリケーション

2.2. 関連するリソースのリンク

JBoss Developer Studio には RichFaces コンポーネントフレームワークとの綿密な統合に関する記述があります。

<xmlns:a4j="http://richfaces.org/a4j"><xmlns:rich="http://richfaces.org/rich">


9

https://www.redhat.com/apps/store/developers/jboss_developer_studio.html

第3章異なる環境の設定RichFaces には JSF (JavaServer Faces) 仕様に含まれるすべてのタグ (コンポーネント) に対するサポートが含まれています。既存の JSF プロジェクトに RichFaces の機能を追加するには、 RichFacesライブラリをプロジェクトの lib ディレクトリに配置し、フィルタマッピングを追加します。RichFaces を追加しても既存プロジェクトの動作は変更しません。

3.1. WEB アプリケーション記述子パラメータ

RichFaces では web.xml にパラメータを定義する必要はありませんが、下記の RichFaces パラメータは開発中に便利なパラメータで、 RichFaces アプリケーションの柔軟性を向上します。

表表3.1 初期化パラメータ初期化パラメータ

名前名前デフォルトデフォルト内容内容

org.richfaces.SKIN DEFAULT アプリケーションで使用されるスキンの名前です。スキン名を含むリテラルストリングか、 org.richfaces.framework.skin タイプのプロパティのString プロパティ (スキン名) に関連する EL 表現 (#{...}) になります。 EL 表現の場合、そのインスタンスが現在のスキンとして使用されます。

org.richfaces.LoadScriptStrategy DEFAULT RichFaces スクリプトファイルがアプリケーションへロードされる方法を定義します。可能な値は ALL、 DEFAULT、 NONE です。

org.richfaces.LoadStyleStrategy DEFAULT RichFaces スタイルファイルがアプリケーションへロードされる方法を定義します。可能な値は ALL、 DEFAULT、 NONE です。

org.ajax4jsf.LOGFILE なしアプリケーションの URL またはコンテナログファイル (該当する場合) です。このパラメータが設定されている場合、指定の URLからのコンテンツは iframe ウインドウのデバッグページ上に表示されます。


10

org.ajax4jsf.VIEW_HANDLERS なしビューハンドラチェーンに挿入するための ViewHandler インスタンスのコンマ区切りリストです。これらのハンドラは、リストされた順に RichFaces のビューハンドラの前に挿入されます。Facelets アプリケーションでは、faces-config.xml ファイルではなく、このリストに com.sun.facelets.FaceletViewHandler を宣言します。

org.ajax4jsf.CONTROL_COMPONENTS

なしメッセージバンドルローダやエイリアス Bean コンポーネントなど特別な制御ケース制御ケースコンポーネントのコンマ区切りリストです。これらのハンドラは静的フィールド COMPONENT_TYPE からの反射より提供されます。これらコンポーネントのエンコーディングメソッドは、コンポーネントが更新されていなくても AJAX 応答のレンダリング中に常に呼び出されます。

org.ajax4jsf.ENCRYPT_RESOURCE_DATA

false 生成されたリソース (暗号生成データなど) ではリソース URL でエンコードされます。例えば、 mediaOutput コンポーネントによって生成されたイメージのURL には生成メソッド名が含まれます。悪意のあるコードはこれを利用して JSF Bean や属性の要求を作成できるため、重大なアプリケーションではこのパラメータを true に設定する必要があります(この修正は Java RuntimeEnvironment 1.4 で動作します)。

org.ajax4jsf.ENCRYPT_PASSWORD

random リソースデータの暗号化に使用されるパスワードです。設定されていないと、無作為のパスワードが使用されます。

org.ajax4jsf.COMPRESS_SCRIPT

true 定義されると、フレームワークがJavaScript ファイルを再フォーマットできなくなります。そのため、デバッグ機能が使用できなくなります。


第第3章章異なる環境の設定異なる環境の設定

11

org.ajax4jsf.RESOURCE_URI_PREFIX

a4j 生成されたリソースすべての URLに追加するプレフィックスを定義します。 RichFaces によって生成されたリソース要求を処理することが目的です。

org.ajax4jsf.GLOBAL_RESOURCE_URI_PREFIX

a4j/g すべてのグローバルリソースのURI に追加されるプレフィックスを定義します。 RichFaces によって生成されたリソース要求を処理するためのプレフィックスです。

org.ajax4jsf.SESSION_RESOURCE_URI_PREFIX

a4j/s 生成されたリソースのセッションを追跡するために使用するプレフィックスを定義します。RichFaces によって生成されたリソース要求を処理するためのプレフィックスです。

org.ajax4jsf.DEFAULT_EXPIRE 86400 リソースがブラウザへストリームバックされた時にリソースがキャッシュされる期間 (秒単位) を定義します。

org.ajax4jsf.SERIALIZE_SERVER_STATE

false true に設定されると、コンポーネントのステート (ツリーではない) がセッションに保存される前にシリアライズされます。モデル変更に影響を受けるビューステートを持つアプリケーションで有用です。この代わりに各環境で com.sun.faces.serializeServerState パラメータと org.apache.myfaces.SERIALIZE_STATE_IN_SESSIONパラメータを使用することもできます。


注記注記

org.richfaces.SKIN は org.ajax4jsf.SKIN と同様に使用されます。

表表3.2 org.ajax4jsf.Filter 初期化パラメータ初期化パラメータ



12

log4j-init-file - log4j.xml 設定ファイルへの(Web アプリケーションのコンテキストに相対的な) パスです。アプリケーションごとのカスタムロギングを設定するために使用できます。

enable-cache true フレームワークによって生成されたリソース (JavaScript、 CSS、イメージなど) のキャッシングを有効にしますが、カスタムのJavaScript やスタイルをデバッグする際はキャッシュされたリソースは使用されません。

forcenotrf true すべての JSF ページが HTML 構文チェックフィルタによって解析されるよう強制します。 falseに設定すると、 AJAX 応答のみが解析され、整形式 XML へ変換されます。 false に設定するとパフォーマンスは向上されますが、AJAX の更新中に予期しない情報がレンダリングされる原因にもなります。


3.2. SUN JSF RI

追加設定を変更しなくても RichFaces は JavaServer Faces 1.2_13 と動作します。

3.3. FACELETS サポート

使用されるバージョンに関係なく RichFaces は Facelets を高レベルでサポートしますが、一部の JSFフレームワーク (Faces を含む) では、独自の ViewHandler を ViewHandler チェーンの最初にリストする必要があります。また、 RichFaces ではその AjaxViewHandler を最初にリストする必要がありますが、 AjaxViewHandler が最初にインストールされるため、設定を変更する必要はありません。 RichFaces なしで複数のフレームワークが使用される場合、 VIEW_HANDLERS パラメータを使用して、 ViewHandler の使用順序を定義することができます。例は次の通りです。

これは、正式には Facelets が最初に使用され、小さい重要なタスクを実行するため AjaxViewHandler が若干先に使用されることを宣言します。

...<context-param> <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name> <param-value>com.sun.facelets.FaceletViewHandler</param-value></context-param>...


13

注記注記

この場合、 WEB-INF/faces-config.xml に FaceletViewHandler を定義する必要はありません。

3.4. JBOSS SEAM サポート

JBoss Enterprise Application Server 内で実行される場合、 RichFaces は JBoss Seam と Facelets との互換性を有します。追加の JAR は必要ありません。必要なのはアプリケーションで RichFaces ライブラリをパッケージ化することのみです。

Seam 1.2 では、 web.xml が次のようにならなければなりません。

<?xml version="1.0" ?><web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">



<filter> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter>

<filter-mapping> <filter-name>richfaces</filter-name> <url-pattern>*.seam</url-pattern> </filter-mapping>



<listener> <listener-class>org.jboss.seam.servlet.SeamListener</listener-class> </listener>

<servlet> <servlet-name>Seam Resource Servlet</servlet-name> <servlet-class>org.jboss.seam.servlet.ResourceServlet</servlet-class> </servlet>

<servlet-mapping> <servlet-name>Seam Resource Servlet</servlet-name> <url-pattern>/seam/resource/*</url-pattern> </servlet-mapping>

<filter> <filter-name>Seam Filter</filter-name> <filter-class>org.jboss.seam.web.SeamFilter</filter-class> </filter>


14

Seam 2.x は RichFaces Filter をサポートするため、 web.xml は次のようにならなければなりません。

<filter-mapping> <filter-name>Seam Filter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>



<listener> <listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class> </listener>



<context-param> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param>

<context-param> <param-name>javax.faces.DEFAULT_SUFFIX</param-name> <param-value>.xhtml</param-value> </context-param>

<servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet>

<servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.seam</url-pattern> </servlet-mapping></web-app>

<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<context-param> <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name> <param-value>com.sun.facelets.FaceletViewHandler</param-value> </context-param>



<listener> <listener-class>org.jboss.seam.servlet.SeamListener</listener-


15

class> </listener>

<servlet> <servlet-name>Seam Resource Servlet</servlet-name> <servlet-class>org.jboss.seam.servlet.SeamResourceServlet</servlet-class> </servlet>

<servlet-mapping> <servlet-name>Seam Resource Servlet</servlet-name> <url-pattern>/seam/resource/*</url-pattern> </servlet-mapping>

<filter> <filter-name>Seam Filter</filter-name> <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class> </filter>

<filter-mapping> <filter-name>Seam Filter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>



<context-param> <param-name>javax.faces.DEFAULT_SUFFIX</param-name> <param-value>.xhtml</param-value> </context-param>

<context-param> <param-name>facelets.DEVELOPMENT</param-name> <param-value>true</param-value> </context-param>

<servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet>

<servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.seam</url-pattern> </servlet-mapping></web-app>


16

第4章 RICHFACES フレームワークの基本概念

4.1. はじめに

RichFaces フレームワークは、既存ページへ AJAX 機能を追加するコンポーネントライブラリとして実装されます。そのため、 JavaScript コードを書いたり、既存コンポーネントを新しい AJAX ウィジットに置き換える必要がありません。 RichFaces は従来のコンポーネント全体のサポートではなく、ページ全体の AJAX サポートを有効にするため、クライアント上の AJAX イベントによって変更された内容を反映するページの領域を定義することができます。

下図は全体のプロセスを表しています。

図図4.1 要求処理フロー要求処理フロー

RichFaces では、 AJAX 要求の結果でアップデートしたい JSF ページのセクションを JSF タグを使用して定義できます。また、サーバーへ AJAX 要求を送信するためのオプションを複数提供します。すべてが自動的に行われるため、 JavaScript や XMLHTTPRequest オブジェクトを手作業で書く必要はありません。

4.2. RICHFACES アーキテクチャの概要

下図には RichFaces フレームワークの重要なエレメントの一部が記載されています。

第第4章章 RICHFACES フレームワークの基本概念フレームワークの基本概念

17

図図4.2 コアのコアの AJAX コンポーネント構造コンポーネント構造

AJAX フィルタフィルタ

RichFaces を最大限に利用するには、アプリケーションの web.xml に Filter を登録することをお勧めします。Filter は複数の要求タイプを認識します。図 5.3 のシーケンス図は、通常の通常の JSF 要求とAJAX 要求の処理における違いを示しています。


18

図図4.3 要求処理シーケンス図要求処理シーケンス図

どちらの場合でも、アプリケーションが要求する必要な静的または動的リソースの情報は ResourceBuilder クラスに登録されます。

リソース要求が発行されると、 RichFaces フィルタがこのリソースの Resource Cache をチェックします。 Resource Cache が存在する場合はリソースがクライアントへ返されますが、存在しないとフィルタは ResourceBuilder に登録されているリソースを検索します。リソースが登録されている場合、 RichFaces フィルタは ResourceBuilder がリソースを作成 (送信) するよう要求します。

次の図はリソース要求のプロセスを表しています。


19

図図4.4 リソース要求シーケンス図リソース要求シーケンス図

AJAX アクションコンポーネントアクションコンポーネント

AJAX Action コンポーネントを使用して、クライアント側から AJAX 要求を送信します。<a4j:commandButton>、<a4j:commandLink>、<a4j:poll>、<a4j:support> など多くのAJAX Action コンポーネントがあります。

AJAX コンテナコンテナ

AjaxContainer は、 AJAX 要求中にデコードされるべき JSF ページの領域を定義するインターフェースです。 AjaxViewRoot と AjaxRegion は共にこのインターフェースの実装です。

JavaScript エンジンエンジン

RichFaces JavaScript エンジンはクライアント側で実行され、 AJAX 応答からの情報を基に JSF ページの異なる領域をアップデートします。 JavaScript コードは自動的に操作するため、直接使用する必要はありません。

4.3. 要求エラーとセッションの期限切れへの対処

RichFaces では、例外を処理する標準のハンドラを再定義できます。例外的な状態が発生した時に実行される独自の JavaScript を定義することが推奨されます。

次のコードを web.xml へ追加します。

4.3.1. 要求エラーへの対処

<context-param> <param-name>org.ajax4jsf.handleViewExpiredOnClient</param-name> <param-value>true</param-value></context-param>


20

AJAX 要求中にエラーが発生した時にクライアント上で独自のコードを実行するには、次のように標準の A4J.AJAX.onError メソッドを再定義する必要があります。

この関数は次のパラメータを許可します。

req

エラーを呼び出す要求のパラメータ文字列

status

サーバーが返したエラーの数

message

エラーのデフォルトメッセージ

よって、タイムアウトや内部サーバーエラーなどが発生した時に呼び出される独自のハンドラを作成することができます。

4.3.2. セッションの期限切れへの対処

SessionExpiration イベントで呼び出される onExpired フレームワークメソッドを再定義することもできます。

例例

この関数は次のパラメータを取ることができます。

loc

現ページの URL (必要に応じてアップデート可能)

expiredMsg

SessionExpiration の際に表示されるデフォルトメッセージ

A4J.AJAX.onError = function(req, status, message){ window.alert("Custom onError handler "+message);}

A4J.AJAX.onExpired = function(loc, expiredMsg){ if(window.confirm("Custom onExpired handler "+expiredMsg+" for a location: "+loc)){ return loc; } else { return false; }}


21

注記注記

カスタマイズされた onExpire ハンドラは MyFaces では動作しません。 MyFaces は内部的にデバッグページを生成して例外を処理します。このような動作を回避するには次を使用します。

4.4. SKINNABILITY (スキンの有効性)

4.4.1. Skinnability を使用する理由

企業向けアプリケーションの CSS (カスケーディングスタイルシート) ファイルを見ると、同じ色が頻繁に記載されていることに気がつくでしょう。標準的な CSS は特定の色をパネルヘッダの色やアクティブなポップアップメニュー項目の背景色、分離文字の色などとして抽象的に定義することができません。一般的なインターフェーススタイルを定義するには、同じ値を複数回コピーしなければならないため、インターフェースの数が多いほど、繰り返しが多く必要となります。

そのため、アプリケーションのパレットを変更したい場合は、相互関連する値を変更する必要があります。そうしないと、ご使用のインターフェースは不体裁になることがあります。カスタマがインターフェースのルックアンドフィールをリアルタイムで調節したい場合は、複数の CSS ファイルを変更することができ、それぞれ同じ値が複数回含まれることになります。

RichFaces にビルトインされ完全実装されているスキンスキンを使用すると、このような問題を解決することができます。命名された各スキンには、ユーザーインターフェースのパレットやその他の属性を定義するスキンパラメータスキンパラメータがあります。スキンパラメータの一部を変更するだけで、インターフェースを常に干渉せずに多数のコンポーネントの外見を同時に変更することができます。

skinnability 機能は標準的な CSS を完全に置き換えるものではなく、 CSS を不要にするものではありません。 skinnability は正規 CSS 宣言と共に使用できる標準的な CSS の高レベル拡張です。JSF 表現言語より CSS のスキンパラメータを参照することもできます。これにより、ページにある全エレメントの外見を完全に同期化することができます。

4.4.2. Skinnability の使用

RichFaces skinnability は、下記との併用を目的としています。

RichFaces フレームワークに定義されたスキンパラメータ

コンポーネントの事前定義された CSS クラス

ユーザースタイルクラス

コンポーネントの配色は 3 つのスタイルクラスのうちどれを使用してもそのエレメントに適用することができます。

フレームワークに挿入されたデフォルトのスタイルクラスフレームワークに挿入されたデフォルトのスタイルクラス

...<context-param> <param-name>org.apache.myfaces.ERROR_HANDLING</param-name> <param-value>false</param-value></context-param> ...


22

このスタイルクラスにはスキンからの定数へリンクされたスタイルパラメータが含まれています。各コンポーネントに対して定義され、表現のデフォルトレベルを指定します。スキンパラメータの値を変更してアプリケーションインターフェースを変更することができます。

スキン拡張のスタイルクラススキン拡張のスタイルクラス

このクラス名は各コンポーネントエレメントに対して定義され、 CSS ファイルの同じ名前でクラスを定義できるようフレームワークに挿入されます。これにより、このクラスを使用するすべてのコンポーネントの外見を簡単に拡張できます。

ユーザースタイルクラスユーザースタイルクラス

styleClass パラメータの 1 つを使用してコンポーネントエレメントの独自のクラスを定義することができます。そのため、クラスに指定された CSS スタイルパラメータに従って特定のコンポーネントの外見が変更されます。

4.4.3. 例

簡単なパネルパネルコンポーネントの例は次の通りです。　

このコードはページでパネルコンポーネントを生成します。2 つのエレメントで構成されています。ラッパー <div> エレメントと特定のスタイルのプロパティを持つパネルボディの <div> エレメントです。ラッパー <div> エレメントは以下のようになります。

dr-pnl はスキンパラメータよりフレームワークで指定される CSS クラスです。

background-color は generalBackgroundColor で定義されます。

border-color は panelBorderColor で定義されます。

全ページの全パネルの全色を変更するには、それらのスキンパラメータ値を変更します。ただし、ページで <rich:panel> クラスを特定すると、そのパラメータはこのページ上のすべてのパネルから取得されます。

開発者はパネルのスタイルプロパティを変更することも可能です。例は次の通りです。

前述の定義は、 customClass からスタイルプロパティの一部を特定のパネルへ追加できます。この結果、 3 つのスタイルを取得します。

4.4.4. RichFaces のスキンパラメータテーブル

<rich:panel> ... </rich:panel>

<div class="dr-pnl rich-panel"> ...</div>

<rich:panel styleClass="customClass" />

<div class="dr_pnl rich-panel customClass"> ...</div>


23

RichFaces は最も単純なレベルの一般的なカスタマイズで 8 つの事前定義されたスキンパラメータ (スキン) を備えています。

DEFAULT

plain

emeraldTown

blueSky

wine

japanCherry

ruby

classic

deepMarine

スキンを適用するには、 org.richfaces.SKIN コンテキストパラメータにスキン名を指定する必要があります。

下表は blueSky スキンの各パラメータの値を表しています。

表表4.1 色色

パラメータ名パラメータ名デフォルト値デフォルト値

headerBackgroundColor #BED6F8

headerGradientColor #F2F7FF

headTextColor #000000

headerWeightFont bold

generalBackgroundColor #FFFFFF

generalTextColor #000000

generalSizeFont 11px

generalFamilyFont Arial、 Verdana、 sans-serif

controlTextColor #000000

controlBackgroundColor #FFFFFF

additionalBackgroundColor #ECF4FE


24

shadowBackgroundColor #000000

shadowOpacity 1

panelBorderColor #BED6F8

subBorderColor #FFFFFF

tabBackgroundColor #C6DEFF

tabDisabledTextColor #8DB7F3

trimColor #D6E6FB

tipBackgroundColor #FAE6B0

tipBorderColor #E5973E

selectControlColor #E79A00

generalLinkColor #0078D0

hoverLinkColor #0090FF

visitedLinkColor #0090FF


表表4.2 フォントフォント


headerSizeFont 11px

headerFamilyFont Arial、 Verdana、 sans-serif

tabSizeFont 11px

tabFamilyFont Arial、 Verdana、 sans-serif

buttonSizeFont 11px

buttonFamilyFont Arial、 Verdana、 sans-serif

tableBackgroundColor #FFFFFF


25

tableFooterBackgroundColor #cccccc

tableSubfooterBackgroundColor #f1f1f1

tableBorderColor #C0C0C0


バージョン 3.0.2 に plain スキンが追加されました。このスキンにはパラメータがなく、独自のスタイルで RichFaces コンポーネントを既存のプロジェクトへ組み込む時に重要となります。

4.4.5. 独自のスキンファイルの作成および使用

次のように独自のスキンファイルを作成します。　

ファイルを作成します。そこで、スタイルクラスで使用されるスキン定数を定義します (「RichFaces のスキンパラメータテーブル」を参照)。スキンファイルの名前は次の形式に従います : <name>.skin.properties 。例えばこのファイルで RichFaces の事前定義したスキンパラメータ blueSky、classic、deepMarine などを見てみましょう。こうしたファイルは /META-INF/skins フォルダの richfaces-impl-xxxxx.jar アーカイブにあります。

スキンの定義 <contex-param> を次のようにアプリケーションの web.xml に追加します。

/META-INF/skins または /WEB-INF/classes ディレクトリのどちらかに <name>.skin.properties ファイルを配置します。

4.4.6. RichFaces のビルトイン Skinnability

RichFaces では、スキンをユーザーインターフェース (UI) のデザインに組み入れることができます。このフレームワークではプロパティファイルの名前付きのスキンパラメータを使用してコンポーネントのセット全体でスキンの外見を常に制御することができます。事前定義されたスキンの例は、http://livedemo.exadel.com/richfaces-demo/ で参照できます。

スキンにより、 RichFaces によってビルドされる標準的な JSF コンポーネントとカスタム JSF コンポーネントをレンダリングするスタイルを定義できます。スキンを試してみるには、次の手順に従います。

次のようにカスタムのレンダリングキットを作成し、 faces-config.xml に登録します。

...<context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>name</param-value></context-param>...

<render-kit> <render-kit-id>NEW_SKIN</render-kit-id> <render-kit-class>org.ajax4jsf.framework.renderer.ChameleonRenderKitImpl</render-kit-class></render-kit>


26

http://livedemo.exadel.com/richfaces-demo/

次に、ルックアンドフィールの事前定義された変数を基にしてコンポーネントのカスタムレンダラを作成し登録します。

最後に、スキンパラメータを持つプロパティファイルをクラスパスのルートに配置します。プロパティファイルは次の 2 つの要件を満たしていなければなりません。

ファイル名は skinName.skin.properties でなければなりません。この場合は newskin.skin.properties と呼びます。

このファイルの最初の行は render.kit=render-kit-id でなければなりません。ここでは、 render.kit=NEW_SKIN を使用します。

カスタムレンダラ作成の詳細は http://java.sun.com/javaee/javaserverfaces/reference/docs/index.html を参照してください。

4.4.7. ランタイム時のスキン変更

ランタイム時にスキンを変更するには、 web.xml に次の EL 表現を定義します。

skinBean コードは次のようになります。

設定ファイルの skin プロパティの最初の値を設定する必要があります。classic の設定方法は以下のとおりです。

<renderer> <component-family>javax.faces.Command</component-family> <renderer-type>javax.faces.Link</renderer-type> <renderer-class>newskin.HtmlCommandLinkRenderer</renderer-class></renderer>

<context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>#{skinBean.skin}</param-value></context-param>

public class SkinBean {

private String skin;

public String getSkin() { return skin; } public void setSkin(String skin) { this.skin = skin; }}

<managed-bean> <managed-bean-name>skinBean</managed-bean-name> <managed-bean-class>SkinBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>skin</property-name>


27

http://java.sun.com/javaee/javaserverfaces/reference/docs/index.html

デフォルトスキンのプロパティを変更することもできます。変更するには、デフォルトスキンのプロパティを編集します。ページコードの例は次の通りです。

上記のコードは次のオプションリストを生成します。

<value>classic</value> </managed-property></managed-bean>

<h:form> <div style="display: block; float: left"> <h:selectOneRadio value="#{skinBean.skin}" border="0" layout="pageDirection" title="Changing skin" style="font-size: 8; font-family: comic" onchange="submit()"> <f:selectItem itemLabel="plain" itemValue="plain" /> <f:selectItem itemLabel="emeraldTown" itemValue="emeraldTown" /> <f:selectItem itemLabel="blueSky" itemValue="blueSky" /> <f:selectItem itemLabel="wine" itemValue="wine" /> <f:selectItem itemLabel="japanCherry" itemValue="japanCherry" /> <f:selectItem itemLabel="ruby" itemValue="ruby" /> <f:selectItem itemLabel="classic" itemValue="classic" /> <f:selectItem itemLabel="laguna" itemValue="laguna" /> <f:selectItem itemLabel="deepMarine" itemValue="deepMarine" /> <f:selectItem itemLabel="blueSky Modified" itemValue="blueSkyModify" /> </h:selectOneRadio> </div> <div style="display: block; float: left"> <rich:panelBar height="100" width="200"> <rich:panelBarItem label="Item 1" style="font-family: monospace; font-size: 12;"> Changing skin in runtime </rich:panelBarItem> <rich:panelBarItem label="Item 2" style="font-family: monospace; font-size: 12;"> This is a result of the modification "blueSky" skin </rich:panelBarItem> </rich:panelBar> </div></h:form>


28

図図4.5 ランタイム時のスキン変更ランタイム時のスキン変更

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


29

http://msdn2.microsoft.com/en-us/library/ms533687(VS.85).aspx

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 クラスでエレメント内にネストされる基本エレメント。例は次の通りです。

基本的なエレメント名またはタイプのうち 1 つと対応するクラス名を持つエレメントは以下の例のとおり rich-<elementName>[-<elementType>] スキームでマップされます。

...

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

...

.rich-select { //class content}

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

...


30

注記注記

rich-link、 rich-link-hover、 rich-link-visited など、link タイプと疑似クラス名によってエレメントはクラスを割り当てられます。

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

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

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

4.4.8.1. 標準レベル標準レベル

表表4.3 input、、 select、、 textarea、、 button、、 keygen、、 isindex、、 legend のの HTML エレメントスキンバエレメントスキンバインディングインディング

CSS プロパティプロパティスキンパラメータスキンパラメータ

font-size　　 generalSizeFont

font-family　　 generalFamilyFont

color controlTextColor

...<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>...


31

表表4.4 fieldset のの HTML エレメントスキンバインディングエレメントスキンバインディング


border-color panelBorderColor

表表4.5 hr のの HTML エレメントスキンバインディングエレメントスキンバインディング



表表4.6 a のの HTML エレメントスキンバインディングエレメントスキンバインディング


color generalLinkColor

表表4.7 a:hover のの HTML エレメントスキンバインディングエレメントスキンバインディング


color hoverLinkColorgeneralLinkColor

表表4.8 a:visited のの HTML エレメントスキンバインディングエレメントスキンバインディング


color visitedLinkColor

表表4.9 .rich-input、、 .rich-select、、 .rich-textarea、、 .rich-keygen、、 .rich-isindex、、 .rich-link のリッチのリッチエレメントスキンバインディングエレメントスキンバインディング





表表4.10 .rich-fieldset のリッチエレメントスキンバインディングのリッチエレメントスキンバインディング


32



表表4.11 .rich-hr のリッチエレメントスキンバインディングのリッチエレメントスキンバインディング



border-width 1px

border-style solid

表表4.12 .rich-link のリッチエレメントスキンバインディングのリッチエレメントスキンバインディング


color generalLinkColor

表表4.13 .rich-link:hover のリッチエレメントスキンバインディングのリッチエレメントスキンバインディング


color hoverLinkColor

表表4.14 .rich-link:visited のリッチエレメントスキンバインディングのリッチエレメントスキンバインディング


color visitedLinkColor

表表4.15 .rich-field のリッチエレメントスキンバインディングのリッチエレメントスキンバインディング

CSS プロパティプロパティスキンパラメータスキンパラメータ / 値値

border-width 1px

border-style inset


background-color controlBackgroundColor

background-repeat no-repeat


33

background-position 1px 1px

CSS プロパティプロパティスキンパラメータスキンパラメータ / 値値

表表4.16 .rich-field-edit のリッチエレメントスキンバインディングのリッチエレメントスキンバインディング


border-width 1px

border-style inset


background-color editBackgroundColor

表表4.17 .rich-field-error のリッチエレメントスキンバインディングのリッチエレメントスキンバインディング


border-width 1px

border-style inset


background-color warningBackgroundColor

background-repeat no-repeat

background-position center left

padding-left 7px

表表4.18 .rich-button、、 .rich-button-disabled、、 .rich-button-over のリッチエレメントスキンバインのリッチエレメントスキンバインディングディング


border-width 1px

border-style solid


background-color trimColor


34

padding 2px 10px 2px 10px

text-align center

cursor pointer

background-repeat repeat-x

background-position top left


表表4.19 .rich-button-press のリッチエレメントスキンバインディングのリッチエレメントスキンバインディング


background-position bottom left

表表4.20 .rich-container fieldset、、 .rich-fieldset のリッチエレメントスキンバインディングのリッチエレメントスキンバインディング



border-width 1px

border-style solid

padding 10px

padding 10px

表表4.21 .rich-legend のリッチエレメントスキンバインディングのリッチエレメントスキンバインディング





font-weight bold

表表4.22 .rich-form のリッチエレメントスキンバインディングのリッチエレメントスキンバインディング


35


padding 0px

margin 0px

4.4.8.2. 拡張レベル拡張レベル

表表4.23 input、、 select、、 textarea、、 button、、 keygen、、 isindex のの HTML エレメントスキンバインディエレメントスキンバインディングング


border-width 1px



表表4.24 *|button のの HTML エレメントスキンバインディングエレメントスキンバインディング





color headerTextColor

background-color headerBackgroundColor

background-image org.richfaces.renderkit.html.images.ButtonBackgroundImage

表表4.25 button[type=button]、、 button[type=reset]、、 button[type=submit]、、 input[type=reset]、、input[type=submit]、、 input[type=button] のの HTML エレメントスキンバインディングエレメントスキンバインディング






36

color headerTextColor

background-color headerBackgroundColor

background-image org.richfaces.renderkit.html.images.ButtonBackgroundImage


表表4.26 *|button[disabled]、、 .rich-container *|button[disabled]、、 .rich-button-disabled のの HTML エエレメントスキンバインディングレメントスキンバインディング


color tabDisabledTextColor

border-color tableFooterBackgroundColor

background-color tableFooterBackgroundColor

background-image org.richfaces.renderkit.html.images.ButtonDisabledBackgroundImage

表表4.27 .rich-button-disabled、、.rich-container button[type="button"][disabled]、、.rich-button-button-disabled、、.rich-container button[type="reset"][disabled]、、.rich-button-reset-disabled、、.rich-container button[type="submit"][disabled]、、.rich-button-submit-disabled、、.rich-containerinput[type="reset"][disabled]、、.rich-input-reset-disabled、、.rich-container input[type="submit"][disabled]、、.rich-input-submit-disabled, .rich-container input[type="button"][disabled]、、.rich-input-button-disabled のの HTML エレメントスキンバインディングエレメントスキンバインディング





background-image org.richfaces.renderkit.html.images.ButtonDisabledBackgroundImage

表表4.28 *button[type="button"][disabled]、、button[type="reset"][disabled]、、button[type="submit"][disabled]、、input[type="reset"][disabled]、、input[type="submit"][disabled]、、input[type="button"][disabled] のの HTML エレメントスキンバインディングエレメントスキンバインディング


37





表表4.29 *|textarea のエレメントスキンバインディングのエレメントスキンバインディング







background-image org.richfaces.renderkit.html.images.InputBackgroundImage

表表4.30 textarea[type=textarea]、、 input[type=text]、、 input[type=password]、、 select のの HTML エレエレメントスキンバインディングメントスキンバインディング







background-image org.richfaces.renderkit.html.images.InputBackgroundImage

表表4.31 *|textarea[disabled]、、 .rich-container *|textarea[disabled] のの HTML エレメントスキンバインエレメントスキンバインディングディング


38


color tableBorderColor

表表4.32 textarea[type="textarea"][disabled]、、input[type="text"][disabled]、、input[type="password"][disabled]



表表4.33 textarea[type="textarea"][disabled]、、input[type="text"][disabled]、、input[type="password"][disabled]



注記注記

ajaxPortlet を次のように設定すると基本スキニングレベルが失敗することがあります。

4.4.9. 拡張スキニングサポートのクライアント側スクリプト

標準の HTML コントロールの拡張スキニングは自動的に適用されます。ブラウザタイプが検知され、ブラウザが拡張スキニングを完全サポートしない場合は基本スキニングが適用されます。

RichFaces コンポーネントや標準の HTML コントロールを手作業でスキンしたい場合、ブラウザによっては (Opera や Safari など) 標準の HTML コントロールに問題があるため、問題が発生することがあります。

Skinnability を無効にするには、次のように web.xml ファイルの org.richfaces.LoadStyleStrategy パラメータを NONE に設定します。

...<portlet> <portlet-name>ajaxPortlet</portlet-name> <header-content> <script src="/faces/rfRes/org/ajax4jsf/framework.pack.js" type="text/javascript" /> <script src="/faces/rfRes/org/richfaces/ui.pack.js" type="text/javascript" /> <link rel="stylesheet" type="text/css" href="/faces/rfRes/org/richfaces/skin.xcss" /> </header-content></portlet>...

...


39

また、 RichFaces コンポーネントや標準の HTML コントロールにスキンを適用するスタイルシートが含まれるようにしてください。

Opera と Safari における拡張スキニングの問題を回避するには、 RichFaces ライブラリに skinning.js クライアントスクリプトを追加します。このスクリプトはブラウザタイプを検出し、完全サポートするブラウザのみ拡張スキニングを有効にします。

ページに次の JavaScript を挿入し、スクリプトをアクティベートします。

スクリプトの読み込みストラテジが使用されずに拡張スキニングが有効だと、コンソールに警告メッセージが表示されます。

また、 link タグに media 属性を指定する必要があります。これは、 extended_both.xcss スタイルシートを rich-extended-skinning に追加します。

自動 Skinnability が無効になっている時にページにスタイルシートが含まれるようにするには、次を追加します。

注記注記

これにより、 Base64 エンコーダが「.」ではなく「!」を使用するようになるため、 a4j_versionXXX ではなく a4j/versionXXX をリソースプレフィックスとして使用するようにしてください。

4.4.10. XCSS ファイル形式

XCSS (クロスサイトカスケーディングスタイルシート) ファイルは RichFaces コンポーネントSkinnability のコアです。 XCSS は、スキニングプロセスを拡張する XML 形式の CSS です。RichFaces は、特定コンポーネントのルックアンドフィールパラメータをすべて格納する XCSS ファイルを解析し、ウェブブラウザが認識できる標準の CSS ファイルへ情報をコンパイルします。

XCSS ファイルには CSS プロパティとスキンパラメータのマッピングが含まれています。CSS セレクタをスキンパラメータにマップするには < u:selector > と < u:style> XML タグを使用し、次の例のとおりマッピング構造を定義します。

<context-param> <param-name>org.richfaces.LoadStyleStrategy</param-name> <param-value>NONE</param-value></context-param>...

<script type="text/javascript"> window.RICH_FACES_EXTENDED_SKINNING_ON = true;</script>

<link href='/YOUR_PROJECT_NAME/a4j_3_2_2-SNAPSHOTorg/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf' type='text/css' rel='stylesheet' class='component' /><link media='rich-extended-skinning' href='/ YOUR_PROJECT_NAME /a4j_3_2_2-SNAPSHOTorg/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf' type='text/css' rel='stylesheet' class='component' /><link href='/ YOUR_PROJECT_NAME /a4j_3_2_2-SNAPSHOT/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf' type='text/css' rel='stylesheet' class='component' />


40

プロセス中、このコードが解析され、次のように標準の CSS 形式へアセンブルされます。

<u:selector> の name 属性は CSS セレクタを定義します。一方で、<u:style> タグの name 属性は CSS プロパティにマップされたスキン定数を定義します。<u:style> タグの value 属性を使用して、CSS プロパティに値を割り当てることもできます。

同一のスキンプロパティを持つ CSS セレクタをコンマ区切りリストに含めるようにすることもできます。

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

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

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

...<u:selector name=".rich-component-name"> <u:style name="background-color" skin="additionalBackgroundColor" /> <u:style name="border-color" skin="tableBorderColor" /> <u:style name="border-width" skin="tableBorderWidth" /> <u:style name="border-style" value="solid" /></u:selector>...

...

.rich-component-name { background-color: additionalBackgroundColor; /*the value of the constant defined by your skin*/ border-color: tableBorderColor; /*the value of the constant defined by your skin*/ border-width: tableBorderWidth; /*the value of the constant defined by your skin*/ border-style: solid;}...

...<u:selector name=".rich-ordering-control-disabled, .rich-ordering-control-top, .rich-ordering-control-bottom, .rich-ordering-control-up, .rich-ordering-control-down"> <u:style name="border-color" skin="tableBorderColor" /></u:selector>...

...mvn archetype:create-DarchetypeGroupId=org.richfaces.cdk-DarchetypeArtifactId=maven-archetype-plug-n-skin


41

http://community.jboss.org/wiki/HowToConfigureMavenForRichFaces

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

archetypeVersion — 3.3.1.GA のように RichFaces のバージョンを表します。

artifactId — プロジェクトのアーティファクト ID です。

groupId — プロジェクトのグループ ID です。

version — 作成するプロジェクトのバージョンです。デフォルトでは 1.0.-SNAPSHOT に設定されています。

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

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

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

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

name — 新しいスキンの名前を定義します。

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

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

baseSkin — ベーススキンの名前を定義します。

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

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

表表4.34 mvn cdk:add-skin -Dname=SKIN-NAME -Dpackage=SKIN-PACKAGE コマンドで作成されコマンドで作成されたファイルとフォルダたファイルとフォルダ

ファイル名ファイル名場所場所内容内容

BaseImage.java \src\main\java\SKIN-PACKAGE\SKIN-NAME\images\

イメージを格納するために使用する基本クラスです。

-DarchetypeVersion=RF-VERSION-DartifactId=ARTIFACT-ID-DgroupId=GROUP-ID-Dversion=VERSION...

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


42

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 コントロールの外見を統一するために使用されるスタイルシートへのパスです。詳細は「標準コントロールスキニング (StandardControls Skinning) 」を参照してください。

gradientType

新しいスキンに適用されるグラデーションのタイプを設定する事前定義したプロパティです。可能な値は glass、plastic、plainです。グラデーションの実装に関する詳細は本章の後半で説明します。

SKIN-NAME.xcss src\main\resources\META-INF\skins

新しいスキンが修正したコンポーネントの XCSS ファイルをインポートする XCSS ファイルです。



43

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> タグ内にあるようにしてください。例は以下のとおりです。

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

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

...

.rich-calendar-cell { background: #537df8;}...

...<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>...

...mvn clean install...


44

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

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\ に配置するとプロジェクトの新規作成されたスキンを使用することができるようになりました。

4.4.11.1. 使用詳細使用詳細

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

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

...<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>...

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

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


45

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

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

前項で説明した通り、 -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; を挿入します。

変更が適用されたため、次に新しい 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 ファイルに追加します。

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

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

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


46

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

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

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

4.5. ステートマネージャ API　

JFS にはビューからビューへのナビゲーションナビゲーションを定義できる上級のナビゲーションメカニズムがあります。 Web アプリケーションでは、ユーザーがボタンやハイパーリンク、その他のコマンドコンポーネントをクリックして他のページに変更するとナビゲーションが発生します。同じビューの同じ論理ステート間における切り替えメカニズムはありません。例えば、ログインログイン / 登録ダイアログ登録ダイアログでは、既存ユーザーはユーザー名とパスワードを使ってログインしますが、新しいユーザーが登録しようとすると、別のフィールド (Confirm) が表示され、ユーザーが To register リンクをクリックするとボタンラベルとメソッドが変更されます。

<param-value>PlugnSkinDemo</param-value></context-param>

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


47

図図4.7 ログインダイアログログインダイアログ

図図4.8 登録ダイアログ登録ダイアログ

RichFaces ステートステート API によりページに対するステートのセットとステートに対するプロパティを簡単に定義できます。

States クラスは map にインターフェースし、 keySet はステート名を定義し、 entrySet は Statemap です。State map はキーやオブジェクトのプロパティ、メソッドバインディング、不変ステート変数のいずれかを定義します。これらの値はアクティブステートによって変更することがあります。

図図4.9 RichFaces ステートステート API

RichFaces ステート API の最も便利な機能の 1 つは State 間をナビゲートできる機能です。 API は標準の JSF ナビゲーションより State の変更を実装します。アクションコンポーネントが結果を返すと、 JSF ナビゲーションハンドラ (RichFaces ステート API によって拡張) はその結果が State 変更変更の結果の結果として登録されているか確認します。 true の場合、対応する State がアクティベートされます。 false の場合は標準のナビゲーション処理が呼び出されます。


48

次のように RichFaces ステート API を実装します。

faces-config.xml ファイルにステートナビゲーションハンドラと EL リゾルバを登録します。

faces-config.xml に追加のアプリケーションファクトリを登録します。

faces-config.xml に 2 つの管理 Bean を登録します。

1 つの Bean (config) は次の例のように State を定義し保存します。

...<application> <navigation-handler>org.richfaces.ui.application.StateNavigationHandler</navigation-handler> <el-resolver>org.richfaces.el.StateELResolver</el-resolver></application>...

...<factory> <application-factory>org.richfaces.ui.application.StateApplicationFactory</application-factory></factory>...

...<managed-bean> <managed-bean-name>state</managed-bean-name> <managed-bean-class>org.richfaces.ui.model.States</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>states</property-name> <property-class>org.richfaces.ui.model.States</property-class> <value>#{config.states}</value> </managed-property></managed-bean><managed-bean> <managed-bean-name>config</managed-bean-name> <managed-bean-class>org.richfaces.demo.stateApi.Config</managed-bean-class> <managed-bean-scope>none</managed-bean-scope></managed-bean>...

...public class Config {

/** * @return States */


49

public States getStates() { FacesContext facesContext = FacesContext.getCurrentInstance(); States states = new States();

// Registering new User State definition states.setCurrentState("register"); // Name of the new state

// Text labels, properties and Labels for controls in "register" state states.put("showConfirm", Boolean.TRUE); // confirm field rendering states.put("link", "(To login)"); // Switch State link label states.put("okBtn", "Register"); // Login/Register button label states.put("stateTitle", "Register New User"); // Panel title

ExpressionFactory expressionFactory = facesContext.getApplication() .getExpressionFactory();

// Define "registerbean" available under "bean" EL binding on the page ValueExpression beanExpression = expressionFactory .createValueExpression(facesContext.getELContext(), "#{registerbean}", Bean.class); states.put("bean", beanExpression);

// Define "registeraction" available under "action" EL binding on the // page beanExpression = expressionFactory.createValueExpression(facesContext .getELContext(), "#{registeraction}", RegisterAction.class); states.put("action", beanExpression);

// Define method expression inside registeraction binding for this state MethodExpression methodExpression = expressionFactory.createMethodExpression( facesContext.getELContext(), "#{registeraction.ok}", String.class, new Class[] {}); states.put("ok", methodExpression);

// Outcome for switching to login state definition states.setNavigation("switch", "login");

// Login Existent User State analogous definition states.setCurrentState("login"); states.put("showConfirm", Boolean.FALSE); states.put("link", "(To register)"); states.put("okBtn", "Login"); states.put("stateTitle", "Login Existing User");

beanExpression = expressionFactory.createValueExpression(facesContext .getELContext(), "#{loginbean}", Bean.class); states.put("bean", beanExpression);


50

org.richfaces.ui.model.States タイプを持つもう 1 つの Bean (state) は、最初の config Bean にバインドされる管理プロパティ states を格納します。

次に、下記の例のようにページ上で state バインディングを使用します。

ログイン / 登録ダイアログの完全な例は、 RichFaces Live Demo を参照してください。

4.6. ユーザーロールの特定

RichFaces では、 rich:isUserInRole(Object) 関数を用いて、ログインしたユーザーが特定のuser role に属しているかをチェックできます。この関数は、 1 つのストリングまたはストリングのコンマ区切りリスト、 1 つのコレクションなどを引数として取り、ブール値を返します。

例として、管理者に対してのみコントロールの一部をレンダリングする必要があるとしましょう。この場合、管理者ロール (admin) を web.xml ファイルに作成し、管理者としてログインしたユーザーに admin ロールを割り当てる認証を実装します。これで、コンポーネントの rendered 属性を用いてrich:isUserInRole(Object) 関数を使用できるようになります。例えば以下のとおりです。

beanExpression = expressionFactory.createValueExpression(facesContext .getELContext(), "#{loginaction}", LoginAction.class); states.put("action", beanExpression);

methodExpression = expressionFactory.createMethodExpression( facesContext.getELContext(), "#{loginaction.ok}", String.class, new Class[] {}); states.put("ok", methodExpression);

states.setNavigation("switch", "register");

return states; }}...

...<h:panelGrid columns="3"> <h:outputText value="username" /> <h:inputText value="#{state.bean.name}" id="name" required="true" /> <h:outputText value="password" /> <h:inputSecret value="#{state.bean.password}" id="password" required="true" /> <h:outputText value="confirm" rendered="#{state.showConfirm}" /> <h:inputSecret value="#{state.bean.confirmPassword}" rendered="#{state.showConfirm}" id="confirm" required="true" /></h:panelGrid><a4j:commandButton actionListener="#{state.action.listener}" action="#{state.ok}" value="#{state.okBtn}" id="action"/>...

...<rich:editor value="#{bean.text}" rendered="#{rich:isUserInRole('admin')}" />


51

http://livedemo.exadel.com/richfaces-demo/richfaces/stateAPI.jsf?c=stateAPI

この例では、 admin ロールを持つログインユーザーのみがテキストエディタを見ることができます。他のロールを持つユーザーにはレンダリングされません。

...


52

付録A 改訂履歴

改訂改訂 5.1.2-2.400 2013-10-31 Rüdiger LandmannRebuild with publican 4.0.0

改訂改訂 5.1.2-2 2012-07-18 Anthony TownsRebuild for Publican 3.0

改訂改訂 5.1.2-100 Thu 8 December 2011 Russell DickensonJBoss Enterprise Application Platform 5.1.2 GA 向けに改訂

付録付録A 改訂履歴改訂履歴

53

jboss enterprise application platform...jboss enterprise application platform 5 richfaces...

Documents