GWT - Supporto segnalibri
GWT supporta la gestione della cronologia del browser utilizzando una classe History per la quale è possibile fare riferimento al capitolo GWT - History Class .
GWT utilizza un termine tokenche è semplicemente una stringa che l'applicazione può analizzare per tornare a uno stato particolare. L'applicazione salverà questo token nella cronologia del browser come frammento di URL.
Nel capitolo GWT - History Class , gestiamo la creazione e l'impostazione del token nella cronologia scrivendo codice.
In questo articolo, discuteremo di un widget speciale Hyperlink che esegue automaticamente la creazione di token e la gestione della cronologia e fornisce all'applicazione capacità di bookmarking.
Esempio di bookmarking
Questo esempio ti guiderà attraverso semplici passaggi per dimostrare il bookmarking di un'applicazione GWT.
I seguenti passaggi per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -
| Passo | Descrizione | 
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione . | 
| 2 | Modifica HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni invariato il resto dei file. | 
| 3 | Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata. | 
Di seguito è riportato il contenuto del descrittore del modulo modificato 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>Di seguito è riportato il contenuto del file del foglio di stile modificato 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;
}Di seguito è riportato il contenuto del file host HTML modificato 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> Bookmarking Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>Cerchiamo di avere il seguente contenuto del file Java src/com.tutorialspoint/HelloWorld.java utilizzando il quale dimostreremo il bookmarking nel codice GWT.
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
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.HorizontalPanel;
import com.google.gwt.user.client.ui.Hyperlink;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
public class HelloWorld implements EntryPoint {
   
   private TabPanel tabPanel;
   private void selectTab(String historyToken){
      /*  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);
      }
   }
   /**
    * This is the entry point method.
    */
   public void onModuleLoad() {
      /* create a tab panel to carry multiple pages */  
      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";
      Hyperlink firstPageLink = new Hyperlink("1", "pageIndex0");
      Hyperlink secondPageLink = new Hyperlink("2", "pageIndex1");
      Hyperlink thirdPageLink = new Hyperlink("3", "pageIndex2");
      HorizontalPanel linksHPanel = new HorizontalPanel();
      linksHPanel.setSpacing(10);
      linksHPanel.add(firstPageLink);
      linksHPanel.add(secondPageLink);
      linksHPanel.add(thirdPageLink);		
      /* If the application starts with no history token, 
         redirect to a pageIndex0 */
      String initToken = History.getToken();
      if (initToken.length() == 0) {
         History.newItem("pageIndex0");
         initToken = "pageIndex0";
      }		
      tabPanel.setWidth("400");
      /* add pages to tabPanel*/
      tabPanel.add(firstPage, firstPageTitle);
      tabPanel.add(secondPage,secondPageTitle);
      tabPanel.add(thirdPage, thirdPageTitle);
      /* 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) {
            selectTab(event.getValue());				
         }
      });
      selectTab(initToken);
      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(tabPanel);
      vPanel.add(linksHPanel);
      /* add controls to RootPanel */
      RootPanel.get().add(vPanel);
   }
}Una volta che sei pronto con tutte le modifiche fatte, compiliamo ed eseguiamo l'applicazione in modalità sviluppo come abbiamo fatto nel capitolo GWT - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato:
 
 
    - Ora fai clic su 1, 2 o 3. Puoi notare che la scheda cambia con gli indici. 
- Dovresti notare, quando fai clic su 1,2 o 3, l'URL dell'applicazione viene modificato e #pageIndex viene aggiunto all'URL 
- Puoi anche vedere che i pulsanti Avanti e Indietro del browser sono ora abilitati. 
- Usa il pulsante Avanti e Indietro del browser e vedrai le diverse schede selezionate di conseguenza. 
- Fare clic con il tasto destro su 1, 2 o 3. È possibile visualizzare opzioni come apri, apri in una nuova finestra, apri in una nuova scheda, aggiungi ai preferiti ecc. 
- Fare clic con il pulsante destro del mouse su 3. Scegliere aggiungi ai preferiti. Salva segnalibro come pagina 3. 
- Apri i preferiti e scegli la pagina 3. Vedrai la terza scheda selezionata. 
