GWT - Uygulamalar

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.