streamalism.org

1. Úvod

GWT alebo Google Web Toolkit je rámec na vytváranie vysoko výkonných webových aplikácií v prostredí Java.

V tomto výučbe sa zameriame na niektoré z jeho kľúčových schopností a funkcií.

2. GWT SDK

Sada SDK obsahuje knižnice Java API, kompilátor a vývojový server.

2.1. Java API

GWT API má triedy pre budovanie užívateľských rozhraní, uskutočňovanie hovorov na serveri, internacionalizáciu, vykonávanie testov jednotiek. Ak sa chcete dozvedieť viac, prečítajte si dokumentáciu k java tu.

2.2. Zostavovateľ

Zjednodušene povedané, kompilátor GWT je prekladač zdrojov z kódu Java do jazyka Javascript. Výsledkom kompilácie je aplikácia Javascript.

Logika jeho práce zahŕňa orezávanie nepoužívaných tried, metód, polí z kódu a skrátenie názvov Javascriptov.

Kvôli tejto výhode už nemusíme do nášho projektu Javascript zahrňovať knižnice Ajaxu. Pri zostavovaní kódu je samozrejme možné nastaviť aj rady.

Tu niektoré užitočné GWTCompiler parametre:

• -logÚroveň - nastaviť jeden z CHYBA, VAROVANIE, INFO, KONTROLA, ODLUČENIE, SPAM, VŠETKO úrovne protokolovania
• -práca - pracovný adresár prekladača
• -gen - adresár na zápis vygenerovaných súborov
• -von - adresár výstupných súborov
• -optimalizovať - Nastavuje úroveň optimalizácie kompilátora od 0 do 9
• -štýl - štýl výstupu skriptu OBF, PRETTY alebo PODROBNÉ
• -modul [y] - názov modulov, ktoré sa majú kompilovať

3. Inštalácia

Najnovšia sada SDK je k dispozícii na stránke na stiahnutie. Zvyšok nastavenia je k dispozícii na stránke Začíname.

3.1. Maven

Na nastavenie projektu s Mavenom musíme pridať nasledujúce závislosti pom.xml:

 runtime modulu com.google.gwt gwt-servlet poskytnutý používateľ com.google.gwt gwt com.google.gwt gwt-dev 

Knižnica gwt-servlet podporuje komponenty na strane servera na vyvolanie koncového bodu GWT-RPC. gwt-user obsahuje Java API, ktoré použijeme na vytvorenie našej webovej aplikácie. gwt-dev má kód na kompilátor, nasadenie alebo hosťovanie aplikácie.

Aby sme sa uistili, že všetky závislosti používajú rovnakú verziu, musíme zahrnúť nadradenú závislosť GWT:

 com.google.gwt gwt 2.8.2 pom import 

Všetky artefakty sú k dispozícii na stiahnutie v Maven Central.

4. Aplikácia

Vytvorme jednoduchú webovú aplikáciu. Pošle správu na server a zobrazí odpoveď.

Aplikácia GWT sa vo všeobecnosti skladá zo serverovej a klientskej časti. Na strane klienta zadá požiadavku HTTP na spojenie so serverom. Aby to bolo možné, používa GWT diaľkové volanie procedúr alebo jednoducho mechanizmus RPC.

5. GWT a RPC

Keď sa vrátime k našej aplikácii, pozrime sa, ako prebieha komunikácia RPC. Z tohto dôvodu vytvárame službu na prijímanie správ zo servera.

Najprv vytvoríme rozhranie:

@RemoteServiceRelativePath ("pozdraviť") verejné rozhranie MessageService rozširuje RemoteService {String sendMessage (String message) hodí IllegalArgumentException; }

The @RemoteServiceRelativePath anotácia mapuje službu na modul / správa relatívna URL. MessageService by mala siahať od RemoteService značkovacie rozhranie na vykonávanie RPC komunikácie.

Vykonávanie MessageService je na strane servera:

