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

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

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

法 律 上 の 通 知 Copyright 2011 Red Hat, Inc. T his 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, MetaMatrix, 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. T he 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 を 使 用 する 開 発 者 向 けです

目 次 目 次 はじめに............................................................................................ 3.......... 1. 本 書 の 表 記 規 則 3 1.1. 書 体 の 表 記 規 則 3 1.2. 引 用 文 の 表 記 規 則 4 1.3. 注 記 および 警 告 5 2. サポート およびフィードバックのお 願 い 5 2.1. サポートが 必 要 ですか? 5 2.2. フィードバックをお 願 いします 6 第... 1. 章... はじめに..................................................................................... 7.......... 第... 2. 章... RichFaces........... の.. 利.. 用...................................................................... 9.......... 2.1. RichFaces を 持 つ 単 純 な JSF 9 2.1.1. RichFaces ライブラリをプロジェクトに 追 加 する 9 2.1.2. web.xml に RichFaces を 登 録 する 9 2.1.3. 管 理 Bean 12 2.1.4. Bean を faces-cofig.xml に 登 録 12 2.1.5. RichFaces Greeter の index.jsp 12 2.2. 関 連 するリソースのリンク 14 第... 3. 章.. 異... なる.... 環.. 境.. の.. 設.. 定...................................................................... 15........... 3.1. Web アプリケーション 記 述 子 パラメータ 15 3.2. Sun JSF RI 18 3.3. Facelets サポート 19 3.4. JBoss Seam サポート 19 第... 4. 章... RichFaces........... フレームワークの................. 基.. 本.. 概.. 念................................................. 24............ 4.1. はじめに 24 4.2. RichFaces アーキテクチャの 概 要 24 4.3. 要 求 エラーとセッションの 期 限 切 れへの 対 処 27 4.3.1. 要 求 エラーへの 対 処 27 4.3.2. セッションの 期 限 切 れへの 対 処 28 4.4. Skinnability (スキンの 有 効 性 ) 29 4.4.1. Skinnability を 使 用 する 理 由 29 4.4.2. Skinnability の 使 用 29 4.4.3. 例 30 4.4.4. RichFaces のテーブル 30 4.4.5. 独 自 のスキンファイルの 作 成 および 使 用 32 4.4.6. RichFaces のビルトイン Skinnability 32 4.4.7. ランタイム 時 のスキン 変 更 33 4.4.8. 標 準 コントロールスキニング (Standard Controls Skinning) 35 4.4.8.1. 標 準 レベル 37 4.4.8.2. 拡 張 レベル 40 4.4.9. 拡 張 スキニングサポートのクライアント 側 スクリプト 43 4.4.10. XCSS ファイル 形 式 44 4.4.11. Plug-n-Skin (プラグアンドスキン) 45 4.4.11.1. 使 用 詳 細 49 4.5. ステートマネージャ API 51 4.6. ユーザーロールの 特 定 55 改... 訂.. 履.. 歴.................................................................................... 56........... 1

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

