RichFaces 開発者ガイド

Transcription

1 JBoss Enterprise Application Platform 5 RichFaces 開発者ガイド JBoss Enterprise Application Platform 5 向けエディッション Last Updated:

2

3 JBoss Enterprise Application Platform 5 RichFaces 開発者ガイド JBoss Enterprise Application Platform 5 向けエディッション Red Hat Documentation Group

4 法律上の通知 Copyright 2011 Red Hat, Inc. 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. 概要 本ガイドは JBoss Enterprise Platforms で RichFaces を使用する開発者向けです

5 目次 目次 第.. 1. 章... はじめに 第.. 2. 章... RICHFACES の利用 RICHFACES を持つ単純な JSF RichFaces ライブラリをプロジェクトに追加する web.xml に RichFaces を登録する 管理 Bean Bean を faces-cofig.xml に登録 RichFaces Greeter の index.jsp 2.2. 関連するリソースのリンク 第.. 3. 章... 異なる環境の設定 WEB アプリケーション記述子パラメータ 3.2. SUN JSF RI 3.3. FACELETS サポート 3.4. JBOSS SEAM サポート 第.. 4. 章... RICHFACES フレームワークの基本概念 はじめに 4.2. RICHFACES アーキテクチャの概要 4.3. 要求エラーとセッションの期限切れへの対処 要求エラーへの対処 セッションの期限切れへの対処 4.4. SKINNABILITY ( スキンの有効性 ) Skinnability を使用する理由 Skinnability の使用 例 RichFaces のテーブル 独自のスキンファイルの作成および使用 RichFaces のビルトイン Skinnability ランタイム時のスキン変更 標準コントロールスキニング (Standard Controls Skinning) 標準レベル 拡張レベル 拡張スキニングサポートのクライアント側スクリプト XCSS ファイル形式 Plug-n-Skin ( プラグアンドスキン ) 使用詳細 4.5. ステートマネージャ API 4.6. ユーザーロールの特定 付録.... A.. 改訂履歴

6 RichFaces 開発者ガイド 2

7 第 1 章はじめに 第 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 に導入される予定です テストフレームワークはコンポーネントを 3

8 RichFaces 開発者ガイド テストするだけでなく Servlet コンテナにテストアプリケーションをデプロイせずに JavaScript コードなどサーバー側またはクライアント側の他の機能をテストします RichFaces UI コンポーネントはそのまま即座に実装できます そのため 開発時間を短縮でき 即座に RichFaces Web アプリケーションの開発機能を使用できるため 簡単かつ迅速に RichFaces を体験できます 4

9 第 2 章 RICHFACES の利用 第 2 章 RICHFACES の利用 本章では RichFaces のコンポーネントを JSF アプリケーションへプラグする方法を説明します 手順は 必要なライブラリのダウンロードからブラウザでのアプリケーション実行まで 単純な RichFaces を持つ JSF の作成プロセスを基にしています これらの手順は使用する統合開発環境には依存しません 2.1. RICHFACES を持つ単純な JSF シンプルなアプリケーションである RichFaces Greeter は 一般的な hello world アプリケーションと似ています ただし 1 つの例外は RichFaces では最初にユーザーに Hello! と挨拶することです Greeter という名前の標準的な JSF 1.2 プロジェクトを作成します 必要なライブラリがすべて含まれるようにし 後述の手順に従ってください RichFaces ライブラリをプロジェクトに追加する RichFaces バイナリファイルを展開した RichFaces フォルダより lib を開きます このフォルダには API UI 実装ライブラリを持つ 3 つの *.jar ファイルが格納されています これらの JAR を lib から Greeter JSF アプリケーションの WEB-INF/lib ディレクトリへコピーします 重要 RichFaces を持つ JSF アプリケーションは プロジェクトに次の JAR があることを想定します commons-beanutils jar commons-collections-3.2.jar commons-digester-1.8.jar commons-logging jar jhighlight-1.0.jar 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> 5

10 RichFaces 開発者ガイド <!-- 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> RichFaces スキンの詳細は Skinnability ( スキンの有効性 ) を参照してください web.xml は次のようになるはずです <?xml version="1.0"?> <web-app version="2.5" xmlns=" xmlns:xsi=" xsi:schemalocation=" <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

