Class: AbstractComponentContainer

(Version : 2.0.4)

WUX.AbstractComponentContainer

컨테이너 입니다.

new AbstractComponentContainer

컨테이너 컴포넌트의 상위 클래스입니다.

Extends

String

backgroundStyle

컨테이너의 Background CSS Style을 직접 지정합니다. 배경색을 변경하거나, 배겨 이미지를 활용 할 때 사용합니다.

Properties:

Name	Type	Description
`CSS`	String

Example

 <panel backgroundStyle="#fff" ></panel> // 배경색
 <panel backgroundStyle="url(/images/bg.gif) repeat-x" ></panel> // 배경 이미지

String

layout

컴포넌트들이 배치되는 방법을 설정합니다.
 - vertical : 세로로배치
 - horizontal : 가로배치
 - column : 컬럼단위 배치
   - 컬럼은 부가적인 속성이 필요하므로 layoutConfig를 추가로 작성합니다.
   - 예) < w:layoutConfig type="column" sizes="1ft,1ft,1ft" />

Properties:

Name	Type	Description
`layout`	String	레이아웃 설정

Example

  <w:fieldPanel layout="vertical" ></panel>

Object

layoutConfig

레이아웃의 상세한 속성 및 부가 속성을 기술합니다. - Vertical, Horizontal 일때는 생략할 수 있습니다. - column 레이아웃에서는 sizes는 컬럼의 사이즈를 설정하고 ","로 구분하여 다수의 컬럼을 설정 할 수 있습니다.

Properties:

Name	Type	Description
`layoutConfig`	Object	레이아웃 상세 속성 설정

Example

예) <w:layoutConfig type="column" sizes="1ft,1ft" />

Boolean

padding

컨텐츠 영역의 내부 간격을 지정합니다. - Boolean 형식은 Global Config 의 값을 사용합니다. - 숫자 형식은 실제 간격의 크기를 변경합니다. 기본은 false입니다.

Properties:

Name	Type	Description
`padding`	Boolean	내부 간격 설정

Example

예) <w:fieldPanel padding="true">

Boolean

spacing

컴포넌트들의 사이에 일정한 간격을 유지하는 기능을 설정합니다. - Boolean 형식은 Global Config 의 값을 사용합니다. - 숫자 형식은 실제 간격의 크기를 변경합니다. 기본은 true입니다.

Properties:

Name	Type	Description
`spacing`	Boolean	컴포넌트 사이의 간격 설정

Example

예) <w:fieldPanel sapcing="true">

String

컴포넌트의 고유 식별자입니다. 하나의 Window 컴포넌트 내에서는 동일한 ID를 사용할 수 없습니다. 영문, 숫자를 조합하여 사용합니다.

Properties:

Name	Type	Description
`id`	String	id 설정

Example

 <button id="testID" />

inherited from
AbstractComponent

String

userData

서버로 전송되지않는 데이터 입니다. 컴포넌트에 임의의 데이터를 저장합니다.,

Properties:

Name	Type	Description
`id`	String	userData 설정

Example

 <button userData="T" />

inherited from
AbstractComponent

String

caption

컴포넌트의 텍스트를 설정합니다.

Properties:

Name	Type	Description
`캡션`	String	텍스트

Example

 <w:inputText caption="WUX.EMPTY_TEXT"/>

inherited from
AbstractUIComponent

Boolean

disabled

컴포넌트의 비활성화 여부를 설정합니다.

Properties:

Name	Type	Description
`비활성화`	Boolean	여부

Example

 <w:inputText disabled="false"/>

inherited from
AbstractUIComponent

Boolean

disableOnClick

버튼이 비활성화(disabled) 되어 있을때, 기본적으로 onClick이벤트가 발생하지 않지만 disableOnClick을 true 로 활성화 하면, onClick 이벤트를 발생시키도록 할 수 있습니다.

Properties:

Name	Type	Description
`적용여부`	Boolean

Example

<w:button caption="button" disableOnClick="true" />

inherited from
AbstractUIComponent

String

height

컴포넌트의 높이를 설정합니다.

Properties:

Name	Type	Description
`컴포넌트의`	String	높이

Example

 <fieldPanel height="1ft"/>

inherited from
AbstractUIComponent

String

styleName

컴포넌트의 스타일을 변경합니다. 컨테이너컴포넌트는 아래의 스타일속성을 갖고 있습니다. - plain : 선 형태의 스타일 - light : 기본적인 스타일 - round : Round 형태의 스타일

Properties:

Name	Type	Description
`스타일`	String	이름

Example

 <w:fieldPanel styleName="light"/>

inherited from
AbstractUIComponent

Boolean

visible

컴포넌트의 화면 표시 상태를 설정합니다.

Properties:

Name	Type	Description
`보임/숨김`	Boolean	여부

Example

 <w:inputText visible="true"/>

inherited from
AbstractUIComponent

String

width

컴포넌트의 넓이를 설정합니다.

Properties:

Name	Type	Description
`컴포넌트의`	String	넓이

Example

 <fieldPanel width="1ft"/>

