Drag and Drop Problem Liferay 6.2 and Primefaces 5.1

[Jan Frese, geändert vor 7 Jahren.]

Hello,

I'm trying to build a Primefaces 5.1 Drag and Drop into a faces portlet. The problem is that the bean method that should be executed when I drop something into the designated drop-zone is not executed and i cant figure out why. I hope you can help me.

Here's my Code:

View

<!--?xml version="1.0"?-->

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
	<h:head />
	<h:body>

		<h:form id="fieldForm">
			<p:fieldset id="availableDataTypesField" legend="Available Data-Types">
				<p:datatable id="availableDataTypes" var="dt" value="#{datatypesBean.aviableTypes}">
					<p:column style="width:20px">
						<h:outputtext id="dragIcon" styleClass="ui-icon ui-icon-arrow-4" />
						<p:draggable for="dragIcon" revert="true" helper="clone" />
					</p:column>

					<p:column headertext="Id">
						<h:outputtext value="#{dt.dataTypeId}" />
					</p:column>

					<p:column headertext="Name">
						<h:outputtext value="#{dt.name}" />
					</p:column>

					<p:column headertext="Description">
						<h:outputtext value="#{dt.description}" />
					</p:column>

				</p:datatable>
			</p:fieldset>

			<p:fieldset id="dataFields" legend="Data-Fields" style="margin-top:20px">
				<p:outputpanel id="dropArea">
					<h:outputtext value="!!!Drop here!!!" rendered="#{empty datatypesBean.droppedFields}" style="font-size:24px;" />
					<p:datatable id="dataFieldsTable" var="df" value="#{datatypesBean.droppedFields}" rendered="#{not empty datatypesBean.droppedFields}">
						<p:column headertext="Id">
							<h:outputtext value="#{df.dataFieldId}" />
						</p:column>

						<p:column headertext="Name">
							<h:outputtext value="#{df.name}" />
						</p:column>

						<p:column headertext="Description">
							<h:outputtext value="#{df.description}" />
						</p:column>

						<p:column headertext="Type">
							<h:outputtext value="#{df.type.name}" />
						</p:column>
					</p:datatable>
				</p:outputpanel>
			</p:fieldset>

			<p:droppable for="dataFields" tolerance="touch" activestyleclass="ui-state-highlight" datasource="availableDataTypes">
				<p:ajax listener="#{datatypesBean.onDataTypeDrop}" update="dropArea" />
			</p:droppable>
			
		</h:form>
			
	</h:body>
</f:view>

Bean

package formbuilderdemo.beans;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import org.primefaces.event.DragDropEvent;

import formbuilderdemo.model.DataField;
import formbuilderdemo.model.DataType;

@ManagedBean(name = "datatypesBean")
@ViewScoped
public class DatatypesBean implements Serializable {

	private static final long serialVersionUID = 1L;

	private List<datatype> aviableTypes;

	private List<datafield> droppedFields;

	private DataField selectedField;

	@PostConstruct
	public void init() {
		aviableTypes = new ArrayList&lt;&gt;();

		droppedFields = new ArrayList&lt;&gt;();

		populateAviableFields();
	}

	private void populateAviableFields() {
		DataType text = new DataType();
		text.setName("Text");
		text.setDescription("A simple Text");

		DataType date = new DataType();
		date.setName("Date");
		date.setDescription("A simple Date");

		aviableTypes.add(text);
		aviableTypes.add(date);
	}

	public void onDataTypeDrop(DragDropEvent ddEvent) {
		System.out.println("TEST");
		DataType dt = ((DataType) ddEvent.getData());

		DataField nField = new DataField();
		nField.setName(dt.getName() + nField.getDataFieldId());
		nField.setType(dt);
		nField.setDescription(dt.getDescription());

		droppedFields.add(nField);
		System.out.println("TEST");
		printDroppedFields();
	}

	private void printDroppedFields() {
		for (DataField df : droppedFields) {
			System.out.print(df.getName() + ",");
		}
		System.out.println();
	}

	public List<datatype> getAviableTypes() {
		return aviableTypes;
	}

	public List<datafield> getDroppedFields() {
		return droppedFields;
	}

	public DataField getSelectedField() {
		return selectedField;
	}

	public void setSelectedField(DataField selectedField) {
		this.selectedField = selectedField;
	}

}</datafield></datatype></datafield></datatype>

Thanks for helping.

Regards
Jan

[Kyle Joseph Stiemann, geändert vor 7 Jahren.]

Hi Jan,
Please tell us the versions of Liferay and Liferay Faces jars you are using. Also please reduce your example to the simplest, smallest code that will reproduce the issue. I could not reproduce your issue with a recent build of Liferay 7 and some similar Primefaces example code. If you simplify your code so that I can copy and paste it into a portlet and run it, I will try to reproduce your specific issue.

- Kyle