Sämtliche Views einer Anwendung müssen beim Navigator registriert werden. Der Navigator ist eine virtuelle UI-Komponente (Virtual Component), die bereits standardmäßig in der MainUI vorhanden ist und 

• verwaltet die registrierten Views in einer Liste
• weist jeder registrierten View eine eindeutige URI (Uniform Resource Identifier) zu, mit der zur Laufzeit der direkte Aufruf der View über die Suchleiste des Browsers möglich ist, sofern der Anwender die entsprechende Berechtigung dazu besitzt
• ermöglicht den Aufruf der View mit der einfachen Methode Navigation.to()
• nimmt aufgerufene Views zur Laufzeit in die Browser-History auf, und ruft diese bei Browser Vor- und Zurück-Aktionen automatisch auf
• legt fest, wo die View auf der Oberfläche angezeigt werden soll, direkt auf der MainUI, in einem Layout oder in einer UI-Komponente.

Für Authentifizierung und Autorisierung gibt es mit dem XdevAuthenticationNavigator  bzw. XdevAuthorizationNavigator Navigatoren mit erweiterten Funktionen.

Image Removed

Properties:

Der Navigator lässt sich wie eine UI-Komponente in den Properties konfigurieren.

Image Removed

• Target - Hier kann die UI-Komponente gewählt werden, in der die Views angezeigt werden. Standardmäßig ist die MainUI eingestellt, es kann aber auch eine andere UI-Komponente wie z.B. ein Layout, ein Panel oder ein SplitPanel ausgewählt werden.
• Views - Liste der registrierten Views.
• LoginViewName - Hier kann die Loginview angegeben werden. Es stehen nur Views zur Auswahl, die unter Views registriert sind. Dieser Wert kann nur bei XdevAuthenticationNavigator  und XdevAuthorizationNavigator gesetzt werden. 
• RedirectViewName - Hier kann eine View angegeben werden, die bei erfolgreichem Login aufgerufen wird. Auch dieser Wert kann nur bei XdevAuthenticationNavigator  und XdevAuthorizationNavigator gesetzt werden. 
• PermissionDeniedViewName - Hier kann eine View angegeben werden, zu der navigiert wird, wenn die Rechte des aktuellen Benutzers die Navigation zu einer View nicht erlauben. Dieser Wert kann nur bei XdevAuthorizationNavigator gesetzt werden. 

Hinweis:

• Standardmäßig wird die MainView als erste View in den Navigator eingetragen. 
• Beim Aufruf einer View mit Navigation.to() wird die View automatisch beim Navigator registriert.
• Views, die nicht via URI aufrufbar sein sollen, dürfen nicht im Navigator registriert werden.
• In der Preview ist die Browser-Zurück Funktion nicht möglich.

Views manuell registrieren

1. Selektieren Sie den Navigator.
2. Klicken Sie bei Properties > Views auf [Entries].
3. Klicken Sie im folgenden Assistenten auf New. 
4. Klicken Sie in der neuen Zeile in die Spalte View Type.
5. Geben Sie im folgenden Assistenten die View an, die Sie registrieren möchten, z.B. CustomerView.
6. Klicken Sie auf OK.
   Image Removed
7. Geben Sie bei Path ein eindeutiges Pfad-Fragment an, über das die View im Browser aufgerufen werden kann, z.B. customer, und bestätigen Sie die Eingabe mit Enter.
8. Klicken Sie auf OK.
   Image Removed

Hinweis: 

...

Um eine View aufrufen zu können, braucht diese einen Pfad, welcher auch als Route bezeichnet wird.

1. Zuerst müssen Sie das Root-Element der View auswählen
2. Danach unter Routing > Route einen beliebigen Pfad angeben. (Kann auch ein leerer String sein)

Image Added

Hinweis:

• Jede Route muss unique sein. Es können nie gleichzeitig mehrere Views mit der gleichen Route existieren

Navigieren zu einer anderen View

Um zu einer anderen View zu navigieren, gibt es mehrere Möglichkeiten.

Navigation mit RouterLinks

1. Ziehen Sie einen RouterLink auf die View
2. Klicken Sie in den Properties auf NavigationTarget
   Image Added
3. Im folgenden Dialog können Sie nach Ihrer View suchen, zu der dieser Link navigieren soll

Serverseitige Navigation

Der Server kann auch eine Navigation auslösen. Um das zu erreichen können Sie folgendes machen:

1. Ziehen Sie einen Button auf die View
2. Doppelklicken Sie den Button

3. Geben Sie danach folgenden Code ein:

   Code Block
   language java theme Confluence
   UI.getCurrent().navigate(OtherView.class)

   
   

Complexe Navigation

Manchmal müssen auch verschiedene Information an die aufzurufende View weitergegeben werden. Dazu können die folgenden Code-Snippets benutzt werden:

// Es können Datentypen wie z.B. String übergeben werden
UI.getCurrent().navigate(OtherView.class, "Hallo Welt");

In OtherView.class muss das HasUrlParameter<String> Interface implementiert werden
Um dort jetzt den Parameter zu bekommen, muss folgende Methode implementiert werden:

@Override
public void setParameter(final BeforeEvent event, final String parameter)
{
	System.out.println("Parameter was " + parameter);
}

Es können unter anderen auch Query Parameter übergeben werden. Mehr dazu kann hier nachgelesen werden: https://vaadin.com/docs/v14/flow/routing/tutorial-router-url-parameters

Es können aber auch mit Hilfe des RapidClipse Frameworks ganze Objekte übergeben werden.

Navigation.To(OtherView.class)
			.withParameter("myData", myData)
			.navigate();

Dazu muss in OtherView.java folgendes implementiert werden:

@NavigationParameter
private MyDataType myData;

@Override
public void navigationParametersUpdated()
{
	System.out.println("myData is now available!");
}

Hinweis:

• navigationParametersUpdated() muss nicht implementiert werden.
• Mit .withParameter() kann ein beliebiger Datentyp übergeben werden.