Ein modales Editier-Window

Dialog mit VaadinBuilder erstellen

Modales Dialogfenster
Modales Dialogfenster

Mit dem VaadinBuilder lässt sich ein modaler Dialog einfach erstellen und in eine Seite integrieren. Das lässt sich gut am Quellcode erklären.

Dialog als innere Klasse anlegen

...
    private class SubtaskDialog {
        TextField tag, estimate, spent
        TextArea description
        CheckBox supertask, completed
        Button saveButton, cancelButton
        Window window

        private VaadinBuilder winBuilder = new VaadinBuilder()

        public Window build() {
            String keyPrefix = "${subkeyPrefix}dialog."
            winBuilder.keyPrefix = keyPrefix
            window = winBuilder."$C.window"('Subtask anlegen',
                    [spacing: true, margin: true,
                     modal  : true, closable: false]) {
                "$C.vlayout"('top', [spacing: true, margin: true]) {
                    "$F.text"('Aufgabe', [uikey: TAG])
                    "$C.hlayout"('Status', [spacing: true, margin: false]) {
                        "$F.checkbox"('übergeordnet', [uikey: IS_SUPERTASK])
                        "$F.checkbox"('abgeschlossen', [uikey: IS_COMPLETED])
                    }
                    "$F.text"('Schätzung', [uikey: ESTIMATE])
                    "$F.text"('aktueller Verbrauch', [uikey: SPENT])
                    "$F.textarea"('Beschreibung', [uikey: DESCRIPTION])
                    "$C.hlayout"([uikey: 'buttonfield', spacing: true]) {
                        "$F.button"('Cancel',
                                [uikey         : 'cancelbutton',
                                 disableOnClick: true, enabled: true,
                                 clickListener : { sm.execute(Event.Cancel) }])
                        "$F.button"('Save',
                                [uikey         : 'savebutton',
                                 disableOnClick: true, enabled: true,
                                 clickListener : { sm.execute(Event.Save) }])
                    }
                }
            }

            def dialogComponents = winBuilder.uiComponents
            tag = dialogComponents."$keyPrefix$TAG"
            estimate = dialogComponents."$keyPrefix$ESTIMATE"
            spent = dialogComponents."$keyPrefix$SPENT"
            description = dialogComponents."$keyPrefix$DESCRIPTION"
            completed = dialogComponents."$keyPrefix$IS_COMPLETED"
            supertask = dialogComponents."$keyPrefix$IS_SUPERTASK"
            saveButton = dialogComponents."${keyPrefix}savebutton"
            cancelButton = dialogComponents."${keyPrefix}cancelbutton"
            window.center()
        }
    }
Zeile 273
Der Dialog wird innerhalb einer inneren Klasse angelegt. Dadurch ist es möglich, auf die Elemente der umgebenden Klasse zuzugreifen. Die umgebende Klasse enthält den Teil der GUI, zu dem der Dialog gehört.
Zeile 283
Für den Dialog wird ein VaadinBuilder lokal angelegt, da der Dialog nicht in die Haupt-GUI eingebunden ist.
Zeile 288
Als Top Level Container wird ein Window angelegt, das die Dialogkomponenten enthält.
Zeile 290
Über die Properties modal und closable wird festgelegt, dass das Window modal ist und nicht über eine „Schließen“ Schaltfläche verfügt. Der Dialog kann also nur unter Programmkontrolle nach Klick auf Save oder Cancel verlassen werden.
Zeilen 302, 305
Die Buttons bekommen einen ClickListener, der ein Event an die State Machine der umgebenden Klasse sendet. Das Dialogfenster ist daher in die Ablaufsteuerung der umgebenden (View-) Klasse eingebunden, siehe State Dialog der StateMachine.
Zeile 313
Das Dialogfenster muss nach der Initialisierung zentriert werden. Das geht nicht mit dem Builder, da es keine setCentered() Methode gibt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.