RichFaces - Grundlegende Konzepte

In diesem Kapitel werden einige grundlegende Konzepte von RichFaces vorgestellt und erfahren, wie RichFaces mit der Verarbeitung von AJAX-Anforderungen und vielen anderen Funktionen umgeht.

AJAX-Anfrage verarbeiten

Wie bereits erwähnt, bietet RichFaces umfangreiche UI-Komponenten, die AJAX-Funktionen in der Webanwendung auch ohne Implementierung von AJAX-Codes ermöglichen. Alle diese AJAX-Funktionen werden über eingeführta4:j Tag-Bibliothek. <a4j:commandLink> , <a4j:commandButton>, <a4j:support>, und <a4j:poll>sind die vier Tags, mit denen der Entwickler AJAX-Funktionen in die Webanwendung aufnehmen kann. In einem nachfolgenden Kapitel erfahren Sie mehr über Tag-Bibliotheken.

Teilbaumverarbeitung

In einer herkömmlichen AJAX-Anwendung werden alle Eingabefelder als unterschiedliche Knoten eines Baums verarbeitet. In RichFaces haben wir jedoch die Möglichkeit, die Baumknoten teilweise zu senden und die erforderlichen Felder zu validieren.

Betrachten wir ein Beispiel, um mehr darüber zu verstehen. Angenommen, HTML enthält insgesamt fünf Elemente: "Name", "Mitarbeiter-ID", "Mitarbeitergehalt", "Mitarbeiteradresse" und "Mitarbeiterabteilung". Jetzt möchten Sie nur die Mitarbeiter-ID validieren oder verarbeiten. Dies kann mit RichFaces möglich sein, mit AJAX jedoch nicht. Sie müssen das gesamte Formular an den Server senden. RichFaces bietet ein Ausführungsattribut, mit dem eine bestimmte Komponente identifiziert und verarbeitet werden kann. Im Folgenden sind die verschiedenen Ebenen der verfügbaren Ausführungsattribute aufgeführt.

  • @all - Dieses Attribut verarbeitet alle Ihre Daten.

  • @none - Dies kann verwendet werden, wenn Sie keine Daten verarbeiten möchten.

  • @this - Dadurch wird nur die anfordernde Komponente verarbeitet.

  • @form - Dadurch wird das gesamte Formular verarbeitet, das die anfordernde Komponente enthält.

  • @region - Dadurch wird eine bestimmte Region einer Webseite verarbeitet.

Teilansicht-Updates

Wie Eingabefelder bietet RichFaces ähnliche Optionen zum Aktualisieren verschiedener Ansichten. Entwickler können die Ansicht nach ihren Wünschen anpassen. Wie das Attribut execute gibt es ein Renderattribut, das dem Attribut execute ähnlich funktioniert. Alle diese Attribute basieren auf der ID-ID einer Webseite.

Im Folgenden sind die verschiedenen Ebenen der verfügbaren Renderattribute aufgeführt.

  • @all - Dadurch wird die gesamte Komponente aktualisiert.

  • @none - Dadurch werden keine Ihrer Komponenten aktualisiert.

  • @this - Dadurch wird nur die anfordernde Komponente aktualisiert.

  • @from - Dadurch wird das Formular aktualisiert, das die anfordernden Daten enthält.

  • @region - Dadurch wird eine bestimmte Region der Webseite aktualisiert.

Andere a4j Tags

Bisher haben wir die konzeptionellen Eigenschaften der RichFaces-Anwendung erörtert. In diesem Abschnitt lernen wir sie anhand von praktischen Beispielen ausführlich kennen.

<a4j: AJAX>

Dies ist eine der Kernkomponenten von RichFaces. Dies ist nichts anderes als ein erweiterter Teil des JSF2.0 f: AJAX-Tags. Dieses Tag löst eine AJAX-Anforderung aus, wenn ein JS-Ereignis auf den Webseiten auftritt. Das folgende Beispiel beschreibt mehr über dieses Tag. Erstellen Sie eine "xhtml" -Seite unter dem Webseitenordner und nennen Sie sie "a4jAJAXExample.xhtml". Fügen Sie dann den folgenden Code ein.

<!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>

Wir müssen auch eine verwaltete Bean erstellen, um die Eingaben von der Webseite zu speichern. Erstellen Sie eine Java-Klasse im Quellpaketverzeichnis. Es folgt diemanagedbean.java Klassencode.

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;   
   }   
}

