RichFaces-概要

RichFacesは、JSFテクノロジー用のオープンソースコンポーネントライブラリです。 JBossによって開発および設計されています。 RichFacesは、フロントエンドの予備知識がなくても、再利用可能なマークアップとAJAX機能をJSF開発者に提供します。 RichFacesはJSF 2上で開発されたため、JSFと同じライフサイクルに従います。組み込みのAJAXサポートとカスタマイズ可能なルックアンドフィール機能により、エンタープライズJavaアプリケーションの新しい地平が可能になりました。

長所と短所

以下は、RichFacesを使用するいくつかの*利点*です。

AJAXサポート*-RichFacesは、Webページにマークアップを含めるための古い定型のAJAX、JavaScriptコードを排除します。 RichFacesを使用すると、開発者はAJAXの予備知識がなくても、オンザフライでマークアップを含めることができます。

コンポーネント開発キット（CDK）-前述のように、開発者はアプリケーションで使用されるマークアップに集中する必要はなく、それらの機能を使用するためにRichFacesタグを含める必要があります。このマークアップの自動作成は、CDKと呼ばれるランタイム環境によって行われます。

リソース処理-RichFacesは、画像、Excel、スプレッドシートなどのさまざまなバイナリファイルを作成するための追加サポートを提供します。

スキニング-スキニングは、JSFで導入された最新のアプローチであり、アプリケーションのルックアンドフィールの制御を非常に簡単にします。他のさまざまなカスタマイズ可能なパラメーターを使用した特別に集中化されたカラーマネージメントは、開発者にとって非常に便利です。

以下は、RichFacesを使用する際のいくつかの*短所*です。

リソース-これはかなり新しい技術であり、良質のリソースを取得することは、金持ちの開発者にとって大きな問題です。

複雑-さまざまなフェーズと動的マークアップの作成を介した移行は、CDKの全責任です。従来のフロントエンド開発者にとって、CDKの内部処理を理解することは少し複雑でわかりにくいです。 Richfaces-environment-setup Richfaces-architecture

RichFaces-基本コンセプト

この章では、RichFacesのいくつかの基本的な概念を見て、RichFacesがAJAXリクエストやその他の多くの機能の処理をどのように扱うかを学びます。

AJAXリクエストの処理

前述のように、RichFacesは、AJAXコードを実装しなくても、WebアプリケーションでAJAX機能を有効にするリッチUIコンポーネントを提供します。これらすべてのAJAX機能は、 a4：j タグライブラリを介して導入されます。 <a4j：commandLink>、<a4j：commandButton>、<a4j：support> 、および <a4j：poll> は、開発者がWebアプリケーションにAJAX機能を含めるのに役立つ4つのタグです。タグライブラリの詳細については、後続の章で説明します。

部分的なツリー処理

従来のAJAXアプリケーションでは、すべての入力フィールドはツリーの異なるノードとして処理されますが、RichFacesには、ツリーノードを部分的に送信して必要なフィールドを検証するオプションがあります。

これについてさらに理解するために例を考えてみましょう。 HTMLには、「名前」、「従業員ID」、「従業員の給与」、「従業員の住所」、「従業員部門」の合計5つの要素があるとします。次に、従業員IDのみを検証または処理します。これは、RichFacesを使用して可能ですが、AJAXを使用しては不可能です。フォーム全体をサーバーに送信する必要があります。 RichFacesは、特定のコンポーネントを識別して処理できる実行属性を提供します。使用可能な実行属性のさまざまなレベルを次に示します。

@ all -この属性はすべてのデータを処理します。
@ none -データを処理しない場合に使用できます。
@ this -これは要求側コンポーネントのみを処理します。
@ form -これは、要求元のコンポーネントを含むフォーム全体を処理します。
@ region -これはWebページの特定の領域を処理します。

部分的なビューの更新

入力フィールドと同様に、RichFacesは異なるビューを更新するための同様のオプションを提供します。開発者は、選択に応じてビューをカスタマイズできます。実行属性と同様に、実行属性と同様に機能するレンダー属性があります。これらの属性はすべて、WebページのID識別子に基づいて機能します。

使用可能なレンダーアトリビュートのさまざまなレベルを次に示します。

@ all -これにより、コンポーネント全体が更新されます。
@ none -これはコンポーネントを更新しません。
@ this -これは、要求元のコンポーネントのみを更新します。
@ from -これは、要求データを含むフォームを更新します。
@ region -これにより、Webページの特定の領域が更新されます。

その他のa4jタグ

ここまで、RichFacesアプリケーションに関する概念的なプロパティについて説明してきました。このセクションでは、実際の例を使用してそれらについて詳しく説明します。

<a4j：AJAX>

これは、RichFacesが提供するコアコンポーネントの1つです。これは、JSF2.0 f：AJAXタグの拡張部分に他なりません。このタグは、WebページでJSイベントが発生するたびにAJAXリクエストをトリガーします。次の例で、このタグについて詳しく説明します。 Webページフォルダの下に「xhtml」ページを作成し、「a4jAJAXExample.xhtml」という名前を付けます。次に、次のコードを貼り付けます。

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://xmlns.jcp.org/jsf/html"
   xmlns:a4j = "http://richfaces.org/a4j">

   <h:head>
      <title>a4j:AJAX Tag Example</title>
   </h:head>

   <h:body>
      <h:form id = "form">
         <h:inputText value = "#{managedBean.message}">
            <a4j:AJAX render = "ShowMessage"/>
         </h:inputText>

         <h:outputText value = "#{managedBean.message}" id = "ShowMessage"
            style = "animation-duration"/>
      </h:form>
   </h:body>

</html>

また、Webページからの入力を保持するために、マネージドBeanを作成する必要があります。先に進み、ソースパッケージディレクトリの下にjavaクラスを作成します。以下は managedbean.java クラスコードです。

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped

public class managedBean {
   String message;
   public String getMessage() {
      return message;
   }
   public void setMessage(String message) {
      this.message = message;
   }
}

両方のファイルを保存して実行すると、ブラウザーに次の出力が生成されます。

Hello Buddy

<a4j：param>

a4j：paramはf：paramタグの拡張です。プロパティまたはインスタンス変数に値を割り当てるために使用されます。このタグは、インスタンス変数に値を永続的に割り当てることができます。以下は「a4jparamExamplel」コードです。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://xmlns.jcp.org/jsf/html"
   xmlns:a4j = "http://richfaces.org/a4j">

   <h:head>
      <title>Param tag example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>
   </h:head>

   <h:body>
      <h:form id = "form">
         <h:panelGrid columns = "2">
            <a4j:commandButton value = "finddevguides" render = "rep">
               <a4j:param value = "Tutorials point" assignTo = "#{managedBean.message}"/>
            </a4j:commandButton>

            <a4j:commandButton value = "RichFace Tutorials" render = "rep">
               <a4j:param value = "RichFace Tutorials" assignTo = "#{managedBean.message}"/>
            </a4j:commandButton>
         </h:panelGrid>
         <br/>

         <h:outputText id = "rep" value = "Selected Name:#{managedBean.message}"/>
      </h:form>
   </h:body>

</html>

以下は、対応するマネージドBeanクラスのコードです。

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped

public class managedBean {
   String message;
   public String getMessage() {
      return message;
   }
   public void setMessage(String message) {
      System.out.println("This method is getting called with"+message);

     //we have added this line in order to check how the AJAX call
     //happens to the class methods without any direct communication
      this.message = message;
   }
}

