Page Comparison

Views lassen sich auch als Popup Fenster aufrufen. Dazu bietet Ihnen RapidClipse in der Palette das Code-Template PopupWindow.

1. Legen Sie eine neue /wiki/spaces/RC11DOCDE/pages/2518616398an, z.B. CustomerView und fügen Sie einige UI-Komponenten ein.
2. Fügen Sie in die MainView einen XdevButton ein und registrieren Sie ein buttonClick Event.
3. Setzen Sie in der Code-Ansicht den Cursor unter den generierten Button.ClickEvent Handler. 
4. Ziehen Sie aus der Palette das Code-Template unter den generierten Button.ClickEvent Handler.
5. Geben Sie als ersten Parameter die aufzurufende View CustomerView an.

...

Notifications sind kleine Dialoge, welche auf der View erscheinen, um den Benutzer etwas mitzuteilen.

Erstellen einer einfachen Notification:

Notification.show("Hello!");

Ergebnis: Am linken unteren Bildschirmrand, taucht eine kleine Notification auf.

Image Added

Erstellen und Konfigurieren einer Notification:

privatefinal void button_buttonClick(Button.ClickEvent event) {
	PopupWindow.For(new CustomerView()).closable(true).draggable(true).resizable(true).modal(true).show();
}

Examples:

Popup Fenster schließen - Mit Hilfe eines XdevButton lässt sich das Popup Fenster wieder schließen.

Notification myNotification = new Notification();
myNotification.setDuration(2000);                                  // Zeige die Notification für 2 Sekunden
myNotification.setText("Hello!");                                  // Setze den Text auf "Hello!"
myNotification.setPosition(Position.TOP_START);                    // Die Notification soll von links oben erscheinen
myNotification.addThemeVariants(NotificationVariant.LUMO_SUCCESS); // Die Notification soll eine SUCCESS Nachricht sein

// Zeige die Notification an
myNotification.open(); 

Ergebnis:

Image Added

Notifications sind nicht nur auf einen Text eingeschränkt, sondern können auch ganze Views und Layouts beinhalten.

Beispiel:

...

final VerticalLayout layout = new VerticalLayout();
layout.add(new Button("Test Button"));
layout.add(new Label("You can add more than just text!"));

final Notification myNotification = new Notification(layout);
myNotification.open();

Ergebnis:

Image Added