WebSquare.uiplugin.tabControl

Provides tab UI layouts, and allows the developer to dynamically add or delete tabs.
The lower-level contents may be contained in the IFrame, or hard-coded in the content field.
The SPA is supported in TabControl.
At the highest level is the div tab which conains various tags.

Type

uiplugin

Property Summary

adaptive: [layout] Uses the adaptive mode (in which the layout adapts to the screen sizes and the device types.)
adaptiveThreshold: [default:480] The threshold required to enter the adaptive mode. (The default is 480.)The unit is in pixels.
alwaysDraw: Draws the content in advance.
class: Functions same as the class property of HTML. More than one class defined in the CSS file or style block can be applied being separated by blank space.<br/>
closable: Sets the closable property of all tabs. For each tab, use the closable property of the corresponding tab.
confirmFalseAction: [default:new, select, exist] Action to be taken upon display of the confirmation message.
confirmMessage: Content of the confirmation message to display when the useConfirmMessage is true.
confirmTrueAction: [default: exist, select, new] Action to be taken upon the end user's clicking Yes to the confirmation message
focusOnStart: [default:true, false] Moves the focus to the activated tab upon initial creation of the TabControl component.
hiddenTab: Hides the tab.
id: ID of the component. Allocated as a global object. Scripts access the component through the ID.
preventTabClickEvent: [default:false, true] Prevents the onTabClick event.
selectedIndex: Index of the selected tab
spaInitCount: Number of the iframes to be created in advance for the SPA mode for faster addition of tabs.
tableRender: [default : "",ul] Define the HTML tag to render the selection list. When the tableRender is "ul",
tabMove: [default: false, true] Allows changes of the tab sequence through user’s dragging-and-dropping.
tabPosition: Sets the position of the tab.
tabScroll: [default:false, true] ses the tab scrolling feature (or button). For the lower compatibility, the default is false.
useATagBtn: [default:false, true] In case of closable="true", renders the Close button of the tab using <a> tag. Must be set for each tab.
useConfirmMessage: [default:false, true] Uses a confirmation message when dynamically adding a tab using addTab API.
useMoveNextTabFocus: [default:false, true] Allows navigation among the components trough the tab key within the TabControl. Pressing the tab key one the last component will move to the next tab.
userData1: User-defined property
userData2: User-defined property
userData3: User-defined property
useTabKeyOnly: [default:false, true] Allows use of the tab key only for navigation purposes between the tabs. In case of false, the user can navigate between the tabs using arrow keys.
windowMaxNum: [default: -1] Maximum number of the tabs. -1 is for unlimited tabs.

Event Summary

onaftertabmove: Triggered right after tab moving.
onbeforeselect: Triggered before tab selection. The developer can control the tab with the return value.
onbeforetabclose: Triggered before the tab is closed. The developer cancontrol the tab with the return value.
onbeforetabmove: Triggered right before tab moving.
onchange: Triggered upon selection of a different tab.
ondrawcomplete: In case of alwaysDraw="false", Trigggered upon the contents being loaded on WFrame or IFrame.
ontabclick: Triggered upon the end user's clicking a tab.
ontabclose: Triggered upon clicking of the Close button.
ontabload: Triggered when the WFrame or IFrame of the contents is completely loaded.

Method Summary

