GWT native drag and drop: how to identify the dragged object - gwt

I followed the instructions given here: Drag and Drop in GWT 2.4
It works well, but I now want to select between many objects which to transfer. How can it be determined which object is dragged?
Thank you in advance!

I would do the following:
1) Create a map with objects allowed for dragging (Labels in your example)
HashMap <String, Label> draggableWidgetsMap = new HashMap<String, Label>();
draggableWidgetsMap.add("key1", widget1);
...
draggableWidgetsMap.add("keyN", widgetN);
2) Then apply the dragStart event handler for each widget, e.g. for widget1 it would be:
widget1.addDomHandler(new DragStartHandler() {
#Override
public void onDragStart(DragStartEvent event) {
event.setData("widgetKey", "key1");
}
}, DragStartEvent.getType());
3) And then you can check what widget is dragged now in DragOver event handler:
widget1.addDomHandler(new DragOverHandler() {
#Override
public void onDragOver(DragOverEvent event) {
String widgetKey = event.getDataTransfer().getData("widgetKey");
if (widgetKey != null && widgetKey.length() > 0){
if (draggableWidgetsMap.containsKey(widgetKey)){
// Print out Label's text to see which one is dragged
System.out.println("Dragged label has text: \" " + draggableWidgetsMap.get(widgetKey).getText() + "\"")
// do something relevant with this Label
}
}
}
}, DragOverEvent.getType());
Certainly, I would loop through all the widgets to apply both handlers for the widgets you are going to make draggable.

Related

GWT - How to retrieve real clicked widget?