先に進み、ファイルを実行します。以下はブラウザの出力です。

Richfaceチュートリアル

サーバーコンソールに次の出力が表示されます。これは、実行時にインスタンス変数を設定するために、xhtmlファイルがマネージドBeanと通信していることを証明しています。

Apache Tomcat

<a4j：commandButton>

前の例では、コマンドボタンタグを既に使用しています。これはxhtmlページ内にボタンを作成するために使用され、特定のリクエストを処理するためにAJAXエンジンを生成して通信します。入力を受け取り、それを処理して、Webブラウザーで出力をレンダリングします。

前の例では、「finddevguides」と「RichFaceチュートリアル」という2つのボタンを作成しました。コマンドボタンタグは、マネージドBeanと内部的に通信し、必要なインスタンス変数を設定します。また、値のレンダリングも行います。

<a4j：commandLink>

コマンドリンクは、JSF 2.0の<h：commandlink>コンポーネントのように機能します。コマンドボタンは、JSリンクイベントでコマンドリンクが機能するたびに、送信ベースのAJAX要求を生成します。これは、コマンドボタンとコマンドリンクにある唯一の違いです。次の例は、タグライブラリをよりよく理解するのに役立ちます。「a4jCommandLink.xhtml」ファイルを作成し、次のコードをそのファイルに貼り付けます。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://xmlns.jcp.org/jsf/html"
   xmlns:a4j = "http://richfaces.org/a4j">

   <h:head>
      <title>Example of command Link</title>
   </h:head>

   <h:body>
      <h:form id = "form">
         <h:panelGrid columns = "3">
            <h:outputText value = "Name:"/>
            <h:inputText value = "#{managedBean.message}"/>
             <a4j:commandLink value = "Click Me" render = "out" execute = "@form"/>
         </h:panelGrid>
      </h:form>
      <br/>

      <a4j:outputPanel id = "out">
         <h:outputText value = "Welcome to #{managedBean.message} !"/>
      </a4j:outputPanel>
   </h:body>

</html>

マネージドBeanクラスで何も変更する必要はありません。このファイルを実行すると、ブラウザに次の出力が表示されます。

Click Me

<a4j：outputPanel>

出力パネルは、HTMLページのスパンとして機能します。 Webページのさまざまなコンポーネントを個別に指定するのではなく、グループ化するために使用されます。前の例では、入力テキストボックスに提供されたメッセージを表示するために出力パネルを使用しました。以下は、出力パネルの構文です。

<a4j:outputPanel id = "out">
   <h:outputText value = "Welcome to #{managedBean.message} !"/>
</a4j:outputPanel>

<a4j：region>

これはRichFacesの重要な機能であり、Webページの一部を処理できます。このタグを使用すると、RichFacesで部分的なツリー処理が行われます。主にレンダリングプロセスを増やすために使用されます。次の例は、これを詳細に理解するのに役立ちます。次のコードを使用して「a4jregionExample.xhtml」ファイルを作成してください。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:a4j = "http://richfaces.org/a4j" >

   <h:head>
      <title>Region Example</title>
   </h:head>

   <h:body>
      <h:form>
         <h:inputText value = "#{managedBean.message}"/>
         <h:inputText value = "#{managedBean.job}"/>
         <a4j:commandLink id = "one" value = "one"/>

         <a4j:region>
            <h:inputText value = "#{managedBean.message}"/>
            <a4j:commandLink id = "two" value = "two"/>
         </a4j:region>
      </h:form>
   </h:body>

</html>

このxhtmlページとともに、managedBeanを適宜更新してください。

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped

public class managedBean {
   String message;
   String job;
      public String getMessage() {
      return message;
   }
   public void setMessage(String message) {
      System.out.println("setMessage method is getting called with--"+message);
      this.message = message;
   }
   public String getJob() {
      return job;
   }
   public void setJob(String job) {
      System.out.println("setJob method is getting called with--"+job);
      this.job = job;
   }
}

上記のコードは、ブラウザに次の出力を生成します。

One Two

コマンドリンク「1」をクリックすると、フォーム全体が処理されますが、コマンドリンク「2」をクリックすると、リージョンタグで囲まれているため、メッセージインスタンスのみが処理されます。同様に、コマンドリンク「1」を別のリージョンタグで囲むと、最初の2つの入力パラメーターのみが処理されます。以下は、コマンドリンク「2」がクリックされたときのサーバーコンソールのスクリーンショットです。

リンク2

コマンドリンク「1」がクリックされるたびに、以下が出力されます。

リンク2

<a4j：repeat>

繰り返しタグは、JSFの<ui：repeat>タグとまったく同じように機能します。 Webページ内のリストを反復処理するのに役立ちます。次の「a4jRepeat.xhtml」ファイルの例では、マネージドBeanクラスのリストを繰り返し処理しています。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:a4j = "http://richfaces.org/a4j">

   <h:head></h:head>

   <h:body>
      <h:form id = "form">
         <h:panelGrid columns = "1" style = "width: 640px">
            <a4j:outputPanel id = "panel" layout = "block">
               <a4j:repeat       value = "#{managedBean.subjectList}" var = "sub">
                  <li>
                     <h:outputText value = "#{sub}"/>
                  </li>
               </a4j:repeat>
            </a4j:outputPanel>
         </h:panelGrid>
      </h:form>
   </h:body>

</html>

この特定のファイルをブラウザで実行すると、次の出力が得られます。

A4 Repeat

<a4j：status>

名前が示すように、このタグは、フロントエンドでAJAXリクエストのステータスを表示する場合に役立ちます。選択に応じて、通常のテキストメッセージ、gif、または画像ベースのステータスを含めることができます。次のような小さなアプリケーションの場合、フロントエンドでステータスを垣間見ることができますが、複雑なAJAXリクエストを実行しているときは常に、このステータスは非常に目に見えます。以下に示すように「a4jregionExample.xhtml」を変更してください。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:a4j = "http://richfaces.org/a4j">

   <h:head>
      <title>Region Example</title>
   </h:head>

   <h:body>
      <h:form>
         <a4j:status startText = "Working..."/>
            <h:inputText value = "#{managedBean.message}"/>
            <h:inputText value = "#{managedBean.job}"/>
            <a4j:commandLink id = "one" value = "one"/>

            <a4j:region>
               <h:inputText value = "#{managedBean.message}"/>
               <a4j:commandLink id = "two" value = "two"/>
            </a4j:region>

         <a4j:status startText = "Done"/>
      </h:form>
   </h:body>

</html>

このアプリケーションを実行しているときはいつでも、「working …」と「Done」の2つのステータスを垣間見ることができます。これらのステータスは、リクエストが完了すると自動的に消えます。

<a4j：include>/<a4j：keepAlive>

インクルードとキープアライブ、両方のタグはRichFaces 3.0で導入されましたが、RichFaces 4では、これらのタグは<ui：include>や<ui：insert>などのFaceletsで使用される他のさまざまなタグを使用して簡単に達成できるため、減価されました名前が示すように、1つのページを別のページに含めるためにincludeが導入され、JSFページに関連付けられた管理対象Beanのスコープを制御するためにkeepAliveが導入されました。ソフトウェアAPIの更新バージョンを使用し、<UI>コンポーネントと「注釈」実装を使用してビジネス目標を達成することをお勧めします。

<a4j：log>

