---
html:
  toc: true
  offline: true
export_on_save:
  html: true
---
# KSB 웹툴킷에 새로 개발한 Operator 컴퍼넌트 등록하기
---
<a href="https://etrioss.kr/thkimetri/ksb19.03-manual/blob/master/manual1903/3.2.1.HowToDevelopOperator.md">Operator 컴퍼넌트 개발하기 매뉴얼</a> 에서 SW 개발자가 만든 **MyColumnSelectWithFileOperator** 를 웹툴킷에서 사용할 수 있도록 등록하는 방법을 설명합니다. **Component** 메뉴를 클릭하여 Component 관리화면 으로 이동합니다. 컴포넌트를 등록하기 위한 절차는 다음과 같습니다.  

1. 컴퍼넌트를 등록할 버전 선택
2. Enum Component 등록하기
3. Component Property 등록하기
4. UI Component 등록하기
5. 엔진과 매핑관계 만들기


## 컴퍼넌트를 등록할 버전 선택
**Revision** 탭으로 이동합니다. *Version Map* 표에서 웹툴킷의 *Component Version* 과 프레임워크의 *KSB Version* 목록을 확인할 수 있습니다. 본 예제에서는 SW 개발자가 만든 신규 컴퍼넌트를 웹툴킷의 *Component Version* = 1.0.1 에 등록합니다. 따라서 1.0.1 버전을 *Working version* 으로 선택합니다. 1.0.1 버전이 없을 경우, <a href="https://etrioss.kr/thkimetri/ksb19.03-manual/blob/master/manual1903/3.4.HowToUseComponent.md">KSB 웹툴킷 컴퍼넌트 등록 매뉴얼</a>을 참고하여 생성합니다 (복제 기능 이용).

![버전 선택](./images/3.4.1_revision.png)

## Enum Component 등록하기
본 예제에서는 Enum Component 를 작성하지 않았으므로 DB 에 입력하지 않습니다.


## Component Property 등록하기
**Component Property** 탭으로 이동합니다. **MyColumnSelectWithFileOperator** 에서 사용한 Protocol Buffer 메세지의 필드 값을 입력합니다.

```protobuf
syntax = "proto2";

package ksb.csle.common.proto;

message MySelectColumnsWithFileInfo {
    required string columnIdPath = 1;
}
```

 <a href="https://etrioss.kr/thkimetri/ksb19.03-manual/blob/master/manual1903/3.4.HowToUseComponent.md">KSB 웹툴킷 컴퍼넌트 등록 매뉴얼</a>을 참고하여 입력합니다.

![메세지 입력화면](./images/3.4.1_component.png)


## UI Component 등록하기
**UI Component** 탭으로 이동하여 입력합니다.  

![UI Component](./images/3.4.1_ui.png)

- Component Property 에 "MySelectColumnsWithFileInfo" 를 입력합니다.
- Type 은 "Operator" 를 선택합니다.
- Class Name 에 "ksb.csle.component.operator.custom.MyColumnSelectWithFileOperator" 를 입력합니다.
- Nickname 에 "MyColumnSelectWithFileOperator" 를 입력합니다. Nickname은 워크플로우 편집 화면의 컴퍼넌트 선택창에서 표시할 이름입니다.
- Description 에 "파일로부터 칼럼 선택 및 재배열 처리기" 를 입력합니다. Description은 워크플로우 편집 화면의 컴퍼넌트 선택창에서 컴퍼넌트 이름에 마우스 오버 시 표출할 툴팁 설명입니다.
- DB+ 버튼을 클릭하여 입력한 내용을 DB에 추가합니다.


## 엔진과 매핑관계 만들기
위에서 입력한 **MyColumnSelectWithFileOperator** 를 스트림 처리용 엔진에서 사용할 수 있도록 매핑 정보를 입력합니다.

![UI Component Map](./images/3.4.1_ui_mapping.png)

- UIComponent 는 위에서 입력한 "[Operator] MyColumnSelectWithFileOperator" 를 선택합니다.
- Engine 은 스트림 처리용 엔진인 "StreamToStreamEngine" 을 선택합니다.  
- 선택된 StreamToStreamEngine 이 가지고 있는 StreamOperatorInfo 의 oneof_operators 에 Field Name을 입력합니다. Field Name 에 "mySelectColumnsWithFile" 을 입력한 후 Add a new field! 버튼을 클릭하여 리스트에 추가합니다.
- Save to Entry! 버튼을 클릭하여 Mapping Entries 리스트에 추가합니다.
- DB+ 버튼을 클릭하여 Mapping Entries 리스트에 있는 내용을 DB에 입력합니다.   

DB에 입력한 후, UIComponent Mapping Relations! 버튼을 클릭하면 아래 그림과 같이 매핑 정보를 확인할 수 있습니다. StreamOperatorInfo 를 가지는 엔진들(BatchToBatchStreamEngine, OnDemandStreamEngine, StreamToBatchEngine, StreamToStreamEngine)에 일괄적으로 매핑되는 것을 확인할 수 있습니다.  

![UI Component Map](./images/3.4.1_ui_mapping2.png)

## 워크플로우 편집기에서 확인
**Workflow Editor** 메뉴를 클릭하여 워크플로우 편집 화면으로 이동합니다. *Component Version* 이 1.0.1 인 워크플로우를 작성합니다. StreamToStream 엔진을 선택한 후, 위에서 등록한 MyColumnSelectWithFileOperator 가 컴퍼넌트 선택창에 나타나는지 확인합니다.
컴퍼넌트 선택창에 표출되는 이름은 UI Component 등록 시 입력한 Nickname 이며, 마우스 오버 시 출력되는 툴팁 설명은 Description 인 것을 확인할 수 있습니다.


![New Component](./images/3.4.1_result.png)

등록한 컴퍼넌트를 엔진으로 드래그 앤 드롭한 후 Properties 창에서 Component Property 를 설정할 수 있는지 확인합니다.

![New Component](./images/3.4.1_result2.png)

도움말 버튼을 클릭하면 Component Property 등록 시 입력한 Help 가 출력되는 것을 확인할 수 있습니다.
- (1) Component Property Help 표에서 입력한 Short Help 표시
- (2) Component Property Help 표에서 입력한 Help 표시
- (3) Component Property 표에서 입력한 Help 표시