Buy me a coffee :)

Wicket - jQuery UI

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

Form Dialog (Slider)



Components / Samples

Description

Form-based dialog are designed to host a form and form components. Those dialogs are typically used to provide inputs (which are eventually validated) of model object properties. The model could be a simple String or Integer but can also be a more complex bean.

Extending an AbstractFormDialog is almost like extending an AbstractDialog (see 'Custom dialog' above)
What you need in addition is to specify what button act as the submit button, and what form is being in use (the dialog's inner form).
The usage is the same as InputDialog above.

public abstract class MyFormDialog extends AbstractFormDialog<MyBean>
{
	private Form<?> form;
	
	/* ... */

	@Override
	protected DialogButton getSubmitButton()
	{
		//should return one of the button returned by #getButtons()
		return this.findButton(OK);
	}

	@Override
	public Form<?> getForm()
	{
		return this.form;
	}

	@Override
	public void onError(AjaxRequestTarget target)
	{
		target.add(this.form.get("feedback")); //suppose you have a feedback panel
	}
}

Warning with nested forms!

Although Wicket allows nested forms, it is recommended to not nest a form-dialog within another form to avoid experiencing some troubles. Troubles could be like the dialogs does not close under certain circumstances (you re-attached the parent form for instance), the dialog's model could be set to null when the parent form is submitted and/or the parent form cannot be submitted due to some validators in the nested form (the dialog's one)...

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.SliderDialog;
import com.googlecode.wicket.jquery.ui.widget.dialog.DialogButton;

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

	public FormDialogPage()
	{
		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 SliderDialog dialog = new SliderDialog("dialog", "Slider dialog", Model.of(0)) {

			private static final long serialVersionUID = 1L;

			@Override
			public void onSubmit(AjaxRequestTarget target, DialogButton button)
			{
				this.info("The form has been submitted");
				this.info(String.format("The model object is: '%s'", this.getModelObject()));
			}

			@Override
			public void onClose(IPartialPageRequestHandler handler, DialogButton button)
			{
				this.info(button + " has been clicked");
				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: form dialog box</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div id="demo-panel">
		<form wicket:id="form">
			<button wicket:id="open">Open slider dialog</button>
			<br/><br/>
			<div wicket:id="feedback" style="width: 360px;"></div>
		</form>
	</div>
	<div wicket:id="dialog">[dialog]</div>	
</wicket:extend>
</body>
</html>