Google Web Toolkit bzw. GWT Web Toolkit, ist ein Open – Source – Satz von Tools , die ermöglicht , Web – Entwickler – Komplex zu erstellen und pflegen JavaScript Front-End – Anwendungen in Java . Anders als ein paar native Bibliotheken ist alles Java-Quelle, die auf jeder unterstützten Plattform mit den mitgelieferten GWT Ant Build-Dateien erstellt werden kann. Es ist unter der Apache-Lizenzversion 2.0 lizenziert.
GWT unterstreicht wiederverwendbare Ansätze für gemeinsame Web-Entwicklungsaufgaben, nämlich asynchrone Remoteprozeduraufrufe , History Management, Lesezeichen , UI-Abstraktion, Internationalisierung und Cross-Browser- Portabilität.
Google Web Toolkit Vorstellung
Überblick
GWT ist ein Entwicklungs-Toolkit zur Erstellung und Optimierung komplexer browserbasierter Anwendungen. Sein Ziel ist es, die produktive Entwicklung von leistungsstarken Webanwendungen zu ermöglichen, ohne dass der Entwickler ein Experte für Browser-Quiz, XMLHttpRequest und JavaScript sein muss. GWT wird von vielen Produkten bei Google verwendet, darunter AdWords, AdSense, Flüge, Hotelsucher, Angebote, Google Wallet und Blogger. Es ist Open Source, völlig kostenlos und wird von Tausenden von Entwicklern auf der ganzen Welt verwendet.
Was ist in der Toolbox?
SDK
Das GWT-SDK enthält die Java-API-Bibliotheken, den Compiler und den Entwicklungsserver. Sie können clientseitige Anwendungen in Java schreiben und sie als JavaScript bereitstellen.
Plugin für Eclipse
Das Plugin für Eclipse bietet IDE-Unterstützung für GWT- und App Engine-Webprojekte.
Entwicklung mit GWT
Schreiben
Das GWT SDK bietet eine Reihe von Java-APIs und Widgets. Diese ermöglichen es Ihnen, AJAX-Anwendungen in Java zu schreiben und die Quelle dann zu hoch optimiertem JavaScript zu kompilieren, das in allen Browsern läuft, einschließlich mobiler Browser für Android und das iPhone.
Das Erstellen von AJAX-Anwendungen auf diese Weise ist produktiver dank einer höheren Abstraktionsebene als üblicher Konzepte wie DOM-Manipulation und XHR-Kommunikation.
Sie sind auch nicht auf vorgefertigte Widgets beschränkt. Alles, was Sie mit dem DOM des Browsers und JavaScript tun können, kann in GWT erledigt werden, einschließlich der Interaktion mit handgeschriebenem JavaScript.
Debuggen
Sie können AJAX-Anwendungen in Ihrer bevorzugten IDE wie bei einer Desktop-Anwendung debuggen und in Ihrem bevorzugten Browser genauso wie bei der Codierung von JavaScript. Das GWT-Entwickler-Plugin umfasst die Lücke zwischen dem Java-Bytecode im Debugger und dem JavaScript des Browsers.
Dank des GWT-Entwickler-Plugins gibt es kein Kompilieren von JavaScript-Code, um es im Browser anzuzeigen. Sie können denselben Edit-Refresh-View-Zyklus verwenden, den Sie für JavaScript gewohnt sind, während Sie gleichzeitig Variablen untersuchen, Breakpoints setzen und alle anderen Debugger-Tools verwenden, die Ihnen mit Java zur Verfügung stehen. Da sich der Entwicklungsmodus von GWT jetzt im Browser selbst befindet, können Sie Tools wie Firebug und Inspector während des Codes in Java verwenden.
Optimieren
GWT enthält zwei leistungsstarke Werkzeuge zum Erstellen optimierter Webanwendungen. Der GWT-Compiler führt umfassende Optimierungen für Ihre Codebase-In-Lining-Methoden durch, indem Sie Dead Code entfernen, Strings optimieren und vieles mehr. Durch die Festlegung von Splitpunkten im Code kann der Download auch in mehrere JavaScript-Fragmente unterteilt werden, wodurch große Anwendungen für eine schnellere Startzeit getrennt werden.
Leistungsengpässe sind nicht auf JavaScript beschränkt. Browser-Layout und CSS verhalten sich häufig auf merkwürdige Weise, die schwer zu diagnostizieren sind. Speed Tracer ist eine neue Chrome-Erweiterung in GWT, mit der Sie Leistungsprobleme im Browser diagnostizieren können.
Lauf
Wenn Sie bereit sind zu implementieren, kompiliert GWT Ihren Java-Quellcode in optimierte, eigenständige JavaScript-Dateien, die automatisch in allen gängigen Browsern sowie in mobilen Browsern für Android und iPhone ausgeführt werden.
Bereit, loszulegen?
Laden Sie das SDK herunter und installieren Sie eine einfache Webanwendung. Von dort aus arbeiten Sie mit den ausführlichen Tutorials über die Grundlagen der GWT-Entwicklung .
Google Web Toolkit Tutorials
Tutorials: Überblick
Diese Tutorials richten sich an Entwickler, die mithilfe von GWT umfangreiche AJAX-Anwendungen schreiben möchten. Sie könnten ein Java-Entwickler sein, der die Software-Engineering-Prinzipien der objektorientierten Programmierung anwenden und die Tools in Ihrer Java-IDE beim Schreiben von Anwendungen für das Web nutzen möchte. Oder Sie sind ein JavaScript-Guru, der neugierig ist auf die Fähigkeit von GWT, hoch optimiertes JavaScript zu generieren.
Obwohl Kenntnisse in HTML, CSS und Java vorausgesetzt werden, ist es nicht erforderlich, diese Lernprogramme auszuführen.
Diese Tutorials basieren auf der Entwicklung von zwei Beispielanwendungen, so dass der Benutzer in jedem Schritt verschiedene GWT-Konzepte lernt.
- StockWatcher ist eine Anwendung zum Überwachen von Bestandsvariationen, und Sie können die Quellen von github beziehen
- TodoList eine Webanwendung zum Erstellen und Pflegen einer Todo-Checkliste im Browser. Quellen sind auch bei githubverfügbar .
Bevor Sie beginnen
Bevor Sie diese Tutorials beginnen, gehen wir davon aus, dass Sie Folgendes getan haben:
- Das Java SDK installiert.
- Wenn Sie keine aktuelle Version des Java SDK installiert haben, laden Sie das Java Standard Edition SDK herunter und installieren Sie es .
- Installierte Eclipse oder Ihre Lieblings-Java-IDE.
- In diesen Tutorials verwenden wir Eclipse, da es Open Source ist. GWT bindet Sie jedoch nicht an Eclipse. Sie können IntelliJ , NetBeans oder beliebige Java IDE verwenden, die Sie bevorzugen. Wenn Sie eine andere Java-IDE als Eclipse verwenden, werden die Screenshots und einige der spezifischen Anweisungen im Tutorial unterschiedlich sein, aber die grundlegenden GWT-Konzepte sind identisch.
- Wenn Ihre Java-IDE keine Apache Ant-Unterstützung enthält, können Sie Ant herunterladen und entpacken , um GWT-Anwendungen einfach zu kompilieren und auszuführen.
- Installiert das Google Plugin für Eclipse.
- Das Google-Plug-in für Eclipse erweitert Eclipse um Funktionen für das Erstellen und Entwickeln von GWT-Anwendungen.
- Heruntergeladene GWT.
- GWT kann mit dem Google Plugin für Eclipse heruntergeladen werden. Laden Sie alternativ die neueste Distribution von GWTfür Ihr Betriebssystem herunter .
- Entpacken Sie die GWT-Distribution in dem Verzeichnis, in dem Sie es ausführen möchten.
- GWT hat kein Installationsprogramm. Alle Dateien, die Sie zum Ausführen und Verwenden von GWT benötigen, befinden sich im extrahierten Verzeichnis.
Sie können optional auch Folgendes tun:
- Installieren Sie das Google App Engine-SDK.
- Mit Google App Engine können Sie Java-Webanwendungen, einschließlich GWT-Anwendungen, in der Google-Infrastruktur ausführen. Das App Engine SDK kann mit dem Google Plugin für Eclipse heruntergeladen werden. Alternativ können Sie das App Engine SDK für Java separat herunterladen .
- Erstellen und führen Sie Ihre erste Webanwendung aus – Ein paar einfache Schritte, um Sie mit den Kommandozeilenbefehlen vertraut zu machen.
GWT-Anleitungen
Erstellen Sie eine Beispiel-GWT-Anwendung
- Beginnen Sie mit GWT, indem Sie die StockWatcher-Anwendung von Grund auf neu entwickeln. Sie lernen, ein GWT-Projekt zu erstellen, die Benutzeroberfläche mit GWT-Wigdets und -Panels zu erstellen, die clientseitige Funktionalität in der Java-Sprache zu codieren, im Entwicklungsmodus zu debuggen, CSS-Stile anzuwenden, Java in JavaScript zu kompilieren und Produktionsmodus.
Client-Server Kommunikation
- Kommunikation mit dem Server über GWT RPC
- Fügen Sie einen Anruf mit GWT RPC zu einem Server hinzu. Sie lernen, wie Sie asynchrone Aufrufe durchführen, Java-Objekte serialisieren und Ausnahmen behandeln.
- JSON-Daten über HTTP abrufen
- Stellen Sie HTTP-Anforderungen zum Abrufen von JSON-Daten von einem Server her. Die gleiche Technik kann zum Abrufen von XML-Daten verwendet werden.
- Übergreifende Anforderungen treffen
- Rufen Sie einen Remote-Server an und arbeiten Sie mit SOP (Same Origin Policy) -Einschränkungen.
Internationalisierung
- Internationalisierung einer GWT-Anwendung
- Übersetzen Sie die Benutzeroberfläche einer GWT-Anwendung in eine andere Sprache mithilfe der statischen Zeichenfolgen-Internationalisierung.
JUnit Testing
- Unit-Tests mit JUnit
- Hinzufügen von Unit-Tests zu einer GWT-Anwendung mit JUnit.
Bereitstellen in Google App Engine
- Bereitstellen in Google App Engine
- Stellen Sie eine GWT-Anwendung für App Engine bereit .
Moderne Apps mit GWT & Polymer aufbauen
Schreiben Sie reaktionsschnelle GWT-Anwendungen für Mobile und Desktop mit Polymer Elements und JsInterop.
- Erstellen Sie eine GWT-App.
- Beginnen Sie damit, dass GWT neue Maven-Projekte von Grund auf neu erstellt, sie in SuperDevMode ausgeführt und debuggt sowie externe Abhängigkeiten enthält.
- Entwerfen Sie die Benutzeroberfläche
- Codieren Sie die Anwendungslogik
Geschichte
GWT Version 1.0 RC 1 wurde am 16. Mai 2006 veröffentlicht. [3] Google gab GWT auf der JavaOne Konferenz 2006 bekannt. [4]
Freisetzung | Datum |
---|---|
GWT 1.0 | 17. Mai 2006 |
GWT 1.1 | 11. August 2006 |
GWT 1.2 | 16. November 2006 |
GWT 1.3 | 5. Februar 2007 |
GWT 1.4 | 28. August 2007 |
GWT 1.5 | 27. August 2008 |
GWT 1.6 | 7. April 2009 |
GWT 1.7 | 13. Juli 2009 |
GWT 2.0 | 8. Dezember 2009 |
GWT 2.1.0 | 19. Oktober 2010 |
GWT 2.2.0 | 11. Februar 2011 |
GWT 2.3.0 | 3. Mai 2011 |
GWT 2.4.0 | 8. September 2011 |
GWT 2.5.0 | Oktober 2012 |
GWT 2.5.1 | März 2013 |
GWT 2.6.0 | 30. Januar 2014 |
GWT 2.6.1 | 10. Mai 2014 |
GWT 2.7.0 | 20. November 2014 |
GWT 2.8.0 | 20. Oktober 2016 |
GWT 2.8.1 | 24. April 2017 |
Im August 2010 erwarb Google Instantiations, [5] ein Unternehmen, das für seine Fokussierung auf Eclipse Java Entwickler-Tools, einschließlich GWT Designer, die jetzt mit Google Plugin für Eclipse gebündelt bekannt ist .
Im Jahr 2011 hat Google mit der Einführung der Dart-Programmiersprache die GWT-Community versichert, dass GWT weiterhin in absehbarer Zeit unterstützt wird, aber auch auf eine mögliche Annäherung zwischen den beiden Google-Ansätzen auf „strukturierte Web-Programmierung“ hindeutet. Sie haben aber auch zugegeben, dass eine Reihe von Ingenieuren, die zuvor an GWT arbeiten, nun an Dart arbeiten . [6]
Im Jahr 2012 gab Google auf ihrer jährlichen I / O-Konferenz bekannt, dass GWT von einem Google-Projekt in ein vollständig offenes Projekt umgewandelt werden würde. [7] Im Juli 2013 schrieb Google auf seinem GWT-Blog, dass die Umwandlung in ein Open-Source-Projekt abgeschlossen war. [8]
Entwicklung mit GWT
Mit Hilfe von GWT können Entwickler Ajax- Anwendungen in der Java-Sprache mit den Java-Entwicklungswerkzeugen ihrer Wahl entwickeln und debuggen . Wenn die Anwendung implementiert wird, übersetzt der GWT-Cross-Compiler die Java-Anwendung in eigenständige JavaScript- Dateien, die optional verschleiert und tief optimiert sind. Bei Bedarf kann JavaScript auch direkt in Java-Code eingebettet werden, wobei Java-Kommentare verwendet werden. [9]
GWT dreht sich nicht nur um die Programmierung der Benutzeroberfläche. Es ist ein allgemeiner Satz von Werkzeugen für den Aufbau jeder Art von High-Performance-Client-Seite JavaScript-Funktionalität. In der Tat sind viele wichtige architektonische Entscheidungen dem Entwickler völlig überlassen. Das GWT-Leitbild [10] verdeutlicht den philosophischen Zusammenbruch der Rolle von GWT gegenüber der Rolle des Entwicklers. Die Geschichte ist ein Beispiel dafür: Obwohl GWT Geschichtsmarken verwaltet, wie die Benutzer im Browser auf Zurück oder Vorwärts klicken, wird nicht beschrieben, wie man Historien-Token einem Anwendungsstatus zuordnen kann.
GWT-Anwendungen können in zwei Modi betrieben werden:
- Entwicklungsmodus (früher Hosted-Modus ): Die Anwendung wird als Java-Bytecode innerhalb der Java Virtual Machine (JVM) ausgeführt. [11] Dieser Modus wird in der Regel für die Entwicklung verwendet, unterstützt Hot Swapping von Code und Debugging. Im Jahr 2014 wurde die klassische Implementierung von Dev Mode durch Browser-Updates [12] [13] unbrauchbar gemacht, bis der Ersatz mit dem kompatibleren Super Dev Mode , der in GWT 2.7 standardmäßig wurde. [14]
- Produktionsmodus (früher Web-Modus ): Die Anwendung wird als reines JavaScript und HTML ausgeführt, kompiliert von der Java-Quelle. Dieser Modus wird normalerweise für die Bereitstellung verwendet.
Mehrere Open-Source- Plugins sind verfügbar, um die GWT-Entwicklung mit anderen IDEs , einschließlich GWT4NB [15] für NetBeans , Cypal Studio für GWT [16] (ein Eclipse Plugin) und GWT Developer für JDeveloper , einfacher zu machen . Das Google Plugin für Eclipse verarbeitet die meisten GWT-bezogenen Aufgaben in der IDE, einschließlich der Erstellung von Projekten, dem Aufrufen des GWT-Compilers, der Erstellung von GWT-Startkonfigurationen, der Validierung und der Syntax-Hervorhebung .
Komponenten
Die wichtigsten GWT-Komponenten sind:
- GWT Java-to-JavaScript Compiler [17] [18]
- Übersetzt die Java-Programmiersprache in die JavaScript-Programmiersprache.
- GWT-Entwicklungsmodus
- Ermöglicht es den Entwicklern, GWT-Anwendungen im Entwicklungsmodus auszuführen und auszuführen (die App läuft als Java im JVM ohne Kompilierung in JavaScript). Vor dem 2.0 gab der GWT-gehostete Modus einen speziellen „gehosteten Browser“, um Ihren GWT-Code zu debuggen. In 2.0 wird die gebuchte Webseite innerhalb eines regulären Browsers angezeigt. Der Entwicklungsmodus wird durch die Verwendung eines nativen Code-Plugins unterstützt, das das Google Web Toolkit Developer Plugin für viele populäre Browser genannt wird.
- JRE Emulationsbibliothek
- JavaScript-Implementierungen der häufig verwendeten Klassen in der Java-Standardklassenbibliothek (wie die meisten java.lang-Paketklassen und eine Teilmenge der java.util-Paketklassen).
- GWT Web UI Klassenbibliothek
- Eine Reihe von benutzerdefinierten Schnittstellen und Klassen für die Erstellung von Widgets .
Eigenschaften
- Dynamische und wiederverwendbare UI-Komponenten : Programmierer können vorkonfigurierte Klassen verwenden, um ansonsten zeitaufwändige dynamische Verhaltensweisen wie Drag-and-Drop oder anspruchsvolle visuelle Baumstrukturen zu implementieren. [19]
- Einfacher RPC- Mechanismus
- Browser-History-Management
- Unterstützung für voll funktionsfähiges Java-Debugging [4]
- GWT behandelt einige Cross-Browser-Probleme für den Entwickler. [4]
- Einheitsprüfung Integration
- Unterstützung für Internationalisierung und Lokalisierung
- HTML-Canvas-Unterstützung (vorbehaltlich API-Änderungen) [20]
- Die Entwickler können handgeschriebene JavaScript in den Java-Quellcode mithilfe der JavaScript Native Interface (JSNI) mischen.
- Unterstützung bei der Verwendung von Google APIs in GWT-Anwendungen (zunächst Unterstützung für Google Gears )
- Open Source
- Die Entwickler können ihre Anwendung reine objektorientiert gestalten und entwickeln, da sie Java (anstelle von JavaScript) verwenden. [19] Häufige JavaScript-Fehler, wie Tippfehler und Typ-Mismatches , werden zur Kompilierzeit gefangen.
- Das JavaScript, das der GWT-Compiler generiert, kann maßgeschneidert werden, um entweder unauffällig und einfacher zu verstehen oder zu verschleiern und kleiner zu downloaden. [19]
- Eine Anzahl von Bibliotheken steht für GWT, bei Google und Dritten zur Verfügung. Diese erweitern die Eigenschaften von GWT. [19]
Verfügbare Widgets
Ab Version 2.4 (September 2011) bietet GWT mehrere Widgets [21] und Panels an. [21]
Widgets | Panels |
---|---|
Taste | PopupPanel |
Knopf drücken | StackPanel |
Radio knopf | StackLayoutPanel |
CheckBox | HorizontalPanel |
Datumsauswahl | VerticalPanel |
Umschaltknopf | FlowPanel |
Textfeld | VerticalSplitPanel |
KennwortTextBox | HorizontalSplitPanel |
TextArea | SplitLayoutPanel |
Hyperlink | DockPanel |
ListBox | DockLayoutPanel |
CellList | TabPanel |
Menüleiste | TabLayoutPanel |
Baum | DisclosurePanel |
CellTree | |
SuggestBox | |
RichTextArea | |
FlexTable | |
Gitter | |
CellTable | |
CellBrowser | |
Tab-Leiste | |
Dialogbox |
Viele gängige Widgets, die im GWT nicht gefunden wurden, wurden in Drittanbieterbibliotheken wie Sencha GXT (früher Ext GWT ), GWT Component Library , GWT-Ext , GWT Widget Library , GWTiger , Rocket GWT , Dojo , SmartGWT etc. implementiert .
Enterprise usage
GWT verwendet oder unterstützt Java , Apache Tomcat (oder ähnlichen Webcontainer), Eclipse IDE , Internet Explorer , [22] und Internationalisierung und Lokalisierung . Java-basierte GWT RIAs können mit JUnit Test Framework und Code Coverage Tools getestet werden . Weil GWT die Kompilierung der Zeitüberprüfung von Bildern, CSS und Geschäftslogik ermöglicht, werden viele gängige Entwicklungsfehler automatisch entdeckt, ohne dass die manuelle Prüfung erforderlich ist, die von RIAs häufig erforderlich ist.
Google hat festgestellt, dass einige seiner Produkte sind GWT basiert : [23]
- Blogger
- AdWords
- Flüge
- Brieftasche
- Bietet an
- Gruppen
- Posteingang [24]
Andere Unternehmen, die GWT nutzen, sind auf den echten Projektprojekten aufgeführt .
GWT 2.0
Am 08. Dezember 2009 startete Google Web Toolkit 2.0 mit Speed Tracer. [25]
Version 2.0 von GWT bietet eine Reihe von neuen Funktionen, [26] , einschließlich:
- In-Browser-Entwicklungsmodus (früher bekannt als Out Of Process Hosted Mode, OOPHM): Vor der Version 2.0 wurde der gehostete Modus zum Einbetten eines modifizierten Browsers verwendet, um die Bytecode-Version der Anwendung während der Entwicklung zu ermöglichen. Mit Version 2.0, gehosteten Modus, umbenannt „Entwicklungsmodus“, ermöglicht die Verwendung eines beliebigen (unterstützten) Browsers, um die Seite zu sehen, die Debugging, durch die Verwendung eines Browser-Plugins. Das Plugin kommuniziert mit der Entwicklungsmodus-Shell mit TCP / IP, was eine Cross-Plattform-Debugging ermöglicht (z. B. Debugging in Internet Explorer unter Windows von einem auf einem Linux-Rechner laufenden Entwicklungsmodus-Shell).
- Code-Splitting: Mit dem Entwickler, der „Split Points“ im Quellcode zur Verfügung stellt, kann der GWT-Compiler den JavaScript-Code in mehrere kleine Chunks anstelle eines großen Downloads aufteilen. Dies führt zu einer reduzierten Startzeit der Anwendung, da die Größe des ursprünglichen Downloads verringert wird.
- Deklarative Benutzeroberfläche: Mit einem XML-Format ermöglicht die neue Funktion UiBinder die Erstellung von Benutzeroberflächen durch Deklaration statt Code. Dies ermöglicht eine saubere Trennung von UI-Konstruktion und Verhaltensimplementierung.
- Ressourcenbündelung: Die ClientBundle-Schnittstelle ermöglicht es, dass Ressourcen jeglicher Art (Bilder, CSS, Text, Binär) zusammengebunden und in einem Download übertragen werden, was zu weniger Hin- und Rückfahrten zum Server und damit zu einer geringeren Anwendungslatenz führt.
Da der neue Entwicklungsmodus den meisten plattformspezifischen Code entfernt hat, wird die neue Version als ein einziges Archiv verteilt, anstatt einer pro unterstützten Plattform, wie es bei früheren Versionen der Fall war.
Mobile
Als allgemeiner Rahmen für die Herstellung von Web-Apps ist GWT auch in der Lage, als Framework für die Herstellung von mobilen und Tablet-Apps verwendet zu werden, indem man entweder die benötigten Widgets und Animationen von Grund auf neu macht oder mit einem der mobilen Frameworks für GWT arbeitet. Eine HTML5-App, die in GWT geschrieben wurde, kann separate Ansichten für Tablets und Mobiltelefone haben.
Einige der gängigsten mobilen GWT-Bibliotheken
- GwtMobile
- Gwt-mobile-webkit
- Jqm4gwt
- M-gwt
- Gwtbootstrap3
www.gwtproject.org/
GWT homepage · Overview · Get started · Tutorials · Docs · Resources · Make GWT Better · Terms · Download · Java Doc · Access our Google+ community.
Top of Form
Bottom of Form |
|
Overview
Overview. GWT is a development toolkit for building and … |
Java Doc
Log handlers and related classes for java.util.logging support in … |
Tutorials
GWT & Polymer – Build the UI – Retrieving JSON – GWT RPC |
Examples
If you’re like us, the first thing you want to do is see examples of … |
Download
Note – This download contains the standalone GWT SDK and tools … |
Release Notes for 2.7.0
The GWT Release Notes. 2.8.1 Apr 24, 2017; 2.8.0 Oct 20, 2016; 2 … |
Get started
Getting Started. Prerequisites; Download and Install GWT … |
Versions
Versions. GWT is licensed under the Apache 2.0 open source … |
Docs
Build User Interfaces – Organize Projects – Activities And Places |
Widgets Gallery
Widget Gallery. The following are widgets and panels available in … |