GWT - Terapkan Aplikasi

Tutorial ini akan menjelaskan cara membuat aplikasi "war" file dan cara menyebarkannya di root Apache Tomcat Websever.

Jika Anda memahami contoh sederhana ini, Anda juga dapat menerapkan aplikasi GWT yang kompleks dengan mengikuti langkah-langkah yang sama.

Biarkan kami menjalankan Eclipse IDE bersama dengan plugin GWT dan ikuti langkah-langkah berikut untuk membuat aplikasi GWT -

Langkah	Deskripsi
1	Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint seperti yang dijelaskan di bab GWT - Membuat Aplikasi .
2	Modifikasi HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html dan HelloWorld.java seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3	Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.
4	Terakhir, zip konten folder perang aplikasi dalam bentuk file perang dan gunakan di Webserver Apache Tomcat.
5	Luncurkan aplikasi web Anda menggunakan URL yang sesuai seperti yang dijelaskan di bawah ini pada langkah terakhir.

Berikut adalah isi dari deskriptor modul yang dimodifikasi 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>

Berikut ini adalah konten file Style Sheet yang dimodifikasi 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;
}

Berikut adalah konten dari file host HTML yang dimodifikasi 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>

Saya memodifikasi HTML sedikit dari contoh sebelumnya. Di sini saya membuat placeholder <div> ... </div> di mana kami akan memasukkan beberapa konten menggunakan kelas java titik entri kami. Jadi mari kita ikuti konten file Java berikutsrc/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);
   }
}

Di sini kami membuat HTML terluas dasar dan menambahkannya ke dalam tag div yang memiliki id = "gwtContainer". Kami akan mempelajari widget GWT yang berbeda di bab-bab selanjutnya.

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode pengembangan seperti yang kita lakukan di bab GWT - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, ini akan menghasilkan hasil sebagai berikut -