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/HighChart/example/ |
syn.uicontrols.$chartjs | Chart | /uicontrols/ChartJS/example/ |
syn.uicontrols.$echarts | ECharts | /uicontrols/ECharts/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.$barcalender | BarCalender | /uicontrols/BarCalender/example/basic.html |
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.$filedropzone | FileDropZone | /uicontrols/FileDropZone/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.$propertypanel | PropertyPanel | /uicontrols/PropertyPanel/example/ |
syn.uicontrols.$radio | RadioButton | /uicontrols/RadioButton/example/ |
syn.uicontrols.$signaturepad | SignaturePad | /uicontrols/SignaturePad/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/(Handsontable 기반) |
syn.uicontrols.$auigrid | AUIGrid | /uicontrols/AUIGrid/example/(상용, 실무 표준 그리드) |
syn.uicontrols.$auipivot | AUIPivot | /uicontrols/AUIPivot/example/(피벗 테이블 전용) |
syn.uicontrols.$opengrid | OpenGrid | /uicontrols/OpenGrid/example/(오픈소스, 상용 라이선스 불필요) |
실무 사용 기준
- 폼 입력은 TextBox, TextArea, CheckBox, RadioButton을 우선 사용합니다.
- 코드/목록 선택은 DropDownList, DropDownCheckList, CodePicker를 사용합니다.
- 날짜 범위와 단일 날짜는 DatePicker, DatePeriodPicker, Calendar를 구분해서 사용합니다.
- 표/트리/조직도/차트 같은 복합 표시는 GridList, TreeView, OrganizationView, Chart, ECharts 문서를 확인합니다. 편집 가능한 그리드는 AUIGrid(상용, 실무 표준), WebGrid(Handsontable 기반), OpenGrid(오픈소스, 라이선스 불필요)를 사용하고 피벗 리포트는 AUIPivot을 사용합니다.
- 공통 값 처리, 리소스 바인딩, 거래 연동은 각 컨트롤의
getValue,setValue,clear,setLocale,addModuleListAPI와syn.$w화면 개발 흐름을 함께 사용합니다.