App Layout - Addon

Flow
57

Hi Johannes,
now it works like a charm! Thank you very much.

J

58

hello, First I want to say what a good component and excellent initiative!

For the moment I would like to use this component with vaadin flow or mix router layout with UI, but I have not seen the way, will there be any way with this version 1.0.2?

59

Hi Johaness,
I have “another” issue that I can’t solve. I have combined App Layout with Vaadin boards. After successful widgetset compilation the main part of UI is missing. Only menu is Visible (incomplete) and no detail part.

I am currently using LEFT_RESPONSIVE_SMALL_NO_APP_BAR behavior.

I can send you “very basic” code which shows this issue. But I guess simple AppLayout with Vaadin Board addon will do the same. Can you check this please?

Thank you

Best regards
Jiri

60

José G Moyano C:
hello, First I want to say what a good component and excellent initiative!

For the moment I would like to use this component with vaadin flow or mix router layout with UI, but I have not seen the way, will there be any way with this version 1.0.2?

Version 1.* of the App Layout Addon is not compatible with Vaadin 10.
Try the recently released Version 2.*.

61

Jiri Slivarich:
Hi Johaness,
I have “another” issue that I can’t solve. I have combined App Layout with Vaadin boards. After successful widgetset compilation the main part of UI is missing. Only menu is Visible (incomplete) and no detail part.

I am currently using LEFT_RESPONSIVE_SMALL_NO_APP_BAR behavior.

I can send you “very basic” code which shows this issue. But I guess simple AppLayout with Vaadin Board addon will do the same. Can you check this please?

Thank you

Best regards
Jiri

Hi Jiri, Feel free to open an issue on github. I’ll gladly help you out.

62

Hello Johannes, thank you for great and very usefull add-on! Please, answer these questions about 2.0.0 version:

  1. How to add badge to menu, like “Home [9+]
    " in 1.x version demo (”.add(“Home”, VaadinIcons.HOME, badge, View1.class)")?
  2. Why .addToSection(new LeftClickableComponent(…), FOOTER) not aligned to bottom of AppMenu, like in 1.x version demo?
  3. How to change main color (appbar and active menu items) and other predefined styles of app-layout?
  4. How to reduce font-size on mobile layout (title and menu item caption)?
63

Hello,

how can I add custom applayout design? I see the enum AppLayoutDesign.Custom, but how can I change the CSS file? I want to change the header color (–primary-color). I try to import my own css file (@StyleSheet), but that not work.

Greetings Benjamin

64

Evgeniy Zherebin:
Hello Johannes, thank you for great and very usefull add-on! Please, answer these questions about 2.0.0 version:

  1. How to add badge to menu, like “Home [9+]
    " in 1.x version demo (”.add(“Home”, VaadinIcons.HOME, badge, View1.class)")?
  2. Why .addToSection(new LeftClickableComponent(…), FOOTER) not aligned to bottom of AppMenu, like in 1.x version demo?
  3. How to change main color (appbar and active menu items) and other predefined styles of app-layout?
  4. How to reduce font-size on mobile layout (title and menu item caption)?

Hi!
Here are some answers to your questions:

DefaultNotificationHolder notificationHolder = new DefaultNotificationHolder(newStatus -> {/*Do something with it*/});
DefaultBadgeHolder badgeHolder = new DefaultBadgeHolder();
LeftNavigationComponent home = new LeftNavigationComponent("Home", VaadinIcon.HOME.create(), View1.class);
LeftNavigationComponent menu = new LeftNavigationComponent("Menu", VaadinIcon.MENU.create(), View9.class);
notificationHolder.bind(home.getBadge());
badgeHolder.bind(menu.getBadge());