11 第 2 章 RICHFACES の利用 </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> 管理 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; } } Bean を faces-cofig.xml に登録 user Bean を登録するには 以下を faces-config.xml ファイルに追加します <?xml version="1.0" encoding="utf-8"?> <faces-config version="1.2" xmlns=" xmlns:xi=" xmlns:xsi=" xsi:schemalocation=" <managed-bean> 7

12 RichFaces 開発者ガイド <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> 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=" prefix="f" %> <%@ taglib uri=" prefix="h" %> <!-- RichFaces tag library declaration --> <%@ taglib uri=" prefix="a4j"%> <%@ taglib uri=" 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> rerender="greeting" /> <a4j:commandbutton value="get 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

13 第 2 章 RICHFACES の利用 アプリケーションは 3 つの RichFaces コンポーネントを使用します <rich:panel> は情報の仮想コンテナとして使用されます ビルトインの AJAX サポートがある <a4j:commandbutton> は 応答が返った後に動的に挨拶を表示させます <a4j:form> はボタンがアクションを実行できるようにします 注記 RichFaces タグライブラリを各 JSP ページに宣言する必要があります XHTML ページについては 次の行を追加してタグライブラリを宣言します <xmlns:a4j=" <xmlns:rich=" ここで ブラウザで index.jsp ページである を示し サーバー上でアプリケーションを実行します 図 2.1 RichFaces Greeter のアプリケーション 2.2. 関連するリソースのリンク JBoss Developer Studio には RichFaces コンポーネントフレームワークとの綿密な統合に関する記述があります 9

14 RichFaces 開発者ガイド 第 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

15 第 3 章異なる環境の設定 名前 デフォルト 内容 org.ajax4jsf.view_handlers なし ビューハンドラチェーンに挿入するための ViewHandler インスタンスのコンマ区切りリストです これらのハンドラは リストされた順に RichFaces のビューハンドラの前に挿入されます Facelets アプリケーションでは faces-config.xml ファイルではなく このリストに com.sun.facelets.facele tviewhandler を宣言します org.ajax4jsf.control_compo NENTS なし メッセージバンドルローダやエイリアス Bean コンポーネントなど特別な制御ケースコンポーネントのコンマ区切りリストです これらのハンドラは静的フィールド COMPONENT_TYPE からの反射より提供されます これらコンポーネントのエンコーディングメソッドは コンポーネントが更新されていなくても AJAX 応答のレンダリング中に常に呼び出されます org.ajax4jsf.encrypt_resour CE_DATA false 生成されたリソース ( 暗号生成データなど ) ではリソース URL でエンコードされます 例えば mediaoutput コンポーネントによって生成されたイメージの URL には生成メソッド名が含まれます 悪意のあるコードはこれを利用して JSF Bean や属性の要求を作成できるため 重大なアプリケーションではこのパラメータを true に設定する必要があります ( この修正は Java Runtime Environment 1.4 で動作します ) org.ajax4jsf.encrypt_passwo RD random リソースデータの暗号化に使用されるパスワードです 設定されていないと 無作為のパスワードが使用されます org.ajax4jsf.compress_scrip T true 定義されると フレームワークが JavaScript ファイルを再フォーマットできなくなります そのため デバッグ機能が使用できなくなります 11

16 RichFaces 開発者ガイド 名前 デフォルト 内容 org.ajax4jsf.resource_uri_p REFIX a4j 生成されたリソースすべての URL に追加するプレフィックスを定義します RichFaces によって生成されたリソース要求を処理することが目的です org.ajax4jsf.global_resourc E_URI_PREFIX a4j/g すべてのグローバルリソースの URI に追加されるプレフィックスを定義します RichFaces によって生成されたリソース要求を処理するためのプレフィックスです org.ajax4jsf.session_resour CE_URI_PREFIX a4j/s 生成されたリソースのセッションを追跡するために使用するプレフィックスを定義します RichFaces によって生成されたリソース要求を処理するためのプレフィックスです org.ajax4jsf.default_expire リソースがブラウザへストリームバックされた時にリソースがキャッシュされる期間 ( 秒単位 ) を定義します org.ajax4jsf.serialize_server _STATE false true に設定されると コンポーネントのステート ( ツリーではない ) がセッションに保存される前にシリアライズされます モデル変更に影響を受けるビューステートを持つアプリケーションで有用です この代わりに各環境で com.sun.faces.serialize ServerState パラメータと org.apache.myfaces.seri ALIZE_STATE_IN_SESSION パラメータを使用することもできます 注記 org.richfaces.skin は org.ajax4jsf.skin と同様に使用されます 表 3.2 org.ajax4jsf.filter 初期化パラメータ 名前 デフォルト 内容 12

