I am new to Vaadin. But i did some coding with GWT already. I need some help from the expert of vaadin. I have some predefined layout for my project. Using GWT i did the layout easily. (Using some template kind of stuff using html and based on the user click i just find the container (div) and put my dynamic stuff)
I tried to generate the same layout using Vaadin. I spend so much of hours. But i was not able to reach my goal. I have 3 containers in my page.
a. header container (horizontal layout)
b. main container (again some layout)
c. footer container (layout)
All the 3 container layouts are defined in seperate files. (java)
I have a main window with vertical layout. I added all 3 containers into that.
Question 1:
But i was not able to define my header container. All the controls are added one by one. Not in my defined places. I need some advice here.
Question 2:
I have some tab bar control in my header layout. if i click any tab bar, the corresponding layout page should be loaded in my main container area. How to find this main container from my main window?
If i solve this problem i could continue my work. Could any one help me to proceed further?
I’m not sure exactly what you mean - could you perhaps provide some screenshot or drawing of what you are trying to achieve, and what you ended up with?
It sounds like you might like the CustomLayout (although you can probably achieve what you’re looking for with other layouts as well).
You would probably want to store it in a variable.
private Layout mainLayout = new VerticalLayout();
Actually, I probably don’t understand exactly what your problem is in this case either… Some code and/or drawings would help.
Note that if you’re going to use tabs for main navigation, you’d probably want to just use TabSheet and add your main content to that.
Here’s an example:
public void init() {
setMainWindow(new MyWindow());
}
class MyWindow extends Window {
private VerticalLayout mainLayout = new VerticalLayout();
private HorizontalLayout header = new HorizontalLayout();
private TabSheet tabs = new TabSheet();
private HorizontalLayout footer = new HorizontalLayout();
MyWindow() {
mainLayout.setSizeFull();
setContent(mainLayout);
mainLayout.addComponent(header);
header.addComponent(new Label("The header"));
mainLayout.addComponent(tabs);
mainLayout.setExpandRatio(tabs, 1.0f);
tabs.setHeight("100%");
Layout view1 = new VerticalLayout();
view1.addComponent(new Label("This is view one"));
view1.addComponent(new Button("A button"));
tabs.addTab(view1, "Home", null);
Layout view2 = new VerticalLayout();
view2.addComponent(new Label("This is view two"));
tabs.addTab(view2, "Stuff", null);
mainLayout.addComponent(footer);
footer.addComponent(new Label("The footer"));
}
}
You need to upload it yourself of the internet, doesn’t matter where. After that you can use the image button (looks like a picture frame) and give the URL to your image. If you don’t have an own server to upload to, you can use for example
Imageshack or any other service that gives a direct link.
The example I provided above was apparently not close enough?
If you need the tabs to be aligned differently than the content, as in your mockup, you’ll need to make the tab(sheet) and the content separate. You can do this by being sneaky and having a tabsheet with empty content, or by using buttons to make the ‘tabs’.
Here is the full ‘sneaky’ version, which basically implements the whole basic UI structure of your mockup:
public void init() {
setMainWindow(new MyWindow());
}
class MyWindow extends Window {
private VerticalLayout mainLayout = new VerticalLayout();
private Button logoutButton = new Button("Logout");
private HorizontalLayout header = new HorizontalLayout();
private TabSheet tabs = new TabSheet();
private HorizontalLayout footer = new HorizontalLayout();
private final Component CONTENT_ID_FOO = new Label();
private final Component CONTENT_ID_BAR = new Label();
private VerticalLayout content = new VerticalLayout();
MyWindow() {
mainLayout.setSizeFull();
setContent(mainLayout);
mainLayout.addComponent(logoutButton);
mainLayout.setComponentAlignment(logoutButton,
Alignment.MIDDLE_RIGHT);
mainLayout.addComponent(header);
header.addComponent(new Label("The header"));
header.addComponent(tabs);
tabs.addTab(CONTENT_ID_FOO, "Foo", null);
tabs.addTab(CONTENT_ID_BAR, "Bar", null);
tabs.addListener(new SelectedTabChangeListener() {
public void selectedTabChange(SelectedTabChangeEvent event) {
if (event.getTabSheet().getSelectedTab() == CONTENT_ID_FOO) {
showFoo();
} else {
showBar();
}
}
});
mainLayout.addComponent(content);
mainLayout.setExpandRatio(content, 1.0f);
content.setHeight("100%");
mainLayout.addComponent(footer);
footer.addComponent(new Label("The footer"));
showFoo();
}
private void showFoo() {
content.removeAllComponents();
content.addComponent(new Label("Foo stuff"));
}
private void showBar() {
content.removeAllComponents();
content.addComponent(new Button("Some bar"));
}
}
Thanks for your excellent example. I just implemented what you have proposed here. I came to know one small difference in the view. Meaning this view is properly rendered in Fire fox. But in IE6 i am seeing some problem. Below the tab sheet i am seeing some white spaces.
