streamalism.org

1. Uvod

GWT ili Google Web Toolkit okvir je za izgradnju web aplikacija visokih performansi na Javi.

U ovom uputstvu usredotočit ćemo se na neke od njegovih ključnih mogućnosti i funkcionalnosti.

2. GWT SDK

SDK sadrži knjižnice Java API-ja, prevoditelj i razvojni poslužitelj.

2.1. Java API

GWT API ima klase za izgradnju korisničkog sučelja, upućivanje poziva poslužitelju, internacionalizaciju, izvođenje jediničnih testova. Da biste saznali više, ovdje pogledajte dokumentaciju o javi.

2.2. Sastavljač

Jednostavno rečeno, GWT kompajler izvorni je prevoditelj s Java koda na Javascript. Rezultat kompilacije je Javascript aplikacija.

Logika njegovog rada uključuje obrezivanje neiskorištenih klasa, metoda, polja iz koda i skraćivanje Javascript imena.

Zbog ove prednosti više ne trebamo uključivati ​​Ajax knjižnice u naš Javascript projekt. Naravno, moguće je postaviti i savjete tijekom sastavljanja koda.

Evo nekoliko korisnih GWTCompiler parametri:

• -logLevel - za postavljanje jednog od POGREŠKA, UPOZORENJE, INFO, TRACE, DEBUG, SPAM, SVE razine sječe
• -radnik - radni direktorij kompajlera
• -gen - direktorij za pisanje generiranih datoteka
• -aut - direktorij izlaznih datoteka
• -optimizirati - Postavlja razinu optimizacije kompajlera od 0 do 9
• -stil - stil izlaza skripte OBF, PRETTY ili DETALJAN
• -modul [s] - naziv modula za kompajliranje

3. Postavljanje

Najnoviji SDK dostupan je na stranici za preuzimanje. Ostatak postava dostupan je na početnoj stranici.

3.1. Maven

Da bismo postavili projekt s Mavenom, trebamo dodati sljedeće ovisnosti pom.xml:

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

Biblioteka gwt-servlet podržava komponente na poslužitelju za pozivanje GWT-RPC krajnje točke. gwt-korisnik sadrži Java API koji ćemo koristiti za izradu naše web aplikacije. gwt-dev ima kôd za kompajler, postavljanje ili hosting aplikacije.

Da bismo bili sigurni da sve ovisnosti koriste istu verziju, moramo uključiti nadređenu GWT ovisnost:

 com.google.gwt gwt 2.8.2 pom import 

Svi su artefakti dostupni za preuzimanje na Maven Central.

4. Primjena

Izgradimo jednostavnu web aplikaciju. Poslat će poruku poslužitelju i prikazati odgovor.

Općenito, GWT aplikacija sastoji se od poslužiteljskog i klijentskog dijela. Klijentska strana postavlja HTTP zahtjev za povezivanje s poslužiteljem. Da bi to bilo moguće, GWT koristi daljinski poziv postupka ili jednostavno RPC mehanizam.

5. GWT i RPC

Vratimo se našoj aplikaciji, da vidimo kako je uspostavljena RPC komunikacija. U tu svrhu izrađujemo uslugu za primanje poruke od poslužitelja.

Prvo napravimo sučelje:

@RemoteServiceRelativePath ("greet") javno sučelje MessageService proširuje RemoteService {String sendMessage (String poruka) baca IllegalArgumentException; }

The @RemoteServiceRelativePath anotacija preslikava uslugu na modul /poruka relativni URL. MessageService treba protezati od RemoteService sučelje markera za izvođenje RPC komunikacije.

Provedba MessageService je na strani poslužitelja:

