WebSquare.uiplugin.trigger

버튼의 역할을 하는 컴포넌트로 HTML의 <input> Tag의 type="button"과 유사한 인터페이스를 갖고있다.
type속성의 값에 따라 HTML의 input, table, a Tag로 구성된 다양한 버튼을 생성할 수 있으며 각 type에 대한 대략적인 설명은 아래와 같다.
- button : input Tag의 type="button"으로 구성 된다.
- image : table Tag로 이루어져있고 left, center, right에 각각에 CSS 적용이 가능하다.(image 링크)
- anchor : 최상위 anchor Tag로 이루어져있고 button의 text는 span Tag로 구성된다.

Type

uiplugin

Property Summary

anchorWithGroupClass: type이 anchor인 경우, w2group 클래스의 적용 여부 결정.
centerOffImageClass: type속성의 값이 "image"일 경우만 적용되며 중앙 td에 적용될 class명을 정의한다.
centerOnImageClass: type속성의 값이 "image"일 경우만 적용되며 마우스 over 시 중앙 td에 적용될 class명을 정의한다.
class: HTML의 class속성과 동일한 기능을 제공하며 css파일 또는 style블럭에 정의 한 class를 1개 또는 공백(space)를 이용하여 다중 적용이 가능하다.
disabled: [default:false, true] HTML의 disabled속성과 동일한 기능을 제공하며 컴포넌트를 비활성화 시킨다
id: 컴포넌트의 ID로 전역객체로 할당되며 script에서 본 id로 컴포넌트에 접근이 가능하다
leftOffImageClass: type속성의 값이 "image"일 경우만 적용되며 왼쪽 td에 적용될 class명을 정의한다.
leftOnImageClass: type속성의 값이 "image"일 경우만 적용되며 마우스 over 시 왼쪽 td에 적용될 class명을 정의한다.
localeRef: 웹스퀘어의 client 다국어 기능을 적용 할 때 출력하고자 하는 text의 key를 정의한다.세부 적용은 Client 다국어 적용 가이드를 참조한다.
rightOffImageClass: type속성의 값이 "image"일 경우만 적용되며 오른쪽 td에 적용될 class명을 정의한다.
rightOnImageClass: type속성의 값이 "image"일 경우만 적용되며 오른쪽 td에 적용될 class명을 정의한다.
tabIndex: Tab Key를 이용 한 컴포넌트의 포커스 순서로 HTML의 tabindex속성과 동일한 기능을 제공한다
toolTip: 웹스퀘어에서 만든 toolTip으로 컴포넌트의 추가정보를 명시한다
type: [default:button, image, anchor]Trigger 표현 방법을 정의하며 각 타입별 HTML 표현 방식은 아래와 같다.
userData1: 사용자 정의 데이터 속성
userData2: 사용자 정의 데이터 속성
userData3: 사용자 정의 데이터 속성

Event Summary

onblur: focus가 사라지면 발생한다
onclick: 마우스로 클릭하거나 컴포넌트에 focus가 있는 상태에서 space키를 누를 경우 발생한다.
ondblclick: 마우스로 더블클릭 시 발생한다
onfocus: focus가 들어 갔을 때 발생한다
onkeydown: 컴포넌트 영역에서 key를 눌렀을 때 발생
onkeypress: 컴포넌트 영역에서 key를 눌렀을 때 발생
onkeyup: 키보드에서 키를 눌렀다 놓았을 때 발생
onmousedown: 마우스 버튼을 누르는 순간 발생한다
onmousemove: 컴포넌트 영역에서 마우스 포인터가 이동될 때 발생한다
onmouseout: 마우스가 컴포넌트의 영역이나 링크 위에서 벗어났을 때 발생한다
onmouseover: 마우스가 컴포넌트의 영역이나 링크 위에 놓일 때 발생한다
onmouseup: 마우스 버튼을 눌렀다 놓을 때 발생한다

Method Summary

