Type

uiplugin

Property Summary

accessibility

웹접근성 모드의 사용 여부

alwaysDraw

true이면 child를 전부 false이면 showTreeDepth보다 작은 것들만 그림

checkAllChildNodes

부모노드를 체크하면 자식도 모두 체크되는지 여부

checkboxDisabledFalseValue

체크박스의 disabled여부의 false값

checkboxDisabledTrueValue

체크박스의 disabled여부의 true값

class

treeview의 class 속성

dataType

xml데이터가 tree형태인지 list형태인지 여부

defaultImage

node의 기본 이미지

disabled

disabled 유무

expandedImage

폴더가 펼쳐졌을때 이미지

falseValue

체크박스이 false 값

hierarchy

하위 노드가 선택되었을 때, 상위 노드를 체크할지 여부

id

treeview 컴포넌트의 id

labelclass

tree의 각 노드의 label에 적용할 class

lineShow

tree에서 노드 사이의 선의 존재 여부

ref

model instance의 바인딩 정보

refreshCheckboxDisableModel

checkbox의 disable값이 바뀐 경우에 그 값을 model에 반영할지 여부

refreshCheckboxModel

checkbox의 값이 바뀐 경우에 그 값을 model에 반영할지 여부

showCheckbox

노드옆에 checkbox의 표시여부

showTreeDepth

tree가 처음 그려질때 펼쳐져있는 depth

src

접고, 펼쳐지는 toggle이미지 정보

title

접근성 지원용 속성

toggleButtonEvent

toggleButton을 마우스로 클릭할 때 toggle할 것인지, 또는 마우스를 누르는 순간 바로 toggle될 것인지를 결정하는 옵션

toggleEvent

노드 리스트를 펼치고 접을 때의 이벤트 설정

toolTip

toolTip 속성

tooltipClass

tooltip의 class

tooltipDisplay

tooltip의 표현여부

tooltipGroupClass

tooltip에 w2group 스타일을 포함시킬지(true) 제거할지(false)를 결정하는 옵션

tooltipTime

tooltip이 보이는데 걸리는 시간 (second)

trueValue

체크박스의 true 값

useDrag

drag의 사용여부

Event Summary

onchange

선택 노드 변경 시 발생

oncheckboxclick

Checkbox가 클릭된 경우 발생

onclick

treeview의 label, checkbox, icon, toggle버튼(+,-버튼)을 클릭했을 때 발생합니다

ondblclick

마우스로 treeview의 label을 더블클릭했을 때 발생합니다

ondragleave

drag하는 도중에 마우스 위치가 treeview node의 순수label영역(icon영역 미포함)을 벗어난 경우 발생한다

ondragover

drag하는 도중에 마우스의 위치가 treeview의 특정 node위에 있을 때 발생(useDrag = true인 경우만 발생)

ondrop

treeview의 특정 node를 treeview의 다른 node로 drag and drop을 했을때 발생 (useDrag = true인 경우만 발생)

onlabelclick

Label이 클릭된 경우 발생

onrightbuttonclick

treeview node의 label영역을 오른쪽버튼 click시 발생한다

ontoggleclick

toggle icon click시 발생한다

Method Summary

addClass( className )

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

appendData( index , :Y> )

index에 해당하는 노드 하위에 사용자 데이터를 추가한다

appendNode( parentNode , childNode )

parentNode밑에 childNode를 붙입니다

appendXmlNodes( parentNode , :Y> )

인자로 받은 parentNode 하위에 사용자 데이터를 추가한다

bind( type , function )

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

changeClass( oldClassName , newClassName )

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

checkByValue( value , checkValue , childCheck )

value에 해당하는 node의 checkbox를 checkValue에 따라서 check하거나 uncheck합니다

collapseNode( value )

value를 통해서 찾은 노드를 닫아줍니다

disableCheckboxByValue( value , checkDisabled , childDisalbed )

value에 해당하는 node의 checkbox를 checkDisabled에 따라서 disable 시키거나 풀어줍니다