17 第 3 章異なる環境の設定 名前 デフォルト 内容 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> これは 正式には Facelets が最初に使用され 小さい重要なタスクを実行するため AjaxViewHandler が若干先に使用されることを宣言します 13

18 RichFaces 開発者ガイド 注記 この場合 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=" xmlns:xsi=" xsi:schemalocation=" 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</listenerclass> </listener> <servlet> <servlet-name>seam Resource Servlet</servlet-name> <servlet-class>org.jboss.seam.servlet.resourceservlet</servletclass> </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

19 第 3 章異なる環境の設定 <filter-mapping> <filter-name>seam Filter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- MyFaces --> <listener> <listenerclass>org.apache.myfaces.webapp.startupservletcontextlistener</listenerclass> </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> Seam 2.x は RichFaces Filter をサポートするため web.xml は次のようにならなければなりません <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns=" xmlns:xsi=" xsi:schemalocation=" <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- 15

20 RichFaces 開発者ガイド class> </listener> <servlet> <servlet-name>seam Resource Servlet</servlet-name> <servletclass>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> 16

21 第 4 章 RICHFACES フレームワークの基本概念 第 4 章 RICHFACES フレームワークの基本概念 4.1. はじめに RichFaces フレームワークは 既存ページへ AJAX 機能を追加するコンポーネントライブラリとして実装されます そのため JavaScript コードを書いたり 既存コンポーネントを新しい AJAX ウィジットに置き換える必要がありません RichFaces は従来のコンポーネント全体のサポートではなく ページ全体の AJAX サポートを有効にするため クライアント上の AJAX イベントによって変更された内容を反映するページの領域を定義することができます 下図は全体のプロセスを表しています 図 4.1 要求処理フロー RichFaces では AJAX 要求の結果でアップデートしたい JSF ページのセクションを JSF タグを使用して定義できます また サーバーへ AJAX 要求を送信するためのオプションを複数提供します すべてが自動的に行われるため JavaScript や XMLHTTPRequest オブジェクトを手作業で書く必要はありません 4.2. RICHFACES アーキテクチャの概要 下図には RichFaces フレームワークの重要なエレメントの一部が記載されています 17

22 RichFaces 開発者ガイド 図 4.2 コアの AJAX コンポーネント構造 AJAX フィルタ RichFaces を最大限に利用するには アプリケーションの web.xml に Filter を登録することをお勧めします Filter は複数の要求タイプを認識します 図 5.3 のシーケンス図は 通常の JSF 要求と AJAX 要求の処理における違いを示しています 18

23 第 4 章 RICHFACES フレームワークの基本概念 図 4.3 要求処理シーケンス図 どちらの場合でも アプリケーションが要求する必要な静的または動的リソースの情報は ResourceBuilder クラスに登録されます リソース要求が発行されると RichFaces フィルタがこのリソースの Resource Cache をチェックします Resource Cache が存在する場合はリソースがクライアントへ返されますが 存在しないとフィルタは ResourceBuilder に登録されているリソースを検索します リソースが登録されている場合 RichFaces フィルタは ResourceBuilder がリソースを作成 ( 送信 ) するよう要求します 次の図はリソース要求のプロセスを表しています 19

24 RichFaces 開発者ガイド 図 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> 要求エラーへの対処 20