addClass( className ): 컴포넌트에 class를 추가한다
bind( eventType , function ): 컴포넌트의 이벤트를 동적으로 할당한다
changeClass( oldClassName , newClassName ): 컴포넌트에서 oldClassName의 이름을 가진 class를 newClassName으로 변경한다.
focus( ): 컴포넌트에 focus를 준다
getBackgroundImage( ): type속성의 값이 button 인 경우 CSS로 정의 된 background-image 속성값을 반환한다
getDisabled( ): 현재 설정되어있는 disabled 속성값을 반환한다
getGenerator( ): generator 하위의 컴포넌트에서 이 함수를 호출하여 자신을 생성한 부모 generator 객체를 가져온다
getID( ): 웹스퀘어 컴포넌트의 id를 반환한다
getLabel( ): label을 반환한다
getOpacity( ): CSS로 정의 된 컴포넌트의 Opacity(불투명도) 값을 반환한다
getPluginName( ): 웹스퀘어 컴포넌트의 pluginName(컴포넌트명)을 반환한다
getPosition( positionName ): 컴포넌트의 left 또는 top의 위치 값을 반환한다
getReadOnly( ): 현재 설정되어있는 readOnly 속성값을 반환한다
getSize( sizeName ): 컴포넌트의 크기 값을 반환합니다
getStyle( propertyName ): 컴포넌트에 적용 된 CSS의 propertyName에 해당하는 값을 반환한다
getStyleValue( style ): [deprecated]getStyle로 사용.
getTitle( ): title 속성값을 반환한다
getType( ): 컴포넌트의 현재 설정된 Type을 반환합니다
getUserData( key ): setUserData API로 설정 된 사용자 데이터 또는 소스(화면 XML)에 사용자가 임의의 property로 정의 된 값을 반환한다
getValue( ): 표시되어 있는 label을 반환한다
hasClass( className ): 컴포넌트가 parameter로 받은 className의 class를 가지고 있는지의 여부를 반환한다
hide( ): 컴포넌트를 화면에서 보이지 않도록 숨긴다.
removeClass( className ): 컴포넌트에 className의 class를 삭제한다.
setBackgroundImage( imgUrl ): type속성의 값이 button 인 경우 배경이미지를 설정한다.
setDisabled( disabled ): 컴포넌트의 disabled 속성을 설정한다
setEventPause( evList , flag ): 컴포넌트의 이벤트를 disable 또는 enable시킨다
setLabel( lable ): label(value)의 값을 변경한다
setOpacity( value ): 컴포넌트의 CSS Opacity(불투명도)값를 설정한다
setPosition( left , top , mode ): 컴포넌트의 위치(left,top)를 설정한다
setReadOnly( readOnly ): readOnly 속성값을 설정한다
setSize( width , heigth ): 컴포넌트의 크기(width,height)를 설정한다
setStyle( propertyName , value ): 컴포넌트의 property별 style을 설정한다
setTitle( 설정할 ): title 속성 값을 변경한다
setUserData( key , value ): 컴포넌트에 사용자 데이터를 설정한다
setValue( lable ): label(value)의 값을 변경한다
show( displayType ): 컴포넌트를 화면에 보이도록 설정한다.
toggleClass( className ): 컴포넌트가 className의 이름을 가진 class를 가지고 있다면 제거하고, 가지고 있지 않다면 추가한다.
trigger( type , array ): 컴포넌트에 등록 된 특정 이벤트를 발생시킨다
unbind( type , function ): 컴포넌트에 등록 된 이벤트를 제거한다
visible( flag ): [deprecated]show/hide 로 사용하거나 setStyle을 통해 visible 속성을 설정한다.

Property Detail

