WebSquare.uiplugin.tabControl

다건의 탭과 컨텐츠를 생성할 수 있는 레이아웃용 컴포넌트로 동적으로 탭을 생성하거나 삭제할 수 있다.
하위 컨텐츠는 iframe으로 구성(페이지 링크)하거나 컨텐츠 영역에 하드코딩할 수 있다.
본 컴포넌트는 SPA모드 적용이 가능한 컴포넌트이며 제약사항등을 반드시 숙지해야한다.
본 컴포넌트는 최상위에는 div Tag로 이루어져있으며 하위로 복합 Tag들로 구성되어있다.

Type

uiplugin

Property Summary

adaptive: [layout]browser의 width에 따른 적응형 웹 모드로 adaptiveThreshold속성값(width값)을 참조하여 동작한다
adaptiveThreshold: [default:480]adaptive속성이 정의되어있는 경우 browser의 width에 따른 레이아웃 변경을 위한 전환 width값
alwaysDraw: TabControl 컴포넌트가 포함하는 모든 탭의 컴포넌트의 렌더링 여부를 결정.
class: HTML의 class속성과 동일한 기능을 제공하며 css파일 또는 style블럭에 정의한 class를 1개 또는 공백(space)를 이용하여 다중 적용이 가능하다.<br/>
closable: tab의 닫기 버튼을 활성화 할지의 여부로, 개별 closable 속성은 개별 tab에서 설정 함
confirmFalseAction: [default:new, select, exist]중복 확인 confirm에서 취소(cancel)를 선택했을 때의 컨텐츠 로딩 방식.
confirmMessage: useConfirmMessage속성의 값이 true인 경우 적용되며 confirm창에 보여줄 메세지.
confirmTrueAction: [default: exist, select, new] 중복 확인 confirm에서 확인(ok)를 선택했을 때의 컨텐츠 로딩 방식.
focusOnStart: [default:true, false]화면 로딩 시 활성화된 탭에 포커스를 이동시킬지에 대한 여부
hiddenTab: tab을 숨길 수 있는 기능
id: 컴포넌트의 ID로 전역객체로 할당되며 script에서 본 id로 컴포넌트에 접근이 가능하다
preventTabClickEvent: [default:false, true] onTabClick event를 막을지 여부
selectedIndex: 선택되 있는 tab의 인덱스
spaInitCount: 컴포넌트 초기 로딩 시 미리 SPA모드용 iframe을 생성할 개수.
tabMove: [default: false, true] 드래그-앤-드롭을 통해 탭 순서 변경을 허용.
tabScroll: [default:false, true]상단 탭들의 이동과 선택의 편의성을 제공하는 기능의 사용 여부로 하위버전의 호환성을 위해 기본 false로 설정되어있다
useATagBtn: [default:false, true] closable="true"인 경우, 탭의 닫기 버튼을 a 태그로 렌더링하. 각 탭 마다 설정해야 함.
useConfirmMessage: [default:false, true]addTab API로 동적으로 tab을 생성할 때 사용자에게 중복체크 confirm처리를 할지의 여부로 주의사항은 아래와같다.
useMoveNextTabFocus: [default:false, true] tab 안에 있는 컴포넌트를 tab키로 focus 이동시 마지막 컴포넌트에서 focus를 이동할 경우 다음 tab으로 focus 이동이 가능하다.
userData1: 사용자 정의 데이터 속성
userData2: 사용자 정의 데이터 속성
userData3: 사용자 정의 데이터 속성
useTabKeyOnly: [default:false, true]탭 키로만 내비게이션(tab이동)을 하는 모드로 false일 경우 방향키로도 tab간 이동이 가능하다.
windowMaxNum: [default:-1]최대 tab 개수로 -1로 설정할 경우 최대 tab개수에 제한을 두지 않는다.

Event Summary

