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'.

巴特西

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

1.21 Drag Drop使用

最新文章

热门文章