Layout

Question 1

App Layout . Navigation Bar

Answer 1

The navigation bar of AppLayout is a horizontal element that can contain any component, such as a header or a horizontal menu.
Setting content within header
private Component createHeaderContent() {
HorizontalLayout layout = new HorizontalLayout();

// Configure styling for the header
layout.setId("header");
layout.getThemeList().set("dark", true);
layout.setWidthFull();
layout.setSpacing(false);
layout.setAlignItems(FlexComponent.Alignment.CENTER);

// Have the drawer toggle button on the left
layout.add(new DrawerToggle());

// Placeholder for the title of the current view.
// The title will be set after navigation.
viewTitle = new H1();
layout.add(viewTitle);

// A user icon
layout.add(new Image("images/user.svg", "Avatar"));

return layout; }

Question 2

App Layout. Drawer

Answer 2

private Component createDrawerContent(Tabs menu) {
VerticalLayout layout = new VerticalLayout();

// Configure styling for the drawer
layout.setSizeFull();
layout.setPadding(false);
layout.setSpacing(false);
layout.getThemeList().set("spacing-s", true);
layout.setAlignItems(FlexComponent.Alignment.STRETCH);

// Have a drawer header with an application logo
HorizontalLayout logoLayout = new HorizontalLayout();
logoLayout.setId("logo");
logoLayout.setAlignItems(FlexComponent.Alignment.CENTER);
logoLayout.add(new Image("images/logo.png", "My Project logo"));
logoLayout.add(new H1("My Project"));

// Display the logo and the menu in the drawer
layout.add(logoLayout, menu);
return layout; }

Question 3

AppLayout.Drawer.VerticalMenu

Answer 3

The actual menu is a vertical Tabs component. It’s filled from a list of Tab components. Each tab contains a RouterLink to the corresponding view

private Tabs createMenu() {
final Tabs tabs = new Tabs();
tabs.setOrientation(Tabs.Orientation.VERTICAL);
tabs.addThemeVariants(TabsVariant.LUMO_MINIMAL);
tabs.setId(“tabs”);
tabs.add(createMenuItems());
return tabs;
}

private Component[] createMenuItems() {
return new Tab[] { createTab(“Hello World”, HelloWorldView.class),
createTab(“Card List”, CardListView.class),
createTab(“About”, AboutView.class) };
}

private static Tab createTab(String text,
Class<? extends Component> navigationTarget) {
final Tab tab = new Tab();
tab.add(new RouterLink(text, navigationTarget));
ComponentUtil.setData(tab, Class.class, navigationTarget);
return tab;
}

Question 4

Handling Navigation

Answer 4

When the user navigates to a view, the tab for the view should be highlighted by setting it as selected. You can also set the view title in header.

You can do both these things by overriding afterNavigation() in AppLayout, as follows:

@Override
protected void afterNavigation() {
super.afterNavigation();

// Select the tab corresponding to currently shown view
getTabForComponent(getContent()).ifPresent(menu::setSelectedTab);

// Set the view title in the header
viewTitle.setText(getCurrentPageTitle()); }

Getting selected tab
private Optional<Tab> getTabForComponent(Component component) {
return menu.getChildren()
.filter(tab -> ComponentUtil.getData(tab, Class.class)
.equals(component.getClass()))
.findFirst().map(Tab.class::cast);
}</Tab>

Question 5

Getting current page title

Answer 5

private String getCurrentPageTitle() {
return getContent().getClass().getAnnotation(PageTitle.class).value();
}

Question 6

Creating a view

Answer 6

Like any view, a view displayed in an AppLayout needs a route defined with the @Route annotation. The route needs to be linked to the main view by using the layout parameter to pass the class object of the main view.

@Route(value = “hello”, layout = MainView.class)

Question 7

Page Title

Answer 7

@PageTitle(“Hello World”)

Question 8

Styling a View

Answer 8

You can define custom styling for the view with the @CssImport annotation.
@CssImport(“./styles/views/helloworld/hello-world-view.css”)

Question 9

Default View

Answer 9

Most applications need an entry point. You can define a view as the default view by defining the route of the main view with @RouteAlias. The value defining the route needs to be empty for the root route.
@RouteAlias(value = “”, layout = MainView.class)

Question 10

Route and Views

Answer 10

Routing maps URLs to views or resources to navigate directly to the desired content or functionality. Typically, the root route / shows a main view, a route such as /users could show a sub-view that displays a list of users, and a route with the user ID as a parameter, such as /users/dadams, would show a specific user.