Inleiding tot GWT
1. Inleiding
GWT of Google Web Toolkit is een raamwerk voor het bouwen van krachtige webapplicaties in Java.
In deze zelfstudie gaan we ons concentreren op enkele van de belangrijkste mogelijkheden en functionaliteit en deze behandelen.
2. GWT SDK
De SDK bevat de Java API-bibliotheken, een compiler en een ontwikkelserver.
2.1. Java API
GWT API heeft klassen voor het bouwen van gebruikersinterfaces, het maken van serveroproepen, internationalisering, het uitvoeren van unit-tests. Raadpleeg de Java-documentatie hier voor meer informatie.
2.2. Compiler
Simpel gezegd, GWT-compiler is een bronvertaler van Java-code naar Javascript. Het resultaat van de compilatie is een Javascript-applicatie.
De logica van zijn werk omvat het bijsnijden van ongebruikte klassen, methoden, velden uit de code en het inkorten van Javascript-namen.
Vanwege dit voordeel hoeven we geen Ajax-bibliotheken meer op te nemen in ons Javascript-project. Het is natuurlijk ook mogelijk om hints in te stellen tijdens het compileren van de code.
Hier wat handig GWTCompiler parameters:
- -Log niveau - om een van de FOUT, WAARSCHUWING, INFO, TRACE, DEBUG, SPAM, ALLES logboekregistratieniveaus
- -werkmap - de werkmap van de compiler
- -gen - de map om de gegenereerde bestanden te schrijven
- -uit - de map met uitvoerbestanden
- -optimaliseren - Stelt het optimalisatieniveau van de compiler in van 0 tot 9
- -stijl - de uitvoerstijl van het script OBF, MOOI of GEDETAILLEERD
- -module [s] - de naam van de te compileren modules
3. Installatie
De nieuwste SDK is beschikbaar op de downloadpagina. De rest van de installatie is beschikbaar op de startpagina.
3.1. Maven
Om het project met Maven op te zetten, moeten we de volgende afhankelijkheden toevoegen aan pom.xml:
com.google.gwt gwt-servlet runtime com.google.gwt gwt-gebruiker verstrekt com.google.gwt gwt-dev verstrekt De gwt-servlet-bibliotheek ondersteunt de server-side componenten voor het aanroepen van een GWT-RPC-eindpunt. gwt-gebruiker bevat de Java API die we zullen gebruiken om onze webapplicatie te bouwen. gwt-dev heeft de code voor het compileren, implementeren of hosten van de applicatie.
Om ervoor te zorgen dat alle afhankelijkheden dezelfde versie gebruiken, moeten we de bovenliggende GWT-afhankelijkheid opnemen:
com.google.gwt gwt 2.8.2 pom importeren Alle artefacten kunnen worden gedownload op Maven Central.
4. Toepassing
Laten we een eenvoudige webapplicatie bouwen. Het stuurt een bericht naar de server en geeft het antwoord weer.
Over het algemeen bestaat een GWT-applicatie uit de server en het clientgedeelte. De client-side doet een HTTP-verzoek om verbinding te maken met de server. Om dit mogelijk te maken, gebruikt GWT Remote Procedure Call of gewoon het RPC-mechanisme.
5. GWT en RPC
Laten we teruggaan naar onze applicatie, laten we eens kijken hoe de RPC-communicatie tot stand komt. Voor dat doel creëren we een service om een bericht van de server te ontvangen.
Laten we eerst een interface maken:
@RemoteServiceRelativePath ("greet") openbare interface MessageService breidt RemoteService uit {String sendMessage (String-bericht) genereert IllegalArgumentException; }De @RemoteServiceRelativePath annotation wijst de service toe aan de module /bericht relatieve URL. MessageService moet zich uitstrekken van RemoteService marker interface om RPC-communicatie uit te voeren.
De implementatie van MessageService bevindt zich op een server:
public class MessageServiceImpl breidt RemoteServiceServlet implementeert MessageService {public String sendMessage (String bericht) genereert IllegalArgumentException {if (message == null) {throw nieuwe IllegalArgumentException ("bericht is null"); } retourneer "Hallo", + bericht + "!Tijd ontvangen: "+ LocalDateTime.now ();}}
Onze serverklasse strekt zich uit van de RemoteServiceServlet basisservlet-klasse.Het deserialiseert automatisch inkomende verzoeken van de client en serialiseert uitgaande antwoorden van de server.
Laten we nu eens kijken hoe we het vanaf de clientzijde gebruiken. De MessageService is slechts een definitieve versie van onze service.
Om aan de clientzijde te presteren, moeten we de asynchrone versie van onze service maken:
openbare interface MessageServiceAsync {void sendMessage (String input, AsyncCallback callback) gooit IllegalArgumentException; }Hier kunnen we een extra argument in zien getMessage () methode. Wij hebben nodig asynch om de gebruikersinterface op de hoogte te stellen wanneer de asynchrone oproep is voltooid. Op deze manier voorkomen we dat de werkende UI-thread wordt geblokkeerd.
6. Componenten en hun levenscyclus
De SDK biedt enkele UI-elementen en lay-outs voor het ontwerpen van de grafische interfaces.
Over het algemeen strekken alle UI-componenten zich uit vanaf het Widget klasse. Visueel hebben we de elementwidgets die we kunnen zien, klikken of verplaatsen op het scherm:
- component widgets – Tekstvak, TextArea, Knop, Radio knop, CheckBox, enz…
en er zijn lay-out- of paneelwidgets die het scherm samenstellen en ordenen:
- paneelwidgets – Horizontaal paneel, Verticaal paneel, PopupPanel, TabPanel, enz…
Elke keer dat we een widget of een ander onderdeel aan de code toevoegen, werkt GWT hard om het weergave-element te koppelen aan de DOM van de browser.
De constructor initialiseert altijd het root-DOM-element. Wanneer we een onderliggende widget aan een bovenliggende component koppelen, veroorzaakt dit ook binding op het DOM-niveau. De entry point class bevat de laadfunctie die als eerste wordt aangeroepen. Dit is waar we onze widgets definiëren.
7. Toegangspunt
Laten we het belangrijkste toegangspunt van de applicatie eens nader bekijken:
openbare klasse Google_web_toolkit implementeert EntryPoint {privé MessageServiceAsync messageServiceAsync = GWT.create (MessageService.class); public void onModuleLoad () {Button sendButton = nieuwe knop ("Verzenden"); TextBox nameField = nieuwe TextBox (); nameField.setText ("Hallo"); sendButton.addStyleName ("sendButton"); RootPanel.get ("nameFieldContainer"). Add (nameField); RootPanel.get ("sendButtonContainer"). Add (sendButton); }}Elke UI-klasse implementeert het com.google.gwt.core.client.EntryPoint interface om het te markeren als een hoofditem voor de module. Het maakt verbinding met het overeenkomstige HTML-document, waar de Java-code wordt uitgevoerd.
We kunnen GWT UI-componenten definiëren en deze vervolgens toewijzen aan HTML-tags met dezelfde opgegeven ID. De beginpuntklasse overschrijft het beginpunt onModuleLoad () methode, die automatisch wordt aangeroepen bij het laden van de module.
Hier maken we de UI-componenten, registreren we gebeurtenishandlers, wijzigen we de browser-DOM.
Laten we nu eens kijken hoe we onze externe serverinstantie maken. Voor dat doel gebruiken we GWT.create (MessageService.class) statische methode.
Het bepaalt het gevraagde type tijdens het compileren. Als je deze methode ziet, GWT-compiler genereert vele versies van code tijdens het compileren, waarvan er slechts één door een bepaalde client hoeft te worden geladen tijdens het opstarten tijdens runtime. Deze functie wordt veel gebruikt bij RPC-oproepen.
Hier definiëren we ook de Knop en Tekstvak widgets. Om ze toe te voegen aan de DOM-structuur gebruiken we de RootPanel klasse. Het is het rootpaneel en retourneert een singleton-waarde om de widgetelementen te binden:
RootPanel.get ("sendButtonContainer"). Add (sendButton);Ten eerste krijgt het de rootcontainer gemarkeerd met sendButtonContainer ID kaart. Nadat we het verzendknop naar de container.
8. HTML
Binnenkant van de /web applicatie map, we hebben Google_web_toolkit.html het dossier.
We kunnen de tag-elementen markeren met de specifieke id's, zodat het framework ze in Java-objecten kan binden:
Voer uw bericht in:
De tags met nameFieldContainer en sendButtonContainer ID's worden toegewezen aan de Knop en Tekstvak componenten.
9. Beschrijving van de hoofdmodule
Laten we eens kijken naar de typische configuratie van het Google_web_toolkit.gwt.xml hoofdmodule descriptorbestand:
We maken de belangrijkste GWT-dingen toegankelijk door de com.google.gwt.user.User koppel. We kunnen ook een standaard stylesheet kiezen voor onze applicatie. In dit geval is het * .clean.Clean.
De andere beschikbare stylingopties zijn * .donker. donker, * .standaard. standaard, * .chrome.Chrome. De com.baeldung.client.Google_web_toolkit is hier ook gemarkeerd met de label.
10. Gebeurtenishandlers toevoegen
Om de muis- of toetsenbordtypen te beheren, zal GWT enkele handlers gebruiken. Ze strekken zich allemaal uit van EventHandler interface en hebben een methode met het gebeurtenistype-argument.
In ons voorbeeld registreren we de gebeurtenishandler met muisklik.
Dit zal het bij klikken() methode elke keer dat deknop is ingedrukt:
closeButton.addClickHandler (nieuwe ClickHandler () {openbare void onClick (ClickEvent-gebeurtenis) {vPanel.hide (); sendButton.setEnabled (true); sendButton.setFocus (true);}});Hier kunnen we de status en het gedrag van de widget wijzigen. In ons voorbeeld verbergen we de vPanel en schakel het verzendknop.
De andere manier is om een innerlijke klasse te definiëren en de nodige interfaces te implementeren:
class MyHandler implementeert ClickHandler, KeyUpHandler {public void onClick (ClickEvent event) {// stuur bericht naar de server} public void onKeyUp (KeyUpEvent event) {if (event.getNativeKeyCode () == KeyCodes.KEY_ENTER) {// stuur bericht naar de server } } }In aanvulling op ClickHandler, we nemen hier ook de KeyUpHandler interface om de toetsaanslaggebeurtenissen op te vangen. Hier, binnenkant van onKeyUp () methode kunnen we de KeyUpEvent om te controleren of de gebruiker op de Enter-toets heeft gedrukt.
En hier hoe we de MyHandler class om beide event handlers te registreren:
MyHandler-handler = nieuwe MyHandler (); sendButton.addClickHandler (handler); nameField.addKeyUpHandler (handler);11. De server bellen
Nu zijn we klaar om het bericht naar de server te sturen. We voeren een externe procedureaanroep uit met asynchroon bericht versturen() methode.
De tweede parameter van de methode is AsyncCallback interface, waar de Draad is het retourtype van de corresponderende synchrone methode:
messageServiceAsync.sendMessage (textToServer, new AsyncCallback () {public void onFailure (Throwable gevangen) {serverResponseLabel.addStyleName ("serverResponseLabelError"); serverResponseLabel.setHTML ("serverfout opgetreden"); (String resultaat) {serverResponseLabel.setHTML (resultaat); vPanel.setVisible (true);}});Zoals we kunnen zien, is de ontvanger implementeertonSuccess (String-resultaat)en onFailure (werpbaar)methode voor elk antwoordtype.
Afhankelijk van het responsresultaat stellen we ofwel een foutmelding "serverfout opgetreden" in of geven we de resultaatwaarde weer in de container.
12. CSS-stijl
Bij het maken van het project met de eclipse-plug-in, wordt automatisch het Google_web_toolkit.css bestand onder het /web applicatie directory en koppel het aan het HTML-hoofdbestand.
Natuurlijk kunnen we aangepaste stijlen voor de specifieke UI-componenten programmatisch definiëren:
sendButton.addStyleName ("sendButton");Hier wijzen we een CSS-stijl toe met de klassenaam verzendknop naar onze verzendknop component:
.sendButton {display: block; lettergrootte: 16pt; }13. Resultaat
Als resultaat hebben we deze eenvoudige webapplicatie:
Hier sturen we een "Hallo daar" -bericht naar de server en drukken de "Hallo, hallo!" reactie op het scherm.
14. Conclusie
In dit korte artikel hebben we geleerd over de basisprincipes van GWT Framework. Daarna bespraken we de architectuur, levenscyclus, mogelijkheden en verschillende componenten van de SDK.
Als resultaat hebben we geleerd hoe we een eenvoudige webapplicatie kunnen maken.
En, zoals altijd, is de volledige broncode van de tutorial beschikbaar op GitHub.
