Type

uiplugin

Property Summary

class

HTML의 class 속성과 동일한 기능을 제공. CSS 파일이나 style 블럭에 정의한 여러 개의 class를 공백으로 구분하여 적용 가능.

disabled

[default:false, true] 컴포넌트 비활성 여부

displaymessage

validate(); 검증 결과가 실패일 경우, 메세지를 표시. [default: false, true]

id

컴포넌트 ID.

invalidMessage

displaymessage="true"이고 validate(); 검증 결과가 실패인 경우 표시되는 메시지.

invalidMessageFunc

validate(); 검증 결과가 실패일 경우, 결과 메시지를 동적으로 표시할 사용자 정의 함수 이름.

mandatory

[default:false, true] 필수 선택 적용 여부. validate 함수를 통해 입력값을 검증할 경우 필수 입력을 확인. (옵션 설명) "false" (기본 값) 필수 선택 적용하지 않음. "true" 필수 선택 적용. </xmp></xmp>

maxByteLength

입력 가능한 최대 Byte길이로 엔진에서 maxByteLength 이상의 글자를 입력하면 자동으로 잘라낸다.

maxlength

입력 가능한 최대길이로 엔진에서 maxLength 이상의 글자를 입력하면 자동으로 잘라낸다.

minByteLength

validate API를 호출 할 때 엔진에서 최소 Byte길이 체크 시에 참조한다.

minlength

validate API를 호출 할 때 엔진에서 최소길이 체크 시에 참조한다

nextTabID

Tab 키로 이동할 경우, Tab 키를 누를 때 선택되는 컴포넌트의 ID

onFocusClass

onFocus시 적용할 class명

placeholder

readOnly

[default:false, true]readonly의 여부로 HTML의 readonly속성과 동일한 기능을 제공한다

readOnlyClass

readOnly 상태 일때 적용할 class명

ref

DataCollection의 value 경로. DataCollection의 value와 웹스퀘어 컴포넌트를 바인딩할 때 사용.

refSync

Secret이 ref와 연동된 경우, key가 입력되는 즉시 ref를 갱신. [default:false, true]

tabIndex

Tab 키를 이용하여 포커스를 변경할 경우, 해당 컴포넌트에 포커스를 주는 순서.

title

HTML의 title 속성과 동일

toolTip

사용자가 컴포넌트에 마우스-오버할 때 표시되는 텍스트

userData1

사용자 정의 데이터 속성

userData2

사용자 정의 데이터 속성

userData3

사용자 정의 데이터 속성

validator

유효성 체크 함수 이름.

Event Summary

onblur

포커스를 잃었을 때 발생한다

onchange

component의 value가 변경되었을 때 발생하는 이벤트로 focus out 시점에 발생한다.

onclick

마우스로 component를 클릭했을 때 발생한다

ondblclick

마우스로 component를 더블 클릭했을 때 발생한다

onfocus

포커스를 얻었을 때 발생한다

onkeydown

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

onkeypress

키보드에서 키를 눌렀을 때(누르고 있는 동안에도) 발생한다

onkeyup

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

onmousedown

마우스를 클릭 했을 때(마우스를 누르는 순간) 발생한다

onmousemove

마우스 포인터가 이동될 때 발생한다

onmouseout

마우스가 지정된 영역을 벗어났을 때 발생한다

onmouseover

마우스가 지정된 영역 위에 놓일 때 발생한다

onmouseup

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

onviewchange

키보드 또는 마우스 조작을 통해 값이 변경된 경우 발생.

Method Summary

commit( )

secret이 ref와 연동된 경우 secret창에 보이는 값을 ref에 반영하는 함수

getDataType( )

dataType 속성값을 반환

getValue( )

컴포넌트의 value를 반환한다

setDisabled( disabled )

컴포넌트의 disabled 속성을 설정

setStyle( propertyName , value )

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

setValue( value )

컴포넌트의 value를 설정한다

show( displayType )

컴포넌트를 화면에 보이도록 설정한다.

trigger( type , array )

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

validate( )

컴포넌트의 유효성 관련 속성값을 통해 유효성 검사를 실행

class

HTML의 class 속성과 동일한 기능을 제공. CSS 파일이나 style 블럭에 정의한 여러 개의 class를 공백으로 구분하여 적용 가능.
Engine 내부에서 각 컴포넌트 별로 지정된 class를 적용하나, class 속성을 이용하여 컴포넌트의 CSS를 제어 가능.

disabled

[default:false, true] 컴포넌트 비활성 여부. (옵션 설명) "false" (기본 값) 컴포넌트를 비활성화 하지 않음. "true" 컴포넌트를 비활성화 함.

displaymessage

validate(); 검증 결과가 실패일 경우, 메세지를 표시. [default: false, true]
기본적으로 엔진 내부에 정의된 메시지를 표시. 단, invalidMessage 속성이 정의된 경우, 해당 속성으로 정의된 메시지를 표시. (옵션 설명) "false" (기본 값) : 결과 메시지를 표시하지 않음. "true" : 결과 메시지를 표시. (관련 API) validate(); (함수) invalidMessage (속성)