activateTab( idx ): Activates the specified tab if it is inactivated (alwaysDraw=false).
addClass( className ): Adds a class to the component.
addTab( id , tabOpt , contOpt ): Adds a tab, and sets the contents of the tab.
bind( eventType , function ): Dynamically allocates events to the component.
changeClass( oldClassName , newClassName ): Renames the class from oldClassName to newClassName.
deleteAllTabs( ): Deletes (or closes) all tabs within the TabControl.
deleteTab( idx ): Deletes (or closes) the tab of the corresponding index.
disableTab( tabIndex ): Disables the tab.
enableTab( tabIndex ): Enables the tab.
focus( ): Moves the focus to the component.
getDisabled( ): Gets the current value of the disabled property.
getFrame( idx ): Returns WFrame or IFrame of the corresponding tab index.
getGenerator( ): Called by a component under the Generator component. When called, gets the parent Generator object.
getID( ): Gets the ID of the component.
getInitStyle( property ): Gets the initial style of the component.
getLabelText( idx ): Returns the label of the label of the tab.
getOpacity( ): Gets the opacity of the component defined in CSS.
getPluginName( ): Gets the pluginName (or the name) of the component.
getPosition( positionName ): Gets the left or top position of the component.
getReadOnly( ): Gets the current setting of the readOnly property.
getScope( ): Returns the parent WFrame object when the component is a child of the WFrame which uses the scope feature (scope=true).
getScopeWindow( ): Returns the scope object of the parent when the component is a child of the WFrame which uses the scope feature (scope=true).
getSelectedTabID( ): Returns the ID of the currently selected tab.
getSelectedTabIndex( ): Returns the index of the currently selected tab.
getSize( sizeName ): Gets the size of the component.
getStyle( propertyName ): Gets the current value of the propertyName of the component defined in CSS.
getStyleValue( style ): [deprecated] Use getStyle instead.
getTabCount( getTabCount ): Returns the number of the current tabs.
getTabID( tabIndex ): Returns the ID of the tab of the corresponding index.
getTabIndex( tabID ): Returns the index of the tab of the corresponding ID.
getTabInfo( ): Returns information of each tab (id, label, defaultTabIndex, currentTabIndex, src, and alwaysDraw) as an array.
getTitle( ): Gets the title value.
getUdcHome( ): Returns the path of the file which defines the UDC.
getUdcRoot( ): Returns the path of the file which defines the UDC.
getUserData( key ): Returns the user-defined property value set by setUserData as the user data or source (page XML).
getWindow( tabIndex ): Returns the window content of the corresponding tab index.
hasClass( className ): Checks whether the component has className received as a parameter or not.
hide( ): Hides the component.
hideTab( tabIndex ): Hides the tab.
isLoaded( idx ): Returns the loading status of the specified tab.
removeClass( className ): Removes className from the component.
setContentsHeight( height ): Sets the height of the contents area (in pixels).
setDisabled( disabled ): Sets the disabled property.
setEventPause( evList , flag ): Disables or enables the component event.
setHeight( height ): Sets the height of the TabControl in pixels.
setInitStyle( property ): Initializes the component style.
setLabelText( idx , label ): Returns the label of the tab.
setOpacity( value ): Sets the opacity of the component.
setPosition( left , top , mode ): Sets the position (left, top) of the component.
setReadOnly( readOnly ): Controls the "readOnly" property.
setSelectedTabIndex( tabIndex ): Selects the tab of the corresponding index.
setStyle( propertyName , value ): Sets the style of the specified property.
setTabHTML( tabID , tabHTML ): Dynamically changes the tabHTML value.
setTabOrder( tabOrderArr ): Receives the tab sequence information as an array, and rearranges the tab.
setUserData( key , value ): Sets the user data in the component.
setWidth( width ): Sets the width of the TabControl in pixels.
show( displayType ): Displays the component.
showTab( tabIndex ): Shows the hidden tab.
toggleClass( className ): Removes a class named className, or if there is no such a class, adds a class named className.
trigger( type , array ): Triggers a certain event registered for the component.
unbind( type , function ): Removes an event registered for the component.
visible( flag ): [deprecated] Shows/Hides the component, or sets the visible property using setStyle.

Property Detail

adaptive: [layout] Uses the adaptive mode (in which the layout adapts to the screen sizes and the device types.)
adaptiveThreshold: [default:480] The threshold required to enter the adaptive mode. (The default is 480.)The unit is in pixels.
alwaysDraw: Draws the content in advance.
class: Same as the class property in HTML standard. One or more classes defined in the CSS file or in the style block can be applied (through the use of the space as the separator).

The developer must use a proper CSS selector due to the layout complexity of the component.