expandNode( value )

value를 통해서 찾은 노드를 열어줍니다

findNode( value , select )

value를 통해서 node를 찾아서 선택합니다

findNodeByIndex( index )

Treeview가 Node에 채번한 index를 통해서 node를 찾습니다

findNodeByValue( value )

value를 통해서 node를 찾아서 선택합니다

focus( )

객체에 focus를 줍니다

getCheckedIndexes( )

checkbox가 체크된 노드들의 index를 배열로 반환합니다

getCheckedLabels( )

checkbox가 체크된 노드들의 label을 배열로 반환합니다

getCheckedValues( )

checkbox가 체크된 노드들의 value를 배열로 반환합니다

getChildData( value )

value에 해당하는 node의 자식의 data(model에 존재하는)를 반환합니다

getDisabled( )

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

getGeneratedComponent( id )

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

getGeneratedIndex( )

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

getID( )

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

getOpacity( )

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

getParentValue( value )

value에 해당하는 node의 부모의 value를 반환합니다

getPluginName( )

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

getPosition( positionName )

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

getReadOnly( )

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

getSelectedIndex( )

선택된 노드의 index를 반환합니다

getSelectedLabel( )

선택된 노드의 label을 반환합니다

getSelectedNode( )

선택된 노드객체를 반환합니다

getSelectedValue( )

선택된 노드의 value를 반환합니다

getSize( sizeName )

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

getStyle( propertyName )

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

getStyleValue( style )

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

getTitle( )

component의 title 속성을 가져온다

getUserData( key )

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

getXPathByValue( value )

value에 해당하는 node의 model에서의 xpath를 반환합니다

hasClass( className )

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

hide( )

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

isLeaf( )

선택된 노드가 leaf인지 여부를 반환합니다

removeClass( className )

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

removeNode( node )

node를 tree에서 지웁니다

removeNodeList( nodeList )

복수개의 node를 tree에서 한 번에 지웁니다

setCustomFormatter( userFunction )

사용자가 지정한 함수를 treeview의 node를 돌면서 각각 한번씩 호출합니다

setLabelByIndex( index , label )

node의 label을 변경합니다

setLabelByValue( value , label )

node의 label을 변경합니다

setLabelStyle( idx , styleName , styleValue , applyChildNodes )

해당 node의 label style(node의 글자색, 글자크기, 글꼴 등)을 변경합니다

setOpacity( value )

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

setPosition( left , top , mode )

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

setReadOnly( readOnly )

객체의 readOnly 속성을 제어합니다

setSize( width , heigth )

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

setStyle( propertyName , value )

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

setUserData( key , value )

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

show( displayType )

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

spanAll( openCloseFlag )

openCloseFlag에 따라서 tree를 전부 span시켜 줍니다

stopRefresh( stop )

treeview가 참조하고 있는 model을 바꾼경우에 refresh여부를 결정합니다

toggleClass( className )

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

trigger( type , array )

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

unbind( type , function )

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

visible( flag )

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

accessibility

웹접근성 모드의 사용 여부

alwaysDraw

true이면 child를 전부 false이면 showTreeDepth보다 작은 것들만 그림

checkAllChildNodes

부모노드를 체크하면 자식도 모두 체크되는지 여부

checkboxDisabledFalseValue

체크박스의 disabled여부의 false값

checkboxDisabledTrueValue

체크박스의 disabled여부의 true값

class

treeview의 class 속성

dataType

xml데이터가 tree형태인지 list형태인지 여부

defaultImage

node의 기본 이미지

disabled

disabled 유무

expandedImage

폴더가 펼쳐졌을때 이미지

falseValue

체크박스이 false 값

hierarchy

하위 노드가 선택되었을 때, 상위 노드를 체크할지 여부. 하위 노드 중 체크되지 않은 항목이 있는 경우, 상위 노드의 체크박스를 반투명하게 표시한다. showCheckbox가 true일 경우 적용.

id

treeview 컴포넌트의 id

labelclass

tree의 각 노드의 label에 적용할 class