public class MessageServiceImpl extends RemoteServiceServlet implements MessageService {public String sendMessage (String message) throws IllegalArgumentException {if (message == null) {throw new IllegalArgumentException ("message is null"); } vrátiť „Dobrý deň,“ + správa + “!
Prijatý čas: "+ LocalDateTime.now ();}}

Naša trieda serverov siaha od RemoteServiceServlet základná trieda servletov.Automaticky deserializuje prichádzajúce požiadavky od klienta a serializuje odchádzajúce odpovede zo servera.

Teraz sa pozrime, ako to použijeme zo strany klienta. The MessageService je iba definitívnou verziou našej služby.

Aby sme mohli pracovať na strane klienta, musíme vytvoriť asynchrónnu verziu našej služby:

verejné rozhranie MessageServiceAsync {void sendMessage (vstup reťazca, spätné volanie AsyncCallback) hodí IllegalArgumentException; }

Tu môžeme vidieť ďalší argument v getMessage () metóda. Potrebujeme async oznámiť používateľskému rozhraniu, keď je asynchrónne volanie dokončené. Takto zabránime blokovaniu fungujúceho vlákna UI.

6. Komponenty a ich životný cyklus

Sada SDK ponúka niektoré prvky a rozloženia používateľského rozhrania na navrhovanie grafických rozhraní.

Všeobecne všetky komponenty používateľského rozhrania siahajú od Widget trieda. Vizuálne máme widgety prvkov, ktoré môžeme vidieť, kliknúť alebo presunúť na obrazovke:

• komponenty widgety – Textové pole, TextArea, Tlačidlo, Tlačítko na Rádiu, CheckBox, atď…

a existujú widgety pre rozloženie alebo panel, ktoré vytvárajú a organizujú obrazovku:

• panelové widgety – HorizontalPanel, VerticalPanel, PopupPanel, TabPanel, atď…

Zakaždým, keď do kódu pridáme widget alebo akýkoľvek iný komponent, GWT tvrdo pracuje na prepojení prvku zobrazenia s DOM prehliadača.

Konštruktor vždy inicializuje koreňový element DOM. Keď pripojíme detskú widget k nadradenému komponentu, spôsobí to tiež väzbu na úrovni DOM. Trieda vstupného bodu obsahuje funkciu načítania, ktorá sa zavolá ako prvá. Tu definujeme svoje widgety.

7. Vstupný bod

Pozrime sa bližšie na hlavný vstupný bod aplikácie:

public class Google_web_toolkit implementuje EntryPoint {private MessageServiceAsync messageServiceAsync = GWT.create (MessageService.class); public void onModuleLoad () {Button sendButton = new Button ("Submit"); TextBox nameField = nový TextBox (); nameField.setText ("Ahoj"); sendButton.addStyleName ("sendButton"); RootPanel.get ("nameFieldContainer"). Add (nameField); RootPanel.get ("sendButtonContainer"). Add (sendButton); }}

Každá trieda používateľského rozhrania implementuje com.google.gwt.core.client.EntryPoint rozhranie, aby sa označil ako hlavný vstup pre modul. Pripojí sa k príslušnému dokumentu HTML, kde sa vykoná kód Java.

Môžeme definovať komponenty používateľského rozhrania GWT a potom ich priradiť k značkám HTML s rovnakým daným ID. Trieda vstupného bodu prepíše vstupný bod onModuleLoad () metóda, ktorá sa volá automaticky pri načítaní modulu.

Tu vytvárame komponenty používateľského rozhrania, registrujeme obslužné rutiny udalostí, upravujeme DOM prehliadača.

Teraz sa pozrime, ako vytvoríme našu inštanciu vzdialeného servera. Na tento účel používame GWT.create (MessageService.class) statická metóda.

Určuje požadovaný typ v čase kompilácie. Vidiac túto metódu, Kompilátor GWT generuje veľa verzií kódu v čase kompilácie, iba jednu z nich je potrebné načítať konkrétnym klientom počas bootstrappingu za behu. Táto funkcia je široko používaná pri hovoroch RPC.

Tu tiež definujeme Tlačidlo a Textové pole miniaplikácie. Na ich pridanie do stromu DOM používame RootPanel trieda. Je to koreňový panel a vracia singletonovú hodnotu na naviazanie prvkov widgetu:

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

Najskôr získa koreňový kontajner označený sendButtonContainer id. Potom, čo pripojíme sendButton do kontajnera.

8. HTML

Vo vnútri / webapp priečinok, máme Google_web_toolkit.html spis.

Prvky značiek môžeme označiť konkrétnymi ID, aby ich rámec mohol spojiť do objektov Java:

Prosím zadajte svoju správu:

The štítky s nameFieldContainer a sendButtonContainer ID budú namapované na Tlačidlo a Textové pole komponenty.

9. Deskriptor hlavného modulu

Poďme sa pozrieť na typickú konfiguráciu Google_web_toolkit.gwt.xml súbor deskriptora hlavného modulu:

Sprístupňujeme základné veci GWT zahrnutím com.google.gwt.user.User rozhranie. Môžeme tiež zvoliť predvolenú šablónu štýlov pre našu aplikáciu. V takom prípade to je * .čisté. Vyčistiť.

Ostatné dostupné možnosti stylingu sú *. tmavá. tmavá, * .štandard. štandard, * .chróm. chrom. The com.baeldung.client.Google_web_toolkit je tu tiež označený značka.

10. Pridanie obslužných rutín udalostí

Na správu udalostí pri písaní myšou alebo klávesnicou použije GWT niektoré obslužné programy. Všetky siahajú od EventHandler rozhranie a mať metódu s argumentom typu udalosti.

V našom príklade zaregistrujeme obslužnú rutinu udalosti kliknutia myšou.

Toto vyhodí po kliknutí() metóda zakaždýmje stlačené tlačidlo:

closeButton.addClickHandler (nový ClickHandler () {public void onClick (udalosť ClickEvent) {vPanel.hide (); sendButton.setEnabled (true); sendButton.setFocus (true);}});

Tu môžeme upraviť stav a správanie widgetu. V našom príklade skrývame vPanel a povoliť sendButton.

Ďalším spôsobom je definovanie vnútornej triedy a implementácia potrebných rozhraní:

trieda MyHandler implementuje ClickHandler, KeyUpHandler {public void onClick (ClickEvent event) {// poslať správu na server} public void onKeyUp (KeyUpEvent event) {if (event.getNativeKeyCode () == KeyCodes.KEY_ENTER) {// poslať správu na server}}}

Okrem tohoto ClickHandler, zaraďujeme sem aj KeyUpHandler rozhranie na zachytenie udalostí stlačenia klávesov. Tu, vo vnútri onKeyUp () metódu môžeme použiť KeyUpEvent skontrolovať, či používateľ stlačil kláves Enter.

A tu, ako používame MyHandler triedy na registráciu oboch obslužných rutín udalostí:

Obslužný program MyHandler = nový MyHandler (); sendButton.addClickHandler (obslužný program); nameField.addKeyUpHandler (obslužný program);

11. Volanie na server

Teraz sme pripravení správu odoslať na server. Vykonáme vzdialené volanie procedúry s asynchrónnym poslať správu() metóda.

Druhým parametrom metódy je AsyncCallback rozhranie, kde String je návratový typ zodpovedajúcej synchrónnej metódy:

messageServiceAsync.sendMessage (textToServer, nový AsyncCallback () {public void onFailure (hoditeľný) (Výsledok reťazca) {serverResponseLabel.setHTML (výsledok); vPanel.setVisible (true);}});

Ako vidíme, prijímačové náradieonSuccess (výsledok reťazca)a onFailure (hoditeľné)metóda pre každý typ odpovede.

V závislosti na výsledku odpovede buď nastavíme chybové hlásenie „došlo k chybe servera“, alebo zobrazíme výslednú hodnotu v kontajneri.

12. Styling CSS

Pri vytváraní projektu pomocou doplnku Eclipse automaticky vygeneruje Google_web_toolkit.css súbor pod / webapp adresár a prepojte ho s hlavným súborom HTML.

Samozrejme, môžeme definovať vlastné štýly pre konkrétne komponenty používateľského rozhrania programovo:

sendButton.addStyleName ("sendButton");

Tu priradíme štýl CSS k názvu triedy sendButton k nášmu sendButton zložka:

.sendButton {display: block; veľkosť písma: 16pt; }

13. Výsledok

Vo výsledku máme túto jednoduchú webovú aplikáciu:

Tu odošleme serveru správu „Ahoj!“ A vytlačíme „Ahoj, ahoj!“ odozva na obrazovke.

14. Záver

V tomto rýchlom článku sme sa dozvedeli o základoch GWT Framework. Potom sme diskutovali o architektúre, životnom cykle, schopnostiach a rôznych komponentoch jeho SDK.

Vo výsledku sme sa naučili, ako vytvoriť jednoduchú webovú aplikáciu.

Celý zdrojový kód tutoriálu je ako vždy k dispozícii na stránkach GitHub.