Community Answer: Implementing a Side Menu with View Navigation

In this video, Alejandro Duarte develops a web application with a navigable menu bar that switches views when the menu items are clicked. This is implemented with the Navigator class which, starting from Vaadin Framework 8.2, allows to use the HTML 5 history API to avoid showing hashbangs in the URLs.
Links:
Follow Alejandro on Twitter: / alejandro_du
The code is available on GitHub: github.com/alejandro-du/commu...
Watch more Community Answers here: • Community Answers

[@user-iv4ty6ph4j]

This was very helpful, much appreciated :)

[@alainbakanga3087]

Really thank you Alejandro ,i found my way now

[@miguelperezcolom3451]

fenomenal. muchas gracias!

[@luiseduardoparralesg.352]

que bacan, demasiado bacan !!!

[@frandevel]

And another question: How would you handle there, the growth of the number of items in the side menu? Wouldn't it clip if it gets bigger than the view size?

[@adharsh2208]

Hi Alejandro, thanks for the video. What should we do if we need to use navigateTo method in another class(for example a navigation button in view 1 to navigate to view 2)? I am facing a lot of issues when I tried the same. Thanks.

[@maurmair]

Very nice video! Any chance this could be updated for Vaadin 10.0.5?

[@petmik5022]

perfect vaadin is amazing, but I dontn know still what is best practice in vaadin if i make many components, I often extend HL, VL, GridLayout, its ok? or its good extend CustomComponent for layouts too? if i want extend Grid, Button every other component so CustomComponent is best practice?

[@frandevel]

Thanks a lot for the video Alejandro, just one question: If you add many components to this views, having as main container a CssLayout, wouldn't you get a clipping effect not being able to show components if viewport is smaller than the content size? Don't we need a panel instead? I think this topic about the scrollbars being available is a tricky thing you could think about documenting a bit better. Cheers Fran

[@azazpatel8991]

Alejandro, how to fix 'null pointer exception in navigator with vaadin' error when i navigate in vaadin 8 new view. thanks advance

[@Nilix5]

How can i make that there is a blue background on the selected item

[@setsuna8117]

Why does getNavigator() was used instead of the the Navigator object that was created?

[@kappaj01]

I'm totally new to Vaadin and not 100% sure how it fits together. Vaadin 8.2 seems to be a fairly recent release. Know version 10 is out, but would have expected some backwards compatibility. I I'm using Vaadin 10 then none of the vaadin.ui components are available. Has this moved to a new package or has it been replaced? Cannot find any of the above imports (View, Composite, etc) in Vaadin 10. Running SpringBoot 2 with Vaadin starter 10.0.1 and com.vaadin vaadin-spring-boot-starter 10.0.1 and com.vaadin vaadin-bom ${vaadin.version} pom import

[@akiikius]

When i do this: Navigator navigator = new Navigator(this, viewContainer); navigator.addView("view1", ) I get an error: "cannot resolve method addView(java.lang.String" Why is that?

[@adildalli]

Great video thanks. for the view buttons, the style changes when they are clicked. do they stay clicked even though we start working on the view. in my case it goes back to unclicked state once I do on something on the view.

[@adildalli]

Thanks, it worked for me

[@lubasiteddy]

This demonstration will not work with with Vaadin 10. Whats the comparative way of creating views and placeholders in Vaadin 10

[@ProgrammingBrain]

That's right. This is for Vaadin 8. With 10, you can use @Route(layout=YourLayoutImpl.class). The menu could have several RouterLink components that would invoke the views marked with @Route. I don't have an example atm but hopefully, that gives you an idea on how to implement it by yourself.

[@akiikius]

When I try to add components to the new views; nothing appears when I navigate to the view. Any ideas?

[@akiikius]

Alejandro Duarte let me check on that possibility.

[@akiikius]

Alejandro Duarte this is the error: Component must be attached to a session when getConnectorId() is called for the first time

[@akiikius]

Alejandro Duarte @Alejandro Duarte Hi Alejandro; yes am using Vaadin 8; I was able to create and view the new components I added to my new views. Now working on aligning the login form. One step at a time. Thanks for your help!

[@epolanco11]

Can you do a sub-menus?

[@epolanco11]

@Alejandro Duarte cuando yo lo corro me da este error "Component must be attached to a session when getConnectorId() is called for the first time" alguna idea

[@renetatuacastillo19]

Or you can just download the spring-boot-vaadin-hybrid-menu-0.0.1-SNAPSHOT from github.