はじめに はじめに 1. 本 書 の 表 記 規 則 本 ガイドでは 一 部 の 単 語 や 語 句 を 強 調 して 特 定 の 情 報 に 対 する 読 者 の 注 意 を 促 すために 以 下 のよう な 表 記 規 則 を 採 用 しています 本 ガイドの PDF および 紙 書 籍 版 では Liberation フォントセットの 書 体 を 使 用 しています また Liberation フォントセットがご 使 用 のシステムにインストールされている 場 合 には HTML 版 もこの 書 体 で 表 示 されます インストールされていない 場 合 には 別 の 対 応 する 書 体 で 表 示 されます なお Red Hat Enterprise Linux 5 以 降 のバージョンでは Liberation フォントセットがデフォルトでインストールさ れる 点 に 注 意 してください 1.1. 書 体 の 表 記 規 則 本 ガイドでは 特 定 の 単 語 や 語 句 に 対 する 注 意 を 促 すために 4 つの 書 体 表 記 規 則 を 採 用 しています こ れらの 表 記 規 則 および 適 用 される 状 況 は 以 下 のとおりです 太 字 の 等 幅 フォント シェルコマンド ファイル 名 パスなど システムへの 入 力 を 強 調 するために 使 用 します また キー 名 やキーの 組 み 合 わせを 強 調 するのにも 使 用 します 以 下 が 例 となります 作 業 ディレクトリ 内 の my_next_bestselling_novel というファイルの 内 容 を 表 示 する には シェルプロンプトで cat my_next_bestselling_novel というコマンドを 入 力 し て Enter キーを 押 し そのコマンドを 実 行 します 上 記 の 例 には ファイル 名 シェルコマンド キー 名 が 含 まれており すべて 太 字 の 等 幅 フォントで 表 示 されていますが 文 脈 で 区 別 することができます キーの 組 み 合 わせは プラス 記 号 (+) で 各 キーがつながれているので 個 別 のキーと 区 別 することができ ます 以 下 が 例 となります Enter を 押 してコマンドを 実 行 します Ctrl+Alt+F2 を 押 して 仮 想 ターミナルに 切 り 替 えます 第 1 の 例 では 押 すべき 特 定 のキー 名 が 強 調 されています 第 2 の 例 では 3 つのキーを 同 時 に 押 す キーの 組 み 合 わせが 強 調 されています ソースコードを 記 載 する 場 合 その 段 落 で 言 及 されるクラス 名 メソッド 関 数 変 数 名 戻 り 値 は 上 記 のように 太 字 の 等 幅 フォント で 表 示 されます 以 下 が 例 となります ファイル 関 連 のクラスには filesystem (ファイルシステム) file (ファイル) dir (ディレクトリ) などがあります 各 クラスにそれぞれ 独 自 のパーミッションセットが 関 連 付 けられています 太 字 の 可 変 幅 フォント この 書 体 は アプリケーション 名 ダイアログボックスのテキスト ラベル 付 きボタン チェックボック ス/ラジオボタンのラベル メニュータイトル サブメニュータイトルなど システムで 表 示 される 単 語 や 語 句 であることを 示 します 以 下 が 例 となります メインメニューバーから システム 設 定 マウス の 順 で 選 択 し マウスの 設 定 を 起 動 します 全 般 タブで 左 利 き のラジオボタンを 選 択 して 閉 じる をクリックし マウスの 主 3

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド ボタンを 左 から 右 へ 切 り 替 えます ( 左 利 きのユーザーが 使 用 するのに 適 切 な 設 定 に 変 更 しま す) gedit ファイルに 特 殊 文 字 を 入 力 するには メインのメニューバーから アプリケーション アクセサリ 文 字 マップ の 順 に 選 択 します 次 に 文 字 マップ のメニューバーから 検 索 検 索 の 順 に 選 択 して 検 索 フィールドに 文 字 名 を 入 力 し 次 を 検 索 をクリックしま す 検 索 対 象 の 文 字 が 文 字 テーブル に 強 調 表 示 されます その 文 字 をダブルクリックして コピーする 文 字 列 のフィールドに 表 示 されたら コピー ボタンをクリックします この 後 に 編 集 中 のドキュメントに 戻 り gedit のメニューバーから 編 集 貼 り 付 け の 順 で 選 択 し ます 上 記 のテキストには アプリケーション 名 システム 全 体 のメニュー 名 と 項 目 アプリケーション 固 有 の メニュー 名 GUI インターフェースで 使 用 されているボタンおよびテキストが 含 まれており これらはす べて 太 字 の 可 変 幅 フォントで 表 示 されていますが 文 脈 で 区 別 することができます 太 字 斜 体 の 等 幅 フォント または 太 字 斜 体 の 可 変 幅 フォント 太 字 の 等 幅 フォントおよび 太 字 の 可 変 幅 フォントに 斜 体 を 使 用 した 場 合 には いずれも 置 き 換 え 可 能 な 可 変 テキストであることを 意 味 します 斜 体 は 記 載 されている 通 りには 入 力 しないテキスト あるいは 状 況 によって 変 化 するテキストを 示 します 以 下 が 例 となります ssh を 使 用 してリモートマシンに 接 続 するには シェルプロンプトで ssh username@domain.name と 入 力 します リモートマシンが example.com で そのマシン 上 のユーザー 名 が john である 場 合 には ssh john@example.com と 入 力 してください mount -o remount file-system のコマンドは 指 定 したファイルシステムを 再 マウン トします たとえば /home ファイルシステムを 再 マウントするコマンドは mount -o rem ount /hom e となります 現 在 インストール 済 みのパッケージのバージョンを 確 認 するには rpm -q package のコマ ンドを 使 用 します その 結 果 次 のような 出 力 が 返 されます: package-version-release ユーザー 名 ドメイン 名 ファイルシステム パッケージ バージョン およびリリースが 太 字 のイタ リック 体 で 表 示 されている 点 に 注 意 してください これらの 語 句 はプレースホルダーで コマンドを 発 行 する 際 に 入 力 するテキストまたはシステムによって 表 示 されるテキストのいずれかです 斜 体 は 著 作 物 のタイトルを 表 すという 標 準 的 な 用 途 の 他 に 重 要 な 用 語 の 初 出 時 にも 使 用 されます 以 下 が 例 となります Publican は DocBook の 出 版 システムです 1.2. 引 用 文 の 表 記 規 則 端 末 の 出 力 とソースコードは 周 囲 のテキストとは 視 覚 的 に 区 切 られて 表 示 されます 端 末 に 送 信 される 出 力 は ローマン 体 の 等 幅 フォント を 使 用 して 以 下 のように 表 示 されます books Desktop documentation drafts mss photos stuff svn books_tests Desktop1 downloads images notes scripts svgs ソースコードの 表 示 にも ローマン 体 の 等 幅 フォント が 使 用 されますが 以 下 のような 構 文 強 調 表 示 が 追 加 されます 4