WebSquare5 Engine applies different classes to different components. By defining a common class, the common class can be applied to multiple components.
closable: Sets the closable property of all tabs. For each tab, use the closable property of the corresponding tab.
confirmFalseAction: [default:new, select, exist] Action to be taken upon display of the confirmation message.
(new: Load on a new tab. select: Select one of the current tabs. exist: Load the new src on the tab of the corresponding tabID and select the tab.)
confirmMessage: Content of the confirmation message to display when the useConfirmMessage is true.
The Engine displays the confirmation message by referring to the tab label.
confirmTrueAction: [default: exist, select, new] Action to be taken upon the end user's clicking Yes to the confirmation message
(new: Load on a new tab. select: Select one of the current tabs. exist: Load the new src on the tab of the corresponding tabID and select the tab.)
focusOnStart: [default:true, false] Moves the focus to the activated tab upon initial creation of the TabControl component. The default is true.
hiddenTab: Hides the tab.
id: ID of the component. Allocated as a global object. Scripts access the component through the ID.
preventTabClickEvent: [default:false, true] Prevents the onTabClick event. Valid only when the tab is disabled.
selectedIndex: Index of the selected tab
spaInitCount: Number of the iframes to be created in advance for the SPA mode for faster addition of tabs.
SPA is to generate IFrames in advance and load the WebSquare resources in advance in order to add tabs faster.
If the value is larger than 0, the SPA mode will be enabled. Otherwise, the value should be same as the windowMaxNum.
tableRender: [default : "",ul] Define the HTML tag to render the selection list. When the tableRender is "ul",
items for all tabs displayed upon clicking of the tabScroll button will be created with ul and li tags.
tabMove: [default: false, true] Allows changes of the tab sequence through user’s dragging-and-dropping.
true: Allow. false: Default Not allow.
tabPosition: Sets the position of the tab.
The tab is basically located at the top. However, leaving this property blank is different from setting it as top. (This property is for lower compatibility.)
tabScroll: [default:false, true] ses the tab scrolling feature (or button). For the lower compatibility, the default is false.
useATagBtn: [default:false, true] In case of closable="true", renders the Close button of the tab using <a> tag. Must be set for each tab.
<a> tag is controllable through the keyboard and complies with the web accessibility requirements.
true: Use <a> tag. false: Default. Use <div> tag.
useConfirmMessage: [default:false, true] Uses a confirmation message when dynamically adding a tab using addTab API.
If openAction is not defined in the addTab API and the tab IDs overlap, the following properties will be used for confirmation.
Related Properties: confirmMessage, confirmTrueAction, confirmFalseAction
useMoveNextTabFocus: [default:false, true] Allows navigation among the components trough the tab key within the TabControl. Pressing the tab key one the last component will move to the next tab.
Valid only when the useTabKeyOnly is false.
userData1: User-defined property. Use getUserData("userData1") to get the data.
userData2: User-defined property. Use getUserData("userData2") to get the data.
userData3: User-defined property. Use getUserData("userData3") to get the data.
useTabKeyOnly: [default:false, true] Allows use of the tab key only for navigation purposes between the tabs. In case of false, the user can navigate between the tabs using arrow keys.
Complies with web accessibility requirements.
windowMaxNum: [default: -1] Maximum number of the tabs. -1 is for unlimited tabs.
Otherwise, the value should be same as spaInitCount.

Event Detail

onaftertabmove

Triggered right after tab moving.

Parameter
name	type	description
info	Object	Returns an object containing startTabID, startTabIndex, endTabID, and endTabIndex.

onbeforeselect

Triggered before tab selection. The developer can control the tab with the return value.

Parameter
name	type	description
selectedIndex	Number:Y	Old index
index	Number:Y	Index of the selected tab

Sample

onbeforetabclose

Triggered before the tab is closed. The developer cancontrol the tab with the return value.
Triggered upon the user’s clicking the Close button or a tab being closed by deleteTab.

Parameter
name	type	description
tabID	String:Y	New tab ID to be used internally by the engine.
idx	Number:Y	Index of the tab

Sample

onbeforetabmove

Triggered right before tab moving.

Parameter
name	type	description
info	Object	Returns an object containing startTabID, startTabIndex, endTabID, and endTabIndex.

onchange

Triggered upon selection of a different tab.

Parameter
name	type	description
tabID	String:Y	New tab ID to be used internally by the engine.
idx	Number:Y	New tab index
userTabID	String:Y	User-defined ID for the new tab. ID of the tab added by addTab.

Sample

// Add a tab and click the tab. var tabOpt = {}; tabOpt.label= "WebSquare Documents"; tabOpt.openAction = "new"; tabOpt.closable ="true"; var contentOpt = { "src" : "http://docs.inswave.com"; }; tabControl1.addTab( "tab01", tabOpt, contentOpt); // (Return Example of the onchange event)<script ev:event="onchange(tabID, idx, userTabID)" type="javascript"><![CDATA[ alert(tabID + " , " + idx + " , " + userTabID); //alert의 string 예시 ) tabControl1_tab_tab1 , 1 , tab1 ]]></script> The output1 component will display tabControl1_tab_tab2 : 1 : tab2, and tab2 will be selected.

