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