navigating between view in Vaadin 6

I’m building a simple UI with a left sidebar for navigation and a content area on the right. when the user clicks on a button in the sidebar, the content area will build the specific layout for his choice.

Similar to this
demo

For now I have two contents that I need to switch between. The Home layout and the tabbed layout. When the user logs in he sees the home layout displayed in the content area, so in order to navigate to another layout the user clicks the buttons in the navigation sidebar to display the new content.

I’m using Vaadin 6 so the documentation for the Demo code wasn’t very helpful since it’s written in Vaadin 7.

MainUI Class

[code]
VerticalLayout content; //contentLayout
.
.
.

//create buttons for our menu
Button mnuBtn_1 = new Button("Home");
mnuBtn_1.setSizeFull();

mnuBtn_1.addListener(new ClickListener() 
{
    public void buttonClick(ClickEvent event) 
    {
        //call Home View (current view)
        //in other words refreshes the page
        root.removeAllComponents();
        buildHomeView();
    }
});

Button mnuBtn_2 = new Button("Settings");
mnuBtn_2.setSizeFull();
mnuBtn_2.addListener(new ClickListener() 
{
    public void buttonClick(ClickEvent event) 
    {
        //clear the content area
            menuAndContent.removeComponent(content);
            /*
             * Here I'd like to call on another class
             * called creatTabsheetLayout which builds
             * a Tabsheet with two tabs and displays
             * it in the Content area! But for some 
             * reason it won't load the content area back
             */
            

    }
});

[/code]and here is the class I’m trying to call

createTabsheetLayout()

[code]
imports…

@SuppressWarnings(“serial”)
public class createTabsheetLayoutextends VerticalLayout implements
TabSheet.SelectedTabChangeListener {

// Icons for the table
private static final ThemeResource icon1 = new ThemeResource(
“…/sampler/icons/action_save.gif”);
private static final ThemeResource icon2 = new ThemeResource(
“…/sampler/icons/comment_yellow.gif”);
private static final ThemeResource icon3 = new ThemeResource(
“…/sampler/icons/icon_info.gif”);

private TabSheet tabsheet;

public createTabsheetLayout() {
// Tab 1 content
VerticalLayout Tab1 = new VerticalLayout();
Tab1 .setMargin(true);
Tab1 .addComponent(new Label(“There are no previously saved actions.”));

tabsheet = new TabSheet();
tabsheet.setSizeFull();

tabsheet.addTab(Tab1 , "t1", icon1);

tabsheet.addListener(this);

addComponent(tabsheet);

}

public void selectedTabChange(SelectedTabChangeEvent event) {
TabSheet tabsheet = event.getTabSheet();
Tab tab = tabsheet.getTab(tabsheet.getSelectedTab());
if (tab != null) {
getWindow().showNotification("Selected tab: " + tab.getCaption());
}
}
}
[/code]But i can’t seem to get the mainUi to build the Tabsheet in the content area when I navigate to the settings layout.

I’m stuck! Is there a better approach to solve this?

Okay so there are a few weird things in your coding:

  1. This “createTabsheetLayoutextends” is hopefully just a type and in your code there is a space between the class name and extends right?
  2. I can’t see a custom constructor in your createTabsheetLayout class. This way you should still be able to add your content using: createTabsheetLayout tablayout = new createTabsheetLayout(); tablayout.createTabsheetLayout();menuAndContent.addComponent(tablayout);
    The code block is behaving really weird here sry.
  1. yeah that must have been a typo sorry about that
  2. i thought the constructor is the “public createTabsheetLayout()”. That’s where I built my tabsheet.

I added the following code to my clickEvent metod.

tablayout = new createTabsheetLayout(); tablayout.createTabsheetLayout(); menuAndContent.addComponent(tablayout); but it asked me to create a method in “createTabsheetLayout()” in type “createTabsheetLayout”

Oh yeah ups i’m sorry your class name threw me off because it sounds more like a method then a class name.
In that case it should actually work without the second line

thanks for your help! It works now.