名前が示すように、このa4jコンポーネントは、Webブラウザーへのログ情報の生成に役立ちます。次の例で、このタグについて詳しく説明します。「a4jregionExample.xhtml」ファイルを次の方法で編集します。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:a4j = "http://richfaces.org/a4j">

   <h:head>
      <title>Region Example</title>
   </h:head>

   <h:body>
      <h:form>
         <a4j:status startText = "Working..."/>
            <h:inputText value = "#{managedBean.message}"/>
            <h:inputText value = "#{managedBean.job}"/>
            <a4j:commandLink id = "one" value = "one"/>

            <a4j:region>
               <h:inputText value = "#{managedBean.message}"/>
               <a4j:commandLink id = "two" value = "two"/>
            </a4j:region>

            <a4j:log></a4j:log>
         <a4j:status startText = "Done"/>
      </h:form>
   </h:body>

</html>

ブラウザで上記のコードを実行すると、次が出力されます。 a4j：logは、必要なときにすべてのレベルの必要なログを生成します。

A4：log

<a4j：jsFunction>

これは、JavaScriptコードなしで自動JS機能を作成できるRichFacesの最も高度な機能です。 CDKは、JSイベントに基づいて自動JavaScriptコードを生成します。

次の例では、指定した値にカーソルを合わせるたびに呼び出されるJavaScript関数を作成しています。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:a4j = "http://richfaces.org/a4j">

   <h:head>
      <title>Example of JS Function</title>
   </h:head>

   <h:body>
      <table width = "500" border = "1">
         <tbody>
            <tr>
               <td>
                  <span onmouseover = "showMySkill('core java,J2EE')"
                     onmouseout = "showMySkill('')">BackEnd developer</span>
               </td>
               <td>
                  <span onmouseover = "showMySkill('DB,RDBMS,unix')"
                     onmouseout = "showMySkill('')">Database Admin</span>
               </td>
               <td>
                  <span onmouseover = "showMySkill(
                     'JS frameworks,html,java scripts')"
                     onmouseout = "showMySkill('')">Front End Developer</span>
               </td>
            </tr>
            <tr>
               <td colspan = "3">You need to know:
                  <b><h:outputText id = "showSkillset" value = "#{managedBean.message}"/></b>
               </td>
            </tr>
         </tbody>
      </table>

      <h:form id = "form">
         <a4j:jsFunction name = "showMySkill" render = "showSkillset">
            <a4j:param name = "name" assignTo = "#{managedBean.message}"/>
         </a4j:jsFunction>
      </h:form>
   </h:body>
</html>

上記のコードは、ブラウザに次の出力を生成します。 JSイベントに応じて、CDKは「showMySkill（）」という名前のメソッドをオーバーライドし、必要な値がブラウザーに出力されます。

JSイベント

<a4j：AJAXListener>

このタグは、結果をブラウザにレンダリングする直前に特定のリスナーを実行する場合に使用されます。このタグはRichFaces 4では使用できません。同じ機能が

<rich:panel>
   <f:facet name = "header">Using a4j:actionListener</f:facet>
   <a4j:commandButton value="Submit" reRender = "#{AJAXBean.areas}">
      <a4j:AJAXListener binding = "#{AJAXBean.renderAreasListener}"/>
   </a4j:commandButton>
</rich:panel>

上記の例では、「Submit」ボタンをクリックすると、JSイベントが作成され、Beanクラス内に実装された「areas」メソッドが呼び出され、結果として対応する結果がレンダリングされます。

RichFaces-リッチスキン

RichFacesには、リッチスキンと呼ばれる一元的な方法でWebサイトのルックアンドフィールを制御する新しい機能が付属しています。スキンは古いCSSファイルの高レベルの実装であり、バックエンド開発者がWebサイトのルックアンドフィールを制御するのにより便利です。いくつかのビルトインスキンがあり、選択に応じてカスタマイズできます。

ビルトインスキン

RichFacesコンポーネントjarファイルには、多数の組み込みスキンが用意されています。以下に、組み込みのリッチスキンをいくつか示します。

デフォルト
平野
エメラルド
青空
wine
japanCherry
ruby
クラシック
deepMarine
NULL

次の例では、「クラシック」スキンを実装します。上記のスキンを実装するのは非常に簡単です。さらに先に進む前に、以下のコード行を使用して「web.xml」ファイルにスキンを追加してください。上記のリストから任意のスキンを追加できます。適切なスキン名で<param-value>タグを変更するだけです。

<context-param>
   <param-name>org.richfaces.skin</param-name>
   <param-value>classic</param-value>
</context-param>

これを追加したら、「SkinExample.xhtml」ファイルを作成し、次のコード行を追加してください。

<?xml version = '1.0' encoding = 'UTF-8' ?>
<ui:composition xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <f:view>
      <h:head>
         <title>Rich Faces Built in Skin</title>
      </h:head>

      <h:body>
         <h:form>
            <rich:panel style = "width:60%">
               <rich:tabPanel switchType = "AJAX">
                  <rich:tab header = "Name">
                     Tutorials Point
                  </rich:tab>

                  <rich:tab header = "Features">
                     Best Place to learn
                  </rich:tab>
               </rich:tabPanel>
            </rich:panel>
         </h:form>
      </h:body>

   </f:view>
</ui:composition>

このページを実行すると、ブラウザの出力が次のようになり、各タブが動的に伝播して異なる出力が生成されます。次のタブを押すと、異なる出力が表示されます。

次のタブ

上記の例では、<rich：panel>は<rich：tab>を使用してさまざまなタブを作成するパネルを作成します。 <rich：tabPanel switchType = "AJAX">は、使用されているタブのAJAX遷移を提供します。

スキンの作成/変更

スキンは、CSSデザインの拡張バージョンに過ぎず、実行時にWebページに適用されます。前のセクションでは、スキンの基本的な組み込み機能をいくつか学びました。このセクションでは、独自のスキンを作成するか、既存のスキンを変更します。 RichFacesのスキンは、次の3つのレベルでカスタマイズできます。

スキンプロパティファイル-すべてのスキンは、「rechfaces-a4j-4.5.17.Final」jarファイルに記載されているさまざまなプロパティファイルを介して生成されます。必要なのは、同じプロパティファイルを作成し、それをソースフォルダーの下に保持し、そのプロパティを編集することだけです。それに応じて「web.xml」を変更して、Webサイトの新しいスキンプロパティを反映する必要があります。

コンポーネントスタイルシート-選択した新しいCSSファイルを実装し、アプリケーションで使用します。

スタイルクラスの上書き-スタイルプロパティをxhtmlファイルに直接言及することにより、スタイルを上書きできます。

例を考えてみましょう。以前の「クラシック」スキンをカスタマイズします。「ソース」パッケージ内にプロパティファイルを作成し、「custom.skin.properties」という名前を付けます。上記のjarファイルで利用可能な他のプロパティファイルからコピーされたこのプロパティファイルのエントリを次に示します。

#Colors
headerBackgroundColor = #black
headerGradientColor = #DF5858
headerTextColor = #FFFFFF
headerWeightFont = bold

generalBackgroundColor = #f1f1f1
generalTextColor = #000000
generalSizeFont = 10px
generalFamilyFont = Arial, Verdana, sans-serif

controlTextColor = #000000
controlBackgroundColor = #ffffff
additionalBackgroundColor = #F9E4E4

shadowBackgroundColor = #000000
shadowOpacity = 1
panelBorderColor = #C0C0C0
subBorderColor = #ffffff

tabBackgroundColor = #EDAEAE
tabDisabledTextColor = #C47979
trimColor = #F7C4C4
tipBackgroundColor = #FAE6B0
tipBorderColor = #E5973E

