GWT FlexTable - 拖动选择如何？

Question

我想获得适当的方法对天在flextable的专栏中选择多个单元格。

到目前为止，我只设法与行之有效点击做到这一点，但一拖选择会好得多。我一直在阅读文档和搜索，但我发现的所有内容都基于不推荐使用的代码。我使用GWT 2.0。

我知道我需要时，拖动鼠标选择手势发生这将运行一些事件处理程序，该处理程序需要知道小区的索引，其中，选择起点和过程的细胞的指数，其中选择结束。

任何意见||代码将不胜感激。

Answer 1

这需要改进，但它应该给你的基本理念。首先，您需要创建一个侦听MouseEvent的CustomTable。您可以通过扩展复合包装一个focuspanel和flextable这样做：

public class CustomTable extends Composite implements MouseDownHandler, MouseMoveHandler, MouseUpHandler{ 

List<CellWidget> widgets = new ArrayList<CellWidget>(); 
FlexTable table = new FlexTable(); 
FocusPanel focusPanel = new FocusPanel(); 
boolean selecting= false; 
Point selectStart,selectEnd;  

public CustomTable(){ 
    focusPanel.setWidget(table); 
    focusPanel.addMouseDownHandler(this); 
    focusPanel.addMouseMoveHandler(this); 
    focusPanel.addMouseUpHandler(this); 

    initWidget(focusPanel); 
} 

public void setWidget(int row, int column, CellWidget widget){ 
    widgets.add(widget); 
    table.setWidget(row, column, widget); 
} 

@Override 
public void onMouseUp(MouseUpEvent event) { 
    event.preventDefault(); 
    if (selecting){ 
     selecting=false; 
     DOM.releaseCapture(this.getElement()); 
     selectEnd = new Point(event.getClientX(),event.getClientY()); 

     for (CellWidget widget : widgets){ 
      if (widget.isIn(selectStart,selectEnd)) 
       widget.say();    
     } 
     selectStart = selectEnd = null;   
    }  
} 

@Override 
public void onMouseMove(MouseMoveEvent event) { 
    event.preventDefault(); 
    if (selecting){ 
     //do some fancy layout 
    }  
} 

@Override 
public void onMouseDown(MouseDownEvent event) { 
    event.preventDefault(); 
    selecting = true; 
    DOM.setCapture(this.getElement()); 
    selectStart = new Point(event.getClientX(),event.getClientY()); 
} 
} 

接下来，定义一个CellWidget基本上封装你想添加到您的细胞是什么。当添加到DOM，CellWidget计算，稍后存储的位置，以确定它是否在所选择的区域：

public class CellWidget extends Composite{ 

Widget content; 
Point topLeft,topRight,bottomLeft,bottomRight; 

public CellWidget(Widget w){ 
    this.content = w; 
    initWidget(w); 
} 

@Override 
protected void onLoad() { 
    topLeft = new Point(getAbsoluteLeft(),getAbsoluteTop()); 
    topRight = new Point(getAbsoluteLeft()+getOffsetWidth(),getAbsoluteTop()); 
    bottomLeft = new Point(getAbsoluteLeft(),getAbsoluteTop()+getOffsetHeight()); 
    bottomRight = new Point(getAbsoluteLeft()+getOffsetWidth(),getAbsoluteTop()+getOffsetHeight()); 
} 

public void say(){ 
    Window.alert(content + " is selected!"); 
} 

public boolean isIn(Point start, Point end){ 
    if (topLeft.isBetween(start, end) || topRight.isBetween(start, end) 
      || bottomLeft.isBetween(start, end) || bottomRight.isBetween(start, end)) 
     return true; 
    else 
     return false;   
} 
} 

简单点的实现，使事情变得更加容易：

public class Point { 

int x,y; 

public Point(int x,int y){ 
    this.x=x; 
    this.y=y; 
} 
public int getX() { 
    return x; 
} 
public int getY() { 
    return y; 
} 
@Override 
public String toString() { 
    return x+","+y; 
} 
public boolean isBetween(Point p1,Point p2){ 
    if (p1.getX() < x && p2.getX() > x && p1.getY() < y && p2.getY() > y) 
     return true; 
    return false; 
} 
} 

最后，在您的入口点模块你换东西了由：

public void onModuleLoad() { 
    RootPanel rootPanel = RootPanel.get(); 
    CustomTable table = new CustomTable(); 
    table.setWidget(0, 0, new CellWidget(new Label("hello 0,0"))); 
    table.setWidget(0, 1, new CellWidget(new Label("hello 0,1"))); 
    table.setWidget(1, 0, new CellWidget(new Label("hello 1,0"))); 
    table.setWidget(1, 1, new CellWidget(new Label("hello 1,1"))); 
    rootPanel.add(table); 
} 

我知道，实际的逻辑，以确定部件落在所选区域内是不完整的，需要进行即兴但我认为这个解决方案是足够清晰的，给出了基本的想法。干杯