syn.controls.js 라이브러리

일관된 기능과 디자인을 표현하는 비즈니스 앱 화면을 개발하기 위해 다양한 오픈소스를 활용하여 필요한 기능을 구현하고 고도화된 라이브러리를 syn.controls.js UI 컨트롤 단위로 제공합니다.

https://github.com/handstack77/handstack/blob/master/2.Modules/wwwroot/libman.json

HandStack 에서 기본적으로 제공되는 컨트롤은 UI 컨트롤 주요 사용법에서 확인 할 수 있습니다. 이 컨트롤은 비즈니스 앱 화면을 개발하기 위해 반드시 필요한 기능을 제공합니다. 어떠한 유료/무료 컨트롤을 사용하더라도 비즈니스 앱 화면 개발을 위해 일관된 디자인과 화면에서 서버와의 거래 요청과 응답에 대해 공통적인 기능을 제공하는 것을 목표로 합니다.

오픈소스를 기반으로 제공되는 syn.controls.js 컨트롤의 장점과 단점을 이해하면 도메인 업무에 적절한 비즈니스 컨트롤을 추가 할 수 있습니다.

syn.controls.js 장점과 단점

장점

• 일관성: 기존 오픈소스에서 제공하는 기능을 그대로 사용 가능합니다. 자주 사용되는 기능을 기본값으로 제공합니다.
• 유지보수: 오픈소스에 대한 버전 업데이트에 따른 유지보수가 용이합니다.
• 문서화: 기본적으로 커뮤니티와 문서화가 잘 되어 있는 오픈소스를 기반으로 고도화 합니다
• 라이선스: 오픈소스 라이선스로 제공되어 무료로 사용할 수 있습니다. 필요에 따라 유료 라이선스를 구매하여 사용 할 수 있습니다.

단점

• 커스터마이징: 오픈소스를 기반으로 제공되는 컨트롤은 기본적인 기능을 제공하며, 도메인 업무에 따라 커스터마이징이 필요합니다.
• 버그: 오픈소스에 대한 버그가 있을 수 있으며, 이에 대한 대응이 필요합니다.
• 라이선스: 오픈소스 라이선스에 따라 사용에 제약이 있을 수 있습니다.
• 지원: 오픈소스에 대한 지원이 필요한 경우 유료 라이선스를 구매하여야 합니다.

기본 옵션

syn.controls.js 컨트롤은 기본적으로 다음과 같은 옵션을 제공합니다. 다만 모든 컨트롤이 동일한 옵션을 제공하지는 않습니다.

{
    dataType: 'string', // string, bool, number, int, date
    belongID: null, // '' 또는 ['']
    controlText: null,
    validators: ['require', 'unique', 'numeric', 'ipaddress', 'email', 'date', 'url'],
    transactConfig: null,
    triggerConfig: null,
    getter: false,
    setter: false,
    bindingID: '',
    resourceKey: '',
    localeID: 'ko-KR',
    required: false,
    tooltip: ''
}

dataType

기본값은 string 입니다. Javascript 언어는 데이터 타입이 없습니다. 그래서 서버에 데이터를 전달할 때 데이터에 대한 유형을 5개로 구분하여 전달하도록 정의합니다. string, bool, number, int, date 중 하나를 지정할 수 있습니다.

belongID

화면에서 서버에 거래를 요청할 때 데이터를 전달할 거래 ID를 지정합니다. 지정된 거래 ID의 요청이 시작될 때 자동으로 데이터를 수집하여 전달합니다. 문자열 또는 문자열 배열값으로 거래 ID를 지정 가능합니다.

controlText

사용자 입장에서 컨트롤을 표현하는 텍스트를 지정합니다.

validators

컨트롤에 대한 유효성 검사를 지정합니다. require, unique, numeric, ipaddress, email, date, url 중 하나 이상을 지정할 수 있습니다.

transactConfig

업무 로직을 작성하지 않고 HTML 문법만으로 서버와의 거래 요청에 대한 설정을 지정합니다. 거래 요청에 대한 설정을 지정하여 컨트롤에 대한 데이터를 서버에 전달합니다.

<button type="button" class="btn btn-default" syn-datafield id="btnRetrieve" syn-options="{
    transactConfig: {
        triggerEvent: 'click',
        functionID: 'GD01',
        inputs: [{ type: 'Row', dataFieldID: 'MainForm' },{ type: 'Row', dataFieldID: 'MainForm' }],
        outputs: []}
    }">
    조회
</button>

triggerConfig

업무 로직을 작성하지 않고 HTML 문법만으로 컨트롤에 대한 이벤트 핸들러를 지정합니다. 이벤트에 대한 설정을 지정하여 컨트롤에 대한 반복적인 기능을 실행합니다.

<button type="button" syn-datafield id="btnUIFunction" syn-options="{
    triggerConfig: {
        triggerEvent:'click',
        triggerID: 'txtApplicationID',
        action: 'change',
        params: {
            options:{value: 'btnUIFunction triggerEvent'}
        }
    }}">
    화면 모듈 메서드 호출
</button>

<button type="button" syn-datafield id="btnControlFunction" syn-options="{
    triggerConfig: {
        triggerEvent:'click',
        triggerID: 'txtApplicationID',
        action: 'syn.uicontrols.$textbox.setValue',
        params: {
            options:{value: 'btnControlFunction triggerEvent'}
        }
    }}">
    컨트롤 메서드 호출
</button>

getter

화면에서 서버에 거래를 요청할 때 데이터를 전달할 컨트롤에 대한 데이터를 수집하여 반환하는 커스텀 기능을 지정합니다. true 또는 false 값을 지정할 수 있습니다.

setter

서버에서 화면에 대한 거래 응답을 받을 때 데이터를 컨트롤에 설정하는 커스텀 기능을 지정합니다. true 또는 false 값을 지정할 수 있습니다.

bindingID

syn.uicontrols.$data 컨트롤과 통합하여 메모리의 데이터 소스와 컨트롤 간의 데이터를 연동할 컨트롤에 대한 ID를 지정합니다. 문자열 값을 지정할 수 있습니다.

resourceKey

다국어 지원을 위한 리소스 키를 지정합니다. 문자열 값을 지정할 수 있습니다.

localeID

다국어 지원을 위한 로케일 ID를 지정합니다. 문자열 값을 지정할 수 있습니다.

required

컨트롤에 대한 필수 입력 여부를 지정합니다. true 또는 false 값을 지정할 수 있습니다.

tooltip

컨트롤에 대한 툴팁을 지정합니다. 문자열 값을 지정할 수 있습니다.