selectControlColor = #FF9409
generalLinkColor = #CF0000
hoverLinkColor = #FF0000
visitedLinkColor = #CF0000

# Fonts
headerSizeFont = 11px
headerFamilyFont = Arial, Verdana, sans-serif
tabSizeFont = 11
tabFamilyFont = Arial, Verdana, sans-serif
buttonSizeFont = 11
CHAPTER 11 ■ SKINS 223
buttonFamilyFont = Arial, Verdana, sans-serif

tableBackgroundColor = #FFFFFF
tableFooterBackgroundColor = #cccccc
tableSubfooterBackgroundColor = #f1f1f1
tableBorderColor = #C0C0C0
tableBorderWidth = 1px

#Calendar colors
calendarWeekBackgroundColor = #f5f5f5
calendarHolidaysBackgroundColor = #FFF1F1
calendarHolidaysTextColor = #980808
calendarCurrentBackgroundColor = #808080
calendarCurrentTextColor = #ffffff
calendarSpecBackgroundColor = #f1f1f1
calendarSpecTextColor = #000000

warningColor = #FFE6E6
warningBackgroundColor = #FF0000
editorBackgroundColor = #F1F1F1
editBackgroundColor = #FEFFDA

#Gradients
Gradient Type = plain

スキルレベルに応じて、このプロパティファイルの属性を変更できます。新しいスタイルクラスを追加したり、既存のクラスを編集したりできます。新しいプロパティファイルの作成が完了したら、「web.xml」ファイルに同じプロパティファイルを追加します。以下は、「web.xml」のエントリです。これは、スキンを指している必要があります。

<context-param>
   <param-name>org.richfaces.skin</param-name>
   <param-value>custom</param-value>
</context-param>

注-新しいプロパティファイルがソースディレクトリ内に存在することを確認してください。存在しない場合、「NoClassFound Exception」というランタイムエラーがスローされます。

先に進み、「SkinExample.xhtml」という名前の以前のファイルを実行します。次に、ブラウザの出力を示します。新しいプロパティファイルがruby.propertiesファイルからコピーされたため、Webサイト全体の外観が「Ruby」に変更されたことを確認できます。

修正スキンの作成

実行時にスキンを変更する

この例では、実行時にスキンを変更します。次のようなスキンクラスを作成します。

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped

public class skinBean {
   private String skin;
   public skinBean() {
      this.skin="plane";
   }
   public String getSkin() {
      return skin;
   }
   public void setSkin(String skin) {
      this.skin = skin;
   }
}

次に、「web.xml」ファイルを次のように変更して、実行時にスキン名を入力します。

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

その後、JSFアプリケーションの構成ファイルを変更する必要があります。ファイルはweb-INFフォルダーの下にあります。次のBeanプロパティを追加します。

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

   <managed-property>
      <property-name>skin</property-name>
      <value>plain</value>
   </managed-property>
</managed-bean>

以下はxhtmlファイルのコードです。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:rich = "http://richfaces.org/rich">

   <h:head>
      <title>TODO supply a title</title>
   </h:head>

   <h:body>
      <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 = "deepMarine" itemValue = "deepMarine"/>
            </h:selectOneRadio>
         </div>

         <div style = "display: block; float: left">
            <rich:panel >
               <rich:panelMenu style = "font-family: monospace; font-size: 12;">
                  Changing skin in runtime
               </rich:panelMenu>

               <rich:panelMenu  style = "font-family: monospace; font-size: 12;">
                  This is a result of the modification "blueSky" skin
               </rich:panelMenu>
            </rich:panel>
         </div>
      </h:form>
   </h:body>

</html>

上記のコードは、ブラウザに次の出力を生成します。

プレーン

上記の例では、最初に「プレーン」を選択しているため、プレーンを指しています。ラジオボタンを介して伝播すると、それに応じて色が変わります。 Richfaces-input-components

RichFaces-出力コンポーネント

前の章では、ユーザーがブラウザーから入力を提供するのに役立つさまざまな入力フィールドまたはタグについて学習しました。この章では、RichFacesが提供するさまざまな出力コンポーネントについて学習します。

<リッチ：パネル>

前の例のいくつかでは、すでにpanelタグに出くわしました。 <rich：panel>は、Webページ内に長方形の領域を作成します。これには情報が含まれる場合があります。 1つのパネル内に他のパネル、画像、およびその他の豊富なコンポーネントを含めることができます。

次の例では、選択に応じてカスタムパネルを作成し、「header」属性を使用してパネルにヘッダーを提供します。 xhtmlファイルを作成し、「richPanelExamlple.xhtml」という名前を付けてください。その中に次のコードを配置します。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <h:head>
      <title>Panel Example</title>
   </h:head>

   <h:body>
      <rich:panel header = "RichFace Tutorials " style = "font-size: 500px;
         align-items:center; background-color: activecaption">

         RichFace Tutorials Presented by finddevguides.com.
      </rich:panel>
   </h:body>
</html>

上記のコードは、ブラウザに次の出力を生成します。

リッチパネル

<rich：simpleTogglePanel>

simpleTogglePanelは、開発者がパネルの内容を動的に変更する機会を提供します。ただし、RichFaces 4では、このタグは抑制されています。 JBossは、<rich：togglePanel>、<rich：tab>、<rich：tabPanel>などの高度なタグを導入しました。より多くの機能を使用するには、RichFacesタグの更新バージョンを使用することをお勧めします。まだRichFaces 3を使用している場合は、次のタグを使用できます。

<ui:composition xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <rich:simpleTogglePanel switchType = "client" label = "SimpleToggle">
      The simple example of SimpleToggle tag
   </rich:simpleTogglePanel>
</ui:composition>

<rich：tabPanel>

このタグは、開発者がパネル内にさまざまなタブを作成するのに役立ちます。スキンの章でこのタグを使用し、別のパネル内に2つの個別のタグを作成しました。次のコードでは、<rich：tabPanel>の使用方法を説明します。

<?xml version = '1.0' encoding = 'UTF-8' ?>
<ui:composition xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <f:view>
      <h:head>
         <title>Rich Faces Tab Example</title>
      </h:head>

      <h:body>
         <h:form>
            <rich:panel style = "width:60%">

               <rich:tabPanel switchType = "AJAX">
                  <rich:tab header = "Name">
                     Tutorials Point----This is Tab Number 1
                  </rich:tab>

                  <rich:tab header = "Features">
                     Best Place to learn -------This is Tab Number 2
                  </rich:tab>
               </rich:tabPanel>
            </rich:panel>

         </h:form>
      </h:body>

   </f:view>
</ui:composition>

この例では、「Name」と「Features」という異なるヘッダーを持つ2つのタブを作成しました。これらの2つのタグは、<rich：panel>内に作成されます。上記のコードは次の出力を生成します。

リッチタブパネル

<rich：panelBar>

simpleToggleBarと同様に、開発者はJSイベントに応じて垂直切り替えを実装できます。このタグはRichFaces 4でも抑制されます。ただし、RichFaces 3.0を使用している場合は、次のように使用できます。 .

<ui:composition xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <rich:panelBar height = "400" width = "500">
      <rich:panelBarItem   label = "Toggle1”>
         First vertical toggle
      </rich:panelBarItem>

      <rich:panelBarItem  label = ”Toggle2”>
         Second Vertical Toggle
      </rich:panelBarItem>
   </rich:panelBar >

</ui:composition >

RichFaces 4では、<rich：PanelMenu>タグを使用して同じ機能が実装されています。

