WDA学习（28）：Drag &Drop使用

1.21 Drag Drop使用

本实例测试Drag Drop;

运行结果：

Drag图标Drop到添加Icon,会将一条记录添加到Table;

Drag Table记录Drop到垃圾桶Icon,会将记录删除；

Group1中不同Tray可以交换位置；

Group2中不同Tray可以交换位置；

Setting：设置Group1,Group2是否可以Drag,Drop；

 

1.创建Component,View: V_DRAGDROP;

2.创建Context节点；

创建Node:NODE_INFO,保存Icon信息；

Attribute:NAME,类型String,Icon名称；

Attribute：DESC,类型String,Icon描述；

Attribute:PIC,类型String,Icon详细信息；

创建Node:NODE_PARAM,setting绑定值，设置group1,group2是否drag,drop enable;

Attribute:GP1_DRAG_ENABLE,类型WDY_BOOLEAN，设置是否group1 drag enable;

Attribute:GP1_DROP_ENABLE,类型WDY_BOOLEAN，设置是否group1 drop enable;

Attribute:GP2_DRAG_ENABLE,类型WDY_BOOLEAN，设置是否group2 drag enable;

Attribute:GP2_DROP_ENABLE,类型WDY_BOOLEAN，设置是否group2 drop enable;

 

3.创建Layout UI Element

创建Tray:TRAY1,包含Group1,Group2;

创建Group：GROUP1:

创建Image:IMG1~3;

分别设置source:

~IconLarge/SuccessMessage

~IconLarge/ErrorMessage

~IconLarge/HintMessage

创建DropTarget:DT1,onDrop:绑定Action，DROP;

DT1中创建Image:IMG4,source: trash.png，MIMES上传图片；

DT1中创建DropTargetInfo: DROPTARGETINFO,设置tags: delete;

 

 创建Group:GROUP2:

创建DropTarget:DT2,onDrop:绑定Action，DROP;

DT2中创建TextView,设置text, 添加Icon;

DT2中创建DropTargetInfo: DROPTARGETINFO_1,设置tags: save*

 

创建Tray:TRAY2,包含GP21,GP22,GP23;

 

 创建Group:GP21,

创建Tray1~Tray4;

创建Group:GP22,

创建Tray5~Tray6;

创建Group：GP23,

创建CheckBox，分别绑定Attribute:GP1_DRAG_ENABLE，Attribute:GP1_DROP_ENABLE, Attribute:GP2_DRAG_ENABLE, Attribute:GP2_DROP_ENABLE；

 

4.Attributes页签，变量定义；

 

5.实现Method页签方法

Method: INIT_DRAGDROP，初始化Tray2中group1，group2中drag,drop设置，在WDDOMODIFYVIEW方法中调用；

代码实例：

 "drag_source_info,drop_target_info,有这两个属性可以设置drag drop
  "Gridlayout:CL_WD_GRID_LAYOUT
  "MatrixLayout:CL_WD_MATRIX_LAYOUT
  DATA:lo_container TYPE REF TO cl_wd_uielement_container.
  DATA:lo_gridlayout TYPE REF TO cl_wd_grid_layout.
  DATA:lo_drag_source_info TYPE REF TO cl_wd_drag_source_info.
  DATA:lo_drop_target_info TYPE REF TO cl_wd_drop_target_info.

  wd_this->v_drag_group = 'GROUP1'.

  "获取容器
  lo_container ?= wd_this->v_view->get_element( 'GP21' ).
  lo_gridlayout ?= lo_container->get_layout( ).
  lo_gridlayout->set_on_drop( 'DROP_GP1' ).
  lo_drag_source_info = cl_wd_drag_source_info=>new_drag_source_info(
    bind_enabled = 'NODE_PARAM.GP1_DRAG_ENABLE'
    view = wd_this->v_view
    tags = 'gp1drag'
  ).
  lo_drop_target_info = cl_wd_drop_target_info=>new_drop_target_info(
      bind_enabled = 'NODE_PARAM.GP1_DROP_ENABLE'
      view = wd_this->v_view
      tags = 'gp1drag* drop'
  ).
  "绑定drag,drop
  lo_gridlayout->set_drag_source_info( lo_drag_source_info ).
  lo_gridlayout->set_drop_target_info( lo_drop_target_info ).

  "获取容器
  lo_container ?= wd_this->v_view->get_element( 'GP22' ).
  lo_gridlayout ?= lo_container->get_layout( ).
  lo_gridlayout->set_on_drop( 'DROP_GP2' ).
  lo_drag_source_info = cl_wd_drag_source_info=>new_drag_source_info(
    bind_enabled = 'NODE_PARAM.GP2_DRAG_ENABLE'
    view = wd_this->v_view
    tags = 'gp2drag'
  ).
  lo_drop_target_info = cl_wd_drop_target_info=>new_drop_target_info(
      bind_enabled = 'NODE_PARAM.GP2_DROP_ENABLE'
      view = wd_this->v_view
      tags = 'gp2drag* drop'
  ).
  "绑定drag,drop
  lo_gridlayout->set_drag_source_info( lo_drag_source_info ).
  lo_gridlayout->set_drop_target_info( lo_drop_target_info ).

Method: MODIFY_VIEW,当Tray2中，Group1,Group2拖动顺序改变时，更新页面。在WDDOMODIFYVIEW方法中调用。