anchorWithGroupClass: type이 anchor인 경우, w2group 클래스의 적용 여부 결정.
true: 적용.
false (기본 값): 적용하지 않음.
centerOffImageClass: type속성의 값이 "image"일 경우만 적용되며 중앙 td에 적용될 class명을 정의한다.
class에는 image의 url을 명시하며 일반적으로 width값은 제외한다.(left class와 right class에 명시)
class 정의 예시 ) .tmpBtnCenter{ background-image: url(/img/btn_c.png); }
centerOnImageClass: type속성의 값이 "image"일 경우만 적용되며 마우스 over 시 중앙 td에 적용될 class명을 정의한다.
class에는 image의 url을 명시하며 일반적으로 width값은 제외한다.(left class와 right class에 명시)
class 정의 예시 ) .tmpBtnCenterOn{ background-image: url(/img/btn_c_on.png); }
class: HTML의 class속성과 동일한 기능을 제공하며 css파일 또는 style블럭에 정의 한 class를 1개 또는 공백(space)를 이용하여 다중 적용이 가능하다.
기본적으로 엔진 내부에서 각 컴포넌트 마다의 class를 적용하고 있으며 해당 class를 이용하여 컴포넌트의 css를 공통으로 적용 할 수 있다.
disabled: [default:false, true] HTML의 disabled속성과 동일한 기능을 제공하며 컴포넌트를 비활성화 시킨다.
id: 컴포넌트의 ID로 전역객체로 할당되며 script에서 본 id로 컴포넌트에 접근이 가능하다.
leftOffImageClass: type속성의 값이 "image"일 경우만 적용되며 왼쪽 td에 적용될 class명을 정의한다.
class에는 image의 url과 width 속성은 필수로 정의한다.(center td영역의 width를 주지 않을 경우)
class 정의 예시 ) .tmpBtnLeft{ background-image: url(/img/btn_l.png); width:10px; }
leftOnImageClass: type속성의 값이 "image"일 경우만 적용되며 마우스 over 시 왼쪽 td에 적용될 class명을 정의한다.
class에는 image의 url과 width 속성은 필수로 정의한다.(center td영역의 width를 주지 않을 경우)
class 정의 예시 ) .tmpBtnLeftOn{ background-image: url(/img/btn_l_on.png); }
localeRef: 웹스퀘어의 client 다국어 기능을 적용 할 때 출력하고자 하는 text의 key를 정의한다.세부 적용은 Client 다국어 적용 가이드를 참조한다.
만약 다국어 설정이 정상적으로 되어있지 않거나 본 속성에 정의한 값이 key로 정의 되지 않은 경우 "global_undefined"와 같은 text가 표현된다.
rightOffImageClass: type속성의 값이 "image"일 경우만 적용되며 오른쪽 td에 적용될 class명을 정의한다.
class에는 image의 url과 width 속성은 필수로 정의한다.(center td영역의 width를 주지 않을 경우)
class 정의 예시 ) .tmpBtnRight{ background-image: url(/img/btn_r.png); width:10px; }
rightOnImageClass: type속성의 값이 "image"일 경우만 적용되며 오른쪽 td에 적용될 class명을 정의한다.
class에는 image의 url과 width 속성은 필수로 정의한다.(center td영역의 width를 주지 않을 경우)
class 정의 예시 ) .tmpBtnRightOn{ background-image: url(/img/btn_r.png); width:10px; }
tabIndex: Tab Key를 이용 한 컴포넌트의 포커스 순서로 HTML의 tabindex속성과 동일한 기능을 제공한다
toolTip: 웹스퀘어에서 만든 toolTip으로 컴포넌트의 추가정보를 명시한다. 마우스 over시 표현된다.
type: [default:button, image, anchor]Trigger 표현 방법을 정의하며 각 타입별 HTML 표현 방식은 아래와 같다.
button : HTML input Tag로 표현되며 type="button"으로 구성 된다.
image : 최상위 table Tag로 이루어져있고 left, center, right에 각각에 class적용이 가능하다.(본 컴포넌트의 center,left,right로 시작하는 속성들을 참조)
anchor : 최상위 anchor Tag로 이루어져있고 button의 text는 span Tag로 구성된다.
userData1: 사용자 정의 데이터 속성. getUserData("userData1") API를 통해 설정한 값을 얻어올 수 있다.
userData2: 사용자 정의 데이터 속성. getUserData("userData2") API를 통해 설정한 값을 얻어올 수 있다.
userData3: 사용자 정의 데이터 속성. getUserData("userData3") API를 통해 설정한 값을 얻어올 수 있다.

