GWT - Aplikasi
Sebelum kita mulai membuat aplikasi "HelloWorld" yang sebenarnya menggunakan GWT, mari kita lihat apa saja bagian sebenarnya dari aplikasi GWT -
Aplikasi GWT terdiri dari empat bagian penting berikut yang merupakan bagian terakhir opsional tetapi tiga bagian pertama wajib.
- Deskriptor modul
- Sumber daya publik
- Kode sisi klien
- Kode sisi server
Lokasi sampel dari berbagai bagian aplikasi gwt biasa HelloWord akan seperti yang ditunjukkan di bawah ini -
| Nama | Lokasi |
|---|---|
| Akar proyek | Halo Dunia/ |
| Deskriptor modul | src / com / tutorialspoint / HelloWorld.gwt.xml |
| Sumber daya publik | src / com / tutorialspoint / war / |
| Kode sisi klien | src / com / tutorialspoint / klien / |
| Kode sisi server | src / com / tutorialspoint / server / |
Penjelas Modul
Deskriptor modul adalah file konfigurasi dalam bentuk XML yang digunakan untuk mengonfigurasi aplikasi GWT.
Ekstensi file deskriptor modul adalah * .gwt.xml, dengan * adalah nama aplikasi dan file ini harus berada di root project.
Berikut ini akan menjadi deskriptor modul default HelloWorld.gwt.xml untuk aplikasi HelloWorld -
<?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>Berikut adalah detail singkat tentang berbagai bagian yang digunakan dalam deskriptor modul.
| Sr.No. | Node & Deskripsi |
|---|---|
| 1 |
<module rename-to = "helloworld"> Ini memberikan nama aplikasi. |
| 2 |
<inherits name = "logical-module-name" /> Ini menambahkan modul gwt lain di aplikasi seperti import di aplikasi java. Sejumlah modul dapat diwariskan dengan cara ini. |
| 3 |
<entry-point class = "classname" /> Ini menentukan nama kelas yang akan mulai memuat Aplikasi GWT. Sejumlah kelas titik masuk dapat ditambahkan dan mereka dipanggil secara berurutan sesuai urutan kemunculannya di file modul. Jadi, ketika onModuleLoad () dari titik masuk pertama Anda selesai, titik masuk berikutnya segera dipanggil. |
| 4 |
<source path = "path" /> Ini menentukan nama folder sumber yang akan dicari oleh kompiler GWT untuk kompilasi sumber. |
| 5 |
<public path = "path" /> Jalur publik adalah tempat di project Anda tempat sumber daya statis yang dirujuk oleh modul GWT Anda, seperti CSS atau gambar, disimpan. Jalur publik default adalah subdirektori publik di bawah tempat File XML Modul disimpan. |
| 6 |
<script src="js-url" /> Secara otomatis memasukkan file JavaScript eksternal yang terletak di lokasi yang ditentukan oleh src. |
| 7 |
<stylesheet src="css-url" /> Secara otomatis memasukkan file CSS eksternal yang terletak di lokasi yang ditentukan oleh src. |
Sumber Daya Publik
Ini semua adalah file yang direferensikan oleh modul GWT Anda, seperti halaman Host HTML, CSS, atau gambar.
Lokasi sumber daya ini dapat dikonfigurasi menggunakan elemen <public path = "path" /> dalam file konfigurasi modul. Secara default, ini adalah subdirektori publik di bawah tempat File XML Modul disimpan.
Saat Anda mengompilasi aplikasi Anda ke JavaScript, semua file yang dapat ditemukan di jalur publik Anda disalin ke direktori output modul.
Sumber daya publik yang paling penting adalah halaman host yang digunakan untuk menjalankan aplikasi GWT yang sebenarnya. Halaman host HTML biasa untuk aplikasi mungkin tidak menyertakan konten body HTML yang terlihat sama sekali, tetapi selalu diharapkan untuk menyertakan aplikasi GWT melalui tag <script ... /> sebagai berikut
<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>Berikut adalah contoh style sheet yang telah kami sertakan di halaman host kami -
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;
}Kode sisi klien
Ini adalah kode Java sebenarnya yang ditulis mengimplementasikan logika bisnis aplikasi dan yang diterjemahkan oleh compiler GWT ke dalam JavaScript, yang pada akhirnya akan berjalan di dalam browser. Lokasi sumber daya ini dapat dikonfigurasi menggunakan elemen <source path = "path" /> dalam file konfigurasi modul.
Sebagai contoh Entry Point kode akan digunakan sebagai kode sisi klien dan lokasinya akan ditentukan menggunakan <source path = "path" />.
Sebuah modul entry-point adalah kelas apa pun yang dapat ditetapkan EntryPointdan itu bisa dibuat tanpa parameter. Ketika sebuah modul dimuat, setiap kelas titik entri dibuat instance-nya dan nilainyaEntryPoint.onModuleLoad()metode dipanggil. Contoh kelas Titik Masuk HelloWorld adalah sebagai berikut -
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
Window.alert("Hello, World!");
}
}Kode Sisi Server
Ini adalah bagian sisi server dari aplikasi Anda dan sangat opsional. Jika Anda tidak melakukan pemrosesan backend dengan aplikasi Anda, maka Anda tidak memerlukan bagian ini, tetapi jika ada beberapa pemrosesan yang diperlukan di backend dan aplikasi sisi klien Anda berinteraksi dengan server, maka Anda harus mengembangkan komponen ini.
Bab selanjutnya akan menggunakan semua konsep yang disebutkan di atas untuk membuat aplikasi HelloWorld menggunakan Eclipse IDE.