onaftertabmove: tab이동이 발생한 직후 발생한다
onbeforeselect: tab이 선택되기 전에 발생되며 return을 통해 tab의 이동을 제어할 수 있다
onbeforetabclose: tab이 close되기 전에 발생되며 return을 통해 close여부를 제어할 수 있다.
onbeforetabmove: tab이동이 발생하기 직전에 발생한다
onchange: 선택 된 tab이 변경된 경우에 발생한다
ondrawcomplete: alwaysDraw="false"일 때, content의 wframe 또는 iframe이 화면에 load되는 시점에 발생한다
ontabclick: tab이 클릭된 경우 발생
ontabclose: close버튼이 클릭된 경우 발생

Method Summary

activateTab( idx ): 지정한 index의 탭이 비활성화 상태인 경우(alwaysDraw=false) 활성화 상태로 변경.
addClass( className ): 컴포넌트에 class를 추가한다
addTab( id , tabOpt , contOpt ): tab을 추가하는 기능으로 tab과 content의 세부 생성 옵션을 설정할 수 있다
bind( eventType , function ): 컴포넌트의 이벤트를 동적으로 할당한다
changeClass( oldClassName , newClassName ): 컴포넌트에서 oldClassName의 이름을 가진 class를 newClassName으로 변경한다.
deleteAllTabs( ): TabControl의 모든 탭을 한번에 삭제한다(닫는다)
deleteTab( idx ): 탭의 index로 탭을 삭제한다(닫는다)
disableTab( tabIndex ): tab을 disabeld 처리한다
enableTab( tabIndex ): tab의 disabeld를 해제한다
focus( ): 컴포넌트에 focus를 준다
getDisabled( ): 현재 설정되어있는 disabled 속성값을 반환한다
getFrame( idx ): tab의 index에 해당하는 wframe 또는 iframe을 반환한다.
getGenerator( ): generator 하위의 컴포넌트에서 이 함수를 호출하여 자신을 생성한 부모 generator 객체를 가져온다
getID( ): 웹스퀘어 컴포넌트의 id를 반환한다
getLabelText( idx ): tab의 label을 반환한다
getOpacity( ): CSS로 정의 된 컴포넌트의 Opacity(불투명도) 값을 반환한다
getPluginName( ): 웹스퀘어 컴포넌트의 pluginName(컴포넌트명)을 반환한다
getPosition( positionName ): 컴포넌트의 left 또는 top의 위치 값을 반환한다
getReadOnly( ): 현재 설정되어있는 readOnly 속성값을 반환한다
getSelectedTabID( ): 현재 선택된 tab의 ID를 반환한다
getSelectedTabIndex( ): 현재 선택된 tab의 index를 반환한다
getSize( sizeName ): 컴포넌트의 크기 값을 반환합니다
getStyle( propertyName ): 컴포넌트에 적용 된 CSS의 propertyName에 해당하는 값을 반환한다
getStyleValue( style ): [deprecated]getStyle로 사용.
getTabCount( getTabCount의 ): 현재 tab 개수 반환
getTabID( tabIndex ): tab index에 해당하는 ID 리턴합니다
getTabIndex( tabID ): tab의 ID로 해당 tab의 index를 반환한다
getTabInfo( ): 각 tab에 대한 id, label, defaultTabIndex(초기의탭위치), currentTabIndex(현재화면의탭위치), src, alwaysDraw 정보를 배열에 담아 리턴하는 함수
getTitle( ): title 속성값을 반환한다
getUserData( key ): setUserData API로 설정 된 사용자 데이터 또는 소스(화면 XML)에 사용자가 임의의 property로 정의 된 값을 반환한다
getWindow( tabIndex ): tab index에 해당하는 window 객체를 반환한다.
hasClass( className ): 컴포넌트가 parameter로 받은 className의 class를 가지고 있는지의 여부를 반환한다
hide( ): 컴포넌트를 화면에서 보이지 않도록 숨긴다.
hideTab( tabIndex ): tab을 숨김(hidden)처리 한다
isLoaded( idx ): tab의 index에 해당하는 화면의 출력유무를 반환한다
removeClass( className ): 컴포넌트에 className의 class를 삭제한다.
setContentsHeight( height ): 컨텐츠 영역의 높이(px단위)를 설정한다
setDisabled( disabled ): 컴포넌트의 disabled 속성을 설정한다
setEventPause( evList , flag ): 컴포넌트의 이벤트를 disable 또는 enable시킨다
setLabelText( idx , label ): tab의 label을 설정한다
setOpacity( value ): 컴포넌트의 CSS Opacity(불투명도)값를 설정한다
setPosition( left , top , mode ): 컴포넌트의 위치(left,top)를 설정한다
setReadOnly( readOnly ): readOnly 속성값을 설정한다
setSelectedTabIndex( tabIndex ): tab의 index에 해당하는 tab을 선택한다
setStyle( propertyName , value ): 컴포넌트의 property별 style을 설정한다
setTabOrder( tabOrderArr ): 새로운 tab순서에 대한 배열을 받아 해당 순서대로 tab을 재배치시키는 함수
setUserData( key , value ): 컴포넌트에 사용자 데이터를 설정한다
show( displayType ): 컴포넌트를 화면에 보이도록 설정한다.
showTab( tabIndex ): hide된 tab을 보여둔다
toggleClass( className ): 컴포넌트가 className의 이름을 가진 class를 가지고 있다면 제거하고, 가지고 있지 않다면 추가한다.
trigger( type , array ): 컴포넌트에 등록 된 특정 이벤트를 발생시킨다
unbind( type , function ): 컴포넌트에 등록 된 이벤트를 제거한다
visible( flag ): [deprecated]show/hide 로 사용하거나 setStyle을 통해 visible 속성을 설정한다.

