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.