GWT - Uygulama Oluştur
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'yi kullanarak basit bir Web Uygulama Projesi oluşturmaktır. Seçeneği kullanarak proje sihirbazını başlatınGoogle Icon
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 ve 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. WEB-INF derlenmiş sınıflar, gwt kitaplıkları, sunucu uygulaması kitaplıkları içerir. 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 resimler 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
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.029sAdım 7 - Uygulamayı Çalıştırın
Şimdi
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örebilmelisiniz
Tebrikler! Google Web Toolkit (GWT) kullanarak ilk uygulamanızı uyguladınız.