Eine Seite mit einem Abschnitt einer anderen Seite aktualisieren

Mit dem Ajax-Anforderungstyp external wird das Servlet aufgefordert, einen bestimmten Bereich auf einer Seite durch einen anderen bestimmten Bereich einer zweiten Seite zu ersetzen. Wie beim Aktualisierungsanforderungstyp können Parameter an die zweite Seite übermittelt werden. Mit der Funktion 'onPreRenderFunction' können diese Parameter mit der Systemfunktion 'J2EELib.getQueryParameter' abgerufen werden.

Bei diesem Anforderungstyp können Sie einen Bereich auf der ersten Seite angeben, der aktualisiert werden soll, ein Ereignis, durch das die Anforderung ausgelöst werden soll, und optional Parameter, die mit der Anforderung zusammen übermittelt werden sollen. Anders als bei den anderen Anforderungstypen wird die externe Ajax-Anforderung an eine andere Seite übermittelt, sodass mit der Anforderung die Seite angegeben werden muss, an die die Anforderung gesendet werden soll und das zu verwendende Steuerelement auf der Seite, die statt der ersten Seite verwendet werden sollen.

Bei der Verwendung dieses Ajax-Anforderungstyps werden zwei Seiten erstellt: Führen Sie die folgenden Schritte aus, um einer Webseite eine externe Ajax-Anforderung hinzuzufügen:
  1. Erstellen Sie eine Quellenseite für die Inhalte, die auf einer anderen Seite verwendet werden sollen:
    1. Erstellen Sie eine JSP-Datei und einen JSF-Handler auf dieselbe Weise, wie Sie normalerweise eine EGL-gesteuerte Webseite erstellen würden.
    2. Fügen Sie dieser Seite eine Fensterbereichsteuerung hinzu und weisen Sie ihr eine auf der Seite eindeutige ID zu.
    3. Fügen Sie die Inhalte zur Fensterbereichsteuerung hinzu. Mit dieser Anforderung wird das Servlet angewiesen, die Inhalte von diesem Fensterbereich auf einer anderen Seite zu verwenden.
    4. Konfigurieren Sie 'onPreRenderFunction' für den JSF-Handler für die Seite so, dass die Anforderung akzeptiert wird.

      Da 'onPreRenderFunction' beim ersten Laden der Seite sowie bei jeder Ajax-Anforderung ausgeführt wird, möchten Sie möglicherweise feststellen, wodurch das Ausführen dieser Funktion ausgelöst wurde. Dies ist möglich, indem Sie den Wert des Parameters $$ajaxmode ermitteln. Wenn die Funktion infolge eines normalen Seitenladevorgangs ausgeführt wird, besitzt dieser Parameter den Wert null. Wenn die Funktion infolge einer Ajax-Anforderung ausgeführt wird, enthält der Parameter einen Wert.

      function onPreRender()
        
        if (J2EELib.getQueryParameter("$$ajaxmode") == NULL)
          //The page is loading for the first time.
          //Perform page loading operations here.
        else
          //The page is loading as the result of an AJAX request.
          //Perform AJAX updating operations here.
        end
      
      end
    5. Sobald festgestellt wurde, dass 'onPreRenderFunction' infolge einer Ajax-Anforderung aufgerufen wurde, können Sie die Steuerelemente auf der Seite durch Festlegen der Werte der an diese Steuerelemente gebundenen Variablen aktualisieren. Sie können nur die Steuerelemente in dem Fensterbereich in der Anforderung aktualisieren.
      Sie können die mit der Anforderung übergebenen Parameter mithilfe der Systemfunktion 'J2EELib.getQueryParameter()' abrufen. Wenn Sie zum Beispiel den Wert eines Textsteuerelements mit der ID nameText übergeben haben, können Sie den Wert dieses Parameters mithilfe des folgenden Codes abrufen:
      outputText = "Hello "::J2EELib.GetQueryParameter("nameText")::"!";
  2. Erstellen Sie die Zielseite, auf der die Inhalte eingefügt werden sollen:
    1. Erstellen Sie eine JSP-Datei und einen JSF-Handler auf dieselbe Weise, wie Sie normalerweise eine EGL-gesteuerte Webseite erstellen würden.
    2. Fügen Sie dieser Seite eine Fensterbereichsteuerung hinzu und weisen Sie ihr eine auf der Seite eindeutige ID zu. Die Inhalte dieses Fensterbereichs werden durch den Fensterbereich auf der Quellseite ersetzt.
    3. Fügen Sie optional JSF-Steuerelemente zum Fensterbereich hinzu. Der Fensterbereich kann leer oder mit Steuerelementen belegt sein, wenn er mithilfe der Ajax-Anforderung durch den Fensterbereich auf der Quellenseite ersetzt wird.
  3. Geben Sie das Benutzerereignis an, durch das die Ajax-Anforderung ausgelöst werden soll.

    Fügen Sie dazu ein JSF-Verhalten zu einem Eingabesteuerelement auf der Seite hinzu und wählen Sie dann ein Ereignis zum Auslösen der Anforderung aus. Die Steuerelemente mit dem Verhalten muss sich nicht in den Fensterbereichsteuerelementen befinden, aber Anforderungen können nur durch Eingabesteuerelemente ausgelöst werden.

    Sie können zum Beispiel festlegen, dass die Ajax-Anforderung auftritt, wenn der Benutzer den Fokus auf ein bestimmtes Steuerelement verschiebt. Verwenden Sie in diesem Fall das Ereignis onFocus. Um die Anforderung durchzuführen, wenn der Benutzer den Fokus von einem bestimmten Steuerelement wegbewegt, verwenden Sie das Ereignis onBlur. Weitere häufig verwendete Ereignisse sind onClick, onMouseOver und onSelect.

    1. Wählen Sie auf der Webseite das als Auslöser zu verwendende Eingabesteuerelement.
    2. Öffnen Sie, während das Steuerelement ausgewählt ist, die Sicht 'Schnelle Bearbeitung'.
    3. Wählen Sie in der Sicht 'Schnelle Bearbeitung' auf der linken Seite das Ereignis aus, zum Beispiel onBlur.
    4. Wählen Sie das Kontrollkästchen 'Vordefiniertes Verhalten verwenden' aus.
    5. Wählen Sie in der Liste 'Aktion' die Option 'Ajax-Verhalten für das angegebene Tag aufrufen' aus.
    6. Wählen Sie in der Liste 'Ziel' die ID des zu aktualisierenden Fensterbereichs aus.
    Das Verhalten zum Auslösen der Ajax-Anforderung ist nun mit dem Steuerelement verknüpft. Wenn Sie zum Beispiel ein Verhalten mit einem Eingabetextsteuerelement verknüpfen und festlegen, dass es bei dem Ereignis onBlur verwendet werden soll, kann der Code auf der Seite zum Beispiel folgendermaßen aussehen:
    <h:inputText id="nameText" value="#{myPage.name}" 
      binding="#{myPage.name_Ref}" styleClass="inputText" >
      <hx:behavior event="onblur" id="behavior1" 
        behaviorAction="get" targetAction="updatablePanel">
      </hx:behavior>
    </h:inputText>
    Das Verhalten könnte wie im folgenden Beispiel aussehen:
    Abbildung des Verhaltens in der Sicht 'Schnelle Bearbeitung'
  4. Erstellen Sie die Anforderung durch Angeben des zu aktualisierenden Fensterbereichs und der Parameter für die Anforderung:
    1. Wählen Sie auf der Zielseite die Fensterbereichsteuerung aus.
    2. Öffnen Sie, während der Fensterbereich ausgewählt ist, die Ansicht 'Eigenschaften'.
    3. Navigieren Sie in der Eigenschaftsansicht unter dem Typ der Fensterbereichsteuerung zur Registerkarte Ajax.
    4. Wählen Sie auf der Registerkarte Ajax das Kontrollkästchen Ajax-Updates zulassen aus.
    5. Klicken Sie für den Anforderungstyp auf 'Extern'.
    6. Klicken Sie unter den Anforderungstypen auf die Schaltfläche 'Klicken zum Bearbeiten der Ajax-Anforderungseigenschaften'.
    7. Wählen Sie in der Liste 'Ziel' das ID-Attribut des Fensterbereichs auf der Zielseite aus, die Sie aktualisieren möchten.
    8. Geben Sie im Feld 'URL' den relativen Pfad zur Quellenseite ein. Stellen Sie sicher, dass die richtige Erweiterung (.faces oder .jsp) für die Zielseite verwendet wird, wie im Kapitel Eine Webseite auf einem Server ausführen beschrieben.
    9. Geben Sie im Feld 'Quelle' die ID der Fenstersteuerung auf der Quellenseite ein. Die Inhalte des Fensterbereichs auf der Zielseite werden durch die Inhalte dieses Fensterbereichs ersetzt.

      Wenn Sie dieses Feld leer lassen, wird durch die Anforderung die gesamte Quellenseite abgerufen (d. h. alles innerhalb des Tags <body>), nicht nur die Fensterbereichsteuerung.

    10. Fügen Sie durch Klicken auf eine der Schaltflächen 'Parameter hinzufügen' Parameter zur Anforderung hinzu:

      Die Parameter in der Tabelle 'Vom Browser gesendete Parameterwerte' beziehen sich auf den Wert der Eingabesteuerelemente auf der Zielseite. Wenn Sie zum Beispiel den aktuellen Wert eines Eingabesteuerelements auf der Seite als Parameter übergeben möchten, fügen Sie die ID dieses Eingabesteuerelements hier hinzu.

      Die Parameter in der Tabelle 'Auf dem Server berechnete Parameterwerte' beziehen sich entweder auf die hier eingegebenen Literalwerte oder auf den Wert der Variablen im JSF-Handler der Quellenseite.

    Wenn Sie zum Beispiel den Wert eines Eingabesteuerelements auf der Seite übergeben möchten, sieht die neue Anfrage beispielsweise wie folgt aus:
    <hx:ajaxExternalRequest id="ajaxExternalRequest1" 
      target="sourcePanel" params="nameText"
      href="sourcePage.faces" soure="replacePanel">
    </hx:ajaxExternalRequest>

