Eigene UI-Komponenten

In bestimmten Fällen möchte man die Standard-Funktionalität von UI-Komponente erweitern oder individuell ändern. Dazu können Sie von den Standard-Komponenten ableiten und die neue UI-Komponente anschließend auch im GUI-Builder zur Verfügung stellen. 

UI-Komponente erzeugen

  1. Klicken Sie im Project Management > main-java aufCreate a new GUI element.
  2. Legen Sie im folgenden Dialog bei Name einen Namen für Ihre UI-Komponente fest, z.B. MyButton
  3. Klicken Sie bei Superclass > Browse.
  4. Wählen Sie im folgenden Dialog eine UI-Komponente von der Sie Ihre UI-Komponente ableiten möchten (Superklasse), z.B. Button.
  5. Klicken Sie auf OK.
  6. Klicken Sie auf Finish.
Ergebnis:
  • Es wird eine neue UI-Komponente vom Typ Button erzeugt.

    package com.company.demoproject.ui;
    
    import com.vaadin.flow.component.button.Button;
    
    public class MyButton extends Button
    {
    	public MyButton()
    	{
    		super();
    		this.initUI();
    	}
    
    	/* WARNING: Do NOT edit!<br>The content of this method is always regenerated by the UI designer. */
    	// <generated-code name="initUI">
    	private void initUI()
    	{
    		this.setText("Button");
    		
    		this.setSizeUndefined();
    	} // </generated-code>
    }
  • Im Project Management > main-java > ui wird die neue UI-Komponente angezeigt und kann damit im GUI-Builder angezeigt, editiert, via Properties konfiguriert und in der Javacode-Ansicht erweitert werden. 
  • Um die Komponente zu der Palette hinzuzufügen, können Sie wie folgt vorgehen:
    • Auf Customize Palette drücken
    • Dann die Interaction Kategorie anklicken und dann auf Add Element klicken.
    • Im folgenden Dialog dann nach MyButton suchen und Ihre Klassen dann auswählen.
    • Dann können Sie mit OK bestätigen und Ihr Button sollte dann unter Interaction erscheinen.

UI-Komponente erweitern

Die neue UI-Komponente kann beliebig mit neuen Eigenschaften und Methoden erweitert werden.

  1. Klicken Sie im Project Management > main-java > ui die neue UI-Komponente mit Doppelklick an.
  2. Weisen Sie der UI-Komponente ein Icon zu.
  3. Definieren Sie eine neue Eigenschaft, z.B. MousOverCaption.

    String MouseOverCaption = "";
    
    public String getMouseOverCaption() {
    	return MouseOverCaption;
    }
    
    public void setMouseOverCaption(String mouseOverCaption) {
    	MouseOverCaption = mouseOverCaption;
    }
  4. Klicken Sie auf Speichern.
Hinweis:
  • Im Code definierte Properties werden später bei Properties > Object angezeigt.

Neue UI-Komponente verwenden

Die neue UI-Komponente kann wie jede andere UI-Komponente im GUI-Builder verwendet werden.

  1. Öffnen Sie  im Project Management > main-java > ui > MainLayout.ui.xml.
  2. Wählen Sie die neue UI-Komponente in der Palette aus und ziehen Sie diese per Drag & Drop auf den GUI-Builder.