dynamic draggable component not working

girish.bhojwani · 19 Jan 2011, 14:28

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<head>
<style type="text/css">
.block {
height: 300px;
width: 200px;
}
</style>
</head>
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head"/>
<h:outputScript library="primefaces" name="jquery/ui/jquery-ui.js" target="head"/>
<h:outputScript library="primefaces" name="core/core.js" target="head"/>
<h:outputScript library="primefaces" name="dnd/dragdrop.js" target="head"/>

<ui:composition template="templates/ui.xhtml">
<ui:define name="content">
<h:form>
<p:panel header="Source">
<div class="entry" align="left"><p:growl id="growl"
showDetail="true" /> <h:panelGrid columns="4">
<p:commandButton id="cmdbutton1" image="/images/barca_logo.png"
label="1" binding="${panelBean.commandButton}"
actionListener="#{panelBean.createInstance}" update="pnl"
rendered="true" />
<p:commandButton value="2" />
<p:commandButton value="3" />
<p:commandButton value="4" />
</h:panelGrid></div>
</p:panel>

<p:outputPanel id="pnl" binding="${panelBean.panel}"
style="width:500px;height:300px;">
<f:facet name="options">
<p:menu>
<p:submenu label="Settings">
<p:menuitem value="Toggle" url="#" icon="/images/update.png"
onclick="panel.toggle()" />
<p:menuitem value="Remove" url="#" icon="/images/delete.png"
onclick="panel.close()" />
</p:submenu>
</p:menu>
</f:facet>
</p:outputPanel>
</h:form>
</ui:define>
</ui:composition>
</html>

------------------------------------------

Bean File
--------------------

package org.primefaces.examples.view;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

import org.primefaces.component.commandbutton.CommandButton;
import org.primefaces.component.dnd.Draggable;
import org.primefaces.component.graphicimage.GraphicImage;
import org.primefaces.component.outputpanel.OutputPanel;
import org.primefaces.component.panel.Panel;
import org.primefaces.event.CloseEvent;
import org.primefaces.event.ToggleEvent;

public class PanelBean {

private CommandButton commandButton;
private OutputPanel panel;

public OutputPanel getPanel() {
return panel;
}

public void setPanel(OutputPanel panel) {
this.panel = panel;
}

public CommandButton getCommandButton() {
return commandButton;
}

public void setCommandButton(CommandButton commandButton) {
this.commandButton = commandButton;
}

public void handleClose(CloseEvent event) {
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,
"Panel Closed", "Closed panel id:'"
+ event.getComponent().getId() + "'");

addMessage(message);
}

public void handleToggle(ToggleEvent event) {
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,
event.getComponent().getId() + " toggled", "Status:"
+ event.getVisibility().name());

addMessage(message);
}

private void addMessage(FacesMessage message) {
FacesContext.getCurrentInstance().addMessage(null, message);
}

public void createInstance(ActionEvent evt) {
System.out.println(panel.getChildren().size());
String value = (String) ((CommandButton) evt.getComponent()).getImage();
GraphicImage cb = new GraphicImage();
Draggable drag = new Draggable();
String commandButtonId = cb.getId();
drag.setFor(commandButtonId);
drag.setDisabled(false);
cb.setValue(value);
System.out.println(panel.getChildren().size());
panel.getChildren().add(cb);
panel.getChildren().add(drag);
System.out.println(panel.getChildren().size());
}
}

-----------------------------

By using Create Instance i m adding draggable component to panel...I also added the resources with outputScript...but the component is not getting dragged

dynamic draggable component not working

Who is online