Introduktion til GWT

1. Introduktion

GWT eller Google Web Toolkit er en ramme til opbygning af højtydende webapplikationer i Java.

I denne vejledning vil vi fokusere på og dække nogle af dens nøglefunktioner og funktionalitet.

2. GWT SDK

SDK indeholder Java API-biblioteker, en compiler og en udviklingsserver.

2.1. Java API

GWT API har klasser til at opbygge brugergrænseflader, foretage serveropkald, internationalisering, udføre enhedstest. For at lære mere, se java-dokumentationen her.

2.2. Kompilator

Kort sagt, GWT compiler er en kildeoversætter fra Java-kode til Javascript. Resultatet af kompileringen er en Javascript-applikation.

Logikken i dets arbejde inkluderer beskæring af ubrugte klasser, metoder, felter fra koden og forkortelse af Javascript-navne.

På grund af denne fordel behøver vi ikke længere inkludere Ajax-biblioteker i vores Javascript-projekt. Det er selvfølgelig også muligt at indstille tip, mens du sammensætter koden.

Her nogle nyttige GWTCompiler parametre:

  • -logNiveau - at indstille en af FEJL, ADVARSEL, INFO, SPOR, AFFALDNING, SPAM, ALLE logningsniveauer
  • -workdir - kompilatorens arbejdsmappe
  • -gen - biblioteket til at skrive de genererede filer
  • -ud - kataloget til outputfiler
  • -optimere - Indstiller kompilatoroptimeringsniveauet fra 0 til 9
  • -stil - script output stil OBF, PRETTY eller DETALJERET
  • -modul [s] - navnet på de moduler, der skal kompileres

3. Opsætning

Den seneste SDK er tilgængelig på download-siden. Resten af ​​opsætningen er tilgængelig på siden Kom godt i gang.

3.1. Maven

For at oprette projektet med Maven skal vi tilføje følgende afhængigheder til pom.xml:

 com.google.gwt gwt-servlet runtime com.google.gwt gwt-bruger leveret com.google.gwt gwt-dev leveret 

Gwt-servlet-biblioteket understøtter serversidens komponenter til påberåbelse af et GWT-RPC-slutpunkt. gwt-bruger indeholder Java API, som vi bruger til at opbygge vores webapplikation. gwt-dev har koden til kompilator, implementering eller hosting af applikationen.

For at sikre, at alle afhængigheder bruger den samme version, skal vi medtage den overordnede GWT-afhængighed:

 com.google.gwt gwt 2.8.2 pom import 

Alle artefakter kan downloades på Maven Central.

4. Ansøgning

Lad os bygge en simpel webapplikation. Den sender en besked til serveren og viser svaret.

Generelt består en GWT-applikation af serveren og klientdelene. Klientsiden fremsætter en HTTP-anmodning om at oprette forbindelse til serveren. For at gøre det muligt bruger GWT Remote Procedure Call eller simpelthen RPC-mekanisme.

5. GWT og RPC

Kom tilbage til vores ansøgning, lad os se, hvordan RPC-kommunikationen foretages. Til dette formål opretter vi en tjeneste til at modtage en besked fra serveren.

Lad os først oprette en grænseflade:

@RemoteServiceRelativePath ("hilsen") offentlig grænseflade MessageService udvider RemoteService {String sendMessage (String-besked) kaster IllegalArgumentException; }

Det @RemoteServiceRelativePath annotation kortlægger tjenesten til modulets /besked relativ URL. MessageService skal strække sig fra RemoteService markørgrænseflade til at udføre RPC-kommunikation.

Gennemførelsen af MessageService er på en serverside:

