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 widgetekSzö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 widgetekHorizontalPanel, 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.


$config[zx-auto] not found$config[zx-overlay] not found