ComboBox¶
목적¶
정해진 값을 리스트 형태로 보여주고
선택 가능한 입력 기능을 제공하기 위한 ComboBox 사용 방법 안내
주요 단계¶
1. ComboBox 생성¶
1.1 원하는 위치에 ComboBox 생성¶
<사진 1> "ComboBox" UI 생성 화면
2. Properties 설정¶
2.1 ComboBox 생성 후 Properties 설정¶
- ComboBox 생성 후 Properties 영역에서 기능 설정 가능
<사진 2> "ComboBox" Properties 화면
2.2 주요 Property 옵션¶
| Name | Description |
|---|---|
| selectedKey | Key 값을 Binding하여 값을 가져올 때 사용 |
| showButton | ComboBox의 아이템 선택 버튼 활성화 / 비활성화 |
| filterSecondaryValues | ListItem에서 text와 additionalText 값을 모두 표시할 때 사용 |
| value | ComboBox의 초기값 입력 |
| width | ComboBox 가로폭 조정 (단위: px, em, %) |
| enabled | ComboBox 수정 가능 여부 (비활성화 시 반투명 처리됨) |
3. 아이템 추가 및 바인딩¶
3.1 ComboBox에 아이템 추가 및 Key / Value 바인딩¶
<사진 3> ComboBox UI 하위 Item 생성
<사진 4> Item 영역의 Property 설정
<사진 5> ComboBox 적용 결과 화면
Events와 Methods¶
4. Event에 Method 적용¶
- 특정 동작 수행을 위해 Events 영역에서 Method 연결
4.1 주요 Events¶
| Name | Description |
|---|---|
| change | Enter 키 입력 또는 목록에서 아이템 선택 시 작동 |
| selectionChange | ComboBox의 아이템 Key 값이 변경될 때 작동 |
5. Methods에 Message 구성¶
5.1 MessageToast 구성¶
- Methods에 MessageToast를 구성하여
특정 동작 수행 시 메시지를 표시
<사진 6> ComboBox SelectionChange Event Method 설정 화면
<사진 7> ComboBox SelectionChange 시 메시지 출력 Method 설정 화면
<사진 8> ComboBox 변경 시 메시지 출력 화면