はじめに package org.jboss.book.jca.ex1; import javax.naming.initialcontext; public class ExClient { public static void main(string args[]) throws Exception { InitialContext inictx = new InitialContext(); Object ref = inictx.lookup("echobean"); EchoHome home = (EchoHome) ref; Echo echo = home.create(); System.out.println("Created Echo"); } } System.out.println("Echo.echo('Hello') = " + echo.echo("hello")); 1.3. 注 記 および 警 告 本 ガイドでは 見 落 としがちな 情 報 に 注 意 を 促 すために 次 にあげる 3 つの 視 覚 的 スタイルを 使 用 してい ます 注 記 注 記 には 対 象 のタスクに 関 するヒント ショートカット その 他 のアプローチなどを 記 載 してい ます 注 記 を 無 視 しても 悪 影 響 はありませんが 作 業 を 効 率 的 に 行 うためのコツを 見 逃 してしま う 可 能 性 があります 重 要 重 要 の 欄 には 現 行 セッションのみに 適 用 される 設 定 の 変 更 や 更 新 を 適 用 するのに 再 起 動 が 必 要 なサービスなど 見 落 としがちな 情 報 を 記 載 しています 重 要 と 記 載 された 事 項 を 無 視 して も データ 損 失 などには 至 りませんが 作 業 が 思 ったようにスムーズに 進 まなくなる 可 能 性 があり ます 警 告 警 告 は 無 視 しないでください 警 告 を 無 視 すると データ 損 失 が 発 生 する 可 能 性 が 非 常 に 高 くな ります 2. サポート およびフィードバックのお 願 い 2.1. サポートが 必 要 ですか? 本 書 に 説 明 してある 手 順 で 問 題 があれば Red Hat カスタマーポータル(http://access.redhat.com)をご 覧 ください カスタマーポータルでは 以 下 を 行 うことができます 5

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド Red Hat 製 品 に 関 する 技 術 的 なサポートの 記 載 をナレッジベースで 検 索 閲 覧 することができます サポートケースを Red Hat グローバルサポートサービス(GSS)に 提 出 することができます 他 の 製 品 文 書 を 参 照 することができます また Red Hat は Red Hat のソフトウェアやテクノロジーに 関 するディスカッションの 場 として 多 くの メーリングリストを 設 置 しています 公 開 されているメーリングリストについて はhttps://www.redhat.com/mailman/listinfoで 一 覧 を 参 照 してください メーリングリストをサブスクライ ブする またはメーリングリストのアーカイブを 参 照 する 場 合 はそのメーリングリスト 名 をクリックしま す 2.2. フィードバックをお 願 いします 誤 植 本 ガイドの 改 善 案 がある 場 合 ご 意 見 お 待 ちしております 製 品 JBoss Enterprise Application Platform 5 コンポーネントdoc-RichFaces_Dev_GuideとしBugzilla から 報 告 し てください 以 下 のリンクhttp://bugzilla.redhat.com/から あらかじめ 記 入 が 施 されている 本 製 品 のバグ レポートへ 移 動 できます Bugzilla のDescription フィールドにある 以 下 のテンプレートに 記 載 してください できるだけ 具 体 的 に 問 題 を 説 明 していただけると 迅 速 に 問 題 解 決 へ 向 けた 取 り 組 みが 行 いやすくなります 文 書 URL: 項 項 のタイトル: 問 題 の 説 明 : 改 善 案 : 追 加 情 報 : 問 題 報 告 の 功 績 が 認 められるよう 名 前 を 記 載 するのを 忘 れないようにしてください 6

第 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 に 導 入 される 予 定 です テストフレームワークはコンポーネントをテストするだけでな く Servlet コンテナにテストアプリケーションをデプロイ せずに JavaScript コードなどサーバー 側 またはクライアント 側 の 他 の 機 能 をテストします RichFaces UI コンポーネントはそのまま 即 座 に 実 装 できます そのため 開 発 時 間 を 短 縮 でき 即 座 に RichFaces Web アプリケーションの 開 発 機 能 を 使 用 できるため 簡 単 かつ 迅 速 に RichFaces を 体 験 でき 7

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

第 2 章 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 があることを 想 定 します com m ons-beanutils-1.7.0.jar com m ons-collections-3.2.jar com m ons-digester-1.8.jar com m ons-logging-1.0.4.jar jhighlight-1.0.jar 2.1.2. web.xml に RichFaces を 登 録 する プロジェクトに RichFaces ライブラリを 追 加 したら プロジェクトの web.xml ファイルに 登 録 しなけ ればなりません 以 下 を web.xml に 追 加 します 9

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド <!-- 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> RichFaces スキンの 詳 細 は Skinnability (スキンの 有 効 性 ) を 参 照 してください web.xml は 次 のようになるはずです 10

第 2 章 RichFaces の 利 用 <?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> 11

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド 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; } } 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> 2.1.5. RichFaces Greeter の index.jsp RichFaces Greeter には 1 つだけ JSP ページがあります WEB CONTENT フォルダのルートに index.jsp を 作 成 し 以 下 を JSP ファイルに 追 加 します 12

第 2 章 RichFaces の 利 用 <!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> rerender="greeting" /> <a4j:commandbutton value="get greeting" empty user.name}" /> <h:panelgroup id="greeting" > <h:outputtext value="hello, " rendered="#{not <h:outputtext value="#{user.name}" /> <h:outputtext value="!" rendered="#{not empty user.name}" /> </h:panelgroup> </rich:panel> </a4j:form> </f:view> </body> </html> アプリケーションは 3 つの RichFaces コンポーネントを 使 用 します <rich:panel> は 情 報 の 仮 想 コンテ ナとして 使 用 されます ビルトインの AJAX サポートがある <a4 j:commandbutton> は 応 答 が 返 った 後 に 動 的 に 挨 拶 を 表 示 させます <a4 j:form> はボタンがアクションを 実 行 できるようにします 13

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド 注 記 RichFaces タグライブラリを 各 JSP ページに 宣 言 する 必 要 があります XHTML ページについて は 次 の 行 を 追 加 してタグライブラリを 宣 言 します <xmlns:a4j="http://richfaces.org/a4j"> <xmlns:rich="http://richfaces.org/rich"> ここで ブラウザで index.jsp ページである http://localhost:8080/greeter/index.jsf を 示 し サーバー 上 でアプリケーションを 実 行 します 図 2.1 RichFaces Greeter のアプリケーション 2.2. 関 連 するリソースのリンク JBoss Developer Studio には RichFaces コンポーネントフレームワークとの 綿 密 な 統 合 に 関 する 記 述 が あります 14

