Dragging-and-dropping between different layouts_Vaadin 7 Cookbook-QQ阅读男生都市网

书名：Vaadin 7 Cookbook
作者名：Jaroslav Holaň Ond?ej Kvasnovsk?
本章字数：451字
更新时间：2021-07-23 14:19:35

Dragging-and-dropping between different layouts

Each layout has a different wrap behavior. If we want to try this behavior for ourselves, we will have to create a simple demo. In this demo, we can drag-and-drop components between the four different layouts. We can also change the size of each layout by moving the separator and watch how components are wrapped. If the line cannot be wrapped, a scroll bar appears.

How to do it...

Carry out the following steps to create a drag and drop panel:

We create project with the root Demo class.
```
public class Demo extends UI {…}
```
All four layouts will be inserted into the DragndropPanel class that extends HorizontalSplitPanel.
```
public class DragndropPanel extends HorizontalSplitPanel {…}
```

Now let's insert the createLayout() method. In this method we add buttons to the layout that is taken over the AbstractLayout parameter. Next we wrap this layout by the DragAndDropWrapper class and set DropHandler. Here we implement two methods. First is getAcceptCriterion() that accepts all components and second is the drop() method in which we add the dropped component into the layout.

private Component createLayout(final AbstractLayout layout) {    
   layout.addComponent(createButton("one"));
  layout.addComponent(createButton("two"));
  layout.addComponent(createButton("three"));
  layout.addComponent(createButton("four"));
  DragAndDropWrapper dndLayout =
  new DragAndDropWrapper(layout);
  dndLayout.setSizeFull();
  dndLayout.setDropHandler(new DropHandler() {
    @Override
    public AcceptCriterion getAcceptCriterion() {
      return AcceptAll.get();
    }
    @Override
    public void drop(DragAndDropEvent event) {
      WrapperTransferable t =
      (WrapperTransferable) event.getTransferable();
      layout.addComponent(t.getSourceComponent());
    }
  });
  return dndLayout;
}

Buttons are created in a different method because we also need to wrap them by DragAndDropWrapper.

private Component createButton(String name) {
  Button button = new Button(name);
  DragAndDropWrapper buttonWrap =
  new DragAndDropWrapper(button);
  buttonWrap.setDragStartMode(DragStartMode.COMPONENT);
  buttonWrap.setSizeUndefined();
  return buttonWrap;
}

Now we continue with a constructor. Here we create two VerticalSplitPanels. We insert the first on the left side of HorizontalSplitPanel and the second on the right side. Now we have four parts of SplitPanel, where we insert HorizontalLayout, VerticalLayout, GridLayout, and CssLayout.

public DragndropPanel() {
  VerticalSplitPanel leftSplitPanel =
  new VerticalSplitPanel();
  leftSplitPanel.setSizeFull();
  leftSplitPanel.setFirstComponent(
    createLayout(new HorizontalLayout()));
  leftSplitPanel.setSecondComponent(
    createLayout(new VerticalLayout()));

  VerticalSplitPanel rightSplitPanel =
  new VerticalSplitPanel();
  rightSplitPanel.setSizeFull();
  rightSplitPanel.setFirstComponent(
  createLayout(new GridLayout(3, 3)));
  rightSplitPanel.setSecondComponent(
  createLayout(new CssLayout() {
    @Override
    protected String getCss(Component c) {
      return "display: inline-block;";
    }
  }));
  setFirstComponent(leftSplitPanel);
  setSecondComponent(rightSplitPanel);
  setSizeFull();
}

Now our DragndropPanel constructor is done. We can use it in the main UI Demo class in the init() method.

public class Demo extends UI {
  @Override
  public void init(VaadinRequest request) {
    setContent(new DragndropPanel()); 
  }
}

How it works...

In Vaadin, we can drag-and-drop components simply by wrapping them inside DragAndDropWrapper. We can enable dragging by calling the setDragStartMode(DragStartMode mode) method. For dropping a component, we have to define an accepted criterion on the target component and drop the component by the drop(DragAndDropEvent event) method.