vaadin/vaadin-app-layout-flow

App Layout Component for Vaadin Flow

Overview

Vaadin App Layout is a component providing a quick and easy way to get a common application layout structure done.

⚠️ This repository is deprecated

• Sources for this flow component can be found at https://github.com/vaadin/vaadin-flow-components
• Tickets has been moved to the web component repository https://github.com/vaadin/vaadin-app-layout/issues

License & Author

Apache License 2.0

Installing

Add App Layout to your project:

<dependencies>
  <dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-app-layout-flow</artifactId>
    <version>${component.version}</version>
  </dependency>
</dependencies>

Basic Use

@Viewport("width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes, viewport-fit=cover")
@BodySize
@Theme(Lumo.class)
public class AppRouterLayout extends AppLayout {

     {
         final DrawerToggle drawerToggle = new DrawerToggle();
         final RouterLink home = new RouterLink("Home", HomeView.class);
         final RouterLink about = new RouterLink("About Company", AboutView.class);
         final VerticalLayout layout = new VerticalLayout(home, about);
         addToDrawer(layout);
         addToNavbar(drawerToggle);
     }

}

@Route(value = "", layout = AppRouterLayout.class)
public class HomeView extends Div {
}

@Route(value = "about", layout = AppRouterLayout.class)
public class AboutView extends Div {
}

vaadin-app-layout-flow's Issues

publish doc for breaking changes and migration

Updating an empty AppLayout, after its initialization doesn't work

Version : 14.1.3
Scenario: Based on the screen size, either use Navbar or Drawer
Expected: Layout is rendered correctly
Actual: elements are in the DOM, but not visible to the end user
Code to reproduce:

import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.theme.Theme;
import com.vaadin.flow.theme.lumo.Lumo;


@Theme(value = Lumo.class,variant=Lumo.LIGHT)
@Route("app-layout")
public class AppLayoutView extends AppLayout  {

    Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
    Tabs tabs = new Tabs(new Tab("Home"), new Tab("About"));

    public AppLayoutView(){
        img.setHeight("44px");
        //Workaroung; adding an empty element
        addToNavbar(new Div());

        UI.getCurrent().getPage().retrieveExtendedClientDetails(event->{
            int width=event.getWindowInnerWidth();
            System.out.println("Details: screen width" + event.getWindowInnerWidth());
            if(width <1000) {
                //This is rendered empty
                System.out.println("Width less than 1000");
                setPrimarySection(AppLayout.Section.DRAWER);
                addToNavbar(new DrawerToggle(), img);
                addToDrawer(tabs);
            }
            else{
                //This is unresponsive
                addToNavbar(img, tabs);
            }
        });
    }
}

Workaround: add an empty element to the layout (Div in this case worked )

Create Java API for vaadin-app-layout

Create modules for:

• flow integration
• TB api
• vaadin.com demos
• IT

Should have travis config for running IT in PRs

use one class for menu item

AppLayoutMenuItem can have route or listeners (for actions)

Mention DrawerToggle on setDrawerOpened javadoc

That may help users discover about the component helper and its usage.

I expect AppLayout to be simpler to use as my main layout

I downloaded a project base and the first thing I did to the MainView class was I added ´extends AppLayout´ I expected to start working there and add menu items. Instead, I needed to call createMenu() and work with the return value of it. Later I noticed there is an abstract base class I was supposed to use for my router layout. I think AppLayout should be already implementing RouterLayout, right?

First item should not be selected

Menu not scrollable on mobile or desktop

If there are more menu items as space in the navbar. The navbar is not scrollable with the Material Theme.

If we add these css settings, it is scrollable, but doesn't show the arrows for scroll left / right.

To reproduce you can check out these small example:
https://github.com/berndklb/vaadin-bugs.git

It should be possible to provide a custom AppLayoutMenu to a AbstractAppRouterLayout subclass

It would be easy to hide away the implementation for #55 in a custom AppLayoutMenu class but it does not seem possible to get AbstractAppRouterLayout to use one. If there was an optional protected constructor accepting AppLayout and/or AppLayoutMenu, this would be possible

Generate OSGI metadata

New method for clearMenuItems

null pointer exception when calling setMenuItems after calling addMenuItem

AbstractAppRouterLayout and @HtmlImport

@stefanuebe commented on Mon Dec 10 2018

Description

It seems like the @HtmlImport annotation is ignored for AbstractAppRouterLayout subclasses. I tried to load custom styles as usual by adding the annotation, but the import is not added to the dom. When using a plain router layout, everything works as expected.

Sources

@HtmlImport("frontend://styles/styles.html")
public class ApplicationRouterLayout extends AbstractAppRouterLayout {
   ...
}

@HtmlImport("frontend://styles/styles.html")
public class PlainRouterLayout extends VerticalLayout implements RouterLayout {
   ...
}

<link rel="import" href="../bower_components/polymer/lib/elements/custom-style.html">

<custom-style>
    <style>
        html {
            --lumo-primary-color: red !important;
        }
    </style>
</custom-style>

Workaround

The html import can be set by using an attachListener for the appLayout instance in the configuration methd.

public class MainLayout extends AbstractAppRouterLayout {
    @Override
    protected void configure(AppLayout appLayout, AppLayoutMenu menu) {
        appLayout.addAttachListener(event -> {
            event.getUI().getPage().addHtmlImport("frontend://styles/styles.html");
        });
        ...
    }
    ...
}

---

@denis-anisimov commented on Thu Dec 13 2018

What is AbstractAppRouterLayout ?
Flow doesn't have such class.
Do you use a wrong project for the issue ?

---

@stefanuebe commented on Thu Dec 13 2018

