GWT - Hızlı Kılavuz

GWT nedir?

Google Web Toolkit (GWT), oluşturmak için bir geliştirme araç setidir RICH Internet Applications (RIA). İşte dikkate değer özelliklerinden bazıları -

GWT, geliştiricilere JAVA'da istemci tarafı uygulama yazma seçeneği sunar.
GWT, JAVA'da yazılan kodu JavaScript koduna derler.
GWT ile yazılmış uygulama, tarayıcılar arası uyumludur. GWT, her tarayıcıya uygun javascript kodunu otomatik olarak oluşturur.
GWT açık kaynaklıdır, tamamen ücretsizdir ve dünya çapında binlerce geliştirici tarafından kullanılmaktadır. Apache Lisansı 2.0 sürümü altında lisanslanmıştır.

Genel olarak, GWT bir framework Büyük ölçekli ve yüksek performanslı web uygulaması oluşturmak ve aynı zamanda bunların bakımı kolay olmasını sağlamak.

GWT neden kullanılmalı?

Java tabanlı olduğundan, GWT uygulaması geliştirmek için Eclipse gibi JAVA IDE'leri kullanabilirsiniz.

Geliştiriciler, kod otomatik tamamlama / yeniden düzenleme / gezinme / proje yönetimini ve tam hata ayıklama özelliği sağlayan IDEs.GWT'nin tüm özelliklerini kullanabilir. Geliştiriciler, istemci tarafı uygulamasında bir Java Uygulaması gibi hata ayıklayabilir.

GWT, Junit ve Maven ile kolay entegrasyon sağlar.
Yine Java tabanlı olan GWT, Java Geliştiricileri için düşük bir öğrenme eğrisine sahiptir.
GWT, optimize edilmiş javascript kodu üretir, tarayıcının özel javascript kodunu kendisi üretir.
GWT, bir uygulamada gerekli olan görevlerin çoğunu sağlayan Widget kitaplığını sağlar.
GWT genişletilebilir ve uygulama gereksinimlerini karşılamak için özel widget oluşturulabilir.

Her şeyin ötesinde, GWT uygulamaları Android ve iOS tabanlı telefonlar / tabletler dahil tüm büyük tarayıcılarda ve akıllı telefonlarda çalışabilir.

GWT'nin dezavantajları

GWT birçok avantaj sunsa da, aşağıdaki dezavantajlardan muzdariptir -

Not Indexable - GWT tarafından oluşturulan web sayfaları, bu uygulamalar dinamik olarak oluşturulduğundan arama motorları tarafından dizine eklenmez.
Not Degradable - Uygulamanızın kullanıcısı Javascript'i devre dışı bırakırsa, kullanıcı yalnızca temel sayfayı görür ve başka bir şey görmez.
Not Designer's Friendly - GWT, daha sonra dinamik içerik eklemek için yer tutucularla birlikte düz HTML kullanmayı tercih eden web tasarımcıları için uygun değildir.

GWT Bileşenleri

GWT çerçevesi aşağıdaki üç ana bölüme ayrılabilir -

GWT Java to JavaScript compiler- Bu, GWT'nin en önemli parçasıdır ve onu DEA'lar oluşturmak için güçlü bir araç haline getirir. GWT derleyicisi, Java'da yazılan tüm uygulama kodunu JavaScript'e çevirmek için kullanılır.
JRE Emulation library- Google Web Toolkit, Java çalışma zamanı kitaplığının bir alt kümesini taklit eden bir kitaplık içerir. Liste java.lang, java.lang.annotation, java.math, java.io, java.sql, java.util ve java.util.logging'i içerir
GWT UI building library - GWT'nin bu bölümü, gerçek UI bileşenlerini, RPC desteğini, Geçmiş yönetimini ve çok daha fazlasını içeren birçok alt bölümden oluşur.

GWT ayrıca, GWT uygulamalarınızı barındırılan modda çalıştırmanıza ve yürütmenize olanak tanıyan bir GWT Barındırılan Web Tarayıcısı sağlar; burada kodunuz Java Sanal Makinesi'nde JavaScript'te derlenmeden Java olarak çalışır.

Bu eğitim, GWT Framework ile çalışmanıza başlamak için bir geliştirme ortamını nasıl hazırlayacağınız konusunda size rehberlik edecektir. Bu eğitici ayrıca, GWT Framework'ü kurmadan önce makinenizde JDK, Tomcat ve Eclipse'in nasıl kurulacağını da öğretecektir -

Sistem gereksinimleri

GWT, JDK 1.6 veya üstünü gerektirir, bu nedenle ilk gereksinim, makinenizde JDK'nın kurulu olmasıdır.

JDK	1.6 veya üstü.
Hafıza	minimum gereklilik yok.
Disk alanı	minimum gereklilik yok.
İşletim sistemi	minimum gereklilik yok.

GWT uygulama geliştirmeye başlamak için ortamınızı ayarlamak için verilen adımları izleyin.

Adım 1 - Makinenizde Java Kurulumunu Doğrulayın

Şimdi konsolu açın ve aşağıdaki java komutunu çalıştırın.

işletim sistemi	Görev	Komut
Windows	Komut Konsolunu Aç	c: \> java sürümü
Linux	Komut Terminalini Aç	$ java sürümü
Mac	Açık Terminal	makine: ~ joseph $ java -version

Tüm işletim sistemleri için çıktıyı doğrulayalım

Sr.No.	İşletim Sistemi ve Oluşturulan Çıktı
1	Windows java sürümü "1.6.0_21" Java (TM) SE Çalışma Zamanı Ortamı (derleme 1.6.0_21-b07) Java HotSpot (TM) Client VM (derleme 17.0-b17, karma mod, paylaşım)
2	Linux java sürümü "1.6.0_21" Java (TM) SE Çalışma Zamanı Ortamı (derleme 1.6.0_21-b07) ava HotSpot (TM) Client VM (derleme 17.0-b17, karma mod, paylaşım)
3	Mac java sürümü "1.6.0_21" Java (TM) SE Çalışma Zamanı Ortamı (derleme 1.6.0_21-b07) Java HotSpot (TM) 64-Bit Sunucu VM (derleme 17.0-b17, karma mod, paylaşım)

Adım 2 - Java Geliştirme Kitini (JDK) Kurun

Java yüklemediyseniz, Java Yazılım Geliştirme Kiti'ni (SDK) Oracle'ın Java sitesinden yükleyebilirsiniz: Java SE İndirmeleri . İndirilen dosyalara JDK kurulumu için talimatlar bulacaksınız, kurulumu kurmak ve yapılandırmak için verilen talimatları izleyin. Son olarak, PATH ve JAVA_HOME ortam değişkenlerini java ve javac içeren dizine başvuracak şekilde ayarlayın, tipik olarak sırasıyla java_install_dir / bin ve java_install_dir.

Yı kur JAVA_HOMEJava'nın makinenizde kurulu olduğu temel dizin konumunu gösteren ortam değişkeni. Örneğin

Sr.No.	İşletim Sistemi ve Çıktı
1	Windows JAVA_HOME ortam değişkenini C: \ Program Files \ Java \ jdk1.6.0_21 olarak ayarlayın
2	Linux dışa aktar JAVA_HOME = / usr / local / java-current
3	Mac dışa aktar JAVA_HOME = / Kitaplık / Java / Ana Sayfa

Java derleyici konumunu Sistem Yoluna ekleyin.

Sr.No.	İşletim Sistemi ve Çıktı
1	Windows % JAVA_HOME% \ bin dizesini sistem değişkeninin, Yol'un sonuna ekleyin.
2	Linux dışa aktarma PATH =$PATH:$JAVA_HOME / bin /
3	Mac gerekli değil

Alternatif olarak, Borland JBuilder, Eclipse, IntelliJ IDEA veya Sun ONE Studio gibi bir Entegre Geliştirme Ortamı (IDE) kullanıyorsanız, IDE'nin Java'yı nereye yüklediğinizi bildiğini doğrulamak için basit bir program derleyin ve çalıştırın, aksi takdirde verilen belgeye göre uygun kurulumu yapın IDE'nin.

Adım 3 - Eclipse IDE'yi Kurun

Bu eğitimdeki tüm örnekler Eclipse IDE kullanılarak yazılmıştır. Bu nedenle, işletim sisteminize bağlı olarak makinenize Eclipse'in en son sürümünü yüklemenizi öneririm.

Eclipse IDE'yi yüklemek için, en son Eclipse ikili dosyalarını indirin https://www.eclipse.org. Kurulumu indirdikten sonra, ikili dağıtımı uygun bir konuma açın. Örneğin, Windows'ta C: \ eclipse'de veya Linux / Unix'te / usr / local / eclipse'de ve son olarak PATH değişkenini uygun şekilde ayarlayın.

Eclipse, Windows makinesinde aşağıdaki komutları çalıştırarak başlatılabilir veya eclipse.exe dosyasına çift tıklayabilirsiniz.

%C:\eclipse\eclipse.exe

Eclipse, Unix (Solaris, Linux, vb.) Makinesinde aşağıdaki komutlar çalıştırılarak başlatılabilir -

$/usr/local/eclipse/eclipse

Başarılı bir başlangıçtan sonra, her şey yolundaysa, aşağıdaki sonucu göstermelidir -

Adım 4 - Eclipse için GWT SDK ve Eklentisini Kurun

