Backend meets Frontend Reloaded: Menü und Benachrichtigungen

Die Anforderungen

Eine Webanwendung kann den unterschiedlichsten Zielgruppen angedacht sein. In unserem Fall nehmen wir eine Anwendung an, die in einem Büro für die Unterstützung der internen Prozesse genutzt wird. Damit haben wir es eher mit einer ganz gewöhnlichen Geschäftsanwendung zu tun, mit der wahrscheinlich schon so ziemlich jeder Entwickler in Kontakt gekommen ist. Die Weboberflächen in dem Bereich orientieren sich dabei doch recht häufig an den Erfahrungen, die mit den klassischen Desktopanwendungen gemacht worden sind.

Minimalversion

Für unsere Minimalversion gehen wir davon aus, dass es ein Menü in der Kopfzeile der Anwendung geben wird. Die Anzahl der Einträge im Menü beschränkt sich auf vier bis fünf und ist demnach keine Herausforderung für einen Bildschirm. Natürlich gilt das alles nur solange, wie die Begriffe, die zum Einsatz kommen sollen, ein wenig kürzer sind als so manch anderer Begriff aus dem Deutschen, wie zum Beispiel „Gleisschotterbettungsreinigungsmaschine“. Ja das Ding gibt es wirklich und wer sich das einmal ansehen möchte, dem empfehle ich ein Fachmagazin für angehende Ingenieure.

W-JAX – Die Konferenz für Java, Architektur- und Software-Innovation

Workshop: Java Core Library Deep Dive

mit Arno Haase | Freiberufler

JUnit 5 Workshop: Mehr Spaß und weniger Bauchschmerzen beim Entwickeln durch clevere Tests

mit Michael Inden | ASMIQ AG

Die neuen Hybrid-Trainingevents mit mehr als 25 Trainer*innen und rund 30 intensiven Workshops

Progressive Web Apps mit Angular: Das Web wird nativ(er)

mit Christian Liebel | Thinktecture AG

Workshop: Angular-Apps mit der Ivy-Engine (Deep-dive)

mit Martina Kraus | Freiberufler

Das Layout

Die Anwendung soll in ein Layout (für den Rahmen der Anwendung) und fachliche Views aufgeteilt werden. Diese fachlichen Views werden in den im Layout definierten Arbeitsbereich eingegliedert, später in der Anwendung selbst können sie dann mittels der Menüpunkte angesteuert werden.

Hier haben wir nun das erste Mal die Herausforderung, dass die Navigation nicht einfach den gesamten Bereich ersetzen wird. Wir können uns das wie folgt vorstellen:

Innerhalb des hier gezeigten Bereiches Products unterhalb der Menüleiste setzen wir später die jeweiligen Views ein.

Das Grundgerüst

Das Grundgerüst, das hier zum Einsatz kommen wird, basiert auf der Komponente App Layout von Vaadin selbst. Das App Layout basiert auf dem Routing mittels RouterLayout. Darüber hatte ich im letzten Teil ein wenig ausführlicher berichtet. Was jetzt allerdings neu dazu kommen wird, ist das Layout selbst, sprich die Anordnung der Menüleiste und der Arbeitsbereiche. Um mit dem App Layout von Vaadin zu beginnen, erzeugen wir eine Klasse mit dem Namen MainLayout und erweitern damit die Klasse AbstractAppRouterLayout. Die dazugehörige Maven-Abhängigkeit sieht wie folgt aus:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-app-layout-flow</artifactId>
</dependency>

Die zu implementierende Methode hat den Namen configure und liefert zwei Parameter: Der erste ist die Instanz des erzeugten App Layouts selbst und die zweite ist das im App Layout verwendete Menü. Basierend auf diesen beiden Instanzen kann man mit der Gestaltung beginnen. Neben dem Logo, das in der linken oberen Ecke plaziert ist, kann man natürlich auch die Menüpunkte einrichten. Einen Menüpunkt erzeugt man übrigens mit einer Instanz der Klasse AppLayoutMenuItem. Es gibt dabei verschiedene Kombinationen, die gewählt werden können. Zum Beispiel ein Icon mit Beschreibung und ein Navigationsziel oder anstelle eines Navigationsziels auch eine direkte Aktion.

@Theme(Lumo.class)
public class MainLayout extends AbstractAppRouterLayout {

  private static final String LOGO_PNG = "logo.png";

  public static final String ITM_DASHBOARD = "mainview.menue.item.dashboard";
  public static final String ITM_PROFILE = "mainview.menue.item.profile";
  public static final String ITM_TRENDS = "mainview.menue.item.trends";
  public static final String ITM_LOGOUT = "mainview.menue.item.logout";

  @Override
  protected void configure(AppLayout appLayout ,
                           AppLayoutMenu appLayoutMenu) {

    StreamResource res = new StreamResource(LOGO_PNG ,
                                            () -> MainView.class.getResourceAsStream("/" + LOGO_PNG));
    Image img = new Image(res , "Vaadin Logo");

    img.setHeight("44px");
    appLayout.setBranding(img);

    appLayoutMenu
        .addMenuItems(
            new AppLayoutMenuItem(DASHBOARD.create() ,
                                  appLayout.getTranslation(ITM_DASHBOARD) ,
                                  DashboardView.NAV) ,
            new AppLayoutMenuItem(USER.create() ,
                                  appLayout.getTranslation(ITM_PROFILE) ,
                                  ProfileView.NAV) ,
            new AppLayoutMenuItem(TRENDING_UP.create() ,
                                  appLayout.getTranslation(ITM_TRENDS) ,
                                  TrendsView.NAV) ,
            new AppLayoutMenuItem(SIGN_OUT.create() ,
                                  appLayout.getTranslation(ITM_LOGOUT) ,
                                  e -> {
                                    UI ui = UI.getCurrent();
                                    VaadinSession session = ui.getSession();
                                    session.setAttribute(SecurityService.User.class , null);
                                    session.close();
                                    ui.navigate(MainView.class);
                                  }));
  }

}

Das Layout verwenden wir, indem wir an den beteiligten Views in der @Route-Annotation das Attribut layout mit der Klasse MainLayout belegen.

Fazit

Bislang haben wir nun ein sehr einfaches Grundgerüst einer Anwendung mit einem für die heutige Zeit typischen Aufbau. Die Funktionalitäten sind recht begrenzt, allerdings ist das manchmal sogar schon voll und ganz ausreichend. Wer allerdings ein wenig umfangreichere Möglichkeiten haben möchte, der kann sich ein wenig im VaadinDirectory umsehen. Dort gibt es noch weitere Lösungen. Mindestens eine schauen wir uns im nächsten Teil dieser Serie genauer an.

Das Beispiel zu diesem Teil ist wie immer auf GitHub zu finden.

Wer Fragen und Anmerkungen hat, meldet sich am besten per Twitter an @SvenRuppert oder direkt per Mail an sven.ruppert@gmail.com

Happy Coding!