<rich：tab>

このタグについてはすでによく知っています。 <rich：tabPanel>の例では、このタグを使用してさまざまなタブを作成しています。次の例では、2つのタグを作成しました。

<?xml version = '1.0' encoding = 'UTF-8' ?>
<ui:composition xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <f:view>
      <h:head>
         <title>Rich Faces Tab Example</title>
      </h:head>

      <h:body>
         <h:form>

            <rich:panel style = "width:60%">
               <rich:tabPanel switchType = "AJAX">
                  <rich:tab header = "Name">
                     Tutorials Point----This is Tab Number 1
                  </rich:tab>

                  <rich:tab header = "Features">
                     Best Place to learn -------This is Tab Number 2
                  </rich:tab>
               </rich:tabPanel>
            </rich:panel>

         </h:form>
      </h:body>

   </f:view>
</ui:composition>

上記のコードは、ブラウザに次の出力を生成します。

リッチタブ

<rich：panelMenu>

パネルメニューは、開発者がパネル領域内に垂直ドロップダウントグルを作成するのに役立ちます。次の例は、このタグをよりよく理解するのに役立ちます。「richPanelMenu.xhtml」ファイルを作成し、その中に次のコードを配置します。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <h:head>
      <title>Panel Menu example</title>
   </h:head>

   <h:body>
      <h:form id = "form">
         <h:panelGrid columns = "2" columnClasses = "cols,cols" width = "400">
            <rich:panelMenu style = "width:200px">

               <rich:panelMenuGroup label = "Group 1">
                  <rich:panelMenuItem label = "Database" action = "#{managedBean.subjectList}">
                     <f:param name = "current" value = "DB"/>
                  </rich:panelMenuItem>

                  <rich:panelMenuItem label = "Oracle" action = "#{managedBean.subjectList}">
                     <f:param name = "current" value = "Oracle"/>
                  </rich:panelMenuItem>

                  <rich:panelMenuItem label = "JAVA" action = "#{managedBean.subjectList}">
                     <f:param name = "current" value = "JAVA"/>
                  </rich:panelMenuItem>
               </rich:panelMenuGroup>

            </rich:panelMenu>
         </h:panelGrid>
      </h:form>
   </h:body>

</html>

上記の例に見られるように、panelMenuには、異なる方法で役立つ他のいくつかの関連タグが付属しています。 <panelGrid>は、パネル内にグリッドを作成するのに役立ちます。 <panelMenuGroup>は、移入するさまざまなコンポーネントをグループ化するのに役立ちます。<panelMenuItem>は、ブラウザにレンダリングされる実際のアイテムです。「アクション」属性を使用すると、選択したアイテムに応じて異なるアクションメソッドを呼び出すことができます。「ラベル」属性は、フロントエンドに値を設定するために使用され、指定されたアクションクラスが呼び出されると、レンダリングされた値がバックエンドに処理されます。

上記のコードは、ブラウザに次の出力を生成します。

リッチパネルメニュー

<rich：TogglePanel>

このタグは、トグル制御メソッドを使用して切り替えたり切り替えたりできるさまざまな出力をレンダリングするために使用されます。このトグル制御方法は、実装またはカスタマイズできます。次の例では、このメソッドを実装します。

xhtmlファイルを作成し、「richTogglePanel.xhtml」という名前を付けます。その中に次のコードを配置します。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <h:head>
      <title>Rich Toggle Panel Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>
   </h:head>

   <h:body>
      <h:form id = "form">
         <rich:togglePanel id = "panel1" activeItem = "item1"
            itemChangeListener = "#{panelMenuBean.updateCurrent}">

            <rich:togglePanelItem name = "item1">
               <p>Content of the toggle 1</p>
            </rich0:togglePanelItem>

            <rich:togglePanelItem name = "item2">
                <p>Content of the toggle 2</p>
            </rich:togglePanelItem>
         </rich:togglePanel>

         <a4j:outputPanel id = "tabs" layout = "block">
            <a4j:outputPanel layout = "block" styleClass = "tabDiv">
               <rich:toggleControl event = "click" targetPanel = "panel1" targetItem = "item1"/>
               <a4j:commandButton value = "Toggle1"/>
            </a4j:outputPanel>

            <a4j:outputPanel layout = "block" styleClass = "tabDiv">
               <rich:toggleControl event = "click" targetPanel = "panel1" targetItem = "item2"/>
               <a4j:commandButton value = "Toggle2"/>
            </a4j:outputPanel>
         </a4j:outputPanel>

      </h:form>
   </h:body>

</html>

また、Webサイトの移行を制御するBeanクラスを作成する必要があります。次のように「MenuBean.java」クラスを作成します。

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.richfaces.event.ItemChangeEvent;

@ManagedBean
@ViewScoped

public class MenuBean {
   private String current;
   private boolean singleMode;

   public boolean isSingleMode() {
      return singleMode;
   }
   public void setSingleMode(boolean singleMode) {
      this.singleMode = singleMode;
   }
   public String getCurrent() {
      return this.current;
   }
   public void setCurrent(String current) {
      this.current = current;
   }
   public void updateCurrent(ItemChangeEvent event) {
      setCurrent(event.getNewItemName());
   }
}

上記のコードは、ブラウザに次の出力を生成します。

リッチトグルパネル

上記の例では、ユーザーがクリックしたボタンに応じて、Webページのコンテンツが変更されます。「updateCurrent（）」は、JSイベントコンテンツを処理し、外出先でWebサイトのコンテンツを設定するメソッドです。

<rich：toolBar>

toolBarは、パネルに水平バーを作成するために使用されます。 Webページでトップレベルメニューを作成するために使用されます。次の例では、Webページでこのタグを使用する方法を学習します。「xhtml」ファイルを作成し、「toolbar.xhml」という名前を付けます。次のコードを配置します。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <h:head>
      <title>ToolBar Example</title>
   </h:head>

   <h:body>
      <rich:panel>
         <rich:toolbar height = "26" itemSeparator = "grid">
            <rich:toolbarGroup location = "left">
               <h:commandButton styleClass = "barsearchbutton"
                  onclick = "return false;" value = "TAB"/>
            </rich:toolbarGroup>

            <rich:toolbarGroup location = "left">
               <h:commandButton styleClass = "barsearchbutton"
                  onclick = "return false;" value = "TAB2"/>
            </rich:toolbarGroup>

            <rich:toolbarGroup location = "left">
               <h:commandButton styleClass = "barsearchbutton"
                  onclick = "return false;" value = "TAB3"/>
            </rich:toolbarGroup>
         </rich:toolbar>

      </rich:panel>
   </h:body>

</html>

上記のコードは、ブラウザに次の出力を生成します。

リッチツールバー

上記の例では、<toolbarGroup>タグを使用して、さまざまな同じタイプのツールをグループ化します。任意の数のグループを作成できます。 Locationは、ボタンが配置されるWebページの位置を提供します。

<rich：separator>

名前が示すように、Webページ上の異なるコンポーネントを分離するために使用されます。このタグはRichFaces 4では抑制されていますが、RichFaces 3をまだ使用している場合は、次のタグを使用できます。

<rich:separator lineType = "beveled" height = "8" width = "75%" align = "center"/>
<p>Here is more examples of different line types:</p>

<rich:separator height = "2" lineType = "dotted"/><br/>
<rich:separator height = "2" lineType = "dashed"/><br/>
<rich:separator height = "4" lineType = "double"/><br/>
<rich:separator height = "2" lineType = "solid"/><br/>