Makinenize kurulu Eclipse için GWT SDK ve Eklenti sürümünü yüklemek için Eclipse için Eklenti (SDK'lar dahil) bağlantısında verilen talimatları izleyin .

GWT eklentisi için başarılı bir kurulumdan sonra, her şey yolundaysa, aşağıdaki ekranı göstermelidir. Google icon aşağıda gösterildiği gibi kırmızı dikdörtgenle işaretlenmiştir -

Adım 5: Apache Tomcat'i Kurun

Tomcat'in son sürümünü şu adresten indirebilirsiniz: https://tomcat.apache.org/. Kurulumu indirdikten sonra, ikili dağıtımı uygun bir konuma açın. Örneğin, Windows'ta C: \ apache-tomcat-6.0.33 veya Linux / Unix'te /usr/local/apache-tomcat-6.0.33'te ve kurulum konumlarını işaret eden CATALINA_HOME ortam değişkenini ayarlayın.

Tomcat, Windows makinesinde aşağıdaki komutların çalıştırılmasıyla başlatılabilir veya basitçe startup.bat üzerine çift tıklayabilirsiniz.

%CATALINA_HOME%\bin\startup.bat
or 
/usr/local/apache-tomcat-6.0.33/bin/startup.sh

Başarılı bir başlangıçtan sonra, Tomcat ile birlikte gelen varsayılan web uygulamaları şu adrese ziyaret edilerek kullanılabilir olacaktır: http://localhost:8080/. Her şey yolundaysa, aşağıdaki sonucu göstermelidir -

Tomcat'in yapılandırılması ve çalıştırılması hakkında daha fazla bilgi burada bulunan belgelerde ve Tomcat web sitesinde bulunabilir - https://tomcat.apache.org/

Tomcat, Windows makinesinde aşağıdaki komutlar çalıştırılarak durdurulabilir -

%CATALINA_HOME%\bin\shutdown
or
C:\apache-tomcat-5.5.29\bin\shutdown

Tomcat, Unix (Solaris, Linux, vb.) Makinesinde aşağıdaki komutlar çalıştırılarak durdurulabilir -

$CATALINA_HOME/bin/shutdown.sh
or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh

GWT kullanarak gerçek "HelloWorld" uygulaması oluşturmaya başlamadan önce, bir GWT uygulamasının gerçek parçalarının neler olduğuna bakalım -

Bir GWT uygulaması, son bölüm isteğe bağlı ancak ilk üç bölüm zorunlu olan aşağıdaki dört önemli bölümden oluşur.

Modül tanımlayıcıları
Kamu kaynakları
İstemci tarafı kodu
Sunucu tarafı kodu

Tipik bir gwt uygulamasının farklı bölümlerinin örnek konumları HelloWord aşağıda gösterildiği gibi olacaktır -

İsim	yer
Proje kökü	Selam Dünya/
Modül tanımlayıcı	src / com / tutorialspoint / HelloWorld.gwt.xml
Kamu kaynakları	src / com / tutorialspoint / savaş /
İstemci tarafı kodu	src / com / tutorialspoint / istemci /
Sunucu tarafı kodu	src / com / tutorialspoint / server /

Modül Tanımlayıcıları

Modül tanımlayıcısı, bir GWT uygulamasını yapılandırmak için kullanılan XML biçimindeki yapılandırma dosyasıdır.

Bir modül tanımlayıcı dosya uzantısı * .gwt.xml'dir, burada * uygulamanın adıdır ve bu dosya projenin kökünde yer almalıdır.

Aşağıda, bir HelloWorld uygulaması için varsayılan bir modül tanımlayıcısı olan HelloWorld.gwt.xml olacaktır -

<?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 = '...'/>
   <source path = '...'/>

   <!-- specify the paths for static files like html, css etc.     -->
   <public path = '...'/>
   <public path = '...'/>

   <!-- specify the paths for external javascript files            -->
   <script src = "js-url" />
   <script src = "js-url" />

   <!-- specify the paths for external style sheet files            -->
   <stylesheet  src = "css-url" />
   <stylesheet  src = "css-url" />
</module>

Modül tanımlayıcısında kullanılan farklı bölümler hakkında kısa ayrıntı aşağıdadır.

Sr.No.	Düğümler ve Açıklama
1	<module rename-to = "helloworld"> Bu, uygulamanın adını sağlar.
2	<inherits name = "logical-module-name" /> Bu, java uygulamalarında içe aktarmanın yaptığı gibi uygulamaya diğer gwt modülünü ekler. Bu şekilde herhangi bir sayıda modül miras alınabilir.
3	<entry-point class = "classname" /> Bu, GWT Uygulamasını yüklemeye başlayacak sınıfın adını belirtir. Herhangi bir sayıda giriş noktası sınıfı eklenebilir ve bunlar modül dosyasında göründükleri sırayla sırayla çağrılır. Bu nedenle, ilk giriş noktanızın onModuleLoad () işlemi bittiğinde, bir sonraki giriş noktası hemen çağrılır.
4	<source path = "path" /> Bu, GWT derleyicisinin kaynak derlemeyi arayacağı kaynak klasörlerin adlarını belirtir.
5	<public path = "path" /> Genel yol, projenizde GWT modülünüz tarafından referans verilen CSS veya resimler gibi statik kaynakların depolandığı yerdir. Varsayılan genel yol, Modül XML Dosyası'nın depolandığı yerin altındaki genel alt dizindir.
6	<script src="js-url" /> Src ile belirtilen konumda bulunan harici JavaScript dosyasını otomatik olarak enjekte eder.
7	<stylesheet src="css-url" /> Src ile belirtilen konumda bulunan harici CSS dosyasını otomatik olarak enjekte eder.

Kamu Kaynakları

Bunların tümü, Ana Bilgisayar HTML sayfası, CSS veya resimler gibi GWT modülünüz tarafından referans verilen dosyalardır.

Bu kaynakların konumu, modül yapılandırma dosyasındaki <public path = "path" /> öğesi kullanılarak yapılandırılabilir. Varsayılan olarak, Modül XML Dosyasının depolandığı yerin altındaki genel alt dizindir.

Uygulamanızı JavaScript'te derlediğinizde, genel yolunuzda bulunan tüm dosyalar modülün çıktı dizinine kopyalanır.

En önemli genel kaynak, gerçek GWT uygulamasını çağırmak için kullanılan ana bilgisayar sayfasıdır. Bir uygulama için tipik bir HTML ana bilgisayar sayfası, hiçbir görünür HTML gövde içeriği içermeyebilir, ancak her zaman aşağıdaki gibi bir <script ... /> etiketi aracılığıyla GWT uygulamasını içermesi beklenir

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   
   <body>
      <h1>Hello World</h1>
      <p>Welcome to first GWT application</p>
   </body>
</html>

Ana sayfa sayfamıza dahil ettiğimiz örnek stil sayfası aşağıdadır -

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

İstemci Tarafı Kodu

Bu, uygulamanın iş mantığını uygulayan ve GWT derleyicisinin sonunda tarayıcının içinde çalışacak olan JavaScript'e çevirdiği gerçek Java kodudur. Bu kaynakların konumu, modül yapılandırma dosyasındaki <kaynak yol = "yol" /> öğesi kullanılarak yapılandırılabilir.

Örneğin Entry Point kod, istemci tarafı kodu olarak kullanılacak ve konumu <kaynak yol = "yol" /> kullanılarak belirtilecektir.

Bir modül entry-point atanabilir herhangi bir sınıftır EntryPointve bu parametreler olmadan oluşturulabilir. Bir modül yüklendiğinde, her giriş noktası sınıfı başlatılır veEntryPoint.onModuleLoad()yöntem çağrılır. Örnek bir HelloWorld Giriş Noktası sınıfı aşağıdaki gibi olacaktır -

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

Sunucu Tarafı Kodu

Bu, uygulamanızın sunucu tarafı kısmıdır ve çok isteğe bağlıdır. Uygulamanızda herhangi bir arka uç işlemi yapmıyorsanız, bu parçaya ihtiyacınız yoktur, ancak arka uçta bazı işlemler gerekiyorsa ve istemci tarafı uygulamanız sunucuyla etkileşime giriyorsa, bu bileşenleri geliştirmeniz gerekecektir.

Sonraki bölüm, Eclipse IDE'yi kullanarak HelloWorld uygulaması oluşturmak için yukarıda belirtilen tüm kavramlardan yararlanacaktır.

GWT'nin gücü, Write in Java, Run in JavaScriptÖrneklerimizi göstermek için Java IDE Eclipse kullanacağız.

Basit bir HelloWorld uygulamasıyla başlayalım -

Adım 1 - Proje Oluşturun

İlk adım, Eclipse IDE kullanarak basit bir Web Uygulama Projesi oluşturmaktır. Seçeneği kullanarak proje sihirbazını başlatınGoogle Icon

> New Web Application Project.... Şimdi sihirbaz penceresini kullanarak projenizi HelloWorld olarak aşağıdaki gibi adlandırın -

Seçimi kaldır Use Google App Engine çünkü onu bu projede kullanmıyoruz ve diğer varsayılan değerleri bırakıyoruz (tutun Generate Sample project code seçeneği işaretli) olduğu gibi ve Bitir Düğmesine tıklayın.

Projeniz başarıyla oluşturulduktan sonra, Proje Gezgini'nde aşağıdaki içeriğe sahip olacaksınız -

İşte tüm önemli klasörlerin kısa açıklaması

Sr.No.	Klasör ve Konum
1	src Kaynak kodu (java sınıfları) dosyaları. İstemci kullanıcı arayüzü ekranından sorumlu, istemci tarafına özgü java sınıflarını içeren istemci klasörü. Sunucu tarafı işlemeden sorumlu sunucu tarafı java sınıflarını içeren sunucu klasörü. Verileri sunucudan istemciye veya tersi yönde aktarmak için java model sınıfını içeren paylaşılan klasör. HelloWorld.gwt.xml, GWT derleyicisinin HelloWorld projesini derlemesi için gerekli olan bir modül tanımlayıcı dosyası.
2	test Kod (java sınıfları) kaynak dosyalarını test edin. Gwt istemci tarafı kodunu test etmekten sorumlu java sınıflarını içeren istemci klasörü.
3	war Bu en önemli kısımdır, gerçek konuşlandırılabilir web uygulamasını temsil eder. Derlenmiş sınıflar, gwt kitaplıkları, sunucu uygulaması kitaplıkları içeren WEB-INF. HelloWorld.css, proje stil sayfası. HelloWorld.html, GWT UI Uygulamasını çağıracak hots HTML.

Adım 2 - Modül Açıklayıcısını Değiştirin: HelloWorld.gwt.xml

GWT eklentisi, aşağıda verilen src / com.tutorialspoint / HelloWorld.gwt.xml varsayılan modül tanımlayıcı dosyası oluşturacaktır . Bu örnek için onu değiştirmiyoruz, ancak ihtiyacınıza göre değiştirebilirsiniz.

<?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.  You can change       -->
   <!-- the theme of your GWT application by uncommenting          -->
   <!-- any one of the following lines.                            -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <!-- <inherits name = 'com.google.gwt.user.theme.chrome.Chrome'/> -->
   <!-- <inherits name = 'com.google.gwt.user.theme.dark.Dark'/>     -->

   <!-- Other module inherits                                      -->

   <!-- 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>

Adım 3 - Stil Sayfasını Değiştirin: HelloWorld.css

GWT eklentisi, varsayılan bir Stil Sayfası dosyası war / HelloWorld.css oluşturacaktır . Örneğimizi en basit anlayış düzeyinde tutmak için bu dosyayı değiştirelim -

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

Adım 4 - Ana Bilgisayar Dosyasını Değiştirin: HelloWorld.html

GWT eklentisi war / HelloWorld.html varsayılan bir HTML ana bilgisayar dosyası oluşturacaktır . Örneğimizi en basit anlayış düzeyinde tutmak için bu dosyayı değiştirelim -

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Hello World</h1>
      <p>Welcome to first GWT application</p>
   </body>
</html>

Aynı kaynak dizinde HTML, CSS veya görüntüler gibi daha statik dosyalar oluşturabilir veya daha fazla alt dizinler oluşturabilir ve bu alt dizinlerde dosyaları taşıyabilir ve bu alt dizinleri uygulamanın modül tanımlayıcısında yapılandırabilirsiniz.

Adım 5 - Giriş Noktasını Değiştirin: HelloWorld.java

GWT eklentisi , uygulama için bir giriş noktası tutan varsayılan bir Java dosyası src / com.tutorialspoint / HelloWorld.java oluşturur.

Bu dosyayı "Merhaba, Dünya!"

package com.tutorialspoint.client;

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

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

Giriş noktalarını veya yardımcı rutinleri tanımlamak için aynı kaynak dizinde daha fazla Java dosyası oluşturabilirsiniz.

Adım 6 - Uygulamayı Derleyin

Yapılan tüm değişikliklere hazır olduğunuzda, projeyi derleme zamanı. Seçeneği kullanınGoogle Icon

> GWT Compile Project... GWT Derleme iletişim kutusunu aşağıda gösterildiği gibi başlatmak için -

Varsayılan değerleri olduğu gibi bırakın ve Derle düğmesini tıklayın. Her şey yolunda giderse, Eclipse konsolunda aşağıdaki çıktıyı göreceksiniz

Compiling module com.tutorialspoint.HelloWorld
   Compiling 6 permutations
      Compiling permutation 0...
      Compiling permutation 1...
      Compiling permutation 2...
      Compiling permutation 3...
      Compiling permutation 4...
      Compiling permutation 5...
   Compile of permutations succeeded
Linking into C:\workspace\HelloWorld\war\helloworld
   Link succeeded
   Compilation succeeded -- 33.029s

Adım 7 - Uygulamayı Çalıştırın

Şimdi

Uygulama çalıştır menüsüne tıklayın ve seçinHelloWorld uygulamayı çalıştırmak için uygulama.

Her şey yolundaysa, aşağıda gösterildiği gibi bir URL içeren Eclipse'de GWT Geliştirme Modunun etkin olduğunu görmelisiniz. GWT uygulamasını açmak için URL'ye çift tıklayın.

Uygulamanızı geliştirme modunda çalıştırdığınız için, tarayıcınız için GWT eklentisini yüklemeniz gerekecek. Eklentiyi yüklemek için ekrandaki talimatları izleyin.

Tarayıcınız için zaten GWT eklentisi ayarladıysanız, aşağıdaki çıktıyı görebilmeniz gerekir

Tebrikler! Google Web Toolkit'i (GWT) kullanarak ilk uygulamanızı uyguladınız.

Bu eğitim size nasıl bir uygulama oluşturacağınızı açıklayacaktır. "war" dosyasını ve Apache Tomcat Websever kökünde nasıl dağıtılacağını öğrenin.

Bu basit örneği anladıysanız, aynı adımları izleyerek karmaşık bir GWT uygulamasını da dağıtabilirsiniz.

GWT eklentisi ile birlikte Eclipse IDE'yi çalıştıralım ve bir GWT uygulaması oluşturmak için aşağıdaki adımları izleyin -

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	İş mantığının gereksinimlere göre çalıştığından emin olmak için uygulamayı derleyin ve çalıştırın.
4	Son olarak, uygulamanın savaş klasörünün içeriğini savaş dosyası biçiminde sıkıştırın ve Apache Tomcat Web sunucusunda konuşlandırın.
5	Son adımda aşağıda açıklanan uygun URL'yi kullanarak web uygulamanızı başlatı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>
      <h1>Hello World</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Önceki örnekten biraz HTML değiştirdim. Burada, java sınıfımızı kullanarak bazı içerikleri ekleyeceğimiz bir <div> ... </div> yer tutucu oluşturdum. Öyleyse aşağıdaki Java dosyasının içeriğini alalımsrc/com.tutorialspoint/HelloWorld.java.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      HTML html = new HTML("<p>Welcome to GWT application</p>");
      
      RootPanel.get("gwtContainer").add(html);
   }
}

Burada temel en büyük HTML üzerinde oluşturduk ve bunu id = "gwtContainer" a sahip div etiketine ekledik. İlerleyen bölümlerde farklı GWT widget'larını inceleyeceğiz.

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 -

WAR Dosyası Oluştur

Şimdi başvurumuz iyi çalışıyor ve onu bir savaş dosyası olarak dışa aktarmaya hazırız.

Aşağıdaki adımları izleyin -

Projenizin bölümüne gidin war dizin C:\workspace\HelloWorld\war
War dizini içindeki tüm dosyaları ve klasörleri seçin.
Tüm seçili dosya ve klasörleri HelloWorld.zip adlı bir dosyada sıkıştırın .
Rename HelloWorld.zip için HelloWorld.war .

WAR dosyasını dağıt

Tomcat sunucusunu durdurun.
HelloWorld.war dosyasını şu konuma kopyalayın:tomcat installation directory > webapps folder.
Tomcat sunucusunu başlatın.
Webapps dizininin içine bakın, bir klasör olmalı helloworld oluşturuldu.
Şimdi HelloWorld.war, Tomcat Webserver köküne başarıyla yerleştirildi.

Uygulamayı Çalıştır

Web tarayıcısına bir url girin: http://localhost:8080/HelloWorld uygulamayı başlatmak için

Sunucu adı (localhost) ve bağlantı noktası (8080) tomcat yapılandırmanıza göre değişebilir.

GWT widget'ları, görsel stil için basamaklı stil sayfalarına (CSS) dayanır. Varsayılan olarak, her bileşenin sınıf adı şöyledir:gwt-<classname>.

Örneğin, Düğme widget'ının varsayılan bir gwt-Button stili vardır ve TextBox widget'ının varsayılan bir gwt-TextBox stili vardır .

Tüm düğmelere ve metin kutularına daha büyük bir yazı tipi vermek için, aşağıdaki kuralı uygulamanızın CSS dosyasına koyabilirsiniz.

.gwt-Button  { font-size: 150%; }

.gwt-TextBox { font-size: 150%; }

Varsayılan olarak, ne tarayıcı ne de GWT varsayılanı oluşturmaz idwidget'lar için öznitelikler. CSS'de kullanabileceğiniz öğeler için açıkça benzersiz bir kimlik oluşturmalısınız. İd ile belirli bir buton vermek içinmy-button-id Daha büyük bir yazı tipinde, aşağıdaki kuralı uygulamanızın CSS dosyasına koyabilirsiniz -

#my-button-id { font-size: 150%; }

