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 Klick außerhalb wieder verschwinden.

...

Erstellen von einen simplen Dialog:

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 und als Superclass Dialog auswählen.

   Image Removed

2. Dann im GUI-Designer muss noch 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

...

1. 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();