25 第 4 章 RICHFACES フレームワークの基本概念 AJAX 要求中にエラーが発生した時にクライアント上で独自のコードを実行するには 次のように標準の A4J.AJAX.onError メソッドを再定義する必要があります A4J.AJAX.onError = function(req, status, message){ window.alert("custom onerror handler "+message); } この関数は次のパラメータを許可します req エラーを呼び出す要求のパラメータ文字列 status サーバーが返したエラーの数 message エラーのデフォルトメッセージ よって タイムアウトや内部サーバーエラーなどが発生した時に呼び出される独自のハンドラを作成することができます セッションの期限切れへの対処 SessionExpiration イベントで呼び出される onexpired フレームワークメソッドを再定義することもできます 例 A4J.AJAX.onExpired = function(loc, expiredmsg){ if(window.confirm("custom onexpired handler "+expiredmsg+" for a location: "+loc)){ return loc; } else { return false; } } この関数は次のパラメータを取ることができます loc 現ページの URL ( 必要に応じてアップデート可能 ) expiredmsg SessionExpiration の際に表示されるデフォルトメッセージ 21

26 RichFaces 開発者ガイド 注記 カスタマイズされた onexpire ハンドラは MyFaces では動作しません MyFaces は内部的にデバッグページを生成して例外を処理します このような動作を回避するには次を使用します <context-param> <param-name>org.apache.myfaces.error_handling</param-name> <param-value>false</param-value> </context-param> 4.4. SKINNABILITY ( スキンの有効性 ) Skinnability を使用する理由 企業向けアプリケーションの CSS ( カスケーディングスタイルシート ) ファイルを見ると 同じ色が頻繁に記載されていることに気がつくでしょう 標準的な CSS は特定の色をパネルヘッダの色やアクティブなポップアップメニュー項目の背景色 分離文字の色などとして抽象的に定義することができません 一般的なインターフェーススタイルを定義するには 同じ値を複数回コピーしなければならないため インターフェースの数が多いほど 繰り返しが多く必要となります そのため アプリケーションのパレットを変更したい場合は 相互関連する値を変更する必要があります そうしないと ご使用のインターフェースは不体裁になることがあります カスタマがインターフェースのルックアンドフィールをリアルタイムで調節したい場合は 複数の CSS ファイルを変更することができ それぞれ同じ値が複数回含まれることになります RichFaces にビルトインされ完全実装されているスキンを使用すると このような問題を解決することができます 命名された各スキンには ユーザーインターフェースのパレットやその他の属性を定義するがあります の一部を変更するだけで インターフェースを常に干渉せずに多数のコンポーネントの外見を同時に変更することができます skinnability 機能は標準的な CSS を完全に置き換えるものではなく CSS を不要にするものではありません skinnability は正規 CSS 宣言と共に使用できる標準的な CSS の高レベル拡張です JSF 表現言語より CSS のを参照することもできます これにより ページにある全エレメントの外見を完全に同期化することができます Skinnability の使用 RichFaces skinnability は 下記との併用を目的としています RichFaces フレームワークに定義された コンポーネントの事前定義された CSS クラス ユーザースタイルクラス コンポーネントの配色は 3 つのスタイルクラスのうちどれを使用してもそのエレメントに適用することができます フレームワークに挿入されたデフォルトのスタイルクラス 22

27 第 4 章 RICHFACES フレームワークの基本概念 このスタイルクラスにはスキンからの定数へリンクされたスタイルパラメータが含まれています 各コンポーネントに対して定義され 表現のデフォルトレベルを指定します の値を変更してアプリケーションインターフェースを変更することができます スキン拡張のスタイルクラス このクラス名は各コンポーネントエレメントに対して定義され CSS ファイルの同じ名前でクラスを定義できるようフレームワークに挿入されます これにより このクラスを使用するすべてのコンポーネントの外見を簡単に拡張できます ユーザースタイルクラス styleclass パラメータの 1 つを使用してコンポーネントエレメントの独自のクラスを定義することができます そのため クラスに指定された CSS スタイルパラメータに従って特定のコンポーネントの外見が変更されます 例 簡単なパネルコンポーネントの例は次の通りです <rich:panel> </rich:panel> このコードはページでパネルコンポーネントを生成します 2 つのエレメントで構成されています ラッパー <div> エレメントと特定のスタイルのプロパティを持つパネルボディの <div> エレメントです ラッパー <div> エレメントは以下のようになります <div class="dr-pnl rich-panel"> </div> dr-pnl はよりフレームワークで指定される CSS クラスです background-color は generalbackgroundcolor で定義されます border-color は panelbordercolor で定義されます 全ページの全パネルの全色を変更するには それらの値を変更します ただし ページで <rich:panel> クラスを特定すると そのパラメータはこのページ上のすべてのパネルから取得されます 開発者はパネルのスタイルプロパティを変更することも可能です 例は次の通りです <rich:panel styleclass="customclass" /> 前述の定義は customclass からスタイルプロパティの一部を特定のパネルへ追加できます この結果 3 つのスタイルを取得します <div class="dr_pnl rich-panel customclass"> </div> RichFaces のテーブル 23

