how to... Grid and the CustomerForm in a horizontal layout and configure th

Vaadin 6 / 7 / 8
1

Two tutorials:

the Spring version does NOT show how to place the form horizontally next to the Grid

https://vaadin.com/blog/-/blogs/building-a-web-ui-for-mysql-databases-in-plain-java-

the Vaadin beginning tutorial DOES show how to place the form horizontally next to the Grid

https://vaadin.com/docs/-/part/framework/tutorial.html

I cannot locate any example in the Book of Vaadin 8, nor after many hours of google search which sheds some light on how to place the grid and form horizontally in a Spring Vaading app.

Any suggestions greatly appreciated.

2

Hi,

can you share a bit of code of how you’re trying to do it, and what’s your problem with your current solution? Spring really shouldn’t make a difference at all in layouting.

Best regards,

Olli

3

You can simply use HorizontalLayout (which then houses two components: the Grid and the Form), to achieve the effect of https://vaadin.com/docs/-/part/framework/tutorial.html . The usage of HorizontalLayout comes regardless of using Spring or not. Just don’t forget to set the width of HorizontalLayout to 100%.

4

Thank you! YOU rock! I am going to create my bean Model and then re-attempt the layout using your suggestions. Thank you.

5

One tutorial uses Spring Boot, whereas there is NO separate FORM created, and the “form” fields display vertical below the grid:

protected void init(VaadinRequest request) { updateGrid(); grid.setColumns("firstName", "lastName"); grid.addSelectionListener(e -> updateForm()); binder.bindInstanceFields(this); VerticalLayout layout = new VerticalLayout(grid, firstName, lastName, save); setContent(layout); }

Whereas, there IS a separate form in the plain Java EE tutorial.

Wouldn’t I need to create a separate FORM.html BEFORE I could have it placed horizontally?

32514.png

6

You don’t have to use any Form or any html to create a simple form. Just get the ideas from the following code:

final Grid grid = new Grid(); final FormLayout form = new FormLayout(); form.addComponent(new TextField("Name")); form.addComponent(new TextField("Surname")); form.addComponent(new TextField("Age")); final HorizontalLayout mainLayout = new HorizontalLayout(grid, form); mainLayout.setWidth("100%"); Note that FormLayout has no connection to html forms whatsoever, it does not handle any form POST or something, it’s just a way to lay out components as shown here: https://vaadin.com/book/vaadin6/-/page/layout.components.formlayout.html

If you have no idea where to put this code, I suggest you start slowly, don’t use Spring Boot but instead use https://vaadin.com/maven , play around in the MyUI.java class and when you start feeling at home, then try to implement forms.

7

Excellent. So I would place the above in my UI. Shall try. Thank you!

Would you know of a link that reviews ALL of the many functions that are POSSIBLE with a Vaadin grid?

8

Excellent shall view.

Thank you.

I am going to make a list of the features from Paramquery and attempt to accomplish the same with Vaadin Grid:


https://paramquery.com/pro/demos

9

https://vaadin.com/api/7.7.8/com/vaadin/ui/Grid.html is a good start.

-Olli

10

Hi Martin, in the wonderful example you shared with me, the individual form elements are added under one common identifier “form” thus it becomes possible to reference all the form fields by that one common identifier in the layout. But in the Spring example the form elements are not referenced under a common identifier, thus there is no way to group them and then place them in a group as a form – as in the following tutorial:

https://vaadin.com/blog/-/blogs/building-a-web-ui-for-mysql-databases-in-plain-java-