第 3 章 異 なる 環 境 の 設 定 第 3 章 異 なる 環 境 の 設 定 RichFaces には JSF (JavaServer Faces) 仕 様 に 含 まれるすべてのタグ (コンポーネント) に 対 するサポー トが 含 まれています 既 存 の JSF プロジェクトに RichFaces の 機 能 を 追 加 するには RichFaces ライブ ラリをプロジェクトの lib ディレクトリに 配 置 し フィルタマッピングを 追 加 します RichFaces を 追 加 しても 既 存 プロジェクトの 動 作 は 変 更 しません 3.1. Web アプリケーション 記 述 子 パラメータ RichFaces では web.xml にパラメータを 定 義 する 必 要 はありませんが 下 記 の RichFaces パラメータ は 開 発 中 に 便 利 なパラメータで RichFaces アプリケーションの 柔 軟 性 を 向 上 します 15

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド 表 3.1 初 期 化 パラメータ 名 前 デフォルト 内 容 org.richfaces.skin DEFAULT アプリケーションで 使 用 される スキンの 名 前 です スキン 名 を 含 むリテラルストリングか org.richfaces.fram ework.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 からのコンテンツは ifram e ウインドウのデバッグ ページ 上 に 表 示 されます org.ajax4jsf.view_handlers なし ビューハンドラチェーンに 挿 入 するための ViewHandler イン スタンスのコンマ 区 切 りリスト です これらのハンドラは リ ストされた 順 に RichFaces の ビューハンドラの 前 に 挿 入 され ます Facelets アプリケーショ ンでは faces-config.xm l ファイルではなく このリスト に com.sun.facelets.facele tviewhandler を 宣 言 します org.ajax4jsf.cont ROL_COMPO NENTS なし メッセージバンドルローダやエ イリアス Bean コンポーネント など 特 別 な 制 御 ケース コンポー ネントのコンマ 区 切 りリストで す これらのハンドラは 静 的 フィールド COMPONENT_T YPE からの 反 射 より 提 供 されます これらコンポーネントのエン コーディングメソッドは コン 16

第 3 章 異 なる 環 境 の 設 定 org.ajax4jsf.encrypt_resou RCE_DAT A org.ajax4jsf.encrypt_passw ORD org.ajax4jsf.compress_scrip T org.ajax4jsf.resource_uri_p REFIX org.ajax4jsf.global_resour CE_URI_PREFIX org.ajax4jsf.session_resour CE_URI_PREFIX false random true a4j a4j/g a4j/s ポーネントが 更 新 されていなく ても AJAX 応 答 のレンダリング 中 に 常 に 呼 び 出 されます 生 成 されたリソース ( 暗 号 生 成 データなど) ではリソース URL でエンコードされます 例 え ば m ediaoutput コンポーネ ントによって 生 成 されたイメー ジの URL には 生 成 メソッド 名 が 含 まれます 悪 意 のあるコード はこれを 利 用 して JSF Bean や 属 性 の 要 求 を 作 成 できるため 重 大 なアプリケーションではこ のパラメータを true に 設 定 す る 必 要 があります (この 修 正 は Java Runtime Environment 1.4 で 動 作 します) リソースデータの 暗 号 化 に 使 用 されるパスワードです 設 定 さ れていないと 無 作 為 のパス ワードが 使 用 されます 定 義 されると フレームワーク が JavaScript ファイルを 再 フォーマットできなくなりま す そのため デバッグ 機 能 が 使 用 できなくなります 生 成 されたリソースすべての URL に 追 加 するプレフィックス を 定 義 します RichFaces に よって 生 成 されたリソース 要 求 を 処 理 することが 目 的 です すべてのグローバルリソースの URI に 追 加 されるプレフィック スを 定 義 します RichFaces に よって 生 成 されたリソース 要 求 を 処 理 するためのプレフィック スです 生 成 されたリソースのセッショ ンを 追 跡 するために 使 用 するプ レフィックスを 定 義 します RichFaces によって 生 成 された リソース 要 求 を 処 理 するための プレフィックスです org.ajax4jsf.default_expire 86400 リソースがブラウザへストリー ムバックされた 時 にリソースが キャッシュされる 期 間 ( 秒 単 位 ) を 定 義 します org.ajax4jsf.serializ E_SERVE R_STATE false true に 設 定 されると コン ポーネントのステート (ツリーで はない) がセッションに 保 存 され る 前 にシリアライズされます モデル 変 更 に 影 響 を 受 ける 17

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド モデル 変 更 に 影 響 を 受 ける ビューステートを 持 つアプリ ケーションで 有 用 です この 代 わりに 各 環 境 で com.sun.faces.serialize ServerState パラメータと org.apache.m yfaces.seri ALIZE_ST AT E_IN_SESSION パラメータを 使 用 することもで きます 注 記 org.richfaces.skin は org.ajax4jsf.skin と 同 様 に 使 用 されます 表 3.2 org.ajax4 jsf.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 と 動 作 します 18

