Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8

Composing Layouts with components with specific dimension

Victor Camargo
6 years ago Dec 14, 2015 3:54pm

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 :)

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

 

Sebastien Libert
6 years ago Dec 15, 2015 11:34am

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 ;-)
https://vaadin.com/designer

HTH
Regards
 

Agata Vackova
6 years ago Dec 16, 2015 10:47am

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);