inherited from
AbstractUIComponent

void

componentIterator

자신의 하위 컴포넌트 또는 자신의 모든 하위 컴포넌트를 Iterate 할 수 있습니다. - callback에서 Component 객체를 파라미터로 전달합니다. - 첫번째 파라미터는 callback 함수 - 두번째 파라미터에서 true를 사용할 경우 모든 하위 컴포넌트를 탐색합니다.

Parameters:

Name	Type	Description
`필터`	Function
`하위의`	Boolean	모든 컴포넌트 열거 여부

Example

     // 자신의 하위만 탐색
     WUX.getComponent('comp').componentIterator(function(comp){
         var id = comp.getId();
     });
     // 하위의 모든 컴포넌트 탐색
     WUX.getComponent('comp').componentIterator(function(comp){
         var id = comp.getId();
     }, true);

Number

getContentHeight

컴포넌트 컨텐츠 영역의 높이를 반환합니다.

Returns:

컨텐츠의 높이

Type: Number

Example

     WUX.getComponent('comp').getContentHeight();

Number

getContentWidth

컴포넌트 컨텐츠 영역의 넓이를 반환합니다.

Returns:

컨텐츠의 넓이

Type: Number

Example

     WUX.getComponent('comp').getContentWidth();

void

addEvent

     옵저버에 구독할 이벤트를 등록합니다.

Parameters:

Name	Type	Description
`type`	String	이벤트 타입
`fn`	Function	콜백함수
`context`	Object	컨텍스트

inherited from
Observer

void

removeEvent

     옵저버에 등록된 이벤트를 삭제합니다

Parameters:

Name	Type	Description
`type`	String	타입
`args`	String	파라미터
`context`	String	컨텍스트

inherited from
Observer

boolean

triggerEvent

     옵저버에 등록된 이벤트를 발생시킵니다.
     등록된 다른 모든 리스너에 이벤트가 전달됩니다.

Parameters:

Name	Type	Description
`type`	String	타입
`args`	String	파라미터

Returns:

Type: boolean

inherited from
Observer

String

getCx

컴포넌트 객체가 어떤 컴포넌트인지 판별할 수 있는 문자열을 반환합니다.

Returns:

컴포넌트 식별 문자

Type: String

Example

 //Button Component var compCx =
         WUX.getComponent('comp').getCx(); // Button

String

getId

컴포넌트의 id(식별자)를 반환합니다.

Returns:

컴포넌트 Id

Type: String

Example

 var idComp = WUX.getComponent('comp').getId();

Component

getParent

부모 컴포넌트를 반환합니다.

Returns:

부모 컴포넌트

Type: Component

Example

 var parentComp = WUX.getComponent('comp').getParent();

String or Object

getUserData

    컴포넌트에 저장되어 있는 사용자 정의 데이터를 반환합니다.
    map 객체로 저장되 어있을경우 key를 넘기면 해당 key의 value만 반환합니다.

Parameters:

Name	Type	Description
`key`	String	맵으로 입력되었을 경우의 key 값

Returns:

userData 사용자 정의 데이터

Type: String or Object

Example

 WUX.getComponent('comp').getUserData('key'); // return 맵의 키에
         해당하는 값 WUX.getComponent('comp').getUserData(); // return Object

Component

getWindow

대상 컴포넌트가 포함된 Window 컴포넌트를 반환합니다.

Returns:

컴포넌트

Type: Component

Example

 var windowComp = WUX.getComponent('comp').getWindow();

String or Object

setUserData

    컴포넌트에 사용자 정의데이터를 세팅합니다.
    서버로 전송되지 않습니다.

Returns:

userData 사용자 정의 데이터

Type: String or Object

Example

 WUX.getComponent('comp').setUserData('aa');
         WUX.getComponent('comp').setUserData('key', 'value');
         WUX.getComponent('comp').setUserData({key:'value',key2:'value'});

void

addClass

컴포넌트에 선언 되어있는 CSS Class를 추가합니다.

Parameters:

Name	Type	Description
`CSSClass`	String

Example

 WUX.getComponent('comp').addClass('user-css');

inherited from
AbstractUIComponent

String

getCaption

현재의 캡션 텍스트를 반환합니다.

Returns:

캡션 텍스트

Type: String

Example

 WUX.getComponent('comp').getCaption();

inherited from
AbstractUIComponent

String

getHeight

컴포넌트의 높이를 반환합니다.

Returns:

컴포넌트 높이

Type: String

Example

 var height = WUX.getComponent('comp').getHeight();

inherited from
AbstractUIComponent

String

getWidth

컴포넌트의 넓이를 반환합니다.

Returns:

컴포넌트 넓이

Type: String

Example

 var width = WUX.getComponent('comp').getWidth();

inherited from
AbstractUIComponent

void

hasClass

컴포넌트에서 동일한 CSS Class를 갖고 있는지를 확인합니다..

Parameters:

Name	Type	Description
`CSSClass`	String

