Tree

Tree Component는 계층적인 메뉴 구조를 Hierarchy 형태로 표현하는데 사용되는 Component이며, Properties의 ObjProp의 Id, Parent Id, Title, Title Symbolic을 필수로 설정해야 한다.

• How to Create

1. New Component Popup에서 Tree 타입을 선택한다.

2. Component Name 및 화면에서 표시되는 명칭(Symbolic String or Custom Name)을 등록하고, 작성된 Business Object에서 Tree Component에서 사용될 Business Object를 선택한다.

3. Component에 Business Object의 Field Mapping을 한다. (Step4)

   INFO

   Step2의 Layout Type 선택 단계는 Skip된다.

• 적용 가능한 Component Attribute

1. Search Type: List의 검색 타입을 결정할 수 있는 속성이다.

2. Default Expand All: 초기 Tree가 Load될 때, 노드의 펼침 여부를 설정한다. Default 또는 No로 설정을 할 경우, Tree의 최상위 노드만 표시하고 하위 노드들은 접힌 상태로 표시되고, Yes로 설정을 할 경우 모든 노드들이 펼쳐진 상태로 보여 진다.

3. Collapse Disabled: Toolbar의 컨텐츠 접기 기능을 비활성화 시키는 속성으로 기본 값은 “NO”로 컨텐츠 접기 기능이 활성화 되어있다. “YES”로 변경 시 상시 Component가 펼침 상태로 나타난다.

4. Default Collapse State: Collapse Disabled 값이 No인 경우 화면 초기 진입 상태를 설정하는 속성으로, 기본값은 N/A로 Collapse 펼침 기능이 활성화 되어있다. “Close`로 변경 시 화면 초기 진입 시 Collapse가 닫힌 상태로 나타난다.

5. Tab Pane Id: Tab Component로 Screen이 구성되는 경우, 하단에 해당 Component가 배치되는 경우 Tab Component의 Panel Id값을 등록하여 Tab과 연결하기 위하여 사용된다.

6. Object Prop: Tree Component에서 Data 조회를 위한 속성이다. 잘못 등록하거나 등록을 누락한 경우. Tree의 형태가 표시되지 않는다.

   INFO

   부모, 자식 관계에 맞게 Control의 관계를 설정해야 하고, Id에는 자식 Control의 Id값, Parent Id에는 Id에서 입력한 자식 Control Id의 부모 Id값이 입력되어야 한다. 또한 Title은 화면에 표시될 Control의 명칭을 선택한다.
   

7. Style – Font: Tree Component의 텍스트의 폰트를 설정한다

8. Style – Text Color: Tree Component의 텍스트 색상을 설정한다.

9. Style – Back Color: Tree Component의 배경색을 설정한다.

10. Style – Flat Appearance: Tree Component의 Border를 설정한다.

11. Style – Outline: Tree Component의 Outline을 설정한다.

• 사용 가능한 Service

Name	Platform	Description
load	Common	Data loading 시 발생되는 Event
node-click	Web	Tree node를 Click할 때 발생되는 Event

Load: Tree Component가 Load될 때 발생되는 Event이며, Load Event에는 Tree Component를 구성할 때 필수로 Service를 등록하여야 한다. Tree의 Node를 Click할 때 마다 Load Event가 발생된다.

INFO

Lambda Action을 등록하여 Load를 실행하며, Prop에서 Key값을 objectProp으로 등록하여 전달할 수 있다.

Node-Click: Tree Component의 트리 노드를 Click할 때 실행되는 Service로 트리의 노드를 Click하는 Event이기 때문에 Web 플랫폼에서만 사용이 가능하다.

[그림 1. Node Click 시]
[그림 2. Node Click 시 Alert창을 호출하는 Action의 등록]

• 사용 가능한 Control

1. ToolbarButton: Button의 Click 또는 터치 시 발생되는 Event에서 Action을 호출할 수 있다.
2. Lookup: 검색을 위한 Popup창을 호출하고, 검색 Popup 화면에서 검색 조건을 선택할 수 있도록 하는 Control이다.
3. Text: Input Text Control이다.
4. Select: Option을 선택할 수 있는 Drop Down List Control이며, 등록한 Common Code의 Group Code가 Select option으로 사용된다.
5. CheckBox: 선택/해제가 가능한 Checkbox Control이다.
6. Hidden: Component에 있는 Control의 숨김 속성을 설정한다.
7. DatePicker: 날짜를 입력할 때 UI 형식으로 쉽게 날짜를 선택할 수 있도록 하는 Control이다