The answers to Question 2,3,4 will change when Version 2.0.1 is released:

  1. The reason why this didn’t work out of the box is that I introduced a webcomponent that does a similar job as the old menu but doesn’t support sticky footer / headers this out of the box. 2.0.1 will at least allow to set a sticky footer again.

  2. In 2.0.1 I cleaned up the older sass/css variables from V1.*.
    [The CSS Variables that are available]
    (https://github.com/appreciated/vaadin-app-layout/blob/master/app-layout-addon/src/main/resources/META-INF/resources/frontend/com/github/appreciated/app-layout/app-layout.css)
    Here an example how to overwrite them:

  1. Since V2.0.1 inherits now styles from lumo this might not be necessary anymore. You may open an issue on github where we can talk in detail about this.
65

Benjamin Requardt:
Hello,

how can I add custom applayout design? I see the enum AppLayoutDesign.Custom, but how can I change the CSS file? I want to change the header color (–primary-color). I try to import my own css file (@StyleSheet), but that not work.

Greetings Benjamin

The enums in AppLayoutDesign aren’t doing anything, those are leftovers from V1.* sorry for the inconvenience. I’ll open an issue for this. The enum might comeback to add support the material theme.

Instead use the css variables mentioned in my previous answer:

Johannes Goebel:
3. In 2.0.1 I cleaned up the older sass/css variables from V1.*.
[The CSS Variables that are available]
(https://github.com/appreciated/vaadin-app-layout/blob/master/app-layout-addon/src/main/resources/META-INF/resources/frontend/com/github/appreciated/app-layout/app-layout.css)
Here an example how to overwrite them:

66

Johannes Goebel
Thank you very much!

67

Hi , there is one problem,in the attachment,I want to use style sheet in my view,but is doesn’t works! And when I change the @Route like this: @Route(value=“test”),it can work. How I can use style sheet and “MainAppLayout” at same time?
17431076.png

68

guoguo guoguo:
Hi , there is one problem,in the attachment,I want to use style sheet in my view,but is doesn’t works! And when I change the @Route like this: @Route(value=“test”),it can work. How I can use style sheet and “MainAppLayout” at same time?

I suppose that this is not an issue of this Addon but of Vaadin Flow. [Checkout the following issue on Github]
(https://github.com/vaadin/flow/issues/4843).

Also please check the network tab in the developer console whether the css is loaded or not.

69

When the MainView Class loads, all its menu items are expanded while I would want it to collapse all menus and their respective menuitems(hide submenus and menuitems) and only show the submenu options only when the user clicks the said menu option.
How can I accomplish that?

70

Allan The Great:
When the MainView Class loads, all its menu items are expanded while I would want it to collapse all menus and their respective menuitems(hide submenus and menuitems) and only show the submenu options only when the user clicks the said menu option.
How can I accomplish that?

Since the Addon does not support this menu behavior out of the box you will have to close them manually. You can do this f.e. by overwriting the method showRouterLayoutContent in your AppLayoutRouterLayout implementation.

@Override
public void showRouterLayoutContent(HasElement content) {
    super.showRouterLayoutContent(content);
    getCurrent().getMenuChildren().forEach(component -> component.getChildren().forEach(component1 -> {
        closeSubmenus(component1.getChildren());
    }));
}

public void closeSubmenus(Stream<Component> menuChildren) {
    menuChildren.forEach(component -> {
        if (component instanceof NavigationElementContainer) {
            closeSubmenus(((NavigationElementContainer) component).getMenuChildren());
            if (component instanceof LeftSubmenuComponent) {
                component.getElement().callFunction("close");
            }
        }
    });
}
71

Have a problem that I’m sure was working but suddenly stop and I’m unable to trackdown the change, I’m using spring-boot with spring security for login authentication, on validation the homepage plus autoload AppLayout menu is loaded. However, the menu doesn’t have a menu icon/dropdown, just a backwards link arrow option.

Does the menu components need to sit in the directory/level as the MainAppLayout.class

Many Thanks
Adam

72

Hi Adam,
yes this addon comes has Back Navigation support when navigating to a View that is not part of the menu. Please open an issue on Github and describe detailed all your @Route() annotations.

73

While using the LeftAppMenuBuilder, is there a way to add a link(anchor tag) as a menu item instead of a view class?

possibly something like this:

NavigationElementContainer appMenu = LeftAppMenuBuilder
.get()
.add(new Anchor(“href”,“text”))
.build();

I know my example wouldn’t work, I’m looking for something along those lines.

Thanks

74

Hi,

I’m using this code,

layout.addNavigationElement(new NavigatorNavigationElement( cs.getI18n("events"), "events", VaadinIcons.CALENDAR_USER, null, ViewEvent.class));

unfortunately, the view is not called, i click on the menu but nothing happen

can someone help ?

75

Hi,

Is there any way to align the notification icon to the center? I can’t find it.

76

Hi. Is it possible to set menu hidden at all screen sizes?