javna klasa MessageServiceImpl proširuje RemoteServiceServlet implementira MessageService {javni niz sendMessage (poruka niza) baca IllegalArgumentException {if (message == null) {throw new IllegalArgumentException ("message is null"); } return "Hello," + poruka + "!
Primljeno vrijeme: "+ LocalDateTime.now ();}}

Naša klasa poslužitelja proteže se od RemoteServiceServlet osnovna klasa servleta.Automatski će deserializirati dolazne zahtjeve klijenta i serializirati odlazne odgovore s poslužitelja.

Sada da vidimo kako ga koristimo sa strane klijenta. The MessageService samo je konačna verzija naše usluge.

Da bismo izvodili na strani klijenta, moramo stvoriti asinkronu verziju naše usluge:

javno sučelje MessageServiceAsync {void sendMessage (String input, AsyncCallback callback) baca IllegalArgumentException; }

Ovdje možemo vidjeti dodatni argument u getMessage () metoda. Trebamo asinkronizacija za obavještavanje korisničkog sučelja kada je asinkroni poziv završen. Na ovaj način sprječavamo blokiranje radne niti sučelja.

6. Komponente i njihov životni ciklus

SDK nudi neke elemente korisničkog sučelja i izglede za dizajniranje grafičkih sučelja.

Općenito, sve komponente korisničkog sučelja protežu se od Widget razred. Vizualno imamo widgete elemenata koje možemo vidjeti, kliknuti ili premjestiti na zaslonu:

• widgeti komponenata – TextBox, TextArea, Dugme, Radio gumb, CheckBox, itd ...

a postoje i widgeti za raspored ili ploču koji sastavljaju i organiziraju zaslon:

• widgeti na ploči – HorizontalPanel, VerticalPanel, PopupPanel, TabPanel, itd ...

Svaki put kad u kod dodamo dodatak ili bilo koju drugu komponentu, GWT naporno radi na povezivanju elementa pogleda s DOM-om preglednika.

Konstruktor uvijek inicijalizira korijenski DOM element. Kad djetetu dodajemo widget na nadređenu komponentu, to također uzrokuje vezivanje na DOM razini. Klasa ulazne točke sadrži funkciju učitavanja koja će se prvo pozvati. Tu definiramo svoje widgete.

7. Ulazna točka

Pogledajmo izbliza glavnu ulaznu točku aplikacije:

javna klasa Google_web_toolkit implementira EntryPoint {private MessageServiceAsync messageServiceAsync = GWT.create (MessageService.class); javna praznina onModuleLoad () {Button sendButton = novi gumb ("Pošalji"); TextBox nameField = novi TextBox (); nameField.setText ("Zdravo"); sendButton.addStyleName ("sendButton"); RootPanel.get ("nameFieldContainer"). Add (nameField); RootPanel.get ("sendButtonContainer"). Add (sendButton); }}

Svaka UI klasa implementira com.google.gwt.core.client.EntryPoint sučelje kako bi ga označili kao glavni unos za modul. Povezuje se s odgovarajućim HTML dokumentom, gdje se izvršava java kod.

Možemo definirati GWT UI komponente i dodijeliti HTML oznakama s istim zadanim ID-om. Klasa ulazne točke nadjačava ulaznu točku onModuleLoad () metoda, koja se automatski poziva prilikom učitavanja modula.

Ovdje stvaramo komponente korisničkog sučelja, registriramo obrađivače događaja, mijenjamo DOM preglednika.

Sada, da vidimo kako stvaramo našu instancu udaljenog poslužitelja. U tu svrhu koristimo GWT.create (MessageService.class) statička metoda.

Određuje traženi tip u vrijeme prevođenja. Vidjevši ovu metodu, GWT kompajler generira mnoge verzije koda u vrijeme kompajliranja, od kojih određeni klijent treba učitati samo jednu tijekom pokretanja sustava za pokretanje u vrijeme izvođenja. Ova se značajka široko koristi u RPC pozivima.

Ovdje također definiramo Dugme i TextBox widgeti. Da bismo ih dodali pričvrstiti u DOM stablo koristimo RootPanel razred. To je korijenska ploča i vraća singleton vrijednost za povezivanje elemenata widgeta:

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

Prvo dobiva korijenski spremnik označen s sendButtonContainer iskaznica. Nakon što priložimo sendButton do kontejnera.

8. HTML

Unutar / webapp mapu, imamo Google_web_toolkit.html datoteka.

Elemente oznaka možemo označiti određenim ID-ovima, tako da ih okvir može povezati u Java objekte:

Unesite svoju poruku:

The oznake sa nameFieldContainer i sendButtonContainer ID-ovi će se preslikati u Dugme i TextBox komponente.

9. Glavni opis modula

Pogledajmo tipičnu konfiguraciju Google_web_toolkit.gwt.xml datoteka deskriptora glavnog modula:

Učinimo osnovne GWT stvari dostupnima, uključujući i com.google.gwt.user.User sučelje. Također, možemo odabrati zadani stil lista za našu aplikaciju. U ovom slučaju jest * .čisti.Čisti.

Ostale dostupne mogućnosti stylinga su * .tamno.Tamno, * .standard.Standard, * .chrome.Chrome. The com.baeldung.client.Google_web_toolkit je ovdje također označen znakom označiti.

10. Dodavanje obrađivača događaja

Za upravljanje događajima tipkanja miša ili tipkovnice, GWT će koristiti neke rukovatelje. Svi se protežu od Rukovatelj događajima sučelje i imaju metodu s argumentom tipa događaja.

U našem primjeru registriramo obrađivač događaja klikom miša.

Ovo će otpustiti na klik() metoda svaki put kadpritisnut je gumb:

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

Ovdje možemo izmijeniti stanje i ponašanje widgeta. U našem primjeru skrivamo vPanel i omogućiti sendButton.

Drugi način je definiranje unutarnje klase i implementacija potrebnih sučelja:

klasa MyHandler implementira ClickHandler, KeyUpHandler {public void onClick (ClickEvent event) {// send message to the server} public void onKeyUp (KeyUpEvent event) {if (event.getNativeKeyCode () == KeyCodes.KEY_ENTER) {// pošalji poruku na poslužitelj}}}

Pored ClickHandler, ovdje također uključujemo KeyUpHandler sučelje za hvatanje događaja pritiska tipki. Ovdje, unutar onKeyUp () metodu koju možemo koristiti KeyUpEvent da provjeri je li korisnik pritisnuo tipku Enter.

A ovdje kako koristimo MyHandler klase za registraciju oba rukovatelja događajima:

MyHandler rukovatelj = novi MyHandler (); sendButton.addClickHandler (rukovatelj); nameField.addKeyUpHandler (rukovatelj);

11. Pozivanje poslužitelja

Sada smo spremni poslati poruku na poslužitelj. Izvest ćemo udaljeni postupak s asinkronim postupkom Pošalji poruku() metoda.

Drugi parametar metode je AsyncCallback sučelje, gdje je Niz je povratni tip odgovarajuće sinkrone metode:

messageServiceAsync.sendMessage (textToServer, novi AsyncCallback () {javna praznina onFailure (Uhvatljivo) {serverResponseLabel.addStyleName ("serverResponseLabelError"); serverResponseLabel.setton ;setFun; (Rezultat niza) {serverResponseLabel.setHTML (rezultat); vPanel.setVisible (true);}});

Kao što vidimo, prijemnički uređajionSuccess (rezultat niza)i onFailure (Dostupno)metoda za svaku vrstu odgovora.

Ovisno o rezultatu odgovora, postavljamo poruku pogreške "Dogodila se pogreška poslužitelja" ili prikazujemo vrijednost rezultata u spremniku.

12. CSS stil

Prilikom izrade projekta s dodatkom eclipse automatski će generirati Google_web_toolkit.css datoteka pod / webapp direktorij i povežite ga s glavnom HTML datotekom.

Naravno, možemo programski definirati prilagođene stilove za određene komponente korisničkog sučelja:

sendButton.addStyleName ("sendButton");

Ovdje dodjeljujemo CSS stil s nazivom klase sendButton našem sendButton komponenta:

.sendButton {prikaz: blok; veličina slova: 16pt; }

13. Rezultat

Kao rezultat, imamo ovu jednostavnu web aplikaciju:

Ovdje poslužitelju šaljemo poruku "Zdravo tamo" i ispisujemo poruku "Zdravo, zdravo!" odgovor na ekranu.

14. Zaključak

U ovom kratkom članku saznali smo o osnovama GWT Framework-a. Nakon toga razgovarali smo o arhitekturi, životnom ciklusu, mogućnostima i različitim komponentama Njegova SDK-a.

Kao rezultat toga, naučili smo kako stvoriti jednostavnu web aplikaciju.

Kao i uvijek, puni izvorni kod udžbenika dostupan je na GitHub-u.