PDA

View Full Version : Composite cannot be dragged and dropped



poporogue
4 Jan 2011, 2:02 AM
I have created a simple composite widget called CurrentDateLabel which contains 2 Labels to print out the current date and format

I have set the drag source and drop target in entry point. for normal label, i can drag and drop without and problem. But for composite widget, it fails for any action.

What should i do to make the composite widget drag and drop just like others?



import java.util.Date;

import com.extjs.gxt.ui.client.widget.Composite;
import com.extjs.gxt.ui.client.widget.Label;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.google.gwt.i18n.client.DateTimeFormat;

public class CurrentDateLabel extends Composite {

private Label dateLabel;
private Label dateFormat;
private String format;

public Label getDateLabel() {
return dateLabel;
}

public void setDateLabel(Label dateLabel) {
this.dateLabel = dateLabel;
}

public Label getDateFormat() {
return dateFormat;
}

public void setDateFormat(Label dateFormat) {
this.dateFormat = dateFormat;
}

public String getFormat() {
if (format==null || format.length()==0) {
format = "dd/MM/yyyy";
}
return format;
}

public void setFormat(String format) {
this.format = format;
}

public CurrentDateLabel() {
LayoutContainer lc = new LayoutContainer();
createDateLabel();

lc.add(dateLabel);
lc.add(dateFormat);

initComponent(lc);
}

private Label createDateLabel(){

String format = getFormat();
Date now = new Date();
String formattedDate = DateTimeFormat.getFormat(format).format(now);

Label label = getDateLabel();
if (label == null) {
label = new Label();
}

label.setText(formattedDate);
setDateLabel(label);

Label dateFormat = new Label();
dateFormat.setText("("+format.toUpperCase()+")");
setDateFormat(dateFormat);

return label;
}


set the drag and drop



import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.dnd.DragSource;
import com.extjs.gxt.ui.client.dnd.DropTarget;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.DNDEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.fx.Draggable;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.util.Point;
import com.extjs.gxt.ui.client.widget.BoxComponent;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Label;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.layout.AbsoluteLayout;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class TestComposite extends LayoutContainer implements EntryPoint {

ContentPanel leftPanel = new ContentPanel();
LayoutContainer designContainer = new LayoutContainer();
ContentPanel panel = new ContentPanel();


@Override
public void onModuleLoad() {


panel.setLayout(new RowLayout(Orientation.HORIZONTAL));
panel.setSize(1000, 700);

RowData rowData = new RowData();
rowData.setMargins(new Margins(15, 5, 15, 5));

leftPanel.setSize(170, 674);
leftPanel.setHeaderVisible(false);
RowLayout rowLayout = new RowLayout(Orientation.VERTICAL);
leftPanel.setLayout(rowLayout);
leftPanel.addListener(Events.OnMouseDown, new Listener<ComponentEvent>(){

public void handleEvent(ComponentEvent be) {
be.preventDefault();
}
});


designContainer.setSize(600, 622);
designContainer.setLayout(new AbsoluteLayout());
designContainer.disableTextSelection(true);

Label label = new Label("New Label");
CurrentDateLabel currentDateLabel = new CurrentDateLabel();

setDragSorce(label);
setDragSorce(currentDateLabel);
setDropSource(designContainer);

leftPanel.add(label, rowData);
leftPanel.add(currentDateLabel, rowData);

panel.add(leftPanel);
panel.add(designContainer);

RootPanel.get().add(panel);



}

private void setDragSorce(final BoxComponent boxComponent) {
DragSource source = new DragSource(boxComponent) {
@Override
protected void onDragStart(DNDEvent event) {
event.setData(event.getComponent());
}
};
source.setGroup("design");
}

private void setDropSource(final LayoutContainer designLayout) {
DropTarget target = new DropTarget(designLayout) {
@Override
protected void onDragDrop(DNDEvent event) {

super.onDragDrop(event);

String className = event.getComponent().getClass().getName();
if (className!=null) {

BoxComponent boxComponent = new BoxComponent();

if (className.equals(Label.class.getName())) {
Label temp = new Label("New Label");
boxComponent = temp;

} else if (className.equals(CurrentDateLabel.class.getName())) {
CurrentDateLabel temp = new CurrentDateLabel();
boxComponent = temp;
}

designLayout.add(boxComponent);
Point pagePt = designLayout.getPosition(false);
boxComponent.setPosition(event.getClientX()-pagePt.x, event.getClientY()-pagePt.y);

Draggable draggable2 = new Draggable(boxComponent);
draggable2.setContainer(designLayout);
}
designLayout.layout();
}
};
target.setGroup("design");
}

Thanks

Renee

poporogue
5 Jan 2011, 1:28 AM
I have found what i have missed.

All i need to do is over ride the onRender in CurrentDateLabel and make the event sunk.



@Override
protected void onRender(Element target, int index) {
super.onRender(target, index);
el().addEventsSunk(Event.MOUSEEVENTS);
}