streamalism.org

1. Introduksjon

GWT eller Google Web Toolkit er et rammeverk for å bygge høytytende webapplikasjoner i Java.

I denne opplæringen skal vi fokusere på og dekke noen av dens viktigste funksjoner og funksjonalitet.

2. GWT SDK

SDK inneholder Java API-biblioteker, en kompilator og en utviklingsserver.

2.1. Java API

GWT API har klasser for å bygge brukergrensesnitt, ringe serveranrop, internasjonalisering, utføre enhetstester. For å lære mer, sjekk java-dokumentasjonen her.

2.2. Kompilator

Enkelt sagt, GWT kompilator er en kildeoversetter fra Java-kode til Javascript. Resultatet av samlingen er en Javascript-applikasjon.

Logikken i arbeidet inkluderer å trimme ubrukte klasser, metoder, felt fra koden og forkorte Javascript-navn.

På grunn av denne fordelen trenger vi ikke lenger å inkludere Ajax-biblioteker i vårt Javascript-prosjekt. Selvfølgelig er det også mulig å sette tips mens du kompilerer koden.

Her noen nyttige GWTCompiler parametere:

• -loggnivå - å sette en av FEIL, ADVARSEL, INFO, SPOR, DEBUG, SPAM, ALLE loggingsnivåer
• -workdir - kompilatorens arbeidskatalog
• -gen - katalogen for å skrive de genererte filene
• -ute - katalogen for utdatafiler
• -optimalisere - Stiller kompilatoroptimaliseringsnivået fra 0 til 9
• -stil - skriptutgangsstil OBF, GOD eller DETALJERT
• -modul [s] - navnet på modulene som skal kompileres

3. Oppsett

Den siste SDK-en er tilgjengelig på nedlastingssiden. Resten av oppsettet er tilgjengelig på start-siden.

3.1. Maven

For å sette opp prosjektet med Maven, må vi legge til følgende avhengigheter til pom.xml:

 com.google.gwt gwt-servlet runtime com.google.gwt gwt-bruker gitt com.google.gwt gwt-dev gitt 

Gwt-servlet-biblioteket støtter komponentene på serversiden for å påkalle et GWT-RPC-sluttpunkt. gwt-bruker inneholder Java API som vi bruker til å bygge webapplikasjonen vår. gwt-dev har koden for kompilator, distribusjon eller hosting av applikasjonen.

For å sikre at alle avhengighetene bruker samme versjon, må vi inkludere den overordnede GWT-avhengigheten:

 com.google.gwt gwt 2.8.2 pom import 

Alle gjenstandene er tilgjengelige for nedlasting på Maven Central.

4. Søknad

La oss bygge en enkel webapplikasjon. Den vil sende en melding til serveren og vise svaret.

Generelt består et GWT-program av serveren og klientdelene. Klientsiden ber om en HTTP-forespørsel om å få kontakt med serveren. For å gjøre det mulig bruker GWT Remote Procedure Call eller bare RPC-mekanisme.

5. GWT og RPC

Når vi kommer tilbake til applikasjonen vår, la oss se hvordan RPC-kommunikasjonen blir laget. For det formålet oppretter vi en tjeneste for å motta en melding fra serveren.

La oss først lage et grensesnitt:

@RemoteServiceRelativePath ("hilsen") offentlig grensesnitt MessageService utvider RemoteService {String sendMessage (strengmelding) kaster IllegalArgumentException; }

De @RemoteServiceRelativePath kommentar tilordner tjenesten til modulens /beskjed relativ URL. MessageService skal strekke seg fra RemoteService markørgrensesnitt for å utføre RPC-kommunikasjon.

Gjennomføringen av MessageService er på en serverside:

offentlig klasse MessageServiceImpl utvider RemoteServiceServlet implementerer MessageService {public String sendMessage (Strengmelding) kaster IllegalArgumentException {if (message == null) {throw new IllegalArgumentException ("message is null"); } returner "Hei" + melding + "!
Mottatt tid: "+ LocalDateTime.now ();}}

Serverklassen vår strekker seg fra RemoteServiceServlet base servlet klasse.Den avserialiserer automatisk innkommende forespørsler fra klienten og serialiserer utgående svar fra serveren.

La oss nå se hvordan vi bruker det fra klientsiden. De MessageService er bare en endelig versjon av tjenesten vår.

For å utføre på klientsiden, må vi lage den asynkrone versjonen av tjenesten vår:

offentlig grensesnitt MessageServiceAsync {void sendMessage (strenginngang, AsyncCallback tilbakeringing) kaster IllegalArgumentException; }

Her kan vi se et ekstra argument i getMessage () metode. Vi trenger asynkronisering for å varsle brukergrensesnittet når den asynkrone samtalen er fullført. På denne måten forhindrer vi å blokkere den fungerende UI-tråden.

6. Komponenter og deres livssyklus

SDK tilbyr noen UI-elementer og layouter for utforming av grafiske grensesnitt.

Generelt strekker alle brukergrensesnittkomponentene seg fra Widget klasse. Visuelt har vi element widgets som vi kan se, klikke eller flytte på skjermen:

• komponent widgets – Tekstboks, TextArea, Knapp, Radioknapp, Sjekk boksen, etc…

og det er layout- eller panel-widgets som komponerer og organiserer skjermen:

• panel widgets – HorisontalPanel, VertikalPanel, PopupPanel, TabPanel, etc…

Hver gang vi legger til en widget eller annen komponent i koden, jobber GWT hardt for å koble visningselementet til nettleserens DOM.

Konstruktøren initialiserer alltid rot-DOM-elementet. Når vi knytter en barne-widget til en foreldrekomponent, forårsaker det også binding på DOM-nivå. Inngangsklassen inneholder lastefunksjonen som vil bli kalt først. Det er her vi definerer widgetene våre.

7. Inngangspunkt

La oss se nærmere på hovedinngangsstedet for applikasjonen:

offentlig klasse Google_web_toolkit implementerer EntryPoint {private MessageServiceAsync messageServiceAsync = GWT.create (MessageService.class); offentlig tomrom onModuleLoad () {Button sendButton = ny knapp ("Send"); TextBox nameField = ny TextBox (); nameField.setText ("Hei der"); sendButton.addStyleName ("sendButton"); RootPanel.get ("nameFieldContainer"). Legg til (nameField); RootPanel.get ("sendButtonContainer"). Legg til (sendButton); }}

Hver UI-klasse implementerer com.google.gwt.core.client.EntryPoint grensesnitt for å markere det som en hovedoppføring for modulen. Den kobles til det tilsvarende HTML-dokumentet, der javakoden kjøres.

Vi kan definere GWT UI-komponenter og tilordne deretter til HTML-koder med samme ID. Inngangsklasse overstyrer inngangspunktet onModuleLoad () metoden, som kalles automatisk når modulen lastes inn.

Her oppretter vi UI-komponentene, registrerer hendelsesbehandlere, endrer nettleserens DOM.

La oss nå se hvordan vi lager vår eksterne serverforekomst. For det formålet bruker vi GWT.create (MessageService.class) statisk metode.

Den bestemmer ønsket type på kompileringstid. Ser denne metoden, GWT-kompilator genererer mange versjoner av kode på kompileringstidspunktet, hvorav bare en må lastes inn av en bestemt klient under bootstrapping ved kjøretid. Denne funksjonen er mye brukt i RPC-samtaler.

Her definerer vi også Knapp og Tekstboks widgets. For å legge dem til i DOM-treet bruker vi RootPanel klasse. Det er rotpanelet og returnerer en singleton-verdi for å binde widgetelementene:

RootPanel.get ("sendButtonContainer"). Legg til (sendButton);

Først får den rotbeholderen merket med sendButtonContainer id. Etter at vi har festet sendButton til containeren.

8. HTML

Inne i / webapp mappen, har vi Google_web_toolkit.html fil.

Vi kan merke taggelementene med de spesifikke idene, slik at rammeverket kan binde dem til Java-objekter:

Vennligst skriv inn meldingen din:

De tagger med nameFieldContainer og sendButtonContainer ID-er blir kartlagt til Knapp og Tekstboks komponenter.

9. Hovedmodulbeskrivelse

La oss ta en titt på den typiske konfigurasjonen av Google_web_toolkit.gwt.xml hovedmodulbeskrivelsesfil:

Vi gjør viktige GWT-ting tilgjengelige ved å inkludere com.google.gwt.user.User grensesnitt. Vi kan også velge et standard stilark for applikasjonen vår. I dette tilfellet er det * .clean.Clean.

De andre tilgjengelige stylingsalternativene er *. mørk. mørk, * .standard. standard, * .chrome.Chrome. De com.baeldung.client.Google_web_toolkit er også merket her med stikkord.

10. Legge til hendelsesbehandlere

For å administrere hendelser med mus eller tastatur skriver GWT noen håndtere. De strekker seg alle fra EventHandler grensesnitt og ha en metode med hendelsestypeargumentet.

I vårt eksempel registrerer vi museklikk hendelsesbehandleren.

Dette vil avfyre ved trykk() metode hver gangtrykkes på knappen:

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

Her kan vi endre widgettilstand og oppførsel. I vårt eksempel skjuler vi vPanel og aktivere sendButton.

Den andre måten er å definere en indre klasse og implementere de nødvendige grensesnittene:

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 melding til serveren } } }