Property Detail

adaptive: [layout]browser의 width에 따른 적응형 웹 모드로 adaptiveThreshold속성값(width값)을 참조하여 동작한다.
adaptiveThreshold: [default:480]adaptive속성이 정의되어있는 경우 browser의 width에 따른 레이아웃 변경을 위한 전환 width값. px단위로 계산된다.
alwaysDraw: TabControl 컴포넌트가 포함하는 모든 탭의 컴포넌트의 렌더링 여부를 결정.
true: TabControl 컴포넌트가 포함하는 모든 탭의 컴포넌트를 초기 화면 로딩 시 렌더링. (탭 및 컴포넌트 개수에 따라 브라우저의 렌더링 부하가 증가할 수 있음.)
false (기본 값): 초기 로딩 시, 첫번 째 탭의 컴포넌트만 렌더링. 사용자 이벤트 혹은 스크립트 이벤트로 각 탭이 선택되는 시점에 해당 탭의 화면을 렌더링. (초기 랜더링 후 첫 번째 탭을 제외한 나머지 탭의 컴포넌트는 객체화되지 않음.)
class: HTML의 class속성과 동일한 기능을 제공하며 css파일 또는 style블럭에 정의한 class를 1개 또는 공백(space)를 이용하여 다중 적용이 가능하다.

컴포넌트의 layout이 복잡한 구조를 가지고 있기 때문에 css의 selector를 이용하여 하위 항목에 접근해야한다.