28 RichFaces 開発者ガイド RichFaces は最も単純なレベルの一般的なカスタマイズで 8 つの事前定義された ( スキン ) を備えています DEFAULT plain emeraldtown bluesky wine japancherry ruby classic deepmarine スキンを適用するには org.richfaces.skin コンテキストパラメータにスキン名を指定する必要があります 下表は bluesky スキンの各パラメータの値を表しています 表 4.1 色 パラメータ名 デフォルト値 headerbackgroundcolor #BED6F8 headergradientcolor #F2F7FF headtextcolor # headerweightfont bold generalbackgroundcolor #FFFFFF generaltextcolor # generalsizefont 11px generalfamilyfont Arial Verdana sans-serif controltextcolor # controlbackgroundcolor #FFFFFF additionalbackgroundcolor #ECF4FE 24

29 第 4 章 RICHFACES フレームワークの基本概念 パラメータ名 デフォルト値 shadowbackgroundcolor # 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

30 RichFaces 開発者ガイド パラメータ名 デフォルト値 tablefooterbackgroundcolor #cccccc tablesubfooterbackgroundcolor #f1f1f1 tablebordercolor #C0C0C0 バージョン に plain スキンが追加されました このスキンにはパラメータがなく 独自のスタイルで RichFaces コンポーネントを既存のプロジェクトへ組み込む時に重要となります 独自のスキンファイルの作成および使用 次のように独自のスキンファイルを作成します ファイルを作成します そこで スタイルクラスで使用されるスキン定数を定義します ( 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> /META-INF/skins または /WEB-INF/classes ディレクトリのどちらかに <name>.skin.properties ファイルを配置します RichFaces のビルトイン Skinnability RichFaces では スキンをユーザーインターフェース (UI) のデザインに組み入れることができます このフレームワークではプロパティファイルの名前付きのを使用してコンポーネントのセット全体でスキンの外見を常に制御することができます 事前定義されたスキンの例は で参照できます スキンにより RichFaces によってビルドされる標準的な JSF コンポーネントとカスタム JSF コンポーネントをレンダリングするスタイルを定義できます スキンを試してみるには 次の手順に従います 次のようにカスタムのレンダリングキットを作成し faces-config.xml に登録します <render-kit> <render-kit-id>new_skin</render-kit-id> <render-kitclass>org.ajax4jsf.framework.renderer.chameleonrenderkitimpl</render -kit-class> </render-kit> 26

31 第 4 章 RICHFACES フレームワークの基本概念 次に ルックアンドフィールの事前定義された変数を基にしてコンポーネントのカスタムレンダラを作成し登録します <renderer> <component-family>javax.faces.command</component-family> <renderer-type>javax.faces.link</renderer-type> <renderer-class>newskin.htmlcommandlinkrenderer</renderer-class> </renderer> 最後に を持つプロパティファイルをクラスパスのルートに配置します プロパティファイルは次の 2 つの要件を満たしていなければなりません ファイル名は skinname.skin.properties でなければなりません この場合は newskin.skin.properties と呼びます このファイルの最初の行は render.kit=render-kit-id でなければなりません ここでは render.kit=new_skin を使用します カスタムレンダラ作成の詳細は を参照してください ランタイム時のスキン変更 ランタイム時にスキンを変更するには web.xml に次の EL 表現を定義します <context-param> <param-name>org.richfaces.skin</param-name> <param-value>#{skinbean.skin}</param-value> </context-param> skinbean コードは次のようになります public class SkinBean { private String skin; public String getskin() { return skin; } public void setskin(string skin) { this.skin = skin; } } 設定ファイルの 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> 27

32 RichFaces 開発者ガイド <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; fontfamily: 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; fontsize: 12;"> This is a result of the modification "bluesky" skin </rich:panelbaritem> </rich:panelbar> </div> </h:form> 上記のコードは次のオプションリストを生成します 28

