Pengantar GWT

1. Perkenalan

GWT atau Google Web Toolkit adalah kerangka kerja untuk membangun aplikasi web berkinerja tinggi di Java .

Dalam tutorial ini, kita akan fokus dan membahas beberapa kapabilitas dan fungsionalitas utamanya.

2. SDK GWT

SDK berisi pustaka API Java, kompiler, dan server pengembangan.

2.1. API Java

GWT API memiliki kelas untuk membuat antarmuka pengguna, melakukan panggilan server, internasionalisasi, melakukan pengujian unit. Untuk mempelajari lebih lanjut, periksa dokumentasi java di sini.

2.2. Penyusun

Sederhananya, kompiler GWT adalah penerjemah sumber dari kode Java ke dalam Javascript . Hasil kompilasi tersebut berupa aplikasi Javascript.

Logika kerjanya mencakup pemangkasan kelas yang tidak digunakan, metode, bidang dari kode dan memperpendek nama Javascript.

Karena keunggulan ini, kami tidak perlu lagi menyertakan pustaka Ajax dalam proyek Javascript kami. Tentu saja, Anda juga dapat mengatur petunjuk saat menyusun kode.

Berikut beberapa parameter GWTCompiler yang berguna :

  • -logLevel - untuk mengatur salah satu dari ERROR, WARN, INFO, TRACE, DEBUG, SPAM, SEMUA level logging
  • -workdir - direktori kerja kompiler
  • -gen - direktori untuk menulis file yang dihasilkan
  • -out - direktori file keluaran
  • -optimize - Menyetel level pengoptimalan compiler dari 0 hingga 9
  • -style - gaya keluaran skrip OBF, PRETTY atau DETAILED
  • -module [s] - nama modul yang akan dikompilasi

3. Penyiapan

SDK terbaru tersedia di halaman unduhan. Sisa penyiapan tersedia di halaman memulai.

3.1. Maven

Untuk menyiapkan proyek dengan Maven, kita perlu menambahkan dependensi berikut ke pom.xml :

 com.google.gwt gwt-servlet runtime   com.google.gwt gwt-user provided   com.google.gwt gwt-dev provided 

Pustaka gwt-servlet mendukung komponen sisi server untuk menjalankan titik akhir GWT-RPC. gwt-user berisi Java API yang akan kita gunakan untuk membangun aplikasi web kita . gwt-dev memiliki kode untuk kompilator, penerapan, atau hosting aplikasi.

Untuk memastikan bahwa semua dependensi menggunakan versi yang sama, kita perlu menyertakan dependensi GWT induk:

 com.google.gwt gwt 2.8.2 pom import 

Semua artefak tersedia untuk diunduh di Maven Central.

4. Penerapan

Mari kita membangun aplikasi web sederhana. Ini akan mengirim pesan ke server dan menampilkan responsnya.

Secara umum, aplikasi GWT terdiri dari server dan bagian klien . Sisi klien membuat permintaan HTTP untuk terhubung dengan server. Untuk memungkinkannya, GWT menggunakan Remote Procedure Call atau hanya mekanisme RPC.

5. GWT dan RPC

Kembali ke aplikasi kita, mari kita lihat bagaimana komunikasi RPC dibuat. Untuk tujuan itu, kami membuat layanan untuk menerima pesan dari server.

Mari pertama-tama buat antarmuka:

@RemoteServiceRelativePath("greet") public interface MessageService extends RemoteService { String sendMessage(String message) throws IllegalArgumentException; }

The @RemoteServiceRelativePath penjelasan peta layanan untuk modul pesan / URL relatif. MessageService harus diperluas dari antarmuka penanda RemoteService untuk melakukan komunikasi RPC .

Implementasi MessageService ada di sisi server:

public class MessageServiceImpl extends RemoteServiceServlet implements MessageService { public String sendMessage(String message) throws IllegalArgumentException { if (message == null) { throw new IllegalArgumentException("message is null"); } return "Hello, " + message + "!

Time received: " + LocalDateTime.now(); } }

Kelas server kami meluas dari kelas servlet dasar RemoteServiceServlet . Ini akan secara otomatis menghentikan permintaan masuk dari klien dan membuat serial tanggapan keluar dari server .

Sekarang mari kita lihat bagaimana kita menggunakannya dari sisi klien. The MessageService hanya versi definitif dari layanan kami .

Untuk bekerja di sisi klien, kita perlu membuat versi asinkron dari layanan kita:

public interface MessageServiceAsync { void sendMessage(String input, AsyncCallback callback) throws IllegalArgumentException; }

Di sini kita bisa melihat argumen tambahan dalam metode getMessage () . Kita membutuhkan async untuk memberi tahu UI ketika panggilan asinkron selesai . Dengan cara ini kami mencegah pemblokiran thread UI yang berfungsi.

6. Komponen dan Siklus Hidupnya

SDK menawarkan beberapa elemen UI dan tata letak untuk mendesain antarmuka grafis.

Secara umum, semua komponen UI diturunkan dari kelas Widget . Secara visual kami memiliki widget elemen yang dapat kami lihat, klik, atau pindahkan di layar:

  • widget komponen - TextBox , TextArea , Button , RadioButton , CheckBox , dll…

dan ada tata letak atau widget panel yang menyusun dan mengatur layar:

  • widget panel - HorizontalPanel , VerticalPanel , PopupPanel , TabPanel , dll…

Setiap kali kami menambahkan widget atau komponen lainnya ke kode, GWT bekerja keras untuk menghubungkan elemen tampilan dengan DOM browser .

Konstruktor selalu menginisialisasi elemen root DOM. Saat kita memasang widget anak ke komponen induk, itu juga menyebabkan pengikatan pada tingkat DOM . Kelas titik masuk berisi fungsi pemuatan yang akan dipanggil pertama kali. Di sinilah kami mendefinisikan widget kami.

7. Titik Masuk

Mari kita lihat lebih dekat titik masuk utama aplikasi:

public class Google_web_toolkit implements EntryPoint { private MessageServiceAsync messageServiceAsync = GWT.create(MessageService.class); public void onModuleLoad() { Button sendButton = new Button("Submit"); TextBox nameField = new TextBox(); nameField.setText("Hi there"); sendButton.addStyleName("sendButton"); RootPanel.get("nameFieldContainer").add(nameField); RootPanel.get("sendButtonContainer").add(sendButton); } }

Setiap kelas UI mengimplementasikan antarmuka com.google.gwt.core.client.EntryPoint untuk menandainya sebagai entri utama untuk modul . Ini terhubung ke dokumen HTML yang sesuai, tempat kode java dijalankan.

Kita dapat mendefinisikan komponen UI GWT dan menetapkannya ke tag HTML dengan ID yang diberikan yang sama. Kelas titik masuk menggantikan metode onModuleLoad () titik masuk , yang dipanggil secara otomatis saat memuat modul .

Di sini kita membuat komponen UI, mendaftarkan penangan kejadian, memodifikasi DOM browser.

Sekarang, mari kita lihat bagaimana kita membuat instance server jarak jauh kita. Untuk tujuan itu, kami menggunakan metode statis GWT.create (MessageService.class) .

Ini menentukan jenis yang diminta pada waktu kompilasi. Melihat metode ini, compiler GWT menghasilkan banyak versi kode pada waktu kompilasi, hanya satu yang perlu dimuat oleh klien tertentu selama bootstrap pada waktu proses . Fitur ini banyak digunakan dalam panggilan RPC.

Here we also define the Button and TextBox widgets. To add attach them into the DOM tree we use the RootPanel class. It is the root panel and returns a singleton value to bind the widget elements:

RootPanel.get("sendButtonContainer").add(sendButton);

First, it gets the root container marked with sendButtonContainer id. After we attach the sendButton to the container.

8. HTML

Inside of the /webapp folder, we have Google_web_toolkit.html file.

We can mark the tag elements with the specific ids so the framework can bind them into Java objects:


    
Please enter your message:

The tags with nameFieldContainer and sendButtonContainer ids will be mapped to the Button and TextBox components.

9. Main Module Descriptor

Let's have a look at the typical configuration of the Google_web_toolkit.gwt.xml main module descriptor file:

We make core GWT stuff accessible by including the com.google.gwt.user.User interface. Also, we can choose a default style sheet for our application. In this case, it is *.clean.Clean.

The other available styling options are *.dark.Dark, *.standard.Standard, *.chrome.Chrome. The com.baeldung.client.Google_web_toolkit is also marked here with the tag.

10. Adding Event Handlers

To manage the mouse or keyboard typing events, GWT will use some handlers. They all extend from EventHandler interface and have a method with the event type argument.

In our example, we register the mouse click event handler.

This will fire the onClick() method every time thebutton is pushed:

closeButton.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { vPanel.hide(); sendButton.setEnabled(true); sendButton.setFocus(true); } });

Here we can modify the widget state and behavior. In our example, we hide the vPanel and enable the sendButton.

The other way is to define an inner class and implement the necessary interfaces:

class MyHandler implements ClickHandler, KeyUpHandler { public void onClick(ClickEvent event) { // send message to the server } public void onKeyUp(KeyUpEvent event) { if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) { // send message to the server } } }

In addition to ClickHandler, we also include here the KeyUpHandler interface to catch the keypress events. Here, inside of onKeyUp() method we can use the KeyUpEvent to check if the user pressed the Enter key.

And here how we use the MyHandler class to register both event handlers:

MyHandler handler = new MyHandler(); sendButton.addClickHandler(handler); nameField.addKeyUpHandler(handler);

11. Calling the Server

Now, we're ready to send the message to the server. We'll perform a remote procedure call with asynchronous sendMessage() method.

The second parameter of the method is AsyncCallback interface, where the String is the return type of the corresponding synchronous method:

messageServiceAsync.sendMessage(textToServer, new AsyncCallback() { public void onFailure(Throwable caught) { serverResponseLabel.addStyleName("serverResponseLabelError"); serverResponseLabel.setHTML("server error occurred"); closeButton.setFocus(true); } public void onSuccess(String result) { serverResponseLabel.setHTML(result); vPanel.setVisible(true); } });

As we can see, the receiver implementsonSuccess(String result)and onFailure(Throwable)method for each response type.

Depending on response result, we either set an error message “server error occurred” or display the result value in the container.

12. CSS Styling

When creating the project with the eclipse plugin, it will automatically generate the Google_web_toolkit.css file under the /webapp directory and link it to the main HTML file.

Tentu saja, kita dapat mendefinisikan gaya khusus untuk komponen UI tertentu secara terprogram:

sendButton.addStyleName("sendButton");

Di sini kami menetapkan gaya CSS dengan nama kelas sendButton ke komponen sendButton kami :

.sendButton { display: block; font-size: 16pt; }

13. Hasil

Hasilnya, kami memiliki aplikasi web sederhana ini:

Di sini kami mengirimkan pesan "Halo," ke server dan mencetak pesan "Halo, Halo!" respon di layar.

14. Kesimpulan

Dalam artikel singkat ini, kami mempelajari tentang dasar-dasar Kerangka GWT . Setelah itu, kami membahas arsitektur, siklus hidup, kapabilitas, dan berbagai komponen SDK-nya.

Hasilnya, kami belajar cara membuat aplikasi web sederhana.

Dan, seperti biasa, kode sumber lengkap dari tutorial tersedia di GitHub.