How can I create a VerticalMenu or Sidebar in Vaadin? Is there any specific component or Have I do programatically and using CSS?
I would like to create something like Vaadin Demo:
I'm using the new Valo Theme.
well to be able to create a responsive behaviour for your application you'd have to use CSS. Like Zigac mentioned Vaadin has some styles already written for some components (such as our menu here) but you'd wanna apply more eventually...
check out the new Dashboard demo with the Valo theme and responsiveness! It's a more comprehensive example of styling components and implements the same logic as the Valo Theme Demo. You can view the source code here
Basically what it does is create a menu as a CustomComponent and a content area as a CssLayout. Whenever a component is clicked in the menu it will call the corresponding view in the content area of the MainView
For example one of the views is the DashboardView which is the first view the user sees. It's a responsive VerticalLayout with responsive compnents on it.
You can view the styling techniques (in Sass) for the different views here
Here are some code sinppets:
MainView.java
public class MainView extends HorizontalLayout {
public MainView() {
//This is the root of teh application it
//extends a HorizontalLayout
setSizeFull();
addStyleName("mainview");
//here we add the Menu component
addComponent(new DashboardMenu());
//add the content area and style
ComponentContainer content = new CssLayout();
content.addStyleName("view-content");
content.setSizeFull();
addComponent(content);
setExpandRatio(content, 1.0f);
new DashboardNavigator(content);
}
}
DashboardMenu.java
public DashboardMenu() {
addStyleName("valo-menu");
setSizeUndefined();
DashboardEventBus.register(this);
//add components to the menu (buttons, images..etc)
setCompositionRoot(buildContent());
}
DashboardView.java
public DashboardView() {
addStyleName(ValoTheme.PANEL_BORDERLESS);
setSizeFull();
DashboardEventBus.register(this);
root = new VerticalLayout();
root.setSizeFull();
root.setMargin(true);
root.addStyleName("dashboard-view");
setContent(root);
//this allows you to use responsive styles
//on the root element
Responsive.makeResponsive(root);
//build your dashboard view
root.addComponent(buildHeader());
root.addComponent(buildSparklines());
Component content = buildContent();
root.addComponent(content);
//set the content area position on screen
root.setExpandRatio(content, 1);
...
and here is the styleName "dashboard-view" in the style sheet
dashboardview.scss
@mixin dashboard-dashboard-view {
.dashboard-view.dashboard-view {
//Styles for all devices
padding: $view-padding;
overflow: visible;
.sparks {
@include valo-panel-style;
margin-bottom: round($view-padding / 3);
//styles for a tablet
@include width-range($max: 680px) {
.spark {
width: 50%;
}
.spark:nth-child(2n+1) {
border-left: none;
}
.spark:nth-child(n+3) {
border-top: valo-border($strength: 0.3);
}
}
...