2012-12-05 16 views
6

में सेल के लिए ड्रैग एन ड्रॉप कैसे बनाएं I सेल विजेट में ड्रैग-एन-ड्रॉप जोड़ने की कोशिश कर रहा हूं। विशेष रूप से, मैं ड्रैग और ड्रॉप ClickableTextCell रों चाहते हैं, लेकिन वे विशिष्ट तरीके और नहीं .addDomHandler भी नहीं है, तो मैं बस की तरह .addDomHandler(new DragStartHandler() { ... }डेटाग्रिड

कोई कैसे कोशिकाओं DND के लिए पर कुछ मदद दे सकते हैं कुछ नहीं बना सकते , अधिमानतः शुद्ध जीडब्ल्यूटी के साथ?

उत्तर

1

मुझे नहीं पता कि जीडब्ल्यूटी के साथ डीएनडी कैसे कार्यान्वित किया जाए, लेकिन मुझे पता है कि सीएनसी (क्लिक 'एन क्लिक) को कैसे कार्यान्वित किया जाए, जो आपको रूचि दे सकता है। डीएनडी शांत, मजेदार और सुंदर हैं, लेकिन मुझे लगता है कि कुछ बार वे बहुत सुविधाजनक नहीं हैं। उदाहरण के लिए यदि आपके पास स्क्रॉल की आवश्यकता वाली एक बड़ी स्क्रीन है, और यदि आप ऊपर से नीचे तक किसी आइटम को डीएनडी करना चाहते हैं, तो माउस को पकड़ना इतना सुविधाजनक नहीं है ... लेकिन यह सिर्फ एक व्यक्तिगत भावना है ...

वैसे भी, मैं आपको अपने आइटम को स्थानांतरित करने के लिए सरल ईवेंट के साथ ListDataProvider का उपयोग करने की सिफारिश करता हूं: पहला क्लिक स्रोत आइटम का चयन करता है, और दूसरा क्लिक गंतव्य का चयन करता है। एक बार स्रोत और गंतव्य ज्ञात हो जाने पर, आप अपना आइटम ले जा सकते हैं।

यह मेरे लिए अच्छा काम करता है ... और यदि आप स्रोत और गंतव्य को हाइलाइट करने के लिए कुछ शैलियों को जोड़ते हैं, तो यह बहुत अच्छा है।

उदाहरण:

यह मुख्य वर्ग है:

 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; 
      } 

     } 

और अंत में, यह एक:

 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); 
      } 

      } 

     } 

यहाँ

 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; 
      } 
      } 

     } 

आप भी इस एक की जरूरत है तुम जाओ। अगली बार मैं एक मजेदार उदाहरण बनाने की कोशिश करूंगा :)

उम्मीद है कि यह मदद करता है।

+0

क्या आप सीएनसी के अपने कार्यान्वयन के कुछ कोड साझा करने में सक्षम होंगे? – Neeko

+0

मैं इस सप्ताह के अंत में कुछ आसान करने की कोशिश करूंगा। – tlapeg07

+0

मुझे इसमें भी रूचि है, हालांकि यह मुझे बहुत मदद नहीं कर सकता है, क्योंकि इस मामले में डीएनडी को प्रतिलिपि तंत्र के रूप में उपयोग किया जाता है, और आइटम पर एक संपादन संवाद खोलने पर सरल क्लिक करें। – user1879896