第 3 章 異 なる 環 境 の 設 定 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 が 若 干 先 に 使 用 されることを 宣 言 します 注 記 この 場 合 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 が 次 のようにならなければなりません 19

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド <?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> <listenerclass>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> 20

第 3 章 異 なる 環 境 の 設 定 <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 は 次 のようにならなければなりません 21

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド <?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</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.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> 22

第 3 章 異 なる 環 境 の 設 定 </servlet-mapping> </web-app> 23

JBoss Enterprise Application Platform 5 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 フレームワークの 重 要 なエレメントの 一 部 が 記 載 されています 24

第 4 章 RichFaces フレームワークの 基 本 概 念 図 4.2 コアの AJAX コンポーネント 構 造 AJAX フィルタ RichFaces を 最 大 限 に 利 用 するには アプリケーションの web.xml に Filter を 登 録 することをお 勧 め します Filter は 複 数 の 要 求 タイプを 認 識 します 図 5.3 のシーケンス 図 は 通 常 の JSF 要 求 と AJAX 要 求 の 処 理 における 違 いを 示 しています 25

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド 図 4.3 要 求 処 理 シーケンス 図 どちらの 場 合 でも アプリケーションが 要 求 する 必 要 な 静 的 または 動 的 リソースの 情 報 は ResourceBuilder クラスに 登 録 されます リソース 要 求 が 発 行 されると RichFaces フィルタがこのリソースの Resource Cache をチェックし ます Resource Cache が 存 在 する 場 合 はリソースがクライアントへ 返 されますが 存 在 しないとフィ ルタは ResourceBuilder に 登 録 されているリソースを 検 索 します リソースが 登 録 されている 場 合 RichFaces フィルタは ResourceBuilder がリソースを 作 成 ( 送 信 ) するよう 要 求 します 次 の 図 はリソース 要 求 のプロセスを 表 しています 26

第 4 章 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> 4.3.1. 要 求 エラーへの 対 処 AJAX 要 求 中 にエラーが 発 生 した 時 にクライアント 上 で 独 自 のコードを 実 行 するには 次 のように 標 準 の 27

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド A4J.AJAX.onError メソッドを 再 定 義 する 必 要 があります A4J.AJAX.onError = function(req, status, message){ window.alert("custom onerror handler "+message); } この 関 数 は 次 のパラメータを 許 可 します 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; } } この 関 数 は 次 のパラメータを 取 ることができます loc 現 ページの URL ( 必 要 に 応 じてアップデート 可 能 ) expiredmsg SessionExpiration の 際 に 表 示 されるデフォルトメッセージ 28

第 4 章 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 (スキンの 有 効 性 ) 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 つのスタイルクラスのうちどれを 使 用 してもそのエレメントに 適 用 することが できます フレームワークに 挿 入 されたデフォルトのスタイルクラス このスタイルクラスにはスキンからの 定 数 へリンクされたスタイルパラメータが 含 まれています 各 コンポーネントに 対 して 定 義 され 表 現 のデフォルトレベルを 指 定 します の 値 を 29

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド 変 更 してアプリケーションインターフェースを 変 更 することができます スキン 拡 張 のスタイルクラス このクラス 名 は 各 コンポーネントエレメントに 対 して 定 義 され CSS ファイルの 同 じ 名 前 でクラスを 定 義 できるようフレームワークに 挿 入 されます これにより このクラスを 使 用 するすべてのコン ポーネントの 外 見 を 簡 単 に 拡 張 できます ユーザースタイルクラス styleclass パラメータの 1 つを 使 用 してコンポーネントエレメントの 独 自 のクラスを 定 義 すること ができます そのため クラスに 指 定 された CSS スタイルパラメータに 従 って 特 定 のコンポーネン トの 外 見 が 変 更 されます 4.4.3. 例 簡 単 な パネル コンポーネントの 例 は 次 の 通 りです <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> 4.4.4. RichFaces のテーブル RichFaces は 最 も 単 純 なレベルの 一 般 的 なカスタマイズで 8 つの 事 前 定 義 された (スキ ン) を 備 えています DEFAULT plain 30

