In the first part of our series I’ve focused on overall reasons why we’ve chosen Vaadin as a next development platform for our future applications and the second part shows you how to navigate and work with views. Today we want to show form components. Like in Notes you can use lot of different form components which allow the user to enter the data.
TabSheets
Most of our Notes forms are built with tabs to separate the form sections. Usually there is basic tab, history tab, ACL tab and many more depended on the form purpose. There is TabSheet In Vaadin component which can do the same for you. Similar to that is Accordionexcept that the “tabs” are arranged vertically
Form layout
That is very interesting part of the design. As we’ve mentioned earlier in Vaadin you don’t need any graphical design interface to put elements on the form. You can use only Java code to “draw” fields on the layout in the shape and order you want. Although it seems to be weird and difficult to make and maintain, it is not and you used to this. To make designer’s life easier there are several types of layouts to build nice looking form, like Horizontal and Vertical Layouts, GridLayout, FormLayout, Panel, SplitPanels. Then you just combine that layouts together, one within another, put fields inside. That model is not quite convenient for building fancy looking web sites but we are talking about corporate applications here which are mainly build from forms and views.
Fields
Variety of fields are in your disposal. It does not make sense to mention in details each of them here, but we are talking about radio buttons, checkboxes, date and time pickers, uploads, comboxes etc. What we’ve found very useful is combox field with the typeahead ability. In Notes, to select for example Company, you always have to show up the picklist and search in that. Here you can type in the combox and it offers you companies from even huge database behind. There is also right click menu which offers you the basic action related to the selected field.
PickList
Picklist in Notes is very useful tool to select the data from the view and to display more information about selected record. But the search is quite limited especially when you are using single category view. In Vaadin you can build similar Picklist with all features know from Notes but furthermore you can add filters, search bar, you can sort the columns by clicking and whatever other element you want, like button to add new record.
Embedded View
You can add the embedded view to the form as well. Actually it is Grid component like any other view so you are not limited to add to that your buttons, your filters, sorting etc. In Notes embedded view, with single category does not allow that.
In the next part we will focus on the access rights and JavaScript components like Full Calendar and CK Editor, which can also be included in Vaadin applications.