svn changeset:11353/svn branch:6.3_ddtags/6.7.0.beta1
padding: 2px; | padding: 2px; | ||||
} | } | ||||
/* TODO jouni: replace debug colors */ | |||||
.v-drag-element { | .v-drag-element { | ||||
z-index:60000; | z-index:60000; | ||||
position:absolute; | position:absolute; | ||||
border: 1px solid #999; | border: 1px solid #999; | ||||
} | } | ||||
.v-ddwrapper { | .v-ddwrapper { | ||||
background-color: cyan; | background-color: cyan; | ||||
} | } | ||||
.v-ddwrapper-over-middle, | |||||
.v-ddwrapper-over-center { | .v-ddwrapper-over-center { | ||||
background-color: LightGreen; | background-color: LightGreen; | ||||
} | } | ||||
.v-ddwrapper-over-bottom { | .v-ddwrapper-over-bottom { | ||||
border-bottom: 2px solid green; | border-bottom: 2px solid green; | ||||
} | } | ||||
.v-ddwrapper-over-left { | |||||
border-left: 2px solid green; | |||||
} | |||||
.v-ddwrapper-over-right { | |||||
border-right: 2px solid green; | |||||
} |
.v-theme-version:after {content:"6_3_0_dev-20100216";} | |||||
.v-theme-version-6_3_0_dev-20100216 {display: none;} | |||||
.v-theme-version:after {content:"6_3_0_dev-20100217";} | |||||
.v-theme-version-6_3_0_dev-20100217 {display: none;} | |||||
/* Automatically compiled css file from subdirectories. */ | /* Automatically compiled css file from subdirectories. */ | ||||
.v-absolutelayout-wrapper { | .v-absolutelayout-wrapper { | ||||
padding: 2px; | padding: 2px; | ||||
} | } | ||||
/* TODO jouni: replace debug colors */ | |||||
.v-drag-element { | .v-drag-element { | ||||
z-index:60000; | z-index:60000; | ||||
position:absolute; | position:absolute; | ||||
border: 1px solid #999; | border: 1px solid #999; | ||||
} | } | ||||
.v-ddwrapper { | .v-ddwrapper { | ||||
background-color: cyan; | background-color: cyan; | ||||
} | } | ||||
.v-ddwrapper-over-middle, | |||||
.v-ddwrapper-over-center { | .v-ddwrapper-over-center { | ||||
background-color: LightGreen; | background-color: LightGreen; | ||||
} | } | ||||
.v-ddwrapper-over-bottom { | .v-ddwrapper-over-bottom { | ||||
border-bottom: 2px solid green; | border-bottom: 2px solid green; | ||||
} | } | ||||
.v-ddwrapper-over-left { | |||||
border-left: 2px solid green; | |||||
} | |||||
.v-ddwrapper-over-right { | |||||
border-right: 2px solid green; | |||||
} | |||||
.v-csslayout { | .v-csslayout { | ||||
overflow: hidden; | overflow: hidden; |
.v-theme-version:after {content:"6_3_0_dev-20100216";} | |||||
.v-theme-version-6_3_0_dev-20100216 {display: none;} | |||||
.v-theme-version:after {content:"6_3_0_dev-20100217";} | |||||
.v-theme-version-6_3_0_dev-20100217 {display: none;} | |||||
/* Automatically compiled css file from subdirectories. */ | /* Automatically compiled css file from subdirectories. */ | ||||
.v-absolutelayout-wrapper { | .v-absolutelayout-wrapper { | ||||
padding: 2px; | padding: 2px; | ||||
} | } | ||||
/* TODO jouni: replace debug colors */ | |||||
.v-drag-element { | .v-drag-element { | ||||
z-index:60000; | z-index:60000; | ||||
position:absolute; | position:absolute; | ||||
border: 1px solid #999; | border: 1px solid #999; | ||||
} | } | ||||
.v-ddwrapper { | .v-ddwrapper { | ||||
background-color: cyan; | background-color: cyan; | ||||
} | } | ||||
.v-ddwrapper-over-middle, | |||||
.v-ddwrapper-over-center { | .v-ddwrapper-over-center { | ||||
background-color: LightGreen; | background-color: LightGreen; | ||||
} | } | ||||
.v-ddwrapper-over-bottom { | .v-ddwrapper-over-bottom { | ||||
border-bottom: 2px solid green; | border-bottom: 2px solid green; | ||||
} | } | ||||
.v-ddwrapper-over-left { | |||||
border-left: 2px solid green; | |||||
} | |||||
.v-ddwrapper-over-right { | |||||
border-right: 2px solid green; | |||||
} | |||||
.v-csslayout { | .v-csslayout { | ||||
overflow: hidden; | overflow: hidden; |
.v-theme-version:after {content:"6_3_0_dev-20100216";} | |||||
.v-theme-version-6_3_0_dev-20100216 {display: none;} | |||||
.v-theme-version:after {content:"6_3_0_dev-20100217";} | |||||
.v-theme-version-6_3_0_dev-20100217 {display: none;} | |||||
/* Automatically compiled css file from subdirectories. */ | /* Automatically compiled css file from subdirectories. */ | ||||
.v-absolutelayout-wrapper { | .v-absolutelayout-wrapper { | ||||
padding: 2px; | padding: 2px; | ||||
} | } | ||||
/* TODO jouni: replace debug colors */ | |||||
.v-drag-element { | .v-drag-element { | ||||
z-index:60000; | z-index:60000; | ||||
position:absolute; | position:absolute; | ||||
border: 1px solid #999; | border: 1px solid #999; | ||||
} | } | ||||
.v-ddwrapper { | .v-ddwrapper { | ||||
background-color: cyan; | background-color: cyan; | ||||
} | } | ||||
.v-ddwrapper-over-middle, | |||||
.v-ddwrapper-over-center { | .v-ddwrapper-over-center { | ||||
background-color: LightGreen; | background-color: LightGreen; | ||||
} | } | ||||
.v-ddwrapper-over-bottom { | .v-ddwrapper-over-bottom { | ||||
border-bottom: 2px solid green; | border-bottom: 2px solid green; | ||||
} | } | ||||
.v-ddwrapper-over-left { | |||||
border-left: 2px solid green; | |||||
} | |||||
.v-ddwrapper-over-right { | |||||
border-right: 2px solid green; | |||||
} | |||||
.v-csslayout { | .v-csslayout { | ||||
overflow: hidden; | overflow: hidden; |
import com.vaadin.terminal.gwt.client.ApplicationConnection; | import com.vaadin.terminal.gwt.client.ApplicationConnection; | ||||
import com.vaadin.terminal.gwt.client.Paintable; | import com.vaadin.terminal.gwt.client.Paintable; | ||||
import com.vaadin.terminal.gwt.client.UIDL; | import com.vaadin.terminal.gwt.client.UIDL; | ||||
import com.vaadin.terminal.gwt.client.ui.dd.HorizontalDropLocation; | |||||
import com.vaadin.terminal.gwt.client.ui.dd.VAbstractDropHandler; | import com.vaadin.terminal.gwt.client.ui.dd.VAbstractDropHandler; | ||||
import com.vaadin.terminal.gwt.client.ui.dd.VAcceptCallback; | import com.vaadin.terminal.gwt.client.ui.dd.VAcceptCallback; | ||||
import com.vaadin.terminal.gwt.client.ui.dd.VDragAndDropManager; | import com.vaadin.terminal.gwt.client.ui.dd.VDragAndDropManager; | ||||
private static final String OVER_STYLE = "v-ddwrapper-over"; | private static final String OVER_STYLE = "v-ddwrapper-over"; | ||||
private VerticalDropLocation verticalDropLocation; | private VerticalDropLocation verticalDropLocation; | ||||
private HorizontalDropLocation horizontalDropLocation; | |||||
@Override | @Override | ||||
public void dragEnter(VDragEvent drag) { | public void dragEnter(VDragEvent drag) { | ||||
dd.put("absoluteTop", absoluteTop); | dd.put("absoluteTop", absoluteTop); | ||||
dd.put("verticalLocation", verticalDropLocation.toString()); | dd.put("verticalLocation", verticalDropLocation.toString()); | ||||
dd.put("horizontalLocation", horizontalDropLocation.toString()); | |||||
return super.drop(drag); | return super.drop(drag); | ||||
} | } | ||||
false); | false); | ||||
VDragAndDropWrapper.setStyleName(getElement(), OVER_STYLE + "-" | VDragAndDropWrapper.setStyleName(getElement(), OVER_STYLE + "-" | ||||
+ verticalDropLocation.toString().toLowerCase(), false); | + verticalDropLocation.toString().toLowerCase(), false); | ||||
VDragAndDropWrapper.setStyleName(getElement(), OVER_STYLE + "-" | |||||
+ horizontalDropLocation.toString().toLowerCase(), | |||||
false); | |||||
} | } | ||||
} | } | ||||
deEmphasis(); | deEmphasis(); | ||||
verticalDropLocation = VerticalDropLocation.get(getElement(), drag | verticalDropLocation = VerticalDropLocation.get(getElement(), drag | ||||
.getCurrentGwtEvent().getClientY(), 0.2); | .getCurrentGwtEvent().getClientY(), 0.2); | ||||
// TODO add more detailed stylenames depending on which part of | |||||
// wrapper the drag currently is (vertical done, needs horizontal) | |||||
horizontalDropLocation = HorizontalDropLocation.get(getElement(), | |||||
drag.getCurrentGwtEvent().getClientX(), 0.2); | |||||
VDragAndDropWrapper.setStyleName(getElement(), OVER_STYLE, true); | VDragAndDropWrapper.setStyleName(getElement(), OVER_STYLE, true); | ||||
VDragAndDropWrapper.setStyleName(getElement(), OVER_STYLE + "-" | VDragAndDropWrapper.setStyleName(getElement(), OVER_STYLE + "-" | ||||
+ verticalDropLocation.toString().toLowerCase(), true); | + verticalDropLocation.toString().toLowerCase(), true); | ||||
VDragAndDropWrapper.setStyleName(getElement(), OVER_STYLE + "-" | |||||
+ horizontalDropLocation.toString().toLowerCase(), true); | |||||
// TODO build (to be an example) an emphasis mode where drag image | // TODO build (to be an example) an emphasis mode where drag image | ||||
// is fitted before or after the content | // is fitted before or after the content |
Boolean overTreeNode = null; | Boolean overTreeNode = null; | ||||
TreeNode treeNode = keyToNode.get(currentMouseOverKey); | TreeNode treeNode = keyToNode.get(currentMouseOverKey); | ||||
if (treeNode != null && !treeNode.isLeaf() | if (treeNode != null && !treeNode.isLeaf() | ||||
&& "Center".equals(detail)) { | |||||
&& "MIDDLE".equals(detail)) { | |||||
overTreeNode = true; | overTreeNode = true; | ||||
} | } | ||||
drag.getDropDetails().put("itemIdOverIsNode", overTreeNode); | drag.getDropDetails().put("itemIdOverIsNode", overTreeNode); | ||||
public void emphasis(String string) { | public void emphasis(String string) { | ||||
String base = "v-tree-node-drag-"; | String base = "v-tree-node-drag-"; | ||||
UIObject.setStyleName(getElement(), base + "top", "Top" | |||||
UIObject.setStyleName(getElement(), base + "top", "TOP" | |||||
.equals(string)); | .equals(string)); | ||||
UIObject.setStyleName(getElement(), base + "bottom", "Bottom" | |||||
UIObject.setStyleName(getElement(), base + "bottom", "BOTTOM" | |||||
.equals(string)); | .equals(string)); | ||||
UIObject.setStyleName(getElement(), base + "center", "Center" | |||||
UIObject.setStyleName(getElement(), base + "center", "MIDDLE" | |||||
.equals(string)); | .equals(string)); | ||||
base = "v-tree-node-caption-drag-"; | base = "v-tree-node-caption-drag-"; | ||||
UIObject.setStyleName(nodeCaptionDiv, base + "top", "Top" | |||||
UIObject.setStyleName(nodeCaptionDiv, base + "top", "TOP" | |||||
.equals(string)); | .equals(string)); | ||||
UIObject.setStyleName(nodeCaptionDiv, base + "bottom", "Bottom" | |||||
UIObject.setStyleName(nodeCaptionDiv, base + "bottom", "BOTTOM" | |||||
.equals(string)); | .equals(string)); | ||||
UIObject.setStyleName(nodeCaptionDiv, base + "center", "Center" | |||||
UIObject.setStyleName(nodeCaptionDiv, base + "center", "MIDDLE" | |||||
.equals(string)); | .equals(string)); | ||||
} | } | ||||
mouseDownEvent = null; | mouseDownEvent = null; | ||||
} | } | ||||
if (type == Event.ONMOUSEOVER) { | if (type == Event.ONMOUSEOVER) { | ||||
ApplicationConnection.getConsole().log( | |||||
"Treenode mouse over"); | |||||
mouseDownEvent = null; | mouseDownEvent = null; | ||||
currentMouseOverKey = key; | currentMouseOverKey = key; | ||||
event.stopPropagation(); | event.stopPropagation(); |
package com.vaadin.terminal.gwt.client.ui.dd; | |||||
import com.google.gwt.user.client.Element; | |||||
public enum HorizontalDropLocation { | |||||
LEFT, RIGHT, CENTER; | |||||
public static HorizontalDropLocation get(Element element, int clientX, | |||||
double leftRightRatio) { | |||||
int absoluteLeft = element.getAbsoluteLeft(); | |||||
int offsetWidth = element.getOffsetWidth(); | |||||
int fromTop = clientX - absoluteLeft; | |||||
float percentageFromTop = (fromTop / (float) offsetWidth); | |||||
if (percentageFromTop < leftRightRatio) { | |||||
return LEFT; | |||||
} else if (percentageFromTop > 1 - leftRightRatio) { | |||||
return RIGHT; | |||||
} else { | |||||
return CENTER; | |||||
} | |||||
} | |||||
} |
import com.google.gwt.user.client.Element; | import com.google.gwt.user.client.Element; | ||||
public enum VerticalDropLocation { | public enum VerticalDropLocation { | ||||
Top, Bottom, Center; | |||||
TOP, BOTTOM, MIDDLE; | |||||
public static VerticalDropLocation get(Element element, int clientY, | public static VerticalDropLocation get(Element element, int clientY, | ||||
double topBottomRatio) { | double topBottomRatio) { | ||||
float percentageFromTop = (fromTop / (float) offsetHeight); | float percentageFromTop = (fromTop / (float) offsetHeight); | ||||
if (percentageFromTop < topBottomRatio) { | if (percentageFromTop < topBottomRatio) { | ||||
return Top; | |||||
return TOP; | |||||
} else if (percentageFromTop > 1 - topBottomRatio) { | } else if (percentageFromTop > 1 - topBottomRatio) { | ||||
return Bottom; | |||||
return BOTTOM; | |||||
} else { | } else { | ||||
return Center; | |||||
return MIDDLE; | |||||
} | } | ||||
} | } | ||||
} | } |
public Location getDropLocation() { | public Location getDropLocation() { | ||||
String s = (String) getData("detail"); | String s = (String) getData("detail"); | ||||
if ("Top".equals(s)) { | |||||
if ("TOP".equals(s)) { | |||||
return Location.TOP; | return Location.TOP; | ||||
} else if ("Bottom".equals(s)) { | |||||
} else if ("BOTTOM".equals(s)) { | |||||
return Location.BOTTOM; | return Location.BOTTOM; | ||||
} else { | } else { | ||||
return Location.MIDDLE; | return Location.MIDDLE; |
public Location getDropLocation() { | public Location getDropLocation() { | ||||
String s = (String) getData("detail"); | String s = (String) getData("detail"); | ||||
if ("Top".equals(s)) { | |||||
if ("TOP".equals(s)) { | |||||
return Location.TOP; | return Location.TOP; | ||||
} else if ("Bottom".equals(s)) { | |||||
} else if ("BOTTOM".equals(s)) { | |||||
return Location.BOTTOM; | return Location.BOTTOM; | ||||
} else { | } else { | ||||
return Location.MIDDLE; | return Location.MIDDLE; |
protected void setup() { | protected void setup() { | ||||
Window w = getLayout().getWindow(); | Window w = getLayout().getWindow(); | ||||
VerticalSortableCssLayoutWithWrappers verticalSortableCssLayoutWithWrappers = new VerticalSortableCssLayoutWithWrappers(); | |||||
w.addWindow(verticalSortableCssLayoutWithWrappers); | |||||
verticalSortableCssLayoutWithWrappers.setPositionX(200); | |||||
verticalSortableCssLayoutWithWrappers.setPositionY(40); /* | |||||
* FIXME: | |||||
* subwindow | |||||
* horizontal | |||||
* position does | |||||
* not work if | |||||
* only x set | |||||
*/ | |||||
Label l; | Label l; | ||||
l = new Label("Drag me"); | l = new Label("Drag me"); | ||||
cssLayout.setHeight("300px"); | cssLayout.setHeight("300px"); | ||||
dragAndDropWrapper2 = new DragAndDropWrapper(cssLayout); | dragAndDropWrapper2 = new DragAndDropWrapper(cssLayout); | ||||
dragAndDropWrapper2.setCaption("Drop here"); | |||||
dragAndDropWrapper2 | |||||
.setCaption("Drop here or sort with dd (wrapper(csslayout(n*wrapper(label))))"); | |||||
dh = new DropHandler() { | dh = new DropHandler() { | ||||
wrappedLabel = (WrappedLabel) sourceComponent; | wrappedLabel = (WrappedLabel) sourceComponent; | ||||
} | } | ||||
if (dropEvent.getDropTargetData().getData( | if (dropEvent.getDropTargetData().getData( | ||||
"verticalLocation").equals("Top")) { | |||||
"verticalLocation").equals("TOP")) { | |||||
// before reference if dropped on topmost part | // before reference if dropped on topmost part | ||||
i--; | i--; | ||||
if (i < 0) { | if (i < 0) { | ||||
@Override | @Override | ||||
protected String getDescription() { | protected String getDescription() { | ||||
return "dd"; | |||||
return "dd: DragAndDropWrapper to build various use cases completely on server side"; | |||||
} | } | ||||
@Override | @Override |
package com.vaadin.tests.dd; | |||||
import java.util.Iterator; | |||||
import com.vaadin.event.ComponentTransferable; | |||||
import com.vaadin.event.Transferable; | |||||
import com.vaadin.event.dd.DropEvent; | |||||
import com.vaadin.event.dd.DropHandler; | |||||
import com.vaadin.event.dd.DropTarget; | |||||
import com.vaadin.event.dd.TargetDetails; | |||||
import com.vaadin.event.dd.acceptCriteria.AcceptAll; | |||||
import com.vaadin.event.dd.acceptCriteria.AcceptCriterion; | |||||
import com.vaadin.ui.Component; | |||||
import com.vaadin.ui.CssLayout; | |||||
import com.vaadin.ui.DragAndDropWrapper; | |||||
import com.vaadin.ui.Label; | |||||
import com.vaadin.ui.Window; | |||||
public class VerticalSortableCssLayoutWithWrappers extends Window { | |||||
static int count; | |||||
private CssLayout cssLayout = new CssLayout() { | |||||
@Override | |||||
protected String getCss(Component c) { | |||||
return "float:left; width:60px;height:60px;background: yellow;padding:2px;"; | |||||
}; | |||||
}; | |||||
class WrappedLabel extends DragAndDropWrapper { | |||||
private static final long serialVersionUID = 1L; | |||||
public WrappedLabel(String content) { | |||||
super(new Label(content + " c:" + ++count)); | |||||
setSizeUndefined(); // via css | |||||
setHeight("60px"); // FIXME custom component seems to be broken: | |||||
// can't set height with css only | |||||
setDragStartMode(DragStartMode.WRAPPER); | |||||
} | |||||
@Override | |||||
public DropHandler getDropHandler() { | |||||
return dh; | |||||
} | |||||
} | |||||
private DropHandler dh = new DropHandler() { | |||||
public AcceptCriterion getAcceptCriterion() { | |||||
return AcceptAll.get(); | |||||
} | |||||
public void drop(DropEvent dropEvent) { | |||||
Transferable transferable = dropEvent.getTransferable(); | |||||
if (transferable instanceof ComponentTransferable) { | |||||
ComponentTransferable ct = (ComponentTransferable) transferable; | |||||
Component sourceComponent = ct.getSourceComponent(); | |||||
if (sourceComponent instanceof WrappedLabel) { | |||||
int index = 1; | |||||
Iterator<Component> componentIterator = cssLayout | |||||
.getComponentIterator(); | |||||
Component next = componentIterator.next(); | |||||
TargetDetails dropTargetData = dropEvent | |||||
.getDropTargetData(); | |||||
DropTarget target = dropTargetData.getTarget(); | |||||
while (next != target) { | |||||
if (next != sourceComponent) { | |||||
index++; | |||||
} | |||||
next = componentIterator.next(); | |||||
} | |||||
if (dropTargetData.getData("horizontalLocation").equals( | |||||
"LEFT")) { | |||||
index--; | |||||
if (index < 0) { | |||||
index = 0; | |||||
} | |||||
} | |||||
cssLayout.removeComponent(sourceComponent); | |||||
cssLayout.addComponent(sourceComponent, index); | |||||
} | |||||
} | |||||
// TODO Auto-generated method stub | |||||
} | |||||
}; | |||||
public VerticalSortableCssLayoutWithWrappers() { | |||||
setCaption("Horizontally sortable csslayout via (ddwrappers):Try sorting block by draggin them"); | |||||
DragAndDropWrapper pane = new DragAndDropWrapper(cssLayout); | |||||
setContent(pane); | |||||
pane.setSizeFull(); | |||||
setWidth("400px"); | |||||
setHeight("100px"); | |||||
for (int i = 0; i < 4; i++) { | |||||
cssLayout.addComponent(new WrappedLabel("Block")); | |||||
} | |||||
} | |||||
} |