Package com.vaadin.flow.component.applayout

Class AppLayout

java.lang.Object

com.vaadin.flow.component.Component

com.vaadin.flow.component.applayout.AppLayout

All Implemented Interfaces:

AttachNotifier, DetachNotifier, HasElement, HasStyle, RouterLayout, Serializable

@Tag("vaadin-app-layout")
@NpmPackage(value="@vaadin/polymer-legacy-adapter",version="23.3.30") @NpmPackage(value="@vaadin/app-layout",version="23.3.30") @NpmPackage(value="@vaadin/vaadin-app-layout",version="23.3.30")
@JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/app-layout/src/vaadin-app-layout.js")
public class AppLayout
extends Component
implements RouterLayout, HasStyle

App Layout is a component for building common application layouts.

The layout consists of three sections: a horizontal navigation bar (navbar), a collapsible navigation drawer (drawer) and a content area. An application’s main navigation blocks should be positioned in the navbar and/or drawer while views are rendered in the content area.

App Layout is responsive and adjusts automatically to fit desktop, tablet, and mobile screen sizes.

Author:

Vaadin Ltd

See Also:

Serialized Form

Nested Class Summary

Nested Classes

Modifier and Type	Class	Description
static class	AppLayout.AppLayoutI18n	The internationalization properties for AppLayout
static class	AppLayout.Section	Sections in the component that can be used as primary.

Constructor Summary

Constructors

Constructor	Description
AppLayout()

Method Summary

Modifier and Type	Method	Description
void	addToDrawer(Component... components)	Adds the components to the drawer slot of this AppLayout.
void	addToNavbar(boolean touchOptimized, Component... components)	Adds the components to the navbar slot of this AppLayout.
void	addToNavbar(Component... components)	Adds the components to the navbar slot of this AppLayout.
protected void	afterNavigation()	Called after a navigation event.
Component	getContent()
AppLayout.AppLayoutI18n	getI18n()	Gets the internationalization object previously set for this component.
AppLayout.Section	getPrimarySection()
boolean	isDrawerOpened()	Whether the drawer is opened (visible) or not.
boolean	isOverlay()	Note: This property is controlled via CSS and can not be changed directly.
protected void	onAttach(AttachEvent attachEvent)	Called when the component is attached to a UI.
void	remove(Component... components)	Removes the child components from the parent.
void	setContent(Component content)	Sets the displayed content.
void	setDrawerOpened(boolean drawerOpened)	Server-side API for showing and hiding the drawer.
void	setI18n(AppLayout.AppLayoutI18n i18n)	Sets the internationalization properties for this component.
void	setPrimarySection(AppLayout.Section primarySection)	Defines whether navbar or drawer will come first visually.
void	showRouterLayoutContent(HasElement content)	Shows the content of the layout which is the router target component annotated with a @Route.

Methods inherited from class com.vaadin.flow.component.Component

addListener, findAncestor, fireEvent, from, get, getChildren, getElement, getEventBus, getId, getListeners, getLocale, getParent, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getUI, hasListener, isAttached, isTemplateMapped, isVisible, onDetach, onEnabledStateChanged, scrollIntoView, set, setElement, setId, setVisible

Methods inherited from class java.lang.Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait

Methods inherited from interface com.vaadin.flow.component.AttachNotifier

addAttachListener

Methods inherited from interface com.vaadin.flow.component.DetachNotifier

addDetachListener

Methods inherited from interface com.vaadin.flow.component.HasElement

getElement

Methods inherited from interface com.vaadin.flow.component.HasStyle

addClassName, addClassNames, getClassName, getClassNames, getStyle, hasClassName, removeClassName, removeClassNames, setClassName, setClassName

Methods inherited from interface com.vaadin.flow.router.RouterLayout

removeRouterLayoutContent

Constructor Detail

AppLayout

public AppLayout()

Method Detail

getI18n

public AppLayout.AppLayoutI18n getI18n()

