Layouting
Fundamentals
HorizontalLayout & VerticalLayout
FlexLayout
FormLayout
Vaadin Board
App Layout
Exercises
Exercise 1 Walkthrough
Exercise 2 Walkthrough
Exercise 3 Walkthrough
How to structure your application with Vaadin layouts and make effective use out of the powerful layouts that Vaadin provides. Our instructor shows how to combine layouts in ways that allows you to build even complex user interfaces.
What you will learn
The Layouts that Vaadin provides and their differences Specific features of each Layout Advanced features such as expand ratio and how to make use of these to achieve desired results How to structure an application
Comments (39)
I tried doing the following, but it didn't work. Any ideas why?
formLayout.setColspan(email, 2);
Also, the video solution uses .getElement().setAttribute("colspan", "2"), but this wasn't actually shown in the slides.
I had the same issue, the sollution to the exercise gave me the clues I needed.
In the slides it says 'when using addFormItem(), set column span on the form item.'
This actaully says it all, only we aren't shown that the formItem is not the textfield itself. We don't have a FormItem object yet that links to the text field in the context of the Form Layout.
Taking a closer look on this method:
formLayout.addFormItem(email, "Email")
This returns a FormItem. In the run through of the exercise, he shows this with the chaining of .getElement().setAttribute("colspan", "2"). Our instructor uses the Element API for this. But to do this with the setColspan() we can do this as follows:
FormItem item = formLayout.addFormItem(email, "Email");
formLayout.setColspan(item, 2);
The first exercise has a bonus task to build a button which adds blocks. The button just doesn't appear, even though I downloaded the example solution. My code is literally the same as in the solution (copied). Any idea why?
public ApplicationLayout() {
setPadding(false);
setSpacing(false);
..
..
layout.getStyle().set("flex-grow", "1");
layout.setSpacing(false);
createTextLayout();
updateUIForScroll();// add this
final Div footer = new Div();
..
..
}
I get the following exception when I try to run mvn jetty:run in the exercises folder or the solutions folder:
java.lang.NoSuchMethodError: 'void org.jsoup.nodes.DataNode.(java.lang.String, java.lang.String)'
I've tried downloading the source files again, but I still get the same error.
Full stack trace: https://gist.github.com/knjk04/a6511995cefcfd41b0d4940aea8cb028
This is caused by jsoup removing the deprecated constructor in their latest release. The latest version of jsoup is indirectly included through one of the dependencies (namely: webdrivermanager), so a quick solution is to exclude the jsoup dependency from there and include jsoup 1.12.1 manually instead: (in pom.xml, from around line 107)
<dependency>
<groupId>io.github.bonigarcia</groupId>
<artifactId>webdrivermanager</artifactId>
<version>LATEST</version>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.12.1</version>
</dependency>
Hey there,
I had a look and from backend system point of view all looks fine. You are marked as a student. Would you be so kind and try it again today and if it is still not working logout and login again?
Cheers, Paul
As of today, with the exception of the introduction, no more training courses are accessible. The following message is displayed: 'You need an active subscription to access the material'. Does this mean that I need to have a paid subscription to continue the training? If so, why has this changed?
Yes. There was a two week campaign for free training and certification which ended last week. The Plus subscription all of the training courses and certifications is only $9 a month, though, and you can cancel any time you want. Read more here: https://vaadin.com/pricing
why in the line 44 I can not use the same form to apply colspan like line 32?
Thankss!!
Hi, in the video you set layout height full and there is no flex-grow setting:
layout = new HorizontalLayout(navigation, content);
layout.setHeightFull();
This doesn't work. In the downloaded solutions I see that there is an other solution which works:
layout.setHeight("100px");
layout.getStyle().set("flex-grow", "1");
Could you fix the video and explain why the above (which seemed logical when I heard) doesn't work and the below does? Thanks.
Hi,
Just some remarks.
-
On the presentation video (also on handout.pdf pg. 6) on the slide with "Margin" for a layout. The text is still referring to "setPadding()" instead of "setMargin()".
-
In handout.pdf pg. 27 (also in the video min 10:10), the javadoc of the code example is still referring to "align all items", but the code example is for a specific item.
-
In regards with Exercise 1 (bonus part), in Firefox 70.0.1, as soon as you add blocks so that the vertical scroll bar appears, it appears for the entire VerticalLayout, instead of only for the content div. In Chrome works perfectly. I don't know if this is an issue of the "AppLayout" or of Firefox.
Hi,
Thanks a lot for the feedback. The first 2 errors have now been fixed (might take some time to be visible from vaadin.com).
Regarding the 3rd one, it looks like a Firfox bug (the flex-shrink is not correctly respected).
What's the motivation behind a 4 column grid on the Vaadin Board component? Most of the grid systems set a 12 column grid, as it offers more flexibility, being divisible in 12, 6, 4, 3 and 2 equal parts. Board "only" allows for 4 and 2 equal parts, which can be somewhat restrictive.