Wicket jQuery UI: resizable panel

Resizable Panel

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Components / Samples

Description

This sample shows how to use the ResizablePanel component.

ResizablePanel does not have an associated markup, it is up to the user to provide it (therefore, ResizablePanel should be extended).

Events are disabled by default to prevent unnecessary server round-trips. These could be enabled by overriding #isResizeStartEventEnabled() and/or #isResizeStopEventEnabled() returning true

To get the position back (top, left) in the event callbacks (onResizeStart & onResizeStop), it should be 'absolute'.

The overflow (scrollbars) are controlled with CSS. You may have a look at source code (ResizablePanelPage$MyResizablePanel.html) to see how this sample works.

Since

wicket-jquery-ui-core-1.4.1
wicket-jquery-ui-core-6.2.1

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

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.head.CssReferenceHeaderItem;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.request.resource.CssResourceReference;

import com.googlecode.wicket.jquery.core.Options;
import com.googlecode.wicket.jquery.core.resource.StyleSheetPackageHeaderItem;
import com.googlecode.wicket.jquery.ui.interaction.resizable.ResizablePanel;
import com.googlecode.wicket.jquery.ui.panel.JQueryFeedbackPanel;

public class ResizablePanelPage extends AbstractResizablePage
{
	private static final long serialVersionUID = 1L;

	public ResizablePanelPage()
	{
		// Feedback Panel//
		final FeedbackPanel feedback = new JQueryFeedbackPanel("feedback");
		this.add(feedback);

		// ResizablePanel //
		Options options = new Options();
		options.set("minWidth", 200);
		options.set("maxWidth", 700);
		options.set("minHeight", 100);
		options.set("maxHeight", 300);

		this.add(new MyResizablePanel("resizable", options) {

			private static final long serialVersionUID = 1L;

			@Override
			public void onResizeStart(AjaxRequestTarget target, int top, int left, int width, int height)
			{
				this.info(String.format("resize started - position: [%d, %d], size: [%d, %d]", left, top, width, height));

				target.add(feedback);
			}

			@Override
			public void onResizeStop(AjaxRequestTarget target, int top, int left, int width, int height)
			{
				this.info(String.format("resize stoped - position: [%d, %d], size: [%d, %d]", left, top, width, height));

				target.add(feedback);
			}
		});
	}

	// Methods //

	@Override
	public void renderHead(IHeaderResponse response)
	{
		super.renderHead(response);

		response.render(new StyleSheetPackageHeaderItem(ResizablePanelPage.class));
	}

	// Classes //

	class MyResizablePanel extends ResizablePanel
	{
		private static final long serialVersionUID = 1L;

		public MyResizablePanel(String id, Options options)
		{
			super(id, options);
		}

		// Methods //

		@Override
		public void renderHead(IHeaderResponse response)
		{
			super.renderHead(response);

			response.render(CssReferenceHeaderItem.forReference(new CssResourceReference(ResizablePanelPage.class, "ResizablePanelPage$MyResizablePanel.css")));
		}

		// Properties //

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

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

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket jQuery UI: resizable panel</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div wicket:id="feedback"></div>
	<br/>
	<div wicket:id="resizable" class="resizable ui-corner-all"></div>
</wicket:extend>
</body>
</html>

.resizable {
	width: 360px;
	height: 200px;
	border: 1px solid #EEEEEE;
	overflow: hidden;
	display: inline-block;
	padding: 12px;
}