第 4 章 RichFaces フレームワークの 基 本 概 念 emeraldt own bluesky wine japancherry ruby classic deepmarine スキンを 適 用 するには org.richfaces.skin コンテキストパラメータにスキン 名 を 指 定 する 必 要 が あります 下 表 は bluesky スキンの 各 パラメータの 値 を 表 しています 表 4.1 色 パラメータ 名 headerbackgroundcolor headergradientcolor デフォルト 値 #BED6F8 #F2F7FF headt extcolor #000000 headerweightfont generalbackgroundcolor bold #FFFFFF generalt extcolor #000000 generalsizefont generalfamilyfont 11px controlt extcolor #000000 controlbackgroundcolor additionalbackgroundcolor Arial Verdana sans-serif #FFFFFF #ECF4FE shadowbackgroundcolor #000000 shadowopacity 1 panelbordercolor subbordercolor tabbackgroundcolor tabdisabledt extcolor trimcolor tipbackgroundcolor tipbordercolor selectcontrolcolor #BED6F8 #FFFFFF #C6DEFF #8DB7F3 #D6E6FB #FAE6B0 #E5973E #E79A00 generallinkcolor #0078D0 hoverlinkcolor visitedlinkcolor #0090FF #0090FF 31

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド 表 4.2 フォント パラメータ 名 headersizefont headerfamilyfont tabsizefont tabfamilyfont buttonsizefont buttonfamilyfont tablebackgroundcolor tablefooterbackgroundcolor tablesubfooterbackgroundcolor tablebordercolor デフォルト 値 11px Arial Verdana sans-serif 11px Arial Verdana sans-serif 11px Arial Verdana sans-serif #FFFFFF #cccccc #f1f1f1 #C0C0C0 バージョン 3.0.2 に plain スキンが 追 加 されました このスキンにはパラメータがなく 独 自 のスタイ ルで RichFaces コンポーネントを 既 存 のプロジェクトへ 組 み 込 む 時 に 重 要 となります 4.4.5. 独 自 のスキンファイルの 作 成 および 使 用 次 のように 独 自 のスキンファイルを 作 成 します ファイルを 作 成 します そこで スタイルクラスで 使 用 されるスキン 定 数 を 定 義 します ( RichFaces のテーブル を 参 照 ) スキンファイルの 名 前 は 次 の 形 式 に 従 います : <name>.skin.properties 例 えばこのファイルで RichFaces の 事 前 定 義 した bluesky classic deepmarine などを 見 てみましょう こうしたファイルは /META- INF/skins フォルダの richfaces-im pl-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 ファイルを 配 置 します 4.4.6. RichFaces のビルトイン Skinnability RichFaces では スキンをユーザーインターフェース (UI) のデザインに 組 み 入 れることができます こ のフレームワークではプロパティファイルの 名 前 付 きのを 使 用 してコンポーネントの セット 全 体 でスキンの 外 見 を 常 に 制 御 することができます 事 前 定 義 されたスキンの 例 は http://livedemo.exadel.com/richfaces-demo/ で 参 照 できます スキンにより RichFaces によってビルドされる 標 準 的 な JSF コンポーネントとカスタム JSF コンポー ネントをレンダリングするスタイルを 定 義 できます スキンを 試 してみるには 次 の 手 順 に 従 います 次 のようにカスタムのレンダリングキットを 作 成 し faces-config.xml に 登 録 します 32

第 4 章 RichFaces フレームワークの 基 本 概 念 <render-kit> <render-kit-id>new_skin</render-kit-id> <render-kitclass>org.ajax4jsf.framework.renderer.chameleonrenderkitimpl</render-kit-class> </render-kit> 次 に ルックアンドフィールの 事 前 定 義 された 変 数 を 基 にしてコンポーネントのカスタムレンダラを 作 成 し 登 録 します <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 を 使 用 します カスタムレンダラ 作 成 の 詳 細 は 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> skinbean コードは 次 のようになります public class SkinBean { private String skin; public String getskin() { return skin; } public void setskin(string skin) { this.skin = skin; } } 設 定 ファイルの skin プロパティの 最 初 の 値 を 設 定 する 必 要 があります classic の 設 定 方 法 は 以 下 の とおりです 33

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド <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> デフォルトスキンのプロパティを 変 更 することもできます 変 更 するには デフォルトスキンのプロパ ティを 編 集 します ページコードの 例 は 次 の 通 りです <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> 上 記 のコードは 次 のオプションリストを 生 成 します 34