Gets the internationalization object previously set for this component.

Note: updating the i18n object that is returned from this method will not update the the component, unless it is set again using setI18n(AppLayoutI18n)

Returns:

the i18n object. It will be null, if the i18n properties are not set.

setI18n

public void setI18n(AppLayout.AppLayoutI18n i18n)

Sets the internationalization properties for this component.

Parameters:

i18n - the internationalized properties, not null

onAttach

protected void onAttach(AttachEvent attachEvent)

Description copied from class: Component

Called when the component is attached to a UI.

The default implementation does nothing.

This method is invoked before the AttachEvent is fired for the component.

Overrides:

onAttach in class Component

Parameters:

attachEvent - the attach event

getPrimarySection

@Synchronize("primary-section-changed")
public AppLayout.Section getPrimarySection()

Returns:

value for the primarySection property. Default is AppLayout.Section.NAVBAR.

See Also:

setPrimarySection(Section)

setPrimarySection

public void setPrimarySection(AppLayout.Section primarySection)

Defines whether navbar or drawer will come first visually.

• If AppLayout.Section.NAVBAR, the navbar takes the full available width and moves the drawer down. This is the default.
• If AppLayout.Section.DRAWER is set, then the drawer will move the navbar, taking the full available height.

Parameters:

primarySection - new value for the primarySection property. Not null.

Throws:

NullPointerException - if primarySection is null.

isDrawerOpened

@Synchronize("drawer-opened-changed")
public boolean isDrawerOpened()

Whether the drawer is opened (visible) or not. Its default value depends on the viewport:

• true for desktop size views
• false for mobile size views

Returns:

true if the drawer is opened (visible). false otherwise.

setDrawerOpened

public void setDrawerOpened(boolean drawerOpened)

Server-side API for showing and hiding the drawer.

Parameters:

drawerOpened - new value for the drawerOpened property.

See Also:

isDrawerOpened(), for a component that allows the user to open and close the drawer.

isOverlay

@Synchronize("overlay-changed")
public boolean isOverlay()

Note: This property is controlled via CSS and can not be changed directly.

Returns:

true if drawer is an overlay on top of the content. false otherwise.

getContent

public Component getContent()

Returns:

the displayed content

setContent

public void setContent(Component content)

Sets the displayed content.

Parameters:

content - Component to display in the content area

addToDrawer

public void addToDrawer(Component... components)

Adds the components to the drawer slot of this AppLayout.

Parameters:

components - Components to add to the drawer slot.

Throws:

NullPointerException - if any of the components is null or if the components array is null.

addToNavbar

public void addToNavbar(Component... components)

Adds the components to the navbar slot of this AppLayout.

Parameters:

components - Components to add to the navbar slot.

Throws:

NullPointerException - if any of the components is null or if the components array is null.

addToNavbar

public void addToNavbar(boolean touchOptimized,
                        Component... components)

Adds the components to the navbar slot of this AppLayout.

Parameters:

touchOptimized - if true, the components will be moved to the bottom navbar area on mobile devices.

components - Components to add to the navbar slot.

Throws:

NullPointerException - if any of the components is null or if the components array is null.

remove

public void remove(Component... components)

Removes the child components from the parent. Components can be in any slot or be the main content.

Parameters:

components - Components to remove.

showRouterLayoutContent

public void showRouterLayoutContent(HasElement content)

Shows the content of the layout which is the router target component annotated with a @Route.

Note implementors should not care about old @Route content, since it's handled separately by RouterLayout.removeRouterLayoutContent(HasElement) which by default simply removes the old content.

Specified by:

showRouterLayoutContent in interface RouterLayout

Parameters:

content - the content component or null if the layout content is to be cleared.

Throws:

IllegalArgumentException - if content is not a Component

afterNavigation

protected void afterNavigation()

Called after a navigation event. The default behaviour is to close the drawer on mobile devices after a navigation event.