上記の例で、LineTypeは、使用するセパレーターのタイプを決定するのに役立つ属性です。これらのセパレータ名はすべて、本質的にほとんど自己記述的です。

<rich：Spacer>

Spacerは、開発者が2つのコンポーネント間にスペースを提供するのに役立つ自己記述型のタグです。このタグは、他のタグとともにRichFaces4でも抑制されますが、RichFaces 3を使用している場合は、次のコードを使用できます。

<rich:spacer width = "1" height = "5" title = "Here is a spacer..."/>

<rich：modalPanel>

モーダルパネルは、外出先でポップアップを表示するために使用されます。 RichFaces 4では、モーダルパネルタグが popupPanel に変更されました。次の例では、どのように機能するかを確認します。 xhtmlファイルを作成し、「PopingUp.xhtml」という名前を付けます。次のコードをそこに配置します。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <h:head>
      <title>ModalPanel and popupPanel</title>
   </h:head>

   <h:body>
      <h:form>
         <h:commandButton value = "Click ME">
            <rich:componentControl target = "popup" operation = "show"/>
         </h:commandButton>

         <rich:popupPanel id = "popup" modal = "true" autosized = "false"
            resizeable = "false">

            Hey !!!
            How are you?
         </rich:popupPanel>
      </h:form>
   </h:body>

</html>

上記の例では、「ClickMe」ボタンをクリックすると、次の出力が生成されます。

リッチモーダルパネル

RichFaces-反復コンポーネント

前の章では、さまざまな入力コンポーネントと出力コンポーネントについて学習しました。この章では、Webサイトのさまざまなデータ構造を反復処理する方法を学習します。

<rich：dataTable>

このタグは、Webサイトで結果としてテーブルをレンダリングするために使用されます。次の例では、プロ効率レベルとともにサブジェクトテーブルをレンダリングします。

<?xml version = '1.0' encoding = 'UTF-8' ?>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <h:head>
      <title>Rich Data Table</title>
   </h:head>

   <h:body>
      <h:form>
         <rich:dataTable value = "#{subject.subjectListObj}" var = "record" >
            <f:facet name = "header">
               <h:outputText value = "My Profile"/>
            </f:facet>

            <rich:column>
               <f:facet name = "header">Subject Name</f:facet>
               <h:outputText value = "#{record.subjectName}"/>
            </rich:column>

            <rich:column>
               <f:facet name = "header">efficiency Level</f:facet>
               <h:outputText value = "#{record.efficiency}"/>
            </rich:column>
         </rich:dataTable>
      </h:form>
   </h:body>

</html>

リストをレンダリングするには、subject.javaを適宜変更する必要があります。以下は、subject.javaの例です。

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped

public class Subject {
   String SubjectName;
   private String efficiency;

   private List<Subject> subjectListObj=new ArrayList<>();
      public Subject() {
   }
   public Subject(String SubjectName,String efficiency ) {
      this.SubjectName = SubjectName;
      this.efficiency= efficiency;
   }
   public String getSubjectName() {
      return SubjectName;
   }
   public void setSubjectName(String SubjectName) {
      this.SubjectName = SubjectName;
   }
   public List<Subject> getSubjectListObj() {
      subjectListObj.add(new Subject("JAVA","Expert"));
      subjectListObj.add(new Subject("DOTNET","NA"));
      subjectListObj.add(new Subject("JAVA Script","Expert"));
      subjectListObj.add(new Subject("Web Service","Expert"));
      subjectListObj.add(new Subject("Consulting","Expert"));
      return subjectListObj;
   }
   public void setSubjectListObj(List<Subject> subjectListObj) {
      this.subjectListObj = subjectListObj;
   }
   public String getEfficiency() {
      return efficiency;
   }
   public void setEfficiency(String efficiency) {
      this.efficiency = efficiency;
   }
}

上記の例では、ブラウザに次の出力が生成されます。

リッチデータテーブル

<リッチ：dataDefinitionList>

これは、モデルからデータ定義を生成するために使用されるタグです。 RichFaces 4の発明以来、このタグはJBossでサポートされていません。まだRichFaces 3を使用している場合は、次の方法でこのタグを使用できます。

<rich:dataDefinitionList var = "car" value = "#{dataTableScrollerBean.allCars}"
   rows = "5" first = "4" title = "Cars">

   <f:facet name = "term">
      <h:outputText value = "#{car.make} #{car.model}"></h:outputText>
   </f:facet>

   <h:outputText value = "Price:" styleClass = "label"></h:outputText>
   <h:outputText value = "#{car.price}"/><br/>
   <h:outputText value = "Mileage:" styleClass = "label"></h:outputText>
   <h:outputText value = "#{car.mileage}"/><br/>
</rich:dataDefinitionList>

上記の例では、「dataTableScrollerBean」は車のさまざまな値を生成するために使用されるJavaクラスです。これは、<datatable>タグを使用して一連のオブジェクト値を設定した前のタグに似ています。

<rich：dataOrderedList>

RichFaces 4は、RichFaces 3から大幅に緩和されました。 <dataOrderedList>は、リストを順序付けて表示するために使用されるタグです。これもRichFaces 4では抑制されます。これは、Javaで行う場合、オブジェクトまたはリストの順序付けがはるかに簡単で時間もかからないためです。アプリケーションがRichFaces 3を使用する場合、このタグを次の方法で使用できます。

<rich:panel style = "width:500px">
   <f:facet name = "header">
      Using rich:dataOrderedList
   </f:facet>

   <rich:dataOrderedList value = "#{airlinesBean.airlines}" var = "air">
      #{air.name}, #{air.code}
   </rich:dataOrderedList>
</rich:panel>

上記の例では、「airlinesBean」は「airlinesBean（）」という名前のメソッドを持つJava Beanクラスです。このメソッドは、タイプ「air」のオブジェクトを返します。後で、このairオブジェクトを使用して、さまざまなプロパティをテーブル形式で設定できます。

<rich：dataList>

タグ名が示すように、このタグは、順序付けられていないリストをブラウザーにレンダリングするために使用されます。ただし、<orderedList>と同様に、このタグはRichFacesの最新バージョンでも抑制されています。次の方法で<a4j：Repeat>および<rich：dataTable>タグを使用して、ブラウザーにリストを簡単にレンダリングできます。

<a4j:repeat value = "#{managedBean.subjectList}" var = "sub">
   <h:outputText value = "#{sub}"/>
</a4j:repeat>

上記の例では、「subjectList（）」というメソッドの出力であるリストをレンダリングしています。アプリケーションがRichFaces 3で構築されている場合、このタグを次のように使用できます。

<rich:panel style = "width:500px">
   <f:facet name = "header">
      Using rich:dataList
   </f:facet>

   <rich:dataList value = "#{airlinesBean.airlines}" var = "air">
      #{air.name}, #{air.code}
   </rich:dataList>
</rich:panel>

<rich：dataGrid>

<datatable>タグを使用すると、リストをテーブルとしてレンダリングできますが、<dataGrid>はオブジェクトまたはリストのレンダリングに役立ちます。前の<rich：datatable>の例では、次のようにxhtmlページを変更するだけで、同じものの出力を確認できます。

