Hi all,
I have a Bean with a lot of fields, so i’d like to split all these fields in a form including 4 tabsheets and one Validation button to update the Bean in the DB via Hibernate.
Could you tell me how build these form ?
Create one form by tabsheet ?
Or create one form splitted on 4 tabsheets ? How to do ?
Same question if i use Accordion …
Thank you for your reply
That’s an interesting question. I assume that you mean that you have one TabSheet with four tabs, right?
You could have one Form in each of the tabs. You can specify which fields are used in each of the four forms in the second parameter for [tt]
setItemDataSource()
[/tt].
form.setItemDataSource(item, Arrays.asList("planet"));
You probably want to validate the form in each step, so you’ll probably need an OK button for each form. The button should just validate and not commit, except in the last tab. You probably want to do the same validation also in a SelectedTabChangeListener if the user chooses a different tab.
You could also override Form.attachField() to place the fields in different layouts, on different tabs. Do note that the field factory and attachField() can be called multiple times for a field, including when setting the data source or visible item properties.
If using CustomLayout (on which a Form places fields based on their property IDs, and replaces fields if added again), this is almost trivial - you just need to split the fields to the correct tabs in attachField(). However, in that case you lose the benefits of Vaadin layouts and have to fall back to HTML. You could implement your own helper class that provides similar functionality while adding/replacing the fields in layouts of your choice.
Accordion is practically the same as TabSheet - at the moment it is an empty subclass of TabSheet, with a different client side widget for presentation.
Hi Marko,
You’re right it’s one Tabsheet for 4 tabs …
Am i obliged to put one button OK by tab ? I’d prefer to have one button Validate in the last Tab which validates all the fields
Not obliged no, but from the usability perspective, when the validation fails, it might be more clear to the user that the failure message refers to something in the visible tab, not to something in another tab, so it may be best to validate each step (tab/form) at a time. Whatever you think is best.
Regarding Henri’s suggestion, there’s an
example for using attachField()
. You’d have to put the TabSheet as the layout of the Form, then handle adding the fields to each tab in the attachField(). In such case, you may have to put the commit button inside the last tab, not in the form footer, which would be outside the TabSheet.
Thanks Marko, you are very reactive and your framework is well designed
I try to implement this and come back to you if i meet some difficulties.
NB : I worked on Apache Click which is a good and simple framework (stateless and page oriented) but this one has not yet advanced Ajax functions, that’s why i’m looking for an AJAX Ria framework and i found Vaadin …
I tried ZK but i dropped it after a lot of days of prototypying, not built well enough to meet my requirements
Nevertheless, this case of study is more simple to build in Click than in Vaadin …
From usability perspective i wouldnt place a Button on each tab. This is simply a usability nightmare. Instead i would validate on tab-change. But there are several other things one needs to look out for. At the end i am not quite sure if splitting a form into several tabs is worth the effort because there is simply no “natural” way of handling it from end user perspective.