[번역] 웹딘프로아밥 ALV 에서 드래그 앤 드랍

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/08/08/drag-and-drop-in-web-dynpro-abap-alv/

 

Drag and Drop in Web Dynpro ABAP ALV

August 8, 2014 

Kiran Kumar Valluru

 

소개

이 글은 웹딘프로아밥 ALV 사이에 드래그 앤 드랍 구현 방법을 설명합니다. ALV사이의 드래그 앤 드랍은 넷위버 702 이전까지는 지원하지 않습니다. 예제로 ALV 2개를 (하나는 드래그 소스이고 하나는 드랍 타켓 입니다) 만들고 한 ALV에서 다른 ALV로 드래그 앤 드랍을 실행해 보겠습니다.

 

준비물

SAP NetWeaver 700 Ehp2.

 

단계별 설명

단계 1: 웹딘프로 컴포넌트 만들기.

티코드 SE80으로 이동하여 웹딘프로 컴포넌트를 만듭니다.

설명을 입력하고 OK를 클릭합니다.

 

단계 2: 컴포넌트 재사용

사용된 컴포넌트에 ALV_DRAG, ALV_DROP(하나는 드래그 소스이고 하나는 드랍 타겟) 2개의 ALV 컴포넌트 SALV_WD_TABLE를 입력합니다.

 

단계 3: 데이타 바인딩

컴포넌트 컨트롤러의 컨텍스트 탭으로 이동하여 노드 FLIGHT_DRAG(드래그 소스 ALV에서 표시할 데이타)를 만듭니다).

 

노드 네임을 입력하고 카디날리티 0..n으로 선택하고 OK를 클릭합니다.

 

어트리뷰트를 적당히 만들어 줍니다. (데모를 위해, 5개만 어트리뷰트만 만들어 봤습니다).

 

또한 다른 노드 FLIGHT_DROP(드랍 타겟 ALV에서 표시할 데이타)도 비슷하게 만들어 줍니다. 카디날리티 0..n으로 하고 어트리뷰트를 적당히 만들어 주세요.

 

단계 3: 레이아웃 디자인 (역자주: 단계 3이 중복되는건 원본 글부터 잘못된 것).

메인 뷰의 레이아웃 탭으로 이동합니다. ROOTUIELEMENTCONTAINER 아래에 엘리먼트를 추가 합니다.

 

ViewContainerUIELement를 하나 추가 합니다. (ALV1 의 자리).

 

또한 ViewContainerUIELement를 하나 더 추가합니다. (ALV2 의 자리).

 

메인 뷰의 컨텍스트 탭으로 이동합니다. 컴포넌트 컨트롤러 컨텍스트의 FLIGHT_DRAG 노드를 뷰 컨텍스트 쪽으로 드래그 앤 드랍 합니다.

또한 컴포넌트 컨트롤러 컨텍스트의 FLIGHT_DROP 노드도 뷰 컨텍스트 쪽으로 드래그 앤 드랍 합니다.

 

이제 뷰의 속성 탭으로 이동하여 Create Controller Usage 버튼을 클릭합니다.

ALV_DRAG의 인터페이스 컨트롤러를 추가 합니다.

또한 ALV_DROP의 인터페이스 컨트롤러도 추가 합니다.

단계 4: 메소드 선언과 구현.

뷰의 메소드 탭으로 이동하여 WDDOINIT 메소드에 아래 코드를 입력합니다.

 

WDDOINT

METHOD wddoinit . DATA: lo_nd_flight_drag TYPE REF TO if_wd_context_node, lo_nd_flight_drop TYPE REF TO if_wd_context_node, lt_flight_drag TYPE wd_this->elements_flight_drag, lt_flight_drop TYPE wd_this->elements_flight_drop. DATA: lr_usage TYPE REF TO if_wd_component_usage, lr_component TYPE REF TO iwci_salv_wd_table, lr_model TYPE REF TO cl_salv_wd_config_table, lr_table_settings TYPE REF TO if_salv_wd_table_settings, lr_header TYPE REF TO cl_salv_wd_header, lr_avl_drag TYPE REF TO if_salv_wd_drag_and_drop, lr_avl_drop TYPE REF TO if_salv_wd_drag_and_drop. *Set Data to ALV Nodes lo_nd_flight_drag = wd_context->get_child_node( name = wd_this->wdctx_flight_drag ). SELECT * FROM sflight INTO CORRESPONDING FIELDS OF TABLE lt_flight_drag UP TO 10 ROWS. lo_nd_flight_drag->bind_table( new_items = lt_flight_drag ). lo_nd_flight_drop = wd_context->get_child_node( name = wd_this->wdctx_flight_drop ). SELECT * FROM sflight INTO CORRESPONDING FIELDS OF TABLE lt_flight_drop UP TO 4 ROWS. lo_nd_flight_drop->bind_table( new_items = lt_flight_drop ). **Set ALV Drag Source and Drop Target Infos *…get ALV DRAG component usage lr_usage = wd_this->wd_cpuse_alv_drag( ). IF lr_usage->has_active_component( ) IS INITIAL. lr_usage->create_component( ). ENDIF. *…get ALV DRAG component lr_component = wd_this->wd_cpifc_alv_drag( ). * get ConfigurationModel from ALV DRAG Component lr_model = lr_component->get_model( ). * Set Header for ALV Drag lr_table_settings ?= lr_model. lr_header = lr_table_settings->get_header( ). lr_header->set_text( 'ALV Drag Source' ). “#EC NOTEXT lr_avl_drag ?= lr_model. * get ConfigurationModel from ALV DROP Component lr_usage = wd_this->wd_cpuse_alv_drop( ). IF lr_usage->has_active_component( ) IS INITIAL. lr_usage->create_component( ). ENDIF. lr_component = wd_this->wd_cpifc_alv_drop( ). lr_model = lr_component->get_model( ). * Set Header for ALV Drag lr_table_settings ?= lr_model. lr_header = lr_table_settings->get_header( ). lr_header->set_text( 'ALV Drop Target' ). “#EC NOTEXT lr_avl_drop ?= lr_model. * *Drag Source Info * Create alv as drag source lr_avl_drag->create_drag_source_info( EXPORTING data = 'ALV_DRAG' tags = 'alv1' enabled = abap_true ). * Drop on Row Target Infos lr_avl_drop->set_drop_row_name_fieldname( 'CARRID' ). ” Column name lr_avl_drop->set_drop_row_name( ” ). lr_avl_drop->create_drop_row_target_info( EXPORTING id = 'ALV_DROP' name = 'AA' “Value tags = 'alv1' enabled = abap_true ). ENDMETHOD.

 

 

