Page Comparison

Dialoge sind kleine Pop-Ups die z.B. durch einen Buttonklick aufgerufen werden können. Diese können alle Arten von UI-Komponente beinhalten und können durch einen klick außerhalb wieder verschwinden.

...

Erstellen von einen simplen Dialog:

1. Zuerst muss ein neuen GUI-Element erstellt werden mit der Superclass “com.vaadin.flow.component.dialog.Dialog”.

   Image Removed

2. Dann muss noch im GUI-Designer ein Layout hinzugefügt werden (z.B. VerticalLayout) und dann kann der Dialog nach belieben designed werden.

   Image Removed

3. Dann auf der Ziel-View z.B. einen neuen Button einfügen

   Image Removed

4. Mit Doppelklick auf den Button öffnet sich die Code-Ansicht

5. Dann kann der Dialog per open()-Methode auf der View angezeigt werden

   Image Removed

...

Ein simpler Dialog kann einfach per Code schnell erstellt werden.

final VerticalLayout layout = new VerticalLayout();
final Dialog         dialog = new Dialog(layout);
final Label          label  = new Label("Message sent");
final Button         ok     = new Button("OK", e -> dialog.close());

layout.add(label, ok);
dialog.open();

Erstellen von einen komplexen Dialog:

Für einen komplexeren Dialog werden wir eine extra View erstellen, was uns erleichtert den Dialog zu designen.

1. Zuerst muss ein neuen GUI-Element erstellt werden

2. Image Added

   Diese View kann dann nach beliebend designed werden

3. Image Added

   Dann diese einfach dem Dialog übergeben. Um die OK-Close Funktionalität aus dem ersten Beispiel beizubehalten wird die Close-Methode als Runnable übergeben.

   Code Block
   language java
   final Dialog dialog = new Dialog(); dialog.add(new MyDialogView(dialog::close)); dialog.open();