Wicket Kendo UI: border layout

Border Layout

- left -

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

- right -

- bottom -

Components / Samples

Description

This sample shows how to use the BorderLayout based on Kendo UI SplitterBehavior(s). Look at the HTML source to see how to set the layout.

You may override getVerticalPanes() and getHorizontalPanes(), which return panes definitions in a JSON format.

Note:

The BorderLayout IS-A WebMarkupContainer. If you wish to apply a BorderLayout on an existing Page or an existing Panel, you may implement the IBorderLayout interface.

Mode info here

http://demos.kendoui.com/web/splitter/index.html

Licensing

Kendo UI "Core" is Apache License 2.0 licensed, starting from version 2014.1.416.
Prior to version 2014.1.416, Kendo UI "Web" was licensed under GPLv3.

A pro version - with a commercial license - is also available, it provides additional widgets (see http://docs.telerik.com/kendo-ui/intro/supporting/list-of-widgets)
To be able to use it, you need to change the ResourceReference with kendo.all.min.js

Sources

Java
HTML
CSS

package com.googlecode.wicket.jquery.ui.samples.kendoui.splitter;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxLink;

import com.googlecode.wicket.kendo.ui.panel.KendoFeedbackPanel;
import com.googlecode.wicket.kendo.ui.widget.splitter.BorderLayout;

public class BorderLayoutPage extends AbstractSplitterPage
{
	private static final long serialVersionUID = 1L;

	public BorderLayoutPage()
	{
		final KendoFeedbackPanel feedback = new KendoFeedbackPanel("feedback");
		this.add(feedback);

		this.add(new MyBorderLayout("layout") {

			private static final long serialVersionUID = 1L;

			@Override
			public void onExpand(AjaxRequestTarget target, String paneId)
			{
				super.onExpand(target, paneId);

				this.info(String.format("%s panel has been expanded", paneId));
				target.add(feedback);
			}

			@Override
			public void onCollapse(AjaxRequestTarget target, String paneId)
			{
				super.onCollapse(target, paneId);

				this.info(String.format("%s panel has been collapsed", paneId));
				target.add(feedback);
			}
		});
	}

	static class MyBorderLayout extends BorderLayout
	{
		private static final long serialVersionUID = 1L;

		private boolean collapsed = false;

		public MyBorderLayout(String id)
		{
			super(id);

			this.add(new AjaxLink<Void>("link") {

				private static final long serialVersionUID = 1L;

				@Override
				public void onClick(AjaxRequestTarget target)
				{
					String paneId = "bottom";

					if (collapsed)
					{
						expand(target, "#vertical", "#" + paneId);
						onExpand(target, paneId); // 'expand' event is not triggered if not initiated by the widget itself
					}
					else
					{
						collapse(target, "#vertical", "#" + paneId);
						onCollapse(target, paneId); // 'collapse' event is not triggered if not initiated by the widget itself
					}
				}
			});
		}

		// Properties //

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

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

		// Events //

		@Override
		public void onExpand(AjaxRequestTarget target, String paneId)
		{
			this.collapsed = false;
		}

		@Override
		public void onCollapse(AjaxRequestTarget target, String paneId)
		{
			this.collapsed = true;
		}
	}
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket Kendo UI: border layout</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div wicket:id="feedback"></div>
	<br/>
	<div wicket:id="layout">
		<div id="vertical">
			<div id="top">
				<p>
					<a href="javacript:;" wicket:id="link">expand/collapse bottom</a>
				</p>
			</div>		
			<div id="horizontal">	
				<div id="left">
					<p>
						- left -
					</p>
				</div>
				<div id="center">
					<p>
						Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
						purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
						velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
						suscipit faucibus urna.
					</p>
				</div>
				<div id="right">
					<p>
						- right -
					</p>
				</div>
			</div>
			<div id="bottom">
				<p>
					- bottom -
				</p>
			</div>
		</div>
	</div>
</wicket:extend>
</body>
</html>

Wicket - jQuery UI