User leaves the page - notification

Is there a way to be notified that the user is trying to leave the page?

For example, in GMail, when I’m leaving (even to another web site) while a mail is being edited, I get a pop-up dialog box from the browser:

When I show a modal dialog, I don’t want the user to leave accidentally.

Thank you.
John.

This isn’t built-in feature but you can implement it with new widget. Make new client side widget with eclipse plugin (and widgetset if you have not done that before). Then in your new widget, register listener with Window.addClosingHander(). It will give you event with api=


 /**
     * Set the message to a <code>non-null</code> value to present a
     * confirmation dialog that asks the user whether or not she wishes to
     * navigate away from the page. If multiple handlers set the message, the
     * last message will be displayed; all others will be ignored.
     * 
     * @param message the message to display to the user, or null
     */
    public void setMessage(String message) {
      this.message = message;
    }

Check book of vaadin and section “developing custom components”.

In short your server side component:


public class ExitNotifier extends AbstractComponent {
   public String getTag() {
    return "exitnotifier";
  }
  public void paintContent(PaintTarget t) {
     super.paintContent(t);
     t.addAttribute("message", message);
   }
}

And widget.


public class ExitNotifierWidget  extends SimplePanel implements Paintable {
   public ExitNotifierWidget() {
     getElement().getStyle().setAttribute("display", "none");
   }
  public void updateFromUidl(uild) {
     this.message = uidl.getStringAttribute(message);
  }
 public void onload() {
   this.handlerRegistration = Window.addClosingHandler( new ClosingHandler() {
     public void onWindowClosing(ClosingEvent event) {
        event.setMessage(message);
     }
   });
  }
 public void onUnload() {
    handlerRegistration.removeHandler(); 
  }
}

Thank you Mauno.

Hi

This widget helped me a lot in my application . am using this widget in my application now .I have a requirement like when i click the Ok button in the Confirmation box i need to perform some actions …how do i procced with this…

Thanks
Arun Antony

A quick Google-search didn’t reveal any really useful - looks like when GWT is calling Window.ClosingListener the only thing you can do is interrupting the Close by setting a Message on the Event, which will poup as a dialog. Executing some client-side code on clicking OK in that Dialog seems to be possible if you register a second CloseHandler with that code, but communication with the server might not be working in all cases, which makes it useless at least for some use-cases (like releasing DB-locks etc).

Maybe overriding Application#close() (which will get called as soon as the session ends) might work better in your case.

For reference, the
StackOverflow-discussion
I used.

This is an old thread, but since it answered partially to my question, I want to put an update here:

public void onWindowClosing(Window.ClosingEvent event) {
event.setMessage(message);
}

This only partially works now. The reason is browsers now does not allow customized message anymore (otherwise a rogue website can fool user with a customized message). A dialog still show up to allow user stay or leave, but the message will be a standard one.

Note that there’s now an add-on for that kind of functionality (same restrictions apply as mentioned above):
https://vaadin.com/directory/component/beforeunload