Insert image in Navigation Template header

Vaadin 6 / 7 / 8
1

Hi there,

I am trying to insert an image in Vaadin Designer Naviation template and failed. I am trying to insert the logo in the top header section (Blue box). Any help is greately appreciated.



2

Hi,

The easiest way to get an Image showing during design time is to get a URL to the file from somewhere where it’s hosted (like
http://example.com/images/logo.png
) and put that URL to the Source property of the Image. Later on, you’ll probably want to move it to your app’s
resources and set the Image’s FileResource in Java code
.

Another thing you need to note is that the blue
header_bar
component in the design template is a CssLayout, which means that you’ll need to use CSS styles to align your component (by default it’ll flow to the right edge, which is probably not where you want to show the logo). If you’re comfortable with CSS, that’s ok, but otherwise you might want to consider some other Layout like HorizontalLayout which is a bit more intuitive during design time.

Hope this helps,
Olli

3

Hi Olli,

Thank you very much for your input, i was able to get the image displayed in the header but it’s not pretty at all. I have a follow-up question.

How can i split the display in the following manner?

20% - Header
70% - Content
10% - Footer

Then, i want to split the middle part(Content) 30% for side menu and 70% for the form. When i placed the two vertical layouts, the second layout is only displyed from the middle half and goes past the visible area.

Is it possible to achieve what i want in the Designer? Any help is greately appreciated.

Best.

4

Hi,

ExpandRatio is the property you’re looking for. For example, if you want a 20%:70%:10% ratio on components on a VerticalLayout, give them an ExpandRatio of 2.0, 7.0 and 1.0 respectively. Make sure each each of the components is set to 100% Height (you can set this either from the Height property or the little black popup that shows on selected components in the Design area) and they should expand height-wise to the given measurements. If you want equal size assigned for each component, you can use ExpandRatio 1.0 for each. Same strategy applies for 100% Width components on a HorizontalLayout.

Hope this helps,

Olli

5

Thanks Olli, worked perfectly. Regards