Type

uiplugin

Property Summary

id

컴포넌트 id

imageLoadURL

업로드된 이미지를 조회하는 URL(servlet), 조회하는 Servlet은 "fileName"을 parameter로 받아서 처리하도록 해야한다

language

언어셋을 설정한다

menubar

editor의 toolbar의 종류

subDir

subDir="test1"라고 하면, websquare

transParentDisabled

disabled시 색이 변하지 않습니다

Event Summary

onload

editor의 load가 끝난 경우에 발생

Method Summary

addClass( className )

컴포넌트에 className의 이름을 가진 class를 추가합니다

bind( type , function )

컴포넌트의 이벤트를 동적으로 할당합니다

changeClass( oldClassName , newClassName )

컴포넌트에서 oldClassName의 이름을 가진 class를 newClassName으로 치환합니다

getDisabled( )

현재 설정되어있는 disabled 속성을 반환합니다

getDomain( )

Editor에 세팅된 domain값을 가져옵니다

getGeneratedComponent( id )

동일한 index에 속한 다른 컴퍼넌트 객체를 가져옵니다

getGeneratedIndex( )

generator 반복부에서 해당 index를 반환합니다

getHTML( )

editor의 textarea에서 html태그를 포함하여 모두 반환합니다

getID( )

웹스퀘어 컴포넌트의 id를 반환합니다

getImageLoadURL( )

imageLoadURL을 얻어옵니다

getInnerText( )

editor의 textarea에서 html태그를 무시하고 text와 개행문자를 포함하여 반환합니다

getOpacity( )

컴포넌트의 Opacity 값을 반환합니다

getPluginName( )

웹스퀘어 컴포넌트의 pluginName을 반환합니다

getPosition( positionName )

컴포넌트의 위치 값을 반환합니다

getReadOnly( )

현재 설정되어있는 readOnly 속성을 반환합니다

getSize( sizeName )

컴포넌트의 크기 값을 반환합니다

getStyle( propertyName )

컴포넌트의 propertyName에 해당하는 style의 값을 반환합니다

getStyleValue( style )

컴포넌트의 style중에서 입력받은 style의 값을 반환합니다

getText( )

editor의 textarea에서 html태그와 개행문자를 무시하고 text만 반환합니다

getTitle( )

component의 title 속성을 가져온다

getUserData( key )

설정된 사용자 임의의 데이터를 반환 합니다.

hasClass( className )

컴포넌트가 className의 이름을 가진 class를 가지고 있는지 여부를 반환합니다

hide( )

컴포넌트를 화면에서 보이지 않도록 숨깁니다

removeClass( className )

컴포넌트에 className의 이름을 가진 class를 삭제합니다

setDisabled( disabled )

editor를 disabled 처리 한다

setDomain( domain )

CrossDomain 처리를 위해 Editor에 domain을 셋팅합니다

setHTML( html )

html을 editor에 textarea에 입력합니다

setImageLoadURL( imageLoadURL )

imageLoadURL을 셋팅합니다

setOpacity( value )

컴포넌트의 Opacity 값을 설정합니다

setPosition( left , top , mode )

컴포넌트의 위치를 설정합니다

setReadOnly( readOnly )

editor를 readOnly 처리 한다

setSize( width , heigth )

컴포넌트의 크기를 설정합니다

setStyle( propertyName , value )

컴포넌트의 propertyName에 해당하는 style의 값을 설정합니다

setText( value )

value를 editor에 textarea에 입력합니다

setUserData( key , value )

사용자 임의의 데이터를 객체에 설정합니다

show( displayType )

컴포넌트를 화면에 보이도록 설정합니다

toggleClass( className )

컴포넌트가 className의 이름을 가진 class를 가지고 있다면 제거하고, 가지고 있지 않다면 추가한다

trigger( type , array )

컴포넌트에 등록된 특정 이벤트를 직접 발생시킵니다

unbind( type , function )

컴포넌트의 이벤트를 동적으로 제거합니다

visible( flag )

컴포넌트의 style 중 visibility 값을 설정합니다

id

컴포넌트 id

imageLoadURL

업로드된 이미지를 조회하는 URL(servlet), 조회하는 Servlet은 "fileName"을 parameter로 받아서 처리하도록 해야한다.

language

언어셋을 설정한다. en: 영문, ko : 국문

menubar

editor의 toolbar의 종류

subDir

