Pengenalan kepada GWT

1. Pengenalan

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

Dalam tutorial ini, kita akan menumpukan perhatian dan merangkumi beberapa keupayaan dan fungsi utamanya.

2. SDK GWT

SDK mengandungi perpustakaan API Java, penyusun, dan pelayan pengembangan.

2.1. API Java

GWT API mempunyai kelas untuk membina antara muka pengguna, membuat panggilan pelayan, pengantarabangsaan, melakukan ujian unit. Untuk mengetahui lebih lanjut, periksa dokumentasi java di sini.

2.2. Penyusun

Ringkasnya, penyusun GWT adalah penterjemah sumber dari kod Java ke dalam Javascript . Hasil penyusunannya adalah aplikasi Javascript.

Logik kerjanya merangkumi pemangkasan kelas, kaedah, medan yang tidak digunakan dari kod dan memendekkan nama Javascript.

Kerana kelebihan ini, kami tidak perlu lagi memasukkan perpustakaan Ajax dalam projek Javascript kami. Sudah tentu, anda juga boleh menetapkan petunjuk semasa menyusun kod.

Berikut adalah beberapa parameter GWTCompiler yang berguna :

  • -logLevel - untuk menetapkan salah satu tahap KESALAHAN , WARN, INFO, TRACE, DEBUG, SPAM, SEMUA logging
  • -workdir - direktori kerja penyusun
  • -gen - direktori untuk menulis fail yang dihasilkan
  • -out - direktori fail output
  • -optimum - Menetapkan tahap pengoptimuman penyusun dari 0 hingga 9
  • -style - gaya output skrip OBF, PRETTY atau DETAILED
  • -module [s] - nama modul untuk disusun

3. Persediaan

SDK terkini boleh didapati di halaman muat turun. Penyediaan selebihnya tersedia di halaman permulaan.

3.1. Maven

Untuk menyiapkan projek dengan Maven, kita perlu menambahkan kebergantungan berikut ke pom.xml :

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

Perpustakaan gwt-servlet menyokong komponen sisi pelayan untuk menggunakan titik akhir GWT-RPC. gwt-user mengandungi Java API yang akan kami gunakan untuk membangun aplikasi web kami . gwt-dev mempunyai kod untuk penyusun, penyebaran atau hosting aplikasi.

Untuk memastikan bahawa semua kebergantungan menggunakan versi yang sama, kita perlu memasukkan kebergantungan GWT induk:

 com.google.gwt gwt 2.8.2 pom import 

Semua artifak boleh dimuat turun di Maven Central.

4. Permohonan

Mari membina aplikasi web yang mudah. Ia akan menghantar mesej ke pelayan dan memaparkan responsnya.

Secara umum, aplikasi GWT terdiri daripada pelayan dan bahagian pelanggan . Sisi pelanggan membuat permintaan HTTP untuk berhubung dengan pelayan. Untuk memungkinkan, GWT menggunakan Panggilan Prosedur Jauh atau hanya mekanisme RPC.

5. GWT dan RPC

Kembali ke aplikasi kami, mari kita lihat bagaimana komunikasi RPC dibuat. Untuk tujuan itu, kami membuat perkhidmatan untuk menerima mesej dari pelayan.

Mari buat dahulu antara muka:

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

The @RemoteServiceRelativePath anotasi maps perkhidmatan untuk modul mesej / URL relatif. MessageService harus meluas dari antara muka penanda RemoteService untuk melakukan komunikasi RPC .

Pelaksanaan MessageService berada di sisi pelayan:

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 pelayan kami meliputi kelas servlet asas RemoteServiceServlet . Ini akan secara automatik mendesralisasi permintaan masuk dari pelanggan dan menyusun jawapan keluar dari pelayan .

Sekarang mari kita lihat bagaimana kita menggunakannya dari sisi pelanggan. The MessageService hanyalah versi pasti perkhidmatan kami .

Untuk melakukan di pihak pelanggan, kami perlu membuat versi perkhidmatan kami yang tidak segerak:

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

Di sini kita dapat melihat argumen tambahan dalam kaedah getMessage () . Kami memerlukan async untuk memberitahu UI apabila panggilan tidak segerak selesai . Dengan cara ini kita menghalang penyekat utas UI yang berfungsi.

6. Komponen dan Kitaran Hidupnya

SDK menawarkan beberapa elemen dan susun atur UI untuk merancang antara muka grafik.

Secara amnya, semua komponen UI merangkumi kelas Widget . Secara visual kita mempunyai widget elemen yang dapat kita lihat, klik atau bergerak di skrin:

  • Widget komponen - Kotak Teks , textarea , Button , RadioButton , kotak semak , dan sebagainya ...

dan terdapat susun atur atau widget panel yang menyusun dan mengatur skrin:

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

Setiap kali kita menambahkan widget atau komponen lain ke dalam kod, GWT bekerja keras untuk menghubungkan elemen pandangan dengan DOM penyemak imbas .

Pembina selalu memulakan elemen DOM root. Apabila kita melampirkan widget anak ke komponen induk, ia juga menyebabkan pengikatan pada tahap DOM . Kelas titik masuk mengandungi fungsi memuat yang akan dipanggil pertama. Di sinilah kami menentukan widget kami.

7. Tempat Masuk

Mari kita perhatikan 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 melaksanakan antara muka com.google.gwt.core.client.EntryPoint untuk menandakannya sebagai entri utama untuk modul . Ia menghubungkan ke dokumen HTML yang sesuai, di mana kod java dijalankan.

Kami dapat menentukan komponen GWT UI dan memberikannya kepada tag HTML dengan ID yang sama. Kelas titik masuk mengatasi kaedah titik masuk onModuleLoad () , yang dipanggil secara automatik semasa memuat modul .

Di sini kami membuat komponen UI, mendaftar pengendali acara, mengubah suai penyemak imbas DOM.

Sekarang, mari kita lihat bagaimana kita membuat contoh pelayan jauh kita. Untuk tujuan itu, kami menggunakan kaedah statik GWT.create (MessageService.class) .

Ini menentukan jenis yang diminta pada waktu kompilasi. Melihat kaedah ini, penyusun GWT menghasilkan banyak versi kod pada waktu kompilasi, hanya satu yang perlu dimuat oleh klien tertentu semasa bootstrap pada waktu runtime . Ciri 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.

Sudah tentu, kita dapat menentukan gaya tersuai 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. Keputusan

Hasilnya, kami mempunyai aplikasi web ringkas ini:

Di sini kami mengirimkan mesej "Hai di sana" ke pelayan dan mencetak "Hai, Hai!" tindak balas di skrin.

14. Kesimpulannya

Dalam artikel ringkas ini, kami belajar mengenai asas-asas GWT Framework . Selepas itu, kami membincangkan seni bina, kitaran hidup, kemampuan dan komponen SDKnya yang berbeza.

Hasilnya, kami belajar bagaimana membuat aplikasi web yang mudah.

Dan, seperti biasa, kod sumber penuh tutorial terdapat di GitHub.