Composing Layouts with components with specific dimension

Vaadin 6 / 7 / 8
1

Hi.
I’m new to Vaadin and having some trouble with the layouts. I read all I could before come here to ask, but I couldn’t find any answer.
Considering the layout presented in the attached image, I would like to know which properties must be set in order that the page layout just in the image.
The
red lines
 corresponds to a
horizontal layout
, the
blue
 ones
vertical
 and finally the
components/panels
 delimited by the
green
.
I wish they could have the specific width and height set in their properties when had been defined, but I probably may doing it in order and/or setting properties that shouldn’t be set.

Here’s some one of my attempts to do what want to, but all of them and other combinations never seemed to work. I think I should have used the

setExpandRatio

 property, but I just can’t understand its usage too.

If this approach seems too clumsy or is not ideal according to Vaadin standards, please, let me know :slight_smile:

Panel panel1 = new Panel();
panel1.setWidth(“100%”);
panel1.setHeight(“30%”);
panel1.setContent(new Label(“PANEL 1”));
panel1.setSizeFull();

Panel panel2 = new Panel();
panel2.setWidth(“50%”);
panel2.setHeight(“100%”);
panel2.setContent(new Label(“PANEL 2”));
panel2.setSizeFull();

Panel alerts = new Panel();
panel4.setContent(new Label(“PANEL 4”));
panel4.setWidth(“100%”);
panel4.setHeight(“25%”);
panel4.setSizeFull();

Panel panel3= new Panel();
panel3.setContent(new Label(“PANEL 3”));
panel3.setWidth(“100%”);
panel3.setHeight(“75%”);
panel3.setSizeFull();

VerticalLayout verticalLayout = new VerticalLayout();
verticalLayout.addComponent(panel3);
verticalLayout.addComponent(panel4);

HorizontalLayout horizontalLayout = new HorizontalLayout();
horizontalLayout.addComponent(panel2);
horizontalLayout.addComponent(verticalLayout);

VerticalLayout root = new VerticalLayout();
root.addComponents(panel1, horizontalLayout);

setContent(root);

Thank you very much,

Regards,

Victor Camargo

22513.png

2

Hi,

You should probably use Layout (Vertical or Horizontal) instead of Panel if you do not need captions nor icons (see panels advantages on https://vaadin.com/book/-/page/layout.panel.html and Jouni answer on http://stackoverflow.com/questions/5592389/in-vaadin-what-are-the-advantages-of-using-a-panel-over-a-verticalcontainer)

If you wish to get the panel1 as some kind of fixed menu, its size (height) will not change, so you can set it as pixels, and then you can use setExpandRatio for the red-lined zone for it to get the remaining space.

You could also take a look at Vaadin Designer, let it do the job for you :wink:
https://vaadin.com/designer

HTH
Regards

3

Victor, don’t set widths for panels. Your all panels are full size.
Try just:

verticlaLayoutSmall.addComponent(panel3);
verticlaLayoutSmall.addComponent(panel4);

horizontalLayout.addComponent(panel2);
horizontalLayout.addComponent(verticlaLayoutSmall);

verticlaLayout.addComponent(panel1);
verticalLayout.addComponent(horizontalLayout);
verticalLayout.setComponentExpandRatio(horizontalLayout, 1);