Buy me a coffee :)

Wicket - jQuery UI

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

Selectable, with draggable (on table rows)

Black Metal
Death Metal
Doom Metal
Folk Metal
Gothic Metal
Heavy Metal
Power Metal
Symphonic Metal
Trash Metal
Vicking Metal

Components / Samples

Description

Since

wicket-jquery-ui-core-1.2.1

Sources

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

import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.image.ContextImage;
import org.apache.wicket.markup.html.list.ListItem;
import org.apache.wicket.markup.html.list.ListView;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.PropertyModel;

import com.googlecode.wicket.jquery.core.resource.StyleSheetPackageHeaderItem;
import com.googlecode.wicket.jquery.ui.interaction.draggable.Draggable;
import com.googlecode.wicket.jquery.ui.interaction.droppable.Droppable;
import com.googlecode.wicket.jquery.ui.interaction.selectable.Selectable;
import com.googlecode.wicket.jquery.ui.interaction.selectable.SelectableDraggableFactory;
import com.googlecode.wicket.jquery.ui.panel.JQueryFeedbackPanel;
import com.googlecode.wicket.jquery.ui.samples.data.bean.Genre;
import com.googlecode.wicket.jquery.ui.samples.data.dao.GenresDAO;

public class TableDraggableSelectablePage extends AbstractSelectablePage
{
	private static final long serialVersionUID = 1L;
	private final FeedbackPanel feedback;
	private final Selectable<Genre> selectable;

	public TableDraggableSelectablePage()
	{
		// FeedbackPanel //
		this.feedback = new JQueryFeedbackPanel("feedback");
		this.add(this.feedback.setOutputMarkupId(true));

		// Selectable //
		this.selectable = new Selectable<Genre>("selectable", GenresDAO.all()) {

			private static final long serialVersionUID = 1L;

			@Override
			protected String getItemSelector()
			{
				return "TR"; // Gets the selector that identifies the selectable item within the Selectable component
			}

			@Override
			public void onSelect(AjaxRequestTarget target)
			{
				this.info("items: " + this.getDefaultModelObjectAsString());
				target.add(feedback);
			}
		};

		this.add(this.selectable);

		// Selectable ListView, with the default "empty" (ie: with no default icon) selectable-draggable factory //
		final SelectableDraggableFactory factory = new SelectableDraggableFactory();

		this.selectable.add(new ListView<Genre>("items", GenresDAO.all()) {

			private static final long serialVersionUID = 1L;

			@Override
			protected void populateItem(ListItem<Genre> item)
			{
				Genre genre = item.getModelObject();

				// Draggable (non styled container) //
				Draggable<?> draggable = selectable.createDraggable("drag", factory);
				draggable.add(new ContextImage("cover", new PropertyModel<String>(genre, "cover")));
				item.add(draggable);

				// Genre //
				item.add(new Label("name", new PropertyModel<String>(genre, "name")));
			}
		});

		// Droppable //
		Droppable<Genre> droppable = this.newDroppable("droppable");
		this.add(droppable);

		// Droppable ListView //
		droppable.add(new ListView<Genre>("items", this.selectable.getModel()) {

			private static final long serialVersionUID = 1L;

			@Override
			protected void populateItem(ListItem<Genre> item)
			{
				item.add(new ContextImage("cover", item.getModelObject().getCover()));
			}
		});
	}

	// Methods //

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

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

	// Factories //

	/**
	 * Gets a new Droppable.
	 * By default 'over' and 'exit' ('out') events are disabled to minimize client/server round-trips.
	 */
	private Droppable<Genre> newDroppable(String id)
	{
		return new Droppable<Genre>(id) {

			private static final long serialVersionUID = 1L;

			@Override
			public void onDrop(AjaxRequestTarget target, Component component)
			{
				info(String.format("Dropped %s", selectable.getModelObject()));

				target.add(feedback);
				target.add(this); // refresh the listview
			}
		};
	}
}
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket jQuery UI: selectable (draggable/table)</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<div class="ui-widget-content">
		<div wicket:id="droppable" class="ui-corner-all">
			<span wicket:id="items">
				<img wicket:id="cover" class="ui-corner-all" />
			</span>
		</div>
		<table wicket:id="selectable">
			<tr wicket:id="items">
				<td width="10%" height="">
					<div wicket:id="drag">
						<img wicket:id="cover" class="ui-corner-all" width="100%" />
					</div>
				</td>
				<td wicket:id="name" width="90%">[genre]</td>
			</tr>
		</table>
		<br/>
		<div wicket:id="feedback"></div>
	</div>
</wicket:extend>
</body>
</html>
table {
	border-collapse: separate;
	border-spacing: 1px;
}

table td {
	padding: 1px;
}

.ui-droppable {
	width: 420px;
	height: 450px;
	padding: .5em;
	margin: .5em;
	float: right;
	background-color: #9cf;
}

.ui-selectable {
	height: 180px;
	margin: .5em;
	border: 1px solid #FECA40;
}

.ui-selecting {
	background: #FECA40;
}

.ui-selected {
	background: #F39814;
	color: white;
}