Wenn die Anforderung nun auf der Zielseite ausgelöst wird, wird die externe Ajax-Anforderung durch das Servlet zusammen mit allen Parametern an die Quellenseite übergeben. Das Servlet ruft die Funktion 'onPreRenderFunction' auf der Quellenseite auf. Wenn diese Funktion abgeschlossen ist, wird der Fensterbereich von der Quellenseite entfernt und auf der Zielseite eingefügt.

Beispiel

Im folgenden Beispiel werden zwei Seiten gezeigt, die, wie in diesem Kapitel beschrieben, mit einer externen Ajax-Anforderung kompatibel sind. Die Zielseite enthält eine Gruppe von Kontrollkästchen, mit denen der Benutzer einen Wert auswählen kann. Mit der Ajax-Anforderung wird dieser Wert an die Quellenseite übergeben, durch die ein Ersatzfensterbereich basierend auf dem Wert der Nachricht dargestellt wird.

Die Seite und die dazugehörige Anforderung sehen aus wie im folgenden Beispiel abgebildet:

Abbildung der Zielseite mit der Anforderung in der Eigenschaftsansicht

Im Folgenden ist der Code der Zielseite targetPage.jsp aufgeführt:

<html>
<head>
<title>targetPage</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="theme/stylesheet.css"
  title="Style">
