Red Hat Summit Red Hat Summitサポートコンソール開発者トライアルの開始お問い合わせ

第2章 RichFaces の利用

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

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

シンプルなアプリケーションである RichFaces Greeter は、一般的な hello world アプリケーションと似ています。ただし 1 つの例外は、RichFaces では最初にユーザーに「Hello!」と挨拶することです。
Greeter という名前の標準的な JSF 1.2 プロジェクトを作成します。 必要なライブラリがすべて含まれるようにし、 後述の手順に従ってください。

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

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

重要

RichFaces を持つ JSF アプリケーションは、 プロジェクトに次の JAR があることを想定します。
  • commons-beanutils-1.7.0.jar
  • commons-collections-3.2.jar
  • commons-digester-1.8.jar
  • commons-logging-1.0.4.jar
  • jhighlight-1.0.jar

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

プロジェクトに RichFaces ライブラリを追加したら、 プロジェクトの web.xml ファイルに登録しなければなりません。 以下を web.xml に追加します。 
...
<!-- Plugging the "Blue Sky" skin into the project -->
<context-param>
   <param-name>org.richfaces.SKIN</param-name>
   <param-value>blueSky</param-value>
</context-param>

<!-- Making the RichFaces skin spread to standard HTML controls -->
<context-param>
      <param-name>org.richfaces.CONTROL_SKINNING</param-name>
      <param-value>enable</param-value>
</context-param>
 
<!-- Defining and mapping the RichFaces filter -->
<filter> 
   <display-name>RichFaces Filter</display-name> 
   <filter-name>richfaces</filter-name> 
   <filter-class>org.ajax4jsf.Filter</filter-class> 
</filter> 
  
<filter-mapping> 
   <filter-name>richfaces</filter-name> 
   <servlet-name>Faces Servlet</servlet-name>
   <dispatcher>REQUEST</dispatcher>
   <dispatcher>FORWARD</dispatcher>
   <dispatcher>INCLUDE</dispatcher>
</filter-mapping>
...
Copy to Clipboard Toggle word wrap
RichFaces スキンの詳細は 「Skinnability (スキンの有効性)」 を参照してください。
web.xml は次のようになるはずです。 
<?xml version="1.0"?>
<web-app version="2.5" 
                xmlns="http://java.sun.com/xml/ns/javaee"
                xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
                xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name>Greeter</display-name>
  
<context-param>
   <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
   <param-value>server</param-value>
</context-param>
  
<context-param>
   <param-name>org.richfaces.SKIN</param-name>
   <param-value>blueSky</param-value>
</context-param>

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

<filter-mapping> 
   <filter-name>richfaces</filter-name> 
   <servlet-name>Faces Servlet</servlet-name>
   <dispatcher>REQUEST</dispatcher>
   <dispatcher>FORWARD</dispatcher>
   <dispatcher>INCLUDE</dispatcher>
</filter-mapping>
  
<listener>
   <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
  
<!-- Faces Servlet -->
<servlet>
   <servlet-name>Faces Servlet</servlet-name>
   <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
   <load-on-startup>1</load-on-startup>
</servlet>
 
<!-- Faces Servlet Mapping -->
<servlet-mapping>
   <servlet-name>Faces Servlet</servlet-name>
   <url-pattern>*.jsf</url-pattern>
</servlet-mapping>
  
<login-config>
   <auth-method>BASIC</auth-method>
   </login-config>
</web-app>
Copy to Clipboard Toggle word wrap

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

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

public class user {
   private String name="";
   public String getName() {
      return name;
   }
   public void setName(String name) {
      this.name = name;
   }
}
Copy to Clipboard Toggle word wrap

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

user Bean を登録するには、 以下を faces-config.xml ファイルに追加します。 
<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" 
                    xmlns="http://java.sun.com/xml/ns/javaee"
                    xmlns:xi="http://www.w3.org/2001/XInclude"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
                    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
   <managed-bean>
      <description>UsernName Bean</description>
      <managed-bean-name>user</managed-bean-name>
      <managed-bean-class>demo.user</managed-bean-class>
      <managed-bean-scope>request</managed-bean-scope>
      <managed-property>
         <property-name>name</property-name>
         <property-class>java.lang.String</property-class>
         <value/>
      </managed-property>
   </managed-bean>
</faces-config>
Copy to Clipboard Toggle word wrap

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

RichFaces Greeter には 1 つだけ JSP ページがあります。 WEB CONTENT フォルダのルートに index.jsp を作成し、 以下を JSP ファイルに追加します。 
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<!-- RichFaces tag library declaration -->
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
 
<html>
      <head>
            <title>RichFaces Greeter</title>
      </head>
      <body>
            <f:view>
                  <a4j:form>
                        <rich:panel header="RichFaces Greeter" style="width: 315px">
                              <h:outputText value="Your name: " />
                              <h:inputText value="#{user.name}" >
                                    <f:validateLength minimum="1" maximum="30" />
                              </h:inputText>
                              
                              <a4j:commandButton value="Get greeting" reRender="greeting" />
                              
                              <h:panelGroup id="greeting" >
                                    <h:outputText value="Hello, " rendered="#{not empty user.name}" />
                                    <h:outputText value="#{user.name}" />
                                    <h:outputText value="!" rendered="#{not empty user.name}" />
                              </h:panelGroup>
                        </rich:panel>
                  </a4j:form>
            </f:view>
      </body>
</html>
Copy to Clipboard Toggle word wrap
アプリケーションは 3 つの RichFaces コンポーネントを使用します。<rich:panel> は情報の仮想コンテナとして使用されます。ビルトインの AJAX サポートがある <a4j:commandButton> は、応答が返った後に動的に挨拶を表示させます。<a4j:form> はボタンがアクションを実行できるようにします。

注記

RichFaces タグライブラリを各 JSP ページに宣言する必要があります。 XHTML ページについては、 次の行を追加してタグライブラリを宣言します。 
<xmlns:a4j="http://richfaces.org/a4j">
<xmlns:rich="http://richfaces.org/rich">
Copy to Clipboard Toggle word wrap
ここで、ブラウザで index.jsp ページである http://localhost:8080/Greeter/index.jsf を示し、 サーバー上でアプリケーションを実行します。
「RichFaces Greeter」のアプリケーション
View larger image
「RichFaces Greeter」のアプリケーション

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

トップに戻る
Red Hat logoGithubredditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

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

Red Hat をお使いのお客様が、信頼できるコンテンツが含まれている製品やサービスを活用することで、イノベーションを行い、目標を達成できるようにします。 最新の更新を見る.

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

Red Hat では、コード、ドキュメント、Web プロパティーにおける配慮に欠ける用語の置き換えに取り組んでいます。このような変更は、段階的に実施される予定です。詳細情報: Red Hat ブログ.

会社概要

Red Hat は、企業がコアとなるデータセンターからネットワークエッジに至るまで、各種プラットフォームや環境全体で作業を簡素化できるように、強化されたソリューションを提供しています。

Theme

© 2025 Red Hat