33 第 4 章 RICHFACES フレームワークの基本概念 図 4.5 ランタイム時のスキン変更 標準コントロールスキニング (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

34 RichFaces 開発者ガイド 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 } 基本的なエレメント名またはタイプのうち 1 つと対応するクラス名を持つエレメントは以下の例のとおり rich-<elementname>[-<elementtype>] スキームでマップされます.rich-select { //class content }.rich-input-text { //class content } 30

35 第 4 章 RICHFACES フレームワークの基本概念 注記 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> 標準的なコンポーネントスキニングに関する詳細を知りたい場合は RichFaces SVN レポジトリの ui/core/src/main/resources/org/richfaces/ ディレクトリにある CSS ファイルを確認してみてください 標準レベル 表 4.3 input select textarea button keygen isindex legend の HTML エレメントスキンバインディング font-size generalsizefont font-family generalfamilyfont color controltextcolor 31

36 RichFaces 開発者ガイド 表 4.4 fieldset の HTML エレメントスキンバインディング border-color panelbordercolor 表 4.5 hr の HTML エレメントスキンバインディング border-color panelbordercolor 表 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 のリッチエレメントスキンバインディング font-size generalsizefont font-family generalfamilyfont color controltextcolor 表 4.10.rich-fieldset のリッチエレメントスキンバインディング 32

37 第 4 章 RICHFACES フレームワークの基本概念 border-color panelbordercolor 表 4.11.rich-hr のリッチエレメントスキンバインディング border-color panelbordercolor 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 のリッチエレメントスキンバインディング / 値 border-width 1px border-style inset border-color panelbordercolor background-color controlbackgroundcolor background-repeat no-repeat 33

38 RichFaces 開発者ガイド / 値 background-position 1px 1px 表 4.16.rich-field-edit のリッチエレメントスキンバインディング border-width 1px border-style inset border-color panelbordercolor background-color editbackgroundcolor 表 4.17.rich-field-error のリッチエレメントスキンバインディング border-width 1px border-style inset border-color panelbordercolor 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 border-color panelbordercolor background-color trimcolor 34

39 第 4 章 RICHFACES フレームワークの基本概念 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-color panelbordercolor border-width 1px border-style solid padding 10px padding 10px 表 4.21.rich-legend のリッチエレメントスキンバインディング font-size generalsizefont font-family generalfamilyfont color controltextcolor font-weight bold 表 4.22.rich-form のリッチエレメントスキンバインディング 35

40 RichFaces 開発者ガイド padding 0px margin 0px 拡張レベル 表 4.23 input select textarea button keygen isindex の HTML エレメントスキンバインディング border-width 1px border-color panelbordercolor color controltextcolor 表 4.24 * button の HTML エレメントスキンバインディング border-color panelbordercolor font-size generalsizefont font-family generalfamilyfont color headertextcolor background-color headerbackgroundcolor background-image org.richfaces.renderkit.html.images.buttonbackgroun dimage 表 4.25 button[type=button] button[type=reset] button[type=submit] input[type=reset] input[type=submit] input[type=button] の HTML エレメントスキンバインディング border-color panelbordercolor font-size generalsizefont font-family generalfamilyfont 36

41 第 4 章 RICHFACES フレームワークの基本概念 color headertextcolor background-color headerbackgroundcolor background-image org.richfaces.renderkit.html.images.buttonbackgroun dimage 表 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.buttondisabledb ackgroundimage 表 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 エレメントスキンバインディング color tabdisabledtextcolor background-color tablefooterbackgroundcolor border-color tablefooterbackgroundcolor background-image org.richfaces.renderkit.html.images.buttondisabledb ackgroundimage 表 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

42 RichFaces 開発者ガイド color tabdisabledtextcolor border-color tablefooterbackgroundcolor background-color tablefooterbackgroundcolor 表 4.29 * textarea のエレメントスキンバインディング border-color panelbordercolor font-size generalsizefont font-family generalfamilyfont color controltextcolor background-color controlbackgroundcolor background-image org.richfaces.renderkit.html.images.inputbackgroundi mage 表 4.30 textarea[type=textarea] input[type=text] input[type=password] select の HTML エレメントスキンバインディング border-color panelbordercolor font-size generalsizefont font-family generalfamilyfont color controltextcolor background-color controlbackgroundcolor background-image org.richfaces.renderkit.html.images.inputbackgroundi mage 表 4.31 * textarea[disabled].rich-container * textarea[disabled] の HTML エレメントスキンバインディング 38

43 第 4 章 RICHFACES フレームワークの基本概念 color tablebordercolor 表 4.32 textarea[type="textarea"][disabled] input[type="text"][disabled] input[type="password"][disabled] color tablebordercolor 表 4.33 textarea[type="textarea"][disabled] input[type="text"][disabled] input[type="password"][disabled] 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> 拡張スキニングサポートのクライアント側スクリプト 標準の HTML コントロールの拡張スキニングは自動的に適用されます ブラウザタイプが検知され ブラウザが拡張スキニングを完全サポートしない場合は基本スキニングが適用されます RichFaces コンポーネントや標準の HTML コントロールを手作業でスキンしたい場合 ブラウザによっては (Opera や Safari など ) 標準の HTML コントロールに問題があるため 問題が発生することがあります Skinnability を無効にするには 次のように web.xml ファイルの org.richfaces.loadstylestrategy パラメータを NONE に設定します 39

44 RichFaces 開発者ガイド <context-param> <param-name>org.richfaces.loadstylestrategy</param-name> <param-value>none</param-value> </context-param> また RichFaces コンポーネントや標準の HTML コントロールにスキンを適用するスタイルシートが含まれるようにしてください Opera と Safari における拡張スキニングの問題を回避するには RichFaces ライブラリに skinning.js クライアントスクリプトを追加します このスクリプトはブラウザタイプを検出し 完全サポートするブラウザのみ拡張スキニングを有効にします ページに次の JavaScript を挿入し スクリプトをアクティベートします <script type="text/javascript"> window.rich_faces_extended_skinning_on = true; </script> スクリプトの読み込みストラテジが使用されずに拡張スキニングが有効だと コンソールに警告メッセージが表示されます また 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/eAF7sqpgbjyGdIAFrMEaw.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' /> 注記 これにより Base64 エンコーダが. ではなく! を使用するようになるため a4j_versionxxx ではなく a4j/versionxxx をリソースプレフィックスとして使用するようにしてください XCSS ファイル形式 XCSS ( クロスサイトカスケーディングスタイルシート ) ファイルは RichFaces コンポーネント Skinnability のコアです XCSS は スキニングプロセスを拡張する XML 形式の CSS です RichFaces は 特定コンポーネントのルックアンドフィールパラメータをすべて格納する XCSS ファイルを解析し ウェブブラウザが認識できる標準の CSS ファイルへ情報をコンパイルします XCSS ファイルには とのマッピングが含まれています CSS セレクタをにマップするには < u:selector > と < u:style> XML タグを使用し 次の例のとおりマッピング構造を定義します 40

45 第 4 章 RICHFACES フレームワークの基本概念 <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> プロセス中 このコードが解析され 次のように標準の 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; } <u:selector> の name 属性は CSS セレクタを定義します 一方で <u:style> タグの name 属性は にマップされたスキン定数を定義します <u:style> タグの value 属性を使用して に値を割り当てることもできます 同一のスキンプロパティを持つ CSS セレクタをコンマ区切りリストに含めるようにすることもできます <u:selector name=".rich-ordering-control-disabled,.rich-ordering-controltop,.rich-ordering-control-bottom,.rich-ordering-control-up,.richordering-control-down"> <u:style name="border-color" skin="tablebordercolor" /> </u:selector> 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 41