Event Detail

onblur

focus가 사라지면 발생한다.

Parameter
name	type	description
e	Object	이벤트 객체

onclick

마우스로 클릭하거나 컴포넌트에 focus가 있는 상태에서 space키를 누를 경우 발생한다.
단, type 속성의 값이 image일 경우는 마우스로 클릭할 경우만 발생한다.

Parameter
name	type	description
e	Object	이벤트 객체

ondblclick

마우스로 더블클릭 시 발생한다.

Parameter
name	type	description
e	Object	이벤트 객체

onfocus

focus가 들어 갔을 때 발생한다.

Parameter
name	type	description
e	Object	이벤트 객체

onkeydown

컴포넌트 영역에서 key를 눌렀을 때 발생

Parameter
name	type	description
e	Object	이벤트 객체

onkeypress

컴포넌트 영역에서 key를 눌렀을 때 발생

Parameter
name	type	description
e	Object	이벤트 객체

onkeyup

키보드에서 키를 눌렀다 놓았을 때 발생

Parameter
name	type	description
e	Object	이벤트 객체

onmousedown

마우스 버튼을 누르는 순간 발생한다.

Parameter
name	type	description
e	Object	이벤트 객체

onmousemove

컴포넌트 영역에서 마우스 포인터가 이동될 때 발생한다.

Parameter
name	type	description
e	Object	이벤트 객체

onmouseout

마우스가 컴포넌트의 영역이나 링크 위에서 벗어났을 때 발생한다.

Parameter
name	type	description
e	Object	이벤트 객체

onmouseover

마우스가 컴포넌트의 영역이나 링크 위에 놓일 때 발생한다.

Parameter
name	type	description
e	Object	이벤트 객체

onmouseup

마우스 버튼을 눌렀다 놓을 때 발생한다.

Parameter
name	type	description
e	Object	이벤트 객체

Method Detail

addClass( className )

컴포넌트에 class를 추가한다.

Parameter
name	type	required	description
className	String	Y	추가하고 싶은 class의 이름

Sample

//input1 컴포넌트에 oddClass 라는 class를 추가 할 때 input1.addClass("oddClass");

bind( eventType , function )

컴포넌트의 이벤트를 동적으로 할당한다.

Parameter
name	type	required	description
eventType	String	Y	할당 할 이벤트명.
function	Function	Y	동적으로 할당 할 이벤트의 핸들러 function.

Sample

//input1에 onclick 이벤트에 핸들러 function을 직접 정의하여 bind. input1.bind("onclick", function(e){ alert(input1.getValue();})); //input1에 onclick 이벤트에 미리 정의 한 commObj.ev_click function을 bind. var commObj = {}; commObj.ev_click = function(e){ alert("click :: "+this.id); }; input1.bind("onclick", commObj.ev_click );

changeClass( oldClassName , newClassName )

컴포넌트에서 oldClassName의 이름을 가진 class를 newClassName으로 변경한다.
기본 설정은 addClass API를 통해 추가 된 class만 적용되며 컴포넌트의 class 속성에 직접 정의 된 class를 삭제해야하는 경우는 config.xml파일의 설정을 아래와 같이 적용해야한다.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
oldClassName	String	Y	삭제 할 class의 이름
newClassName	String	Y	추가 할 class의 이름

Sample

//아래와 같이 input 컴포넌트에 class를 정의 한 경우 <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> //config.xml 파일에 아래와 같이 정의. <style> <removeDefaultClass value="true" /> </style> //tmpInputClass class를 tmpInputWarninClass로 변경 input1.changeClass("tmpInputClass","tmpInputWarninClass");

focus( )

컴포넌트에 focus를 준다.

getBackgroundImage( )

type속성의 값이 button 인 경우 CSS로 정의 된 background-image 속성값을 반환한다.

Return
type	description
String	현재 CSS에 설정된 background-image 속성값