Speichern Sie beide Dateien und führen Sie sie aus, um die folgende Ausgabe im Browser zu erhalten.

<a4j: param>

a4j: param ist eine Erweiterung des Tags f: param. Es wird verwendet, um einer Eigenschaft oder einer Instanzvariablen einen Wert zuzuweisen. Dieses Tag kann der Instanzvariablen den Wert dauerhaft zuweisen. Es folgt der Code "a4jparamExample.html".

<?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 = "TutorialsPoint" 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>

Es folgt der entsprechende verwaltete Bean-Klassencode.

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;   
   }   
}

Fahren Sie fort und führen Sie die Datei aus. Es folgt die Ausgabe im Browser.

In der Serverkonsole sehen Sie nun die folgende Ausgabe, die beweist, dass die xhtml-Datei mit der verwalteten Bean kommuniziert, um die Instanzvariable zur Laufzeit festzulegen.

<a4j: commandButton>

Wir haben das Befehlsschaltflächen-Tag bereits in unserem vorherigen Beispiel verwendet. Es wird verwendet, um eine Schaltfläche innerhalb einer xhtml-Seite zu erstellen, die generiert und mit der AJAX-Engine kommuniziert, um die spezifische Anforderung zu verarbeiten. Es nimmt eine Eingabe entgegen und verarbeitet diese und rendert eine Ausgabe im Webbrowser.

Im vorherigen Beispiel haben wir zwei Schaltflächen erstellt: "TutorialsPoint" und "RichFace Tutorials". Unser Befehlsschaltflächen-Tag kommuniziert intern mit der verwalteten Bean und legt die erforderlichen Instanzvariablen fest. Es ist auch für die Wiedergabe des Wertes verantwortlich.

<a4j: commandLink>

Die Befehlsverknüpfung funktioniert wie die Komponente <h: commandlink> von JSF 2.0. Die Befehlsschaltfläche generiert eine Submit-basierte AJAX-Anforderung, wenn die Befehlsverknüpfung für das JS-Klickereignis funktioniert. Dies ist der einzige Unterschied zwischen der Befehlsschaltfläche und der Befehlsverknüpfung. Das folgende Beispiel hilft Ihnen dabei, das Tag lib besser zu verstehen. Erstellen Sie die Datei "a4jCommandLink.xhtml" und fügen Sie den folgenden Code ein.

<?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>

In der verwalteten Bean-Klasse müssen keine Änderungen vorgenommen werden. Führen Sie diese Datei aus. Im Folgenden wird die Ausgabe im Browser angezeigt.

<a4j: outputPanel>

Das Ausgabefenster fungiert als Bereich der HTML-Seite. Es wird verwendet, um verschiedene Komponenten einer Webseite zu gruppieren, anstatt sie einzeln anzugeben. Im vorherigen Beispiel haben wir das Ausgabefeld verwendet, um die im Eingabetextfeld bereitgestellte Meldung anzuzeigen. Es folgt die Syntax des Ausgabebereichs.

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

<a4j: region>

Dies ist die Hauptfunktion von RichFaces, mit der einige Teile der Webseite verarbeitet werden können. Mit diesem Tag erfolgt die teilweise Baumverarbeitung in RichFaces. Es wird hauptsächlich verwendet, um den Renderprozess zu erhöhen. Das folgende Beispiel hilft Ihnen dabei, dies im Detail zu verstehen. Bitte erstellen Sie eine Datei "a4jregionExample.xhtml" mit dem folgenden Code.

<?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>

Bitte aktualisieren Sie zusammen mit dieser xhtml-Seite unsere ManagedBean entsprechend.

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; 
   } 
}

Der obige Code liefert die folgende Ausgabe im Browser.

Wenn auf den Befehlslink "Eins" geklickt wird, wird das gesamte Formular verarbeitet. Wenn wir jedoch auf den Befehlslink "Zwei" klicken, wird nur die Nachrichteninstanz verarbeitet, da sie in einem Regions-Tag eingeschlossen ist. Wenn wir den Befehlslink 'eins' in ein anderes Regions-Tag einschließen, werden in ähnlicher Weise nur die ersten beiden Eingabeparameter verarbeitet. Es folgt der Screenshot der Serverkonsole, wenn auf den Befehlslink "zwei" geklickt wird.

