RichFaces 開発者ガイド

JBoss Enterprise Application Platform 5

JBoss Enterprise Application Platform 5 向け

エディッション 5.1.2

Red Hat Documentation Group

法律上の通知

概要

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

第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 に導入される予定です。テストフレームワークはコンポーネントをテストするだけでなく、 Servlet コンテナにテストアプリケーションをデプロイ せずに JavaScript コードなどサーバー側またはクライアント側の他の機能をテストします。

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

第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 に追加します。

...
<!-- Plugging the "Blue Sky" skin into the project -->
<context-param>
   <param-name>org.richfaces.SKIN</param-name>
   <param-value>blueSky</param-value>
</context-param>

<!-- Making the RichFaces skin spread to standard HTML controls -->
<context-param>
      <param-name>org.richfaces.CONTROL_SKINNING</param-name>
      <param-value>enable</param-value>
</context-param>
 
<!-- Defining and mapping the RichFaces filter -->
<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>
...

...
<!-- Plugging the "Blue Sky" skin into the project -->
<context-param>
   <param-name>org.richfaces.SKIN</param-name>
   <param-value>blueSky</param-value>
</context-param>

<!-- Making the RichFaces skin spread to standard HTML controls -->
<context-param>
      <param-name>org.richfaces.CONTROL_SKINNING</param-name>
      <param-value>enable</param-value>
</context-param>
 
<!-- Defining and mapping the RichFaces filter -->
<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>
...

Copy to Clipboard

Toggle word wrap

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

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

<?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>
</filter-mapping>
  
<listener>
   <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
  
<!-- Faces Servlet -->
<servlet>
   <servlet-name>Faces Servlet</servlet-name>
   <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
   <load-on-startup>1</load-on-startup>
</servlet>
 
<!-- Faces Servlet Mapping -->
<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>

<?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>
</filter-mapping>
  
<listener>
   <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
  
<!-- Faces Servlet -->
<servlet>
   <servlet-name>Faces Servlet</servlet-name>
   <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
   <load-on-startup>1</load-on-startup>
</servlet>
 
<!-- Faces Servlet Mapping -->
<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>

Copy to Clipboard

Toggle word wrap

2.1.3. 管理 Bean
リンクのコピー

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

package demo;

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

package demo;

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

Copy to Clipboard

Toggle word wrap

2.1.4. Bean を faces-cofig.xml に登録
リンクのコピー

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

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

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

Copy to Clipboard

Toggle word wrap

2.1.5. RichFaces Greeter の index.jsp
リンクのコピー

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

<!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" %>
<!-- RichFaces tag library declaration -->
<%@ 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>

<!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" %>
<!-- RichFaces tag library declaration -->
<%@ 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>

Copy to Clipboard

Toggle word wrap

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

注記

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

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

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

Copy to Clipboard

Toggle word wrap

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

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

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

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

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

3.1. Web アプリケーション記述子パラメータ
リンクのコピー

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

Expand

