Class MobileMainLayout

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.applayout.AppLayout
org.vaadin.firitin.appframework.VAppLayout
org.vaadin.firitin.appframework.MainLayout
org.vaadin.firitin.appframework.MobileMainLayout
All Implemented Interfaces:
com.vaadin.flow.component.AttachNotifier, com.vaadin.flow.component.DetachNotifier, com.vaadin.flow.component.HasElement, com.vaadin.flow.component.HasStyle, com.vaadin.flow.router.AfterNavigationObserver, com.vaadin.flow.router.internal.AfterNavigationHandler, com.vaadin.flow.router.RouterLayout, Serializable
@Deprecated @StyleSheet("context://assets/org/vaadin/firitin/components/mobile-main-layout.css") public abstract class MobileMainLayout extends MainLayout
Deprecated.
New experimental component; its API is likely to evolve even in patch releases.
A MainLayout tuned for phones, in the spirit of native iOS/Android apps: the primary navigation is an icon-only bottom bar (tabs at the bottom of the screen) instead of a side drawer, and the view title is a large heading at the top of the content that scrolls away as the user scrolls down.

It is adaptive, not phone-only. The same instance keeps the familiar side drawer on wide (desktop) viewports — Vaadin's AppLayout renders the bottom bar (a "touch-optimized" navbar) only on small/touch screens (≈max-width: 800px) and the persistent drawer on wider ones. So an application whose primary device is an iPhone still looks right on a laptop.

The bottom bar is built from the very same navigation model as the drawer (see onMenuBuilt(List)), so MenuItem/Menu icons, ordering, access control and i18n all apply unchanged. Each entry is a RouterLink that highlights itself when its route is active. Because a bottom bar fits only a handful of icons, at most five entries are shown; if there are more top-level views (or any grouped SubMenu items, which a flat bar cannot show), the last slot becomes a "More" action that opens the full drawer — overridable via openOverflow().

Subclasses only need to implement VAppLayout.getDrawerHeader() like with MainLayout.