기본적으로 엔진 내부에서 컴포넌트별로 class를 적용하고 있으며 해당 class를 이용하여 컴포넌트의 css를 공통으로 적용할 수 있다.
closable: tab의 닫기 버튼을 활성화 할지의 여부로, 개별 closable 속성은 개별 tab에서 설정 함
confirmFalseAction: [default:new, select, exist]중복 확인 confirm에서 취소(cancel)를 선택했을 때의 컨텐츠 로딩 방식.
(new:새로운 탭, select:기존 탭을 선택, exist:tabID에 해당하는 탭에 src를 바꿔 로딩하고 해당 탭을 선택)
confirmMessage: useConfirmMessage속성의 값이 true인 경우 적용되며 confirm창에 보여줄 메세지.
기본적으로 엔진에서 tab의 label값을 이용하여 중복 확인 메세지를 보여준다.
confirmTrueAction: [default: exist, select, new] 중복 확인 confirm에서 확인(ok)를 선택했을 때의 컨텐츠 로딩 방식.
(new: 새로운 탭, select: 기존 탭을 선택, exist: tabID에 해당하는 탭에 src를 바꿔 로딩하고 해당 탭을 선택)
focusOnStart: [default:true, false]화면 로딩 시 활성화된 탭에 포커스를 이동시킬지에 대한 여부. 기본값은 true이다.
hiddenTab: tab을 숨길 수 있는 기능
id: 컴포넌트의 ID로 전역객체로 할당되며 script에서 본 id로 컴포넌트에 접근이 가능하다.
preventTabClickEvent: [default:false, true] onTabClick event를 막을지 여부. tab disabled 상태에서만 처리 된다.
selectedIndex: 선택되 있는 tab의 인덱스
spaInitCount: 컴포넌트 초기 로딩 시 미리 SPA모드용 iframe을 생성할 개수.
SPA는 iframe을 미리 생성하여 웹스퀘어 엔진 자원을 로딩해 놓는 기능으로 addTab시에 화면 로딩 속도를 향상 시킬수 있다.
0보다 큰 값일 경우 SPA모드로 동작하며 일반적으로 windowMaxNum속성과 같은 값을 설정한다.
tabMove: [default: false, true] 드래그-앤-드롭을 통해 탭 순서 변경을 허용.
true: 허용. false: 기본 값. 허용하지 않음.
tabScroll: [default:false, true]상단 탭들의 이동과 선택의 편의성을 제공하는 기능의 사용 여부로 하위버전의 호환성을 위해 기본 false로 설정되어있다.
useATagBtn: [default:false, true] closable="true"인 경우, 탭의 닫기 버튼을 a 태그로 렌더링하. 각 탭 마다 설정해야 함.
a 태그는 키보드를 통한 제어가 가능하여 웹 접근성 준수가 가능.
true: a 태그로 렌더링. false: 기본 값. div 태그로 렌더링.
useConfirmMessage: [default:false, true]addTab API로 동적으로 tab을 생성할 때 사용자에게 중복체크 confirm처리를 할지의 여부로 주의사항은 아래와같다.
addTab API의 파라메터의 속성 중 openAction의 값이 정의되지 않고 tab의 id가 중복되었을 경우 아래의 속성과 연동하여 사용자에게 중복체크 confirm 처리한다.
관련 속성 : confirmMessage, confirmTrueAction, confirmFalseAction
useMoveNextTabFocus: [default:false, true] tab 안에 있는 컴포넌트를 tab키로 focus 이동시 마지막 컴포넌트에서 focus를 이동할 경우 다음 tab으로 focus 이동이 가능하다.
해당 속성은 useTabKeyOnly가 false일 경우에만 적용된다.
userData1: 사용자 정의 데이터 속성. getUserData("userData1") API를 통해 설정한 값을 얻어올 수 있다.
userData2: 사용자 정의 데이터 속성. getUserData("userData2") API를 통해 설정한 값을 얻어올 수 있다.
userData3: 사용자 정의 데이터 속성. getUserData("userData3") API를 통해 설정한 값을 얻어올 수 있다.
useTabKeyOnly: [default:false, true]탭 키로만 내비게이션(tab이동)을 하는 모드로 false일 경우 방향키로도 tab간 이동이 가능하다.
해당 속성은 웹 접근성 지원을 위한 모드이다.
windowMaxNum: [default:-1]최대 tab 개수로 -1로 설정할 경우 최대 tab개수에 제한을 두지 않는다.
spaInitCount속성값을 설정 한 경우 일반적으로 해당 속성의 값과 동일하게 설정한다.

Event Detail

onaftertabmove

tab이동이 발생한 직후 발생한다.