第 4 章 RichFaces フレームワークの 基 本 概 念 図 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 35

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド 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-<elem entnam e>[-<elem entt ype>] スキームでマップされます.rich-select { //class content }.rich-input-text { //class content } 注 記 rich-link rich-link-hover rich-link-visited など link タイプと 疑 似 クラ ス 名 によってエレメントはクラスを 割 り 当 てられます 提 供 される 事 前 定 義 されたリッチ CSS クラスは 基 本 および 複 合 HTML エレメントの 両 方 のクラスとし て 使 用 できます 次 のコードスニペットには 例 として 複 数 のエレメントを 示 しています 36

第 4 章 RichFaces フレームワークの 基 本 概 念 <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.4.8.1. 標 準 レベル 表 4.3 input select textarea button keygen isindex legend の HTML エレメントス キンバインディング font-size font-family color generalsizefont generalfamilyfont controlt extcolor 表 4.4 fieldset の HTML エレメントスキンバインディング border-color panelbordercolor 表 4.5 hr の HTML エレメントスキンバインディング border-color panelbordercolor 37

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド 表 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 font-family color generalsizefont generalfamilyfont controlt extcolor 表 4.10.rich-fieldset のリッチエレメントスキンバインディング border-color panelbordercolor 表 4.11.rich-hr のリッチエレメントスキンバインディング border-color border-width border-style panelbordercolor 1px solid 表 4.12.rich-link のリッチエレメントスキンバインディング color generallinkcolor 表 4.13.rich-link:hover のリッチエレメントスキンバインディング color hoverlinkcolor 38

第 4 章 RichFaces フレームワークの 基 本 概 念 表 4.14.rich-link:visited のリッチエレメントスキンバインディング color visitedlinkcolor 表 4.15.rich-field のリッチエレメントスキンバインディング border-width border-style border-color background-color background-repeat background-position / 値 1px inset panelbordercolor controlbackgroundcolor no-repeat 1px 1px 表 4.16.rich-field-edit のリッチエレメントスキンバインディング border-width border-style border-color background-color 1px inset panelbordercolor editbackgroundcolor 表 4.17.rich-field-error のリッチエレメントスキンバインディング border-width border-style border-color background-color background-repeat background-position padding-left 1px inset panelbordercolor warningbackgroundcolor no-repeat center left 7px 39

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド 表 4.18.rich-button.rich-button-disabled.rich-button-over のリッチエレメントスキンバイ ンディング border-width border-style border-color background-color padding text-align cursor background-repeat background-position 1px solid panelbordercolor trimcolor 2px 10px 2px 10px center pointer repeat-x top left 表 4.19.rich-button-press のリッチエレメントスキンバインディング background-position bottom left 表 4.20.rich-container fieldset.rich-fieldset のリッチエレメントスキンバインディング border-color border-width border-style padding padding panelbordercolor 1px solid 10px 10px 表 4.21.rich-legend のリッチエレメントスキンバインディング font-size font-family color font-weight generalsizefont generalfamilyfont controlt extcolor bold 表 4.22.rich-form のリッチエレメントスキンバインディング padding margin 0px 0px 4.4.8.2. 拡 張 レベル 4 0

第 4 章 RichFaces フレームワークの 基 本 概 念 表 4.23 input select textarea button keygen isindex の HTML エレメントスキンバイ ンディング border-width border-color color 1px panelbordercolor controlt extcolor 表 4.24 * button の HTML エレメントスキンバインディング border-color font-size font-family color background-color background-image panelbordercolor generalsizefont generalfamilyfont headert extcolor headerbackgroundcolor org.richfaces.renderkit.html.images.buttonbackgro undimage 表 4.25 button[type=button] button[type=reset] button[type=submit] input[type=reset] input[type=submit] input[type=button] の HT ML エレメントスキンバイ ンディング border-color font-size font-family color background-color background-image panelbordercolor generalsizefont generalfamilyfont headert extcolor headerbackgroundcolor org.richfaces.renderkit.html.images.buttonbackgro undimage 表 4.26 * button[disabled].rich-container * button[disabled].rich-button-disabled の HT ML エレメントスキンバインディング color border-color background-color background-image tabdisabledt extcolor tablefooterbackgroundcolor tablefooterbackgroundcolor org.richfaces.renderkit.html.images.buttondisable dbackgroundimage 4 1

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド 表 4.27.rich-button-disabled.rich-container button[type="button"][disabled].richbutton-button-disabled.rich-container button[type="reset"][disabled].rich-buttonreset-disabled.rich-container button[type="submit"][disabled].rich-button-submitdisabled.rich-container input[type="reset"][disabled].rich-input-reset-disabled.richcontainer input[type="submit"][disabled].rich-input-submit-disabled,.rich-container input[type="button"][disabled].rich-input-button-disabled の HT ML エレメントスキンバイン ディング color background-color border-color background-image tabdisabledt extcolor tablefooterbackgroundcolor tablefooterbackgroundcolor org.richfaces.renderkit.html.images.buttondisable dbackgroundimage 表 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] の HT ML エレメントスキンバ インディング color border-color background-color tabdisabledt extcolor tablefooterbackgroundcolor tablefooterbackgroundcolor 表 4.29 * textarea のエレメントスキンバインディング border-color font-size font-family color background-color background-image panelbordercolor generalsizefont generalfamilyfont controlt extcolor controlbackgroundcolor org.richfaces.renderkit.html.images.inputbackgrou ndimage 表 4.30 textarea[type=textarea] input[type=text] input[type=password] select の HTML エレメントスキンバインディング border-color font-size font-family color background-color background-image panelbordercolor generalsizefont generalfamilyfont controlt extcolor controlbackgroundcolor org.richfaces.renderkit.html.images.inputbackgrou ndimage 4 2

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

JBoss Enterprise Application Platform 5 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/eAF7sqpgbjyGdIAFrMEaw.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 をリソースプレフィックスとして 使 用 するように してください 4.4.10. XCSS ファイル 形 式 XCSS (クロスサイトカスケーディングスタイルシート) ファイルは RichFaces コンポーネント Skinnability のコアです XCSS は スキニングプロセスを 拡 張 する XML 形 式 の CSS です RichFaces は 特 定 コンポーネントのルックアンドフィールパラメータをすべて 格 納 する XCSS ファイルを 解 析 し ウェブブラウザが 認 識 できる 標 準 の CSS ファイルへ 情 報 をコンパイルします XCSS ファイルには とのマッピングが 含 まれています CSS セレクタ をにマップするには < u:selector > と < u:style> XML タグを 使 用 し 次 の 例 の 4 4