Bir GWT widget'ının kimliğini ayarlamak için, DOM Öğesini alın ve ardından aşağıdaki gibi id niteliğini ayarlayın -

Button b = new Button();
DOM.setElementAttribute(b.getElement(), "id", "my-button-id")

CSS Styling API'leri

Herhangi bir GWT widget'ı için CSS ayarını değiştirmek için kullanılabilen birçok API vardır. Aşağıda, GWT kullanarak günlük web programlamada size yardımcı olacak birkaç önemli API verilmiştir -

Sr.No.	API ve Açıklama
1	public void setStyleName(java.lang.String style) Bu yöntem mevcut herhangi stilleri silmek ve yeni CSS sınıfı kullanılarak sağlanan Widget stilini ayarlar tarzı .
2	public void addStyleName(java.lang.String style) Bu yöntem, parçacığa ikincil veya bağımlı bir stil adı ekleyecektir. İkincil stil adı, ek bir stil adıdır, yani daha önce uygulanmış stil adları varsa bunlar tutulur.
3	public void removeStyleName(java.lang.String style) Bu yöntem, belirli bir stili widget'tan kaldıracak ve diğerlerini widget ile ilişkili olarak bırakacaktır.
4	public java.lang.String getStyleName() Bu yöntem, nesnenin tüm stil adlarını boşlukla ayrılmış bir liste olarak alır.
5	public void setStylePrimaryName(java.lang.String style) Bu yöntem, nesnenin birincil stil adını ayarlar ve tüm bağımlı stil adlarını günceller.

Örneğin, bir metne uygulayacağımız iki yeni stil tanımlayalım -

.gwt-Big-Text { 
   font-size:150%;
}

.gwt-Small-Text { 
   font-size:75%;
}

.gwt-Red-Text { 
   color:red;
}

Artık varsayılan ayarı yeni ayara değiştirmek için setStyleName (Style) ' i kullanabilirsiniz . Aşağıdaki kuralı uyguladıktan sonra, bir metnin yazı tipi büyür

txtWidget.setStyleName("gwt-Big-Text");

Aşağıdaki gibi rengini değiştirmek için aynı widget üzerine ikincil bir CSS kuralı uygulayabiliriz -

txtWidget.addStyleName("gwt-Red-Text");

Yukarıdaki yöntemi kullanarak, bir parçacığa uygulamak istediğiniz kadar stil ekleyebilirsiniz. İlk stili düğme widget'ından kaldırırsanız, ikinci stil metinde kalmaya devam eder.

txtWidget.removeStyleName("gwt-Big-Text");

Birincil ve İkincil Stiller

Varsayılan olarak, bir widget'in birincil stil adı, widget sınıfı için varsayılan stil adı olacaktır; örneğin , Düğme widget'ları için gwt-Button . AddStyleName () yöntemini kullanarak stil adları eklediğimizde ve kaldırdığımızda, bu stillere ikincil stiller denir.

Bir widget'in son görünümü, ona eklenen tüm ikincil stillerin toplamı ve birincil stili tarafından belirlenir. SetStylePrimaryName (String) yöntemiyle bir widget'in birincil stilini ayarlarsınız . Örnek vermek gerekirse, bir Etiket widget'ımız olduğunu varsayalım. CSS dosyamızda aşağıdaki kuralları tanımladık -

.MyText {
   color: blue;
}

.BigText {
   font-size: large;
}

.LoudText {
   font-weight:  bold;
}

Belirli bir etiket parçacığının her zaman mavi metni görüntülemesini istediğimizi varsayalım ve bazı durumlarda daha fazla vurgu için daha büyük, kalın bir yazı tipi kullanın.

Bunun gibi bir şey yapabiliriz -

// set up our primary style
Label someText = new Label();
someText.setStylePrimaryName("MyText");
...

// later on, to really grab the user's attention
someText.addStyleName("BigText");
someText.addStyleName("LoudText");
...

// after the crisis is over
someText.removeStyleName("BigText");
someText.removeStyleName("LoudText");

CSS Dosyalarını İlişkilendirme

CSS dosyalarını modülünüzle ilişkilendirmek için birden fazla yaklaşım vardır. Modern GWT uygulamaları genellikle CssResource ve UiBinder'in bir kombinasyonunu kullanır. Örneklerimizde sadece ilk yaklaşımı kullanıyoruz.

Barındıran HTML sayfasında bir <link> etiketi kullanma.
Modül XML dosyasında <stylesheet> öğesini kullanma.
Bir CssResource içinde bulunan ClientBundle.
Bir satır içi <ui: style> öğesi kullanma UiBinder şablonu.

GWT CSS Örneği

Bu örnek, sizi GWT pencere aracınıza farklı CSS kuralları uygulamak için basit adımlardan geçirecektir. GWT eklentisi ile birlikte Eclipse IDE'yi çalıştıralım ve bir GWT uygulaması oluşturmak için aşağıdaki adımları izleyin -

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

.gwt-Button { 
   font-size: 150%; 
   font-weight: bold;
   width:100px;
   height:100px;
}

.gwt-Big-Text { 
   font-size:150%;
}

.gwt-Small-Text { 
   font-size:75%;
}

Aşağıda, değiştirilmiş HTML ana bilgisayar dosyasının içeriği verilmiştir war/HelloWorld.html iki düğmeyi barındırmak için.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <div id = "mytext"><h1>Hello, World!</h1></div>
      <div id = "gwtGreenButton"></div>
      <div id = "gwtRedButton"></div>
   </body>
</html>

Aşağıdaki Java dosyası içeriğine sahip olalım src/com.tutorialspoint/HelloWorld.java bu, HTML'ye iki düğme eklemeye özen gösterir ve özel CSS stilini uygular.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
     
   // add button to change font to big when clicked.
   Button Btn1 = new Button("Big Text");
   Btn1.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
         RootPanel.get("mytext").setStyleName("gwt-Big-Text");
      }
   });

   // add button to change font to small when clicked.
   Button Btn2 = new Button("Small Text");
   Btn2.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
         RootPanel.get("mytext").setStyleName("gwt-Small-Text");
      }
   });

   RootPanel.get("gwtGreenButton").add(Btn1);
   RootPanel.get("gwtRedButton").add(Btn2);
   }
}

Şimdi görüntülenen iki düğmeyi tıklamayı deneyin ve "Merhaba Dünya!" iki düğmeye tıklandığında yazı tipini değiştirmeye devam eden metin.

Her kullanıcı arayüzü aşağıdaki üç ana hususu dikkate alır:

UI elements- Bunlar, kullanıcının sonunda gördüğü ve etkileşim kurduğu temel görsel öğelerdir. GWT, bu eğitimde ele alacağımız, temelden karmaşığa değişen, yaygın olarak kullanılan ve yaygın öğelerin geniş bir listesini sağlar.
Layouts- UI öğelerinin ekranda nasıl düzenleneceğini tanımlarlar ve GUI'ye (Grafik Kullanıcı Arayüzü) son bir görünüm ve his sağlarlar. Bu kısım Düzen bölümünde ele alınacaktır.
Behavior- Bunlar, kullanıcı UI öğeleriyle etkileşime girdiğinde meydana gelen olaylardır. Bu bölüm Olay İşleme bölümünde ele alınacaktır.

GWT UI Öğeleri

GWT kitaplığı, karmaşık web tabanlı kullanıcı arabirimleri oluşturmak için iyi tanımlanmış bir sınıf hiyerarşisinde sınıflar sağlar. Bu bileşen hiyerarşisindeki tüm sınıflar,UIObject aşağıda gösterildiği gibi temel sınıf -

Her Temel UI pencere öğesi, özellikleri UIObject'ten miras alan Widget sınıfından alır. Ağaç ve Menü, karmaşık widget eğitiminde ele alınacaktır.

Sr.No.	Widget ve Açıklama
1	GWT UIObject Sınıfı Bu pencere öğesi, bir <div> öğesi kullanılarak HTML olarak yorumlanmayan ve blok düzeniyle görüntülenmesine neden olan metin içerir.
2	GWT Widget Sınıfı Bu pencere öğesi HTML metni içerebilir ve html içeriğini bir <div> öğesi kullanarak görüntüleyerek blok düzeniyle görüntülenmesine neden olur.

Temel Widget'lar

Aşağıdakiler birkaç önemli Temel Pencere Öğesidir -

Sr.No.	Widget ve Açıklama
1	Etiket Bu pencere öğesi, bir <div> öğesi kullanılarak HTML olarak yorumlanmayan ve blok düzeniyle görüntülenmesine neden olan metin içerir.
2	HTML Bu pencere öğesi HTML metni içerebilir ve html içeriğini bir <div> öğesi kullanarak görüntüleyerek blok düzeniyle görüntülenmesine neden olur.
3	Resim Bu pencere öğesi, belirli bir URL'de bir resim görüntüler.
4	Çapa Bu pencere öğesi basit bir <a> öğesini temsil eder.

Form widget'ları, kullanıcıların veri girmesine olanak tanır ve onlara uygulama ile etkileşim yeteneği sağlar. Her Form widget'ı, Widget sınıfından özellikleri miras alır ve bu da UIObject ve Wigdet sınıflarından özellikleri miras alır.

Sr.No.	Widget ve Açıklama
1	GWT UIObject Sınıfı Bu pencere öğesi, bir <div> öğesi kullanılarak HTML olarak yorumlanmayan ve blok düzeniyle görüntülenmesine neden olan metin içerir.
2	GWT Widget Sınıfı Bu pencere öğesi HTML metni içerebilir ve html içeriğini bir <div> öğesi kullanarak görüntüleyerek blok düzeniyle görüntülenmesine neden olur.

Form Pencere Öğeleri

Aşağıda birkaç önemli Form Widget'ı verilmiştir -

Sr.No.	Widget ve Açıklama
1	Buton Bu widget, standart bir düğmeyi temsil eder.
2	Butona basınız Bu widget, özel stilli normal bir düğmeyi temsil eder.
3	ToggleButton Bu pencere öğesi, kullanıcının yukarı ve aşağı durumlar arasında geçiş yapmasına olanak tanıyan şık bir durum bilgisini temsil eder.
4	CheckBox Bu pencere öğesi, standart bir onay kutusu pencere öğesini temsil eder. Bu sınıf aynı zamanda RadioButton için temel sınıf görevi görür.
5	Radyo düğmesi Bu pencere öğesi, birbirini dışlayan bir radyo düğmesi pencere öğesini temsil eder.
6	Liste kutusu Bu pencere öğesi, bir liste kutusu veya bir açılır liste olarak kullanıcıya yönelik bir seçenekler listesini temsil eder.
7	SuggestBox Bu pencere öğesi, kullanıcının girdisiyle eşleşen önceden yapılandırılmış bir seçim kümesini görüntüleyen bir metin kutusunu veya metin alanını temsil eder. Her bir SuggestBox, tek bir SuggestOracle ile ilişkilendirilir. SuggestOracle, belirli bir sorgu dizesi verilen bir dizi seçim sağlamak için kullanılır.
8	Metin kutusu Bu widget, tek satırlı bir metin kutusunu temsil eder.
9	Şifre Metin Kutusu Bu widget, gizli dinlemeyi önlemek için girişini görsel olarak maskeleyen bir metin kutusunu temsil eder.
10	TextArea Bu pencere öğesi, birden çok metin satırının girilmesine izin veren bir metin kutusunu temsil eder.
11	RichTextArea Bu widget, karmaşık stil ve biçimlendirmeye izin veren zengin bir metin düzenleyiciyi temsil eder.
12	Dosya yükleme Bu widget, HTML <input type = 'file'> öğesini sarar.
13	Gizli Bu widget, bir HTML formundaki gizli bir alanı temsil eder.

"Karmaşık aletler", kullanıcıların uygulamayla gelişmiş etkileşim yeteneğine sahip olmasına olanak tanır. Her Karmaşık pencere öğesi, özellikleri UIObject'ten devralan Widget sınıfından miras alır.

Sr.No.	Widget ve Açıklama
1	GWT UIObject Sınıfı Bu pencere öğesi, bir <div> öğesi kullanılarak HTML olarak yorumlanmayan ve blok düzeniyle görüntülenmesine neden olan metin içerir.
2	GWT Widget Sınıfı Bu pencere öğesi HTML metni içerebilir ve html içeriğini bir <div> öğesi kullanarak görüntüleyerek blok düzeniyle görüntülenmesine neden olur.

Karmaşık Widget'lar

Aşağıdakiler birkaç önemli Karmaşık Pencere Öğesidir -

Sr.No.	Widget ve Açıklama
1	Ağaç Bu pencere öğesi, standart bir hiyerarşik ağaç pencere öğesini temsil eder. Ağaç, kullanıcının açabileceği, kapatabileceği ve seçebileceği bir TreeItems hiyerarşisi içerir.
2	Menü çubuğu Bu widget, standart bir menü çubuğu widget'ını temsil eder. Bir menü çubuğu, her biri bir Komutu çalıştırabilen veya basamaklı bir menü çubuğu açabilen herhangi bir sayıda menü öğesi içerebilir.
3	DatePicker Bu widget, standart bir GWT tarih seçiciyi temsil eder.
4	CellTree Bu pencere öğesi, bir ağaç görünümünü temsil eder. Bu pencere öğesi yalnızca, çalıştırıldığı HTML sayfasının açık bir <! DOCTYPE> bildirimine sahip olmasını gerektiren standartlar modunda çalışacaktır.
5	Hücre Listesi Bu pencere öğesi, hücrelerin tek sütunlu bir listesini temsil eder.
6	CellTable Bu pencere öğesi, sayfalamayı ve sütunları destekleyen bir tablo görünümünü temsil eder.
7	CellBrowser Bu widget bir browsablebir seferde düzey başına yalnızca tek bir düğümün açık olabileceği bir ağaç görünümü. Bu pencere öğesi yalnızca, çalıştırıldığı HTML sayfasının açık bir <! DOCTYPE> bildirimine sahip olmasını gerektiren standartlar modunda çalışacaktır.