lineShow

tree에서 노드 사이의 선의 존재 여부

ref

model instance의 바인딩 정보

refreshCheckboxDisableModel

checkbox의 disable값이 바뀐 경우에 그 값을 model에 반영할지 여부

refreshCheckboxModel

checkbox의 값이 바뀐 경우에 그 값을 model에 반영할지 여부

showCheckbox

노드옆에 checkbox의 표시여부

showTreeDepth

tree가 처음 그려질때 펼쳐져있는 depth

src

접고, 펼쳐지는 toggle이미지 정보

title

접근성 지원용 속성

toggleButtonEvent

toggleButton을 마우스로 클릭할 때 toggle할 것인지, 또는 마우스를 누르는 순간 바로 toggle될 것인지를 결정하는 옵션

toggleEvent

노드 리스트를 펼치고 접을 때의 이벤트 설정.

toolTip

toolTip 속성

tooltipClass

tooltip의 class

tooltipDisplay

tooltip의 표현여부

tooltipGroupClass

tooltip에 w2group 스타일을 포함시킬지(true) 제거할지(false)를 결정하는 옵션

tooltipTime

tooltip이 보이는데 걸리는 시간 (second)

trueValue

체크박스의 true 값

useDrag

drag의 사용여부

onchange

선택 노드 변경 시 발생

Parameter

name	type	description
oldNode	node	이전노드
newNode	node	현재선택된 노드

Sample

ev:event="onchange(oldNode,newNode)" 로 인자가 정의된 경우, newNode.label , newNode.value를 통해 getSelectedLabel(), getSelectedValue()를 대체가능 Node에 모든정보가 담겨져있어 필요한정보만 가져다 쓰면됩니다.

oncheckboxclick

Checkbox가 클릭된 경우 발생

Parameter

name	type	description
value	String	클릭된 node의 value
nodeElement	Document	클릭된 node의 Element
index	String	클릭된 node의 index

Sample

ev:event="oncheckboxclick(value, nodeElement)" 로 인자가 정의된 경우, bag인 label의 checkbox를 클릭. var xmlStr = WebSquare.xml.indent(nodeElement); xmlStr의 예는 다음과 같다. <data> <label>bag</label> <value>2</value> <depth>1</depth> <chk>T</chk> <disableChk></disableChk> <img>images/bag.gif</img> </data> value는 2이다.

onclick

treeview의 label, checkbox, icon, toggle버튼(+,-버튼)을 클릭했을 때 발생합니다.

ondblclick

마우스로 treeview의 label을 더블클릭했을 때 발생합니다.

ondragleave

drag하는 도중에 마우스 위치가 treeview node의 순수label영역(icon영역 미포함)을 벗어난 경우 발생한다.

Parameter

name	type	description
e	Object	이벤트(e)

ondragover

drag하는 도중에 마우스의 위치가 treeview의 특정 node위에 있을 때 발생(useDrag = true인 경우만 발생)

Parameter

name	type	description
dragNode	Object	drag중인 treeview의 node
dropNode	Object	dragover된 위치에 해당하는 treeview의 node
dragControl	Object	drag가 발생한 treeview component 객체. 일반적으로 dragControl = this;
dropControl	Object	drop된 위치에 해당하는 treeview component 객체.
e	Object	이벤트(e)

ondrop

treeview의 특정 node를 treeview의 다른 node로 drag and drop을 했을때 발생 (useDrag = true인 경우만 발생)

Parameter

name	type	description
dragnode	Object	drag하는 node { label : new String(), value : new String(), depth : new String(), element : new Object() };
dropnode	Object	drop하는 node { label : new String(), value : new String(), depth : new String(), element : new Object() };
dragNode	Object	drag중인 treeview의 node
dropNode	Object	drop된 위치에 해당하는 treeview의 node
dragControl	Object	drag가 발생한 treeview component 객체. 일반적으로 dragControl = this;
dropControl	Object	drop된 위치에 해당하는 treeview component 객체.
e	Object	이벤트(e)