Sample

//아래와 같이 trigger1의 style에 background-image를 정의한 경우 <xf:trigger type="button" id="trigger1" style="position:relative;width:80px;height:23px;background-image: url(/img/book1.jpg);"> <xf:label><![CDATA[click]]></xf:label> </xf:trigger> var returnValue = trigger1.getBackgroundImage(); //return 예시 ) "url(http://localhost:9999/img/book1.jpg)"

getDisabled( )

현재 설정되어있는 disabled 속성값을 반환한다.

Return
type	description
Boolean	disabled 속성값

Sample

var returnValue = componentId.getDisabled(); return 예시 ) false

getGenerator( )

generator 하위의 컴포넌트에서 이 함수를 호출하여 자신을 생성한 부모 generator 객체를 가져온다.

Return
type	description
Object	부모 generator 객체

Sample

<w2:generator id="generator1"> <w2:trigger id="trigger1" ev:onclick="scwin.trigger1_onclick"></w2:trigger></w2:generator> scwin.trigger1.onclick = function(){ console.log(this.getGenerator());} // trigger1 클릭 시 generator1 객체가 console에 찍힌다. // https://inswave.com/jira/browse/WPF-1425 참조

getID( )

웹스퀘어 컴포넌트의 id를 반환한다.

Return
type	description
String	웹스퀘어 컴포넌트의 id

Sample

//동적으로 웹스퀘어 컴포넌트를 파라메터로 받았을 경우 아래와 같이 사용 할 수 있다. function fn_validCheck(tmpObj){ //tmpObj가 input1 이라는 ID를 가지고 있는 경우 var compID = tmpObj.getID(); //return 예시 ) "input1" }

getLabel( )

label을 반환한다. getValue와 동일한 기능을 제공한다.

Return
type	description
String	label값

Sample

//아래와 같이 trigger1의 label의 값을 click으로 정의한 경우 <xf:trigger type="button" id="trigger1" style="position:relative;width:80px;height:23px;"> <xf:label><![CDATA[click]]></xf:label> </xf:trigger> var returnValue = trigger1.getLabel(); //return 예시 ) "click"

getOpacity( )

CSS로 정의 된 컴포넌트의 Opacity(불투명도) 값을 반환한다.

Return
type	description
Integer	Opacity 값

Sample

//아래와 같이 input 컴포넌트에 opcacity css를 적용 한 경우 <xf:input id="input1" style="position: relative;width: 144px;height: 21px;opacity:0.2;"></xf:input> var returnValue = input1.getOpacity(); // returnValue는 0~1사이의 실수이다. //return 예시 ) "0.2"

getPluginName( )

웹스퀘어 컴포넌트의 pluginName(컴포넌트명)을 반환한다.

Return
type	description
String	웹스퀘어 컴포넌트의 pluginName

Sample

//아래와 같이 공통 function에서 동적으로 웹스퀘어 객체를 받았을 때 컴포넌트의 종류에 따른 분기처리를 할수 있다. var commObj = {}; commObj.fn_makeReqData = function(tmpObj){ var tmpID = tmpObj.getID(); //컴포넌트 ID var tmpCompType = tmpObj.getPluginName(); //컴포넌트 종류 if(tmpCompType == "input"){ //..로직.. }else if(tmpCompType == "gridView"){ //..로직 .. }else{ //..로직.. } };

getPosition( positionName )

컴포넌트의 left 또는 top의 위치 값을 반환한다. %로 설정된 경우, 픽셀로 변환하여 반환한다.

Parameter
name	type	required	description
positionName	String	Y	[left,top]위치 종류

Return
type	description
Number	컴포넌트의 위치 값

Sample

//아래와 같이 input 컴포넌트에 margin css를 적용했을 경우 <xf:input id="input1" style="position: relative;width: 144px;height: 21px;margin:10px;"></xf:input> var returnValue = input1.getPosition("top"); // returnValue는 픽셀 단위의 위치 값이다. //return 예시 ) 10

getReadOnly( )