代码实例：

  DATA:lo_container TYPE REF TO cl_wd_uielement_container.
  DATA:lo_element TYPE REF TO cl_wd_uielement.
  DATA:lt_elements TYPE cl_wd_uielement_container=>tt_uielement.
  DATA:lo_grid_layout TYPE REF TO cl_wd_grid_layout.
  DATA:lo_grid_data TYPE REF TO cl_wd_grid_data.
  DATA:lv_grid_data TYPE string.
  DATA:lv_source_index TYPE i.
  DATA:lv_target_index TYPE i.

  "获取容器
  IF wd_this->v_drag_group = 'GROUP1'.
    lo_container ?= wd_this->v_view->get_element( 'GP21' ).
  ELSEIF wd_this->v_drag_group = 'GROUP2'.
    lo_container ?= wd_this->v_view->get_element( 'GP22' ).
  ENDIF.

  lt_elements = lo_container->get_children( ).
  "获取被拖动的element，以及初始位置
  LOOP AT lt_elements INTO lo_element.
    lv_source_index = sy-tabix.
    lo_grid_data ?= lo_element->get_layout_data( ).
    lv_grid_data = lo_grid_data->get_drag_data( ).
    IF lv_grid_data = wd_this->v_drag_data.
      EXIT.
    ENDIF.
  ENDLOOP.
  IF wd_this->v_drag_data IS NOT INITIAL.
    IF wd_this->v_drag_offset = -1.
      lv_target_index = wd_this->v_drag_index.
    ELSE.
      lv_target_index = wd_this->v_drag_index + 1.
    ENDIF.
    IF lv_source_index < lv_target_index.
      lv_target_index = lv_target_index - 1.
    ENDIF.
    "移除再添加element
    lo_container->remove_child( index = lv_source_index ).
    lo_container->add_child( the_child = lo_element index = lv_target_index ).
  ENDIF. 

Method: ONACTIONDROP,Action:DROP对应方法；

 

 代码实例：

DATA:lo_node TYPE REF TO if_wd_context_node.
  DATA:lo_element TYPE REF TO if_wd_context_element.
  DATA:lt_info TYPE wd_this->elements_node_info.
  DATA:ls_info TYPE wd_this->element_node_info.
  DATA:lo_event TYPE REF TO cl_wd_custom_event.
  DATA:lv_tags TYPE string.
  DATA:lv_index TYPE I.

  lo_event = wdevent.
  lv_tags = tags.
  "lv_tags = lo_event->get_string( name = 'TAGS' ).
  "获取节点
  lo_node = wd_context->get_child_node( wd_this->wdctx_node_info ).
  lo_node->get_static_attributes_table( IMPORTING table = lt_info ).

  CASE lv_tags.
    WHEN 'save_success'.
      READ TABLE lt_info INTO ls_info WITH KEY name = 'ICON_SUCCESS'.
      IF sy-subrc <> 0.
        ls_info-name = 'ICON_SUCCESS'.
        ls_info-desc = 'success'.
        ls_info-pic = '~IconLarge/SuccessMessage'.
        APPEND ls_info TO lt_info.
      ENDIF.

    WHEN 'save_info'.
      READ TABLE lt_info INTO ls_info WITH KEY name = 'ICON_INFO'.
      IF sy-subrc <> 0.
        ls_info-name = 'ICON_INFO'.
        ls_info-desc = 'information'.
        ls_info-pic = '~IconLarge/HintMessage'.
        APPEND ls_info TO lt_info.
      ENDIF.
    WHEN 'save_error'.
      READ TABLE lt_info INTO ls_info WITH KEY name = 'ICON_ERROR'.
      IF sy-subrc <> 0.
        ls_info-name = 'ICON_ERROR'.
        ls_info-desc = 'error'.
        ls_info-pic = '~IconLarge/ErrorMessage'.
        APPEND ls_info TO lt_info.
      ENDIF.
    WHEN 'delete'.
      "获取选择行
      lv_index = lo_node->get_lead_selection_index( ).
      DELETE lt_info INDEX lv_index.
  ENDCASE.

  lo_node->bind_table( new_items = lt_info set_initial_elements = abap_true ). 

Method: ONACTIONDROP_GP1,Action:DROP_GP1,处理group1中drop；

代码实例：

  DATA:lo_event TYPE REF TO cl_wd_custom_event.
  lo_event = wdevent.
  wd_this->v_drag_data = lo_event->get_string( 'DATA' ).
  wd_this->v_drag_tags = lo_event->get_string( 'TAGS' ).
  wd_this->v_drag_index = lo_event->get_int( 'INDEX' ).
  wd_this->v_drag_offset = lo_event->get_int( 'OFFSET' ).
  wd_this->v_drag_id = lo_event->get_string( 'ID' ).

  "group
  wd_this->v_drag_group = 'GROUP1'.

Method: ONACTIONDROP_GP2,Action:DROP_GP2,处理group2中drop;

代码实例：

  DATA:lo_event TYPE REF TO cl_wd_custom_event.
  lo_event = wdevent.
  wd_this->v_drag_data = lo_event->get_string( 'DATA' ).
  wd_this->v_drag_tags = lo_event->get_string( 'TAGS' ).
  wd_this->v_drag_index = lo_event->get_int( 'INDEX' ).
  wd_this->v_drag_offset = lo_event->get_int( 'OFFSET' ).
  wd_this->v_drag_id = lo_event->get_string( 'ID' ).

  "group
  wd_this->v_drag_group = 'GROUP2'.