ondrawcomplete

In case of alwaysDraw="false", Triggered upon the contents being loaded on WFrame or IFrame.

Parameter
name	type	description
tabID	String	ID of the loaded tab to be used internally by the engine.
idx	String	Index of the loaded tab
userID	String	User ID of the loaded tab

Sample

Define lazy="false" first in the script before using the event. <script type="javascript" lazy="false"><![CDATA[ scwin.tabControl1_ondrawcomplete = function(tabID, idx, userID) { console.log("tabID:"+tabID+" idx:"+idx+" userID:"+userID); }; ]]></script>

ontabclick

Triggered upon the end user's clicking a tab.

Parameter
name	type	description
tabID	String:Y	New tab ID to be used internally by the engine.
idx	Number:Y	New tab index

Sample

ontabclose

Triggered upon clicking of the Close button.

Parameter
name	type	description
tabID	String:Y	ID of the tab to be internally used by the engine.
idx	Number:Y	Index of the tab

Sample

ontabload

Triggered when the WFrame or IFrame of the contents is completely loaded.

Parameter
name	type	description
tabID	String	ID of the loaded tab to be used internally by the engine.
idx	String	Index of the loaded tab
userID	String	User ID of the loaded tab

Sample

Define lazy="false" first in the script before using the event. <script type="javascript" lazy="false"><![CDATA[ scwin.tabControl1_ontabload = function(tabID, idx, userID) { console.log("tabID:"+tabID+" idx:"+idx+" userID:"+userID); }; ]]></script>

Method Detail

activateTab( idx )

Activates the specified tab if it is inactivated (alwaysDraw=false).
When applying the function to the contents inside the tab, activate the tab first.
Related API: isLoaded (To check the tab enabling status.)

Parameter
name	type	required	description
idx	Number	Y

addClass( className )

Adds a class to the component.

Parameter
name	type	required	description
className	String	Y	Name of the class to add

Sample

// Add oddClass to component input1. input1.addClass("oddClass");

addTab( id , tabOpt , contOpt )

Adds a tab, and sets the contents of the tab.

Parameter
name	type	required	description
id	String	Y	ID of the tab
tabOpt	JSON	Y	Tab creation options
contOpt	JSON	Y	content creation option

Sample

// Create "tab01" in the tabControl1 with the following options. // Tab label is "Temporary" and the tab has the Close button. The contents is to be loaded on the IFrame. // addTabIndex is to specify the tab location. If not specified, the tab will be added as the last tab. var tabOpt = { label : "Temporary", closable : true, addTabIndex : 0 }; var contOpt = { wframe : true src : "/xml/tmp.xml" title : "iframe title" }; tabControl1.addTab('tab01', tabOpt, contOpt);

bind( eventType , function )

Dynamically allocates events to the component.

Parameter
name	type	required	description
eventType	String	Y	Name of the event to allocate.
function	Function	Y	Handler function of the event to allocate.

Sample

// Define the event handler function for the onclick event in the input component, and bind the function. input1.bind("onclick", function(e){ alert(input1.getValue();})); // Bind commObj.ev_click function for the onclick event with component input1. var commObj = {}; commObj.ev_click = function(e){ alert("click :: "+this.id); }; input1.bind("onclick", commObj.ev_click );

changeClass( oldClassName , newClassName )

Renames the class from oldClassName to newClassName.
In the default setting, only the classes added by addClass will be applied. In order to directly remove the class defined in the "class" property of the component, add the following setting in config.xml file.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
oldClassName	String	Y	Name of the class to remove
newClassName	String	Y	Name of the class to add

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following to config.xml. <style> <removeDefaultClass value="true" /> </style> // Change tmpInputClass class to tmpInputWarninClass. input1.changeClass("tmpInputClass","tmpInputWarninClass");

deleteAllTabs( )

Deletes (or closes) all tabs within the TabControl.

Sample

tabControl1.deleteAllTabs();

deleteTab( idx )

Deletes (or closes) the tab of the corresponding index.

Parameter
name	type	required	description
idx	Number	Y	Index of the tab to delete (or close)

Sample

// Delete the first tab. tabControl1.deleteTab(0);

disableTab( tabIndex )

Disables the tab.

Parameter
name	type	required	description
tabIndex	Number	Y	Index of the tab to be disabled