Full class name is com.vaadin.flow.component.applayout.AbstractAppRouterLayout (implements RouterLayout). It is used in the Bakery Starter.

---

@denis-anisimov commented on Thu Dec 13 2018

It is used in the Bakery Starter.

Very good.
Then this should go to the bakery stater.

Integrate into Bakery for Flow

This requires some release of the component and its flow integration

calling setIcon on DrawerToggle doesn't update its icon

It should be possible to change the icon of the DrawerToggle by calling drawerToggle.setIcon(some icon).

Applayout Scroll Feature Does Not Work In Mobile Landscape Mode

Vaadin Version: 14.0.3
Device: Samsung S9 Plus
Browser: Chrome with the latest version
PWA: Active
Code: Same with the demo code for Applayout with the latest version. I used Tabs with RouterLink. There is not any other unnecessary code.

Portre mode => OK 👍
Landscape mode => NOT OK 👎

Here are the screenshots below:

Usage of deprecated method

The showRouterLayoutContent method inside AbstractAppRouterLayout uses Router.getUrl (line 85), but should use RouteConfiguration.getUrl instead. This isn't critical at the moment, but could create problems later.

H1 looks different in flow vs component only

Change Element in public API for Component

For instance in public void setBranding(Element branding) {

OnNavigate lifecycle callback is confusing

The onNavigate lifecycle callback for app router layout seems to be called before the target content has been set. It is not clear if this should be the case judging by the name of the callback. It might be great to have a beforeNavigate and afterNavigate.

Demos are not showing the recommended way of using AppLayout

In the demos, the AppLayout is instantiated manually

        AppLayout appLayout = new AppLayout();

This is not the recommend way to use AppLayout. Instead we should show a MainView extending AppLayout

        public class MainView extends AppLayout {
               ...
       }

New method for addMenuItems

open drawer programmaticaly

Hi,

My root view is :

class MainView extends AppLayout implements BeforeEnterObserver

in beforeEnter I add and remove some components to drawer depending on the route. Some routes do not have sub-components which lead to an empty drawer. In such cases, I hide drawer setDrawerOpened(false). It works.
But when I switch from such empty route to route with some components in drawer setDrawerOpened(true) does not work. I must explicitly click drawerToggle button to open
drawer. 'setDrawerOpened( !isDrawerOpened() )' does not work either. I have tried to run last code from different places (button, menu) but it does not work. Drawer gets closed properly but does not opens.

Using Vaadin 14.1.21
tested on latest Firefox and Chrome

setup TC builds

Release 1.0.0.beta1 and create a checklist

Allow Component in api for slots

Show demos for menu on top and menu on drawer

Show real use case with RouterLink

NPE when navigate to non existing route

If navigate to the non existing route there is an NPE in:

vaadin-app-layout-flow/vaadin-app-layout-flow/src/main/java/com/vaadin/flow/component/applayout/AbstractAppRouterLayout.java

Line 65 in 8e95dda

.getUrl(content.getElement().getComponent().get().getClass());

Happens only in case when there is a Custom RouteNotFound implementation with parent layout which extends AbstractAppRouterLayout.

The menu selection is not updated according to navigation

The selected menu item is not updated when navigating either programmatically or via url.

I would expect the right menu item be highlighted, i.e. same menu item whose content is shown.

You can workaround this issue by having AfterNavigationObserver in the layout where you have the app layout, something like:

public class MainLayout extends AppLayout implements RouterLayout, AfterNavigationObserver {

        private AppLayoutMenu menu = createMenu();

	public MainLayout() {
           ...
        }

	@Override
	public void afterNavigation(AfterNavigationEvent event) {
		menu.getMenuItemTargetingRoute(event.getLocation().getPath()).ifPresent(
                          menuItem -> menu.selectMenuItem(menuItem));		
	}
}

Simple spring-boot App using AppLayout hangs up server connection

Please see attached mini project and read its README.md file.

If I use my own simple RouterLayout things are working, but I am losing the server connection between the client and the server using AppLayout instead.

foo-dashboard.tar.gz

User / Password is 'user'/'user' by the way, see Application.yml

Add Readme

Check if javadoc should be improved

No API to replace the menu slot content

The component makes a hard assumption about the use cases of itself and limits how to use it.

For example, a common use case is to place a global search field in the center area of the navbar, like in many Google apps (Drive, Inbox).

This is probably possible using the lower-level Element API like this (not sure if this works for real):

appLayout.getElement().removeChild(appLayout.getMenu().getElement());
TextField search = new TextField();
search.getElement().setAttribute("slot", "menu");
appLayout.getElement().appendChild(search.getElement());

I’m not sure if this an acceptable solution, or does it have some drawbacks compared to a properly supported API?

No check for routes with parameters

While using AbstractAppRouterLayout, when you call any route via a routerlink with parameters the Router.getUrl methods throws an error because it doesn't support parameters.

The navigation should be checked for parameters first. And if they exist, the corresponding getUrl method supporting parameters should be called.

Usage with RouterLink

It's not clear how this component deals with RouterLink. It has a new RoutingMenuItem which takes a string as a route, but in Flow there is a RouterLink component which already takes care of that.

As a user approaching to use AppLayout, this causes me confusion.

Java examples to vaadin.com

Use flow-component-base and pin versions for transitive dependencies

Like it was done in vaadin/vaadin-confirm-dialog-flow#28

Latest AppLayout Body Has Unnecessary Space Below

Vaadin Version: 14.0.0.rc2
Works fine in Mobile Browsers 👍
Does not work in Web Browsers 👎

add context-menu-like helpers for adding items

Like the following https://github.com/vaadin/vaadin-context-menu-flow/blob/master/src/main/java/com/vaadin/flow/component/contextmenu/ContextMenu.java#L70