Parameter
name	type	description
info	Object	startTabID, startTabIndex, endTabID, endTabIndex를 포함한 오브젝트를 반환한다.

onbeforeselect

tab이 선택되기 전에 발생되며 return을 통해 tab의 이동을 제어할 수 있다.

Parameter
name	type	description
selectedIndex	Number:Y	이전 index
index	Number:Y	사용자가 선택한 index

Sample

onbeforetabclose

tab이 close되기 전에 발생되며 return을 통해 close여부를 제어할 수 있다.
사용자가 close버튼을 클릭하거나 deleteTab API를 통해 tab을 닫을 때 발생된다.

Parameter
name	type	description
tabID	String:Y	변경된 탭의 ID로 엔진 내부에서 사용하는 id.
idx	Number:Y	탭의 index

Sample

onbeforetabmove

tab이동이 발생하기 직전에 발생한다.

Parameter
name	type	description
info	Object	startTabID, startTabIndex, endTabID, endTabIndex를 포함한 오브젝트를 반환한다.

onchange

선택 된 tab이 변경된 경우에 발생한다.

Parameter
name	type	description
tabID	String:Y	변경된 탭의 ID로 엔진 내부에서 사용하는 id.
idx	Number:Y	변경된 탭의 index
userTabID	String:Y	변경된 탭의 사용자가 지정한 ID으로 addTab API를 이용하여 탭 추가 한 경우 탭의 옵션 중 id값.

Sample

//아래와 같이 tab을 추가하고 해당 tab을 click한 경우 var tabOpt = {}; tabOpt.label= "웹스퀘어 문서 사이트"; tabOpt.openAction = "new"; tabOpt.closable ="true"; var contentOpt = { "src" : "http://docs.inswave.com"; }; tabControl1.addTab( "tab01", tabOpt, contentOpt); //onchage이벤트의 return 예시 <script ev:event="onchange(tabID, idx, userTabID)" type="javascript"><![CDATA[ alert(tabID + " , " + idx + " , " + userTabID); //alert의 string 예시 ) tabControl1_tab_tab1 , 1 , tab1 ]]></script> output1의 표현되는 값은 tabControl1_tab_tab2 : 1 : tab2 이며, tab2로 이동.

ondrawcomplete

alwaysDraw="false"일 때, content의 wframe 또는 iframe이 화면에 load되는 시점에 발생한다.

Parameter
name	type	description
tabID	String	load된 탭의 ID로 엔진 내부에서 사용하는 id
idx	String	load된 탭의 index
userID	String	load된 탭의 사용자 id

Sample

script의 lazy="false"로 설정 후 이벤트 사용한다. <script type="javascript" lazy="false"><![CDATA[ scwin.tabControl1_ondrawcomplete = function(tabID, idx, userID) { console.log("tabID:"+tabID+" idx:"+idx+" userID:"+userID); }; ]]></script>

ontabclick

tab이 클릭된 경우 발생

Parameter
name	type	description
tabID	String:Y	변경된 탭의 ID로 엔진 내부에서 사용하는 id.
idx	Number:Y	변경된 탭의 index

Sample

ontabclose

close버튼이 클릭된 경우 발생

Parameter
name	type	description
tabID	String:Y	탭의 ID로 엔진 내부에서 사용하는 id.
idx	Number:Y	탭의 index

Sample

Method Detail

activateTab( idx )

지정한 index의 탭이 비활성화 상태인 경우(alwaysDraw=false) 활성화 상태로 변경.
탭 내부 컨텐츠에 대해 API를 적용할 경우, 해당 탭을 활성화시켜야 API가 동작.
관련 API: isLoaded (탭 활성화 상태를 확인.)

Parameter
name	type	required	description
idx	Number	Y

addClass( className )

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

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

Sample

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

addTab( id , tabOpt , contOpt )

tab을 추가하는 기능으로 tab과 content의 세부 생성 옵션을 설정할 수 있다.

