Best design practices?

Hi guys,
I was wondering if you could help me. I’m working with Vaadin for a few weeks now, I’m doing the layouts and styling. And I can’t help myself to feel that I’m doing it wrong.

Can you please tell me what’s the best way to design the layout? Should you use the expand ration or not? Should you use percents or auto or pixels? I’m asking because I don’t feel like I’m using html, I don’t feel very comfortable. And I would like to.

So what the best way? Any advice would be greatly appreciated.

Thank you

Whether you should use expand ratios or different ways for sizing entirely depends on the layout you want to create, so there is no overall answer to that.

Fixed sizes given in pixel values are generally problematic, as they don’t scale with font sizes; even fixed sizes given with em-values are more flexible in that respect. But, sometimes it’s not possible to avoid fixed sizes.

Undefined or “auto” sizing is generally used for shring-to-fit sizing, while relative sizes (usually 100%) are used to expand a component to fill a containing layout or the UI. Expand ratios can be used to use the space left over from other components.

Hence they are usually all used extensively.

Thank you for the reply. Well I use them all but I have to do something wrong.

Can you maybe tell me at least some common use cases when to use what please?

In a very typical case, perhaps the most common UI design, is to have a header row in the top and below that other UI content.

For example, if the header is just a textual label:

-VerticalLayout (set to 100% width & height with setFullSize())
 - Label (100% wide and undefined height by default)
 - SomeOtherLayout (set to 100% width & height with setFullSize())

The SomeOtherLayout would need to be set as expanding to take all the space left from the Label. Without expanding, the Label would take half of the space.

Thank you, this is basically what I’m doing, except for the expanding. Is that some java method? Or you mean Expand ratio? Or what? Can you be more specific my good lord, please?

Yes I meant expand ratio.

And there is a value which means that it should took all the remaining space?
Label should be 0 and the SomeOtherLayout should be 1?

Yes. 0 is the default value and anything set as non-0 will be expanding to take up the available space.

Thank you. I was setting it proportionaly. :<