Immer wenn auf den Befehlslink "Eins" geklickt wird, folgt die Ausgabe.

<a4j: wiederholen>

Das Repeat-Tag funktioniert genauso wie das <ui: repeat> -Tag von JSF. Es ist hilfreich, eine Liste auf der Webseite zu durchlaufen. Im folgenden Beispiel der Datei "a4jRepeat.xhtml" durchlaufen wir eine Liste aus unserer verwalteten Bean-Klasse.

<?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>

Sobald Sie diese bestimmte Datei im Browser ausführen, erhalten Sie die folgende Ausgabe.

<a4j: status>

Wie der Name schon sagt, ist dieses Tag immer dann nützlich, wenn Sie den Status Ihrer AJAX-Anfrage im Front-End anzeigen möchten. Sie können eine normale Textnachricht oder ein GIF oder einen bildbasierten Status nach Ihrer Wahl einfügen. Bei einer kleinen Anwendung wie der folgenden erhalten Sie einen Einblick in den Status im Front-End. Wenn Sie jedoch eine komplexe AJAX-Anforderung ausführen, ist dieser Status sehr gut sichtbar. Bitte ändern Sie die Datei "a4jregionExample.xhtml" wie unten gezeigt.

<?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>

Wann immer Sie diese Anwendung ausführen, sehen Sie zwei Status: "Funktionieren ..." und "Fertig". Diese Status verschwinden automatisch, wenn die Anforderung abgeschlossen ist.

<a4j: include> / <a4j: keepAlive>

Include und keepAlive, beide Tags wurden in RichFaces 3.0 eingeführt, aber in RichFaces 4 wurden diese Tags abgeschrieben, da diese Funktionen mit verschiedenen anderen in Facelets verwendeten Tags wie <ui: include> und <ui: insert> leicht erreichbar sind. Wie der Name schon sagt, wurde include eingeführt, um eine Seite in eine andere einzuschließen, und keepAlive wurde eingeführt, um den Umfang der mit einer JSF-Seite verknüpften verwalteten Bean zu steuern. Es wird empfohlen, die aktualisierte Version aller Software-APIs zu verwenden und die <UI> -Komponenten- und Annotation-Implementierung zu verwenden, um die Geschäftsziele zu erreichen.

<a4j: log>

Wie der Name schon sagt, hilft diese a4j-Komponente dabei, die Protokollierungsinformationen im Webbrowser zu generieren. Im folgenden Beispiel wird mehr zu diesem Tag erläutert. Bearbeiten Sie die Datei "a4jregionExample.xhtml" folgendermaßen.

<?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>

Führen Sie nun den obigen Code im Browser aus und es folgt die Ausgabe. a4j: log generiert bei Bedarf die erforderlichen Protokolle aller Ebenen.

<a4j: jsFunction>

Dies ist die fortschrittlichste Funktion von RichFaces, bei der eine automatische JS-Funktion ohne JavaScript-Code erstellt werden kann. Das CDK generiert einen automatischen JavaScript-Code basierend auf einem beliebigen JS-Ereignis.

Im folgenden Beispiel erstellen wir eine JavaScript-Funktion, die aufgerufen wird, wenn Sie mit der Maus über einen bestimmten Wert fahren.

<?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>

Der obige Code generiert die folgende Ausgabe im Browser. Abhängig vom JS-Ereignis überschreibt CDK die Methode "showMySkill ()" und die erforderlichen Werte werden im Browser gedruckt.

<a4j: AJAXListener>

Dieses Tag wird verwendet, wenn Sie einen bestimmten Listener ausführen möchten, bevor Sie das Ergebnis in den Browser rendern. Dieses Tag ist in RichFaces 4 nicht verfügbar, da dieselbe Funktionalität in verfügbar istHier können Sie bei jedem Auftreten eines JS-Ereignisses eine AJAX-Anforderung erstellen. Obwohl es ratsam ist, die aktualisierte Softwareversion zu verwenden, können Sie dieses Tag auf folgende Weise verwenden, wenn Sie weiterhin RichFaces 3 verwenden.

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

Im obigen Beispiel wird beim Klicken auf die Schaltfläche "Senden" ein JS-Ereignis erstellt, das die in der Bean-Klasse implementierte Methode "Bereiche" aufruft und das entsprechende Ergebnis als Ergebnis gerendert wird.