<?xml version = '1.0' encoding = 'UTF-8' ?>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <h:head>
      <title>Rich Data Table</title>
   </h:head>

   <h:body>
      <h:form>
         <rich:panel>
            <rich:dataGrid value = "#{subject.subjectListObj}" var = "record"
               columns = "2" elements = "4" first = "1" >

               <f:facet name = "header">
                  <h:outputText value = "My Profile"/>
               </f:facet>

               <rich:panel>
                  <rich:column>
                     <f:facet name = "header">Subject Name</f:facet>
                     <h:outputText value = "#{record.subjectName}"/>
                  </rich:column>

                  <rich:column>
                     <f:facet name = "header">efficiency Level</f:facet>
                     <h:outputText value = "#{record.efficiency}"/>
                  </rich:column>
               </rich:panel>

            </rich:dataGrid>
         </rich:panel>
      </h:form>
   </h:body>

</html>

上記のコードは、ブラウザに次の出力を生成します。

リッチデータグリッド

<rich：datascroller>

このタグは、テーブルデータの入力中にスクロールバーを作成するのに役立ちます。これは、JSFのページネーション機能にかなり似ています。前のdataTableの例を次の方法で変更します。

<?xml version = '1.0' encoding = 'UTF-8' ?>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <h:head>
      <title>Rich Data Table</title>
   </h:head>

   <h:body>
      <h:form>
         <rich:dataTable value = "#{subject.subjectListObj}" var = "record"
            rows = "3" id = "MyTable">

            <f:facet name = "header">
               <h:outputText value = "My Profile"/>
            </f:facet>

            <rich:column>
               <f:facet name = "header">Subject Name</f:facet>
               <h:outputText value = "#{record.subjectName}"/>
            </rich:column>

            <rich:column>
               <f:facet name = "header">efficiency Level</f:facet>
               <h:outputText value = "#{record.efficiency}"/>
            </rich:column>
         </rich:dataTable>

         <rich:dataScroller for = "MyTable" maxPages = "3">
            <f:facet name = "first">
               <h:outputText value = "1"/>
            </f:facet>

            <f:facet name = "last">
               <h:outputText value = "eof"/>
            </f:facet>
         </rich:dataScroller>
      </h:form>
   </h:body>

</html>

上記の例では、スタイルを追加して見た目を良くすることができます。異なるファセット値を持つ個別の<dataScroller>タグを実装しました。上記のファイルの出力は次のとおりです。テーブルとデータスクローラーを同期するには、スタイルのシアー属性を更新します。

Rich Datascroller

RichFaces-選択コンポーネント

この章では、RichFaces Technologyが提供するさまざまな選択コンポーネントについて学習します。

<rich：pickList>

このタグを使用して、入力されたリストから1つの値を選択できます。また、リストコンポーネントを別のリストに追加および削除することもできます。次の例は、これがどのように機能するかを示しています。先に進んで1つのxhtmlファイルを作成し、「pickListExample.xhtml」という名前を付けて、次のコードをその中に配置します。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns  =  "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <h:head>
      <title>PickList Example</title>
   </h:head>

   <h:body>
      <h:form>
         <h:outputText value  =  "Pick List Example"/>
         <br/>
         <br/>

         <rich:pickList value = "#{managedBean.subjectList}"
            sourceCaption = "SubjectList"
            targetCaption = "Selected Subject"
            listWidth = "170px"
            listHeight = "120px"
            orderable = "true">

            <f:selectItems value = "#{managedBean.subjectList}"
               itemValue = "#{subject}" itemLabel = "#{subject.subjectName}"/>
         </rich:pickList>
      </h:form>
   </h:body>

</html>

managedBean.javaファイルを変更して、xhtmlファイルにリストコンポーネントを入力する必要があります。以下は、変更したJavaファイルのスナップショットです。

import java.util.Arrays;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped

public class managedBean {
   String message;
   String job;
   private List<String> SubjectList = Arrays.asList(
      "Richface","AJAX","JAVA","JSF","DOTNET","python");

   public String getMessage() {
      return message;
   }
   public void setMessage(String message) {
      System.out.println("setMessage method is getting called with--"+message);
      this.message = message;
   }
   public String getJob() {
      return job;
   }
   public void setJob(String job) {
      System.out.println("setJob method is getting called with--"+job);
      this.job = job;
   }
   public List<String> getSubjectList() {
      return SubjectList;
   }
   public void setSubjectList(List<String> SubjectList) {
      this.SubjectList = SubjectList;
   }
}

上記のコードは、ブラウザに次の出力を生成します。 pickListタグの「value」属性は、Beanクラスの「getSubjectList（）」に他なりません。「itemValue」はオブジェクトクラスの略語であり、対応する「itemLabel」はインスタンス値の名前です。この例では、pickListタグは「sourceCaption」と「targetCaption」という名前の2つの個別のリストを自動的に作成します。順序付け可能な属性は、ターゲットリストで選択順序を維持するために使用されます。

豊富な選択リスト

<rich：orderingList>

このタグは、リスト全体をレンダリングするために使用されます。 <orderingList>は、リストを介して伝播する機能のようなボタンを自動的に提供し、選択したアイテムの順序付けに役立ちます。次の例では、「OrderingListExample.xhtml」の次のコードを使用して1つのorderingListを作成します。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <h:head>
      <title>OrderingList Example</title>
   </h:head>

   <h:body>
      <h:form>
         <h:outputText value = "ordering List Example"/><br/><br/>
         <rich:orderingList value = "#{managedBean.subjectList}"
            itemValue = "#{subject}"
            itemLabel = "#{subject.subjectName}" >
         </rich:orderingList>
      </h:form>
   </h:body>

</html>

異なる表現のために異なるタグを使用して同じリストを再度作成するため、Beanクラスを変更する必要はありません。前の例と同様に、ここでも値属性は「getSubjectList（）」からのリスト全体を保持します。「itemValue」と「itemLabel」は、それぞれオブジェクトクラスと対応するインスタンス変数の値を保持します。

上記のコードは、ブラウザに次の出力を生成します。

Rich OrderingList

<rich：ListShuttle>

ListShuttleタグはRichFaces 3で使用できます。あるリストを介して伝播し、同じ値を別のリストに入れます。 RichFaces 4では、上記の<rich：pickList>という名前の別の新しいタグによって同じ機能を実現できるため、このタグは抑制されています。 RichFaces 3.0を使用している場合、このタグを次の方法で使用できます。

<rich:listShuttle sourceValue = "#{toolBar.freeItems}"
   targetValue = "#{toolBar.items}" var = "items" listsHeight = "150"
   sourceListWidth = "130" targetListWidth = "130"
   sourceCaptionLabel = "Available Items"
   targetCaptionLabel = "Currently Active Items"
   converter = "listShuttleconverter">

   <rich:column width = "18">
      <h:graphicImage value = "#{items.iconURI}"></h:graphicImage>
   </rich:column>

   <rich:column>
      <h:outputText value = "#{items.label}"></h:outputText>
   </rich:column>

   <a4j:support event = "onlistchanged" reRender = "toolBar"/>
   <a4j:support event = "onorderchanged" reRender = "toolBar"/>
</rich:listShuttle>

このタグを使用するのではなく、pickListを使用することは非常に便利です。2行のコードのみを記述することでpickListを使用しても同じ機能を実現できるからです。 Richfaces-menu-components

RichFaces-リッチツリー

この章では、RichFacesでのツリー処理について学習します。 RichFacesは、ツリーを作成および操作するために必要なすべてのコンポーネントを提供します。

<rich：treeNode>