id

컴포넌트 ID.
컴포넌트 ID는 전역 객체로 할당됨. 각 컴포넌트 ID를 통해 Script에서 해당 컴포넌트에 접근 가능.

invalidMessage

displaymessage="true"이고 validate(); 검증 결과가 실패인 경우 표시되는 메시지.
invalidMessageFunc 속성과 동시 적용 불가. (관련 API) validate(); displaymessage="true" (!주의!) invalidMessageFunc 속성과 동시 적용 불가.

invalidMessageFunc

validate(); 검증 결과가 실패일 경우, 결과 메시지를 동적으로 표시할 사용자 정의 함수 이름.
invalidMessage 속성과 동시 적용 불가. // (사용자 정의 함수 예) // 아래 type에 대한 검증 실패 시, 메시지를 동적으로 생성하는 예. // mandatory, minlength, minByteLength scwin.fn_msg = function(){ var invalidType = this.getType(); // invalid type var invalidValue = this.getValue(); // invalid value switch (invalidType) { case "mandatory" : msg = "Information is required."; break; case "minLength" : msg = "Minimum " + invalidValue + " digits are required."; break; case "minByteLength" : msg = "Minimum " + invalidValue + " bytes are required."; break; default : msg = "Not valid."; break; } alert(msg); return msg; }
(관련 API) validate(); invalidMessage 속성과 동시 적용 불가.

mandatory

[default:false, true] 필수 선택 적용 여부. validate 함수를 통해 입력값을 검증할 경우 필수 입력을 확인. (옵션 설명) "false" (기본 값) 필수 선택 적용하지 않음. "true" 필수 선택 적용.
(관련 함수) validate();

maxByteLength

입력 가능한 최대 Byte길이로 엔진에서 maxByteLength 이상의 글자를 입력하면 자동으로 잘라낸다.
maxLength속성의 값과 본 속성에 지정한 값 중 더 작은 수가 우선 순위로 적용된다.
config.xml 파일의 byteCheckEncoding 설정 값이 euc-kr이면 한글은 2byte로 utf-8이면 3byte로 계산한다.

maxlength

입력 가능한 최대길이로 엔진에서 maxLength 이상의 글자를 입력하면 자동으로 잘라낸다.
maxByteLength속성의 값과 본 속성에 지정한 값 중 더 작은 수가 우선 순위로 적용된다.

minByteLength

validate API를 호출 할 때 엔진에서 최소 Byte길이 체크 시에 참조한다.
config.xml 파일의 byteCheckEncoding 설정 값이 euc-kr이면 한글은 2byte로 utf-8이면 3byte로 계산한다.

minlength

validate API를 호출 할 때 엔진에서 최소길이 체크 시에 참조한다.

nextTabID

Tab 키로 이동할 경우, Tab 키를 누를 때 선택되는 컴포넌트의 ID.

onFocusClass

onFocus시 적용할 class명.

placeholder

readOnly

[default:false, true]readonly의 여부로 HTML의 readonly속성과 동일한 기능을 제공한다.

readOnlyClass

readOnly 상태 일때 적용할 class명.

ref

DataCollection의 value 경로. DataCollection의 value와 웹스퀘어 컴포넌트를 바인딩할 때 사용.
"data:" prefix를 추가하여 data:[DataCollection ID].[Key id 또는 Column id] 형태로 지정해야 함.
DataList와 바인딩된 경우, GridView에서 선택된 행의 값이 바인딩됨. (작성 예) data:dataMap1.dept

Instance Data와 연동 할 경우 연동 할 XML 데이터의 XPath를 명시해야 함. (작성 예) res/userInfo/dept/@value

refSync

Secret이 ref와 연동된 경우, key가 입력되는 즉시 ref를 갱신. [default:false, true]
Secret이 DataMap과 ref로 연동되고 refSync="true"인 경우, onkeydown 이벤트에서 dataMap1.get("key1")를 실행하면 입력된 값이 그대로 반환됨. 옵션 설명) "true" 즉시 갱신. "false" (기본 값) 즉시 갱신하지 않음.
(제약사항) Enter키와 Tab키만 지원하며, commit() API를 사용해야 함. (예) secret1.commit();

tabIndex

Tab 키를 이용하여 포커스를 변경할 경우, 해당 컴포넌트에 포커스를 주는 순서.
HTML의 tabindex 속성과 동일.

title

HTML의 title 속성과 동일. 마우스 오버 시, title로 저장한 값이 툴팁으로 표시됨. 일반적으로 웹접근성 지원용으로 설정.

toolTip

사용자가 컴포넌트에 마우스-오버할 때 표시되는 텍스트. 웹스퀘어가 제공하는 툴팁으로, 컴포넌트의 추가 정보를 명시.

userData1

사용자 정의 데이터 속성. getUserData("userData1") API를 통해 설정한 값을 얻어올 수 있음. // 속성 값 얻어오기 예시 getUserData("userData1");

