Bevezetés a GWT-be
1. Bemutatkozás
GWT vagy A Google Web Toolkit egy keretrendszer a nagy teljesítményű webalkalmazások Java-alapú felépítéséhez.
Ebben az oktatóanyagban néhány kulcsfontosságú képességre és funkcióra összpontosítunk, és áttekintjük azokat.
2. GWT SDK
Az SDK tartalmazza a Java API könyvtárakat, egy fordítót és egy fejlesztői kiszolgálót.
2.1. Java API
A GWT API osztályokkal rendelkezik a felhasználói felületek felépítésére, szerverhívások kezdeményezésére, nemzetközivé tételre, egységtesztek végrehajtására. További információért ellenőrizze a java dokumentációját itt.
2.2. Fordítóprogram
Egyszerűen fogalmazva: a GWT fordító forrásfordító a Java kódból a Javascriptbe. Az összeállítás eredménye egy Javascript alkalmazás.
Munkájának logikája magában foglalja a fel nem használt osztályok, módszerek, mezők kivágását a kódból és a Javascript nevek rövidítését.
Ezen előny miatt már nem kell az Ajax könyvtárakat bevonnunk a Javascript projektünkbe. Természetesen a kód fordítása közben is lehetséges tippeket beállítani.
Itt néhány hasznos GWTCompiler paraméterek:
- -logLevel - beállítani az egyiket HIBA, FIGYELMEZTETÉS, INFORMÁCIÓ, NYOMON KÖVETÉS, HIBÁK, SPAM, MINDEN naplózási szintek
- -workdir - a fordító munkakönyvtára
- -gen - a létrehozott fájlok írására szolgáló könyvtár
- -ki - a kimeneti fájlok könyvtár
- -optimalizálni - A fordító optimalizálási szintjét 0-ról 9-re állítja
- -stílus - a szkript kimeneti stílusa OBF, PRETTY vagy RÉSZLETES
- -modul (ok) - a lefordítandó modulok neve
3. Beállítás
A legújabb SDK elérhető a letöltési oldalon. A beállítás többi része a kezdő oldalon érhető el.
3.1. Maven
A projekt Maven-lel történő beállításához hozzá kell adnunk a következő függőségeket pom.xml:
com.google.gwt gwt-servlet futásidejű com.google.gwt gwt-user megadott com.google.gwt gwt-dev megadva
A gwt-servlet könyvtár támogatja a kiszolgálóoldali összetevőket a GWT-RPC végpont meghívására. gwt-user tartalmazza a Java API-t, amelyet a webalkalmazásunk felépítéséhez fogunk használni. gwt-dev rendelkezik az alkalmazás fordítójának, telepítésének vagy tárolásának kódjával.
Annak biztosítására, hogy az összes függőség ugyanazt a verziót használja, bele kell foglalnunk a szülő GWT-függőségét:
com.google.gwt gwt 2.8.2 pom import
Az összes műtárgy letölthető a Maven Central webhelyről.
4. Alkalmazás
Készítsünk egy egyszerű webalkalmazást. Üzenetet küld a szervernek, és megjeleníti a választ.
Általánosságban elmondható, hogy a GWT alkalmazás a szerverből és a kliens részekből áll. Az ügyféloldal HTTP-kérést küld a szerverrel való kapcsolat létrehozására. Ennek lehetővé tétele érdekében a GWT Távoli eljáráshívást vagy egyszerűen RPC mechanizmust használ.
5. GWT és RPC
Visszatérve alkalmazásunkhoz, nézzük meg, hogyan zajlik az RPC kommunikáció. Erre a célra létrehozunk egy szolgáltatást, amely üzenetet fogad a szervertől.
Először hozzunk létre egy felületet:
@RemoteServiceRelativePath ("greet") nyilvános felület Az MessageService kiterjeszti a RemoteService szolgáltatást {A String sendMessage (String üzenet) IllegalArgumentException-t dob; }
A @RemoteServiceRelativePath annotáció a szolgáltatást a modulhoz rendeli /üzenet relatív URL. MessageService -től kell kiterjednie RemoteService marker interfész az RPC kommunikáció végrehajtásához.
A MessageService szerver oldalon van:
public class MessageServiceImpl kiterjeszti a RemoteServiceServlet megvalósítja a MessageService {public String sendMessage (String üzenet) dobja az IllegalArgumentException {if (message == null) {dob új IllegalArgumentException ("az üzenet null"); } return "Hello" + üzenet + "!Fogadott idő: "+ LocalDateTime.now ();}}
Szerver osztályunk a RemoteServiceServlet alap servlet osztály.Automatikusan deszerializálja az ügyfél bejövő kéréseit és sorosítja a szerverről érkező kimenő válaszokat.
Most nézzük meg, hogyan használjuk az ügyfél oldaláról. A MessageService csak szolgáltatásunk végleges változata.
A kliens oldalon történő teljesítéshez létre kell hoznunk szolgáltatásunk aszinkron verzióját:
nyilvános felület MessageServiceAsync {void sendMessage (karakterlánc bemenet, AsyncCallback visszahívás) dobja az IllegalArgumentException-t; }
Itt egy extra érvet láthatunk a getMessage () módszer. Szükségünk van aszinkron értesíteni a felhasználói felületet, amikor az aszinkron hívás befejeződött. Így megakadályozzuk a működő felhasználói felület szálának blokkolását.
6. Alkatrészek és életciklusuk
Az SDK néhány felhasználói felületet és elrendezést kínál a grafikus interfészek tervezéséhez.
Általánosságban elmondható, hogy az összes felhasználói felület összetevője a Widget osztály. Vizuálisan rendelkezünk olyan elem widgetekkel, amelyeket láthatunk, rákattinthatunk vagy áthelyezhetünk a képernyőn:
- komponens widgetek – Szövegdoboz, TextArea, Gomb, Rádiógomb, CheckBoxstb.
és vannak olyan elrendezési vagy panelmodulok, amelyek összeállítják és rendszerezik a képernyőt:
- panel widgetek – HorizontalPanel, VerticalPanel, PopupPanel, TabPanelstb.
Minden alkalommal, amikor widgetet vagy bármely más összetevőt adunk a kódhoz, a GWT keményen dolgozik, hogy összekapcsolja a nézet elemet a böngésző DOM-jával.
A konstruktor mindig inicializálja a gyökér DOM elemet. Amikor egy gyermekmodult csatolunk egy szülő-összetevőhöz, az DOM-szintű kötést is okoz. A belépési pont osztály tartalmazza a betöltési függvényt, amelyet először hívnak meg. Itt definiáljuk a kütyüinket.
7. Belépési pont
Nézzük meg alaposan az alkalmazás fő belépési pontját:
public class A Google_web_toolkit megvalósítja az EntryPoint {private MessageServiceAsync messageServiceAsync = GWT.create (MessageService.class); public void onModuleLoad () {Button sendButton = new Button ("Submit"); TextBox nameField = új TextBox (); nameField.setText ("Sziasztok"); sendButton.addStyleName ("sendButton"); RootPanel.get ("nameFieldContainer"). Add (nameField); RootPanel.get ("sendButtonContainer"). Add (sendButton); }}
Minden felhasználói felület osztály végrehajtja a com.google.gwt.core.client.EntryPoint felületen, hogy a modul fő bejegyzésévé váljon. Csatlakozik a megfelelő HTML dokumentumhoz, ahol a java kód végrehajtódik.
Meghatározhatjuk a GWT felhasználói felület összetevőit, majd hozzárendelhetjük őket azonos azonosítójú HTML címkékhez. A belépési pont osztály felülírja a belépési pontot onModuleLoad () metódus, amelyet automatikusan meghívnak a modul betöltésekor.
Itt létrehozzuk a felhasználói felület összetevőit, regisztráljuk az eseménykezelőket, módosítjuk a böngésző DOM-ját.
Most nézzük meg, hogyan hozzuk létre a távoli szerver példányunkat. Erre a célra használjuk GWT.create (MessageService.class) statikus módszer.
A fordítás idején határozza meg a kért típust. Ezt a módszert látva, A GWT fordító a kód sok verzióját generálja fordításkor, amelyek közül csak az egyiket kell feltöltenie egy adott ügyfélnek a futás közbeni indításkor. Ezt a funkciót széles körben használják az RPC hívások során.
Itt definiáljuk a Gomb és Szövegdoboz kütyü. Hozzáadásához csatolja őket a DOM fába, a RootPanel osztály. Ez a gyökérpanel, és egy szingulett értéket ad vissza a widget-elemek megkötésére:
RootPanel.get ("sendButtonContainer"). Add (sendButton);
Először megkapja a sendButtonContainer id. Miután felcsatoltuk a sendButton a konténerhez.
8. HTML
A / webapp mappában van Google_web_toolkit.html fájl.
Megjelölhetjük a tag elemeket a konkrét azonosítókkal, így a keretrendszer Java objektumokká kötheti őket:
Írja be az üzenetét:
A címkék nameFieldContainer és sendButtonContainer azonosítók lesznek leképezve a Gomb és Szövegdoboz alkatrészek.
9. Fő modulleíró
Vessünk egy pillantást a Google_web_toolkit.gwt.xml fő modul leíró fájl:
A GWT alapvető tartalmait hozzáférhetővé tesszük a com.google.gwt.user.User felület. Választhatunk alapértelmezett stíluslapot is alkalmazásunkhoz. Ebben az esetben az *. tiszta. Tiszta.
A többi elérhető stíluslehetőség a következő * .sötét. Sötét, * .szabványos. Standard, * .króm. Króm. A com.baeldung.client.Google_web_toolkit itt is a címke.
10. Eseménykezelők hozzáadása
Az egér vagy a billentyűzet gépelésének kezeléséhez a GWT néhány kezelőt fog használni. Mindnyájan kiterjednek Eseménykezelő interfészt, és rendelkezzen metódussal az eseménytípus argumentummal.
Példánkban regisztráljuk az egérkattintásos eseménykezelőt.
Ez lőni fogja a kattintásra() módszer minden alkalommal agombot megnyomják:
closeButton.addClickHandler (új ClickHandler () {public void onClick (ClickEvent esemény) {vPanel.hide (); sendButton.setEnabled (true); sendButton.setFocus (true);}});
Itt módosíthatjuk a widget állapotát és viselkedését. Példánkban elrejtjük a vPanel és engedélyezze a sendButton.
A másik módszer egy belső osztály meghatározása és a szükséges interfészek megvalósítása:
osztály MyHandler végrehajtja a ClickHandler, KeyUpHandler {public void onClick (ClickEvent event) {// üzenet küldése a kiszolgálónak} public void onKeyUp (KeyUpEvent event) {if (event.getNativeKeyCode () == KeyCodes.KEY_ENTER) {// üzenetet küldeni a szerver } } }
Továbbá ClickHandler, ide soroljuk a KeyUpHandler interfész a gombnyomási események elkapásához. Itt, valamin belül onKeyUp () módszerrel használhatjuk a KeyUpEvent hogy ellenőrizze, hogy a felhasználó megnyomta-e az Enter billentyűt.
És itt hogyan használjuk a MyHandler osztály mindkét eseménykezelő regisztrálásához:
MyHandler kezelő = new MyHandler (); sendButton.addClickHandler (kezelő); nameField.addKeyUpHandler (kezelő);
11. A szerver hívása
Most készen állunk az üzenet elküldésére a szerverre. Távoli eljáráshívást hajtunk végre aszinkron üzenet küldése() módszer.
A módszer második paramétere: AsyncCallback interfész, ahol a Húr a megfelelő szinkron módszer visszatérési típusa:
messageServiceAsync.sendMessage (textToServer, új AsyncCallback () {public void onFailure (dobható elkapva) {serverResponseLabel.addStyleName ("serverResponseLabelError"); serverResponseLabel.setHTML ("kiszolgálóhiba történt") publicBid (Karakterlánc eredménye) {serverResponseLabel.setHTML (eredmény); vPanel.setVisible (true);}});
Mint láthatjuk, a vevő eszközeionSuccess (karakterlánc eredménye)és onFailure (dobható)módszer minden választípusra.
A válasz eredményétől függően vagy beállítunk egy „szerverhiba” hibaüzenetet, vagy megjelenítjük az eredmény értékét a tárolóban.
12. CSS stílus
Amikor a projektet az eclipse beépülő modullal hozza létre, automatikusan létrehozza a Google_web_toolkit.css fájl a / webapp könyvtárat, és kapcsolja össze a fő HTML fájlval.
Természetesen programozottan meghatározhatunk egyedi stílusokat az egyes felhasználói felület-összetevők számára:
sendButton.addStyleName ("sendButton");
Itt hozzárendelünk egy CSS stílust az osztály nevéhez sendButton a miénknek sendButton összetevő:
.sendButton {display: block; betűméret: 16pt; }
13. Eredmény
Ennek eredményeként rendelkezünk ezzel az egyszerű webalkalmazással:
Itt beküldünk egy „Hi there” üzenetet a szerverre, és kinyomtatjuk a „Hello, Hello there!” válasz a képernyőn.
14. Következtetés
Ebben a gyors cikkben megismerhettük a GWT Framework alapjait. Ezután megvitattuk az SDK architektúráját, életciklusát, képességeit és különféle összetevőit.
Ennek eredményeként megtanultuk, hogyan kell létrehozni egy egyszerű webalkalmazást.
És mint mindig, az oktatóanyag teljes forráskódja elérhető a GitHubon.