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?