GWT - Geschichtsunterricht

GWT-Anwendungen sind normalerweise einseitige Anwendungen, auf denen JavaScripts ausgeführt werden, und enthalten nicht viele Seiten. Daher verfolgt der Browser die Benutzerinteraktion mit der Anwendung nicht. Um die Verlaufsfunktion des Browsers nutzen zu können, sollte die Anwendung für jede navigierbare Seite ein eindeutiges URL-Fragment generieren.

GWT bietet History Mechanism um mit dieser Situation umzugehen.

GWT verwendet einen Begriff tokenDies ist einfach eine Zeichenfolge, die die Anwendung analysieren kann, um zu einem bestimmten Status zurückzukehren. Die Anwendung speichert dieses Token im Browserverlauf als URL-Fragment.

Beispielsweise würde ein Verlaufstoken mit dem Namen "pageIndex1" wie folgt zu einer URL hinzugefügt:

http://www.tutorialspoint.com/HelloWorld.html#pageIndex0

Workflow für die Verlaufsverwaltung

Schritt 1 - Aktivieren Sie die Verlaufsunterstützung

Um die GWT-Verlaufsunterstützung nutzen zu können, müssen wir zuerst den folgenden iframe in unsere Host-HTML-Seite einbetten.

<iframe src = "javascript:''"
   id = "__gwt_historyFrame"
   style = "width:0;height:0;border:0"></iframe>

Schritt 2 - Token zum Verlauf hinzufügen

Das folgende Beispiel zeigt, wie Sie dem Browserverlauf ein Token hinzufügen

int index = 0;
History.newItem("pageIndex" + index);

Schritt 3 - Token aus dem Verlauf erneut abrufen

Wenn der Benutzer die Zurück / Vorwärts-Schaltfläche des Browsers verwendet, rufen wir das Token ab und aktualisieren unseren Anwendungsstatus entsprechend.

History.addValueChangeHandler(new ValueChangeHandler<String>() {
   @Override
   public void onValueChange(ValueChangeEvent<String> event) {
      String historyToken = event.getValue();
      /* parse the history token */
      try {
         if (historyToken.substring(0, 9).equals("pageIndex")) {
            String tabIndexToken = historyToken.substring(9, 10);
            int tabIndex = Integer.parseInt(tabIndexToken);
            /* select the specified tab panel */
            tabPanel.selectTab(tabIndex);
         } else {
            tabPanel.selectTab(0);
         }
      } catch (IndexOutOfBoundsException e) {
         tabPanel.selectTab(0);
      }
   }
});

Lassen Sie uns nun die Geschichtsklasse in Aktion sehen.

Geschichtsunterricht - Vollständiges Beispiel

In diesem Beispiel werden Sie durch einfache Schritte geführt, um die Verlaufsverwaltung einer GWT-Anwendung zu demonstrieren. Führen Sie die folgenden Schritte aus, um die GWT-Anwendung zu aktualisieren, die wir in GWT - Kapitel " Anwendung erstellen" erstellt haben.

Schritt Beschreibung
1 Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert .
2 Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Lassen Sie den Rest der Dateien unverändert.
3 Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>  
   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   
   <body>
      <iframe src = "javascript:''"id = "__gwt_historyFrame"
         style = "width:0;height:0;border:0"></iframe>
      <h1> History Class Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Lassen Sie uns folgenden Inhalt der Java-Datei haben src/com.tutorialspoint/HelloWorld.java mit denen wir das Verlaufsmanagement im GWT-Code demonstrieren.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;

import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;

public class HelloWorld implements EntryPoint {

   /**
    * This is the entry point method.
    */
   public void onModuleLoad() {
      /* create a tab panel to carry multiple pages */  
      final TabPanel tabPanel = new TabPanel();

      /* create pages */
      HTML firstPage = new HTML("<h1>We are on first Page.</h1>");
      HTML secondPage = new HTML("<h1>We are on second Page.</h1>");
      HTML thirdPage = new HTML("<h1>We are on third Page.</h1>");

      String firstPageTitle = "First Page";
      String secondPageTitle = "Second Page";
      String thirdPageTitle = "Third Page";
      tabPanel.setWidth("400");
      
	  /* add pages to tabPanel*/
      tabPanel.add(firstPage, firstPageTitle);
      tabPanel.add(secondPage,secondPageTitle);
      tabPanel.add(thirdPage, thirdPageTitle);

      /* add tab selection handler */
      tabPanel.addSelectionHandler(new SelectionHandler<Integer>() {
         @Override
         public void onSelection(SelectionEvent<Integer> event) {
            /* add a token to history containing pageIndex 
             History class will change the URL of application
             by appending the token to it.
            */
            History.newItem("pageIndex" + event.getSelectedItem());
         }
      });
      
      /* add value change handler to History 
       this method will be called, when browser's 
       Back button or Forward button are clicked 
       and URL of application changes.
       */
      History.addValueChangeHandler(new ValueChangeHandler<String>() {
         @Override
         public void onValueChange(ValueChangeEvent<String> event) {
            String historyToken = event.getValue();
            /* parse the history token */
            try {
               if (historyToken.substring(0, 9).equals("pageIndex")) {
                  String tabIndexToken = historyToken.substring(9, 10);
                  int tabIndex = Integer.parseInt(tabIndexToken);
                  /* select the specified tab panel */
                  tabPanel.selectTab(tabIndex);
               } else {
                  tabPanel.selectTab(0);
               }
            } catch (IndexOutOfBoundsException e) {
               tabPanel.selectTab(0);
            }
         }
      });

      /* select the first tab by default */
      tabPanel.selectTab(0);

      /* add controls to RootPanel */
      RootPanel.get().add(tabPanel);
   }
}

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im Entwicklungsmodus kompilieren und ausführen, wie wir es im Kapitel GWT - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

  • Klicken Sie nun auf jede Registerkarte, um verschiedene Seiten auszuwählen.

  • Sie sollten beachten, dass bei Auswahl jeder Registerkarte die Anwendungs-URL geändert und #pageIndex zur URL hinzugefügt wird.

  • Sie können auch sehen, dass die Vor- und Zurück-Schaltflächen des Browsers jetzt aktiviert sind.

  • Wenn Sie die Vor- und Zurück-Schaltfläche des Browsers verwenden, werden die verschiedenen Registerkarten entsprechend ausgewählt.