setExpandRatio() and setSizeFull() problem

I thought I understood this, but apparently I do not.

Could someone kindly point me to the documentation that I am SURE exists that explains the interaction between setSizeFull() and setExpandRatio()?

In isolation, I understand what each does: setSizeFull() is simply a convenience call to set the width and height of a component to 100% of the available space in each dimension.

And setExpandRatio() controls how excess space–if there is any–is allocated to components inside, for example, a layout.

But for whatever reason when these two calls are used together in a common layout, I always seem to end up with disappearing components. I know that I am doing something dismally stupid.

If you like, here’s a real world example of the layout desired (nothing fancy):
0. Inside a VerticalLayout:

  1. A 100% width banner at the top, sized to accommodate the height of its components (HorizontalLayout…presumably I do NOT call setSizeFull() here, because if I did it would inflate to take over the screen; presumably instead I want setWidth(“100%”))
  2. Immediately below it, a 100% width menu bar, sized to accommodate the height of its items (same deal as above).
  3. Immediately below it, a split pane that {frantic handwave} takes over the rest of the available area (here is where I get confused: I know that I want this component to be the one that gets extra space, so I call verticalLayout.setExpandRatio(splitPane, 1F), right?)

Thanks very much.

Best,
Laird

I’m not an expert either, but it seems like you’ve got it right, we do something like that and it works fine:

  1. Create the VerticalLayout, setSizeFull() so that it will fill the entire page with the layout.
  2. Add the banner to the layout (presumably a HorizontalLayout)…if you make it 100% wide, it will space the components across that space, but if you leave it alone, it will just place them next to each other.
  3. Add the menu bar to the layout (could itself be a HorizontalLayout).
  4. Create the SplitPanel and setSplitPosition()
  5. Add something to the first and second components of the split panel, presumably with one having a component that’s setSizeFull() so that it will use all of the space inside its split panel.
  6. Then something like vLayout.setExpandRatio(mySplitPanel,1); so that the splitpanel takes up all available space in the vertical layout.
  7. Optionally, add in a footer (perhaps another HorizontalLayout)…

Hi,

Seems about right.

  • setSizeFull() is the same as setWidth(“100%”) + setHeight(“100%”)
  • in Vaadin, relative sizes (like the “100%” above) are relative to the space available (given by the layout) to the component
  • setExpandRatio() affects the space available/given to a component
  • perhaps the most common use-case is setExpandRatio(c,1f) + c.setSizeFull() (or 100% in the same direction as the expand)
  • you don’t want to setSizeFull() (or relative sizes in the same direction as the expand) for non-expanded components, if one is expanded; relative size does not ‘push’ the available/given space, undefined or absolute size does

Hmm… I wonder if that clarified or confused?

Best Regards,
Marc

No, that definitely helped. I found I have to be particularly vigilant about setting sizes of one kind or another on everything; I had missed a layout in a relatively deep nested hierarchy. The debug window, incidentally, with its “Analyze Layouts” button, is an absolute lifesaver.

Best,
Laird

Yes, ?debug has been a big help, especially the info shown in the Eclipse console that gives names rather than PIDs.

But what exactly are we setting on these different aspects (setSizeFull() as an example, but could just be setWidth()):

Panel.setSizeFull() versus ((VerticalLayout)myPanel.getContent()).setSizeFull()

Form.setSizeFull() versus myLayout.setSizeFull(); + form.setLayout(myLayout);

Window.setSizeFull() versus myPanel.setSizeFull(); + window.setContent(myPanel);

That is, what is the difference on setting attributes on the Panel/Form/Window versus setting these same things on its content/layout?

Thanks for any tips…

Every Panel (or Window) has a content which is a ComponentContainer. By default it contains a VerticalLayout (returned by getContent()) but it can also be anything else (set by setContent() or constructor). So when doing e.g. Panel.setSizeFull() you make the Panel fill the space provided by its parent. Then doing Panel.getContent().setSizeFull() makes the content (VerticalLayout for instance) use the space provided by the Panel. You can instead do e.g. Panel.getContent().setHeight(“10000px”) and you will have a 10000px high layout inside the Panel and scrollbars provided by the Panel.

Thanks, Artur. I had been setting sizes only on the content/layout previously, and it mostly seemed to work as expected, but ?debug pointed out these undefined sized containers. I think I’m slowly getting the hang of how components size themselves…