Wicket jQuery UI: message dialog box

Message Dialogs

Components / Samples

Description

The simplest use case is the need to display a single information/warning/error message with some common buttons (OK, OK-Cancel, Yes-No, Yes-No-Cancel), and an icon representing the message class (info, warn, light, error).

HTML:
	<div wicket:id="dialog">[dialog]</div>

Java:
	MessageDialog dialog = new MessageDialog("dialog", "Warning", "Is it ok?",
						DialogButtons.OK_CANCEL, DialogIcon.WARN)
	{
		protected void onClose(AjaxRequestTarget target, DialogButton button)
		{
			if(button != null && button.match(OK))
			{
				//do something here
				
				//note: predefined button are:
				//OK, CANCEL, YES, NO, CLOSE, SUBMIT
			}
		}	
	}
	
	this.add(dialog); //TODO: open it, using dialog.open(target);

(Any resemblance to living or dead visual-basic-6 MessageBox is purely coincidental...)

package com.googlecode.wicket.jquery.ui.samples.jqueryui.dialog;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.core.request.handler.IPartialPageRequestHandler;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.StringResourceModel;

import com.googlecode.wicket.jquery.ui.form.button.AjaxButton;
import com.googlecode.wicket.jquery.ui.panel.JQueryFeedbackPanel;
import com.googlecode.wicket.jquery.ui.widget.dialog.DialogButton;
import com.googlecode.wicket.jquery.ui.widget.dialog.DialogButtons;
import com.googlecode.wicket.jquery.ui.widget.dialog.DialogIcon;
import com.googlecode.wicket.jquery.ui.widget.dialog.MessageDialog;

public class MessageDialogPage extends AbstractDialogPage
{
	private static final long serialVersionUID = 1L;

	public MessageDialogPage()
	{
		final Form<Void> form = new Form<Void>("form");
		this.add(form);

		// FeedbackPanel //
		final FeedbackPanel feedback = new JQueryFeedbackPanel("feedback");
		form.add(feedback.setOutputMarkupId(true));

		// Dialog //
		final MessageDialog informDialog = new MessageDialog("infoDialog", "Information", "This is a information message", DialogButtons.OK_CANCEL, DialogIcon.INFO) {

			private static final long serialVersionUID = 1L;

			@Override
			public void onClose(IPartialPageRequestHandler handler, DialogButton button)
			{
				// noop
			}
		};

		this.add(informDialog);

		final MessageDialog warningDialog = new MessageDialog("warningDialog", "Warning", "Are you sure you want to do something?", DialogButtons.YES_NO, DialogIcon.WARN) {

			private static final long serialVersionUID = 1L;

			@Override
			public void onClose(IPartialPageRequestHandler handler, DialogButton button)
			{
				// noop
			}
		};

		this.add(warningDialog);

		final MessageDialog errorDialog = new MessageDialog("errorDialog", new StringResourceModel("dialog.error.title", this, null), new StringResourceModel("dialog.error.message", this, null), DialogButtons.OK, DialogIcon.ERROR) {

			private static final long serialVersionUID = 1L;

			@Override
			public void onClose(IPartialPageRequestHandler handler, DialogButton button)
			{
				// noop
			}
		};

		this.add(errorDialog);


		// Buttons //
		form.add(new AjaxButton("info") {

			private static final long serialVersionUID = 1L;

			@Override
			protected void onSubmit(AjaxRequestTarget target)
			{
				informDialog.open(target);
			}
		});

		form.add(new AjaxButton("warning") {

			private static final long serialVersionUID = 1L;

			@Override
			protected void onSubmit(AjaxRequestTarget target)
			{
				warningDialog.open(target);
			}
		});

		form.add(new AjaxButton("error") {

			private static final long serialVersionUID = 1L;

			@Override
			protected void onSubmit(AjaxRequestTarget target)
			{
				errorDialog.open(target);
			}
		});
	}
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket jQuery UI: message dialog box</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div id="demo-panel">
		<form wicket:id="form">
			<button wicket:id="info">Open info</button>
			<button wicket:id="warning">Open warning</button>
			<button wicket:id="error">Open error</button>
			<br/><br/>
			<div wicket:id="feedback" style="width: 360px;"></div>
		</form>
	</div>
	<div wicket:id="infoDialog">[info]</div>
	<div wicket:id="warningDialog">[warning]</div>
	<div wicket:id="errorDialog">[error]</div>
</wicket:extend>
</body>
</html>