Parameter
name	type	required	description
id	String	Y	tab의 ID
tabOpt	JSON	Y	tab의 생성 옵션
contOpt	JSON	Y	content의 생성 옵션

Sample

//tabControl1컴포넌트에 "tab01"이라는 id를 가진 tab을 생성하고 세부 옵션은 아래와 같다. //tab의 label은 "임시화면"으로 닫기버튼과 함께 표현하고 컨텐츠를 iframe으로 로딩하고자 할 때. //tab의 addTabIndex은 위치를 지정해서 넣어주고자 할 때. addTabIndex가 없을 경우 마지막 tab을 추가 var tabOpt = { label : "임시화면", closable : true, addTabIndex : 0 }; var contOpt = { wframe : true src : "/xml/tmp.xml" title : "iframe title" }; tabControl1.addTab('tab01', tabOpt, contOpt);

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

deleteAllTabs( )

TabControl의 모든 탭을 한번에 삭제한다(닫는다).

Sample

tabControl1.deleteAllTabs();

deleteTab( idx )

탭의 index로 탭을 삭제한다(닫는다).

Parameter
name	type	required	description
idx	Number	Y	삭제하(닫으)려는 텝의 index

Sample

//첫번째 tab을 닫고자 할 때 tabControl1.deleteTab(0);

disableTab( tabIndex )

tab을 disabeld 처리한다.

Parameter
name	type	required	description
tabIndex	Number	Y	disabled할 tab의 index

Sample

//첫번째 tab이 비활성화된다. tabControl1.disableTab(0);

enableTab( tabIndex )

tab의 disabeld를 해제한다.

Parameter
name	type	required	description
tabIndex	Number	Y	enabled할 tab의 index.

Sample

//첫번째 tab을 활성화한다. tabControl1.enableTab(0);

focus( )

컴포넌트에 focus를 준다.

getDisabled( )

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

Return
type	description
Boolean	disabled 속성값

Sample

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

getFrame( idx )

tab의 index에 해당하는 wframe 또는 iframe을 반환한다.
iframe안의 객체(컴포넌트,function 등)에 접근하려면 getWindow API를 사용한다.

Parameter
name	type	required	description
idx	Number	Y	tab의 index

Return
type	description
Object	tab index에 해당하는 wframe 또는 iframe 객체

Sample

//첫번째 tab의 src를 "/tmp/tmp01.xml"로 변경한다. var tmpContFrame = tabControl1.getFrame(0); tmpContFrame.setSrc("/tmp/tmp01.xml");

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" }

getLabelText( idx )

tab의 label을 반환한다.

Parameter
name	type	required	description
idx	Number	Y	tab의 index

Return
type	description
String	tab의 label

Sample

//1번째 tab의 label을 반환 var returnValue = tabControl1.getLabelText(0);

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

getSelectedTabID( )

현재 선택된 tab의 ID를 반환한다.

Return
type	description
String	선택된 tab의 ID

Sample

var returnValue = tabControl1.getSelectedTabID();

getSelectedTabIndex( )

현재 선택된 tab의 index를 반환한다.

Return
type	description
Number	tab의 index

Sample

var returnValue = tabControl1.getSelectedTabIndex();

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

getTabCount( getTabCount의 )

현재 tab 개수 반환.

Parameter
name	type	required	description
getTabCount의	JSONObject	Y	반환 옵션

Return
type	description
Number	현재 tab의 개수

Sample

var totTabCount = tabControl1.getTabCount();

getTabID( tabIndex )

tab index에 해당하는 ID 리턴합니다.

Parameter
name	type	required	description
tabIndex	Number	Y	tab의 index

Return
type	description
String	tab의 ID

Sample

//0번째 tab의 ID를 반환 var tmpRs = tabControl1.getTabID(0);

getTabIndex( tabID )

tab의 ID로 해당 tab의 index를 반환한다.

Parameter
name	type	required	description
tabID	String	Y	tab의 ID

Return
type	description
Number	tab의 index

Sample