</head>
<f:view>
<body>
<hx:scriptCollector id="scriptCollector1">

<h:form id="form1" styleClass="form">

  <h:panelGroup id="targetPanel" styleClass="panelGroup">

    <h:outputText id="promptMessage" styleClass="outputText"
      value="What is your favorite type of friut?">
    </h:outputText>
    
    <h:selectOneRadio disabledClass="selectOneRadio_Disabled"
      enabledClass="selectOneRadio_Enabled" id="fruitName"
      styleClass="selectOneRadio">
      <f:selectItem itemValue="bananas" itemLabel="bananas" />
      <f:selectItem itemValue="apples" itemLabel="apples" />
      <f:selectItem itemValue="grapes" itemLabel="grapes" />
    </h:selectOneRadio>

    <hx:behavior event="onchange" target="fruitName" 
     behaviorAction="get" targetAction="targetPanel">
    </hx:behavior>
    
  </h:panelGroup>
  
  <hx:ajaxExternalRequest id="ajaxExternalRequest1"
    target="targetPanel" href="sourcePage.faces" 
    source="sourcePanel" params="fruitName">
  </hx:ajaxExternalRequest>
    
</h:form>
</hx:scriptCollector>
</body>
</f:view>
</html>
Nachfolgend einige technische Details zur Zielseite:
  • Das Tag <h:panelGroup> steht für die JSF-Fensterbereichsteuerung, die aktualisiert wird. Es enthält das ID-Attribut targetPanel.
  • Das Tag <h:outputText> steht für eine JSF-Ausgabetextsteuerung, mit der eine statische Nachricht als Aufforderung angezeigt wird.
  • Das Tag <h:selectOneRadio> steht für eine Gruppensteuerung für JSF-Kontrollkästchen, mit der drei Optionen bereitgestellt werden. Diese Kontrollkästchengruppe besitzt das ID-Attribut fruitName, das für den mit der Anforderung zusammen übergebenen Parameter steht.
  • Mit dem Tag <hx:behavior> wird das Ereignis angegeben, mit dem die Ajax-Anforderung ausgelöst wird. Mit den Attributen des Verhaltens wird auf die ID der Fensterbereichsteuerung und der Optionsfeldgruppe verwiesen. In diesem Fall lautet das Ereignis onchange. Das bedeutet, dass die Ajax-Anforderung ausgelöst wird, wenn die Auswahl in der Optionsfeldgruppe geändert wird.
  • Mit dem Tag <hx:ajaxExternalRequest> wird die Ajax-Anforderung selbst definiert. Mit dem Attribut target dieses Tags wird auf die Fensterbereichsteuerung verwiesen und angezeigt, dass diese Anforderung ausgeführt wird, wenn das Ereignis des Fensterbereichs ausgelöst wird. Mit den anderen Attributen der Anforderung wird auf die Position auf der Quellenseite, die ID des Fensterbereichs zum Abrufen von der Quellenseite und den Parameter zum Übergeben mit der Anforderung verwiesen. In diesem Fall enthält die Anforderung die Auswahl im Kontrollkästchen als Parameter.