현재 설정되어있는 readOnly 속성값을 반환한다.

Return
type	description
Boolean	현재 설정되어있는 readOnly 속성

Sample

var returnValue = componentId.getReadOnly(); //return 예시 ) false

getSize( sizeName )

컴포넌트의 크기 값을 반환합니다.%로 설정된 경우, 픽셀로 변환하여 반환한다.

Parameter
name	type	required	description
sizeName	String	Y	[height,innerHeight,outerHeight,outerMarginHeight,width,innerWidth,outerWidth,outerMarginWidth]크기 값의 종류. szieName별 계산 방법은 아래를 참고.

Return
type	description
Number	컴포넌트의 크기 값

Sample

var returnValue = componentId.getSize("width"); // returnValue는 픽셀 단위의 크기 값이다. %로 설정된 경우, 픽셀로 변환하여 반환한다. //return 예시 ) 100

getStyle( propertyName )

컴포넌트에 적용 된 CSS의 propertyName에 해당하는 값을 반환한다.

Parameter
name	type	required	description
propertyName	String	Y	반환 할 style의 property 이름

Return
type	description
String	style의 속성값

Sample

//아래와 같이 input 컴포넌트가 정의 된 경우 <xf:input id="input1" style="position: relative;width: 144px;height: 21px;"></xf:input> var returnValue = input1.getStyle("width"); //return 예시 ) "144px"

getStyleValue( style )

[deprecated]getStyle로 사용.
컴포넌트에 적용 된 CSS의 propertyName에 해당하는 값을 반환한다.

Parameter
name	type	required	description
style	String	Y	정의 된 style에서 사용자가 반환 받고자하는 속성명.

Return
type	description
String	style 속성에 정의 된 값(색을 반환하는 경우에는 색HexCode로 반환)

getTitle( )

title 속성값을 반환한다.

Return
type	description
String	title 속성값.

Sample

//아래와 같이 input 컴포넌트에 title이 정의 된 경우 <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" title="이름 입력"></xf:input> var tmpTitle = input1.getTitle(); //return 예시 ) "이름 입력"

getType( )

컴포넌트의 현재 설정된 Type을 반환합니다.

Return
type	description
String	현재 설정되어 있는 type 속성값

Sample

trigger의 속성 type이 button인 경우, trigger1.getType()은 button이다. image인 경우, trigger1.getType()은 image이다.

getUserData( key )

setUserData API로 설정 된 사용자 데이터 또는 소스(화면 XML)에 사용자가 임의의 property로 정의 된 값을 반환한다.

Parameter
name	type	required	description
key	String	Y	임의 데이터의 키

Return
type	description
String	key에 해당하는 데이터

Sample

//아래와 같이 input 컴포넌트의 사용자 속성(eduTest)이 적용 된 경우. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" eduTest="Hello"></xf:input> input1.getUserData("eduTest"); //return 예시 ) "Hello" //setUserData를 통해 set한 경우 input1.setUserData("eduTest","WebSquare"); input1.getUserData("WebSquare"); //return 예시 ) "Hello"

getValue( )

표시되어 있는 label을 반환한다. getLabel과 동일한 기능을 제공한다.

Return
type	description
String	label값

Sample

hasClass( className )

컴포넌트가 parameter로 받은 className의 class를 가지고 있는지의 여부를 반환한다.

Parameter
name	type	required	description
className	String	Y	검색 할 className

Return
type	description
Boolean	class를 가지고 있는지의 여부

Sample

//아래와 같이 input 컴포넌트에 class가 정의 된 경우 <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> var returnValue = input1.hasClass("tmpInputClass"); //return 예시 ) true

hide( )

컴포넌트를 화면에서 보이지 않도록 숨긴다.
엔진 내부적으로는 CSS를 display:none;과 visibility:hidden;으로 처리한다.

Sample

componentId.hide();

removeClass( className )

컴포넌트에 className의 class를 삭제한다.
기본 설정은 addClass API를 통해 추가 된 class만 적용되며 컴포넌트의 class 속성에 직접 정의 된 class를 삭제해야하는 경우는 config.xml파일의 설정을 아래와 같이 적용해야한다.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
className	String	Y	삭제 할 class명

