Wednesday, May 9, 2012

Wicket - disappearing Notification Dialog with bounce effect (jquery)

The example below displays notification dialog, which appears over HTML content, bounces few times and finally disappears. There is also small CSS to give it some nice look.
Such dialog can be used as a central point for asynchronous application notifications.

The implementation is based on single Wicket Web Page - this should be redesigned to reusable component, but simple page is usefull to get an idea.

At the beginning the dialog is hidden - Wicket Web Markup Container is being rendered as empty div (effectDialog).
Clicking on "Show Dialog" button sends Wicket Ajax Event to the server, and as response browser receives new HTML part, which replaces empty effectDialog. This new HTML code contains our Info Dialog, and also jQuery code. This code will play bounce effect once dialog is painted, and hide it after one second.

Java Code

public class FeedbackWebPage extends WebPage {

  public FeedbackWebPage() {
    String infoHeader = "Info Header";
    String infoContent = "Variables containing text content for our dialog "
        + "should be extracted to proper Wicket Model - we keep it simple"
        + " for demonstration proposals";

    // div containing info dialog
    final WebMarkupContainer infoDialog = new WebMarkupContainer("effectDialog");

    // hide dialog, but leave empty HTML tag in order to display it later

    // HTML ID for java script references
    final String infoDialogId = "#" + infoDialog.getMarkupId();

    // initialize jquery
    add(new JQueryBehavior(infoDialogId, "effect"));

    // labels building info dialog
    Label feedbackHeader = new Label("feedbackHeader", infoHeader);
    Label feedbackMessage = new Label("feedbackMessage", infoContent);

    // submit button - it will show our dialog
    Form<Void> form = new Form<Void>("form");
    form.add(new AjaxButton("open-dialog", form) {

      protected void onSubmit(AjaxRequestTarget target, Form<?> form) {

        // replace empty #effectDialog with real content

        // after setting dialog to visible play bounce effect
        JQueryEffectBehavior effectBehavior = new JQueryEffectBehavior(infoDialogId,
            "bounce", 500);

        // dialog should disappear after one second 
        effectBehavior.setCallback(new JQueryAjaxBehavior(this) {

          public CharSequence getCallbackScript() {

            // add timer, to hide dialog after one second
            // TODO move this JavaScript to notifier.js (next blog post)
            String callbackScript = "setTimeout(function(){$(\"" + infoDialogId
                + ":visible\").fadeOut();}, 1000);";
            return callbackScript;

          protected JQueryEvent newEvent(AjaxRequestTarget target) {
            return null;

        String jsEffect = effectBehavior.toString();

      protected void onError(AjaxRequestTarget target, Form<?> form) {


HTML Page - FeedbackWebPage.html

<!DOCTYPE html>
<html xmlns:wicket="">

        <link rel="stylesheet" type="text/css" href="feedbackWebPage.css" />

    <div wicket:id="effectDialog" class="ed-content">
        <div wicket:id="feedbackHeader" class="ed-header">Message Header</div>
        <div wicket:id="feedbackMessage" class="ed-message">Message Body Text</div>
    <table border="1">
        <tr><th>COL1</th> <th>COL2</th> <th>COL3</th> </tr>
        <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr>
        <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr>
        <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr>
        <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr>
        <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr>
        <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr>
        <tr><td>value 1</td> <td>test message</td> <td>some more text</td></tr>
    <form wicket:id="form">
        <button wicket:id="open-dialog">Show Dialog</button>

CSS - feedbackWebPage.css

.ed-content {
    font-size: 12px;
    height: 100px;
    width: 240px;
    padding: 4px;
    position: fixed;
    background-color: #EDEDED;
    border-color: #BFBFBF;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;

.ed-header {
    background-color: #F5A729;
    border-color: #E78F08;
    border-style: solid;
    border-width: 1px;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    margin: 0;
    padding: 4px;
    text-align: center;

.ed-message {
    padding-top: 6px;

POM.XML - dependencies


No comments:

Post a Comment