Yerleşim Panelleri başka widget'lar içerebilir. Bu paneller, widget'ların Kullanıcı Arayüzünde gösterilme şeklini kontrol eder. Her Panel küçük aracı, Panel sınıfından özellikleri miras alır, bu da Widget sınıfından özellikleri miras alır ve bu da UIObject sınıfından özellikleri devralır.

Sr.No.	Widget ve Açıklama
1	GWT UIObject Sınıfı Bu pencere öğesi, bir <div> öğesi kullanılarak HTML olarak yorumlanmayan ve blok düzeniyle görüntülenmesine neden olan metin içerir.
2	GWT Widget Sınıfı Bu pencere öğesi HTML metni içerebilir ve html içeriğini bir <div> öğesi kullanarak görüntüleyerek blok düzeniyle görüntülenmesine neden olur.
3	GWT Panel Sınıfı Bu, diğer widget'ları içerebilen widget'lar olan tüm paneller için soyut bir temel sınıftır.

Yerleşim Panelleri

Aşağıdakiler birkaç önemli Düzen Panelidir -

Sr.No.	Widget ve Açıklama
1	FlowPanel Bu widget, varsayılan HTML mizanpajı davranışını kullanarak alt widget'larını formatlayan bir paneli temsil eder.
2	Yatay Panel Bu widget, tüm widget'larını tek bir yatay sütunda yerleştiren bir paneli temsil eder.
3	Dikey Panel Bu widget, tüm widget'larını tek bir dikey sütunda yerleştiren bir paneli temsil eder.
4	Yatay Bölünmüş Panel Bu araç takımı, iki parçacığı tek bir yatay sırada düzenleyen ve kullanıcının iki parçacığın her birine ayrılmış genişliğin oranını etkileşimli olarak değiştirmesine izin veren bir paneli temsil eder. HorizontalSplitPanel içinde bulunan widget'lar, gerektiğinde otomatik olarak kaydırma çubuklarıyla dekore edilecektir.
5	VerticalSplitPanel Bu pencere öğesi, iki parçacığı tek bir dikey sütunda düzenleyen ve kullanıcının iki parçacığın her birine atanan yükseklik oranını etkileşimli olarak değiştirmesine olanak tanıyan bir A panelini temsil eder. VertialSplitPanel içinde bulunan widget'lar, gerektiğinde otomatik olarak kaydırma çubuklarıyla dekore edilecektir.
6	FlexTable Bu pencere öğesi, istek üzerine hücreler oluşturan esnek bir tabloyu temsil eder. Pürüzlü olabilir (yani, her satır farklı sayıda hücre içerebilir) ve tek tek hücreler birden çok satır veya sütunu kapsayacak şekilde ayarlanabilir.
7	Kafes Bu pencere öğesi, hücrelerinde metin, html veya bir alt Pencere Öğesi içerebilen dikdörtgen bir ızgarayı temsil eder. İstenen satır ve sütun sayısına göre açıkça yeniden boyutlandırılmalıdır.
8	DeckPanel bir seferde yalnızca birinin görülebildiği bir 'destede' tüm alt bileşenlerini görüntüleyen panel. TabPanel tarafından kullanılır.
9	DockPanel Bu widget, alt widget'larını dış kenarlarında "sabitlenmiş" olarak yerleştiren ve son widget'inin ortasındaki kalan alanı kaplamasına izin veren bir paneli temsil eder.
10	HTMLPanel Bu pencere öğesi, HTML içeren ve bu HTML içindeki tanımlanmış öğelere alt pencere öğeleri ekleyebilen bir paneli temsil eder.
11	TabPanel Bu widget, her biri başka bir widget içeren sekmeli bir sayfa kümesini temsil eden bir paneli temsil eder. Kullanıcı kendileriyle ilişkili çeşitli sekmeleri seçerken alt widget'ları gösterilir. Sekmeler rastgele HTML içerebilir.
12	Bileşik Bu pencere aracı, başka bir pencere aracını sararak sarmalanmış pencere aracının yöntemlerini gizleyen bir pencere öğesi türünü temsil eder. Bir panele eklendiğinde, kompozit, tam olarak sarmaladığı widget eklenmiş gibi davranır.
13	SimplePanel Bu widget, yalnızca bir widget içeren paneller için bir Base sınıfını temsil eder.
14	ScrollPanel Bu widget, içeriğini kaydırılabilir bir alana saran basit bir paneli temsil eder
15	FocusPanel Bu widget, içeriğini odaklanabilir hale getiren basit bir paneli temsil eder ve fare ve klavye olaylarını yakalama yeteneği ekler.
16	FormPanel Bu widget, içeriğini bir HTML <FORM> öğesi ile saran bir paneli temsil eder.
17	PopupPanel Bu pencere öğesi, pop updiğer aletler üzerinde. Tarayıcının istemci alanını (ve önceden oluşturulmuş açılır pencereleri) kaplar.
18	İletişim kutusu Bu pencere öğesi, üstte bir başlık alanına sahip olan ve kullanıcı tarafından sürüklenebilen bir açılır pencere biçimini temsil eder. PopupPanel'den farklı olarak, PopupPanel.setWidth (String) ve PopupPanel.setHeight (String) 'e yapılan çağrılar, henüz bir widget eklenmemiş olsa bile iletişim kutusunun genişliğini ve yüksekliğini ayarlar.

GWT, Java AWT veya SWING Kullanıcı Arayüzü çerçevelerine benzer bir olay işleyici modeli sağlar.

Dinleyici arabirimi, pencere aracının bir olayı duyurmak için çağırdığı bir veya daha fazla yöntemi tanımlar. GWT, çeşitli olası olaylara karşılık gelen bir arabirim listesi sağlar.
Belirli bir tipteki olayları almak isteyen bir sınıf, ilişkili işleyici arayüzünü uygular ve daha sonra bir dizi olaya abone olmak için parçacığa kendisine bir referans iletir.

Örneğin, Button sınıf yayınlar click eventsbu nedenle, ClickHandler'ı işlemek için bir sınıf yazmanız gerekecekclick Etkinlik.

Olay İşleyici Arayüzleri

Tüm GWT olay işleyicileri, EventHandler arabiriminden genişletilmiştir ve her işleyicinin tek bağımsız değişkeni olan yalnızca tek bir yöntemi vardır. Bu argüman her zaman ilişkili olay türünün bir nesnesidir. Her birieventnesnesi, aktarılan olay nesnesini işlemek için bir dizi yönteme sahiptir. Örneğin tıklama olayı için işleyicinizi aşağıdaki gibi yazmanız gerekecek -

/**
 * create a custom click handler which will call 
 * onClick method when button is clicked.
 */
public class MyClickHandler implements ClickHandler {
   @Override
   public void onClick(ClickEvent event) {
      Window.alert("Hello World!");
   }
}

Artık tıklama olaylarını almak isteyen herhangi bir sınıf arayacak addClickHandler() bir olay işleyicisini aşağıdaki şekilde kaydetmek için -

/**
 * create button and attach click handler
 */
Button button = new Button("Click Me!");
button.addClickHandler(new MyClickHandler());

Bir olay türünü destekleyen her widget, HandlerRegistration add formunun bir yöntemine sahip olacaktır.Fooİşleyici (FooEtkinlik) nerede Foo Click, Error, KeyPress vb. gibi gerçek olaydır.

Aşağıda, önemli GWT olay işleyicilerinin ve ilişkili olayların ve işleyici kayıt yöntemlerinin listesi verilmiştir -

Sr.No.	Etkinlik Arayüzü	Etkinlik Yöntemi ve Açıklaması
1	Seçim İşleyiciden Önce <I>	void on Before Selection (Before Selection Event<I> event); BeforeSelectionEvent tetiklendiğinde çağrılır.
2	BlurHandler	void on Blur(Blur Event event); Bulanıklaştırma Etkinliği tetiklendiğinde çağrılır.
3	ChangeHandler	void on Change(ChangeEvent event); Bir değişiklik olayı tetiklendiğinde çağrılır.
4	ClickHandler	void on Click(ClickEvent event); Yerel bir tıklama etkinliği tetiklendiğinde çağrılır.
5	CloseHandler <T>	void on Close(CloseEvent<T> event); CloseEvent tetiklendiğinde çağrılır.
6	Bağlam Menüsü İşleyici	void on Context Menu(Context Menu Event event); Yerel bir bağlam menüsü olayı tetiklendiğinde çağrılır.
7	Çift Tıklama İşleyici	void on Double Click(Double Click Event event); Bir Çift Tıklama Olayı tetiklendiğinde çağrılır.
8	Hata İşleyici	void on Error(Error Event event); Hata Olayı tetiklendiğinde çağrılır.
9	Odak İşleyici	void on Focus(Focus Event event); Focus Event tetiklendiğinde çağrılır.
10	Form Paneli. Tam İşleyiciyi Gönderin	void on Submit Complete(Form Panel.Submit Complete Event event); Bir form başarıyla gönderildiğinde tetiklenir.
11	FormPanel.SubmitHandler	void on Submit(Form Panel.Submit Event event); Form gönderildiğinde tetiklendi.
12	Tuş Aşağı İşleyici	void on Key Down(Key Down Event event); KeyDownEvent tetiklendiğinde çağrılır.
13	KeyPressHandler	void on KeyPress(KeyPressEvent event); KeyPressEvent tetiklendiğinde çağrılır.
14	KeyUpHandler	void on KeyUp(KeyUpEvent event); KeyUpEvent tetiklendiğinde çağrılır.
15	LoadHandler	void on Load(LoadEvent event); LoadEvent tetiklendiğinde çağrılır.
16	MouseDownHandler	void on MouseDown(MouseDownEvent event); MouseDown tetiklendiğinde çağrılır.
17	MouseMoveHandler	void on MouseMove(MouseMoveEvent event); MouseMoveEvent tetiklendiğinde çağrılır.
18	MouseOutHandler	void on MouseOut(MouseOutEvent event); MouseOutEvent tetiklendiğinde çağrılır.
19	MouseOverHandler	void on MouseOver(MouseOverEvent event); MouseOverEvent tetiklendiğinde çağrılır.
20	MouseUpHandler	void on MouseUp(MouseUpEvent event); MouseUpEvent tetiklendiğinde çağrılır.
21	MouseWheelHandler	void on MouseWheel(MouseWheelEvent event); MouseWheelEvent tetiklendiğinde çağrılır.
22	ResizeHandler	void on Resize(ResizeEvent event); Widget yeniden boyutlandırıldığında tetiklenir.
23	ScrollHandler	void on Scroll(ScrollEvent event); ScrollEvent tetiklendiğinde çağrılır.
24	SelectionHandler <I>	void on Selection(SelectionEvent<I> event); SelectionEvent tetiklendiğinde çağrılır.
25	ValueChangeHandler <I>	void on ValueChange(ValueChangeEvent<I> event); ValueChangeEvent tetiklendiğinde çağrılır.
26	Window.ClosingHandler	void on WindowClosing(Window.ClosingEvent event); Tarayıcı penceresi kapanmadan veya farklı bir siteye gitmeden hemen önce tetiklenir.
27	Window.ScrollHandler	void on WindowScroll(Window.ScrollEvent event); Tarayıcı penceresi kaydırıldığında tetiklenir.

Etkinlik Yöntemleri

Daha önce belirtildiği gibi, her işleyicinin, olay nesnesini tutan tek bir bağımsız değişkene sahip tek bir yöntemi vardır, örneğin void onClick (ClickEvent olayı) veya void onKeyDown (KeyDownEvent olayı) . ClickEvent ve KeyDownEvent gibi olay nesneleri , aşağıda listelenen birkaç ortak yönteme sahiptir:

Sr.No.	Yöntem ve Açıklama
1	protected void dispatch(ClickHandler handler) Bu yöntem yalnızca HandlerManager tarafından çağrılmalıdır
2	DomEvent.Type <FooHandler> getAssociatedType() Bu yöntem kaydetmek için kullanılan türü döndürür Foo Etkinlik.
3	static DomEvent.Type<FooHandler> getType() Bu yöntem, ilişkili olay türünü alır Foo Etkinlikler.
4	public java.lang.Object getSource() Bu yöntem, bu olayı en son tetikleyen kaynağı döndürür.
5	protected final boolean isLive() Bu yöntem, olayın canlı olup olmadığını döndürür.
6	protected void kill() Bu yöntem olayı öldürür

Misal

Bu örnek, bir Click Olay ve KeyDownGWT'de olay işleme. GWT - Uygulama Oluştur bölümünde oluşturduğumuz GWT uygulamasını güncellemek için aşağıdaki adımları izleyin -

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>
      <h1>Event Handling Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Aşağıdaki Java dosyası içeriğine sahip olalım src/com.tutorialspoint/HelloWorld.java Olay İşleme'nin GWT'de kullanımını gösterecektir.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyDownEvent;
import com.google.gwt.event.dom.client.KeyDownHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      /**
       * create textbox and attach key down handler
       */
      TextBox textBox = new TextBox(); 
      textBox.addKeyDownHandler(new MyKeyDownHandler());

      /*
       * create button and attach click handler
       */
      Button button = new Button("Click Me!");
      button.addClickHandler(new MyClickHandler());

      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
      panel.setSize("300", "100");
      panel.add(textBox);
      panel.add(button);

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.add(panel);
      RootPanel.get("gwtContainer").add(decoratorPanel);
   }

   /** 
    * create a custom click handler which will call 
    * onClick method when button is clicked.
    */
   private class MyClickHandler implements ClickHandler {
      @Override
      public void onClick(ClickEvent event) {
         Window.alert("Hello World!");
      }
   }

   /**
    * create a custom key down handler which will call 
    * onKeyDown method when a key is down in textbox.
    */
   private class MyKeyDownHandler implements KeyDownHandler {
      @Override
      public void onKeyDown(KeyDownEvent event) {
         if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
            Window.alert(((TextBox)event.getSource()).getValue());
         }
      }
   }
}

