uicontrols 소개
uicontrols는 HandStack 화면 개발에서 반복적으로 사용하는 입력, 선택, 데이터 표시, 편집, 네트워크 보조 UI를 syn.uicontrols 네임스페이스로 제공하는 클라이언트 컨트롤 모음입니다.
최신 기준은 HandStack 웹 호스트의 2.Modules/wwwroot/wwwroot/uicontrols 디렉터리입니다. 각 컨트롤 폴더에는 소스(*.js, *.css), 예제(/example), 사용법(README.md), API 참조(API.md)가 함께 배치되어 있습니다.
기본 사용 방식
대부분의 컨트롤은 HTML 요소에 syn-options로 설정을 지정하고, syn.loader.js 또는 컨트롤별 스크립트를 로드한 뒤 페이지 로드 시 초기화됩니다.
<input id="txtName" type="text" syn-options="{editType: 'text'}">
<script src="/js/syn.loader.js"></script>
값을 읽고 쓸 때는 컨트롤별 모듈 API를 사용합니다.
var value = syn.uicontrols.$textbox.getValue('txtName');
syn.uicontrols.$textbox.setValue('txtName', 'HandStack');
syn.uicontrols.$textbox.clear('txtName');
컨트롤 목록
| 전역 별칭 | 문서 | 예제 경로 |
|---|---|---|
syn.uicontrols.$calendar | Calendar | /uicontrols/Calendar/example/ |
syn.uicontrols.$chart | Chart | /uicontrols/Chart/example/ |
syn.uicontrols.$checkbox | CheckBox | /uicontrols/CheckBox/example/ |
syn.uicontrols.$codepicker | CodePicker | /uicontrols/CodePicker/example/ |
syn.uicontrols.$colorpicker | ColorPicker | /uicontrols/ColorPicker/example/ |
syn.uicontrols.$contextmenu | ContextMenu | /uicontrols/ContextMenu/example/ |
syn.uicontrols.$data | DataSource | /uicontrols/DataSource/example/ |
syn.uicontrols.$dateperiodpicker | DatePeriodPicker | /uicontrols/DatePeriodPicker/example/ |
syn.uicontrols.$datepicker | DatePicker | /uicontrols/DatePicker/example/ |
syn.uicontrols.$multiselect | DropDownCheckList | /uicontrols/DropDownCheckList/example/ |
syn.uicontrols.$select | DropDownList | /uicontrols/DropDownList/example/ |
syn.uicontrols.$element | Element | /uicontrols/Element/example/ |
syn.uicontrols.$fileclient | FileClient | /uicontrols/FileClient/example/ |
syn.uicontrols.$list | GridList | /uicontrols/GridList/example/ |
syn.uicontrols.$guide | Guide | /uicontrols/Guide/example/ |
syn.uicontrols.$htmleditor | HtmlEditor | /uicontrols/HtmlEditor/example/ |
syn.uicontrols.$organization | OrganizationView | /uicontrols/OrganizationView/example/ |
syn.uicontrols.$propertygrid | PropertyGrid | /uicontrols/PropertyGrid/example/ |
syn.uicontrols.$radio | RadioButton | /uicontrols/RadioButton/example/ |
syn.uicontrols.$sourceeditor | SourceEditor | /uicontrols/SourceEditor/example/ |
syn.uicontrols.$textarea | TextArea | /uicontrols/TextArea/example/ |
syn.uicontrols.$textbox | TextBox | /uicontrols/TextBox/example/ |
syn.uicontrols.$button | TextButton | /uicontrols/TextButton/example/ |
syn.uicontrols.$tree | TreeView | /uicontrols/TreeView/example/ |
syn.uicontrols.$grid | WebGrid | /uicontrols/WebGrid/example/ |
실무 사용 기준
- 폼 입력은 TextBox, TextArea, CheckBox, RadioButton을 우선 사용합니다.
- 코드/목록 선택은 DropDownList, DropDownCheckList, CodePicker를 사용합니다.
- 날짜 범위와 단일 날짜는 DatePicker, DatePeriodPicker, Calendar를 구분해서 사용합니다.
- 표/트리/조직도/차트 같은 복합 표시는 GridList, WebGrid, TreeView, OrganizationView, Chart 문서를 확인합니다.
- 공통 값 처리, 리소스 바인딩, 거래 연동은 각 컨트롤의
getValue,setValue,clear,setLocale,addModuleListAPI와syn.$w화면 개발 흐름을 함께 사용합니다.