Sample

ev:event="ondrop(dragNode, dropNode, dragTreeview, dropTreeview, e)" 로 인자가 정의된 경우, 특정 라벨을 드래그앤드롭. var xmlStr = WebSquare.xml.indent(dragNode.element); var label = dragNode.label; var value = dragNode.value; var depth = dragNode.depth; xmlStr의 예는 다음과 같다. <data> <label>boots</label> <value>5-1</value> <depth>2</depth> <chk></chk> <disableChk></disableChk> <img>boots.gif</img> </data> label은 boots, value는 5-1, depth는 2이다. dropNode도 dragNode와 동일한 스펙을 가진다. var treeveiwId = dragTreeview.getID(); treeviewId는 treeview1이다. dragTreeview, dropTreeview는 treeview 객체이며, treeview가 가지는 api를 사용할 수 있다.

onlabelclick

Label이 클릭된 경우 발생

Parameter

name	type	description
value	String	클릭된 node의 value
nodeElement	Document	클릭된 node의 Element
index	String	클릭된 node의 index

Sample

ev:event="onlabelclick(value, nodeElement, index)" 로 인자가 정의된 경우, bag인 label을 클릭. var xmlStr = WebSquare.xml.indent(nodeElement); xmlStr의 예는 다음과 같다. <data> <label>bag</label> <value>2</value> <depth>1</depth> <chk>T</chk> <disableChk></disableChk> <img>bag.gif</img> </data> value는 2이다.

onrightbuttonclick

treeview node의 label영역을 오른쪽버튼 click시 발생한다. label영역은 해당 노드의 글자 부분과 label에해당하는 이미지, 그리고 체크박스가 있을 경우 체크박스 영역까지를 포함하는 영역이다.

Parameter

name	type	description
node	Object	오른쪽버튼 클릭이 발생한 위치에 해당하는 node

ontoggleclick

toggle icon click시 발생한다.

Parameter

name	type	description
nodeElement	Document	node의 Element
index	Number	toggle 한 index
isRendered	boolean	렌더링 유무

Sample

ev:event="ontoggleclick(nodeElement, index, isRendered)" 로 인자가 정의된 경우, 0번째 depth의 1번째 tree노드의 toggle 아이콘 클릭. var xmlStr = WebSquare.xml.indent(nodeElement); xmlStr의 예는 다음과 같다. <data> <label>clothes</label> <value>1</value> <depth>1</depth> <chk></chk> <disableChk>t</disableChk> <img>clothes.gif</img> <folder>true</folder> </data> index는 1이다. 하위 노드가 렌더링되어 있는 경우, isRendered는 true. 하위 노드가 렌더링되어 있지 않는 경우, inRendered는 false. 하위 노드가 렌더링되어 있지 않다면, treeview1.appendData(index, xmlDoc); 로 하위 노드 렌더링이 가능하다.

addClass( className )

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

Parameter

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

Sample

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

appendData( index , :Y> )

index에 해당하는 노드 하위에 사용자 데이터를 추가한다.

Parameter

name	type	required	description
index	Number	Y	대상 treeNode의 index
:Y>	Array<Element>	Y	xmlNodeList 추가할 xml 노드 list

Sample

showDepth가 0이고, 최상위 노드들만 존재하며, clothes, bags, shoes의 index는 1,2,3이다. -[+] clothes -[+] bags - └─ shoes var xmlNodeList = WebSquare.ModelUtil.findInstanceNodes( "res/shopping/vector/data[@ref='"+value+"']" ); or var xmlNodeList = WebSquare.xml.findNodes( xmlDoc, "/vector/data"); xmlNodeList의 예: [<data ref="1"> <label>outer</label> <value>1-1</value> <depth>2</depth> <chk></chk> <excChk></excChk> <img></img> <folder>true</folder> </data>, <data ref="1"> <label>bottom</label> <value>1-2</value> <depth>2</depth> <chk></chk> <excChk></excChk> <img></img> <folder>true</folder> </data>, <data ref="1"> <label>dress</label> <value>1-3</value> <depth>2</depth> <chk>T</chk> <excChk></excChk> <img></img> <folder>false</folder> </data>] treeview1.appendData(index, xmlNodeList); clothes 하위로 outer, bottom, dress 노드가 추가된다. -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes

appendNode( parentNode , childNode )

parentNode밑에 childNode를 붙입니다.

Parameter

name	type	required	description
parentNode	Object	Y	부모 tree 노드
childNode	Object	Y	부모 tree 노드 밑에 붙일 자식노드

appendXmlNodes( parentNode , :Y> )

인자로 받은 parentNode 하위에 사용자 데이터를 추가한다.

Parameter

name	type	required	description
parentNode	Object	Y	부모 tree 노드
:Y>	Array<Element>	Y	xmlNodeList 추가할 xml 노드 list

Sample

-[+] clothes -[+] bags - └─ shoes var xmlNodeList = WebSquare.ModelUtil.findInstanceNodes( "res/shopping/vector/data[@ref='"+value+"']" ); or var xmlNodeList = WebSquare.xml.findNodes( xmlDoc, "/vector/data"); xmlNodeList의 예: [<data ref="1"> <label>outer</label> <value>1-1</value> <depth>2</depth> <chk></chk> <excChk></excChk> <img></img> <folder>true</folder> </data>, <data ref="1"> <label>bottom</label> <value>1-2</value> <depth>2</depth> <chk></chk> <excChk></excChk> <img></img> <folder>true</folder> </data>, <data ref="1"> <label>dress</label> <value>1-3</value> <depth>2</depth> <chk>T</chk> <excChk></excChk> <img></img> <folder>false</folder> </data>] var parentNode = treeview1.findNodeByValue("clothes_value"); //clothes의 value는 "clothes_value"로 가정 treeview1.appendXmlNodes(index, xmlNodeList); clothes 하위로 outer, bottom, dress 노드가 추가된다. -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes

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로 변경.

checkByValue( value , checkValue , childCheck )

value에 해당하는 node의 checkbox를 checkValue에 따라서 check하거나 uncheck합니다.

Parameter

name	type	required	description
value	String	Y	checkbox의 check 여부를 바꿀 node의 value
checkValue	Boolean	Y	checkbox의 check 여부
childCheck	Boolean	N	선택한 노드의 child의 checkbox의 check여부

Sample

showCheckbox가 true인 treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, -[-]□ clothes - │ [+]□ outer - │ [+]□ bottom - │ └─□ dress -[+]□ bags - └─□ shoes treeview1.checkByValue('1', true, true); clothes 와 하위 노드의 체크박스가 체크된다. -[-]√ clothes - │ [+]√ outer - │ [+]√ bottom - │ └─√ dress -[+]□ bags - └─□ shoes

collapseNode( value )

value를 통해서 찾은 노드를 닫아줍니다.

Parameter

name	type	required	description
value	String	Y	닫아줄 노드의 value

Sample

treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes treeview1.collapseNode('1'); clothes노드의 하위 노드가 보이지 않는다. -[+] clothes -[+] bags - └─ shoes

disableCheckboxByValue( value , checkDisabled , childDisalbed )

value에 해당하는 node의 checkbox를 checkDisabled에 따라서 disable 시키거나 풀어줍니다.

Parameter

name	type	required	description
value	String	Y	checkbox의 disalbe 여부를 바꿀 node의 value
checkDisabled	Boolean	Y	checkbox의 disable 여부
childDisalbed	Boolean	N	선택한 노드의 child의 checkbox의 disable여부

Sample

showCheckbox가 true인 treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, -[-]□ clothes - │ [+]□ outer - │ [+]□ bottom - │ └─□ dress -[+]□ bags - └─□ shoes treeview1.disableCheckboxByValue('1', true, true); clothes 와 하위 노드의 체크박스가 disable된다. -[-]■ clothes - │ [+]■ outer - │ [+]■ bottom - │ └─■ dress -[+]□ bags - └─□ shoes

