EMF Forms makes it easy to create forms that are capable of editing your data based on an EMF model. To get started with EMF Forms please refer to our tutorial. In this post, we would like to outline a new feature in the 1.18.0 release: The improved label layouting.
In release 1.18.0, we have added three new style options to control labels, i.e.: defining a fixed width, label wrapping, and control label alignment. These options are supported by the default renderers. Although the feature is simple, it provides a huge benefit. First we will describe the issue that these styling options provide a solution for.
Let’s look at a simple example form with some attributes structured in groups (see following screenshot). While everything is aligned nicely within one group, there is an obvious break between the controls in the first group and the second group. The reason is pretty obvious: The renderer produce two independent grids within the two groups. The longest label in the first column of this grid influences where the second column begins. Every developer, who manually developed such a form probably knows this issue well.
A simple solution for this layout issue is to assign a fixed size to all labels, e.g. 100px. This way, the first column in the grids has a fixed size and everything is perfectly aligned again. In EMF Forms 1.17.0 you can influence the label width using the template model without any coding. That means, by adding this to your template model:
You will implicitly get an aligned layout in both groups:
While everything is nicely aligned now, there is a new obvious issue, the longest label “time of registration” is cut off. Further, for all other labels, the distance between labels and controls seems a little wide. It will need some fine-tuning and probably will need to be adapted on the label texts in order to find an optimal solution in a custom project. However, as there might still be some labels, which cannot be shortened, EMF Forms supports label wrapping as well. Again by adding this option to your template model and decreasing the label width a bit:
You will get this:
Please note, that those label styles work also with other layouts than groups. As an example, you could create a control grid with different number of columns per row. Still, due to the fixed labels size, EMF Forms will keep a global alignment:
This layout reveals one remaining issue. If labels have a fixed size, which is adapted to longer labels, shorter labels are pretty far away from their respective control (e.g. “height” in the example above). To fix this, EMF Forms allows to right align control labels using the third new styling option in the template model:
This will result in the following layout:
As for all EMF Forms features, the label layouting and layouting in general is of course adaptable to even more custom requirements. If there are any features you miss or ways you wish to adapt it, please provide feedback by submitting bugs or feature requests or contact us if you are interested in enhancements or support.