Die Vorlage app gehalten absichtlich kurz um es einfach für einen Neuling zu lesen und zu verstehen. Alle "beweglichen Teile" der Benutzerschnittstelle sind in dieser einen Klasse zusammengefasst, MyUI.
Das Hinzufügen von mehr und mehr Widgets und Verhalten MyUI wird schnell unhandlich. Es gibt viele Ansätze, wie Sie Ihre App in verschiedene Teile aufteilen können, da Vaadin in dieser Hinsicht sehr flexibel ist. Ich werde meinen eigenen Ansatz beschreiben.
In der realen Arbeit, halte ich die MyUI Klasse so kurz wie möglich. Als Unterklasse von UI stellt die MyUI das gesamte Ansichtsfenster des Inhalts von entweder angezeigt:
- ein Fenster im Webbrowser oder Tab (der gemeinsame Weg Vaadin verwenden)
- Das Rechteck eines Portlet Ansicht (wenn Ihr Vaadin App ist in einer Webseite eingebettet ist)
Mit anderen Worten, die UI Klasse ist nur eine leere Leinwand, die weiß, wie man innerhalb des Hosts rechteckigen Bildfenster passen. Die Aufgabe des UI ist es, zwischen dem Host-Viewport und dem Vaadin-Inhalt zu vermitteln. Das Verwalten der Details dieses Vaadin-Inhalts wird besser einem separaten Objekt überlassen, das als Unterklassen von Layout definiert ist. So wird der Code einfacher, nur eine Sache von Jonglieren eines oder mehrerer Layout Unterklassenobjekte.
Sie könnten beispielsweise eine Anmeldung anzeigen Layout. Wenn sich der Benutzer dann erfolgreich authentifiziert, schalten Sie das Layout aus. An seiner Stelle wird eine andere Layout Unterklasse instanziiert, um den Hauptinhalt Ihrer App anzuzeigen. Ihr MyUI-Code würde das Wechseln von einem LoginLayout Layout-Objekt anfänglich zu dem Ersetzen mit einem InvoiceListingLayout Layout-Objekt behandeln.
Wenn ich eine neue Vaadin-App starte, extrahiere ich zuerst den Code für diese VerticalLayout und "Click Me" -Schaltfläche und verschiebe sie in eine neue Java-Klassendatei. Die neue Klasse ist eine Erweiterung von VerticalLayout mit einem Konstruktor, der das Feld, die Schaltfläche und das Verhalten der Schaltfläche festlegt.
Unten ist der Quellcode für diese neue Klasse, ClickMeLayout.Real-World-Layouts haben viel mehr Code, so dass ich brechen in der Regel, dass die Konstruktor-Methode in drei Unterprogramme:
configure()
Set Attribute des Gesamt-Layout wie Anrufe zu setSpacing und setMargins.widgets()
Legen Sie fest, dass alle Widgets in diesem Layout angezeigt werden. Ich weise fast immer die neuen Widgets als private Member-Variablen der Klasse und nicht als lokale Variable zu, wie im ursprünglichen App-Template-Code von Maven zu sehen ist.arrange()
Fügen Sie die Widgets dem Layout in einer bestimmten Reihenfolge und Anordnung hinzu. Dies bedeutet häufig, dass geschachtelte Layouts als Untergruppen von Widgets erstellt werden.
Ich machte auch explizit die this. Syntax, meine eigene Präferenz.
Hier ist die neue Klasse ClickMeLayout.java.
package com.example.vaadinlayoutsexample;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;
/**
*
* @author Basil Bourque. Use freely, but only at your own risk entirely.
*/
public class ClickMeLayout extends VerticalLayout {
private TextField name = null;
private Button button = null;
public ClickMeLayout() {
this.configure();
this.widgets();
this.arrange();
}
private void configure() {
this.setMargin (true);
this.setSpacing (true);
}
private void widgets() {
// “Name” field
this.name = new TextField();
this.name.setCaption ("Type your name here:");
// “Click Me” button
this.button = new Button ("Click Me");
this.button.addClickListener (e -> {
this.addComponent (new Label ("Thanks " + this.name.getValue() + ", it works!"));
});
}
private void arrange() {
this.addComponent (this.name);
this.addComponent (this.button);
}
}
Mit dieser Klasse etabliert, können wir gehen zurück, um die MyUI Klasse zu verkürzen. Die MyUI::init Methode schrumpft zu einer einzelnen Codezeile.
@Override
protected void init (VaadinRequest vaadinRequest) {
this.setContent (new ClickMeLayout());
}
Stellen Sie sicher, dass alles funktioniert. Machen Sie einen Clean-and-Build in Ihrem IDE. Führen Sie die App aus, um zu sehen, ob sie wie ursprünglich funktioniert.
Fahren Sie fort, um Ihre echte App zu erstellen. Kopieren Sie den Code ClickMeLayout.java, erstellen Sie eine neue Klasse und fügen Sie ihn ein, um ihn als Prototyp zu verwenden. Füge Widgets hinzu, um deine neue Layout zu erstellen. Gehen Sie zurück zu MyUI, um eine Zeile mit new ClickMeLayout() auszukommentieren, kopieren Sie diese Zeile, um sie zu duplizieren, und ändern Sie das Duplikat, um Ihre neue Layoutklasse anstelle von ClickMeLayout aufzurufen.
@Override
protected void init (VaadinRequest vaadinRequest) {
// this.setContent (new ClickMeLayout());
this.setContent (new InvoiceListingLayout());
}
Ich schlage vor, die ClickMeLayout um dauerhaft in seinem ursprünglichen Zustand zu halten. Ich finde es eine handliche Gesundheitsüberprüfung. Schließlich, wenn Ihre App drunter und drüber geht, sind Sie vielleicht nicht sicher, ob das Problem Ihr eigener Code oder ein Fehler mit Ihrer IDE, Ihrem Web-Container (Tomcat, Jetty, etc.), Ihrem Webbrowser oder wer-weiß-was ist . In dieser Situation können Sie zu der Methode MyUI zurückkehren, den Aufruf Ihres Layouts deaktivieren, die Zeile mit dem Aufruf new ClickMeLayout() erneut aktivieren, eine Bereinigung durchführen und die App ausführen. Wenn das erfolgreich ausgeführt wird, wissen Sie, dass der Fehler in Ihrem Code liegt.
By the way, wenn die neue Lambda-Syntax in der addClickListener Linie gesehen Sie abwirft, hier ist der entsprechende Code der alte Java-Syntax als eine anonyme innere Klasse.
this.button.addClickListener (new Button.ClickListener() {
@Override
public void buttonClick (Button.ClickEvent e) {
ClickMeLayout.this.addComponent (new Label ("Thanks" + ClickMeLayout.this.name.getValue() + ", it works!"));
}
});