第 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-control-top,.rich-ordering-control-bottom,.rich-ordering-control-up,.rich-ordering-controldown"> <u:style name="border-color" skin="tablebordercolor" /> </u:selector> 4.4.11. Plug-n-Skin (プラグアンドスキン) プラグアンドスキン は プロジェクトへカスタムスキンを 簡 単 に 作 成 カスタマイズ プラグできるよ うにします 事 前 定 義 された RichFaces スキンのパラメータを 基 にしてスキンを 作 成 することができま す また プラグアンドスキンはリッチコントロールの 外 見 を 標 準 の HTML エレメントと 統 合 できるよ うにします 本 項 では プラグアンドスキンで 独 自 のスキンを 作 成 するための 段 階 的 な 手 順 を 取 り 上 げ ます 最 初 に Maven を 使 用 して 新 しいスキンのテンプレートを 作 成 します (RichFaces に Maven を 設 定 する 方 法 に 関 する 詳 細 は JBoss wiki article を 参 照 してください) こうした Maven の 手 順 はコマンドラインイ ンターフェースにコピーして 貼 り 付 けることで 実 行 できます 4 5

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド mvn archetype:create -DarchetypeGroupId=org.richfaces.cdk -DarchetypeArtifactId=maven-archetype-plug-n-skin -DarchetypeVersion=RF-VERSION -DartifactId=ARTIFACT-ID -DgroupId=GROUP-ID -Dversion=VERSION コマンドの 主 キーは 次 の 通 りです 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 コマンドの 主 キーは 次 の 通 りです name 新 しいスキンの 名 前 を 定 義 します package スキンの 基 本 パッケージです デフォルトではプロジェクトの groupid が 使 用 されて います コマンドのその 他 任 意 のキーは 次 の 通 りです baseskin ベーススキンの 名 前 を 定 義 します createext true に 設 定 されると 拡 張 CSS クラスが 追 加 されます 詳 細 は 標 準 コントロール スキニング (Standard Controls Skinning) を 参 照 してください コマンドで 作 成 されたファイルについては 表 4.34 mvn cdk:add-skin -Dname=SKIN-NAME - Dpackage=SKIN-PACKAGE コマンドで 作 成 されたファイルとフォルダ を 参 照 してください 4 6

第 4 章 RichFaces フレームワークの 基 本 概 念 表 4.34 mvn cdk:add-skin -Dname=SKIN-NAME -Dpackage=SKIN-PACKAGE コマンドで 作 成 さ れたファイルとフォルダ ファイル 名 BaseIm age.java BaseImageT est.java XCSS files SKIN-NAME.properties 場 所 \src\m ain\java\skin- PACKAGE\SKIN- NAME\im ages\ \src\test\java\skin- PACKAGE\SKIN- NAME\im ages\ \src\m ain\resources\skin -PACKAGE\SKIN-NAME\css\ \src\m ain\resources\skin -PACKAGE\SKIN-NAME\css\ 内 容 イメージを 格 納 するために 使 用 する 基 本 クラスです イメージを 格 納 するクラスのテ ストバージョンです 新 しいスキンに 影 響 された RichFaces コンポーネントの 新 しい 外 見 を 定 義 します 新 しいスキンのプロパティを 含 むファイルです SKIN-NAME.properties ファ イルの 設 定 に 使 用 されるプロパ ティは 次 の 通 りです baseskin 独 自 のスキンの 基 準 と して 使 用 されるスキン 名 です 定 義 するスキ ンの 外 見 は 新 しいスタ イルのプロパティによ り 影 響 を 受 けます generalstylesheet 新 しいスキンが 修 正 す るコンポーネントのス タイルシートをイン ポートするスタイル シート (SKIN- NAME.xcss) へのパス です extendedstylesheet RichFaces コンポーネ ントと 標 準 HTML コン トロールの 外 見 を 統 一 するために 使 用 される スタイルシートへのパ スです 詳 細 は 標 準 コントロールスキニン グ (Standard Controls Skinning) を 参 照 して ください gradientt ype 新 しいスキンに 適 用 さ れるグラデーションの タイプを 設 定 する 事 前 4 7

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド 定 義 したプロパティで す 可 能 な 値 は glass plastic pl ain です グラデー ションの 実 装 に 関 する 詳 細 は 本 章 の 後 半 で 説 明 します SKIN-NAME.xcss XCSS files SKIN-NAME-ext.xcss SKIN-NAME-resources.xm l src\m ain\resources\met A -INF\skins \src\m ain\resources\skin -PACKAGE\SKIN-NAME\css\ src\m ain\resources\met A -INF\skins. src\m ain\config\resourc es. 新 しいスキンが 修 正 したコン ポーネントの XCSS ファイルを インポートする XCSS ファイル です createext キーが true に 設 定 されている 場 合 に 標 準 コン トロールのスタイルを 決 定 しま す (extended_classes.xcss と extended.xcss) createext が true に 設 定 さ れている 場 合 に 標 準 コント ロールの 定 義 のスタイルをイン ポートします 前 回 にリストされた 全 ファイル の 詳 細 が 含 まれています これで \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.xm l ファイルを 4 8

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

JBoss Enterprise Application Platform 5 RichFaces 開 発 者 ガイド 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 これで 作 成 したファイルやフォルダを 確 認 するため 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\m ain\resources\skinpackage\plugnskindem o\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 スキンをプロジェクトへインポートします 50

第 4 章 RichFaces フレームワークの 基 本 概 念 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> 標 準 コントロールスキニングが 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 リンクをクリックするとボタンラベル とメソッドが 変 更 されます 51

JBoss Enterprise Application Platform 5 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 の 場 合 は 標 準 のナビゲーション 処 理 が 呼 び 出 されます 次 のように RichFaces ステート API を 実 装 します faces-config.xml ファイルにステートナビゲーションハンドラと EL リゾルバを 登 録 します 52