I have onClick event on somePanel. And I click on it and it works. But.. How to retrieve real click target? When I click on panel which is inside od somePanel it show me that I click on somePanel..
I know we have this:
Element e = Element.as( event.getNativeEvent().getEventTarget());
But i returns element - I want widget..
How to do this?
This is an old question, but both answers are wrong. If you are using a GWT EventListener and want the widget that is the source of the event, then you simply use the event.getSource() method of the event and cast it to the original object type.
Unless there is something that I am missing in the question here.
I would use the feature in gwtquery to get the widget associated with a given element: https://code.google.com/p/gwtquery/wiki/GettingStarted#Manipulating_your_widgets
Widget = $(e).widget();
The problem is that the element clicked couldn't be the element associated with the widget but a child. In this case you could use gquery selectors to traverse the dom until you get its parent widget based on some css property.
// Most gwt widgets contains a class .gwt- but this could fail
// so use a more accurate selector than the one in this example
Widget = $(e).closest("[class*='.gwt-']")
If you wanted to do it by yourself, taking a look to the method getAssociatedWidget in GQuery gives you the solution:
EventListener listener = DOM.getEventListener(e);
// No listener attached to the element, so no widget exist for this element
if (listener == null) {
return null;
}
if (listener instanceof Widget) {
// GWT uses the widget as event listener
return (Widget) listener;
}
EDITED: here you have a working example:
import static com.google.gwt.query.client.GQuery.*;
// A panel with some widgets
Panel panel = new VerticalPanel();
final HTML widget1 = new HTML("<span>Foo</span> <span>Bar</span");
final HTML widget2 = new HTML("<span>Foo</span> <span>Bar</span");
final HTML widget3 = new HTML("<span>Foo</span> <span>Bar</span");
panel.add(widget1);
panel.add(widget2);
panel.add(widget3);
// we need to wrap our panel with a widget supporting click events
FocusPanel wrapper = new FocusPanel();
wrapper.add(panel);
RootPanel.get().add(wrapper);
wrapper.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// The element is not the HTML widget clicked but the span element
Element e = event.getNativeEvent().getEventTarget().cast();
// Using gquery to get the closest widget to the clicked element
// We take advanrage of HTML widgets having gwt-HTML class
Widget w = $(e).closest(".gwt-HTML").widget();
if (w == widget1) {
Window.alert("Clicked on widget 1");
} else if (w == widget2) {
Window.alert("Clicked on widget 2");
} else if (w == widget3) {
Window.alert("Clicked on widget 3");
} else {
Window.alert("Clicked on a non GWT HTML widget");
}
}
});
An alternative approach, if you already know all of the widgets that you want to check against, would be to use the DOM.isOrHasChild(Element) or Element.isOrHasChild(Node).
For example:
public void onClick(ClickEvent event) {
Element targetElem = Element.as(event.getNativeEvent().getEventTarget());
Widget targetWidget = null;
if (widgetA.getElement().isOrHasChild(targetElem) {
targetWidget = widgetA;
}
else if (widgetB.getElement().isOrHasChild(targetElem) {
targetWidget = widgetA;
}
.....
if (targetWidget != null) {
// You found you widget - Yay!
}
else {
// No widget found - Bummer!
}
}
This approach only works if you know the widgets you are testing against up front. The benefit is that you now have an particular widget reference rather then a generic reference to 'some' widget that you might have to do additional checks against.
For example, you could have done the following if widgetA was a subclass of TextBox called MySpecialTextBox:
MySpecialTextBox widgetA;
if (widgetA.getElement().isOrHasChild(targetElem) {
widgetA.someSpecialMethod();
}

In Gwt Drag and Drop, how to drop a widget into a right position of a VerticalPanel that already has many labels on it?

Ok, let say, you got a label, you got a VerticalPanel that has many labels on it. See this code:
// Make the widget draggable.
Label w = new Label("OutSide Label");
w.getElement().setDraggable(Element.DRAGGABLE_TRUE);
// Add a DragStartHandler.
w.addDragStartHandler(new DragStartHandler() {
#Override
public void onDragStart(DragStartEvent event) {
// Required: set data for the event.
event.setData("text", "Hello World");
// Optional: show a copy of the widget under cursor.
event.getDataTransfer().setDragImage(w.getElement(), 10, 10);
}
});
VerticalPanel vp=nw VerticalPanel();
vp.add(new Label("l1");
vp.add(new Label("l2");
vp.add(new Label("l3");
vp.addDomHandler(new DragOverHandler() {
public void onDragOver(DragOverEvent event) {
vp.getElement().getStyle().setBackgroundColor("#ffa");
}
}, com.google.gwt.event.dom.client.DragOverEvent.getType());
vp.addDomHandler(new DropHandler() {
#Override
public void onDrop(com.google.gwt.event.dom.client.DropEvent event) {
// TODO Auto-generated method stub
event.preventDefault();
// Get the data out of the event.
String data = event.getData("text");
//Window.alert(data);
/// WE NEED TO FILL IN THE MISSING CODE HERE
/// WE NEED TO FILL IN THE MISSING CODE HERE
}
}, DropEvent.getType());
how to code so that when user drag the outside label into the area of VerticalPanel, if the outside label was dragged between the existing widgets, it will be inserted into the between of existing labels on VerticalPanel, Ex if the outside label was drag between "l1" & "l2", the vp will show:
l1
OutSide Label
l2
l3
Something like the following should theoretically work, although not tested:
p.addDomHandler(new DropHandler() {
#Override
public void onDrop(DropEvent event) {
// Get the target event.
EventTarget eventTarget = event.getNativeEvent().getEventTarget();
// Safe check for casting to Element.
if (Element.is(eventTarget)) {
Element elementTarget = Element.as(eventTarget);
// Loop through VerticalPanel's children to find our target.
for (int i = 0; i < p.getWidgetCount(); ++i) {
if (p.getWidget(i).getElement().isOrHasChild(elementTarget)) {
// Insert a new Label with the DataTransfer's data,
// and remove the old one.
p.insert(new Label(event.getData("text")), i);
oldLabelContainer.remove(oldLabel);
break;
}
}
}
}
}, DropEvent.getType());
Of course, if you have a lot of labels that loop should be avoided.

CellTree "Show More" programmatically

does anyone know how to trigger the "Show More" functionality of a GWT CellTree programmatically, without having to click on the Show More button?
My aim is to implement a kind of pager that increments the number of elements displayed when the user scrolls down a ScollPanel, so it would be something like:
//inside pager class
onScroll(ScrollEvent)
{
//here I would call CellTree's show more
}
I've been looking the CellTree and CellTreeNodeView classes code but I couldn't find a clear way to do it.
I know the class CellTreeNodeView has a showMore function which is the one who performs this action, but I don't know how to get it called from another class. I'd need a CellTreeNodeView object, and dont' know how to get it.
Thanks!
It is a package protected method in a package protected class CellTreeNodeView i.e only code in com.google.gwt.user.cellview.client can invoke it.
void showMore()
Extremely hacky solution
1) The only way around it is . Copy CellTreeNodeView and CellTree into your code base (maintain the package )
2) Change the accessors to public to allow you to invoke showMore as per your requirement.
3) Ensure you test for all possible flows.
4) Ensure the copied classes in your code base appear in a higher classpath hieararchy to GWT Compiler than gwt-user jar thus ensuring your modified classes get picked up rather than original ones.
Finally I got it working exactly as I wanted, and without having to copy the code from the protected original GWT.
The point was firing the same event as the "Show more" button, so I created a fake onMouseDown event, and triggered it with the show more button as the target:
final ScrollPanel sp = new ScrollPanel();
sp.addScrollHandler(new ScrollHandler() {
#Override
public void onScroll(ScrollEvent event)
{
int maxScrollBottom = sp.getWidget().getOffsetHeight()
- sp.getOffsetHeight();
if (sp.getVerticalScrollPosition() >= maxScrollBottom) {
NativeEvent clickEvent = Document.get().createMouseDownEvent(0,0,0,0,0,false,false,false,false,0);
Element target = (Element) cellTree.getCellTree().getElement().getLastChild().getFirstChild().getLastChild();
target.dispatchEvent(clickEvent);
}
}
});
Thank you a lot, anyway! :D
My workaround is this one:
public static void makeShowMoreVisible(Element element, boolean isVisible) {
ArrayList<Element> result = new ArrayList<Element>();
findShowMore(result, element);
for (Element elt : result) {
if (isVisible) {
element.getStyle().clearDisplay();
} else {
element.getStyle().setDisplay(Display.NONE);
}
}
}
private static void findShowMore(ArrayList res, Element element) {
String c;
if (element == null) {
return;
}
if (element.getInnerText().equals("Show more")) {
res.add(element);
}
for (int i = 0; i < DOM.getChildCount(element); i++) {
Element child = DOM.getChild(element, i);
findShowMore(res, child);
}
}

Handling click events from CellTable, how to handle them back to default dispatcher?

I have a CellTable with one custom column where I render it manually and put a FlowPanel with a bunch of HTMLPanel/Anchor/FlowPanel widgets, and among them is DecoratorPanel.
DecoratorPanel renders as a table, of course.
Rendering happens like this:
public class MyExpandableCell extends AbstractCell<String> {
...
#Override
public void render(com.google.gwt.cell.client.Cell.Context context, String value, SafeHtmlBuilder sb) {
if (value != null) {
FlowPanel fp = createDetailsFlowPanel(value);
sb.appendHtmlConstant(fp.getElement().getString());
}
}
Now, I have added a handler for click events to my main CellTable. In my handler I traverse the tree to find a first TR belonging to my CellTable, by checking if it contains "even row" or "odd row" CSS classes.
However, when click happens inside of the DecoratorPanel (which is inside of my cell table's TD), my handler also gets triggered, since the click belongs to the cell table area.
I can detect this my seeing that parent TR does not have CellTable CSS classes.
QUESTION: how can I return processing of such click events to the DecoratorPanel - where it really belongs to? As it is now, my DecoratorPanel does not expand and I think because my click handler intercepts and suppresses all clicks on the CellTable level.
table = setupMyCellTable(PAGE_SIZE, CLIENT_BUNDLE, myCellTableResources);
mydataprovider.addDataDisplay(table);
table.sinkEvents(Event.ONCLICK);
table.addDomHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent e) {
boolean isClick = "click".equals(e.getNativeEvent().getType());
if (isClick) {
Element originalElement = e.getNativeEvent().getEventTarget().cast();
Element element = originalElement;
String ctTrClassEven = CLIENT_BUNDLE.mainCss().cellTableEvenRow();
String ctTrClassEven = CLIENT_BUNDLE.mainCss().cellTableOddRow();
// Looking for closest parent TR which has one
// of the two row class names (for this cellTable):
while (element != null
&& !"tr".equalsIgnoreCase(element.getTagName())
&& !(element.getClassName().contains(ctTrClassEven) ||
element.getClassName().contains(ctTrClassEven))) {
element = element.getParentElement();
}
if (element != null) {
if (element.getClassName().contains(ctTrClassEven)
|| element.getClassName().contains(ctTrClassEven)) {
// Found cell table's TR. Set new TR height.
} else {
// Found TR from DecoratorPanel inside of the celltable's cell.
// Do nothing. But how do I make sure
// that decorator panel processes this click and expands?
return;
// Did not work: NS_ERROR_ILLEGAL_VALUE javascript exception.
// if (originalElement != null) {
// originalElement.dispatchEvent(e.getNativeEvent());
// }
}
} else {
debugStr.setText("(did not find tr)");
}
}
}
}, ClickEvent.getType());
Looks like a bug in GWT, triggered because decorator panel uses table to render itself:
http://code.google.com/p/google-web-toolkit/issues/detail?id=5714
(another example http://code.google.com/p/google-web-toolkit/issues/detail?id=6750)
Fix is expected to be shipped with GWT 2.5.

Ext GWT (GXT) tooltip over a grid row

I'm developing a custom tooltip using Ext GWT (GXT) for a project of mine, and this tooltip has to appear over Grid rows when they're selected.
I can't use the default GXT tooltip or quicktip because I need be able to add Components (like buttons) to this tooltip.
The problem is that the GXT Grid component doesn't expose a event related to mousing over a row (although there's RowClick and RowMouseDown).
I tried adding a listener to the Grid with the OnMouseOver and OnMouseOut events anyway, but it doesn't work as expected. It fires these events up whenever
you mouse over any of the divs and spans that composes a row.
The only way I see to solve this is to subclass the GridView component and make each row become a Component itself,
but that would be a lot of work and would probably impact performance as well. I can't help but think there's a better way to do this.
Could someone more experienced with GXT give me a light?
try this
QuickTip quickTip = new QuickTip(grid);
grid.addListener(Events.OnMouseOver, new Listener<GridEvent<BeanModel>>(){
#Override
public void handleEvent(GridEvent<BeanModel> ge) {
com.google.gwt.dom.client.Element el= grid.getView().getCell(ge.getRowIndex(),ge.getColIndex());
String html = "<span qtip='" + el.getFirstChildElement().getInnerText() + "'>" + el.getFirstChildElement().getInnerText() + "</span>";
el.getFirstChildElement().setInnerHTML(html);
}
});
onComponentEvent() (defined in com.extjs.gxt.ui.client.widget.Component with an empty body and overridden in com.extjs.gxt.ui.client.widget.grid.Grid) also receives Events with type Event.ONMOUSEOVER and Event.ONMOUSEOUT
The default implementation in the Grid class doesn't handle those events, so you may want to override this function in a subclass.
Additionally, at the end of onComponentEvent(), the Grid calls the function handleComponentEvent() of the GridView.
I found 2 ways to do that:
1.For specific column of the grid describe renderer, e.g.:
{
width: 200,
dataIndex : 'invoice',
renderer:addTooltip
}
And your renderer function:
function addTooltip(value, metadata){
metadata.attr = 'ext:qtip="' + value + '"';
return value;
}
But this method will work only when your mouse pointer will be above that specific column.
2.For 'render' event of the grid apply/use this function:
var myGrid = grid;
myGrid.on('render', function() {
myGrid.tip = new Ext.ToolTip({
view: myGrid.getView(),
target: myGrid.getView().mainBody,
delegate: '.x-grid3-row',
trackMouse: true,
renderTo: document.body,
listeners: {
beforeshow: function updateTipBody(tip) {
tip.body.dom.innerHTML = "Over row " + tip.view.findRowIndex(tip.triggerElement);
}
}
});
});
I hope this will be helpful to you :)
I know this is old but there's no accepted answer and I think I found a better way:
grid.addListener(Events.OnMouseOver, new Listener<GridEvent<Model>>() {
#Override
public void handleEvent(GridEvent<Model> ge) {
if (grid.getToolTip() != null) {
grid.getToolTip().hide();
}
ModelData model = ge.getModel();
if (model != null) {
Object someValue = model.get("someProperty");
String label = someValue.toString();
grid.setToolTip(label);
}
if (grid.getToolTip() != null) {
grid.getToolTip().show();
}
}
});
I am using GWT 2.6 and GXT 3.1.0 and I managed to do this in this way ....
Here the class RowSet is analogous to a Map
GridView<RowSet> view = new GridView<RowSet>() {
private Element cell;
#Override
protected void handleComponentEvent(Event event) {
switch (event.getTypeInt()) {
case Event.ONMOUSEMOVE:
cell = Element.is(event.getEventTarget()) ? findCell((Element) event.getEventTarget().cast())
: null;
break;
}
super.handleComponentEvent(event);
}
#Override
protected void onRowOut(Element row) {
grid.hideToolTip();
grid.setToolTipConfig(null);
super.onRowOut(row);
}
#Override
protected void onRowOver(final Element row) {
super.onRowOver(row);
grid.hideToolTip();
grid.setToolTipConfig(null);
ToolTipConfig config = new ToolTipConfig();
int rowIndex = grid.getView().findRowIndex(row);
// Through "rowIndex" you can get the Row like this :
// grid.getStore().get(rowIndex)
config.setBodyHtml("Your tool tip text here");
config.setTitleHtml("Tool Tip Title");
config.setCloseable(true);
grid.setToolTipConfig(config);
int absoluteRight = (cell != null) ? cell.getAbsoluteRight() : row.getAbsoluteRight();
int absoluteTop = (cell != null) ? cell.getAbsoluteTop() : row.getAbsoluteTop();
Point point = new Point(absoluteRight, absoluteTop);
grid.getToolTip().showAt(point);
}
};
view.setAutoFill(true);
grid.setView(view);