0

I find the Grid Layout in Vaadin Designer very buggy.

Question: Is anyone out there using it? Do you have some tips for me?

Background: I am porting an application from ASP.NET to Vaadin. There are tons of forms that were layouted in Visual Studio through HTML tables (see screenshot).

Some problems I am facing:

  • After moving labels and fields around in a grid layout, I suddenly get colspan/rowspan in the design source, like <column rowspan="7"></column>, when that happens, it's game over
  • I cannot insert or delete rows or columns
  • rowspan/colspan properties are not visible in the Designer properties
  • I cannot select multiple components (and consequently not change properties in bulk, like e.g. style, width, height etc.)
  • I cannot define column widths and row heights

enter image description here

Reto Höhener
  • 5,419
  • 4
  • 39
  • 79
  • In the release notes page, rowspan and colspan are listed in the **Limitations** section. You can check other limitations here as well [link](https://vaadin.com/designer/release-notes) – qtdzz Apr 27 '17 at 19:38
  • I tried designer with Vaadin 7 / RHEL 6, and it wasn't all too pleasant. Design html's worked, vaadin could use them without problem, and I tried then to write them by hand. As I had decided to use Grid component and didn't really find out how to all things should be defined I dropped designer and got back to define views with Java. My point here: Documentation was at the time not easy to find, helpful and consolidated, but technology worked once html design document was written by them. – Jukka Nikki Apr 28 '17 at 13:35

2 Answers2

4

This is more a question about Vaadin Framework and layouts. You can find general information about the available layouts from the Docs site, https://vaadin.com/docs/-/part/framework/layout/layout-overview.html. I think that GridLayout is not the best option to create the kind of layout presented in the image. Instead I would use a combination of FormLayout, VerticalLayout and HorizontalLayout. It's the easiest way to achieve a flexible layout. If you want more control, you can then start switching the VL and HL into CssLayouts.

The GridLayout editing support in Vaadin Designer unfortunately doesn't support all the possible features of GridLayout. I would recommend either doing the detailed tweaks in the declarative, or using Java.

I quickly whipped up an example of a similar layout as the one described: https://gist.github.com/ripla/d06d35249ffc4859e7b280425c1e92eb. I recommend that you also check the ResponsiveForm template for another kind of approach.

Lastly, if you have any bug reports or feature requests, please submit issues to https://github.com/vaadin/designer-issues/issues

ripla
  • 422
  • 4
  • 12
  • Thank you. I had a look at your example. The problem is that the left edge of the description field is not aligned with the fields of the FormLayout. – Reto Höhener Apr 29 '17 at 18:55
-1

Eventually I decided to use JFormDesigner as my main visual designer, because it is very fast and stable and can handle large/complex layouts effortlessly. JGoodies FormLayout maps pretty well to Vaadin GridLayout.

JFormDesigner generates a Java class from the design. I wrote a generator that uses that class to generate Vaadin Designer html. For example a JLabel is mapped to Vaadin label etc. All panels use FormLayout and if they only contain one row or column I map them to horizontal/vertical layouts. Multi col/row layouts are converted to grid layout, which actually so far is working great.

Vaadin Designer cannot open the large files anymore, but the application happily parses and displays them.

enter image description here

Reto Höhener
  • 5,419
  • 4
  • 39
  • 79