userData2

사용자 정의 데이터 속성. getUserData("userData2") API를 통해 설정한 값을 얻어올 수 있음. // 속성 값 얻어오기 예시 getUserData("userData2");

userData3

사용자 정의 데이터 속성. getUserData("userData3") API를 통해 설정한 값을 얻어올 수 있음. // 속성 값 얻어오기 예시 getUserData("userData3");

validator

유효성 체크 함수 이름.
컴포넌트에서 blur가 발생하는 시점에 본 속성에 정의한 함수가 실행됨.
즉, onblur 이벤트 이전에 실행되며, blur가 발생하는 시점에 유효성을 확인하며 return을 통해 value를 변경 할 수 있음. (구현 예시) function fn_idValid(tmpVal){ //tmpVal에는 본 컴포넌트의 value값이 담겨있다. 로직 구현후 최종값을 return한다. return tmpVal; };

onblur

포커스를 잃었을 때 발생한다.

Parameter

name	type	description
e	Object	이벤트 객체

onchange

component의 value가 변경되었을 때 발생하는 이벤트로 focus out 시점에 발생한다.
스크립트를 통해 값이 변경 된 경우에도 발생하며, 이전값/이후값을 비교 할 때는 onviewchage 이벤트를 사용한다.

onclick

마우스로 component를 클릭했을 때 발생한다.

Parameter

name	type	description
e	Object	이벤트 객체

ondblclick

마우스로 component를 더블 클릭했을 때 발생한다.

Parameter

name	type	description
e	Object	이벤트 객체

onfocus

포커스를 얻었을 때 발생한다.

Parameter

name	type	description
e	Object	이벤트 객체

onkeydown

키보드에서 키를 눌렀을 때 발생한다.

Parameter

name	type	description
e	Object	이벤트 객체

onkeypress

키보드에서 키를 눌렀을 때(누르고 있는 동안에도) 발생한다.

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	이벤트 객체

onviewchange

키보드 또는 마우스 조작을 통해 값이 변경된 경우 발생.
스크립트를 통해 값이 변경된 경우에는 발생하지 않음. (native onchange 이벤트와 유사함.)

Parameter

name	type	description
info	JSON	oldValue, newValue를 포함한 JSON을 반환한다. <String> info.oldValue : 이전 값 <String> info.newValue : 변경된 값

Sample

//컴포넌트 태그 안에 event가 있는 경우 <script ev:event="onviewchange( info )"><![CDATA[ var oldValue = info.oldValue; var newValue = info.newValue; ]]></script>

commit( )

secret이 ref와 연동된 경우 secret창에 보이는 값을 ref에 반영하는 함수
모든키의 실시간 적용은 지원하지 않으며, Enter키와 tab키 동작일 경우만 사용가능

Sample

scwin.secret1_onkeydown = function(e) { if((e.charCode || e.keyCode) === 13) { secret1.commit(); // secret에 현재 입력된 값을 dataMap1.key1에 반영한다. 이를 생략할 경우 key1값을 꺼냈을 때 secret에 입력되기 이전의 값을 얻게 된다. dataMap1.get("key1"); } }

getDataType( )

dataType 속성값을 반환. [default: text]

Return

type	description
String	secret의 dataType

Sample

// 아래와 같이 secret이 정의 된 경우 <xf:secret id="secret1" style="position: relative;width: 144px;height: 21px;"></xf:secret> var returnValue = secret1.getDataType(); // (반환 예) "text"

getValue( )

컴포넌트의 value를 반환한다.

Return

type	description
String	컴포넌트의 value

Sample

//사용자가 secret1 컴포넌트에 "WebSquare"를 입력 한 경우 var tmpRs = secret1.getValue(); //return 예시 ) "WebSquare"

setDisabled( disabled )

컴포넌트의 disabled 속성을 설정.

Parameter

name	type	required	description
disabled	Boolean	Y	disabled 상태 true: disabled 속성 활성화 false: disabled 속성 비활성화

Sample

//컴포넌트에 disabled 설정 componentId.setDisabled(true);

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");

setValue( value )

컴포넌트의 value를 설정한다.

Parameter

name	type	required	description
value	String	Y	secret의 value 값

Sample

secret1.setValue("WebSquare");

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("");

trigger( type , array )

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

Parameter

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

Sample

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

validate( )

컴포넌트의 유효성 관련 속성값을 통해 유효성 검사를 실행. (관련 속성) displaymessage="true" (유효성 관련 속성) mandatory minlength maxlength minByteLength maxByteLength

Return

type	description
Boolean	유효성 검사 결과 값

Sample

// mandatory 속성을 지정. <xf:secret id="secret1" mandatory="true"></xf:secret> var returnValue = secret1.validate(); // (반환 값) - false (input의 값이 없을 경우) // (반환 값) - true (input의 값이 있을 경우) // displaymessage="true" 속성을 지정하고 유효성 검사에서 false가 반환될 경우, // 엔진에서 내부에서 설정한"필수 입력 항목입니다"가 표시됨.