expandNode( value )

value를 통해서 찾은 노드를 열어줍니다.

Parameter

name	type	required	description
value	String	Y	열어줄 노드의 value

Sample

treeview에서 clothes, bags, shoes의 value는 1,2,3 인 경우, -[+] clothes -[+] bags - └─ shoes treeview1.expandNode('1'); clothes노드의 하위 노드가 보인다. -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes

findNode( value , select )

value를 통해서 node를 찾아서 선택합니다.

Parameter

name	type	required	description
value	String	Y	찾을 node의 value
select	boolean	N	색된 노드 자동 선택 여부(default:true)

Return

type	description
Node	검색된 Node

Sample

treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, clothes 라벨이 선택되어 있는 예. -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes treeview1.findNode("1-2"); bottom 라벨이 선택된다.

findNodeByIndex( index )

Treeview가 Node에 채번한 index를 통해서 node를 찾습니다.

Parameter

name	type	required	description
index	String	Y	TreeView Node의 index

Return

type	description
Node	검색된 Node

Sample

var node = treeview1.findNodeValue("1-2"); var node1 = treeview1.findNodeByIndex(node.index);

findNodeByValue( value )

value를 통해서 node를 찾아서 선택합니다.

Parameter

name	type	required	description
value	String	Y	찾을 node의 value

Return

type	description
Node	검색된 Node

Sample

treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, clothes 라벨이 선택되어 있는 예. -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes var node = treeview1.findNodeByValue("1-2"); bottom 라벨의 Node를 얻을 수 있다.

focus( )

객체에 focus를 줍니다.

getCheckedIndexes( )

checkbox가 체크된 노드들의 index를 배열로 반환합니다.

Return

type	description
Array	체크된 노드들의 index 배열

getCheckedLabels( )

checkbox가 체크된 노드들의 label을 배열로 반환합니다.

Return

type	description
Array	체크된 노드들의 label 배열

Sample

showCheckbox가 true인 treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, -[-]□ clothes - │ [+]√ outer - │ [+]√ bottom - │ └─□ dress -[+]□ bags - └─□ shoes var returnValue = treeview1.getCheckedLabels(); returnValue[0]은 outer이다. returnValue[1]은 bottom이다.

getCheckedValues( )

checkbox가 체크된 노드들의 value를 배열로 반환합니다.

Return

type	description
Array	체크된 노드들의 value 배열

Sample

showCheckbox가 true인 treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, -[-]□ clothes - │ [+]√ outer - │ [+]√ bottom - │ └─□ dress -[+]□ bags - └─□ shoes var returnValue = treeview1.getCheckedValues(); returnValue[0]은 1-1이다. returnValue[1]은 1-2이다.

getChildData( value )

value에 해당하는 node의 자식의 data(model에 존재하는)를 반환합니다.

Parameter

name	type	required	description
value	String	Y	자식의 data를 반환할 node의 value

Return

type	description
Object	자식의 data를 가지고 있는 배열

Sample

treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes var returnDoc = treeview1.getChildData('1'); returnDoc.length는 3이다. WebSquare.xml.indent(returnDoc[0])은 다음과 같다. <data> <label>outer</label> <value>1-1</value> <depth>2</depth> <chk></chk> <excChk></excChk> <img></img> <folder>true</folder> </data>

getDisabled( )

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

Return

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

Sample

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

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.

getID( )

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

Return

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

Sample

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

getOpacity( )

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

Return

type	description
Integer	Opacity 값

Sample

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

getParentValue( value )

value에 해당하는 node의 부모의 value를 반환합니다.

Parameter

name	type	required	description
value	String	Y	부모를 찾을 node의 value

Return

type	description
String	부모의 vlaue

Sample

treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes var returnValue = treeview1.getParentValue('1-1'); returnValue는 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이다.

getSelectedIndex( )

선택된 노드의 index를 반환합니다.

Return

type	description
String	선택된 노드의 index

getSelectedLabel( )

