[번역] 웹딘프로아밥 트리 UI 구현 예제

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다

https://blogs.sap.com/2015/02/11/webdynpro-tree-ui/

 

WebDynpro – Tree UI

February 11, 2015 

Mani Sekar

 

트리 - 순차적(Sequential) 구현방법

트리 UI를 사용하면 컨텍스트에 구성된 계층구조를 시각화 할 수 있습니다.

트리 UI 엘리먼트는 2가지 구현 방법이 있습니다:

• 순차적(sequential) 구현방법: 재귀 노드가 필요 없습니다. 구현시 몇 단계(level)로 트리를 구성할지 결정 된 경우 사용합니다.
• 재귀적(recursive) 구현방법: 재귀 노드가 필요 합니다. 구현시 몇 단계(level)로 트리를 구성할지 모르는 상태로 실행시 단계(level)가 결정되는 경우 사용합니다.

웹딘프로 컴포넌트

순차적 구현방법에서는 재귀 노드가 필요하지 않습니다. 컨텍스트 노드 TREE를 뷰 컨트롤러에서 만듭니다. 카디널리티는 1..1이고 싱글턴입니다. 이 노드 아래에 노드 TREE_NODE를 만듭니다. 이 노드 TREE_NODE는 두개의 어트리뷰트를 가지고 있습니다. 이 노드 아래에 노드 TREE_LEAF를 만듭니다. 이 노드 TREE_LEAF는 한개의 어트리뷰트를 가지고 있습니다.

컨텍스트 구조

어트리뷰트 STUDENTNAME, VALUE, STUDENTINFO 는 모두 STRING 타입입니다. 노드 TREE_LEAF는 싱글턴이 아닙니다. 각 TREE_NODE의 엘리먼트마다 TREE_LEAF가 각자 독립적으로 존재해야 하기 때문에 싱글턴이 아닙니다. 어트리뷰트 STUDENTNAME는 학생 이름 저장합니다. 어트리뷰트 STUDENTINFO는 각 학생마다 여러 정보를 가지고 있습니다.

트리 UI 엘리먼트에서는 Node Type을 하위에 추가 할 수 있습니다. Node Type은 TreeItemType 과 TreeNodeType 두가지가 있습니다. 컨텍스트 어트리뷰트를 이곳에 연결해야 합니다.

Node Type을 하위에 추가

• TreeNodeType: 노드 - 안에 먼가를 담고 있음
• TreeItemType: 아이템 - 마지막 단계

 

뷰 레이아웃

트리 관련 UI 엘리먼트에 컨텍스트를 바인딩

노드 TREE_NODE는 서플라이 펑션을 통해서 값을 채웁니다.

 

주의: 만약 노드를 하나더 만들었다면(여기서는 2개뿐), 처음 2개 노드에 싱글턴에 체크하고 마지막하나는 싱글턴이 아닙니다.

 

노드 TREE_NODE의 서플라이 펑션 ( V_main = 뷰 이름 )

METHOD supply_tree_node.  ( V_main = View Name )

   DATA: ls_student TYPE if_v_main=>element_tree_node, 
lt_student LIKE TABLE OF ls_student.

ls_student-studentname = 'SathishKumar'.
ls_student-value = 'A'.
APPEND ls_student TO lt_student.
clear ls_student.

ls_student-studentname = 'Ravi'.
ls_student-value = 'B'.
APPEND ls_student TO lt_student.
clear ls_student.

ls_student-studentname = 'Vivek'.
ls_student-value = 'C'.
APPEND ls_student TO lt_student.
clear ls_student.

node->bind_table( lt_student ).

ENDMETHOD.

 

자식 노드 TREE_LEAF 역시 서플라이 펑션을 통해서 값을 채웁니다.

노드 TREE_LEAF의 서플라이 펑션

METHOD supply_tree_leaf.

   DATA: ls_student TYPE if_v_main=>element_tree_leaf,
lt_student LIKE TABLE OF ls_student.
DATA: lv_value TYPE string.

parent_element->get_attribute( EXPORTING name = 'VALUE' IMPORTING value = lv_value ).

CASE lv_value.

WHEN 'A'.

ls_student-studentinfo = 'Article – YES'.
APPEND ls_student TO lt_student.

ls_student-studentinfo = 'Exam – 5'.
APPEND ls_student TO lt_student.

ls_student-studentinfo = 'Academic year -II'.
APPEND ls_student TO lt_student.

WHEN 'B'.
ls_student-studentinfo = 'Article – NO'.
APPEND ls_student TO lt_student.

ls_student-studentinfo ='Academic year -I'.
APPEND ls_student TO lt_student.

WHEN OTHERS.

ls_student-studentinfo = 'Article – YES'.
APPEND ls_student TO lt_student.

ls_student-studentinfo = 'Exam – 3'.
APPEND ls_student TO lt_student.

ls_student-studentinfo = 'Academic year -IV'.
APPEND ls_student TO lt_student.

ENDCASE.

node->bind_table( lt_student ).

ENDMETHOD.

 

 

결과

 

 

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2015/02/11/webdynpro-tree-ui/