GWT - Stil mit CSS
GWT-Widgets basieren auf Cascading Style Sheets (CSS) für das visuelle Styling. Standardmäßig lautet der Klassenname für jede Komponentegwt-<classname>.
Das Button-Widget hat beispielsweise den Standardstil " gwt-Button" und ähnlich wie das TextBox-Widget den Standardstil " gwt-TextBox" .
Um allen Schaltflächen und Textfeldern eine größere Schriftart zu geben, können Sie die folgende Regel in die CSS-Datei Ihrer Anwendung einfügen
.gwt-Button { font-size: 150%; }
.gwt-TextBox { font-size: 150%; }Standardmäßig erstellen weder der Browser noch GWT einen Standard idAttribute für Widgets. Sie müssen explizit eine eindeutige ID für die Elemente erstellen, die Sie in CSS verwenden können. Um eine bestimmte Schaltfläche mit ID zu gebenmy-button-id Bei einer größeren Schriftart können Sie die folgende Regel in die CSS-Datei Ihrer Anwendung einfügen:
#my-button-id { font-size: 150%; }Um die ID für ein GWT-Widget festzulegen, rufen Sie dessen DOM-Element ab und legen Sie das ID-Attribut wie folgt fest:
Button b = new Button();
DOM.setElementAttribute(b.getElement(), "id", "my-button-id")CSS-Styling-APIs
Es stehen viele APIs zum Aufhängen der CSS-Einstellungen für jedes GWT-Widget zur Verfügung. Im Folgenden finden Sie einige wichtige APIs, die Sie bei Ihrer täglichen Webprogrammierung mit GWT unterstützen.
| Sr.Nr. | API & Beschreibung |
|---|---|
| 1 |
public void setStyleName(java.lang.String style) Diese Methode löscht alle vorhandenen Stile und setzt den Widget-Stil auf die neue CSS-Klasse, die mit style bereitgestellt wird . |
| 2 |
public void addStyleName(java.lang.String style) Diese Methode fügt dem Widget einen sekundären oder abhängigen Stilnamen hinzu. Ein sekundärer Stilname ist ein zusätzlicher Stilname. Wenn also frühere Stilnamen angewendet wurden, werden diese beibehalten. |
| 3 |
public void removeStyleName(java.lang.String style) Diese Methode entfernt den angegebenen Stil aus dem Widget und lässt alle anderen mit dem Widget verknüpften. |
| 4 |
public java.lang.String getStyleName() Diese Methode ruft alle Stilnamen des Objekts als durch Leerzeichen getrennte Liste ab. |
| 5 |
public void setStylePrimaryName(java.lang.String style) Diese Methode legt den primären Stilnamen des Objekts fest und aktualisiert alle abhängigen Stilnamen. |
Definieren wir zum Beispiel zwei neue Stile, die wir auf einen Text anwenden werden -
.gwt-Big-Text {
font-size:150%;
}
.gwt-Small-Text {
font-size:75%;
}
.gwt-Red-Text {
color:red;
}Jetzt können Sie setStyleName (Style) verwenden , um die Standardeinstellung in eine neue Einstellung zu ändern. Nach Anwendung der folgenden Regel wird die Schriftart eines Textes groß
txtWidget.setStyleName("gwt-Big-Text");Wir können eine sekundäre CSS-Regel auf dasselbe Widget anwenden, um die Farbe wie folgt zu ändern:
txtWidget.addStyleName("gwt-Red-Text");Mit der obigen Methode können Sie so viele Stile hinzufügen, wie Sie auf ein Widget anwenden möchten. Wenn Sie den ersten Stil aus dem Schaltflächen-Widget entfernen, bleibt der zweite Stil im Text.
txtWidget.removeStyleName("gwt-Big-Text");Primäre und sekundäre Stile
Standardmäßig ist der primäre Stilname eines Widgets der Standardstilname für seine Widget-Klasse, z. B. gwt-Button für Button-Widgets. Wenn wir Stilnamen mit der AddStyleName () -Methode hinzufügen und entfernen, werden diese Stile als sekundäre Stile bezeichnet.
Das endgültige Erscheinungsbild eines Widgets wird durch die Summe aller hinzugefügten sekundären Stile sowie seines primären Stils bestimmt. Sie legen den primären Stil eines Widgets mit der Methode setStylePrimaryName (String) fest . Nehmen wir zur Veranschaulichung an, wir haben ein Label-Widget. In unserer CSS-Datei sind folgende Regeln definiert:
.MyText {
color: blue;
}
.BigText {
font-size: large;
}
.LoudText {
font-weight: bold;
}Nehmen wir an, wir möchten, dass ein bestimmtes Beschriftungs-Widget immer blauen Text anzeigt, und verwenden in einigen Fällen eine größere, fett gedruckte Schriftart, um die Betonung zu erhöhen.
Wir könnten so etwas tun -
// set up our primary style
Label someText = new Label();
someText.setStylePrimaryName("MyText");
...
// later on, to really grab the user's attention
someText.addStyleName("BigText");
someText.addStyleName("LoudText");
...
// after the crisis is over
someText.removeStyleName("BigText");
someText.removeStyleName("LoudText");Zuordnen von CSS-Dateien
Es gibt mehrere Ansätze zum Zuordnen von CSS-Dateien zu Ihrem Modul. Moderne GWT-Anwendungen verwenden normalerweise eine Kombination aus CssResource und UiBinder. In unseren Beispielen verwenden wir nur den ersten Ansatz.
Verwenden eines <link> -Tags in der Host-HTML-Seite.
Verwenden des Elements <stylesheet> in der XML-Moduldatei.
Verwendung einer CssResource enthalten in a ClientBundle.
Verwenden eines Inline-Elements <ui: style> in a UiBinder Vorlage.
GWT CSS Beispiel
In diesem Beispiel werden Sie durch einfache Schritte geführt, um verschiedene CSS-Regeln auf Ihr GWT-Widgest anzuwenden. Lassen Sie uns die Eclipse-IDE zusammen mit dem GWT-Plug-In installieren und befolgen Sie die folgenden Schritte, um eine GWT-Anwendung zu erstellen:
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert . |
| 2 | Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 3 | Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen. |
Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.
<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name = 'com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path = 'client'/>
<source path = 'shared'/>
</module>Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.
body {
text-align: center;
font-family: verdana, sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}
.gwt-Button {
font-size: 150%;
font-weight: bold;
width:100px;
height:100px;
}
.gwt-Big-Text {
font-size:150%;
}
.gwt-Small-Text {
font-size:75%;
}Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html zwei Tasten aufnehmen.
<html>
<head>
<title>Hello World</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<div id = "mytext"><h1>Hello, World!</h1></div>
<div id = "gwtGreenButton"></div>
<div id = "gwtRedButton"></div>
</body>
</html>Lassen Sie uns folgenden Inhalt der Java-Datei haben src/com.tutorialspoint/HelloWorld.java Dadurch werden zwei Schaltflächen in HTML hinzugefügt und ein benutzerdefinierter CSS-Stil angewendet.
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
// add button to change font to big when clicked.
Button Btn1 = new Button("Big Text");
Btn1.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
RootPanel.get("mytext").setStyleName("gwt-Big-Text");
}
});
// add button to change font to small when clicked.
Button Btn2 = new Button("Small Text");
Btn2.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
RootPanel.get("mytext").setStyleName("gwt-Small-Text");
}
});
RootPanel.get("gwtGreenButton").add(Btn1);
RootPanel.get("gwtRedButton").add(Btn2);
}
}Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im Entwicklungsmodus kompilieren und ausführen, wie wir es im Kapitel GWT - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:
Klicken Sie nun auf die beiden angezeigten Schaltflächen und beobachten Sie "Hallo Welt!" Text, dessen Schriftart beim Klicken auf die beiden Schaltflächen ständig geändert wird.