- addClass(
className
)
-
컴포넌트에 className의 이름을 가진 class를 추가합니다.
Parameter
| className | String | Y | 추가하고 싶은 class의 이름 |
Sample
componentId.addClass("selected"); // 컴포넌트에 selected 라는 class를 추가.
- bind(
type
,
function
)
-
컴포넌트의 이벤트를 동적으로 할당합니다.
Parameter
| type | String | Y | 동적으로 할당할 이벤트의 이름 |
| function | Function | Y | 동적으로 할당할 이벤트의 핸들러 ㅎ마수 |
Sample
* | input1.bind("onclick", function(e){ alert(input1.getValue();})); // input1 클릭 시 이벤트 발생. 브라우저 이벤트로 등록
* | input1.bind("onchange", function(e){ alert(input1.getValue();})); // input1 값 변경 시 . 브라우저 이벤트가 아니고 웹스퀘어 엔진 내부의 이벤트로 등록된다.
- changeClass(
oldClassName
,
newClassName
)
-
컴포넌트에서 oldClassName의 이름을 가진 class를 newClassName으로 치환합니다.
Parameter
| oldClassName | String | Y | element에서 삭제할 class의 이름 |
| newClassName | String | Y | element에서 추가할 class의 이름 |
Sample
componentId.changeClass("selected","default"); // 컴포넌트에 selected 라는 class를 default라는 class로 변경.
- focus(
)
-
searchbox에 focus를 준다.
Sample
searchbox1.focus();
- getDataType(
)
-
searchbox의 dataType을 반환합니다.
Return
| String | searchbox의 dataType |
Sample
<![CDATA[ var returnValue = searchbox1.getDataType();
returnValue는 dataType(text,number,date,time)의 값을 가진다.
searchbox의 dataType속성을 미지정할 경우, 기본값은 text가 된다.]]>
- getDisabled(
)
-
현재 설정되어있는 disabled 속성을 반환합니다.
Return
| Boolean | 현재 설정되어있는 disabled 속성 |
Sample
var returnValue = componentId.getDisabled(); // returnValue는 true혹은 false이다.
- getDisplayFormat(
)
-
현재 컴포넌트에 설정된 displayFormat을 반환합니다.
Return
| String | 현재 설정된 displayFormat |
Sample
<![CDATA[ 예) dataType이 date이고 ioFormat을 yyyyMM, dateMask를 yyyy-MM을 적용한 경우, 2012-01
var returnValue = searchbox1.getDisplayFormat();
returnValue는 yyyy-MM이다.]]>
- getDisplayFormatter(
)
-
현재 컴포넌트에 설정된 format용 함수를 반환합니다.
Return
| String | 현재 컴포넌트에 설정된 format용 함수 |
Sample
<![CDATA[ var returnValue = searchbox1.getDisplayFormatter();
displayFormatter에 설정된 함수명이나 setDisplayFormatter 함수를 이용하여 설정한 함수명을 반환한다.
예를 들면, returnValue는 setFormat이다.]]>
- getDisplayValue(
)
-
현재 보여지는 값을 반환합니다. 보여지는 값은 format이 설정되어진 값입니다.
Return
| String | foramt이 적용되어진 값 |
Sample
<![CDATA[ 예: dataType이 date이고 ioFormat을 yyyyMM, dateMask를 yyyy-MM을 적용한 경우, 2012-01
var returnValue = searchbox1.getDisplayValue();
returnValue는 2012-01이다.]]>
- getFormattedValue(
)
-
formatted된 searchbox의 값을 반환합니다.
Return
| String | formatted된 searchbox의 값 |
Sample
<![CDATA[ 예: dataType이 date이고 ioFormat을 yyyyMM, dateMask를 yyyy-MM을 적용한 경우, 2012-01
var returnValue = searchbox1.getValue();
returnValue는 displayFormat과 Mask가 적용된 문자열을 반환한다.
returnValue는 2012-01이다.]]>
- getGeneratedComponent(
id
)
-
동일한 index에 속한 다른 컴퍼넌트 객체를 가져옵니다.
Parameter
| id | String | N | 찾아오려는 컴퍼넌트 id |
Return
| Object | 동일한 id에 속한 다른 컴퍼넌트 객체 |
Sample
<![CDATA[다음과 같이 사용할 수 있다.
var content = this.getGeneratedComponent("content1");
content.setValue("");]]>
- getGeneratedIndex(
)
-
generator 반복부에서 해당 index를 반환합니다.
Return
| Number | generator 반복부에서 해당 index. |
- getID(
)
-
웹스퀘어 컴포넌트의 id를 반환합니다.
Return
| String | 웹스퀘어 컴포넌트의 id |
Sample
<![CDATA[다음과 같이 사용할 수 있다.
<script ev:event="onclick" type="javascript"><![CDATA[
var returnValue = this.getID();
]]]]><![CDATA[></script>
returnValue는 컴포넌트의 id(예: input1)이다.]]>
- getOpacity(
)
-
컴포넌트의 Opacity 값을 반환합니다.
Sample
var returnValue = componentId.getOpacity(); // returnValue는 0~1사이의 실수이다.
- getPluginName(
)
-
웹스퀘어 컴포넌트의 pluginName을 반환합니다.
Return
| String | 웹스퀘어 컴포넌트의 pluginName |
Sample
<![CDATA[다음과 같이 사용할 수 있다.
<script ev:event="onclick" type="javascript"><![CDATA[
var returnValue = this.getPluginName();
]]]]><![CDATA[></script>
returnValue는 컴포넌트의 종류(예: input, checkbox ...)이다.]]>
- getPosition(
positionName
)
-
컴포넌트의 위치 값을 반환합니다.
Parameter
| positionName | String | Y | 위치 값의 종류('left'이거나 'top') |
Sample
var returnValue = componentId.getPosition("left"); // returnValue는 픽셀 단위의 위치 값이다. %로 설정된 경우, 픽셀로 변환하여 반환한다.
- getReadOnly(
)
-
현재 설정되어있는 readOnly 속성을 반환합니다.
Return
| Boolean | 현재 설정되어있는 readOnly 속성 |
Sample
var returnValue = componentId.getReadOnly(); // returnValue는 true혹은 false이다.
- getSize(
sizeName
)
-
컴포넌트의 크기 값을 반환합니다.
Parameter
| sizeName | String | Y | 크기 값의 종류. szieName의 종류는 다음을 참고.
<![CDATA[height : element.clientHeight
innerHeight : element.clientHeight + padding
outerHeight : element.clientHeight + padding + border
outerMarginHeight : element.clientHeight + padding + border + margin
width : element.clientWidth
innerWidth : element.clientWidth + padding
outerWidth : element.clientWidth + padding + border
outerMarginWidth : element.clientWidth + padding + border + margin]]> |
Sample
var returnValue = componentId.getSize("width"); // returnValue는 픽셀 단위의 크기 값이다. %로 설정된 경우, 픽셀로 변환하여 반환한다.
- getStyle(
propertyName
)
-
컴포넌트의 propertyName에 해당하는 style의 값을 반환합니다.
Parameter
| propertyName | String | Y | 반환할 style의 property 이름 |
Return
| String | 객체의 style 속성 값 |
Sample
var returnValue = componentId.getStyle("width"); // returnValue는 width에 대한 픽셀 단위, 또는 % 단위가 된다.
- getStyleValue(
style
)
-
컴포넌트의 style중에서 입력받은 style의 값을 반환합니다.
Parameter
| style | String | Y | style중에서 사용자가 구하고 싶은 값 |
Return
| String | style중에서 사용자가 입력한 style의 값(색을 반환하는 경우에는 색HexCode로 반환) |
- getTitle(
)
-
component의 title 속성을 가져온다.
Return
| String | component의 title 속성값. |
Sample
var title = componentId.getTitle();
- getUserData(
key
)
-
설정된 사용자 임의의 데이터를 반환 합니다.
xml상에 설정된 사용자 값도 가져올 수 있습니다.
Parameter
| key | String | Y | 임의 데이터의 키 |
Return
| String | key 값에 해당하는 데이터의 값 |
Sample
<![CDATA[componentId.setUserData("data", "WebSquare");
var returnValue = componentId.getUserData("data");
returnValue는 WebSquare이다.
<xf:input id="input1" style="position: absolute ;left:0px;top:0px;width: 100px;height: 20px;" data2="WEBSQUARE">...
와 같이 xml상에 설정된 사용자 정의 값도 가져올 수 있다.
var returnValue = componentId.getUserData("data2");
returnValue는 WEBSQUARE이다.]]>
- getValue(
)
-
현재 컴포넌트가 가진 값을 반환합니다.
Return
| String | searchbox의 값 |
Sample
<![CDATA[ 예: dataType이 date이고 ioFormat을 yyyyMM, dateMask를 yyyy-MM을 적용한 경우, 2012-01
var returnValue = searchbox1.getValue();
returnValue는 displayFormat과 Mask가 적용되지 않는 문자열을 반환한다.
returnValue는 201201이다.]]>
- hasClass(
className
)
-
컴포넌트가 className의 이름을 가진 class를 가지고 있는지 여부를 반환합니다.
Parameter
| className | String | Y | 조사할 className |
Return
| Boolean | 컴포넌트가 className의 class를 가지고 있는지 여부 |
Sample
<![CDATA[var returnValue = componentId.hasClass("selected"); // returnValue는 true 또는 false.]]>
selected라는 class를 가지고 있으면 true, 아니면 false를 반환한다.
- hide(
)
-
컴포넌트를 화면에서 보이지 않도록 숨깁니다.
Sample
componentId.hide();
- removeClass(
className
)
-
컴포넌트에 className의 이름을 가진 class를 삭제합니다.
Parameter
| className | String | Y | 삭제하고 싶은 class의 이름 |
Sample
componentId.removeClass("selected"); // 컴포넌트에 selected 라는 class를 삭제.
- setDisabled(
flag
)
-
searchbox를 disabled시킨다.
Parameter
| flag | Boolean | N | Disabled 속성을 활성화 시키려면 true 비활성화 시키려면 false |
Sample
searchbox1.setDisabled();
- setDisplayFormat(
format
)
-
컴포넌트에 설정된 displayFormat을 넘어온 인자로 설정합니다.
displayFormat은 컴포넌트에 표시 되는 값에 마스킹을 하는 역할을 합니다.
Parameter
| format | String | Y | 새로 설정할 displayFormat |
Sample
<![CDATA[ 예) dataType이 date이고 ioFormat을 yyyyMM, dateMask를 yyyy-MM을 적용한 경우, 2012-01
searchbox1.setDisplayFormat("yyyy/MM");
결과: 2012/01]]>
- setDisplayFormatter(
formatter
)
-
컴포넌트에서 사용하는 format용 함수를 설정합니다.
Parameter
| formatter | String | Y | 새로 설정할 format용 함수 |
Sample
<![CDATA[ 예) 'hong gil dong' 영문 이름 입력시,
function setFormat(value){
value = value.toUpperCase();
return value;
}
searchbox1.setDisplayFormatter("setFormat");
결과: HONG GIL DONG]]>
- setOpacity(
value
)
-
컴포넌트의 Opacity 값을 설정합니다.
Parameter
| value | Integer | Y | 설정할 Opacity 값 (0과 1사이의 실수) |
Sample
componentId.setOpacity(0.45);
- setPosition(
left
,
top
,
mode
)
-
컴포넌트의 위치를 설정합니다.
Parameter
| left | Integer | Y | left의 값 |
| top | Integer | Y | top의 값 |
| mode | String | N | absolute이면 x,y로 현재 값을 설정하고 delta이면 현재 값에 x,y값만큼을 더해서 설정. (기본모드는 absolute) |
Sample
componentId.setPosition(100, 100, "absolute");
- setReadOnly(
readOnly
)
-
객체의 readOnly 속성을 제어합니다. readOnly 속성을 활성화 시키려면 true 비활성화 시키려면 false를 입력합니다.
Parameter
| readOnly | Boolean | Y | readOnly 속성을 활성화 시키려면 true 비활성화 시키려면 false |
Sample
<![CDATA[componentId.setReadOnly(true);]]>
입력가능한 컴포넌트의 경우 입력이 불가능한 상태가 된다.
- setSize(
width
,
heigth
)
-
컴포넌트의 크기를 설정합니다.
Parameter
| width | Integer | Y | 새로 설정할 컴포넌트의 width값 |
| heigth | Integer | Y | 새로 설정할 컴포넌트의 height값 |
Sample
componentId.setSize(100,100);
- setStyle(
propertyName
,
value
)
-
컴포넌트의 propertyName에 해당하는 style의 값을 설정합니다.
Parameter
| propertyName | String | Y | 바꾸고 싶은 style 값의 이름 |
| value | String | Y | 설정할 style의 값 |
Sample
<![CDATA[예: 컴포넌트 스타일 width를 변경하고자 하는 경우.
componentId.setStyle("width", 100);
픽셀 단위를 기본으로 하며, componentId.setStyle("width", "100px"); 과 동일하다.
%단위의 표현을 하고자 하면 componentId.setStyle("width", "100%"); 로 명시하여 준다.]]>
- setUserData(
key
,
value
)
-
사용자 임의의 데이터를 객체에 설정합니다.
Parameter
| key | String | Y | 임의 데이터의 키 |
| value | String | Y | 임의 데이터의 값 |
Sample
공통 API로 모든 컴포넌트에서 사용 가능하다.
<![CDATA[componentId.setUserData("data", "WebSquare");]]>
객체에 설정이 가능한 key가 아닌 경우, key 설정이 불가능하다.
<![CDATA[componentId.setUserData("title", "WebSquare");]]>
!!!WARNING - [title] can't define as UserData 와 같이 로그에 경고문구가 쌓인다.
- setValue(
value
)
-
value로 searchbox의 값을 설정합니다.
Parameter
| value | String | Y | searchbox에 설정할 값 |
Sample
<![CDATA[ searchbox1.setValue("201201");
searchbox에 displayFormat이나 Mask를 사용하는 경우, setValue 함수 사용시에도 적용된다.
예: 2012-01]]>
- show(
displayType
)
-
컴포넌트를 화면에 보이도록 설정합니다.
Parameter
| displayType | String | N | display의 속성 값. (block, inline, none, “”) |
Sample
<![CDATA[componentId.show(); // display 속성이 "block"이 된다.
componentId.show(""); // class에 적용된 display 속성 값을 다시 복구.]]>
- toggleClass(
className
)
-
컴포넌트가 className의 이름을 가진 class를 가지고 있다면 제거하고, 가지고 있지 않다면 추가한다.
Parameter
| className | String | Y | 조사할 className |
Sample
<![CDATA[componentId.toggleClass("selected");]]>
selected라는 class가 존재하면 해당 class를 제거한다. selected라는 class가 존재하지 않으면 추가한다.
- trigger(
type
,
array
)
-
컴포넌트에 등록된 특정 이벤트를 직접 발생시킵니다.
Parameter
| type | String | Y | 발생시킬 이벤트 이름 |
| array | Object | N | 이벤트 핸들러에 전달할 파라미터 배열 |
Sample
* | input1.trigger("onclick"); // input1에 onclick이벤트를 발생시킨다.
* | input1.trigger("onchange", [1,2]); // input1에 onchange이벤트를 발생시키고 핸들러 함수에 (1,2) 인자를 전달하여 호출한다.
- unbind(
type
,
function
)
-
컴포넌트의 이벤트를 동적으로 제거합니다.
Parameter
| type | String | N | 제거할 이벤트의 이름. 생략할 경우 해당 컴포넌트의 모든 이벤트를 제거한다. |
| function | Function | N | 제거할 이벤트의 핸들러 함수. 생략할 경우 해당 이벤트 type으로 등록된 모든 핸들러 함수를 제거한다. |
Sample
* | input1.unbind("onclick", func1); // input1에 등록된 onclick이벤트 함수 중에 func1 이벤트 핸들러를 제거
* | input1.unbind("onchange"); // input1에 등록된 onchange이벤트 핸들러 함수를 모두 제거
* | input1.unbind(); // input1에 등록된 모든 이벤트를 제거
- validate(
)
-
searchbox의 유효성 검사를 합니다.
Return
| Boolean | 유효성 검사 결과 값 |
Sample
<![CDATA[ 예: mandatory가 true로 설정된 경우, 미입력 상태에서 유효성 검사
var returnValue = searchbox1.validate();
returnValue는 false이다.
유효성 검사 조건(mandatory, min, maxLength 등)을 만족할 경우, true를 반환한다.]]>
- visible(
flag
)
-
컴포넌트의 style 중 visibility 값을 설정합니다. flag가 참이면 "visible", 거짓이면 "hidden"을 설정합니다.
Parameter
| flag | Boolean | Y | visibility 값을 설정할 값(참이면 "visible", 거짓이면 "hidden"을 설정) |