GWT, özel kullanıcı arabirimi öğeleri oluşturmak için üç yol sağlar. İzlenecek üç genel strateji vardır -

Create a widget by extending Composite Class- Bu, özel widget oluşturmanın en yaygın ve en kolay yoludur. Burada, özel özelliklerle bileşik görünüm oluşturmak için mevcut widget'ları kullanabilirsiniz.
Create a widget using GWT DOM API in JAVA- GWT temel widget'ları bu şekilde oluşturulur. Yine de özel widget oluşturmanın çok karmaşık bir yoludur ve dikkatli kullanılmalıdır.
Use JavaScript and wrap it in a widget using JSNI- Bu genellikle yalnızca son çare olarak yapılmalıdır. Yerel yöntemlerin tarayıcılar arası etkileri göz önüne alındığında, çok karmaşık hale gelir ve ayrıca hata ayıklaması daha zor hale gelir.

Kompozit Sınıf ile Özel Widget Oluşturun

Bu örnek, GWT'de Özel Pencere Öğesi oluşturmayı göstermek için sizi basit adımlardan geçirecektir. GWT - Basic Widgets bölümünde oluşturduğumuz GWT uygulamasını güncellemek için aşağıdaki adımları izleyin -

Burada, özel widget oluşturmanın en kolay yolu olan Composite sınıfını genişleterek özel bir widget oluşturacağız.

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>
      <h1>Custom Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Aşağıdaki Java dosyası içeriğine sahip olalım src/com.tutorialspoint/HelloWorld.java Özel bir parçacığın oluşturulmasını gösterecektir.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;

public class HelloWorld implements EntryPoint {

   /**
    * A composite of a TextBox and a CheckBox that optionally enables it.
    */
   private static class OptionalTextBox extends Composite implements
   ClickHandler {

      private TextBox textBox = new TextBox();
      private CheckBox checkBox = new CheckBox();
      private boolean enabled = true;

      public boolean isEnabled() {
         return enabled;
      }

      public void setEnabled(boolean enabled) {
         this.enabled = enabled;
      }

      /**
       * Style this widget using .optionalTextWidget CSS class.<br/>
       * Style textbox using .optionalTextBox CSS class.<br/>
       * Style checkbox using .optionalCheckBox CSS class.<br/>
       * Constructs an OptionalTextBox with the given caption 
       * on the check.
       * @param caption the caption to be displayed with the check box
       */
      public OptionalTextBox(String caption) {
         // place the check above the text box using a vertical panel.
         HorizontalPanel panel = new HorizontalPanel();
         // panel.setBorderWidth(1);
         panel.setSpacing(10);
         panel.add(checkBox);
         panel.add(textBox);

         // all composites must call initWidget() in their constructors.
         initWidget(panel);
         
         //set style name for entire widget
         setStyleName("optionalTextWidget");
         
         //set style name for text box
         textBox.setStyleName("optionalTextBox");
         
         //set style name for check box
         checkBox.setStyleName("optionalCheckBox");
         textBox.setWidth("200");
         
         // Set the check box's caption, and check it by default.
         checkBox.setText(caption);
         checkBox.setValue(enabled);
         checkBox.addClickHandler(this);
         enableTextBox(enabled,checkBox.getValue());
      }

      public void onClick(ClickEvent event) {
         if (event.getSource() == checkBox) {
            // When the check box is clicked,
            //update the text box's enabled state.
            enableTextBox(enabled,checkBox.getValue());
         }
      }

      private void enableTextBox(boolean enable,boolean isChecked){
         enable = (enable && isChecked) || (!enable && !isChecked);
         textBox.setStyleDependentName("disabled", !enable);
         textBox.setEnabled(enable);	  
      }
   }

   public void onModuleLoad() {
      // Create an optional text box and add it to the root panel.
      OptionalTextBox otb = new OptionalTextBox(
         "Want to explain the solution?");
      otb.setEnabled(true);
      RootPanel.get().add(otb);
   }    
}

You can notice following points

Kompozit widget'ı genişleterek Özel Widget oluşturmak oldukça kolaydır.
GWT dahili widget'ları, TextBox ve CheckBox ile yeniden kullanılabilirlik kavramını kullanarak bir widget oluşturduk.
Onay kutusunun durumuna bağlı olarak TextBox devre dışı bırakılır / etkinleştirilir. Kontrolü etkinleştirmek / devre dışı bırakmak için bir API sağladık.
Dahili widget stillerini, belgelenmiş CSS stilleri aracılığıyla ortaya çıkardık.

Giriş

UiBinder, İşlevselliği ve Kullanıcı Arayüzünün Görünümünü ayırmak için tasarlanmış bir çerçevedir.

UiBinder çerçevesi, geliştiricilerin kendi içinde yapılandırılmış GWT parçacıklarıyla HTML sayfaları olarak gwt uygulamaları oluşturmalarına olanak tanır.
UiBinder çerçevesi, XML, HTML ve CSS ile Java kaynak kodundan daha rahat olan UI tasarımcıları ile daha kolay işbirliğini sağlar
UIBinder, Kullanıcı Arayüzünü tanımlamanın açıklayıcı bir yolunu sağlar.
UIBinder, programlama mantığını UI'den ayırır.
UIBinder, JSP'nin Servletler için ne olduğuna benzer.

UiBinder İş Akışı

Adım 1 - UI Beyanı XML Dosyası Oluşturun

XML / HTML tabanlı bir Kullanıcı Arabirimi bildirim dosyası oluşturun. Bir yarattıkLogin.ui.xml örneğimizdeki dosyası.

<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder'
   xmlns:gwt = 'urn:import:com.google.gwt.user.client.ui' 
   xmlns:res = 'urn:with:com.tutorialspoint.client.LoginResources'>
   <ui:with type = "com.tutorialspoint.client.LoginResources" field = "res">
   </ui:with>
   <gwt:HTMLPanel>
   ...  
   </gwt:HTMLPanel>
</ui:UiBinder>

Adım 2 - Daha Sonra Bağlama için ui: alanını kullanın

Daha sonra bağlama için XML'deki UI alanını JAVA dosyasındaki UI alanıyla ilişkilendirmek için XML / HTML öğesinde ui: field niteliğini kullanın.

<gwt:Label ui:field = "completionLabel1" />
<gwt:Label ui:field = "completionLabel2" />

Adım 3 - UI XML'in Java karşılığını oluşturun

Bileşik parçacığı genişleterek XML tabanlı düzenin Java tabanlı karşılığını oluşturun. Bir yarattıkLogin.java örneğimizdeki dosyası.

package com.tutorialspoint.client;
   ...
public class Login extends Composite {
   ...
}

Adım 4 - Java kullanıcı arayüzü alanlarını UiField ek açıklamasıyla bağlayın

@UiField ek açıklamasını kullanın Login.java XML tabanlı alanlara bağlanmak üzere karşı sınıf üyelerini belirlemek için Login.ui.xml

public class Login extends Composite {
   ...
   @UiField
   Label completionLabel1;

   @UiField
   Label completionLabel2;  
   ...
}

Adım 5 - Java UI'yi UI XML ile UiTemplate ek açıklamasıyla bağlayın

GWT'ye java tabanlı bileşeni bağlamasını söyleyin Login.java ve XML tabanlı düzen Login.ui.xml @UiTemplate ek açıklamasını kullanma

public class Login extends Composite {

   private static LoginUiBinder uiBinder = GWT.create(LoginUiBinder.class);

   /*
    * @UiTemplate is not mandatory but allows multiple XML templates
    * to be used for the same widget. 
    * Default file loaded will be <class-name>.ui.xml
    */
   
   @UiTemplate("Login.ui.xml")
   interface LoginUiBinder extends UiBinder<Widget, Login> {
   }
   ...
}

Adım 6 - CSS Dosyası Oluşturun

Harici bir CSS dosyası oluşturunLogin.css ve Java tabanlı Kaynak LoginResources.java css stillerine eşdeğer dosya

.blackText {
   font-family: Arial, Sans-serif;
   color: #000000;
   font-size: 11px;
   text-align: left;
}
...

Adım 7 - CSS Dosyası için Java tabanlı Kaynak Dosyası Oluşturun

package com.tutorialspoint.client;
...
public interface LoginResources extends ClientBundle {
   public interface MyCss extends CssResource {
      String blackText();

      ...
   }

   @Source("Login.css")
   MyCss style();
}

Adım 8 - Java UI Code dosyasına CSS kaynağı ekleyin.

Harici bir CSS dosyası ekleyinLogin.css Java tabanlı pencere öğesi sınıfının Oluşturucusunu kullanma Login.java

public Login() {
   this.res = GWT.create(LoginResources.class);
   res.style().ensureInjected();
   initWidget(uiBinder.createAndBindUi(this));
}

UIBinder Tam Örneği

Bu örnek, GWT'de bir UIBinder'ın kullanımını göstermek için sizi 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ı izleyin -

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'/>
   <!-- Inherit the UiBinder module.                               -->
   <inherits name = "com.google.gwt.uibinder.UiBinder"/>
   <!-- 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>
      <h1>UiBinder Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Şimdi yeni bir UiBinder şablonu ve sahip sınıfı (Dosya → Yeni → UiBinder) oluşturun.

Proje için istemci paketini seçin ve ardından Login olarak adlandırın. Diğer tüm varsayılanları bırakın. Bitir düğmesine tıklayın ve eklenti yeni bir UiBinder şablonu ve sahip sınıfı oluşturacaktır.

Şimdi Login.css dosyasını src/com.tutorialspoint/client aşağıdaki içeriği paketleyin ve içine yerleştirin

.blackText {
   font-family: Arial, Sans-serif;
   color: #000000;
   font-size: 11px;
   text-align: left;
}

.redText {
   font-family: Arial, Sans-serif;
   color: #ff0000;
   font-size: 11px;
   text-align: left;
}

.loginButton {
   border: 1px solid #3399DD;
   color: #FFFFFF;
   background: #555555;
   font-size: 11px;
   font-weight: bold;
   margin: 0 5px 0 0;
   padding: 4px 10px 5px;
   text-shadow: 0 -1px 0 #3399DD;
}

.box {
   border: 1px solid #AACCEE;
   display: block;
   font-size: 12px;
   margin: 0 0 5px;
   padding: 3px;
   width: 203px;
}

.background {
   background-color: #999999;
   border: 1px none transparent;
   color: #000000;
   font-size: 11px;
   margin-left: -8px;
   margin-top: 5px;
   padding: 6px;
}

Şimdi LoginResources.java dosyasını src/com.tutorialspoint/client aşağıdaki içeriği paketleyin ve içine yerleştirin

package com.tutorialspoint.client;

import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;

public interface LoginResources extends ClientBundle {
   /**
    * Sample CssResource.
    */
   public interface MyCss extends CssResource {
      String blackText();

      String redText();

      String loginButton();

      String box();

      String background();
   }

   @Source("Login.css")
   MyCss style();
}

<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder'
   xmlns:gwt = 'urn:import:com.google.gwt.user.client.ui' 
   xmlns:res = 'urn:with:com.tutorialspoint.client.LoginResources'>
   
   <ui:with type = "com.tutorialspoint.client.LoginResources" field = "res">
   </ui:with>
   
   <gwt:HTMLPanel>
      <div align = "center">
         
         <gwt:VerticalPanel res:styleName = "style.background">
            <gwt:Label text = "Login" res:styleName = "style.blackText" />
            <gwt:TextBox ui:field="loginBox" res:styleName = "style.box" />
            <gwt:Label text = "Password" res:styleName = "style.blackText" />
            <gwt:PasswordTextBox ui:field = "passwordBox" res:styleName = "style.box" />
            
            <gwt:HorizontalPanel verticalAlignment = "middle">
               <gwt:Button ui:field = "buttonSubmit" text="Submit"
                  res:styleName = "style.loginButton" />
               <gwt:CheckBox ui:field = "myCheckBox" />
               <gwt:Label ui:field = "myLabel" text = "Remember me"
                  res:styleName = "style.blackText" />
            </gwt:HorizontalPanel>
            
            <gwt:Label ui:field = "completionLabel1" res:styleName = "style.blackText" />
            <gwt:Label ui:field = "completionLabel2" res:styleName = "style.blackText" />
         </gwt:VerticalPanel>
         
      </div>
   </gwt:HTMLPanel>
   
</ui:UiBinder>

package com.tutorialspoint.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

public class Login extends Composite {

   private static LoginUiBinder uiBinder = GWT.create(LoginUiBinder.class);

   /*
    * @UiTemplate is not mandatory but allows multiple XML templates
    * to be used for the same widget. 
    * Default file loaded will be <class-name>.ui.xml
    */
   @UiTemplate("Login.ui.xml")
   interface LoginUiBinder extends UiBinder<Widget, Login> {
   }

   @UiField(provided = true)
   final LoginResources res;

   public Login() {
      this.res = GWT.create(LoginResources.class);
      res.style().ensureInjected();
      initWidget(uiBinder.createAndBindUi(this));
   }

   @UiField
   TextBox loginBox;

   @UiField
   TextBox passwordBox;

   @UiField
   Label completionLabel1;

   @UiField
   Label completionLabel2;

   private Boolean tooShort = false;

   /*
    * Method name is not relevant, the binding is done according to the class
    * of the parameter.
    */
   @UiHandler("buttonSubmit")
   void doClickSubmit(ClickEvent event) {
      if (!tooShort) {
         Window.alert("Login Successful!");
      } else {
         Window.alert("Login or Password is too short!");
      }
   }

   @UiHandler("loginBox")
   void handleLoginChange(ValueChangeEvent<String> event) {
      if (event.getValue().length() < 6) {
         completionLabel1.setText("Login too short (Size must be > 6)");
         tooShort = true;
      } else {
         tooShort = false;
         completionLabel1.setText("");
      }
   }