表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` ウインドウのデバッグページ上に表示されます。
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 Runtime Environment 1.4 で動作します)。
org.ajax4jsf.ENCRYPT_PASSWORD	random	リソースデータの暗号化に使用されるパスワードです。設定されていないと、無作為のパスワードが使用されます。
org.ajax4jsf.COMPRESS_SCRIPT	true	定義されると、フレームワークが JavaScript ファイルを再フォーマットできなくなります。そのため、デバッグ機能が使用できなくなります。
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 と同様に使用されます。

Expand

表3.2 org.ajax4jsf.Filter 初期化パラメータ
名前	デフォルト	内容
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 の使用順序を定義することができます。例は次の通りです。

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

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

Copy to Clipboard

Toggle word wrap

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

注記

この場合、 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">

     <!-- richfaces -->

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

     <!-- Seam -->

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

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

     <!-- MyFaces -->

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

     <!-- JSF -->

     <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" ?>
<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">

     <!-- richfaces -->

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

     <!-- Seam -->

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

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

     <!-- MyFaces -->

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

     <!-- JSF -->

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

Copy to Clipboard

Toggle word wrap

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

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

     <!-- Seam -->

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

     <!-- JSF -->

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

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

     <!-- Seam -->

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

     <!-- JSF -->

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

Copy to Clipboard

Toggle word wrap

第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.2 コアの AJAX コンポーネント構造

AJAX フィルタ

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

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

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

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

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

図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 へ追加します。

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

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

Copy to Clipboard

Toggle word wrap

4.3.1. 要求エラーへの対処
リンクのコピー

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

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

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

Copy to Clipboard

Toggle word wrap

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

req: エラーを呼び出す要求のパラメータ文字列
status: サーバーが返したエラーの数
message: エラーのデフォルトメッセージ

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

4.3.2. セッションの期限切れへの対処
リンクのコピー

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

例

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

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

Copy to Clipboard

Toggle word wrap

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

loc: 現ページの URL (必要に応じてアップデート可能)
expiredMsg: SessionExpiration の際に表示されるデフォルトメッセージ

注記

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

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

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

Copy to Clipboard

Toggle word wrap

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 つのスタイルクラスのうちどれを使用してもそのエレメントに適用することができます。

フレームワークに挿入されたデフォルトのスタイルクラス
このスタイルクラスにはスキンからの定数へリンクされたスタイルパラメータが含まれています。各コンポーネントに対して定義され、表現のデフォルトレベルを指定します。スキンパラメータの値を変更してアプリケーションインターフェースを変更することができます。
スキン拡張のスタイルクラス
このクラス名は各コンポーネントエレメントに対して定義され、 CSS ファイルの同じ名前でクラスを定義できるようフレームワークに挿入されます。これにより、このクラスを使用するすべてのコンポーネントの外見を簡単に拡張できます。
ユーザースタイルクラス
styleClass パラメータの 1 つを使用してコンポーネントエレメントの独自のクラスを定義することができます。そのため、クラスに指定された CSS スタイルパラメータに従って特定のコンポーネントの外見が変更されます。

4.4.3. 例
リンクのコピー

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

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

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

Copy to Clipboard

Toggle word wrap

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

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

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

Copy to Clipboard

Toggle word wrap

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

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

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

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

<rich:panel styleClass="customClass" />

<rich:panel styleClass="customClass" />

Copy to Clipboard

Toggle word wrap

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

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

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

Copy to Clipboard

Toggle word wrap

4.4.4. RichFaces のスキンパラメータテーブル
リンクのコピー

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

DEFAULT
plain
emeraldTown
blueSky
wine
japanCherry
ruby
classic
deepMarine

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

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

Expand

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

Expand

表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
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 に追加します。

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

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

Copy to Clipboard

Toggle word wrap

/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 に登録します。

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

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

Copy to Clipboard

Toggle word wrap

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

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

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

Copy to Clipboard

Toggle word wrap

最後に、スキンパラメータを持つプロパティファイルをクラスパスのルートに配置します。プロパティファイルは次の 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 表現を定義します。

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

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

Copy to Clipboard

Toggle word wrap

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

public class SkinBean {

	private String skin;

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

public class SkinBean {

	private String skin;

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

Copy to Clipboard

Toggle word wrap

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

<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>
		<value>classic</value>
  	</managed-property>
</managed-bean>

<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>
		<value>classic</value>
  	</managed-property>
</managed-bean>

Copy to Clipboard

Toggle word wrap

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

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

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

Copy to Clipboard

Toggle word wrap

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

図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
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.2. 拡張レベル
リンクのコピー

Expand

表4.23 input、 select、 textarea、 button、 keygen、 isindex の HTML エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
border-width	1px
border-color	panelBorderColor
color	controlTextColor

Expand

表4.24 *|button の HTML エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
border-color	panelBorderColor
font-size	generalSizeFont
font-family	generalFamilyFont
color	headerTextColor
background-color	headerBackgroundColor
background-image	org.richfaces.renderkit.html.images.ButtonBackgroundImage

Expand

表4.25 button[type=button]、 button[type=reset]、 button[type=submit]、 input[type=reset]、 input[type=submit]、 input[type=button] の HTML エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
border-color	panelBorderColor
font-size	generalSizeFont
font-family	generalFamilyFont
color	headerTextColor
background-color	headerBackgroundColor
background-image	org.richfaces.renderkit.html.images.ButtonBackgroundImage

Expand

表4.26 *|button[disabled]、 .rich-container *|button[disabled]、 .rich-button-disabled の HTML エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
color	tabDisabledTextColor
border-color	tableFooterBackgroundColor
background-color	tableFooterBackgroundColor
background-image	org.richfaces.renderkit.html.images.ButtonDisabledBackgroundImage

Expand

表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-container input[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 エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
color	tabDisabledTextColor
background-color	tableFooterBackgroundColor
border-color	tableFooterBackgroundColor
background-image	org.richfaces.renderkit.html.images.ButtonDisabledBackgroundImage

Expand

表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 エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
color	tabDisabledTextColor
border-color	tableFooterBackgroundColor
background-color	tableFooterBackgroundColor

Expand

表4.29 *|textarea のエレメントスキンバインディング
CSS プロパティ	スキンパラメータ
border-color	panelBorderColor
font-size	generalSizeFont
font-family	generalFamilyFont
color	controlTextColor
background-color	controlBackgroundColor
background-image	org.richfaces.renderkit.html.images.InputBackgroundImage

Expand

表4.30 textarea[type=textarea]、 input[type=text]、 input[type=password]、 select の HTML エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
border-color	panelBorderColor
font-size	generalSizeFont
font-family	generalFamilyFont
color	controlTextColor
background-color	controlBackgroundColor
background-image	org.richfaces.renderkit.html.images.InputBackgroundImage

Expand

表4.31 *|textarea[disabled]、 .rich-container *|textarea[disabled] の HTML エレメントスキンバインディング
CSS プロパティ	スキンパラメータ
color	tableBorderColor

Expand

表4.32 textarea[type="textarea"][disabled]、input[type="text"][disabled]、input[type="password"][disabled]
CSS プロパティ	スキンパラメータ
color	tableBorderColor

Expand

表4.33 textarea[type="textarea"][disabled]、input[type="text"][disabled]、input[type="password"][disabled]
CSS プロパティ	スキンパラメータ
color	tableBorderColor

注記

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

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

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

Copy to Clipboard

Toggle word wrap

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

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

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

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

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

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

Copy to Clipboard

Toggle word wrap

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

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

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

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

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

Copy to Clipboard

Toggle word wrap

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

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

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

<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' />

<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' />

Copy to Clipboard

Toggle word wrap

注記

これにより、 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 タグを使用し、次の例のとおりマッピング構造を定義します。

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

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

Copy to Clipboard

Toggle word wrap

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

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

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

Copy to Clipboard

Toggle word wrap

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

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

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

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

Copy to Clipboard

Toggle word wrap

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.5. ステートマネージャ API　
リンクのコピー

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

図4.7 ログインダイアログ

図4.8 登録ダイアログ

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

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

図4.9 RichFaces ステート API

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

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

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

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

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

Copy to Clipboard

Toggle word wrap

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

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

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

Copy to Clipboard

Toggle word wrap

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

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

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

Copy to Clipboard

Toggle word wrap

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

...
public class Config {

	/**
	 * @return States
	 */
	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);

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

...
public class Config {

	/**
	 * @return States
	 */
	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);

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

Copy to Clipboard

Toggle word wrap

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

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

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

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

Copy to Clipboard

Toggle word wrap

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

4.6. ユーザーロールの特定
リンクのコピー

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

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

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

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

Copy to Clipboard

Toggle word wrap

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

付録A 改訂履歴
リンクのコピー

改訂履歴

改訂 5.1.2-2.400

2013-10-31

Rüdiger Landmann

Rebuild with publican 4.0.0

改訂 5.1.2-2

2012-07-18

Anthony Towns

Rebuild for Publican 3.0

改訂 5.1.2-100

Thu 8 December 2011

Russell Dickenson

JBoss Enterprise Application Platform 5.1.2 GA 向けに改訂

法律上の通知
リンクのコピー

This document is licensed by Red Hat under the Creative Commons Attribution-ShareAlike 3.0 Unported License. If you distribute this document, or a modified version of it, you must provide attribution to Red Hat, Inc. and provide a link to the original. If the document is modified, all Red Hat trademarks 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 Infinity logo, and RHCE are trademarks of Red Hat, Inc., registered in the United States and other countries.

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 States and/or other countries.

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

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

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

All other trademarks are the property of their respective owners.

RichFaces 開発者ガイド

JBoss Enterprise Application Platform 5 向け

Red Hat Documentation Group

第1章 はじめにリンクのコピーリンクがクリップボードにコピーされました!

第2章 RichFaces の利用リンクのコピーリンクがクリップボードにコピーされました!

2.1. RichFaces を持つ単純な JSF リンクのコピーリンクがクリップボードにコピーされました!

2.1.1. RichFaces ライブラリをプロジェクトに追加するリンクのコピーリンクがクリップボードにコピーされました!

2.1.2. web.xml に RichFaces を登録するリンクのコピーリンクがクリップボードにコピーされました!

2.1.3. 管理 Beanリンクのコピーリンクがクリップボードにコピーされました!

2.1.4. Bean を faces-cofig.xml に登録リンクのコピーリンクがクリップボードにコピーされました!

2.1.5. RichFaces Greeter の index.jspリンクのコピーリンクがクリップボードにコピーされました!

2.2. 関連するリソースのリンクリンクのコピーリンクがクリップボードにコピーされました!

第3章 異なる環境の設定リンクのコピーリンクがクリップボードにコピーされました!

3.1. Web アプリケーション記述子パラメータリンクのコピーリンクがクリップボードにコピーされました!

3.2. Sun JSF RIリンクのコピーリンクがクリップボードにコピーされました!

3.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 のビルトイン Skinnabilityリンクのコピーリンクがクリップボードにコピーされました!

4.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. ステートマネージャ API リンクのコピーリンクがクリップボードにコピーされました!

4.6. ユーザーロールの特定リンクのコピーリンクがクリップボードにコピーされました!

付録A 改訂履歴リンクのコピーリンクがクリップボードにコピーされました!

法律上の通知リンクのコピーリンクがクリップボードにコピーされました!

詳細情報

試用、購入および販売

コミュニティー

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

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

会社概要

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

第1章はじめに
リンクのコピー

第2章 RichFaces の利用
リンクのコピー

2.1. RichFaces を持つ単純な JSF
リンクのコピー

2.1.1. RichFaces ライブラリをプロジェクトに追加する
リンクのコピー

2.1.2. web.xml に RichFaces を登録する
リンクのコピー

2.1.3. 管理 Bean
リンクのコピー

2.1.4. Bean を faces-cofig.xml に登録
リンクのコピー

2.1.5. RichFaces Greeter の index.jsp
リンクのコピー

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

第3章異なる環境の設定
リンクのコピー

3.1. Web アプリケーション記述子パラメータ
リンクのコピー

3.2. Sun JSF RI
リンクのコピー

3.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 のビルトイン Skinnability
リンクのコピー

4.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. ステートマネージャ API　
リンクのコピー

4.6. ユーザーロールの特定
リンクのコピー

付録A 改訂履歴
リンクのコピー

法律上の通知
リンクのコピー