subDir="test1"라고 하면, websquare.xml(//upload/imgUpload/test1/@value)에 정의되어 있는 경로 업로드 한다.

transParentDisabled

disabled시 색이 변하지 않습니다.

onload

editor의 load가 끝난 경우에 발생

addClass( className )

컴포넌트에 className의 이름을 가진 class를 추가합니다.

Parameter

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

Sample

componentId.addClass("selected"); // 컴포넌트에 selected 라는 class를 추가.

bind( type , function )

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

Parameter

name	type	required	description
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

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

Sample

componentId.changeClass("selected","default"); // 컴포넌트에 selected 라는 class를 default라는 class로 변경.

getDisabled( )

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

Return

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

Sample

var returnValue = componentId.getDisabled(); // returnValue는 true혹은 false이다.

getDomain( )

Editor에 세팅된 domain값을 가져옵니다.

Return

type	description
String:Y	editor에 설정된 domain값.

getGeneratedComponent( id )

동일한 index에 속한 다른 컴퍼넌트 객체를 가져옵니다.

Parameter

name	type	required	description
id	String	N	찾아오려는 컴퍼넌트 id

Return

type	description
Object	동일한 id에 속한 다른 컴퍼넌트 객체

Sample

다음과 같이 사용할 수 있다. var content = this.getGeneratedComponent("content1"); content.setValue("");

getGeneratedIndex( )

generator 반복부에서 해당 index를 반환합니다.

Return

type	description
Number	generator 반복부에서 해당 index.

getHTML( )

editor의 textarea에서 html태그를 포함하여 모두 반환합니다.

Return

type	description
String:Y	textarea에 입력된 html소스

Sample

var returnValue = editor1.getHTML(); returnValue는 입력된 문자열의 html 소스이다. 예) <strong><span style="color:#ff0000;">editor API<br /> 1. getHTML()<br /> 2. getText()</span></strong>

getID( )

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

Return

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

Sample

다음과 같이 사용할 수 있다. <script ev:event="onclick" type="javascript"><![CDATA[ var returnValue = this.getID(); ]]></script> returnValue는 컴포넌트의 id(예: input1)이다.

getImageLoadURL( )

imageLoadURL을 얻어옵니다.

Return

type	description
String:Y	editor에 설정된 imageLoadURL

getInnerText( )

editor의 textarea에서 html태그를 무시하고 text와 개행문자를 포함하여 반환합니다.

getOpacity( )

컴포넌트의 Opacity 값을 반환합니다.

Return

type	description
Integer	Opacity 값

Sample

var returnValue = componentId.getOpacity(); // returnValue는 0~1사이의 실수이다.

getPluginName( )

웹스퀘어 컴포넌트의 pluginName을 반환합니다.

Return

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

Sample

다음과 같이 사용할 수 있다. <script ev:event="onclick" type="javascript"><![CDATA[ var returnValue = this.getPluginName(); ]]></script> returnValue는 컴포넌트의 종류(예: input, checkbox ...)이다.

getPosition( positionName )

컴포넌트의 위치 값을 반환합니다.

Parameter

name	type	required	description
positionName	String	Y	위치 값의 종류('left'이거나 'top')

Return

type	description
Number	컴포넌트의 위치 값

Sample

var returnValue = componentId.getPosition("left"); // returnValue는 픽셀 단위의 위치 값이다. %로 설정된 경우, 픽셀로 변환하여 반환한다.

getReadOnly( )

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

Return

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

Sample

var returnValue = componentId.getReadOnly(); // returnValue는 true혹은 false이다.

getSize( sizeName )

컴포넌트의 크기 값을 반환합니다.

Parameter

name	type	required	description
sizeName	String	Y	크기 값의 종류. szieName의 종류는 다음을 참고. 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

Return

type	description
Number	컴포넌트의 크기 값

Sample

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

getStyle( propertyName )

컴포넌트의 propertyName에 해당하는 style의 값을 반환합니다.

Parameter

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

Return

type	description
String	객체의 style 속성 값

Sample

var returnValue = componentId.getStyle("width"); // returnValue는 width에 대한 픽셀 단위, 또는 % 단위가 된다.

getStyleValue( style )

컴포넌트의 style중에서 입력받은 style의 값을 반환합니다.

Parameter

name	type	required	description
style	String	Y	style중에서 사용자가 구하고 싶은 값

Return

type	description
String	style중에서 사용자가 입력한 style의 값(색을 반환하는 경우에는 색HexCode로 반환)

getText( )

editor의 textarea에서 html태그와 개행문자를 무시하고 text만 반환합니다.

Return

type	description
String:Y	textarea의 text부분

Sample

var returnValue = editor1.getText(); returnValue는 에디터에 입력된 문자열이다.

getTitle( )

component의 title 속성을 가져온다.

Return

type	description
String	component의 title 속성값.

Sample

var title = componentId.getTitle();

getUserData( key )

설정된 사용자 임의의 데이터를 반환 합니다.
xml상에 설정된 사용자 값도 가져올 수 있습니다.

Parameter

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

Return

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

Sample

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이다.

hasClass( className )

컴포넌트가 className의 이름을 가진 class를 가지고 있는지 여부를 반환합니다.