   @UiHandler("passwordBox")
   void handlePasswordChange(ValueChangeEvent<String> event) {
      if (event.getValue().length() < 6) {
         tooShort = true;
         completionLabel2.setText("Password too short (Size must be > 6)");
      } else {
         tooShort = false;
         completionLabel2.setText("");
      }
   }
}

Aşağıdaki Java dosyası içeriğine sahip olalım src/com.tutorialspoint/HelloWorld.java UiBinder'in kullanımını gösterecektir.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      RootPanel.get().add(new Login());   
   }    
}

GWT tabanlı bir uygulama genellikle bir istemci tarafı modülü ve sunucu tarafı modülünden oluşur. İstemci tarafı kodu tarayıcıda çalışır ve sunucu tarafı kodu web sunucusunda çalışır. İstemci tarafı kodunun, sunucu tarafı verilerine erişmek için ağ genelinde bir HTTP isteği yapması gerekir.

RPC, Uzaktan Prosedür Çağrısı, GWT tarafından kullanılan ve istemci kodunun doğrudan sunucu tarafı yöntemlerini çalıştırabildiği mekanizma.

GWT RPC sunucu uygulaması tabanlıdır.
GWT RPC eşzamansızdır ve iletişim sırasında istemci hiçbir zaman engellenmez.
GWT RPC'yi kullanarak Java nesneleri, istemci ve sunucu arasında doğrudan gönderilebilir (bunlar, GWT çerçevesi tarafından otomatik olarak serileştirilir).
Sunucu tarafı sunucu uygulaması şu şekilde adlandırılır: service.
İstemci tarafı kodundan sunucu tarafı sunucu uygulamalarının yöntemlerini çağıran uzaktan yordam çağrısı, invoking a service.

GWT RPC Bileşenleri

GWT RPC iletişim mekanizmasında kullanılan üç bileşen aşağıdadır

Sunucuda çalışan bir uzak hizmet (sunucu tarafı sunucu uygulaması).
Bu hizmeti çağırmak için istemci kodu.
İstemci ve sunucu arasında aktarılacak Java veri nesneleri.

GWT istemcisi ve sunucusu, verileri otomatik olarak serileştirir ve serisini kaldırır, böylece geliştiricilerin nesneleri serileştirmesi / serisini kaldırması gerekmez ve veri nesneleri HTTP üzerinden seyahat edebilir.

Aşağıdaki şema RPC Mimarisini göstermektedir.

RPC'yi kullanmaya başlamak için GWT kurallarına uymamız gerekiyor.

RPC İletişim İş Akışı

Adım 1 - Serileştirilebilir Model Sınıfı Oluşturun

İstemci tarafında serileştirilebilir olması gereken bir java modeli nesnesi tanımlayın.

public class Message implements Serializable {
   ...
   private String message;
   public Message(){};

   public void setMessage(String message) {
      this.message = message;
   }
   ...
}

Adım 2 - Bir Servis Arayüzü Oluşturun

İstemci tarafında, tüm hizmet yöntemlerini listeleyen RemoteService'i genişleten bir hizmet arabirimi tanımlayın.

Hizmeti modül temel URL'sine göre varsayılan uzak sunucu uygulaması yolu ile eşlemek için @RemoteServiceRelativePath annotation özelliğini kullanın.

@RemoteServiceRelativePath("message")
public interface MessageService extends RemoteService {
   Message getMessage(String input);
}

Adım 3 - Zaman uyumsuz bir hizmet arabirimi oluşturun

GWT istemci kodunda kullanılacak olan, istemci tarafında hizmete (yukarıda belirtilen hizmetle aynı konumda) asenkron bir arabirim tanımlayın.

public interface MessageServiceAsync {
   void getMessage(String input, AsyncCallback<Message> callback);
}

Adım 4 - Service Implementation Servlet sınıfı oluşturun

Arabirimi sunucu tarafında uygulayın ve bu sınıf RemoteServiceServlet sınıfını genişletmelidir.

public class MessageServiceImpl extends RemoteServiceServlet
   implements MessageService{
   ...
   public Message getMessage(String input) {
      String messageString = "Hello " + input + "!";
      Message message = new Message();
      message.setMessage(messageString);
      return message;
   }
}

Adım 5 - Web.xml'yi Servlet bildirimini içerecek şekilde güncelleyin

Web uygulaması dağıtım tanımlayıcısını (web.xml) MessageServiceImpl Servlet bildirimini içerecek şekilde düzenleyin.

<web-app>
   ...
   <servlet>
      <servlet-name>messageServiceImpl</servlet-name>
      <servlet-class>com.tutorialspoint.server.MessageServiceImpl
      </servlet-class>
   </servlet>
   
   <servlet-mapping>
      <servlet-name>messageServiceImpl</servlet-name>
      <url-pattern>/helloworld/message</url-pattern>
   </servlet-mapping>
</web-app>

Adım 6 - Uygulama Kodunda uzaktan prosedür çağrısı yapın

Hizmet proxy sınıfını oluşturun.

MessageServiceAsync messageService = GWT.create(MessageService.class);

Sunucunun İletiyi istemciye geri döndürdüğü RPC geri aramayı işlemek için AsyncCallback İşleyicisini oluşturun

class MessageCallBack implements AsyncCallback<Message> {

   @Override
   public void onFailure(Throwable caught) {
      Window.alert("Unable to obtain server response: "
      + caught.getMessage());	
   }

   @Override
   public void onSuccess(Message result) {
      Window.alert(result.getMessage()); 
   }	   
}

Kullanıcı, UI ile etkileşime girdiğinde Uzaktan hizmeti arayın

public class HelloWorld implements EntryPoint {
   ... 
   public void onModuleLoad() {
   ...
      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            messageService.getMessage(txtName.getValue(), 
            new MessageCallBack());
         }
      });
   ...
   }
}

RPC İletişimi Tamamlandı Örneği

Bu örnek, GWT'de bir RPC İletişimi örneğini göstermek için sizi 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ı izleyin -

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'/>
   <!-- Inherit the UiBinder module.                               -->
   <inherits name = "com.google.gwt.uibinder.UiBinder"/>
   <!-- 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>
      <h1>RPC Communication Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Şimdi Message.java dosyasını oluşturun. src/com.tutorialspoint/client aşağıdaki içeriği paketleyin ve içine yerleştirin

package com.tutorialspoint.client;

import java.io.Serializable;

public class Message implements Serializable {
 
   private static final long serialVersionUID = 1L;
   private String message;
   public Message(){};

   public void setMessage(String message) {
      this.message = message;
   }

   public String getMessage() {
      return message;
   }
}

Şimdi MessageService.java dosyasını oluşturun. src/com.tutorialspoint/client aşağıdaki içeriği paketleyin ve içine yerleştirin

package com.tutorialspoint.client;

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

@RemoteServiceRelativePath("message")
public interface MessageService extends RemoteService {
   Message getMessage(String input);
}

Şimdi MessageServiceAsync.java dosyasını src/com.tutorialspoint/client aşağıdaki içeriği paketleyin ve içine yerleştirin

package com.tutorialspoint.client;

import com.google.gwt.user.client.rpc.AsyncCallback;

public interface MessageServiceAsync {
   void getMessage(String input, AsyncCallback<Message> callback);
}

Şimdi MessageServiceImpl.java dosyasını src/com.tutorialspoint/server aşağıdaki içeriği paketleyin ve içine yerleştirin

package com.tutorialspoint.server;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import com.tutorialspoint.client.Message;
import com.tutorialspoint.client.MessageService;

public class MessageServiceImpl extends RemoteServiceServlet 
   implements MessageService{

   private static final long serialVersionUID = 1L;

   public Message getMessage(String input) {
      String messageString = "Hello " + input + "!";
      Message message = new Message();
      message.setMessage(messageString);
      return message;
   }   
}

Değiştirilmiş web uygulaması dağıtım tanımlayıcısının içeriğini güncelleyin war/WEB-INF/web.xml MessageServiceImpl Servlet bildirimini dahil etmek için.

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE web-app
   PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
   "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
   <!-- Default page to serve -->
   <welcome-file-list>
      <welcome-file>HelloWorld.html</welcome-file>
   </welcome-file-list>
   
   <servlet>
      <servlet-name>messageServiceImpl</servlet-name>
      <servlet-class>com.tutorialspoint.server.MessageServiceImpl
      </servlet-class>
   </servlet>

   <servlet-mapping>
      <servlet-name>messageServiceImpl</servlet-name>
      <url-pattern>/helloworld/message</url-pattern>
   </servlet-mapping>
</web-app>

İçindeki HelloWorld.java içeriğini değiştirin src/com.tutorialspoint/client aşağıdaki ile paket

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
	
   private MessageServiceAsync messageService = 
   GWT.create(MessageService.class);

   private class MessageCallBack implements AsyncCallback<Message> {
      @Override
      public void onFailure(Throwable caught) {
         /* server side error occured */
         Window.alert("Unable to obtain server response: " + caught.getMessage());	
      }
      @Override
      public void onSuccess(Message result) {
          /* server returned result, show user the message */
         Window.alert(result.getMessage());
      }	   
   }

   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               /* make remote call to server to get the message */
               messageService.getMessage(txtName.getValue(), 
               new MessageCallBack());
            }				
         }
      });
      Label lblName = new Label("Enter your name: ");

      Button buttonMessage = new Button("Click Me!");

      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            /* make remote call to server to get the message */
            messageService.getMessage(txtName.getValue(), 
            new MessageCallBack());
         }
      });

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);
      hPanel.setCellWidth(lblName, "130");

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);

      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }    
}

GWT, JUnit test çerçevesini kullanarak istemci tarafı kodunun otomatik olarak test edilmesi için yürütme desteği sağlar. Bu yazıda GWT ve JUNIT entegrasyonunu göstereceğiz.

Junit arşivini indir

JUnit Resmi Sitesi - https://www.junit.org

İndir Junit-4.10.jar

işletim sistemi	Arşiv adı
pencereler	junit4.10.jar
Linux	junit4.10.jar
Mac	junit4.10.jar

İndirilen jar dosyasını bilgisayarınızdaki bir yerde saklayın. Onu şurada sakladıkC:/ > JUNIT

GWT kurulum klasörünü bulun

işletim sistemi	GWT kurulum klasörü
pencereler	C: \ GWT \ gwt-2.1.0
Linux	/usr/local/GWT/gwt-2.1.0
Mac	/Library/GWT/gwt-2.1.0

GWTTestCase Sınıfı

GWT sağlar GWTTestCaseJUnit entegrasyonu sağlayan temel sınıf. JUnit altında GWTTestCase'i genişleten derlenmiş bir sınıf çalıştırmak, test yürütme sırasında uygulama davranışınızı taklit etmeye yarayan HtmlUnit tarayıcısını başlatır.

GWTTestCase, JUnit TestCase'den türetilmiş bir sınıftır ve JUnit TestRunner kullanılarak çalıştırılabilir.

WebAppCreator'ı kullanma

GWT, özel bir komut satırı aracı sağlar webAppCreator bizim için bir başlangıç testi senaryosu, artı karınca hedefleri ve hem geliştirme modunda hem de üretim modunda test etmek için tutulma başlatma yapılandırmaları oluşturabilir.

Komut istemini açın ve şuraya gidin: C:\ > GWT_WORKSPACE > test desteği ile yeni bir proje oluşturmak istediğiniz yerde aşağıdaki komutu çalıştırın.

C:\GWT_WORKSPACE>C:\GWT\gwt-2.1.0\webAppCreator 
   -out HelloWorld 
   -junit C:\JUNIT\junit-4.10.jar 
   com.tutorialspoint.HelloWorld

Önemli Noktalar

WebAppCreator komut satırı yardımcı programını çalıştırıyoruz.
HelloWorld, oluşturulacak projenin adıdır
-junit seçeneği webAppCreator'a projeye junit desteği eklemesini söyler
com.tutorialspoint.HelloWorld modülün adıdır

Çıkışı doğrulayın.

Created directory HelloWorld\src
Created directory HelloWorld\war
Created directory HelloWorld\war\WEB-INF
Created directory HelloWorld\war\WEB-INF\lib
Created directory HelloWorld\src\com\tutorialspoint
Created directory HelloWorld\src\com\tutorialspoint\client
Created directory HelloWorld\src\com\tutorialspoint\server
Created directory HelloWorld\src\com\tutorialspoint\shared
Created directory HelloWorld\test\com\tutorialspoint
Created directory HelloWorld\test\com\tutorialspoint\client
Created file HelloWorld\src\com\tutorialspoint\HelloWorld.gwt.xml
Created file HelloWorld\war\HelloWorld.html
Created file HelloWorld\war\HelloWorld.css
Created file HelloWorld\war\WEB-INF\web.xml
Created file HelloWorld\src\com\tutorialspoint\client\HelloWorld.java
Created file 
HelloWorld\src\com\tutorialspoint\client\GreetingService.java
Created file 
HelloWorld\src\com\tutorialspoint\client\GreetingServiceAsync.java
Created file 
HelloWorld\src\com\tutorialspoint\server\GreetingServiceImpl.java
Created file HelloWorld\src\com\tutorialspoint\shared\FieldVerifier.java
Created file HelloWorld\build.xml
Created file HelloWorld\README.txt
Created file HelloWorld\test\com\tutorialspoint\HelloWorldJUnit.gwt.xml
Created file HelloWorld\test\com\tutorialspoint\client\HelloWorldTest.java
Created file HelloWorld\.project
Created file HelloWorld\.classpath
Created file HelloWorld\HelloWorld.launch
Created file HelloWorld\HelloWorldTest-dev.launch
Created file HelloWorld\HelloWorldTest-prod.launch

Test sınıfını anlama: HelloWorldTest.java

package com.tutorialspoint.client;

