View change confirmations

The Navigator API provides ways to prevent the user from navigating away from a view in some cases, usually when the view has some unsaved changes. We’ll make a simple example that does just that (and only that).

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

  1. import com.vaadin.navigator.Navigator;
  2. import com.vaadin.navigator.ViewChangeListener;
  3. import com.vaadin.server.VaadinRequest;
  4. import com.vaadin.ui.UI;
  6. public class NavigationtestUI extends UI {
  7.   @Override
  8.   public void init(VaadinRequest request) {
  9.     // Create Navigator, make it control the ViewDisplay
  10.      Navigator navigator = new Navigator(this, this);
  12.     // no fragment for main view
  13.     navigator.addView(MainView.NAME, new MainView(navigator));
  15.     // #settings
  16.     navigator.addView(SettingsView.NAME, new SettingsView(navigator));
  17.   }
  18. }

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

Let’s do the MainView:

Java

  1. import com.vaadin.navigator.View;
  2. import com.vaadin.server.ExternalResource;
  3. import com.vaadin.ui.Link;
  4. import com.vaadin.ui.Panel;
  6. public class MainView extends Panel implements View {
  8.   public static final String NAME = "";
  10.   public MainView(final Navigator navigator) {
  11.     Link lnk = new Link("Settings", new ExternalResource("#!"
  12.         + SettingsView.NAME));
  13.     setContent(lnk);
  14.   }
  16.   @Override
  17.   public void enter(ViewChangeEvent event) {
  18.   }
  19. }

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

  1. import java.util.Date;
  2. import com.vaadin.data.Property.ValueChangeEvent;
  3. import com.vaadin.data.Property.ValueChangeListener;
  4. import com.vaadin.data.util.ObjectProperty;
  5. import com.vaadin.navigator.Navigator;
  6. import com.vaadin.navigator.View;
  7. import com.vaadin.navigator.ViewChangeListener;
  8. import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
  9. import com.vaadin.ui.Button;
  10. import com.vaadin.ui.Button.ClickEvent;
  11. import com.vaadin.ui.DateField;
  12. import com.vaadin.ui.InlineDateField;
  13. import com.vaadin.ui.Layout;
  14. import com.vaadin.ui.Notification;
  15. import com.vaadin.ui.Notification.Type;
  16. import com.vaadin.ui.Panel;
  17. import com.vaadin.ui.VerticalLayout;
  18. import com.vaadin.ui.themes.Reindeer;
  20. public class SettingsView extends Panel implements View {
  22.   public static String NAME = "settings";
  24.   Navigator navigator;
  25.   DateField date;
  26.   Button apply;
  27.   Button cancel;
  29.   String pendingViewAndParameters = null;
  31.   public SettingsView(final Navigator navigator) {
  32.     this.navigator = navigator;
  33.     Layout layout = new VerticalLayout();
  35.     date = new InlineDateField("Birth date");
  36.     date.setImmediate(true);
  37.     layout.addComponent(date);
  38.     // pretend we have a datasource:
  39.     date.setPropertyDataSource(new ObjectProperty<Date>(new Date()));
  40.     date.setBuffered(true);
  41.     // show buttons when date is changed
  42.     date.addValueChangeListener(new ValueChangeListener() {
  43.       public void valueChange(ValueChangeEvent event) {
  44.         hideOrShowButtons();
  45.         pendingViewAndParameters = null;
  46.       }
  47.     });
  49.     // commit the TextField changes when "Save" is clicked
  50.     apply = new Button("Apply", new Button.ClickListener() {
  51.       public void buttonClick(ClickEvent event) {
  52.         date.commit();
  53.         hideOrShowButtons();
  54.         processPendingView();
  55.       }
  56.     });
  57.     layout.addComponent(apply);
  59.     // Discard the TextField changes when "Cancel" is clicked
  60.     cancel = new Button("Cancel", new Button.ClickListener() {
  61.       public void buttonClick(ClickEvent event) {
  62.         date.discard();
  63.         hideOrShowButtons();
  64.         processPendingView();
  65.       }
  66.     });
  67.     cancel.setStyleName(Reindeer.BUTTON_LINK);
  68.     layout.addComponent(cancel);
  70.     // attach a listener so that we'll get asked isViewChangeAllowed?
  71.     navigator.addViewChangeListener(new ViewChangeListener() {
  72.       public boolean beforeViewChange(ViewChangeEvent event) {
  73.         if (event.getOldView() == SettingsView.this
  74.             && date.isModified()) {
  76.           // save the View where the user intended to go
  77.           pendingViewAndParameters = event.getViewName();
  78.           if (event.getParameters() != null) {
  79.             pendingViewAndParameters += "/";
  80.             pendingViewAndParameters += event
  81.                 .getParameters();
  82.           }
  84.           // Prompt the user to save or cancel if the name is changed
  85.           Notification.show("Please apply or cancel your changes",
  86.               Type.WARNING_MESSAGE);
  88.           return false;
  89.         } else {
  90.           return true;
  91.         }
  92.       }
  94.       public void afterViewChange(ViewChangeEvent event) {
  95.         pendingViewAndParameters = null;
  96.       }
  97.     });
  99.     setContent(layout);
  100.   }
  102.   // Hide or show buttons depending on whether date is modified or not
  103.   private void hideOrShowButtons() {
  104.     apply.setVisible(date.isModified());
  105.     cancel.setVisible(date.isModified());
  106.   }
  108.   // if there is a pending view change, do it now
  109.   private void processPendingView() {
  110.     if (pendingViewAndParameters != null) {
  111.       navigator.navigateTo(pendingViewAndParameters);
  112.       pendingViewAndParameters = null;
  113.     }
  114.   }
  116.   @Override
  117.   public void enter(ViewChangeEvent event) {
  118.     hideOrShowButtons();
  119.   }
  120. }

First we set up a DateField with buffering and a (dummy) datasource to make this work more as a real application would. With buffering on, the value (date in this case) can be changed, but it will not be written to the datasource before we commit(), which is what the Save -button does. The Cancel -button does discard() on the DateField, which returns the field to its unmodified state.

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 ViewChangeListener 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.