We’ll create our simple SettingsView later, because it has the actual meat of this example. Let’s set up the basic stuff first, our UI and our MainView.

UI:

Java

Minimalistic. The only thing to notice is that we pass the Navigator to the , so that it can attach a listener and trigger navigation. More on that when we actually create the SettingsView.

Java

Yeah, really nothing to see here - we just create this so we can navigate back and forth when trying it out.

Now let’s do the SettingsView, which has some more things going on in order to make it fairly complete:

Java

The buttons do not need to be shown if nothing has changed, so we add a ValueChangeListener to the DateField for that purpose.

But the main thing that we’re trying to demonstrate here happens in the that we attach to the Navigator. There, if we’re about to change away from our settings and the date is changed but not saved, we’ll make note of where the user wanted to go, but cancel that navigation and prompt the user to save or cancel the changes.

When the user saves or cancels changes, we also check if the user previously tried to navigate away form the page, and sends him on his way if that is the case.

That is basically all there is to this. You’ll notice we try to carefully clear or set the ‘pending view’ and hide/show the buttons at the right places to make the user happy, other than that this is pretty straightforward.