import com.tutorialspoint.shared.FieldVerifier;
import com.google.gwt.core.client.GWT;
import com.google.gwt.junit.client.GWTTestCase;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;

/**
 * GWT JUnit tests must extend GWTTestCase.
 */
public class HelloWorldTest extends GWTTestCase {

   /**
    * must refer to a valid module that sources this class.
    */
   public String getModuleName() {
      return "com.tutorialspoint.HelloWorldJUnit";
   }

   /**
    * tests the FieldVerifier.
    */
   public void testFieldVerifier() {
      assertFalse(FieldVerifier.isValidName(null));
      assertFalse(FieldVerifier.isValidName(""));
      assertFalse(FieldVerifier.isValidName("a"));
      assertFalse(FieldVerifier.isValidName("ab"));
      assertFalse(FieldVerifier.isValidName("abc"));
      assertTrue(FieldVerifier.isValidName("abcd"));
   }

   /**
    * this test will send a request to the server using the greetServer
    *  method in GreetingService and verify the response.
    */
   public void testGreetingService() {
      /* create the service that we will test. */
      GreetingServiceAsync greetingService = 
      GWT.create(GreetingService.class);
      ServiceDefTarget target = (ServiceDefTarget) greetingService;
      target.setServiceEntryPoint(GWT.getModuleBaseURL() 
      + "helloworld/greet");

      /* since RPC calls are asynchronous, we will need to wait 
       for a response after this test method returns. This line 
       tells the test runner to wait up to 10 seconds 
       before timing out. */
      delayTestFinish(10000);

      /* send a request to the server. */
      greetingService.greetServer("GWT User", 
         new AsyncCallback<String>() {
         public void onFailure(Throwable caught) {
            /* The request resulted in an unexpected error. */
            fail("Request failure: " + caught.getMessage());
         }

         public void onSuccess(String result) {
            /* verify that the response is correct. */
            assertTrue(result.startsWith("Hello, GWT User!"));

            /* now that we have received a response, we need to 
             tell the test runner that the test is complete. 
             You must call finishTest() after an asynchronous test 
             finishes successfully, or the test will time out.*/
            finishTest();
         }
      });
   }
}

Önemli Noktalar

Sr.No.	Not
1	HelloWorldTest sınıfı, HelloWorld / test dizini altındaki com.tutorialspoint.client paketinde oluşturuldu.
2	HelloWorldTest sınıfı, HelloWorld için birim test durumları içerir.
3	HelloWorldTest sınıfı, com.google.gwt.junit.client paketindeki GWTTestCase sınıfını genişletir.
4	HelloWorldTest sınıfı, GWT modülünün adını döndürmesi gereken soyut bir yönteme (getModuleName) sahiptir. HelloWorld için bu com.tutorialspoint.HelloWorldJUnit.
5	HelloWorldTest sınıfı, iki örnek test olayı testFieldVerifier, testSimple ile oluşturulur. TestGreetingService'i ekledik.
6	Bu yöntemler, GWTTestCase'in atası olan JUnit Assert sınıfından miras aldığı birçok assert * işlevinden birini kullanır.
7	AssertTrue (boolean) işlevi, iletilen boole bağımsız değişkeninin doğru olarak değerlendirildiğini iddia eder. Aksi takdirde, test JUnit'te çalıştırıldığında başarısız olur.

GWT - JUnit Entegrasyonu Tamamlandı Örneği

Bu örnek, GWT'de JUnit Entegrasyonu örneğini göstermek için sizi basit adımlardan geçirecektir.

Yukarıda oluşturduğumuz GWT uygulamasını güncellemek için aşağıdaki adımları izleyin -

Adım	Açıklama
1	Mevcut proje sihirbazını (Dosya → İçe Aktar → Genel → Mevcut Projeleri çalışma alanına) kullanarak tutulmada HelloWorld adıyla projeyi içe aktarın.
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.

Tutulmadaki proje yapısı aşağıdadır.

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'/>
   <!-- Inherit the UiBinder module.                               -->
   <inherits name = "com.google.gwt.uibinder.UiBinder"/>
   <!-- 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>
      <h1>JUnit Integration Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

İçindeki HelloWorld.java içeriğini değiştirin src/com.tutorialspoint/client aşağıdaki ile paket

package com.tutorialspoint.client;

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

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;

import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
	
   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               Window.alert(getGreeting(txtName.getValue()));
            }				
         }
      });
      Label lblName = new Label("Enter your name: ");

      Button buttonMessage = new Button("Click Me!");

      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            Window.alert(getGreeting(txtName.getValue()));
         }
      });

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);
      hPanel.setCellWidth(lblName, "130");

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);

      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }  
   
   public String getGreeting(String name){
      return "Hello "+name+"!";
   }
}

HelloWorldTest.java'nın içeriğini şurada değiştirin: test/com.tutorialspoint/client aşağıdaki ile paket

package com.tutorialspoint.client;

import com.tutorialspoint.shared.FieldVerifier;
import com.google.gwt.core.client.GWT;
import com.google.gwt.junit.client.GWTTestCase;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;

/**
 * GWT JUnit tests must extend GWTTestCase.
 */
public class HelloWorldTest extends GWTTestCase {

   /**
    * must refer to a valid module that sources this class.
    */
   public String getModuleName() {
      return "com.tutorialspoint.HelloWorldJUnit";
   }

   /**
    * tests the FieldVerifier.
    */
   public void testFieldVerifier() {
      assertFalse(FieldVerifier.isValidName(null));
      assertFalse(FieldVerifier.isValidName(""));
      assertFalse(FieldVerifier.isValidName("a"));
      assertFalse(FieldVerifier.isValidName("ab"));
      assertFalse(FieldVerifier.isValidName("abc"));
      assertTrue(FieldVerifier.isValidName("abcd"));
   }

   /**
      * this test will send a request to the server using the greetServer
      *  method in GreetingService and verify the response.
   */
   public void testGreetingService() {
      /* create the service that we will test. */
      GreetingServiceAsync greetingService = 
      GWT.create(GreetingService.class);
      ServiceDefTarget target = (ServiceDefTarget) greetingService;
      target.setServiceEntryPoint(GWT.getModuleBaseURL() 
      + "helloworld/greet");

      /* since RPC calls are asynchronous, we will need to wait 
       for a response after this test method returns. This line 
       tells the test runner to wait up to 10 seconds 
       before timing out. */
      delayTestFinish(10000);

      /* send a request to the server. */
      greetingService.greetServer("GWT User", 
         new AsyncCallback<String>() {
         public void onFailure(Throwable caught) {
            /* The request resulted in an unexpected error. */
            fail("Request failure: " + caught.getMessage());
         }

         public void onSuccess(String result) {
            /* verify that the response is correct. */
            assertTrue(result.startsWith("Hello, GWT User!"));

            /* now that we have received a response, we need to 
             tell the test runner that the test is complete. 
             You must call finishTest() after an asynchronous test 
             finishes successfully, or the test will time out.*/
            finishTest();
         }
      });
	
      /**
         * tests the getGreeting method.
      */
      public void testGetGreeting() {
         HelloWorld helloWorld = new HelloWorld();
         String name = "Robert";
         String expectedGreeting = "Hello "+name+"!";
         assertEquals(expectedGreeting,helloWorld.getGreeting(name));
      }
   }
}

Oluşturulan başlatma yapılandırmalarını kullanarak Eclipse'de test senaryoları çalıştırın

Hem geliştirme modu hem de üretim modu için webAppCreator tarafından oluşturulan başlatma yapılandırmalarını kullanarak Eclipse'de birim testleri çalıştıracağız.

JUnit testini geliştirme modunda çalıştırın

Eclipse menü çubuğundan Çalıştır → Yapılandırmaları Çalıştır ... öğesini seçin.
JUnit bölümü altında HelloWorldTest-dev'i seçin
Değişkenlerdeki değişiklikleri kaydetmek için Uygula'ya basın
Testi çalıştırmak için Çalıştır'a basın

Başvurunuzda her şey yolundaysa, bu aşağıdaki sonucu verecektir -

JUnit testini üretim modunda çalıştırın

Eclipse menü çubuğundan Çalıştır → Yapılandırmaları Çalıştır ... öğesini seçin.
JUnit bölümü altında HelloWorldTest-prod'u seçin
Değişkenlerdeki değişiklikleri kaydetmek için Uygula'ya basın
Testi çalıştırmak için Çalıştır'a basın

Başvurunuzda her şey yolundaysa, bu aşağıdaki sonucu verecektir -

GWT, istemci tarafında ve sunucu tarafı kodunda hata ayıklama becerisi sağlar.

Geliştirme modunda, GWT Uygulaması Java kodu tabanlıdır ve JavaScript'e çevrilmez.

Bir uygulama geliştirme modunda çalışırken, Java Sanal Makinesi (JVM) aslında bir tarayıcı penceresine bağlanmak için GWT özelliğini kullanarak uygulama kodunu derlenmiş Java bayt kodu olarak çalıştırır.

GWT, JVM'ye bağlanmak için tarayıcı tabanlı eklenti kullanır.

Dolayısıyla, geliştiriciler hem istemci tarafı GWT Kodunda hem de sunucu tarafı kodunda hata ayıklamak için herhangi bir Java tabanlı IDE kullanmakta özgürdür.

Bu makalede, Eclipse kullanarak GWT İstemci kodunda hata ayıklamanın kullanımını göstereceğiz. Aşağıdaki görevleri yapacağız -

Kodda kesme noktaları ayarlayın ve bunları BreakPoint Explorer'da görün.
Hata ayıklama sırasında kodda satır satır ilerleyin.
Değişkenin değerlerini görüntüleyin.
Tüm değişkenlerin değerlerini inceleyin.
Bir ifadenin değerini inceleyin.
Askıdaki iplikler için yığın çerçevesini görüntüleyin.

Hata Ayıklama Örneği

Bu örnek, bir GWT uygulamasında hata ayıklamayı göstermek için sizi 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ı izleyin -

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

.gwt-Label{ 
   font-size: 150%; 
   font-weight: bold;
   color:red;
   padding:5px;
   margin:5px;
}

Aşağıda, değiştirilmiş HTML ana bilgisayar dosyasının içeriği verilmiştir war/HelloWorld.html iki düğmeyi barındırmak için.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Debugging Application Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Aşağıdaki Java dosyası içeriğine sahip olalım src/com.tutorialspoint/HelloWorld.java hangisini kullanarak GWT Kodunun hata ayıklama yeteneğini göstereceğiz.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
	
   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               Window.alert(getGreeting(txtName.getValue()));
            }				
         }
      });
      Label lblName = new Label("Enter your name: ");

      Button buttonMessage = new Button("Click Me!");

      buttonMessage.addClickHandler(new ClickHandler() {			
      @Override
      public void onClick(ClickEvent event) {
         Window.alert(getGreeting(txtName.getValue()));
      }});

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);
      hPanel.setCellWidth(lblName, "130");

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);

      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }  
   
   public String getGreeting(String name){
      return "Hello "+name+"!";
   }
}

Adım 1 - BreakPoint'leri yerleştirin

İlk satırına bir kesme noktası yerleştirin onModuleLoad() HelloWorld.java arasında

Adım 2 - Uygulamada Hata Ayıklama

Şimdi

Debug application menüsüne tıklayın ve seçinHelloWorld uygulamada hata ayıklama uygulaması.

Her şey yolundaysa, aşağıda gösterildiği gibi bir URL içeren Eclipse'de GWT Geliştirme Modunun etkin olduğunu görmelisiniz. GWT uygulamasını açmak için URL'ye çift tıklayın.

Uygulama başlar başlamaz, kesme noktasını giriş noktası yönteminin ilk satırına yerleştirdiğimiz için Eclipse kesme noktasına odaklandığını göreceksiniz.

Askıya alınmış iş parçacıkları için yığın izini görebilirsiniz.

İfadelerin değerlerini görebilirsiniz.

Yerleştirilen kesme noktalarının listesini görebilirsiniz.

Şimdi onModuleLoad () yönteminin son satırına ulaşana kadar F6'ya basmaya devam edin. İşlev tuşları için referans olarak, F6 kodu satır satır inceler, F5 daha ileri adım atar ve F8 uygulamaya devam eder. Artık onModuleLoad () yönteminin tüm değişkenlerinin değerlerinin listesini görebilirsiniz.

GWT istemci kodu, bir Java Uygulamasının hata ayıklamasıyla aynı şekilde ayıklanabilir. Herhangi bir satıra kesme noktaları yerleştirin ve GWT'nin hata ayıklama yetenekleriyle oynayın.

GWT, bir GWT uygulamasını uluslararasılaştırmak için üç yol sağlar. Static String Internationalization'ın projeler arasında en yaygın olarak kullanıldığını göstereceğiz.

Sr.No.	Teknik ve Açıklama
1	Static String Internationalization Bu teknik en yaygın olanıdır ve çalışma zamanında çok az ek yük gerektirir; hem sabit hem de parametreleştirilmiş dizeleri çevirmek için çok etkili bir tekniktir; uygulaması en basitidir. Statik dize uluslararasılaştırma, çevrilmiş dizeleri ve parametreleştirilmiş mesajları depolamak için standart Java özellik dosyalarını kullanır ve değerlerini almak için güçlü biçimde yazılmış Java arabirimleri oluşturulur.
2	Dynamic String Internationalization Bu teknik çok esnektir ancak statik dizi uluslararasılaştırmadan daha yavaştır. Ana bilgisayar sayfası yerelleştirilmiş dizeleri içerir, bu nedenle, yeni bir yerel ayar eklediğimizde uygulamaların yeniden derlenmesine gerek yoktur. GWT uygulaması mevcut bir sunucu tarafı yerelleştirme sistemi ile entegre edilecekse, bu teknik kullanılacaktır.
3	Localizable Interface Bu teknik, üç teknik arasında en güçlü olanıdır. Localizable'ı uygulamak, özel türlerin yerelleştirilmiş sürümlerini oluşturmamıza olanak tanır. Gelişmiş bir uluslararasılaştırma tekniğidir.

