Buy me a coffee :)

Wicket - jQuery UI

jQuery UI integration in Wicket 6.x, Wicket 7.x , Wicket 8.x & Wicket 9.x

Custom Dialog



Components / Samples

Description

If you wish to customize the dialog content (including the buttons) or if you want it to be reusable, you may create your own dialog by extending AbstractDialog. It is pretty straightforward but you need to create the corresponding panel markup, like:

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
</head>
<body>
	<wicket:panel>
		Very simple dialog
	</wicket:panel>
</body>
</html>
The class looks like:
public abstract class SimpleDialog extends AbstractDialog<Void>
{
	private static final long serialVersionUID = 1L;
	
	protected final DialogButton btnSure = new DialogButton("I am sure"); //with a customized text
	protected final DialogButton btnCancel = new DialogButton(LBL_CANCEL); 
	
	public SimpleDialog(String id, String title)
	{
		super(id, title, new Model<Void>(), true); //we do not use a model here
		
		//initialize your components, if any
	}
	
	@Override
	protected List<DialogButton> getButtons()
	{
		return Arrays.asList(this.btnSure, this.btnCancel);
	}

	@Override
	public boolean isResizable()
	{
		return true;
	}
}
The usage:
HTML:
	<div wicket:id="dialog">[dialog]</div>

Java:
	final SimpleDialog dialog = new SimpleDialog("dialog", "Simple dialog box")
	{
		@Override
		protected void onClose(AjaxRequestTarget target, DialogButton button)
		{
			if (button.equals(this.btnSure))
			{
				//do something here
			}
		}	
	};

	this.add(dialog); //TODO: open it, using dialog.open(target);

Manage the button behaviors

By default, every button's actions close the dialog; and #onClose() event is triggered.

If you want to define an action without having the dialog to be closed, you can override #onClick(DialogEvent) method. In this case the dialog will not be closed until super.onClick(event) or close(AjaxRequestTarget, String) is called.
@Override
protected void onClick(DialogEvent event)
{
	if (event.isClicked(this.btnMyButton))
	{
		//TODO: do something here.
		//event.getTarget() returns the AjaxRequestTarget
	}
	else
	{
		super.onClick(event); //will close the dialog
	}
}

Sources

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.Model;

import com.googlecode.wicket.jquery.ui.form.button.AjaxButton;
import com.googlecode.wicket.jquery.ui.panel.JQueryFeedbackPanel;
import com.googlecode.wicket.jquery.ui.samples.component.SimpleDialog;
import com.googlecode.wicket.jquery.ui.widget.dialog.DialogButton;

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

	public CustomDialogPage()
	{
		// Form //
		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 SimpleDialog dialog = new SimpleDialog("dialog", "Simple dialog box", Model.of("I am the widget dialog model")) {

			private static final long serialVersionUID = 1L;

			@Override
			public boolean isDefaultCloseEventEnabled()
			{
				return true;
			}

			@Override
			public boolean isEscapeCloseEventEnabled()
			{
				return true;
			}

			@Override
			public void onClose(IPartialPageRequestHandler handler, DialogButton button)
			{
				this.info(button + " has been clicked");

				if (button != null && button.match(OK))
				{
					this.info(String.format("The model object is: '%s'", this.getModelObject()));
				}

				handler.add(feedback);
			}
		};

		this.add(dialog);

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

			private static final long serialVersionUID = 1L;

			@Override
			protected void onSubmit(AjaxRequestTarget target)
			{
				dialog.open(target);
			}
		});
	}
}
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket jQuery UI: dialog box</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div id="demo-panel">
		<form wicket:id="form">
			<button wicket:id="open">Open dialog</button>
			<br/><br/>
			<div wicket:id="feedback" style="width: 360px;"></div>
		</form>
	</div>	
	<div wicket:id="dialog">[dialog]</div>
</wicket:extend>
</body>
</html>