See Also:

  • Nested Class Summary

    Nested classes/interfaces inherited from class com.vaadin.flow.component.applayout.AppLayout

    com.vaadin.flow.component.applayout.AppLayout.AppLayoutI18n, com.vaadin.flow.component.applayout.AppLayout.Section

  • Field Summary

    Fields
    Modifier and Type
    Field
    Description
    static final int
    DEFAULT_MAX_BOTTOM_NAV_ITEMS
    Deprecated.
    Maximum number of icons in the bottom bar before a "More" item is used.
    static final String
    EDGE_TO_EDGE
    Deprecated.
    Style class name to add to a view to make it run edge to edge: its content fills under the floating bottom bar, with no reserved clearance (the bar just floats on top).

    Fields inherited from class VAppLayout

    navbarHelpers

  • Constructor Summary

    Constructors
    Constructor
    Description
    MobileMainLayout()
    Deprecated.
     

  • Method Summary

    Modifier and Type
    Method
    Description
    protected void
    addHeaderContent()
    Deprecated.
    Leaves the top navbar empty on purpose: the drawer toggle and view title are rendered into the content header row instead (see showContent(Component)), so no full-width bar is reserved just for them.
    void
    addNavbarHelper(com.vaadin.flow.component.Component component)
    Deprecated.
    Places per-view helper components into the content header row (right side) rather than the navbar.
    void
    afterNavigation(com.vaadin.flow.router.AfterNavigationEvent event)
    Deprecated.
     
    int
    getMaxBottomNavItems()
    Deprecated.
    The maximum number of icons shown in the bottom bar.
    protected String
    getOverflowText()
    Deprecated.
    The label/tooltip of the "More" action.
    boolean
    isBodyScrolling()
    Deprecated.
    Whether the whole page scrolls (instead of just the content area).
    boolean
    isBottomNavHideOnScroll()
    Deprecated.
    Whether the bottom bar hides itself when the content is scrolled down and reappears on scroll up (iOS-style).
    boolean
    isBottomNavLabelsVisible()
    Deprecated.
    Whether the bottom bar shows a small text caption under each icon.
    boolean
    isViewTitleVisible()
    Deprecated.
    Whether the large in-content view title is shown.
    protected void
    onAttach(com.vaadin.flow.component.AttachEvent attachEvent)
    Deprecated.
     
    protected void
    onDetach(com.vaadin.flow.component.DetachEvent detachEvent)
    Deprecated.
     
    protected void
    onMenuBuilt(List<NavigationItem> topLevelItems)
    Deprecated.
    (Re)builds the bottom navigation bar from the visible top-level items whenever the menu changes, mirroring the drawer the base class just built.
    protected void
    openOverflow()
    Deprecated.
    Opens the navigation that does not fit in the bottom bar.
    void
    setBodyScrolling(boolean bodyScrolling)
    Deprecated.
    Switches to body/page scrolling: the entire page scrolls rather than the content area alone.
    void
    setBottomNavHideOnScroll(boolean bottomNavHideOnScroll)
    Deprecated.
     
    void
    setBottomNavLabelsVisible(boolean bottomNavLabelsVisible)
    Deprecated.
    Sets whether a small text caption is shown under each bottom-bar icon (as in many native mobile tab bars) and rebuilds the bar.
    void
    setMaxBottomNavItems(int maxBottomNavItems)
    Deprecated.
     
    void
    setViewTitle(String title)
    Deprecated.
    Manually override the current view title.
    void
    setViewTitleVisible(boolean viewTitleVisible)
    Deprecated.
    Sets whether the large, scroll-away view title is rendered into the content area in phone-like mode (when the bottom bar is shown).
    protected void
    showContent(com.vaadin.flow.component.Component content)
    Deprecated.
    Wraps the view with the large, scroll-away page title above it.

    Methods inherited from class MainLayout

    buildMenu, checkAccess, getChildItems, getCurrent, getNavigationItems, init, sortMenuItems

    Methods inherited from class VAppLayout

    addDrawerContent, closeSubView, closeSubView, getDrawerFooter, getDrawerHeader, getMenu, getMenuScroller, getMenuText, getNavbarHelpers, getViewTitle, openSubView, openSubView, prepareDrawerFooter, prepareNav, setContent, updateViewTitle

    Methods inherited from class com.vaadin.flow.component.applayout.AppLayout

    addToDrawer, addToNavbar, addToNavbar, bindDrawerOpened, getContent, getI18n, getPrimarySection, isDrawerOpened, isOverlay, remove, setDrawerOpened, setI18n, setPrimarySection, showRouterLayoutContent

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

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

    Methods inherited from class 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, bindClassName, bindClassNames, getClassName, getClassNames, getStyle, hasClassName, removeClassName, removeClassNames, setClassName, setClassName

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

    removeRouterLayoutContent

  • Field Details

    • DEFAULT_MAX_BOTTOM_NAV_ITEMS

      public static final int DEFAULT_MAX_BOTTOM_NAV_ITEMS
      Deprecated.
      Maximum number of icons in the bottom bar before a "More" item is used.
      See Also:

    • EDGE_TO_EDGE

      public static final String EDGE_TO_EDGE
      Deprecated.
      Style class name to add to a view to make it run edge to edge: its content fills under the floating bottom bar, with no reserved clearance (the bar just floats on top). Use it for full-bleed, size-full views such as a map; ordinary views keep the clearance so bottom content stays visible. 
      mapView.addClassName(MobileMainLayout.EDGE_TO_EDGE);
      See Also:

  • Constructor Details

    • MobileMainLayout

      public MobileMainLayout()
      Deprecated.

  • Method Details

    • onAttach

      protected void onAttach(com.vaadin.flow.component.AttachEvent attachEvent)
      Deprecated.
      Overrides:
      onAttach in class MainLayout

    • onDetach

      protected void onDetach(com.vaadin.flow.component.DetachEvent detachEvent)
      Deprecated.
      Overrides:
      onDetach in class com.vaadin.flow.component.Component

    • addHeaderContent

      protected void addHeaderContent()
      Deprecated.
      Leaves the top navbar empty on purpose: the drawer toggle and view title are rendered into the content header row instead (see showContent(Component)), so no full-width bar is reserved just for them. The toggle is the universal way to open the drawer on wide and on narrow non-touch screens; on a touch phone, where the bottom bar's "More" already reaches the drawer, it is hidden by CSS.
      Overrides:
      addHeaderContent in class VAppLayout

    • addNavbarHelper

      public void addNavbarHelper(com.vaadin.flow.component.Component component)
      Deprecated.
      Places per-view helper components into the content header row (right side) rather than the navbar. They are cleared automatically on navigation.
      Overrides:
      addNavbarHelper in class VAppLayout
      Parameters:
      component - the helper component.

    • onMenuBuilt

      protected void onMenuBuilt(List<NavigationItem> topLevelItems)
      Deprecated.
      (Re)builds the bottom navigation bar from the visible top-level items whenever the menu changes, mirroring the drawer the base class just built.
      Overrides:
      onMenuBuilt in class MainLayout
      Parameters:
      topLevelItems - the visible top-level items, in menu order

    • showContent

      protected void showContent(com.vaadin.flow.component.Component content)
      Deprecated.
      Wraps the view with the large, scroll-away page title above it. The title lives inside the scrollable content area, so it slides out of view as the user scrolls — the way native mobile apps show a screen title.
      Overrides:
      showContent in class VAppLayout
      Parameters:
      content - the view to show, never the wrapper

    • afterNavigation

      public void afterNavigation(com.vaadin.flow.router.AfterNavigationEvent event)
      Deprecated.
      Specified by:
      afterNavigation in interface com.vaadin.flow.router.internal.AfterNavigationHandler
      Overrides:
      afterNavigation in class MainLayout

    • setViewTitle

      public void setViewTitle(String title)
      Deprecated.
      Description copied from class: VAppLayout
      Manually override the current view title.
      Overrides:
      setViewTitle in class VAppLayout
      Parameters:
      title - the title to set

    • openOverflow

      protected void openOverflow()
      Deprecated.
      Opens the navigation that does not fit in the bottom bar. The default opens the full drawer (shown as an overlay on a phone). Override to use a different presentation, e.g. a popover.

    • getOverflowText

      protected String getOverflowText()
      Deprecated.
      The label/tooltip of the "More" action. Override to localize.

    • getMaxBottomNavItems

      public int getMaxBottomNavItems()
      Deprecated.
      The maximum number of icons shown in the bottom bar. When more top-level views exist, the last slot is used for the "More" action. Defaults to DEFAULT_MAX_BOTTOM_NAV_ITEMS.

    • setMaxBottomNavItems

      public void setMaxBottomNavItems(int maxBottomNavItems)
      Deprecated.

    • isBottomNavLabelsVisible

      public boolean isBottomNavLabelsVisible()
      Deprecated.
      Whether the bottom bar shows a small text caption under each icon. Defaults to false (icon-only; the label is still available as a tooltip and accessible name).

    • setBottomNavLabelsVisible

      public void setBottomNavLabelsVisible(boolean bottomNavLabelsVisible)
      Deprecated.
      Sets whether a small text caption is shown under each bottom-bar icon (as in many native mobile tab bars) and rebuilds the bar.

    • isBottomNavHideOnScroll

      public boolean isBottomNavHideOnScroll()
      Deprecated.
      Whether the bottom bar hides itself when the content is scrolled down and reappears on scroll up (iOS-style). Defaults to true.

    • setBottomNavHideOnScroll

      public void setBottomNavHideOnScroll(boolean bottomNavHideOnScroll)
      Deprecated.

    • isViewTitleVisible

      public boolean isViewTitleVisible()
      Deprecated.
      Whether the large in-content view title is shown. Defaults to false.

    • setViewTitleVisible

      public void setViewTitleVisible(boolean viewTitleVisible)
      Deprecated.
      Sets whether the large, scroll-away view title is rendered into the content area in phone-like mode (when the bottom bar is shown). Turn it off for applications whose views already render their own heading, so the title is not duplicated: the whole content header then collapses, leaving no extra band. A wide desktop window always shows the title (next to the drawer toggle) regardless of this setting — there the header is the only place a view title appears, so hiding it would leave a bare, lonely toggle.

    • isBodyScrolling

      public boolean isBodyScrolling()
      Deprecated.
      Whether the whole page scrolls (instead of just the content area). Defaults to true.

    • setBodyScrolling

      public void setBodyScrolling(boolean bodyScrolling)
      Deprecated.
      Switches to body/page scrolling: the entire page scrolls rather than the content area alone. This lets the mobile browser's address bar collapse on scroll and, when the application's viewport uses viewport-fit=cover, lets the content scroll edge-to-edge under the status bar / dynamic island (the layout already insets its header and bottom bar by the safe areas). The viewport itself is left to the application's configuration.

      It works by undoing Flow's default height: 100% on html, body, #outlet (Flow's index.html sets it, which forces content-area scrolling). This is an app-wide change, so it is opt-in: notably, components that rely on height: 100% (e.g. a full-height Grid) then need an explicit height of their own. Best set once, before the layout is attached.