GWT - Yer İşareti Desteği

GWT, GWT - Geçmiş Sınıfı bölümüne başvurabileceğiniz bir Geçmiş sınıfını kullanarak tarayıcı geçmişi yönetimini destekler .

GWT bir terim kullanır tokenbu, uygulamanın belirli bir duruma dönmek için ayrıştırabileceği bir dizedir. Uygulama bu belirteci tarayıcının geçmişine URL parçası olarak kaydedecektir.

In GWT - Tarihi Sınıf bölümde, biz kod yazarak tarihe belirteç oluşturma ve ayar kolu.

Bu makalede, token oluşturma ve geçmiş yönetimini bizim için otomatik olarak yapan ve uygulama yer imi koyma yeteneği veren özel bir widget Hyperlink'i tartışacağız.

Yer İmlerine Ekleme Örneği

Bu örnek, sizi bir GWT uygulamasının Yer İmlerine Eklemeyi göstermek için basit adımlardan geçirecektir.

GWT - Uygulama Oluştur bölümünde oluşturduğumuz GWT uygulamasını güncellemek için aşağıdaki adımlar -

Adım	Açıklama
1	GWT - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint paketinin altında HelloWorld adıyla bir proje oluşturun .
2	Değiştir HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html ve HelloWorld.java olarak aşağıda açıklanmıştır. Geri kalan dosyaları değiştirmeden tutun.
3	Uygulanan mantığın sonucunu doğrulamak için uygulamayı derleyin ve çalıştırın.

Değiştirilmiş modül tanımlayıcısının içeriği aşağıdadır 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>

Değiştirilen Stil Sayfası dosyasının içeriği aşağıdadır 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;
}

Aşağıda, değiştirilmiş HTML ana bilgisayar dosyasının içeriği verilmiştir 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>

Aşağıdaki Java dosyası içeriğine sahip olalım src/com.tutorialspoint/HelloWorld.java GWT Kodunda Yer İmlerini göstereceğimizi kullanarak.

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

Yapılan tüm değişikliklere hazır olduğunuzda, uygulamayı GWT - Uygulama Oluştur bölümünde yaptığımız gibi geliştirme modunda derleyip çalıştıralım . Başvurunuzda her şey yolundaysa, bu aşağıdaki sonucu verecektir -

Şimdi 1, 2 veya 3'e tıklayın. Sekmenin indekslerle değiştiğini fark edebilirsiniz.
1,2 veya 3'e tıkladığınızda uygulama url'sinin değiştiğini ve #pageIndex'in url'ye eklendiğini fark etmelisiniz.
Ayrıca tarayıcının geri ve ileri düğmelerinin artık etkinleştirildiğini de görebilirsiniz.
Tarayıcının geri ve ileri düğmesini kullanın ve farklı sekmelerin buna göre seçildiğini göreceksiniz.
1, 2 veya 3'e sağ tıklayın. Aç, yeni pencerede aç, yeni sekmede aç, favorilere ekle vb. Seçenekleri görebilirsiniz.
3. Sık kullanılanlara ekle'yi seçin. Yer işaretini sayfa 3 olarak kaydedin.
Sık kullanılanları açın ve 3. sayfayı seçin. Üçüncü sekmenin seçildiğini göreceksiniz.