I’d like to have your opinion/strategy on the following feature.
We often display forms inside pages (not as modal windows). And it is easy for the user to go away from the form without clicking the save or cancel button.
For example, when the form is in a tab, it’s easy to select another tab.
Or when the form is a detail from a master table, it’s easy to select another row on the table.
So, we need to trigger a “are you sure? Do you want to save?” modal dialog box (Vaadin Window).
Is there a kind of FocusListener we could attach to the form or its Layout container?
Typical scenario:
user selects an item from a list.
user selects the tab “item details”.
it displays the form - read only mode.
user clicks edit button beside the form.
form switches to readOnly(false) mode.
and save/cancel button appears.
user does not click the save button or cancel button,
and clicks another tab, or change the url to select another item.
A modal box appears to ask if user is sure and wants to save.
Ideally,
[indent]
if users selected “save” in the modal box, the data is saved (our code) and we bring him where he was going (i.e. the other tab)
if the user selected “oops, return to the form”, he does not leave the form that stays in edit mode.
[/indent].
We’d use that pattern at many place.
My question: how would you do that? Is there a magic Vaadin api to help?
If it is actually tabsheet tab change that you want to be noticed, then take a look at
TabSheet.SelectedTabChangeListener . You should be able to implement it as any other Vaadin listener, and an event is triggered when the tab changes. from here you can check if readOnly == false and then open up the modal window, save data etc.
I can’t recall if the event is sent before or after the tab is changed, but it shouldn’t matter. You may have a direct reference to the data or if not, you’ll probably get it through the event.
In other than TabSheet cases you’ll probably have some sort of clicklistener that can implement this same methology.
I probably require a more general mechanism that “the user is leaving the form”. I can’t think about all the possible ways of escaping in my application.
For example, I just completed my job title on this Vaadin web site (in the control panel, is that a Vaadin application?).
Then I came back to the forum and see no job title.
I reopen the control panel and see no job title in the form indeed. Then I notice the “save” button in the right column.
It would have been nice to show a “don’t you want to save” modal box before I left the first time.
Nobody does that in his application?
I had an idea yesterday evening while bicycling back to home: when switching to edit mode, put my form in a modal window, such a way that the window takes the place of the form before the edit mode was activated (to simulate in place edit).
I don’t think you can solve this problem without making some own mechanism. Something that I came to think about is to have some sort of global state and use the application’s transactionStart() method to show the modal confirmation box. This could be used to make a generic solution, but note that I’m
not saying that you should do this, because I think it might actually be quite “hacky” and be bad for the readability of your code. Secondly, it might be problematic to implement, because you will get a lot of transactionStart method calls, for example everytime you take focus off of an immediate component.
A better solution would probably be to bind the logic to your views.
“when the form is a detail from a master table, it’s easy to select another row on the table.”
I have similar usecase where I need to show confirmation box to user if form is modified. Is there any fix to this problem?