46 RichFaces 開発者ガイド -DarchetypeVersion=RF-VERSION -DartifactId=ARTIFACT-ID -DgroupId=GROUP-ID -Dversion=VERSION コマンドの主キーは次の通りです archetypeversion 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 コマンドの主キーは次の通りです 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\ イメージを格納するために使用する基本クラスです 42

47 第 4 章 RICHFACES フレームワークの基本概念 ファイル名 場所 内容 BaseImageTest.java \src\test\java\skin- PACKAGE\SKIN- NAME\images\ イメージを格納するクラスのテストバージョンです XCSS files \src\main\resources\ski N-PACKAGE\SKIN- NAME\css\ 新しいスキンに影響された RichFaces コンポーネントの新しい外見を定義します SKIN-NAME.properties \src\main\resources\ski N-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 ファイルです 43

48 RichFaces 開発者ガイド ファイル名 場所 内容 XCSS files \src\main\resources\ski N-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\resourc es. 前回にリストされた全ファイルの詳細が含まれています これで \src\main\resources\skin-package\skin-name\css\ にある XCSS ファイルの編集を開始できるようになりました 次のいずれかの方法で ( XCSS ファイルにリストされている ) セレクタに新しいスタイルプロパティを割り当てます 標準 CSS コーディングアプローチ (をセレクタに追加 ) です セレクタは <f:verbatim> </f:verbatim> タグ内にあるようにしてください 例は以下のとおりです.rich-calendar-cell { background: #537df8; } 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> これまでの手順を実行し XCSS ファイルを編集したら 新しいスキンをビルドし プロジェクトへプラグします スキンをビルドするにはスキンプロジェクトのルートディレクトリ (pom.xml ファイルを格納するディレクトリ ) より次のコマンドを実行します mvn clean install 44

49 第 4 章 RICHFACES フレームワークの基本概念 プラグアンドスキン機能には事前定義されたグラデーションが複数あります 次のコードを使用してグラデーションを適用することができます <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> background-image は <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> 使用詳細 本項ではプラグアンドスキン実装の実用面について取り上げます プラグアンドスキンのプロトタイプ作成プロセスを説明する項を読んでから本項を読むようにしてください 最初に 新しいスキンを作成する必要あります ( 前項の説明通り ) 以下は新しいスキンプロジェクトのテンプレートを作成します 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

50 RichFaces 開発者ガイド これで 作成したファイルやフォルダを確認するため P-n-S ディレクトリを閲覧できるようになりました 次に Maven を使用して次のように必要なファイルをすべてスキンプロジェクトに追加します mvn cdk:add-skin -DbaseSkin=blueSky -DcreateExt=true -Dname=PlugnSkinDemo -Dpackage=SKINPACKAGE 前項で説明した通り -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; } 変更が適用されたため 次に新しい 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> 46