Bir GWT Uygulamasını Uluslararasılaştırma İş Akışı

Adım 1 - Özellikler dosyaları oluşturun

Uygulamada kullanılacak mesajları içeren özellikler dosyası oluşturun. Bir yarattıkHelloWorldMessages.properties örneğimizdeki dosyası.

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

Yere özgü çevrilmiş değerleri içeren özellikler dosyaları oluşturun. Bir yarattıkHelloWorldMessages_de.propertiesörneğimizdeki dosyası. Bu dosya, Almanca çevirileri içermektedir. _de almanca yerel ayarı belirtir ve biz uygulamamızda almanca dilini destekleyeceğiz.

Eclipse kullanarak özellikler dosyası oluşturuyorsanız, dosyanın kodlamasını UTF-8 olarak değiştirin. Dosyayı seçin ve ardından özellikler penceresini açmak için dosyaya sağ tıklayın. Other UTF-8. Değişikliği uygulayın ve kaydedin.

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

Adım 2 - i18n modülünü Module Descriptor XML Dosyasına ekleyin

Modül dosyasını güncelle HelloWorld.gwt.xml almanca yerel ayarı için desteği dahil etmek

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   ...
   <extend-property name = "locale" values="de" />
   ...
</module>

Adım 3 - Özellikler dosyasına eşdeğer Arayüz oluşturun

GWT'nin Mesajlar arayüzünü içselleştirme desteği içerecek şekilde genişleterek HelloWorldMessages.java arayüzü oluşturun. Özellikler dosyasındaki anahtarlarla aynı yöntem adlarını içermelidir. Yer tutucu, Dize bağımsız değişkeni ile değiştirilir.

public interface HelloWorldMessages extends Messages {
	
   @DefaultMessage("Enter your name")
   String enterName();
 
   @DefaultMessage("Click Me")
   String clickMe();
 
   @DefaultMessage("Application Internalization Demonstration")
   String applicationTitle();

   @DefaultMessage("Hello {0}")
   String greeting(String name);
}

Adım 4 - UI bileşeninde Mesaj Arayüzünü kullanın.

Nesnesini kullanın HelloWorldMessages içinde HelloWorld mesajları almak için.

public class HelloWorld implements EntryPoint {
   
   /* create an object of HelloWorldMessages interface 
      using GWT.create() method */
   private HelloWorldMessages messages = 
   GWT.create(HelloWorldMessages.class);
   
   public void onModuleLoad() {
   ...
      Label titleLabel = new Label(messages.applicationTitle());
      //Add title to the application
      RootPanel.get("gwtAppTitle").add(titleLabel);
   ...
   }
}

Uluslararasılaştırma - Tam Örnek

Bu örnek, sizi bir GWT uygulamasının Uluslararasılaştırma yeteneğini 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ı izleyin -

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'/>
  <extend-property name = "locale" values="de" />
  <!-- 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>

      <h1 id = "gwtAppTitle"></h1>
      <div id = "gwtContainer"></div>

   </body>
</html>

Şimdi HelloWorldMessages.properties dosyasını oluşturun. src/com.tutorialspoint/client aşağıdaki içeriği paketleyin ve içine yerleştirin

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

Şimdi HelloWorldMessages_de.properties dosyasını oluşturun. src/com.tutorialspoint/client aşağıdaki içeriği paketleyin ve içine yerleştirin

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

Şimdi HelloWorldMessages.java sınıfını src/com.tutorialspoint/client aşağıdaki içeriği paketleyin ve içine yerleştirin

package com.tutorialspoint.client;
import com.google.gwt.i18n.client.Messages;

public interface HelloWorldMessages extends Messages {	
   @DefaultMessage("Enter your name")
   String enterName();
 
   @DefaultMessage("Click Me")
   String clickMe();
 
   @DefaultMessage("Application Internationalization Demonstration")
   String applicationTitle();

   @DefaultMessage("Hello {0}")
   String greeting(String name);
}

Aşağıdaki Java dosyası içeriğine sahip olalım src/com.tutorialspoint/HelloWorld.java bunu kullanarak GWT Kodunun Uluslararasılaştırma yeteneğini göstereceğiz.

package com.tutorialspoint.client;

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

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;

import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   /* create an object of HelloWorldMessages interface 
      using GWT.create() method */
   private HelloWorldMessages messages = 
   GWT.create(HelloWorldMessages.class);
   
   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               Window.alert(getGreeting(txtName.getValue()));
            }				
         }
      });
      Label lblName = new Label(messages.enterName() + ": ");

      Button buttonMessage = new Button(messages.clickMe() + "!");

      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            Window.alert(getGreeting(txtName.getValue()));
         }
      });

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);      

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);
      Label titleLabel = new Label(messages.applicationTitle());
      //Add title to the application
      RootPanel.get("gwtAppTitle").add(titleLabel);
      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }  
   
   public String getGreeting(String name){
      return messages.greeting(name + "!");
   }
}

Şimdi URL'yi locale = de.Set URL - http://127.0.0.1:8888/HelloWorld.html?gwt.codesvr=127.0.0.1:9997 içerecek şekilde güncelleyin&locale=de. Başvurunuzda her şey yolundaysa, bu aşağıdaki sonucu verecektir -

GWT uygulamaları normalde JavaScripts çalıştıran tek sayfalı bir uygulamadır ve çok sayıda sayfa içermez, bu nedenle tarayıcı, Uygulama ile kullanıcı etkileşimini takip etmez. Tarayıcının geçmiş işlevini kullanmak için uygulama, gezilebilir her sayfa için benzersiz bir URL parçası oluşturmalıdır.

GWT sağlar History Mechanism bu durumu halletmek için.

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.

Örneğin, "pageIndex1" adlı bir geçmiş jetonu bir URL'ye aşağıdaki gibi eklenir -

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

Geçmiş Yönetimi İş Akışı

Adım 1 - Geçmiş desteğini etkinleştirin

GWT Geçmiş desteğini kullanmak için önce aşağıdaki iframe'i ana HTML sayfamıza yerleştirmeliyiz.

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

Adım 2 - Geçmişe jeton ekleyin

Örnek istatistikleri takip ederek tarayıcı geçmişine jeton ekleme

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

Adım 3 - Jetonu Geçmişten geri alın

Kullanıcı tarayıcının geri / ileri düğmesini kullandığında, jetonu geri alacağız ve uygulama durumumuzu buna göre güncelleyeceğiz.

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

Şimdi Tarih Sınıfını İş Başında görelim.

Tarih Sınıfı - Tam Örnek

Bu örnek, bir GWT uygulamasının Geçmiş Yönetimini göstermek için sizi 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ı izleyin -

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> History Class Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Aşağıdaki Java dosyası içeriğine sahip olalım src/com.tutorialspoint/HelloWorld.java kullanarak GWT Kodunda Geçmiş Yönetimini göstereceğiz.

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

Şimdi farklı sayfalar seçmek için her sekmeye tıklayın.
Her sekme seçildiğinde, uygulama url'sinin değiştiğini ve #pageIndex URL'sine 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.

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 .

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

Ş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.

Günlük çerçevesi java.util.logging'e öykünür, bu nedenle aynı sözdizimini kullanır ve sunucu tarafı günlüğe kaydetme koduyla aynı davranışa sahiptir.

GWT günlük kaydı, .gwt.xml dosyaları kullanılarak yapılandırılır.

Günlük kaydını etkinleştirilecek / devre dışı bırakılacak şekilde yapılandırabiliriz; belirli işleyicileri etkinleştirebilir / devre dışı bırakabilir ve varsayılan günlük düzeyini değiştirebiliriz.

Kaydedici Türleri

Kaydediciler, Kök Kaydedici ağacın kökünde olacak şekilde bir ağaç yapısında düzenlenir.

Kaydedicinin adı, aşağıdakileri kullanarak Üst / Alt ilişkilerini belirler . adın bölümlerini ayırmak için.

Örnek olarak, Hospital.room1 ve Hospital.room2 olmak üzere iki kaydedicimiz varsa, ebeveynleri Hospital adlı logger olmak üzere kardeşlerdir. Hastane kaydedici (ve nokta "." İçermeyen bir ada sahip herhangi bir kaydedici) ana olarak Kök Kaydediciye sahiptir.

private static Logger room1Logger = Logger.getLogger("Hospital.room1");
private static Logger room2Logger = Logger.getLogger("Hospital.room2");
private static Logger hospitalLogger = Logger.getLogger("Hospital");
private static Logger rootLogger = Logger.getLogger("");

Günlük İşleyiciler

GWT, günlükler kullanılarak yapılan günlük girişlerini gösteren varsayılan işleyiciler sağlar.

İşleyici	Günlükleri	Açıklama
SystemLogHandler	standart çıkış	Bu mesajlar yalnızca DevMode penceresinde Geliştirme Modunda görülebilir.
DevelopmentModeLogHandler	DevMode Penceresi	GWT.log yöntemini çağırarak günlükler. Bu mesajlar yalnızca DevMode penceresinde Geliştirme Modunda görülebilir.
ConsoleLogHandler	javascript konsolu	Firebug Lite (IE için), Safari ve Chrome tarafından kullanılan javascript konsolunun günlükleri.
FirebugLogHandler	Kundakçı	Firebug konsolunun günlükleri.
PopupLogHandler	açılır	Bu işleyici etkinleştirildiğinde uygulamanın sol üst köşesinde bulunan açılır pencerenin günlüğünü tutar.
SimpleRemoteLogHandler	sunucu	Bu işleyici, günlük mesajlarını sunucuya gönderir ve burada sunucu tarafı günlüğe kaydetme mekanizması kullanılarak günlüğe kaydedilir.

GWT Uygulamasında Günlük Kaydını Yapılandırma

HelloWorld.gwt.xml dosyası, GWT günlüğünü etkinleştirmek için aşağıdaki şekilde yapılandırılacaktır -

# add logging module
   <inherits name = "com.google.gwt.logging.Logging"/>                
# To change the default logLevel 
   <set-property name = "gwt.logging.logLevel" value = "SEVERE"/>  
# To enable logging   
   <set-property name = "gwt.logging.enabled" value = "TRUE"/>       
# To disable a popup Handler   
   <set-property name = "gwt.logging.popupHandler" value = "DISABLED" />

Kullanıcı eylemlerini günlüğe kaydetmek için günlük kaydediciyi kullanın

/* Create Root Logger */
private static Logger rootLogger = Logger.getLogger("");
...
rootLogger.log(Level.SEVERE, "pageIndex selected: " + event.getValue());
...

Günlük Çerçevesi Örneği

Bu örnek, bir GWT uygulamasının Günlüğe Kaydetme Yeteneğini göstermek için sizi 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ı izleyin -

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'/>
   <inherits name = "com.google.gwt.logging.Logging"/>
   <!-- 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'/>
   <set-property name = "gwt.logging.logLevel" value="SEVERE"/>          
   <set-property name = "gwt.logging.enabled" value = "TRUE"/>            
   <set-property name = "gwt.logging.popupHandler" value=  "DISABLED" />
</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> Logging 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 java.util.logging.Level;
import java.util.logging.Logger;

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.logging.client.HasWidgetsLogHandler;

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;
   /* Create Root Logger */
   private static Logger rootLogger = Logger.getLogger("");
   private VerticalPanel customLogArea;

   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());	
            rootLogger.log(Level.SEVERE, "pageIndex selected: " 
            + event.getValue());			
         }
      });

      selectTab(initToken);

      VerticalPanel vPanel = new VerticalPanel();

      vPanel.setSpacing(10);
      vPanel.add(tabPanel);
      vPanel.add(linksHPanel);
	  
      customLogArea = new VerticalPanel();	   
      vPanel.add(customLogArea);

      /* an example of using own custom logging area. */
      rootLogger.addHandler(new HasWidgetsLogHandler(customLogArea));

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

Şimdi 1, 2 veya 3'e tıklayın. 1,2 veya 3'e tıkladığınızda, pageIndex'i görüntüleyerek günlüğün yazdırıldığını görebilirsiniz. Eclipse'de Konsol çıktısını kontrol edin. Günlüğün Eclipse konsolunda da yazdırıldığını görebilirsiniz.

Fri Aug 31 11:42:35 IST 2012 
SEVERE: pageIndex selected: pageIndex0
Fri Aug 31 11:42:37 IST 2012 
SEVERE: pageIndex selected: pageIndex1
Fri Aug 31 11:42:38 IST 2012 
SEVERE: pageIndex selected: pageIndex2
Fri Aug 31 11:42:40 IST 2012 
SEVERE: pageIndex selected: pageIndex0
Fri Aug 31 11:42:41 IST 2012 
SEVERE: pageIndex selected: pageIndex1
Fri Aug 31 11:42:41 IST 2012 
SEVERE: pageIndex selected: pageIndex2

Şimdi modül tanımlayıcısını güncelleyin src/com.tutorialspoint/HelloWorld.gwt.xml popupHandler'ı etkinleştirmek için.

<?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'/>
   <inherits name = "com.google.gwt.logging.Logging"/>
   <!-- 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'/>
   <set-property name = "gwt.logging.logLevel" value = "SEVERE"/>          
   <set-property name = "gwt.logging.enabled" value = "TRUE"/>            
   <set-property name="gwt.logging.popupHandler" value = "ENABLED" />
</module>

Yapılan tüm değişikliklere hazır olduğunuzda, tarayıcı penceresini yenileyerek uygulamayı yeniden yükleyin (tarayıcının F5 / yeniden yükle düğmesine basın). Şimdi uygulamanın sol üst köşesinde bir açılır pencere bulunduğuna dikkat edin.

Şimdi 1, 2 veya 3'e tıklayın. 1,2 veya 3'e tıkladığınızda, açılır pencerede pageIndex'i görüntüleyerek günlüğün yazdırıldığını görebilirsiniz.