Views & Navigation
A view is the part of the user interface that changes when the user navigates in the application. Typically, it takes up most of the page. These guides show how to add views to your application, navigate between them, and pass data from one view to another.
Start with Add a View and Navigate to a View. Most applications also need a router layout that all views share, with a navigation menu. Pass Data to a View covers route parameters, query parameters, and other ways of passing data. Add a Master-Detail View shows a common pattern for views that list items and show the details of the selected one. When a view’s state and rules grow too complex for its listeners, Structure Views with MVVM shows how to move them into a ViewModel that you can test on its own. MVP and MVVM Compared weighs MVVM against the older Model-View-Presenter pattern.
To control which users can open which views, see Protect Views. To ask users before they leave a form with unsaved changes, see Protect Unsaved Changes. To add client-side views written in React, see React Views.
Topics
- Add a View
- Learn how to add a view to your application.
- Navigate to a View
- Learn how to navigate between the views of your application.
- Pass Data to a View
- Learn how to pass data between the views of your application.
- Add a Router Layout
- Learn how to add a router layout to your application.
- Add a Navigation Menu
- Learn how to add a navigation menu to a router layout.
- Add a Master-Detail View
- Learn how to build a master-detail view.
- Structure Views with MVVM
- Learn how to separate the state and behavior of a complex view from its UI components with the Model-View-ViewModel pattern.
- MVP and MVVM Compared
- How the Model-View-Presenter pattern works in a Vaadin view, how it compares to MVVM, and when to use which.