Nachfolgend der zu dieser Seite passende JSF-Handler targetPage.egl:

package jsfhandlers;

handler targetPage type JSFHandler
  {view = "targetPage.jsp"} 
end

Für den JSF-Handler für die Zielseite ist kein spezieller Code erforderlich. Da in diesem Beispiel eine externe Anforderung verwendet wird, wird die Anforderung an die Quellenseite weitergeleitet, sodass sie vom JSF-Handler der Seite verarbeitet wird.

Im Folgenden ist der Code der Quellenseite sourcePage.jsp aufgeführt:

<html>
<head>
<title>sourcePage</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="theme/stylesheet.css"
  title="Style">
</head>
<f:view>
<body>
<hx:scriptCollector id="scriptCollector1" 
preRender="#{sourcePage._preRender}" postRender="#{sourcePage._postRender}">

  <h:panelGroup id="sourcePanel" styleClass="panelGroup">
    <h:outputText id="text1" styleClass="outputText"
      value="#{sourcePage.message}" binding="#{sourcePage.message_Ref}">
    </h:outputText>
  </h:panelGroup>

</hx:scriptCollector>
</body>
</f:view>
</html>

Diese Seite enthält eine Fensterbereichsteuerung, die zum Ersetzen des Fensterbereichs auf der Zielseite verwendet wird. In diesem Fall enthält der Fensterbereich ein einziges Ausgabefeld, das an eine Variable im JSF-Handler der Seite gebunden ist. Die Seite sieht wie folgt aus:

Die Quellenseite im Editor und die in der Eigenschaftsansicht angezeigte Fensterbereichsteuerung

Nachfolgend der zu dieser Seite passende JSF-Handler sourcePage.egl:

package jsfhandlers;

handler sourcePage type JSFHandler
  {onPreRenderFunction = onPreRender, 
   view = "sourcePage.jsp"} 
   
   message string = "No value set";

  function onPreRender()
    if (J2EELib.getQueryParameter("fruitName") != null)
      case (J2EELib.getQueryParameter("fruitName"))
        when ("bananas")
          message = "Bananas are a yellow tropical fruit.";
        when ("grapes")
          message = "Grapes grow on vines and can be made into wine.";
        when  ("apples")
          message = "Apples grow on trees in many parts of the world";
      end
    end
  end
end

Mit der Funktion 'onPreRenderFunction' dieses JSF-Handlers wird zuerst festgestellt, ob die Funktion infolge einer Ajax-Anforderung aufgerufen wurde. Wenn dies der Fall ist, wird die Textsteuerung auf der Seite vom JSF-Handler aktualisiert, um eine Nachricht basierend auf den Werten des zusammen mit der Anforderung übergebenen Parameters anzuzeigen. Die Inhalte des Fensterbereichs auf der Quellenseite werden dann in der Anforderung verwendet, um die Inhalte des Fensterbereichs auf der Zielseite zu ersetzen.


Feedback