このタグは、階層ツリーを作成するために使用されます。 <treeNode>内に提供される各ノードは、ツリーの子ノードになります。このタグは、<rich：tree>という別のタグとともに使用されます。ツリーの作成に使用しているすべてのインスタンス変数は、これら3つのインターフェース（* org.richfaces.model.TreeNode、org.richfaces.model.TreeDataModel、および *javax.swing.tree.TreeNode ）のいずれかを実装する必要があります。

次の例では、バックエンドから<rich：treeNode>タグを使用してツリーを作成します。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <h:head>
      <title>TreeNode Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/>
   </h:head>

   <h:body>
      <h:form>
         <rich:tree value = "#{tree.populateNode}" var = "tree">
            <rich:treeNode>
               <rich:treeModelRecursiveAdaptor>
               </rich:treeModelRecursiveAdaptor>
               <h:outputText value = "#{tree.data}"/>
            </rich:treeNode>
         </rich:tree>
      </h:form>
   </h:body>

</html>

以下は、*“ TreeNodeImpl” *インターフェースを実装する関連Javaクラスです。

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import org.richfaces.model.TreeNodeImpl;

@ManagedBean
@RequestScoped

public class Tree extends TreeNodeImpl {
   private Tree stationRoot;
   private Tree populateNode;
   private Object data;

   public Tree() {
      super();
   }
   public Tree(boolean leaf, Object data) {
      super(leaf);
      this.data = data;
   }
   public Object getData() {
      return data;
   }
   public Tree getPopulateNode() {
      if (populateNode == null) {
         String[] List_OF_Node = {
            "Frist Node", "Second Node", "Third Node", "Fourth Node", "Fifth Node"};
         stationRoot = new Tree(false, "Example Of Tree");

         for (int i = 0; i < List_OF_Node.length; i++) {
            Tree child = new Tree(true, List_OF_Node[i]);
            stationRoot.addChild(i, child);
         }
         populateNode = new Tree();
         populateNode.addChild(0, stationRoot);
      }
      return populateNode;
   }
}

上記のコードは、ブラウザに次の出力を生成します。

リッチツリー

<rich：treeModelAdaptor>

このコンポーネントは、Mapを入力として受け取り、繰り返し処理を行い、必要な出力をブラウザーに生成します。再帰マップを作成する必要があるときはいつでも、 <rich：recursiveTreeModelAdaptor> という別のタグを使用できます。

次の例は、ブラウザでプロジェクト構造をレンダリングする方法を示しています。 RichFaces 3では、これら2つのタグは<rich：treeNodeAdaptor>および<rich：recursiveTreeNodeAdaptor>で使用されます。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"
   xmlns:rich = "http://richfaces.org/rich">

   <h:head>
      <title>Tree Model and Recursive Model Example</title>
   </h:head>

   <h:body>
      <h:form id = "form">
         <rich:tree toggleType = "AJAX" var = "item" style = "max-width: 400px">
            <rich:treeModelRecursiveAdaptor roots = "#{fileSystemBean.sourceRoots}"
               nodes = "#{item.directories}">

               <rich:treeNode>
                  #{item.shortPath}
               </rich:treeNode>

               <rich:treeModelAdaptor nodes = "#{item.files}">
                  <rich:treeNode>#{item}</rich:treeNode>
               </rich:treeModelAdaptor>
            </rich:treeModelRecursiveAdaptor>

         </rich:tree>
      </h:form>
   </h:body>

</html>

この例では、2つの新しいJava Beanを作成する必要があります。以下は、必要なフォルダー名を保持するBeanクラス「FileSystemBean.java」のコードスニペットです。

import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped

public class FileSystemBean {
   private static final String SRC_PATH = "/WEB-INF";
   private List<FileSystemNode> srcRoots;

   public synchronized List<FileSystemNode> getSourceRoots() {
      if (srcRoots == null) {
         srcRoots = new FileSystemNode(SRC_PATH).getDirectories();
      }
      return srcRoots;
   }
}

以下は、プロジェクトの必要なリーフノードを保持するBeanクラス「FileSystemNode.java」のコードスニペットです。

import static com.google.common.base.Predicates.containsPattern;
import static com.google.common.base.Predicates.not;
import static com.google.common.collect.Iterables.filter;
import static com.google.common.collect.Iterables.transform;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.Set;

import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;

import com.google.common.base.Function;
import com.google.common.collect.Iterables;
import com.google.common.collect.Lists;

public class FileSystemNode {
   private static final Function<String, FileSystemNode>
      FACTORY = new Function<String, FileSystemNode>() {

      public FileSystemNode apply(String from) {
         return new FileSystemNode(from.substring(0, from.length() - 1));
      };
   };
   private static final Function<String, String>
      TO_SHORT_PATH = new Function<String, String>() {

      public String apply(String from) {
         int idx = from.lastIndexOf('/');
         if (idx < 0) {
            return from;
         }
         return from.substring(idx + 1);
      };
   };
   private String path;
   private List<FileSystemNode> directories;
   private List<String> files;
   private String shortPath;

   public FileSystemNode(String path) {
      this.path = path;
      int idx = path.lastIndexOf('/');

      if (idx != -1) {
         shortPath = path.substring(idx + 1);
      } else {
         shortPath = path;
      }
   }
   public synchronized List<FileSystemNode> getDirectories() {
      if (directories == null) {
         directories = Lists.newArrayList();

         Iterables.addAll(directories, transform(filter(
            getResourcePaths(), containsPattern("/$")), FACTORY));
      }
      return directories;
   }
   public synchronized List<String> getFiles() {
      if (files == null) {
         files = new ArrayList<String>();

         Iterables.addAll(files, transform(filter(
            getResourcePaths(), not(containsPattern("/$"))), TO_SHORT_PATH));
      }
      return files;
   }
   private Iterable<String> getResourcePaths() {
      FacesContext facesContext = FacesContext.getCurrentInstance();
      ExternalContext externalContext = facesContext.getExternalContext();
      Set<String> resourcePaths = externalContext.getResourcePaths(this.path);

      if (resourcePaths == null) {
         resourcePaths = Collections.emptySet();
      }
      return resourcePaths;
   }
   public String getShortPath() {
      return shortPath;
   }
}

上記の例では、ブラウザに次の出力が生成されます。

リッチツリーモデルアダプター Richfaces-error-handling

Richfaces-quick-guide

RichFaces-概要

長所と短所

RichFaces-基本コンセプト

AJAXリクエストの処理

部分的なツリー処理

部分的なビューの更新

その他のa4jタグ

<a4j：AJAX>

<a4j：param>

<a4j：commandButton>

<a4j：commandLink>

<a4j：outputPanel>

<a4j：region>

<a4j：repeat>

<a4j：status>

<a4j：include>/<a4j：keepAlive>

<a4j：log>

<a4j：jsFunction>

<a4j：AJAXListener>

RichFaces-リッチスキン

ビルトインスキン

スキンの作成/変更

実行時にスキンを変更する

RichFaces-出力コンポーネント

<リッチ：パネル>

<rich：simpleTogglePanel>

<rich：tabPanel>

<rich：panelBar>

<rich：tab>

<rich：panelMenu>

<rich：TogglePanel>

<rich：toolBar>

<rich：separator>

<rich：Spacer>

<rich：modalPanel>

RichFaces-反復コンポーネント

<rich：dataTable>

<リッチ：dataDefinitionList>

<rich：dataOrderedList>

<rich：dataList>

<rich：dataGrid>

<rich：datascroller>

RichFaces-選択コンポーネント

<rich：pickList>

<rich：orderingList>

<rich：ListShuttle>

RichFaces-リッチツリー

<rich：treeNode>

<rich：treeModelAdaptor>