Sample

// Disable the first tab. tabControl1.disableTab(0);

enableTab( tabIndex )

Enables the tab.

Parameter
name	type	required	description
tabIndex	Number	Y	Index of the tab to enable

Sample

// Enable the first tab. tabControl1.enableTab(0);

focus( )

Moves the focus to the component.

getDisabled( )

Gets the current value of the disabled property.

Return
type	description
Boolean	The value of the disabled property.

Sample

var returnValue = componentId.getDisabled(); (Return example) false

getFrame( idx )

Returns WFrame or IFrame of the corresponding tab index.
Use getWindow to access the object within the IFrame (such as components and functions).

Parameter
name	type	required	description
idx	Number	Y	Tab index

Return
type	description
Object	WFrame or IFrame object of the corresponding tab index

Sample

// Change the src of the first tab to "/tmp/tmp01.xml". var tmpContFrame = tabControl1.getFrame(0); tmpContFrame.setSrc("/tmp/tmp01.xml");

getGenerator( )

Called by a component under the Generator component. When called, gets the parent Generator object.

Return
type	description
Object	Parent Generator object

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());} // Click trigger1 to display the generator1 object on the console. // See https://inswave.com/jira/browse/WPF-1425.

getID( )

Gets the ID of the component.

Return
type	description
String	ID of the WebSquare5 component

Sample

// The WebSquare5 component dynamically received as a parameter can be used as shown in the following. function fn_validCheck(tmpObj){ // tmpObj has an ID of "input1". var compID = tmpObj.getID(); // (Return Example) "input1" }

getInitStyle( property )

Gets the initial style of the component.

Parameter
name	type	required	description
property	String	N	Name of the attribute (If not specified, all information will be ouputted.)

getLabelText( idx )

Returns the label of the tab.

Parameter
name	type	required	description
idx	Number	Y	Tab index

Return
type	description
String	Tab label

Sample

// Return the label of the firs tab. var returnValue = tabControl1.getLabelText(0);

getOpacity( )

Gets the opacity of the component defined in CSS.

Return
type	description
Integer	Opacity

Sample

// Apply opacity CSS to the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;opacity:0.2;"></xf:input> var returnValue = input1.getOpacity(); // "returnValue" is a real number between 0 and 1. // (Return Value) "0.2"

getPluginName( )

Gets the pluginName (or the name) of the component.

Return
type	description
String	pluginName of the WebSquare5 component

Sample

// For a WebSquare5 object dynamically received by a common function, conditional statements can be used as shown below. var commObj = {}; commObj.fn_makeReqData = function(tmpObj){ var tmpID = tmpObj.getID(); // Component ID var tmpCompType = tmpObj.getPluginName(); // Component Type if(tmpCompType == "input"){ //..Logic.. }else if(tmpCompType == "gridView"){ //..Logic .. }else{ //..Logic.. } };

getPosition( positionName )

Gets the left or top position of the component. If set by %, the corresponding pixel value will be returned.

Parameter
name	type	required	description
positionName	String	Y	[left,top] Type of the position

Return
type	description
Number	Position of the component

Sample

// Apply margin CSS to the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;margin:10px;"></xf:input> var returnValue = input1.getPosition("top"); // The returnValue will be a position in pixels. // (Return Example) 10

getReadOnly( )

Gets the current setting of the readOnly property.

Return
type	description
Boolean	The current setting of the readOnly property

Sample

var returnValue = componentId.getReadOnly(); // (Return Example) false

getScope( )

Returns the parent WFrame object when the component is a child of the WFrame which uses the scope feature (scope=true).
Returns null when the component is not a child of the WFrame using the scope feature (scope=true).

Return
type	description
Object	wframe object or null

Sample

// The main page contains wframe1, and wframe1 contains wframe11 which contains textbox1. textbox1.getScope(); // Returns wframe11 object.

getScopeWindow( )