Parameter

name	type	required	description
className	String	Y	조사할 className

Return

type	description
Boolean	컴포넌트가 className의 class를 가지고 있는지 여부

Sample

var returnValue = componentId.hasClass("selected"); // returnValue는 true 또는 false.
selected라는 class를 가지고 있으면 true, 아니면 false를 반환한다.

hide( )

컴포넌트를 화면에서 보이지 않도록 숨깁니다.

Sample

componentId.hide();

removeClass( className )

컴포넌트에 className의 이름을 가진 class를 삭제합니다.

Parameter

name	type	required	description
className	String	Y	삭제하고 싶은 class의 이름

Sample

componentId.removeClass("selected"); // 컴포넌트에 selected 라는 class를 삭제.

setDisabled( disabled )

editor를 disabled 처리 한다.

Parameter

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

setDomain( domain )

CrossDomain 처리를 위해 Editor에 domain을 셋팅합니다.

Parameter

name	type	required	description
domain	String	N	domain 값이 없으면 WebSquare.util.setDomain으로 셋팅된 domain이 셋팅됩니다.

setHTML( html )

html을 editor에 textarea에 입력합니다.(html태그를 해석하여 입력합니다.)

Parameter

name	type	required	description
html	String	Y	editor에 입력하려는 html소스

Sample

editor1.setHTML('<em><span style="font-size:14px;">editor setHTML(html) API.</span></em>'); 폰트크기가 14px이고 이탤릭체로 "editor setHTML(html) API" 문자열이 표시된다.

setImageLoadURL( imageLoadURL )

imageLoadURL을 셋팅합니다.

Parameter

name	type	required	description
imageLoadURL	String	N	imageLoadURL

setOpacity( value )

컴포넌트의 Opacity 값을 설정합니다.

Parameter

name	type	required	description
value	Integer	Y	설정할 Opacity 값 (0과 1사이의 실수)

Sample

componentId.setOpacity(0.45);

setPosition( left , top , mode )

컴포넌트의 위치를 설정합니다.

Parameter

name	type	required	description
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 )

editor를 readOnly 처리 한다.

Parameter

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

setSize( width , heigth )

컴포넌트의 크기를 설정합니다.

Parameter

name	type	required	description
width	Integer	Y	새로 설정할 컴포넌트의 width값
heigth	Integer	Y	새로 설정할 컴포넌트의 height값

Sample

componentId.setSize(100,100);

setStyle( propertyName , value )

컴포넌트의 propertyName에 해당하는 style의 값을 설정합니다.

Parameter

name	type	required	description
propertyName	String	Y	바꾸고 싶은 style 값의 이름
value	String	Y	설정할 style의 값

Sample

예: 컴포넌트 스타일 width를 변경하고자 하는 경우. componentId.setStyle("width", 100); 픽셀 단위를 기본으로 하며, componentId.setStyle("width", "100px"); 과 동일하다. %단위의 표현을 하고자 하면 componentId.setStyle("width", "100%"); 로 명시하여 준다.

setText( value )

value를 editor에 textarea에 입력합니다.(html태그를 text로 입력합니다.)

Parameter

name	type	required	description
value	String	Y	editor에 입력하려는 값

Sample

editor1.setText("editor\n setText(value) API."); editor setText(value) API. 위와 같이 에디터에 표시된다.

setUserData( key , value )

사용자 임의의 데이터를 객체에 설정합니다.

Parameter

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

Sample

공통 API로 모든 컴포넌트에서 사용 가능하다. componentId.setUserData("data", "WebSquare");
객체에 설정이 가능한 key가 아닌 경우, key 설정이 불가능하다. componentId.setUserData("title", "WebSquare");
!!!WARNING - [title] can't define as UserData 와 같이 로그에 경고문구가 쌓인다.

show( displayType )

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

Parameter

name	type	required	description
displayType	String	N	display의 속성 값. (block, inline, none, “”)

Sample

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

toggleClass( className )

컴포넌트가 className의 이름을 가진 class를 가지고 있다면 제거하고, 가지고 있지 않다면 추가한다.

Parameter

name	type	required	description
className	String	Y	조사할 className

Sample

componentId.toggleClass("selected");
selected라는 class가 존재하면 해당 class를 제거한다. selected라는 class가 존재하지 않으면 추가한다.

trigger( type , array )

컴포넌트에 등록된 특정 이벤트를 직접 발생시킵니다.

Parameter

name	type	required	description
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

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

Sample

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

visible( flag )

컴포넌트의 style 중 visibility 값을 설정합니다. flag가 참이면 "visible", 거짓이면 "hidden"을 설정합니다.

Parameter

name	type	required	description
flag	Boolean	Y	visibility 값을 설정할 값(참이면 "visible", 거짓이면 "hidden"을 설정)