Need help with this layout

hello @ all

i’m new to vaadin and layouts an i need help to create this layout:

http://imageshack.us/photo/my-images/43/testpage1.png/

can someone help? i’v got this so far:


		// Set the root layout for the UI
		VerticalLayout content = new VerticalLayout();
		content.setSizeFull();
		setContent(content);
		
		// Add the topmost component.
		content.addComponent(new Label("The Ultimate Cat Finder"));
		
		// Have a horizontal split panel as its root layout
		HorizontalSplitPanel hsplit = new HorizontalSplitPanel();
		content.addComponent(hsplit);
		
		// Put a component in the left panel
		hsplit.setFirstComponent(new Label("aksldjfalskdjfalskdfj"));

i’m totaly confused… i’v read the book more than one time…

thanks for any help

isa

Hello,

try this:


        Window mainWindow = new Window("Test Application");
        
        VerticalLayout mainLayout = new VerticalLayout();
        mainLayout.setSizeFull();
        
        HorizontalLayout topLayout = new HorizontalLayout();
        topLayout.setMargin(false);
        topLayout.setHeight("120px");
        topLayout.addComponent(new Label("Top"));
        mainLayout.addComponent(topLayout);

        HorizontalSplitPanel hsplit = new HorizontalSplitPanel();
        hsplit.setSizeFull();
        hsplit.setFirstComponent(new Label("Left"));
        hsplit.setSecondComponent(new Label("Right"));
        hsplit.setSplitPosition(120, Sizeable.UNITS_PIXELS);
        mainLayout.addComponent(hsplit);
        
        HorizontalLayout bottomLayout = new HorizontalLayout();
        bottomLayout.setMargin(false);
        bottomLayout.setHeight("120px");
        bottomLayout.addComponent(new Label("Bottom"));
        mainLayout.addComponent(bottomLayout);
        
        mainLayout.setExpandRatio(hsplit, 1.0f);

        mainWindow.setContent(mainLayout);
        setMainWindow(mainWindow);

Norbert

hello norbert

thank you for the help.

i’v got now a new problem.

the setMainWindow(mainWindow); show me an error The method setMainWindow(Window) is undefined for the type Test2UI

but when i read the vaadin book, i undertand it like this way: my main class should extend the UI public class Test2UI extends UI { ...

do i understand something wrong?

thanks
isabelle

Hi!

Oh, sorry, my sample code was for Vaadin 6, for Vaadin 7 it looks like the following:


package com.example.zzlayouttest;

import com.vaadin.server.Sizeable;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.HorizontalSplitPanel;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

public class ZzlayouttestUI extends UI {

	@Override
	protected void init(VaadinRequest request)	{
        VerticalLayout mainLayout = new VerticalLayout();
        mainLayout.setSizeFull();
        
        HorizontalLayout topLayout = new HorizontalLayout();
        topLayout.setMargin(false);
        topLayout.setHeight("120px");
        topLayout.addComponent(new Label("Top"));
        mainLayout.addComponent(topLayout);

        HorizontalSplitPanel hsplit = new HorizontalSplitPanel();
        hsplit.setSizeFull();
        hsplit.setFirstComponent(new Label("Left"));
        hsplit.setSecondComponent(new Label("Right"));
        hsplit.setSplitPosition(120, Sizeable.UNITS_PIXELS);
        mainLayout.addComponent(hsplit);
        
        HorizontalLayout bottomLayout = new HorizontalLayout();
        bottomLayout.setMargin(false);
        bottomLayout.setHeight("120px");
        bottomLayout.addComponent(new Label("Bottom"));
        mainLayout.addComponent(bottomLayout);
        
        mainLayout.setExpandRatio(hsplit, 1.0f);

        setContent(mainLayout);
	}

}

Hope that helps you!

Norbert

thank you, norbert :lol:
works perfect !

isabelle