선택된 노드의 label을 반환합니다.

Return

type	description
String	선택된 노드의 label

Sample

treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, clothes 라벨이 선택되어 있는 예. -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes var returnValue = treeview1.getSelectedLabel(); returnValue는 clothes이다.

getSelectedNode( )

선택된 노드객체를 반환합니다.

Return

type	description
Object	선택된 트리 노드 반환되는 결과 객체의 데이터 구조는 아래와 같으며, elemet는 xml 객체를 반환 합니다. { index: 6, id: "", label: "총무팀2", value: "020103", element: <menu> <menuName value="총무팀"></menuName> <value value="020103"></value> <depth value="2"></depth> <folder value="a6"></folder> <checkbox value="true"></checkbox> <checkdisable value="true"></checkdisable> </menu> }

getSelectedValue( )

선택된 노드의 value를 반환합니다.

Return

type	description
String	선택된 노드의 value

Sample

treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, clothes 라벨이 선택되어 있는 예. -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes var returnValue = treeview1.getSelectedValue(); returnValue는 1이다.

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로 반환)

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

getXPathByValue( value )

value에 해당하는 node의 model에서의 xpath를 반환합니다.

Parameter

name	type	required	description
value	String	Y	xpath를 반환할 node의 value

Return

type	description
String	value에 해당하는 node의 model에서의 xpath

Sample

treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes var returnValue = treeview1.getXPathByValue('1-1'); returnValue는 res/shopping/vector/data[value='1-1'] 이다.

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

isLeaf( )

선택된 노드가 leaf인지 여부를 반환합니다.

Return

type	description
Boolean	leaf이면 true, 아니면 false

Sample

treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, clothes 라벨이 선택되어 있는 예. -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes var returnValue = treeview1.isLeaf(); returnValue는 false이다. shoes가 선택되어 있는 경우, returnValue는 true이다.

removeClass( className )

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

Parameter

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

Sample

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

removeNode( node )

node를 tree에서 지웁니다.

Parameter

name	type	required	description
node	Object	Y	지울 노드

removeNodeList( nodeList )

복수개의 node를 tree에서 한 번에 지웁니다. node삭제 후 tree의 node를 다시 그립니다. removeNode함수를 여러 번 호출하는 것보다 처리속도가 빠릅니다.

Parameter

name	type	required	description
nodeList	Object	Y	삭제할 노드의 리스트(array)

setCustomFormatter( userFunction )

사용자가 지정한 함수를 treeview의 node를 돌면서 각각 한번씩 호출합니다.

Parameter

name	type	required	description
userFunction	Function	Y	node를 인자로 받아 formattedValue를 반환하는 사용자 함수

Sample

treeview에서 number, 1, 5, date, 20130530, 05302013, test, test0의 value는 "n0,n1,n2,d0,d1,d2,t0,t1" 이라고 할 때, -[-] number - │ [+] 1 - │ [+] 5 -[-] date - └─ [+] 20130530 - └─ [+] 05302013 -[-] test - └─ [+] test0 -[-] dummy number의 하위 노드는 빨간색, date의 하위 노드는 노란색, test의 하위 노드는 회색, 그 외는 녹색으로 스타일을 변경하고자 할 때는 아래와 같이 하면 된다. var myCustomFormatter = function(value, formattedValue, node){ if(node.value.indexOf("n") >=0) { this.setLabelStyle(node.index, 'color', 'red', false);} else if(node.value.indexOf("d") >= 0) { this.setLabelStyle(node.index, 'color', 'yellow', false);} else if(node.value.indexOf("t") >= 0) { this.setLabelStyle(node.index, 'color', 'gray', false);} else { this.setLabelStyle(node.index, 'color', 'green', false);} return formattedValue; } treeview1.setCustomFormatter(myCustomFormatter);

setLabelByIndex( index , label )

node의 label을 변경합니다. 변경하고자 하는 node를 index를 통해 찾습니다.

Parameter

name	type	required	description
index	Number	Y	label을 변경하고자 하는 node의 index
label	String	Y	새로 설정할 label의 값