offentlig klasse MessageServiceImpl udvider RemoteServiceServlet implementerer MessageService {public String sendMessage (String message) kaster IllegalArgumentException {if (message == null) {smid nyt IllegalArgumentException ("meddelelse er nul") } returner "Hej" + besked + "!

Modtaget tid: "+ LocalDateTime.now ();}}

Vores serverklasse strækker sig fra RemoteServiceServlet base servlet klasse.Det deserialiserer automatisk indgående anmodninger fra klienten og serialiserer udgående svar fra serveren.

Lad os nu se, hvordan vi bruger det fra klientsiden. Det MessageService er kun en endelig version af vores service.

For at udføre på klientsiden er vi nødt til at oprette den asynkrone version af vores service:

offentlig grænseflade MessageServiceAsync {void sendMessage (String input, AsyncCallback callback) kaster IllegalArgumentException; }

Her kan vi se et ekstra argument i getMessage () metode. Vi behøver asynkronisering for at underrette brugergrænsefladen, når det asynkrone opkald er afsluttet. På denne måde forhindrer vi blokering af den arbejdende UI-tråd.

6. Komponenter og deres livscyklus

SDK tilbyder nogle UI-elementer og layout til design af de grafiske grænseflader.

Generelt strækker alle UI-komponenter sig fra Widget klasse. Vi har visuelt element-widgets, som vi kan se, klikke eller flytte på skærmen:

  • komponent widgetsTekstboks, TextArea, Knap, Radio knap, CheckBox, etc…

og der er layout- eller panelwidgets, der komponerer og organiserer skærmen:

  • panel widgetsVandret panel, Lodret panel, PopupPanel, TabPanel, etc…

Hver gang vi tilføjer en widget eller en anden komponent til koden, arbejder GWT hårdt for at forbinde visningselementet med browserens DOM.

Konstruktøren initialiserer altid rod-DOM-elementet. Når vi vedhæfter en underordnet widget til en overordnet komponent, forårsager det også binding på DOM-niveau. Indgangspunktsklassen indeholder indlæsningsfunktionen, der kaldes først. Det er her, vi definerer vores widgets.

7. Indgangssted

Lad os se nærmere på applikationens hovedindgangssted:

offentlig klasse Google_web_toolkit implementerer EntryPoint {private MessageServiceAsync messageServiceAsync = GWT.create (MessageService.class); offentlig ugyldighed onModuleLoad () {Button sendButton = ny knap ("Send"); TextBox nameField = ny TextBox (); nameField.setText ("Hej der"); sendButton.addStyleName ("sendButton"); RootPanel.get ("nameFieldContainer"). Tilføj (nameField); RootPanel.get ("sendButtonContainer"). Tilføj (sendButton); }}

Hver UI-klasse implementerer com.google.gwt.core.client.EntryPoint interface for at markere det som en hovedpost for modulet. Det opretter forbindelse til det tilsvarende HTML-dokument, hvor java-koden udføres.

Vi kan definere GWT UI-komponenter og derefter tildele HTML-tags med det samme givne ID. Entry point-klasse tilsidesætter indgangspunktet onModuleLoad () metode, som kaldes automatisk, når modulet indlæses.

Her opretter vi UI-komponenterne, registrerer begivenhedshåndterere, ændrer browserdom.

Lad os nu se, hvordan vi opretter vores eksterne serverforekomst. Til det formål bruger vi GWT.create (MessageService.class) statisk metode.

Det bestemmer den ønskede type på kompileringstidspunktet. Ser denne metode, GWT-kompilator genererer mange versioner af kode på kompileringstidspunktet, hvoraf kun den ene skal indlæses af en bestemt klient under bootstrapping ved kørsel. Denne funktion bruges i vid udstrækning i RPC-opkald.

Her definerer vi også Knap og Tekstboks widgets. For at tilføje vedhæft dem i DOM-træet bruger vi RootPanel klasse. Det er rodpanelet og returnerer en singletonværdi for at binde widgetelementerne:

RootPanel.get ("sendButtonContainer"). Tilføj (sendButton);

Først får den rodbeholderen markeret med sendButtonContainer id. Når vi vedhæfter sendButton til containeren.

8. HTML

Inde i / webapp mappe, har vi Google_web_toolkit.html fil.

Vi kan markere tagelementerne med de specifikke id'er, så rammen kan binde dem til Java-objekter:

Indtast venligst din besked:

Det tags med nameFieldContainer og sendButtonContainer id'er kortlægges til Knap og Tekstboks komponenter.

9. Hovedmodulbeskrivelse

Lad os se på den typiske konfiguration af Google_web_toolkit.gwt.xml hovedmodulbeskrivelsesfil:

Vi gør centrale GWT-ting tilgængelige ved at inkludere com.google.gwt.user.User interface. Vi kan også vælge et standardformatark til vores ansøgning. I dette tilfælde er det * .clean.Clean.

De andre tilgængelige stylingmuligheder er *. mørk. mørk, * .standard. standard, * .chrome.Chrome. Det com.baeldung.client.Google_web_toolkit er også markeret her med tag.

10. Tilføjelse af Event Handlers

For at styre mus- eller tastaturtypehændelser bruger GWT nogle håndterere. De strækker sig alle fra EventHandler interface og have en metode med argumentet om hændelsestypen.

I vores eksempel registrerer vi museklikhændelseshåndtereren.

Dette vil affyre onClick () metode hver gangknappen trykkes:

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

Her kan vi ændre widgettilstand og adfærd. I vores eksempel skjuler vi vPanel og aktivere sendButton.

Den anden måde er at definere en indre klasse og implementere de nødvendige grænseflader:

klasse MyHandler implementerer ClickHandler, KeyUpHandler {public void onClick (ClickEvent event) {// send message to the server} public void onKeyUp (KeyUpEvent event) {if (event.getNativeKeyCode () == KeyCodes.KEY_ENTER) {// send besked til serveren}}}

I tillæg til ClickHandler, inkluderer vi også her KeyUpHandler interface til at fange tastetrykhændelserne. Her, inden i onKeyUp () metode, vi kan bruge KeyUpEvent for at kontrollere, om brugeren trykkede på Enter-tasten.

Og her hvordan vi bruger MyHandler klasse for at registrere begge begivenhedshåndterere:

MyHandler handler = ny MyHandler (); sendButton.addClickHandler (handler); nameField.addKeyUpHandler (handler);

11. Opkald til serveren

Nu er vi klar til at sende beskeden til serveren. Vi udfører et fjernprocedureopkald med asynkron Send besked() metode.

Den anden parameter for metoden er AsyncCallback interface, hvor Snor er returtypen for den tilsvarende synkron metode:

messageServiceAsync.sendMessage (textToServer, ny AsyncCallback () {public void onFailure (Throwable fanget) {serverResponseLabel.addStyleName ("serverResponseLabelError"); serverResponseLabel.setHTML ("serverfejl opstod"); closeButton.setFocus (sand); (Strengresultat) {serverResponseLabel.setHTML (resultat); vPanel.setVisible (sand);}});

Som vi kan se, er modtagerudstyronSuccess (strengresultat)og onFailure (kan kastes)metode for hver responstype.

Afhængigt af svarresultatet indstiller vi enten en fejlmeddelelse "serverfejl opstod" eller viser resultatværdien i containeren.

12. CSS Styling

Når du opretter projektet med eclipse-pluginet, genererer det automatisk Google_web_toolkit.css fil under / webapp bibliotek og knyt det til den vigtigste HTML-fil.

Naturligvis kan vi definere brugerdefinerede stilarter for de specifikke UI-komponenter programmatisk:

sendButton.addStyleName ("sendButton");

Her tildeler vi en CSS-stil med klassens navn sendButton til vores sendButton komponent:

.sendButton {display: block; skriftstørrelse: 16pt; }

13. Resultat

Som et resultat har vi denne enkle webapplikation:

Her sender vi meddelelsen "Hej der" til serveren og udskriver "Hej, hej!" svar på skærmen.

14. Konklusion

I denne hurtige artikel lærte vi om det grundlæggende i GWT Framework. Derefter diskuterede vi arkitekturen, livscyklussen, kapaciteterne og de forskellige komponenter i dens SDK.

Som et resultat lærte vi, hvordan man opretter en simpel webapplikation.

Og som altid er den fulde kildekode til vejledningen tilgængelig på GitHub.


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