Widget 클래스의 주요 기능은 아래와 같습니다.
1. options에 작성한 프로퍼티를 각 컴포넌트에 할당합니다.
2. showTo 엘리먼트를 생성합니다.
3. mc.Component.Instance에 컴포넌트를 등록합니다.
- 이를 통해 생성한 컴포넌트를 추출할 수 있습니다.
4. Custom Event 오브젝트를 생성하여 클래스에 할당합니다.
- 이를 통해 fire되는 이벤트를 인식할 수 있습니다.
5. 속성 값을 엘리먼트에 설정합니다.
- value, name, tabIndex, readOnly, disabled, enable를 설정합니다.
- 프로퍼티로 제공하지 않는 속성은 options.attr: {attribute_name: attribute_value} 형태로 작성하면 됩니다.
6. options에 options를 지정할 수 있습니다.
options에 많은 코드를 작성하게 되므로 코드가 복잡해질 수 있습니다.
이때 별도의 오브젝트에 관련된 코드를 작성해두면
- 다른 options에서도 사용할 수 있으며
- options 코드도 간단하게 작성할 수 있습니다.
- TextType을 생성하는 example
var typeOptions = {
guideMsg: '값을 입력하세요?',
minLength: 3,
maxLength: 9
}
new mc.types.TextType({
showTo: 'showArea',
options: typeOptions
}}
| Options | Component |
|---|---|
| IMEmode {Boolean} | widget.Widget |
|
IMEmode. default: false
|
|
| isExecComponent {Boolean} | widget.Widget |
|
mc.component.Component.exec() 실행 여부. default:true
클래스를 extend()하면 ccode로 mc.component.Component.exec() 실행 여부를 체크할 수 있지만,
new로 오브젝트를 생성한 경우 체크할 수 없어 mc.component.Component.exec() 실행하게 됩니다.
이때 new를 하는 클래스에서 isExecComponent 값을 false로 설정하면 실행하지 않게 되어
new한 클래스에서 실행할 수 있습니다.
|
|
| showToHide {Boolean} | widget.Widget |
|
default: false
true: showTo 엘리먼트를 display none 상태로 설정
|
|
| Method | Component |
|---|---|
allocate
(Object, Hash)
|
widget.Widget |
|
options 또는 options.options에 작성한 프로퍼티를 this에 설정합니다.
|
|
applyAttr
(Object, HTMLElement/String, Hash) : Object
|
widget.Widget |
|
options에 작성한 속성 값을 엘리먼트에 적용합니다.
|
|
cacheShowTo
(Object, Hash)
|
widget.Widget |
|
showTo를 cache 또는 reset합니다.
|
|
createTitle
(Object, HTMLElement) : Object
|
widget.Widget |
|
Title 오브젝트를 생성하여 Title 바를 표시합니다.
|
|
newTemplate
(Object, String, String) : Object
|
widget.Widget |
|
템플릿 오브젝트를 생성합니다.
|
|
ready
(Object) : Object
|
widget.Widget |
|
클래스의 main 함수를 실행하여 실행 환경 설정을 완료한 시점에서 실행합니다.
|
|
setAttr
(Object, HTMLElement, String/Array, String/Array) : Object
|
widget.Widget |
|
엘리먼트에 속성 값을 설정합니다.
|
|
setAttrNode
(Hash, HTMLElement/String) : Object
|
widget.Widget |
|
options.attr에 작성한 속성 값을 엘리먼트에 적용합니다.
|
|
setComponentId
(Object)
|
widget.Widget |
|
오브젝트 id를 지정하지 않았다면 'mc-widget-' + 일련번호 형태로 부여합니다.
|
|
setDisable
(String, HTMLElement/String) : Object
|
widget.Widget |
|
엘리먼트를 disabled 상태로 설정합니다.
|
|
setEnable
(String, HTMLElement/String) : Object
|
widget.Widget |
|
엘리먼트를 enable 상태로 설정합니다.
|
|
setOptions
(Object, Hash, Boolean)
|
widget.Widget |
|
Widget options와 인스턴스에 적용할 options를 설정합니다.
|
|
setOutSide
(Object, String, String, Hash, HTMLElement/String) : Object
|
widget.Widget |
|
outside 엘리먼트를 생성하여 showTo 엘리먼트에 차일드로 첨부합니다.
|
|
setShowTo
(Object, Hash) : Object
|
widget.Widget |
|
showTo 엘리먼트 오브젝트를 생성합니다.
|
|
setStyle
(Object, HTMLElement/String, Hash, String) : Object
|
widget.Widget |
|
options.style을 엘리먼트에 설정합니다.
|
|
setToolbar
(Object, Object/Hash/String/Array|/TMLElement)
|
widget.Widget |
|
opts에 {toolbar: toolbar 오브젝트} 형태로 지정한 경우에만 처리합니다.
|
|
setWH
(Object, HTMLElement/String, Hash) : Object
|
widget.Widget |
|
넓이, 높이를 설정합니다.
|
|
setXY
(Object, HTMLElement/String, Hash) : Object
|
widget.Widget |
|
X, Y를 지정한 경우 이를 설정합니다.
|
|
setZIndex
(Object, Number) : Object
|
widget.Widget |
|
오브젝트에 z-index를 설정합니다.
|
|
showMessage
(Object, String, HTMLElement/String) : Object
|
widget.Widget |
|
에러 메시지를 표시합니다
|
|
| Custom Event | Component |
|---|---|
| invalid (HTMLElement el, Hash message, Object that) | widget.Widget |
|
엘리먼트에 입력한 값에서 오류가 발생했을 때 fire됩니다.
|
|
| openOptions (Object that) | widget.Widget |
|
생성할 클래스에 options 할당을 완료했을 때 fire됩니다.
|
|
| showToHide (HTMLElement showto, Object that) | widget.Widget |
|
showTo 엘리먼트가 hidden 상태로 설정되었을 때 fire됩니다.
|
|
| Examples | |
|---|---|
| options | |
|
클래스에 적용할 options를 별도로 작성하고 이를 options에 지정합니다.
|
|