Come creare Drag n Drop per celle in un DataGrid

Question

Sto tentando di aggiungere il drag-n-drop ai widget cella. Più in particolare, voglio trascinare e rilasciare ClickableTextCell s, ma non hanno i metodi specifici e nemmeno .addDomHandler, quindi non posso solo creare qualcosa di simile .addDomHandler(new DragStartHandler() { ... }

Qualcuno può dare qualche aiuto su come le cellule DnD , preferibilmente con puro GWT?

Answer 1

Non so come implementare un DnD con GWT, ma so come implementare un CnC (Clic 'n Clic), che potrebbe interessarti. DnD sono fantastici, divertenti e belli, ma penso che alcune volte non siano molto convenienti. Ad esempio se hai un grande schermo che richiede una pergamena e se vuoi DnD un oggetto dall'alto verso il basso, non è così conveniente tenere il mouse ... Ma questo è solo un sentimento personale ...

In ogni caso, ti consiglio di utilizzare ListDataProvider insieme a eventi semplici, per spostare gli elementi: il primo clic seleziona l'elemento di origine e il secondo clic seleziona la destinazione. Una volta conosciuti la fonte e la destinazione, puoi spostare il tuo oggetto.

Funziona bene per me ... e se aggiungi alcuni stili per evidenziare sorgente e destinazione, è molto bello.

Esempio:

Questa è la classe principale:

 import java.util.ArrayList; 

     import com.google.gwt.event.dom.client.ClickEvent; 
     import com.google.gwt.event.dom.client.ClickHandler; 
     import com.google.gwt.user.cellview.client.CellList; 
     import com.google.gwt.user.client.ui.DialogBox; 
     import com.google.gwt.user.client.ui.FlowPanel; 
     import com.google.gwt.user.client.ui.FocusPanel; 
     import com.google.gwt.user.client.ui.Grid; 
     import com.google.gwt.user.client.ui.Label; 
     import com.google.gwt.view.client.ListDataProvider; 
     import com.google.gwt.view.client.SelectionChangeEvent; 
     import com.google.gwt.view.client.SingleSelectionModel; 

     public class Clic_Clic { 

      private static final Integer LEFT = 0; 

      private static final Integer CENTER = 1; 

      private static final Integer RIGHT = 2; 

      private ClicClicSelectionModel<Item> selectionModel = new ClicClicSelectionModel<Item>(); 

      ListDataProvider<Item> leftLDP = new ListDataProvider<Item>(); 

      ListDataProvider<Item> centerLDP = new ListDataProvider<Item>(); 

      ListDataProvider<Item> rightLDP = new ListDataProvider<Item>(); 

      FocusPanel left = new FocusPanel(), center = new FocusPanel(), right = new FocusPanel(); 

      Item selected = null; 

      public Clic_Clic() { 

      // --- Builds the GUI 
      DialogBox clic_clic = buildGUI(); 
      clic_clic.center(); 
      clic_clic.show(); 

      // --- Initializes data 
      configureSelectionManagement(); 
      initCellLists(); 
      configureAddAndRemove(); 

      // --- Fills the left LDP 
      leftLDP.getList().add(new Item("Fraternité", LEFT)); 
      leftLDP.refresh(); 

      // --- Fills the center LDP 
      centerLDP.getList().add(new Item("Egalité", LEFT)); 
      centerLDP.refresh(); 

      // --- Fills the right LDP 
      rightLDP.getList().add(new Item("Liberté", RIGHT)); 
      rightLDP.refresh(); 
      } 

      private DialogBox buildGUI() { 
      DialogBox db = new DialogBox(); 
      db.setText("A simple example for Clic 'n Clic"); 
      db.setSize("300px", "200px"); 
      db.setGlassEnabled(true); 
      db.setModal(true); 

      FlowPanel fp = buildContent(); 
      db.add(fp); 

      return db; 
      } 

      private FlowPanel buildContent() { 

      Grid g = new Grid(1, 3); 
      g.setSize("300px", "200px"); 

      g.setWidget(0, 0, left); 
      left.setSize("100px", "100px"); 
      left.getElement().getStyle().setBackgroundColor("blue"); 

      g.setWidget(0, 1, center); 
      center.setSize("100px", "100px"); 

      g.setWidget(0, 2, right); 
      right.setSize("100px", "100px"); 
      right.getElement().getStyle().setBackgroundColor("red"); 

      FlowPanel fp = new FlowPanel(); 
      fp.setSize("300px", "200px"); 
      fp.add(new Label("Do you know the correct order ?")); 
      fp.add(g); 

      return fp; 
      } 

      private void initCellLists() { 
      // --- Associates the left panel with the leftLDP ListDataProvider 
      CellList<Item> cellListLeft = new CellList<Item>(new MyCell()); 
      cellListLeft.setSelectionModel(selectionModel); 
      left.add(cellListLeft); 
      leftLDP = new ListDataProvider<Item>(new ArrayList<Item>()); 
      leftLDP.addDataDisplay(cellListLeft); 

      // --- Associates the center panel with the centerLDP ListDataProvider 
      CellList<Item> cellListCenter = new CellList<Item>(new MyCell()); 
      cellListCenter.setSelectionModel(selectionModel); 
      center.add(cellListCenter); 
      centerLDP = new ListDataProvider<Item>(new ArrayList<Item>()); 
      centerLDP.addDataDisplay(cellListCenter); 

      // --- Associates the right panel with the rightLDP ListDataProvider 
      CellList<Item> cellListRight = new CellList<Item>(new MyCell()); 
      cellListRight.setSelectionModel(selectionModel); 
      right.add(cellListRight); 
      rightLDP = new ListDataProvider<Item>(new ArrayList<Item>()); 
      rightLDP.addDataDisplay(cellListRight); 
      } 

      private void configureAddAndRemove() { 
      // --- If the user clic on the left 
      left.addClickHandler(new ClickHandler() { 

       @Override 
       public void onClick(ClickEvent event) { 
       if (selected != null) { 
        // --- If the selected item comes from the right 
        if (selected.getContainerIndex() == RIGHT) { 
        rightLDP.getList().remove(selected); 
        rightLDP.refresh(); 

        selected.setContainerIndex(LEFT); 
        leftLDP.getList().add(selected); 
        leftLDP.refresh(); 

        selected = null; 
        } 
        // --- If the selected item comes from the center 
        if (selected.getContainerIndex() == CENTER) { 
        centerLDP.getList().remove(selected); 
        centerLDP.refresh(); 

        selected.setContainerIndex(LEFT); 
        leftLDP.getList().add(selected); 
        leftLDP.refresh(); 

        selected = null; 
        } 
       } 
       } 
      }); 
      // --- If the user clic on the center 
      center.addClickHandler(new ClickHandler() { 

       @Override 
       public void onClick(ClickEvent event) { 
       if (selected != null) { 
        // --- If the selected item comes from the right 
        if (selected.getContainerIndex() == RIGHT) { 
        rightLDP.getList().remove(selected); 
        rightLDP.refresh(); 

        selected.setContainerIndex(CENTER); 
        centerLDP.getList().add(selected); 
        centerLDP.refresh(); 

        selected = null; 
        } 
        // --- If the selected item comes from the left 
        if (selected.getContainerIndex() == LEFT) { 
        leftLDP.getList().remove(selected); 
        leftLDP.refresh(); 

        selected.setContainerIndex(CENTER); 
        centerLDP.getList().add(selected); 
        centerLDP.refresh(); 

        selected = null; 
        } 
       } 
       } 
      }); 
      // --- If the user clic on the right 
      right.addClickHandler(new ClickHandler() { 

       @Override 
       public void onClick(ClickEvent event) { 
       // --- If the selected item comes from the left 
       if (selected.getContainerIndex() == LEFT) { 
        leftLDP.getList().remove(selected); 
        leftLDP.refresh(); 

        selected.setContainerIndex(RIGHT); 
        rightLDP.getList().add(selected); 
        rightLDP.refresh(); 

        selected = null; 
       } 
       // --- If the selected item comes from the center 
       if (selected.getContainerIndex() == CENTER) { 
        centerLDP.getList().remove(selected); 
        centerLDP.refresh(); 

        selected.setContainerIndex(RIGHT); 
        rightLDP.getList().add(selected); 
        rightLDP.refresh(); 

        selected = null; 
       } 
       } 
      }); 
      } 

      @SuppressWarnings("hiding") 
      class ClicClicSelectionModel<Item> extends SingleSelectionModel<Item> { 

      @Override 
      public void setSelected(Item object, boolean selected) { 
       if (getSelectedObject() != null && getSelectedObject().equals(object)) { 
       super.setSelected(object, !selected); 
       } else { 
       super.setSelected(object, selected); 
       } 
      }; 
      } 

      private void configureSelectionManagement() { 
      selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() { 

       @Override 
       public void onSelectionChange(SelectionChangeEvent event) { 
       Item selected = selectionModel.getSelectedObject(); 
       updateSelected(selected); 
       } 

      }); 

      } 

      private void updateSelected(Item item) { 
      // --- If no item has been selected, update the selected item 
      if (selected == null) { 
       selected = item; 
      } 
      } 

     } 

È inoltre necessario questo:

 public class Item { 

      private String label; 

      private Integer containerIndex; 

      public Item(String l, Integer id) { 
      this.label = l; 
      this.containerIndex = id; 
      } 

      public String getLabel() { 
      return label; 
      } 

      public void setLabel(String label) { 
      this.label = label; 
      } 

      public Integer getContainerIndex() { 
      return containerIndex; 
      } 

      public void setContainerIndex(Integer containerIndex) { 
      this.containerIndex = containerIndex; 
      } 

     } 

E, infine, questa:

 import com.google.gwt.cell.client.AbstractCell; 
     import com.google.gwt.safehtml.shared.SafeHtml; 
     import com.google.gwt.safehtml.shared.SafeHtmlBuilder; 
     import com.google.gwt.safehtml.shared.SafeHtmlUtils; 

     public class MyCell extends AbstractCell<Item> { 

      @Override 
      public void render(com.google.gwt.cell.client.Cell.Context context, Item value, SafeHtmlBuilder sb) { 
      if (value != null) { 
       // --- If the value comes from the user, we escape it to avoid XSS 
       // attacks. 
       SafeHtml safeValue = SafeHtmlUtils.fromString(value.getLabel()); 
       sb.append(safeValue); 
      } 

      } 

     } 

Qui tu vai. La prossima volta proverò a fare un esempio divertente :)

Spero che sia d'aiuto.