GWT - Grundlegende Widgets

Jede Benutzeroberfläche berücksichtigt die folgenden drei Hauptaspekte:

  • UI elements- Dies sind die visuellen Kernelemente, die der Benutzer schließlich sieht und mit denen er interagiert. GWT bietet eine große Liste weit verbreiteter und allgemeiner Elemente, die von einfach bis komplex variieren und die wir in diesem Tutorial behandeln werden.

  • Layouts- Sie definieren, wie UI-Elemente auf dem Bildschirm organisiert werden sollen, und geben der GUI (Graphical User Interface) ein endgültiges Erscheinungsbild. Dieser Teil wird im Kapitel Layout behandelt.

  • Behavior- Dies sind Ereignisse, die auftreten, wenn der Benutzer mit UI-Elementen interagiert. Dieser Teil wird im Kapitel Ereignisbehandlung behandelt.

GWT-UI-Elemente

Die GWT-Bibliothek bietet Klassen in einer genau definierten Klassenhierarchie, um komplexe webbasierte Benutzeroberflächen zu erstellen. Alle Klassen in dieser Komponentenhierarchie wurden von der abgeleitetUIObject Basisklasse wie unten gezeigt -

Jedes Basic UI-Widget erbt Eigenschaften von der Widget-Klasse, die wiederum Eigenschaften von UIObject erbt. Baum und Menü werden in einem Tutorial zu komplexen Widgets behandelt.

Sr.Nr. Widget & Beschreibung
1 GWT UIObject-Klasse

Dieses Widget enthält Text, der nicht mit einem <div> -Element als HTML interpretiert wird, sodass er mit Blocklayout angezeigt wird.

2 GWT-Widget-Klasse

Dieses Widget kann HTML-Text enthalten und zeigt den HTML-Inhalt mithilfe eines <div> -Elements an, sodass er mit Blocklayout angezeigt wird.

Grundlegende Widgets

Im Folgenden finden Sie einige wichtige grundlegende Widgets :

Sr.Nr. Widget & Beschreibung
1 Etikette

Dieses Widget enthält Text, der nicht mit einem <div> -Element als HTML interpretiert wird, sodass er mit Blocklayout angezeigt wird.

2 HTML

Dieses Widget kann HTML-Text enthalten und zeigt den HTML-Inhalt mithilfe eines <div> -Elements an, sodass er mit Blocklayout angezeigt wird.

3 Bild

Dieses Widget zeigt ein Bild unter einer bestimmten URL an.

4 Anker

Dieses Widget repräsentiert ein einfaches <a> -Element.