51 第 4 章 RICHFACES フレームワークの基本概念 <param-value>plugnskindemo</param-value> </context-param> 標準コントロールスキニングが web.xml で有効になっていなければなりません 以下を追加して標準コントロールスキニングを有効にします <context-param> <param-name>org.richfaces.control_skinning</param-name> <param-value>enable</param-value> </context-param> 下図はスキンに行った各変更の結果を表しています 図 4.6 プラグアンドスキン機能の実行 4.5. ステートマネージャ API JFS にはビューからビューへのナビゲーションを定義できる上級のナビゲーションメカニズムがあります Web アプリケーションでは ユーザーがボタンやハイパーリンク その他のコマンドコンポーネントをクリックして他のページに変更するとナビゲーションが発生します 同じビューの同じ論理ステート間における切り替えメカニズムはありません 例えば ログイン / 登録ダイアログでは 既存ユーザーはユーザー名とパスワードを使ってログインしますが 新しいユーザーが登録しようとすると 別のフィールド (Confirm) が表示され ユーザーが To register リンクをクリックするとボタンラベルとメソッドが変更されます 47

52 RichFaces 開発者ガイド 図 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 の場合は標準のナビゲーション処理が呼び出されます 48

53 第 4 章 RICHFACES フレームワークの基本概念 次のように RichFaces ステート API を実装します faces-config.xml ファイルにステートナビゲーションハンドラと EL リゾルバを登録します <application> <navigationhandler>org.richfaces.ui.application.statenavigationhandler</navigat ion-handler> <el-resolver>org.richfaces.el.stateelresolver</el-resolver> </application> faces-config.xml に追加のアプリケーションファクトリを登録します <factory> <applicationfactory>org.richfaces.ui.application.stateapplicationfactory</applic ation-factory> </factory> faces-config.xml に 2 つの管理 Bean を登録します <managed-bean> <managed-bean-name>state</managed-bean-name> <managed-bean-class>org.richfaces.ui.model.states</managed-beanclass> <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</managedbean-class> <managed-bean-scope>none</managed-bean-scope> </managed-bean> 1 つの Bean (config) は次の例のように State を定義し保存します public class Config { /** States */ 49