//tab의 id가 "tab1"인 tab의 index를 반환 var tmpRs = tabControl1.getTabIndex("tab1");

getTabInfo( )

각 tab에 대한 id, label, defaultTabIndex(초기의탭위치), currentTabIndex(현재화면의탭위치), src, alwaysDraw 정보를 배열에 담아 리턴하는 함수.

Return
type	description
Array	각 tab에 대한 정보를 담은 array

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 예시 ) "이름 입력"

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"

getWindow( tabIndex )

tab index에 해당하는 window 객체를 반환한다.
반환된 객체를 통해 웹스퀘어 컴포넌트 및 function, 변수 등에 접근이 가능한다.
tab의 index가 없으며 현재 선택된 tab의 window content를 반환한다.

Parameter
name	type	required	description
tabIndex	Number	N	tab의 index

Return
type	description
windowObject	windowObject

Sample

//현재 선택 된 tab의 객체 반환 var tmpObj = tabControl1.getWindow(); //선택 된 tab의 컨텐츠에 있는 input1 컴포넌트에 value를 설정. tmpObj.input1.setValue("WebSquare");

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

hideTab( tabIndex )

tab을 숨김(hidden)처리 한다.

Parameter
name	type	required	description
tabIndex	Number	Y	hide할 tab의 index

Sample

//첫번째 tab을 hidden처리한다. tabControl1.hideTab(0);

isLoaded( idx )

tab의 index에 해당하는 화면의 출력유무를 반환한다.

Parameter
name	type	required	description
idx	Number	Y	tab의 index

Return
type	description
Object	tab index에 해당하는 화면의 출력유무

Sample

// alwaysDraw="false"상황에서 두번째 탭이 출력되었는지 판단 후 객체접을 한다. if( tabControl1.isLoaded( 1 ) ) { input1.setValue( "WebSquare5" ); }

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

setContentsHeight( height )

컨텐츠 영역의 높이(px단위)를 설정한다

Parameter
name	type	required	description
height	Number	Y	height(숫자만 입력한다)

Sample

//tabControl의 컨텐츠 영역의 높이를 500px로 변경한다. tabControl1.setContentsHeight(500);

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

setLabelText( idx , label )

tab의 label을 설정한다.

Parameter
name	type	required	description
idx	Number	Y	tab의 index
label	Number	Y	tab의 label

Sample

//첫번째 tab의 label을 "임시페이지"로 설정한다. tabControl1.setLabelText(0, "임시페이지");

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

setSelectedTabIndex( tabIndex )

tab의 index에 해당하는 tab을 선택한다.

Parameter
name	type	required	description
tabIndex	Number	Y	tab의 index ( id를 넘기게 되면 idx로 처리 함)

Sample

//2번째 tab을 선택한다 tabControl1.setSelectedTabIndex(1);

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

setTabOrder( tabOrderArr )

새로운 tab순서에 대한 배열을 받아 해당 순서대로 tab을 재배치시키는 함수

Parameter
name	type	required	description
tabOrderArr	Array	Y	tab순서를 담은 배열. 배열의 길이는 반드시 tab전체 길이와 일치해야 한다.

Sample

// 기존 탭의 순서가 아래와 같이 있을 때 (배열의 각 항목은 탭의 id임) [ 'tabs1', 'tabs2', 'tabs3' ] // setTabOrder의 인자에는 변경하고자 하는 탭의 순서 배열을 넘겨준다. (단, 해당 배열의 길이는 tab전체의 길이와 같아야 하고, 각 원소는 탭의 id여야 한다.) tabControl1.setTabOrder(['tabs3', 'tabs1', 'tabs2']) // 탭의 순서는 다음과 같이 바뀐다. [ 'tabs3', 'tabs1', 'tabs2' ]

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

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

showTab( tabIndex )

hide된 tab을 보여둔다.

Parameter
name	type	required	description
tabIndex	Number	Y	tab의 index

Sample

//첫번째 tab을 show. tabControl1.showTab(0);

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