Hiding a component in a horizontal layout

Hello all, as someone relatively new to Vaadin I am looking for some suggestions as to the best way to do something.

I have a side bar (very simillar to the one in the AddressBook Tutorial) and it is in a horizontal layout called middleLayout. I also have a button that is supposed to hide/show the sidebar component when clicked. It toggles the sidebar into/out of view.

I was wondering what the best way to do this is? If i use the setVisible method on my sideBar the horizontal layout doesn't re-size and it's space is still there....this is obviously undesired. So it seems a bit messy to set the sideBar to not visible and then reset the expand ratio of the remaining element and then do the reverse when it is added back in.

The other route I took (and currently use) is to remove the sideBar from the horizontal layout component when it is hidden. This makes the layout re-size and look fine. The only issue with this is when I add the sideBar back into it's place, at position 0, it shows up in position 1 for half a second and then moves. The program also freezes up for this half-second.This obviously disrupts the nice user experience that Vaadin has created.

Any advice on this subject would be greatly appreciated. This is how i am currently doing it:

private void changeToolView() {
		if (toolsShown == true) {
			middleLayout.removeComponent(sideBar);
			toolViewButton.setCaption("Show Tools");
			toolsShown = false;
		} else {
			middleLayout.addComponent(sideBar, 0);
			middleLayout.setExpandRatio(sideBar, 1);
			toolViewButton.setCaption("Hide Tools");
			toolsShown = true;
		}
	}

Sure I will try to grab what you need.

I am guessing it is because of the expand ratio I set on the mainArea. I was under the assumption that if there was no other visible component in the layout an item that is told to expand will do so fully no matter what ratio it was given, it is only when there is more than one visible component in the layout that the ratios come into play. I guess though that it doesn't matter whether the component is visible or not it still holds the expand ratio place in the layout.

private void buildMainLayout() {
		// Create main window
		setMainWindow(new Window("JTX Web"));

		// Make overall layout
		VerticalLayout topLevelLayout = new VerticalLayout();
		topLevelLayout.setSizeFull();
		topLevelLayout.setMargin(false);
		topLevelLayout.setSpacing(true);

		// Add two two parts to layout
		topLevelLayout.addComponent(createHeaderBar());
		topLevelLayout.addComponent(createToolBar());

		// Create main middle layout
		middleLayout = new HorizontalLayout();
		middleLayout.setSizeFull();

		// Add parts to middle layout
		sideBar = createSideBar();
		mainArea = createMainPanel();
		middleLayout.addComponent(sideBar);
		middleLayout.addComponent(mainArea);

		middleLayout.setExpandRatio(sideBar, 1);
		middleLayout.setExpandRatio(mainArea, 4);

		// Add middle layout to top layout
		topLevelLayout.addComponent(middleLayout);
		topLevelLayout.setExpandRatio(middleLayout, 1);

		// Add main layout to main window
		getMainWindow().setContent(topLevelLayout);
	}

	private Component createSideBar() {
		// create sidebar layout
		HorizontalLayout sideBarLayout = new HorizontalLayout();
		sideBarLayout.setMargin(true);
		sideBarLayout.setWidth(30, HorizontalLayout.UNITS_PERCENTAGE);

		// create the Accordion.
		Accordion publicJobFilterAccordion = new Accordion();
		publicJobFilterAccordion.setSizeFull();

		// create mock data labels
		Label testLabel1 = new Label("Test Tree 2");
		Label testLabel2 = new Label("Test Tree 3");
		Label testLabel3 = new Label("Test Tree 4");

		// add the components as tabs in the Accordion.
		publicJobFilterAccordion.addTab(topTree, "Public Job Filters",
				new ThemeResource("icons/JTX/JTXBuddy-Group.png"));
		publicJobFilterAccordion.addTab(testLabel1, "User Job Filters",
				new ThemeResource("icons/JTX/JTXBuddy.png"));
		publicJobFilterAccordion.addTab(testLabel2, "Create Jobs",
				new ThemeResource("icons/JTX/JTXDocument-Edit.png"));
		publicJobFilterAccordion.addTab(testLabel3, "Search Jobs",
				new ThemeResource("icons/JTX/JTXFind-Search.png"));

		// add accordion to sidebar
		sideBarLayout.addComponent(publicJobFilterAccordion);
		sideBarLayout.setSizeFull();

		return sideBarLayout;
	}

	private Component createMainPanel() {
		// create main panel
		mainPanelLayout = new VerticalLayout();
		mainPanelLayout.setMargin(true);
		mainPanelLayout.setSizeFull();
		mainPanelLayout.setSpacing(true);

		// create components
		tabView = new JobListTabView(this);
		displayPanel = new JTXDisplayPanel(this);

		// create tab view layout
		VerticalLayout mainTabViewLayout = new VerticalLayout();
		mainTabViewLayout.addComponent(tabView);
		mainTabViewLayout.setSizeFull();
		tabView.setSizeFull();

		// create job form layout
		HorizontalLayout mainJobFormLayout = new HorizontalLayout();
		mainJobFormLayout.addComponent(displayPanel);
		mainJobFormLayout.setStyleName("formLayout");
		mainJobFormLayout.setSizeFull();

		// add sublayouts to main layout
		mainPanelLayout.addComponent(mainTabViewLayout);
		mainPanelLayout.addComponent(mainJobFormLayout);
		mainPanelLayout.setExpandRatio(mainTabViewLayout, 2);
		mainPanelLayout.setExpandRatio(mainJobFormLayout, 3);

		return mainPanelLayout;
	}

Then this is the method i tried using the setVisible methods

private void changeToolView() {
		if (toolsShown == true) {
			/*middleLayout.removeComponent(sideBar);*/
			sideBar.setVisible(false);
			toolViewButton.setCaption("Show Tools");
			toolsShown = false;
		} else {
			/*middleLayout.addComponent(sideBar, 0);
			middleLayout.setExpandRatio(sideBar, 1);*/
			sideBar.setVisible(true);
			toolViewButton.setCaption("Hide Tools");
			toolsShown = true;
		}
	}