appreciated / vaadin-app-layout Goto Github PK
View Code? Open in Web Editor NEW<app-layout> integration for Vaadin 8.1+, 10+ and 14+
License: Apache License 2.0
<app-layout> integration for Vaadin 8.1+, 10+ and 14+
License: Apache License 2.0
After navigating to a view through the invocation of the navigator.navigateTo() method (or after a direct navigation through the browser url), the corresponding navigation item in the sidebar drawer should be marked as selected.
After user click the item on the left nav or the alarm popup message, Is there any way to close the left nav and the popup layout automatically.
Because I am trying to use it in the mobile Application. every time when user click the menu item, he has to hide the nav manually.
Thank you very much.
How change the caption of menu item if need. Cause some time needs to change the I18N language caption. so it menu item name will bey dynamically change.
Just switched from older 0.9.3 and now getting theme compilation error
Vaadin 8.6.1, standard Valo theme (no customizations)
If I just switch back to 0.9.3 - it works again.
Any hint what could be wrong ?
Thanks,
Dmitri
ERROR] Exception in thread "main" java.lang.NullPointerException
[ERROR] at com.vaadin.sass.internal.util.ColorUtil.adjust(ColorUtil.java:575)
[ERROR] at com.vaadin.sass.internal.util.ColorUtil.lighten(ColorUtil.java:588)
[ERROR] at com.vaadin.sass.internal.parser.function.LightenFunctionGenerator.computeForArgumentList(LightenFunctionGenerator.java:42)
[ERROR] at com.vaadin.sass.internal.parser.function.AbstractFunctionGenerator.compute(AbstractFunctionGenerator.java:72)
[ERROR] at com.vaadin.sass.internal.parser.LexicalUnitImpl.evaluateFunctionsAndExpressions(LexicalUnitImpl.java:826)
[ERROR] at com.vaadin.sass.internal.tree.VariableNode.traverse(VariableNode.java:84)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverseChildren(TemporaryNode.java:53)
[ERROR] at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:97)
[ERROR] at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:99)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverseChildren(TemporaryNode.java:53)
[ERROR] at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:97)
[ERROR] at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:99)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:214)
[ERROR] at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:298)
[ERROR] at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:267)
[ERROR] at com.vaadin.sass.SassCompiler.main(SassCompiler.java:101)
[ERROR] Exception in thread "main" java.lang.NullPointerException
[ERROR] at com.vaadin.sass.internal.util.ColorUtil.adjust(ColorUtil.java:575)
[ERROR] at com.vaadin.sass.internal.util.ColorUtil.lighten(ColorUtil.java:588)
[ERROR] at com.vaadin.sass.internal.parser.function.LightenFunctionGenerator.computeForArgumentList(LightenFunctionGenerator.java:42)
[ERROR] at com.vaadin.sass.internal.parser.function.AbstractFunctionGenerator.compute(AbstractFunctionGenerator.java:72)
[ERROR] at com.vaadin.sass.internal.parser.LexicalUnitImpl.evaluateFunctionsAndExpressions(LexicalUnitImpl.java:826)
[ERROR] at com.vaadin.sass.internal.tree.VariableNode.traverse(VariableNode.java:84)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverseChildren(TemporaryNode.java:53)
[ERROR] at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:97)
[ERROR] at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:99)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.controldirective.TemporaryNode.traverseChildren(TemporaryNode.java:53)
[ERROR] at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:97)
[ERROR] at com.vaadin.sass.internal.tree.ImportNode.traverse(ImportNode.java:99)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:227)
[ERROR] at com.vaadin.sass.internal.tree.Node.traverseChildren(Node.java:214)
[ERROR] at com.vaadin.sass.internal.ScssStylesheet.traverse(ScssStylesheet.java:298)
[ERROR] at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:267)
[ERROR] at com.vaadin.sass.SassCompiler.main(SassCompiler.java:101)
Hello,
I'd like to use the add-on in an OSGi Vaadin application but there are 2 issues:
So there bower_components seem to be missing ... not sure where they should be coming from?
Alex
Especially happening in "HYBRID" behaviors. Vaadin Layouts do not update their children automatically when the size is being changed via CSS. Can be fixed easily be by using Flexbox + CssLayout instead of setting the Expand Ratio.
Test behaviors for issues on multiple browsers:
Chrome:
Firefox:
Edge:
Safari:
Mobile Safari:
Opera:
Internet Explorer:
Sir,
.withDefaultNavigationView(MainView.class) does not work, It show empty View.
below is my code
appLayout = AppLayoutBuilder.get()
.withBehaviour(Behaviour.LEFT)
.withTitle("eTravel")
**.withDefaultNavigationView(MainView.class)**
.withDesign(AppBarDesign.MATERIAL)
//.add(new MenuHeader("App-Layout", "0.9.4", new ThemeResource("img/logo.png")), Position.HEADER)
.add("Home", VaadinIcons.BUSS, MainView.class)
.add("Bus Chart", VaadinIcons.CHART, BusChartView.class)
.add(SubmenuBuilder.get("Setting", VaadinIcons.COG)
.add("City", VaadinIcons.ROAD, CityView.class)
.add("Service", VaadinIcons.AUTOMATION, ServiceView.class)
.build())
.add(SubmenuBuilder.get("Account", VaadinIcons.FILE)
.add("Ledger", VaadinIcons.BOOK, LedgerView.class)
.add("Receipt", VaadinIcons.CLIPBOARD, ReceiptView.class)
.add("Payment", VaadinIcons.CLIPBOARD_CHECK, PaymentView.class)
.add("Contra", VaadinIcons.CLIPBOARD_CROSS, MainView.class)
.add("Journal", VaadinIcons.CLIPBOARD_TEXT, MainView.class)
.build())
.add(SubmenuBuilder.get("Reports", VaadinIcons.BAR_CHART)
.add("Reciept Report", VaadinIcons.CHART_GRID, CustomLayout.class)
.add("Payment Report", VaadinIcons.LINE_CHART, CustomLayout.class)
.add("Account Report", VaadinIcons.MENU, AccountReportLayout.class)
.build())
.add(SubmenuBuilder.get("Tools", VaadinIcons.HAMMER)
.add("Backup", VaadinIcons.DATABASE, BackupView.class)
.add("Restore", VaadinIcons.DISC, RestoreView.class)
.build())
//.addClickable("Click Me", VaadinIcons.QUESTION, clickEvent -> {/*Click Event*/})
.add("Preferences", VaadinIcons.COG, MainView.class, Position.FOOTER)
.build();
when I have a menu description with accented characters the URL shows the accents and in other cases places symbols to replace it, just as it keeps spaces
it is advisable to avoid that type of characters in the presentation of the URL, thus remaining in the description of the menu
Here is an example of how to treat them:
public void addViewToNavigator(Navigator navigator) {
String newName = StringUtils.stripAccents(WordUtils.capitalizeFully(name).replaceAll(" ", ""));
if (view != null) {
navigator.addView(newName , view);
} else if (className != null) {
navigator.addView(newName , className);
}
}
public void setNavigationClickListener(NavigatorNavigationElement element) {
NavigationBadgeButton button = (NavigationBadgeButton) element.getComponent();
String newName = StringUtils.stripAccents(WordUtils.capitalizeFully(element.getName()).replaceAll(" ", ""));
button.getButton().addClickListener(clickEvent -> {
UI.getCurrent().getNavigator().navigateTo(newName);
AbstractNavigationDrawer.closeDrawerIfNotPersistent();
});
}
this are the imports:
import org.apache.commons.lang3.StringUtils;
import org.apache.commons.lang3.text.WordUtils;
Can be fixed by using position:fixed
Hi!
Is there a way to add elements, like menu items and submenus, dynamically? I'd like to loop over an array after I created the AppLayout object and add items one by one.
I tried many things, for example this:
AppLayout drawer = AppLayoutBuilder.get().withBehaviour(variant).build();
drawer.setTitle("XYZ");
drawer.addNavigationHeaderElement(new MenuHeader("App Layout", "Version 0.9.11", new ThemeResource("logo.png")));
drawer.addNavigationElement(new NavigatorNavigationElement("Responsive",VaadinIcons.ABACUS, View1.class).getComponent());
Line 2 and 3 work, but addNavigationElement
throws a null pointer exception.
Any idea appreciated!
Cheers
André
Add the Menu Element in Desktop Mode to the Top Bar and in Mobile mode to the Left Side As to be seen here
I like add a View as navigation error by default --> .withDefaultErrorView()
Hi
We added the AppLayout as described in our pom.
All styles are missing. We had to add them manually in our theme. We have an own theme which imports the Vaadin standard theme "Valo". Did we miss something?
Thanks very much
We had some issues replacing standard Vaadin MenuBar with your Addon. During investigation the missing JavaDoc made it very hard to understand your code.
Please ad proper JavaDoc describing what your intention is.
Hi. First of all great job!
Is there any way to set the navigator variable of the NavigationDrawerBuilder?
I have some views that I don't want to add to the NavigationDrawerBuilder as NavigationElements but I need them to be added to the navigator (e.g. products/my-product view).
Thanks!
Matías
How to close the popup NotificationWindow when user click the content of notification.
Hi,
I would like to use your Menu in my application. I use vaadin-spring, so I have a SpringNavigator and Spring views.
Switching between the Views may look like this:
navigator.navigateTo("the-view");
If I use your AppLayoutBuilder I'm not able to add a menu entry giving just the view name, I have to give an instance of the view or the view class name.
Is there any chance to use SpringViews together with your AppLayout?
Cheers,
Christoph
New Feature:
Being able to execute a method instead of navigate by this way can navigate to a external link or add Windows to the UI by code.
.app-bar-application-content {
width: 100%;
height: calc(100vh - 64px);
}
Should only be set in the mobile version
20:34:34,335 SEVERE [com.vaadin.server.DefaultErrorHandler] (default task-4) : java.lang.NoSuchMethodError: com.github.appreciated.app.layout.component.RoundImage.addStyleNames([Ljava/lang/String;)V
Happens when trying to compile this code.
DefaultBadgeHolder holder = new DefaultBadgeHolder(); // I can indicate updates in another "navigatable" element
holder.increase();
AppLayout layout = AppLayoutBuilder.get()
.withBehaviour(Behaviour.LEFT_RESPONSIVE_OVERLAY_NO_APP_BAR)
.withTitle("Appbar Demo")
.withDefaultNavigationView(View1.class)
.withDesign(AppBarDesign.DEFAULT)
.add(new MenuHeader("App-Layout", "0.9.4", new ThemeResource("logo.png")), HEADER)
.add("Home", VaadinIcons.HOME, holder, View1.class)
.add("Charts", VaadinIcons.SPLINE_CHART, View2.class)
.add(SubmenuBuilder.get("Submenu", VaadinIcons.FILE_TREE)
.add("We are", VaadinIcons.CONNECT, View3.class)
.add("Submenu", VaadinIcons.PLUS, View4.class)
.add("Elements", VaadinIcons.MENU, View5.class)
.build())
.addClickable("Click Me", VaadinIcons.QUESTION, clickEvent -> {/*Click Event*/})
.add("Preferences", VaadinIcons.COG, View6.class, FOOTER)
.build();
setContent(layout);
@kamuffe Thank you very much for reporting
The builder pattern does initialization that it is not supposed to do. This part need to go into a seperate Class -> AppLayoutConfiguration.
Also the resulting AppLayout should not accept non components as parameter to make things clearer for the user.
can have any option to back navigation with navigationbar..
I've got installed the 0.7.2 version because the latest version gives me a NullPointerException when I call the build() method (it's because an AppBarIcon is not required on previous versions). The problem is that when I run my app on Google Chrome now the Toolbar looks broken, but if I run it on explorer it looks perfect.
Woaah nice it is working for the Material Addon also now i have one more question is it possible to add this component inside the views for example how do i use this inside grid cells where i need to open the app Layout within the grid cell instead of opening this on top of whole view page at left side of the page
when I try to display a view from the menu does not show it.
I test with the example you have and it does not work either.
Excellent Work. Can you add Hidden Menu Drawer Option By Default If Required (As it auto hides in Mobile Version)
I found the solution :
https://stackoverflow.com/questions/17982111/sass-variable-in-css-calc-function
Can you test the design with chrome browser and firefox? there are some issues with the style.
LEFT_OVERLAY : i think that is fine!
LEFT_RESPONSIVE : i think that is fine!
LEFT_RESPONSIVE_OVERLAY :
CHROME > no show the hamburguer button.
FIREFOX > always show the hamburguer button.
LEFT_RESPONSIVE_OVERLAY_NO_APP_BAR :
CHROME > no show the top bar (APP BAR).
FIREFOX > always show the top bar (APP BAR).
LEFT_RESPONSIVE_SMALL : don't reduce the width of HEADER component.
LEFT_RESPONSIVE_SMALL_NO_APP_BAR:
CHROME > no show the top bar (APP BAR) and don't reduce the width of HEADER component.
FIREFOX > always show the top bar (APP BAR), don't reduce the width of HEADER component and always show the hamburguer button.
Notification - add effect if new item has been added. Maybe with an option to disable/enable
Hey, I like your layout very much.
But I'm not able to use CDIViews for navigation.
Is it possible to use CDIViews?
Great addon, thanks for the effort.
Is it possible to use only the slider bar(drawer) without the app bar?
the Default Navigation View don't show,
unless the page is refreshed.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.