I tillegg til ClickHandler, inkluderer vi også her KeyUpHandler grensesnitt for å fange tastetrykkhendelsene. Her, inni onKeyUp () metoden vi kan bruke KeyUpEvent for å sjekke om brukeren trykket på Enter-tasten.

Og her hvordan vi bruker MyHandler klasse for å registrere begge hendelsesbehandlerne:

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

11. Ringe til serveren

Nå er vi klare til å sende meldingen til serveren. Vi utfører en ekstern prosedyreanrop med asynkron sende melding() metode.

Den andre parameteren for metoden er AsyncCallback grensesnitt, der String er returtypen til den tilsvarende synkrone metoden:

messageServiceAsync.sendMessage (textToServer, ny AsyncCallback () {public void onFailure (Throwable caught) {serverResponseLabel.addStyleName ("serverResponseLabelError"); serverResponseLabel.setHTML ("server error occurred"); closeButton.setFocus (true);} (Strengresultat) {serverResponseLabel.setHTML (resultat); vPanel.setVisible (true);}});

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

Avhengig av svarresultat, setter vi enten en feilmelding “server error occurred” eller viser resultatverdien i containeren.

12. CSS Styling

Når du oppretter prosjektet med formørkelsesprogrammet, vil det automatisk generere Google_web_toolkit.css filen under / webapp katalogen og koble den til hoved HTML-filen.

Selvfølgelig kan vi definere tilpassede stiler for de spesifikke UI-komponentene programmatisk:

sendButton.addStyleName ("sendButton");

Her tildeler vi en CSS-stil med kursnavnet sendButton til vår sendButton komponent:

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

13. Resultat

Som et resultat har vi denne enkle webapplikasjonen:

Her sender vi en "Hei der" -melding til serveren og skriver ut "Hei, hei!" respons på skjermen.

14. Konklusjon

I denne raske artikkelen lærte vi om det grunnleggende i GWT Framework. Etterpå diskuterte vi arkitektur, livssyklus, evner og forskjellige komponenter i SDK.

Som et resultat lærte vi å lage en enkel webapplikasjon.

Og som alltid er hele kildekoden til opplæringen tilgjengelig på GitHub.