help to create Horizontal Sliding Panel

General
1

I want help for the system I am developing,in which i have a left side panel which i want to slide horizontally …

how can i do it in vaadin?

2

Here is a (not so impressive, but) quick and dirty way:


       // Main layout to hold the panel
        HorizontalLayout mainLayout = new HorizontalLayout();
        mainLayout.setSizeFull();
        mainLayout.setSpacing(true);
        Window mainWindow = new Window("Sidepaneltest Application", mainLayout);
        setMainWindow(mainWindow);

        // The body of the application
        VerticalLayout body = new VerticalLayout();
        mainLayout.addComponent(body);
        mainLayout.setExpandRatio(body, 1.0f);

        // Sidepanel for options
        Panel sidePanel = new Panel("Options");
        mainLayout.addComponent(sidePanel);
        sidePanel.setHeight("100%");
        sidePanel.setWidth("160px");

        // A button for toggling the visibility of options panel
        CheckBox toggle = new CheckBox("Show >>", new MethodProperty(sidePanel,
                "visible"));
        toggle.setImmediate(true);
        body.addComponent(toggle);
        body.setComponentAlignment(toggle, "r");

        // Some contents to the application
        for (int i = 0; i < 10; i++) {
            body.addComponent(new Label("Hello Vaadin user, " + new Date()));
        }

You might also consider use of SplitPanel.

3

Using MethodProperties to do that seems quite advanced, and in my opinion, not the best solutions. For example the compiler can’t check the validity on the syntax as MethodProperty uses reflection to change values.

A solution that is a tad longer but clearer, for us mere mortals would be to change rows 21-22 into

// A button for toggling the visibility of options panel
Button toggle = new Button("Show >>", new ClickListener() {
  private static final long serialVersionUID = 1L;

  public void buttonClick(ClickEvent event) {
    sidePanel.setVisible(!sidePanel.isVisible());
  }
});

The sidePanel would have to be declared ‘final’ too.

To another matter: I’m not clearly sure what you mean with “left side panel which i want to slide horizontally …”, but I would interpret that you want a scrollbar to the left side of the view, when the width of the left side is wider than the space it is given. If that is the case, then no problem! Just put a new Panel() into the view instead of the layout you use, and give the layout to the panel with the method panel.setContent(layout);. You also have to specify the width of the panel to 100% (panel.setWidth(“100%”) or panel.setSizeFull()) and the width of the layout to undefined (layout.setWidth(null) or layout.setSizeUndefined()).