Returns the scope object of the parent when the component is a child of the WFrame which uses the scope feature (scope=true).
Returns a global window object when the component is not a child of the WFrame using the scope feature (scope=true.

Return
type	description
Object	Scope object of the wframe object, or a global window object

Sample

// The main page contains wframe1, and wframe1 contains wframe11 which contains textbox1. var scope = textbox1.getScopeWindow(); scope.wframe11 === textbox1.getScope(); // true

getSelectedTabID( )

Return the ID of the currently selected tab.

Return
type	description
String	ID of the selected tab

Sample

var returnValue = tabControl1.getSelectedTabID();

getSelectedTabIndex( )

Returns the index of the currently selected tab.

Return
type	description
Number	Tab index

Sample

var returnValue = tabControl1.getSelectedTabIndex();

getSize( sizeName )

Gets the size of the component. If set by "%", the corresponding pixel value will be returned.

Parameter
name	type	required	description
sizeName	String	Y	[height, innerHeight, outerHeight, outerMarginHeight, width, innerWidth, outerWidth, outerMarginWidth] Type of the size. For the calculation of each size type, see below.

Return
type	description
Number	Size of the component

Sample

var returnValue = componentId.getSize("width"); // "returnValue" will be a size in pixels. If set by "%", the corresponding pixel value will be returned. // (Return Example) 100

getStyle( propertyName )

Gets the current value of the propertyName of the component defined in CSS.

Parameter
name	type	required	description
propertyName	String	Y	Name of the property in the style

Return
type	description
String	Style value

Sample

// Define an Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;"></xf:input> var returnValue = input1.getStyle("width"); // (Return Example) "144px"

getStyleValue( style )

[deprecated] Use getStyle instead.
Gets the current value of the propertyName of the component defined in CSS.

Parameter
name	type	required	description
style	String	Y	Name of the property defined in the style

Return
type	description
String	Value defined in the style property. (In case of a color, the hexcode of the color will be returned.)

getTabCount( getTabCount )

Returns the number of the current tabs.

Parameter
name	type	required	description
getTabCount	JSONObject	Y	Return options

Return
type	description
Number	Current tab count

Sample

var totTabCount = tabControl1.getTabCount();

getTabID( tabIndex )

Returns the ID of the tab of the corresponding index.

Parameter
name	type	required	description
tabIndex	Number	Y	Tab index

Return
type	description
String	ID of the tab

Sample

// Return the ID of the tab of which index is 0. var tmpRs = tabControl1.getTabID(0);

getTabIndex( tabID )

Returns the index of the tab of the corresponding ID.

Parameter
name	type	required	description
tabID	String	Y	ID of the tab

Return
type	description
Number	Tab index

Sample

// Return the index of the tab of which ID is "tab1". var tmpRs = tabControl1.getTabIndex("tab1");

getTabInfo( )

Returns information of each tab (id, label, defaultTabIndex, currentTabIndex, src, and alwaysDraw) as an array.

Return
type	description
Array	Array containing tab information of each

getTitle( )

Gets the title value.

Return
type	description
String	Title value

Sample

// Define the "title" for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" title="이름 입력"></xf:input> var tmpTitle = input1.getTitle(); // (Return Example ) "Input Name"

getUdcHome( )

Returns the path of the file which defines the UDC. Includes the file extension of .xml. For a path without .xml, use getUdcRoot. When called by a component, not a UDC object, undefined will be returned.

Return
type	description
String	When called by a component, not a UDC object, undefined will be returned.

Sample

The udc file is /a/b/udc.xml, the XML file is /a/c/main.xml, and the UDC object ID is udc1. udc1.getUdcHome(); // The execution result is /a/b/udc.xml.

getUdcRoot( )

Returns the path of the file which defines the UDC. udc1.getUdcHome(); // The execution result is /a/b/udc.xml. For a path including .xml, use getUdcHome. When called by a component, not a UDC object, undefined will be returned.

Return
type	description
String	When called by a component, not a UDC object, undefined will be returned.

Sample

The udc file is /a/b/udc.xml, the XML file is /a/c/main.xml, and the UDC object ID is udc1. udc1.getUdcHome(); // The execution result is /a/b/udc.xml.

getUserData( key )

Returns the user-defined property value set by setUserData as the user data or source (page XML).

Parameter
name	type	required	description
key	String	Y	Random data key

Return
type	description
String	Data of the corresponding key

Sample

// Apply the customized property (eduTest) to the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" eduTest="Hello"></xf:input> input1.getUserData("eduTest"); // (Return Example) "Hello" // Use setUserData. input1.setUserData("eduTest","WebSquare"); input1.getUserData("WebSquare"); // (Return Example) "Hello"

getWindow( tabIndex )

Returns the window content of the corresponding tab index.
Through the returned window content, the developer can access WebSquare5 components, functions, and parameters.
If the index is not specified, the window content of the currently selected tab will be returned.

Parameter
name	type	required	description
tabIndex	Number	N	Tab index

Return
type	description
windowObject	windowObject

Sample

// Return the currently selected tab. var tmpObj = tabControl1.getWindow(); // Set the value in input1 component on the selected tab. tmpObj.input1.setValue("WebSquare");

hasClass( className )

Checks whether the component has className received as a parameter or not.

Parameter
name	type	required	description
className	String	Y	className to check

Return
type	description
Boolean	Whether the component has the class or not

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> var returnValue = input1.hasClass("tmpInputClass"); // (Return Example) true

hide( )

Hides the component.
he CSS setting will be "display:none;" and "visibility:hidden;".

Sample

componentId.hide();

hideTab( tabIndex )

Hides the tab.

Parameter
name	type	required	description
tabIndex	Number	Y	Index of the tab to hide

Sample

// Hide the first tab. tabControl1.hideTab(0);

isLoaded( idx )

Returns the loading status of the specified tab.

Parameter
name	type	required	description
idx	Number	Y	Tab index

Return
type	description
Object	Loading status of the tab of the specified index

Sample

// Check if the second tab is loaded with alwaysDraw="false setting. if( tabControl1.isLoaded( 1 ) ) { input1.setValue( "WebSquare5" ); }

removeClass( className )

Removes className from the component.
In the default setting, only the classes added by addClass will be applied. In order to directly remove the class defined in the "class" property of the component, add the following setting in config.xml file.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
className	String	Y	Name of the class to remove

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following to config.xml. <style> <removeDefaultClass value="true" /> </style> // Remove tmpInputClass class. input1.removeClass("tmpInputClass");

setContentsHeight( height )

Sets the height of the contents area (in pixels).

Parameter
name	type	required	description
height	Number	Y	height (only numeric data)

Sample

// Set the height of the contents area of the tabControl as 500px. tabControl1.setContentsHeight(500);

setDisabled( disabled )

Sets the disabled property. True to disable, or false not to disable.

Parameter
name	type	required	description
disabled	Boolean	Y	True to disable, or false not to disable.

Sample

// Disable the component. componentId.setDisabled(true);

setEventPause( evList , flag )

Disables or enables the component event.

Parameter
name	type	required	description
evList	String	N	List of the events. If not specified, all user events of the component will be listed. (Enter null data.)
flag	Boolean	Y	true is to pause, or false is to cancel pausing.

Sample

input1.setEventPause("onclick", true); // Dynamically pauses the onclick event. input1.setEventPause("onfocus,onblur", false); // Restarts the onfocus and the onblur events. input1.setEventPause(null, true); // Pauses all user events registered for the Input component.

setHeight( height )

Sets the height of the TabControl in pixels. Other data than number will be ignored.

Parameter
name	type	required	description
height	Number	Y	Component height

Sample

// Set the height as 20px. tabControl1.setHeight(20);

setInitStyle( property )

Initializes the component style.

Parameter
name	type	required	description
property	String	N	Name of the property (If not specified, all properties will be returned.)

Sample

group1.getInitStyle();

setLabelText( idx , label )

Returns the label of the tab.

Parameter
name	type	required	description
idx	Number	Y	Tab index
label	Number	Y	Tab label

Sample

// Set the label of the first page as "Temporary". tabControl1.setLabelText(0, "Temporary");

setOpacity( value )

Sets the opacity of the component.

Parameter
name	type	required	description
value	Number	Y	Opacity value (A real number between 0 and 1)

Sample

componentId.setOpacity(0.45);

setPosition( left , top , mode )

Sets the position (left, top) of the component.

Parameter
name	type	required	description
left	Number	Y	Left position or null.
top	Number	Y	Top position or null.
mode	String	N	[defulat:absolute, delta] absolute sets the current positions as x and y, and delta adds x and y to the current positions.

Sample

// Set the top position of the component as 100 pixels. componentId.setPosition(null, 100);

setReadOnly( readOnly )

Controls the "readOnly" property. True to enable, or false to disable.

Parameter
name	type	required	description
readOnly	Boolean	Y	True to enable, or false to disable.

Sample

// Enable the read-only. componentId.setReadOnly(true);

setSelectedTabIndex( tabIndex )

Selects the tab of the corresponding index.

Parameter
name	type	required	description
tabIndex	Number	Y	Tab Index (Although ID is received, index will be used.)

Sample

// Select the second tab. tabControl1.setSelectedTabIndex(1);

setStyle( propertyName , value )

Sets the style of the specified property.

Parameter
name	type	required	description
propertyName	String	Y	Name of the style
value	String	Y	Value of the style

Sample

// Set the component width as 200px. componentId.setStyle("width", "200px"); // Change the background color to olive. componentId.setStyle("background-color","olive");

setTabHTML( tabID , tabHTML )

Dynamically changes the tabHTML value. Directly inserts the HTML string in the title.

Parameter
name	type	required	description
tabID	String	Y	Tab ID
tabHTML	String	Y	tabHTML or parameter name to set

Sample

tabControl1.setTabHTML(scwin.tabControl1_tabHTML); scwin.tabControl1_tabHTML = "<span>test</span>";

setTabOrder( tabOrderArr )

Receives the tab sequence information as an array, and rearranges the tab.

Parameter
name	type	required	description
tabOrderArr	Array	Y	Array containing tab sequence The array length must be same with the entier tab length.

Sample

// The existing tab order is as shown below. [ 'tabs1', 'tabs2', 'tabs3' ] // Give the tab sequence to setTabOrder. (However, the array length must be same with the entire tab length. The element must be tab ID.) tabControl1.setTabOrder(['tabs3', 'tabs1', 'tabs2']) // The tab sequence must be changed as shown below. [ 'tabs3', 'tabs1', 'tabs2' ]

setUserData( key , value )

Sets the user data in the component. If the key cannot be set for the component, corresponding logs will be displayed.

Parameter
name	type	required	description
key	String	Y	Random data key
value	String	Y	Random data key

Sample

// Setting a (key, value) pair of ("data", "WebSquare5") in the component. componentId.setUserData("data", "WebSquare"); // Some keys cannot be set for the component. componentId.setUserData("title", "WebSquare"); // (Log Example) !!!WARNING - [title] can't define as UserData

setWidth( width )

Sets the width of the TabControl in pixels. Other data than number will be ignored.

Parameter
name	type	required	description
width	Number	Y	Component width.

Sample

// Set the width as 200px. tabControl1.setWidth(200);

show( displayType )

Displays the component.
The related CSS properties are display and visibility:show;.

Parameter
name	type	required	description
displayType	String	N	[default:block ,inline ,none ,""] Value of the Display property.

Sample

// Block the "display" property. componentId.show(); // Enable the "display" property in the class. componentId.show("");

showTab( tabIndex )

Shows the hidden tab.

Parameter
name	type	required	description
tabIndex	Number	Y	Tab index

Sample

// Show the first tab. tabControl1.showTab(0);

toggleClass( className )

Removes a class named className, or if there is no such a class, adds a class named className.
In the default setting, only the classes added by addClass can be removed. To remove other classes, add the following setting in config.xml.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
className	String	Y	className to set

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following to config.xml. <style> <removeDefaultClass value="true" /> </style> // Remove tmpInputClass class. input1.toggleClass("tmpInputClass"); // Add tmpInputClass class again. input1.toggleClass("tmpInputClass");

trigger( type , array )

Triggers a certain event registered for the component.

Parameter
name	type	required	description
type	String	Y	Name of the event to trigger
array	Array	N	Array of parameters to send to the event handler

Sample

// Trigger the onclick event in the input1 component. input1.trigger("onclick"); // Trigger the onviewchange event in the input component and call the event handler function by sending arguments of (1, 2). input1.trigger("onviewchange", [1,2]);

unbind( type , function )

Removes an event registered for the component.

Parameter
name	type	required	description
type	String	N	Name of the event to remove. If not specified, all events of the components will be removed.
function	Function	N	Handler function of the event to remove. If not specified, all handler functions of the event will be removed.

Sample

// Remove all events registered in the input component. input1.unbind(); // Remove all handler functions of onviewchange event registered in the input component. input1.unbind("onviewchange"); // Remove the func1 event handler of onviewchange event registered for component input1. input1.unbind("onviewchange", func1);

visible( flag )

[deprecated] Shows/Hides the component, or sets the visible property using setStyle.
Sets the visibility of the component style. In case of true, set visible. In case of false, set hidden.

Parameter
name	type	required	description
flag	Boolean	Y	Visibility (In case of true, set visible. In case of false, set hidden.)