Sample

treeview가 아래와 같고, bottom의 node index = 3 인 경우 -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes treeview1.setLabelByIndex(3, "abcd"); bottom이 abcd로 변경된다. -[-] clothes - │ [+] outer - │ [+] abcd - │ └─ dress -[+] bags - └─ shoes

setLabelByValue( value , label )

node의 label을 변경합니다. 변경하고자 하는 node를 value를 통해 찾습니다.

Parameter

name	type	required	description
value	String	Y	label을 변경하고자 하는 node의 value
label	String	Y	새로 설정할 label의 값

Sample

treeview가 아래와 같고, bottom의 node value = "clothes_2" 인 경우 -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes treeview1.setLabelByValue("clothes_2", "test"); bottom이 test로 변경된다. -[-] clothes - │ [+] outer - │ [+] test - │ └─ dress -[+] bags - └─ shoes

setLabelStyle( idx , styleName , styleValue , applyChildNodes )

해당 node의 label style(node의 글자색, 글자크기, 글꼴 등)을 변경합니다.

Parameter

name	type	required	description
idx	Number	Y	해당 node의 index 또는 value (typeof idx가 "number"이면 index, "string"이면 value로 간주한다)
styleName	String	Y	설정할 style의 이름 (css속성의 color, background-color, font-size 등등)
styleValue	String	Y	설정할 style 값
applyChildNodes	Boolean	N	해당 node의 모든 하위 노드에 해당 style을 적용할 것인지에 대한 여부 (true:적용, false:미적용)

Sample

treeview에서 clothes, outer, bottom, dress, bags, shoes의 index는 1,2,3,4,5,6, value는 "6,5,4,3,2,1" 이라고 하면 -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes treeview1.setLabelStyle(treeview1.tree.rootNode.index, "color", "red", true); 모든 노드의 레이블 글자가 빨간색이 된다. treeview1.setLabelStyle(1, "background-color", "black", true); index=1인 노드, 즉 clothes의 모든 하위노드(clothes, outer, bottom, dress) 레이블 글자음영이 검정색이 된다. treeview1.setLabelStyle("2", "font-size", "20px", false); value=2인 노드, 즉 bags의 레이블 글자 크기가 20px가 된다. applyChildNodes = false이므로 shoes에는 적용되지 않는다.

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 )

객체의 readOnly 속성을 제어합니다. readOnly 속성을 활성화 시키려면 true 비활성화 시키려면 false를 입력합니다.

Parameter

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

Sample

componentId.setReadOnly(true);
입력가능한 컴포넌트의 경우 입력이 불가능한 상태가 된다.

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%"); 로 명시하여 준다.

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 속성 값을 다시 복구.

spanAll( openCloseFlag )

openCloseFlag에 따라서 tree를 전부 span시켜 줍니다.

Parameter

name	type	required	description
openCloseFlag	Boolean	Y	트리의 child를 보여줄지 감출지를 결정하는 flag

Sample

treeview에서 clothes, bags, shoes의 value는 1,2,3 이고 outer, bottom, dress의 value는 1-1, 1-2, 1-3인 경우, -[-] clothes - │ [+] outer - │ [+] bottom - │ └─ dress -[+] bags - └─ shoes treeview1.spanAll(false); 펼쳐진 노드들을 닫는다. -[+] clothes -[+] bags - └─ shoes treeview1.spanAll(true); 닫혀진 노드들을 펼친다. -[-] clothes - │ [-] outer - │ │ └─ jacket - │ [-] bottom - │ │ └─ skirt - │ └─ dress -[-] bags - │ └─ tote - └─ shoes

stopRefresh( stop )

treeview가 참조하고 있는 model을 바꾼경우에 refresh여부를 결정합니다. true인 경우 refresh를 하지 않고, false인 경우에는 refresh가 일어나서 treeview를 새로 그리게 됩니다.

Parameter

name	type	required	description
stop	Boolean	Y	model refresh여부

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"을 설정)