Sample

setBackgroundImage( imgUrl )

type속성의 값이 button 인 경우 배경이미지를 설정한다.
해당값은 CSS의 background-image 속성값으로 설정된다.

Parameter
name	type	required	description
imgUrl	String	Y	이미지 URL

Sample

trigger1.setBackgroundImage('/img/btn_book1.jpg');

setDisabled( disabled )

컴포넌트의 disabled 속성을 설정한다. disabled 속성을 활성화 시키려면 true 비활성화 시키려면 false를 입력한다.

Parameter
name	type	required	description
disabled	Boolean	Y	disabled 속성을 활성화 시키려면 true 비활성화 시키려면 false

Sample

//컴포넌트의 disabled 적용 componentId.setDisabled(true);

setEventPause( evList , flag )

컴포넌트의 이벤트를 disable 또는 enable시킨다.

Parameter
name	type	required	description
evList	String	N	대상 이벤트 목록. 해당 인자가 주어지지 않을 경우 해당 컴포넌트의 모든 사용자 이벤트가 대상이 된다. (null을 지정하면 된다.)
flag	Boolean	Y	true인 경우 pause시키며, false인 경우 pause를 해제한다.

Sample

input1.setEventPause("onclick", true); //onclick이벤트를 동적으로 pause 한다. input1.setEventPause("onfocus,onblur", false); //onfocus이벤트와 onblur이벤트의 pause를 해제한다. input1.setEventPause(null, true); //input에 등록된 모든 사용자 이벤트를 pause 한다.

setLabel( lable )

label(value)의 값을 변경한다.setValue와 동일한 기능을 제공한다.

Parameter
name	type	required	description
lable	String	Y	출력 할 text

Sample

trigger1.setLabel('search'); //display 예시 ) trigger의 표시되는 텍스트는 search이다.

setOpacity( value )

컴포넌트의 CSS Opacity(불투명도)값를 설정한다.

Parameter
name	type	required	description
value	Number	Y	Opacity 값 (0과 1사이의 실수)

Sample

componentId.setOpacity(0.45);

setPosition( left , top , mode )

컴포넌트의 위치(left,top)를 설정한다.

Parameter
name	type	required	description
left	Number	Y	left의 값 또는 null.
top	Number	Y	top의 값 또는 null.
mode	String	N	[defulat:absolute, delta]absolute이면 x,y로 현재 값을 설정하고 delta이면 현재 값에 x,y값만큼을 더해서 설정.

Sample

//컴포넌트의 top만 100px로 설정. componentId.setPosition(null, 100);

setReadOnly( readOnly )

readOnly 속성값을 설정한다. readOnly 속성을 활성화 시키려면 true 비활성화 시키려면 false를 입력합니다.

Parameter
name	type	required	description
readOnly	Boolean	Y	readOnly 속성을 활성화 시키려면 true 비활성화 시키려면 false

Sample

//컴포넌트의 readonly 적용. componentId.setReadOnly(true);

setSize( width , heigth )

컴포넌트의 크기(width,height)를 설정한다.

Parameter
name	type	required	description
width	Number	Y	새로 설정할 컴포넌트의 width값 또는 null
heigth	Number	Y	새로 설정할 컴포넌트의 height값 또는 null

Sample

//컴포넌트의 height만 100px로 설정. componentId.setSize(null,100);

setStyle( propertyName , value )

컴포넌트의 property별 style을 설정한다.

Parameter
name	type	required	description
propertyName	String	Y	style 속성 이름
value	String	Y	적용 할 style의 값

Sample

//컴포넌트의 width를 200px로 설정 할 경우 componentId.setStyle("width", "200px"); //배경색을 olive로 변경 할 경우 componentId.setStyle("background-color","olive");

setTitle( 설정할 )

title 속성 값을 변경한다.

Parameter
name	type	required	description
설정할	String	Y	title 속성 값