Example

 if(WUX.getComponent('comp').hasClass('user-css')){ //hasClass }

inherited from
AbstractUIComponent

Boolean

isDisabled

컴포넌트의 비활성화 여부를 반환합니다.

Returns:

비활성화 여부

Type: Boolean

Example

 WUX.getComponent('comp').isDisabled();

inherited from
AbstractUIComponent

Boolean

isDisableOnClick

비활성화일때 클릭 가능한지 여부를 반환합니다.

Returns:

비활성화 클릭 가능여부

Type: Boolean

Example

     WUX.getComponent('comp').isDisableOnClick();

inherited from
AbstractUIComponent

Boolean

isVisible

컴포넌트의 화면 표시 여부를 반환합니다.

Returns:

화면표시 여부

Type: Boolean

Example

 WUX.getComponent('comp').isVisible();

inherited from
AbstractUIComponent

void

removeClass

컴포넌트에서 동일한 CSS Class를 삭제합니다.

Parameters:

Name	Type	Description
`CSSClass`	String

Example

 WUX.getComponent('comp').removeClass('user-css');

inherited from
AbstractUIComponent

void

setCaption

캡션 텍스트를 변경합니다.

Example

 WUX.getComponent('comp').setCaption('캡션');

inherited from
AbstractUIComponent

void

setDisabled

컴포넌트의 활성화/비활성화를 변경합니다.

Parameters:

Name	Type	Description
`비활성화`	Boolean	여부

Example

 WUX.getComponent('comp').setDisabled(true);

inherited from
AbstractUIComponent

void

setDisableOnClick

비활성화일때 클릭 가능한지 여부를 변경합니다.

Parameters:

Name	Type	Description
`disableOnClick`	Boolean	비활성화 여부

Examples

     WUX.getComponent('comp').setDisableOnClick(false) // 이벤트 발생안함
     WUX.getComponent('comp').setDisableOnClick(true) // 이벤트 발함

     WUX.getComponent('comp').setDisableOnClick(false) // 이벤트 발생안함
     WUX.getComponent('comp').setDisableOnClick(true) // 이벤트 발함

inherited from
AbstractUIComponent

void

setHeight

컴포넌트의 높이를 변경합니다.

Parameters:

Name	Type	Description
`컴포넌트`	String or Number	높이

Example

 WUX.getComponent('comp').setHeight(200);

inherited from
AbstractUIComponent

void

setLabelAlign

레이블의 Align을 설정합니다. (left, right, center)_(top,bottom, center) 식으로 표현이 가능하며 앞 부분은 좌,우 정렬, 뒷 부분은 위, 아래의 정렬을 하고 단일 center의 입력도 가능하다.

Example

 WUX.getComponent('comp').setLabelAlign('center_center');

inherited from
AbstractUIComponent

void

setSizeFull

컴포넌트를 넓이, 높이 모두 Fit 합니다.

Example

 WUX.getComponent('comp').setSizeFull();

inherited from
AbstractUIComponent

void

setVisible

컴포넌트의 화면 표시 여부를 변경합니다.

Parameters:

Name	Type	Description
`화면표시여부`	Boolean

Example

 WUX.getComponent('comp').setVisible(true);

inherited from
AbstractUIComponent

void

setWidth

컴포넌트의 넓이를 변경합니다.

Parameters:

Name	Type	Description
`컴포넌트`	String or Number	넓이

Example

 WUX.getComponent('comp').setWidth(200);

inherited from
AbstractUIComponent

Array

validate

컴포넌트가 갖고 있는 rule이 있다면 바인딩되어 있는 ValueObject를 통해 이를 체크하여 invalid를 반환한다.
또한 WUX.data.ValueObject.onEndValidate와 ValueObject 인스턴스의 onInvalid 이벤트를 실행시켜준다.
단, 바인딩 되어 있지 않은 컴포넌트는 체크를 수행하지 않는다.

Returns:

of WUX.Invalid

Type: Array

inherited from
AbstractUIComponent

Events
	onBeforeHidden 컴포넌트가숨겨지기이전에발생하는 이벤트입니다. Example `<button onBeforeHidden="onBeforeHidden" userData="param1" >`	inherited from AbstractUIComponent
	onBeforeVisible 컴포넌트가숨김상태에서보여지기이전에발생하는 이벤트 입니다. Example `<button onBeforeVisible="onBeforeVisible" userData="param1" >`	inherited from AbstractUIComponent
	onClick 컴포넌트를 클릭 했을 때 발생하는 이벤트입니다. Example `<button onClick="onClick" value="param1" >`	inherited from AbstractUIComponent
	onHidden 컴포넌트가숨겨지고난이후에발생하는 이벤트 입니다. Example `<button onHidden="onHidden" userData="param1" >`	inherited from AbstractUIComponent
	onVisible 컴포넌트가숨김상태에서보여지고난이후에 발생하는 이벤트 입니다. Example `<button onVisible="onVisible" userData="param1" >`	inherited from AbstractUIComponent

Class: AbstractComponentContainer

Classes

Namespaces

Global

WUX.AbstractComponentContainer

new AbstractComponentContainer

Extends