ALV_DROP 컴포넌트의 이벤트 ON_DROP에 대한 이벤트 핸들러(ON_DROP_CARRID)를 만듭니다.

 

아래 코드를 ON_DROP_CARRID 이벤트 핸들러 메소드에 입력합니다.

 

ON_DROP_CARRID

METHOD on_drop_carrid . DATA: lr_node_drag TYPE REF TO if_wd_context_node, lr_element_drag TYPE REF TO if_wd_context_element, lr_node_drop TYPE REF TO if_wd_context_node, lr_element_drop TYPE REF TO if_wd_context_element, ls_flight TYPE wd_this->element_flight_drag. * Get the Data of ALV DRAG Source IF r_param->data = 'ALV_DRAG'. lr_node_drag = wd_context->get_child_node( 'FLIGHT_DRAG' ). lr_element_drag = lr_node_drag->get_lead_selection( ). IF lr_element_drag IS BOUND. lr_element_drag->get_static_attributes( IMPORTING static_attributes = ls_flight ). ENDIF. ENDIF. * Get Index of ALV DROP Target lr_node_drop = wd_context->get_child_node( 'FLIGHT_DROP' ). lr_element_drop = lr_node_drop->get_element( index = r_param->row_index ). IF lr_element_drop IS BOUND. * Set the ALV DROP Target data from ALV DRAG Source lr_element_drop->set_static_attributes( static_attributes = ls_flight ). ENDIF. ENDMETHOD.

 

단계 5: 데이타 매핑.

ALV_DRAG component usage의 인터페이스 컨트롤러로 이동하여 Create Controller Usage 버튼을 클릭합니다.

컴포넌트 컨트롤러를 선택합니다.

 

컴포넌트 컨트롤러 컨텍스트의 FLIGHT_DRAG 노드에서 Interface controller의 DATA 노드로 드래그 앤 드랍 합니다.

 

또한 ALV_DROP component usage의 인터페이스 컨트롤러로 이동하여 컴포넌트 컨트롤러 컨텍스트의 FLIGHT_DROP 노드에서 Interface controller의 DATA 노드로 매핑도 추가 합니다.

 

윈도우로 이동하여 VC1에서 마우스 오른쪽 버튼을 누른후 Embed View를 클릭합니다;

 

ALV_DRAG 컴포넌트의 TABLE 뷰를 선택합니다.

 

또한 ALV_DROP 컴포넌트의 TABLE 뷰도 VC2에 넣어 주세요.

 

이제 저장하고 활성화 합니다.

어플리케이션 만들기.

웹딘프로 어플리케이션을 만들고 저장 합니다.

설명을 입력하고 저장 버튼을 누릅니다.

 

웹딘프로 어플리케이션에서 마우스 오른쪽 버튼을 누르고 테스트를 선택합니다.

 

실행 결과:

두개의 ALV가 화면에 보입니다. (첫번째는 드래그 소스이고 두번째는 드랍 타겟입니다)

 

 

첫번째 ALV에서 드래그를 시작하여 두번째 ALV의 4번째 레코드 위치에 드랍 합니다.

 

드랍 하게 되면 해당 줄의 값이 수정된 것을 볼 수 있습니다.

 

 

결론

드래그 앤 드랍하는 간단한 예제를 데모로 보여드렸습니다. 값 수정이 아니라 레코드를 추가하거나 이동하는 구현도 할 수 있습니다. 그리고 ALV 말고 다른 UI 와의 드래그 앤 드랍도 가능합니다.

 

 

참고: Drag and Drop – Web Dynpro for ABAP – SAP Library

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/08/08/drag-and-drop-in-web-dynpro-abap-alv/