Sample

trigger1.setTitle('search');

setUserData( key , value )

컴포넌트에 사용자 데이터를 설정한다. 컴포넌트에 설정이 가능한 key가 아닌 경우, key 설정이 불가능하며 log에 관련 내용이 출력 된다.

Parameter
name	type	required	description
key	String	Y	임의 데이터의 키
value	String	Y	임의 데이터의 값

Sample

//컴포넌트에 'data'라는 key로 'WebSquare'라는 값을 설정 할 경우 componentId.setUserData("data", "WebSquare"); //아래와 같이 컴포넌트에 설정이 가능한 key가 아닌 경우, key 설정이 불가능하다. componentId.setUserData("title", "WebSquare"); //log 표현 예시 ) !!!WARNING - [title] can't define as UserData

setValue( lable )

label(value)의 값을 변경한다.setLabel와 동일한 기능을 제공한다.

Parameter
name	type	required	description
lable	String	Y	출력 할 text

Sample

trigger1.setValue('search'); //display 예시 ) trigger의 표시되는 텍스트는 search이다.

show( displayType )

컴포넌트를 화면에 보이도록 설정한다.
엔진 내부적으로는 CSS를 display속성과 visibility:show;으로 처리한다.

Parameter
name	type	required	description
displayType	String	N	[default:block ,inline ,none ,""]display의 속성 값.

Sample

//display 속성이 "block"이 된다. componentId.show(); //class에 적용된 display 속성 값을 다시 복구. componentId.show("");

toggleClass( className )

컴포넌트가 className의 이름을 가진 class를 가지고 있다면 제거하고, 가지고 있지 않다면 추가한다.
기본 설정은 addClass API를 통해 추가 된 class만 삭제되며 컴포넌트의 class 속성에 직접 정의 된 class를 삭제해야하는 경우는 config.xml파일의 설정을 아래와 같이 적용해야한다.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
className	String	Y	설정 할 className

Sample

//아래와 같이 input 컴포넌트에 class를 정의 한 경우 <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> //config.xml 파일에 아래와 같이 정의. <style> <removeDefaultClass value="true" /> </style> //적용 된 tmpInputClass class 삭제 input1.toggleClass("tmpInputClass"); //tmpInputClass class를 다시 추가 input1.toggleClass("tmpInputClass");

trigger( type , array )

컴포넌트에 등록 된 특정 이벤트를 발생시킨다.

Parameter
name	type	required	description
type	String	Y	발생시킬 이벤트 이름
array	Array	N	이벤트 핸들러에 전달할 파라미터 배열

Sample

//input1 컴포넌트에 onclick이벤트를 발생시킨다. input1.trigger("onclick"); //input1에 onviewchange이벤트를 발생시키고 핸들러 함수에 (1,2) 인자를 전달하여 호출한다. input1.trigger("onviewchange", [1,2]);

unbind( type , function )

컴포넌트에 등록 된 이벤트를 제거한다.

Parameter
name	type	required	description
type	String	N	제거할 이벤트 이름. 생략할 경우 해당 컴포넌트의 모든 이벤트를 제거한다.
function	Function	N	제거할 이벤트의 핸들러 함수. 생략할 경우 해당 이벤트 type으로 등록된 모든 핸들러 함수를 제거한다.

Sample

//input1에 등록된 모든 이벤트를 제거 input1.unbind(); //input1에 등록된 onviewchange이벤트 핸들러 함수를 모두 제거 input1.unbind("onviewchange"); //input1에 등록된 onviewchange이벤트에서 func1 이벤트 핸들러를 제거 input1.unbind("onviewchange", func1);

visible( flag )

[deprecated]show/hide 로 사용하거나 setStyle을 통해 visible 속성을 설정한다.
컴포넌트의 style 중 visibility 값을 설정한다. true이면 "visible", false이면 "hidden"을 설정.

Parameter
name	type	required	description
flag	Boolean	Y	visibility 값을 설정할 값(true이면 "visible", false이면 "hidden"을 설정)