WebSquare.uiplugin.tabControl

The TabControl provide a user interface which can display multiple pages in multiple tabs. Using TabControl, you can create multiple tabs and display different pages in each of these tabs. By clicking the tab, the user can view the corresponding contents.

Type

uiplugin

Property Summary

accessibility: Whether to comply the web accessibility requirements or not.
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: Renders the component of all tabs contained in the TabControl.
alwaysShowCloseBtn: closable="true" is to show the tab closing button all the time (In the previous version, the tab closing button is displayed upon mouse-over.) [default: false, true]
changeActiveTab: Clicking the tab scroll button (tabScroll="true") will move to the next tab and activate the tab.
class: Same as the class property in HTML. The class defined in the CSS file or style block can be applied. Multiple classes can be defined with being divided by blank space.
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.
frameModal: Opens a modal popup within the tabControl content. [default: false,true]
id: Component ID
keepDisabledTab: Keeps the specified tab in the disabled status.
noUseTitle: Whether to display titles for the buttons on the tab scroll.
preventTabClickEvent: [default: false, true] Prevents the onTabClick event.
processMsgFrame: Opens the processMsg within the WFrame during asynchronous session. [default: false, true]
selectedIndex: Index of the selected tab
spaAuto: [default:false, true] Allows only one empty IFrame available while the SPA mode is in use.
spaAutoDelay: [default:false, true] Creates an IFrame after a few ms upon execution of the addTab while the spaAuto is in use.
spaInitCount: Number of the iframes to be created in advance for the SPA mode for faster addition of tabs.
tabHostRole: [default: true, false] To be controlled by role="tab" property setting of the tab.
tableRender: [default : "",ul] Define the HTML tag to render the selection list. When the tableRender is "ul",
tabLiRole: tab > role option for li tag accessibility.
tabMove: [default: false, true] Allows changes of the tab sequence through user’s dragging-and-dropping.
tabPosition: Sets the position of the tab.
tabRole: To be controlled by role="tab" property setting of the tab. [default: true, false]
tabScroll: [default: false, true] ses the tab scrolling feature (or button). For the lower compatibility, the default is false.
tabScrollAuto: Fills in the space of the last tab closed with previous tabs. [default: false, true]
useAccessibilityMenu: [default : false, true] Setting tabScroll="true" and tableRender="ul" will render left/right/all tabs as buttons.
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.
useLocale: Multilanguage support Uses multi-language keys of the client to display labels of the tab names in multiple languages.
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.
useTabTitleSelected: Displays "Selected" on the tab title upon the tab being selected. This is because the senseReader does not recognize aria-selected.
useTitleTooltip: Whether to display titles for the buttons on the tab scroll as a tooltip.
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.
onscrollleftbtnclick: Triggered upon the left arrow being clicked.
onscrollrightbtnclick: Triggered upon the right arrow being clicked.
onsubmenubtnclick: Triggered upon the sub-menu button being clicked.
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 CSS class to the component.
addTab( id , tabOpt , contOpt ): Adds a tab, and sets the contents of the tab.
bind( eventType , function ): Dynamically allocate an event and the handler function to the component.
changeClass( oldClassName , newClassName ): Changes the class currently applied to the corresponding WebSquare component. (Supported in all WebSquare components.)
createFrame( ): Dynamically generates an empty IFrame.
deleteAllTabs( ): Deletes (or closes) all tabs within the TabControl.
deleteTab( idx ): Removes the tab of the specified tab index or ID.
disableTab( tabIndex ): Disables the tab.
enableTab( tabIndex ): Enables the tab.
focus( ): Focuses the WebSquare component.
getDisabled( ): Returns the current value of the disabled property.
getFrame( idx ): Returns the IFrame or WFrame of the specified tab index (or id).
getGenerator( ): In case generated by the Generator component, returns the parent Generator object that created the component itself.
getID( ): Returns the ID of the WebSquare component.
getInitStyle( CSS ): Returns the initial style of the WebSquare component.
getLabelText( idx ): Returns the label of the label of the tab.
getOpacity( ): Returns the opacity of the WebSquare component. (Supported in all WebSquare components.)
getOriginalID( ): Returns the originalID of the WebSquare component. (Supported in all WebSquare components.)
getPluginName( ): Returns the name of the WebSquare component.
getPosition( positionName ): Returns the position (left and top) of the WebSquare component. (Supported in all WebSquare components.)
getReadOnly( ): Returns the current value of the readOnly property.
getScope( ): For the child component of a scope="true" WFrame, returns the parent WFrame object. (Supported in all WebSquare components.)
getScopeWindow( ): For the child component of a scope="true" WFrame, returns the parent WFrame object. (Supported in all WebSquare components.)
getSelectedTabID( ): Returns the ID of the currently selected tab.
getSelectedTabIndex( ): Returns the index of the currently selected tab.
getSize( sizeName ): Sets the size (width and height) of the WebSquare component. (Supported in all WebSquare components.)
getStyle( propertyName ): Returns the CSS setting of the WebSquare component.
getStyleValue( style ): [deprecated]
getTabCount( options ): 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( ): Returns the title of the WebSquare component.
getUdcHome( ): Returns the path of the UDC file including the file name in which the UDC object is defined. (Supported in all WebSquare components.)
getUdcRoot( ): Returns the path of the UDC file in which the UDC object is defined. (Supported in all WebSquare components.)
getUserData( key ): Returns the value set by setUserData or directly defined by the user in the XML file.
getWindow( idx ): Returns the window object of the specified tab index or id.
hasClass( className ): Checks whether the WebSquare component has a certain class.
hide( ): Hides the WebSquare component. (Supported in all WebSquare components.)
hideTab( tabIndex ): Hides the tab.
isLoaded( idx ): Returns the loading status of the specified tab.
removeClass( className ): Removes a class from the WebSquare component. (Supported in all WebSquare components.)
setContentsHeight( height ): Sets the height of the contents area (in pixels).
setDisabled( disabled ): Sets the disabled property of the WebSquare component.
setEventPause( evList , flag ): Pauses the event.
setHeight( height ): Sets the height of the TabControl in pixels.
setInitStyle( property ): Restores the initial style of the WebSquare component.
setLabelText( idx , label ): Returns the label of the tab.
setOpacity( value ): Sets the opacity in the WebSquare component. (Supported in all WebSquare components.)
setPosition( left , top , mode ): Sets the position (left, top) of the WebSquare component.
setReadOnly( readOnly ): Sets the readOnly proprety of the WebSquare component.
setSelectedTabIndex( tabIndex ): Selects the tab of the corresponding index.
setStyle( propertyName , value ): Sets the CSS of the WebSquare component.
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 random data in the WebSquare component. (Supported in all WebSquare components.)
setWidth( width ): Sets the width of the TabControl in pixels.
setWindowMaxNum( windowMaxNum ): Sets the maximum number of windows to be opened in the TabControl.
show( displayType ): Shows the WebSquare component on the page. (Supported in all WebSquare components.)
showTab( tabIndex ): Shows the hidden tab.
toggleClass( className ): Adds or removes a CSS class to or from a WebSquare component. (Supported in all WebSquare components.)
trigger( type , array ): Triggers the specified event in the WebSquare component.
unbind( type , function ): Removes the specified event from the WebSquare component.
visible( flag ): [deprecated]

Property Detail

accessibility: Whether to comply the web accessibility requirements or not.
1. Change of the Tab Focus Moving Sequence : The focus moves in order of previous component, tab list, content, the inner part of the content, the tab list button, and the next component. (Pressing the Shift Tab will move the focus in the opposite direction.)
2. The focus moves round in the tab list as described below.
While the focus is on the tab list, move between tabs by pressing Right or Left arrow key.
Upon the focus being move to the tab, the contents will be immediately updated.
The focus moves round in the tab list. Pressing Left key on the first tab will move the focus to the last tab. In the same way, pressing Right key on the last tab will move focus to the first tab.
3. Change the UI when the tabScroll is set as "true". The related UIs are renderd as buttons, and the tab list is rendered using ul and li tags.
4. Following attributes are forcibly applied.
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: Renders the component of all tabs contained in the TabControl.
true: Renders all components upon initial loading. (The rendering load may increase when there are many tabs and components.)
false (Default): Renders only the components of the first tab upon initial loading. Renders other components upon the tab selection by a user event or a script event. (Note that the components of the tabs except the first component are not generated as objects upon initial rendering.)
alwaysShowCloseBtn: closable="true" is to show the tab closing button all the time (In the previous version, the tab closing button is displayed upon mouse-over.) [default: false, true]
changeActiveTab: Clicking the tab scroll button (tabScroll="true") will move to the next tab and activate the tab. [default: false, true]
class: Same as the class property in HTML. The class defined in the CSS file or style block can be applied. Multiple classes can be defined with being divided by blank space.
WebSquare5 Engine applies different classes to different components. By defining a common class, the common class can be applied to multiple components.
The developer must use a proper CSS selector due to the layout complexity of the component.
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.
frameModal: Opens a modal popup within the tabControl content. [default: false,true]
Valid only when the frameMode of the content is "wframe" or "wframePreload".
However, when the popup has frameModal="top", the popup will be displayed on the top.
id: Component ID
The component ID is allocated as a global object. The script can access each object through the component ID.
keepDisabledTab: Keeps the specified tab in the disabled status.
noUseTitle: Whether to display titles for the buttons on the tab scroll.
preventTabClickEvent: [default: false, true] Prevents the onTabClick event. Valid only when the tab is disabled.
processMsgFrame: Opens the processMsg within the WFrame during asynchronous session. [default: false, true]
Valid only when the frameMode of the content is "wframe" or "wframePreload".
selectedIndex: Index of the selected tab
spaAuto: [default:false, true] Allows only one empty IFrame available while the SPA mode is in use.
Prior to the spaInitCount. If this property is true, the spaInitCount setting will be ignored.
Does not create empty IFrames any more once the maximum number of tabs are created.
spaAutoDelay: [default:false, true] Creates an IFrame after a few ms upon execution of the addTab while the spaAuto is in use.
If the addTab function is more frequently called, one empty IFrame will be created after the last call.
The default is 3000ms. In other words, an empty IFrame is generate 3 seconds after the addTab is called.
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.
tabHostRole: [default: true, false] To be controlled by role="tab" property setting of the tab.
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.
tabLiRole: tab > role option for li tag accessibility.
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 located on top in default. However, not setting the position for lower compatibility and setting “top” are not completely the same. There are slight CSS differences. [top, left, right, bottom]
tabRole: To be controlled by role="tab" property setting of the tab. [default: true, false]
tabScroll: [default: false, true] ses the tab scrolling feature (or button). For the lower compatibility, the default is false.
tabScrollAuto: Fills in the space of the last tab closed with previous tabs. [default: false, true]
Valid only when tabScroll is “true”.
(Example) When there are 10 tabs open while 5 tabs are displayed, closing the last tab will make the previous five tabs to fill in the previously closed last tab.
useAccessibilityMenu: [default : false, true] Setting tabScroll="true" and tableRender="ul" will render left/right/all tabs as buttons.
Tab items displayed upon the end user’s clicking the tab scroll button are generated as ul and li tags.
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
useLocale: Multilanguage support Uses multi-language keys of the client to display labels of the tab names in multiple languages.
(For more information, see the user guide.)
userData1: User-defined property. Use getUserData("userData3") 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.
useTabTitleSelected: Displays "Selected" on the tab title upon the tab being selected. This is because the senseReader does not recognize aria-selected.
useTitleTooltip: Whether to display titles for the buttons on the tab scroll as a tooltip.
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>

onscrollleftbtnclick

Triggered upon the left arrow being clicked.

onscrollrightbtnclick

Triggered upon the right arrow being clicked.

onsubmenubtnclick

Triggered upon the sub-menu button being clicked.

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 CSS class to the component. (Supported in all WebSquare components.)

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

Sample

// (Example) // Add oddClass to input1 component. 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

// Define the actual data to pass. // Pass data to tab to be newly added (through the dataObject.) var rowJSON = { "Personal Info" : { "Name": "Lee", "Age": 50, "Married" : false}, "Region": "Seoul", "Carrier": true . }; // Add a tab. tabControl1.addTab("cmcm011", { "label": "New", "title": "dataObject", "openAction": "exist", "closable": "true" }, { "src": "popup_sub.xml", "frameMode" : "wframePreload", "scope" : true, "alwaysDraw": "true", "dataObject":{ "type" : "json", "name" : "tabParam", "data" : rowJSON } } ); // The added tab accesses the passed data. // var paramData = $p.getParameter("paramTest"); // var data = JSON.stringify(paramData); // alert(data);

bind( eventType , function )

Dynamically allocate an event and the handler function to the component. (Supported in all WebSquare components.)

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

Sample

// (Example 1) // Define a function for the onclick event of input1. input1.bind("onclick", function(e){ alert(input1.getValue();})); // (Example 2) // Define commObj.ev_click function in advance. var commObj = {}; commObj.ev_click = function(e){ alert("click :: "+this.id); }; // Dynamically allocate onclick event and the handler function to input1 component. input1.bind("onclick", commObj.ev_click );

changeClass( oldClassName , newClassName )

Changes the class currently applied to the corresponding WebSquare component. (Supported in all WebSquare components.)
Only the classes added by addClass can be changed.
In order to remove classes directly defined in the class propert of the WebSquare component, add the following in config.xml. // Add the following in config.xml.

Parameter
name	type	required	description
oldClassName	String	Y	Class to change
newClassName	String	Y	Class to newly use

Sample

// The class is directly defined in the inputBox component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following in config.xml. <style> <removeDefaultClass value="true" /> </style> // Change the class. // Change tmpInputClass class to tmpInputWarninClass. input1.changeClass("tmpInputClass","tmpInputWarninClass");

createFrame( )

Dynamically creates an empty IFrame. However, if the total number of IFrames is same as the windowMaxNum, calling this function will not generate an empty IFrame.

deleteAllTabs( )

Deletes (or closes) all tabs within the TabControl.

Sample

tabControl1.deleteAllTabs();

deleteTab( idx )

Removes the tab of the specified tab index or ID.

Parameter
name	type	required	description
idx	Number	Y	삭제하려는 탭의 index 또는 탭의 id

Sample

// Delete the first tab. tabControl1.deleteTab(0); // Remove the tab of which ID is "tab1". tabControl1.deleteTab("tab1");

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

Focuses the WebSquare component. (Supported in all WebSquare components.)

getDisabled( )

Returns the current value of the disabled property. (Supported in all WebSquare components.)

Return
type	description
Boolean	Value of the disabled property

Sample

// (Example) Check the current value of the disabled property. var returnValue = componentId.getDisabled(); // (Return Example) false

getFrame( idx )

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

Parameter
name	type	required	description
idx	Number\|\|String	Y	tab index or tab id

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

In case generated by the Generator component, returns the parent Generator object that created the component itself. (Supported in all WebSquare components.)

Return
type	description
Object	Parent Generator object

Sample

// (Example) The Generator (parent) create a Trigger (child). <w2:generator id="generator1"> <w2:trigger id="trigger1" ev:onclick="scwin.trigger1_onclick"></w2:trigger></w2:generator> // In the example below, upon the end user’s clicking the Trigger 1, the generator1 object will be displayed on the console. scwin.trigger1.onclick = function(){ console.log(this.getGenerator());}

getID( )

Returns the ID of the WebSquare component. (Supported in all WebSquare components.)

Return
type	description
String	WebSquare component ID

Sample

// Upon dynamically receiving a WebSquare component, the ID can be checked as shown below. function fn_validCheck(tmpObj){ var compID = tmpObj.getID(); } // If the tmpObj in the above example has "input1" ID. // (Return) "input1"

getInitStyle( CSS )

Returns the initial style of the WebSquare component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
CSS	String	N	Property (If not specified, all properties will be displayed.)

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

Returns the opacity of the WebSquare component. (Supported in all WebSquare components.)
The Engine returns the opacity value of the CSS.

Return
type	description
Integer	Opacity

Sample

// Apply the opacity CSS to the InputBox component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;opacity:0.2;"></xf:input> // Return the opacity of the InputBox. var returnValue = input1.getOpacity(); // A real number between 0 and 1 will be returned. // (Return) "0.2"

getOriginalID( )

Returns the originalID of the WebSquare component. (Supported in all WebSquare components.)
The originalID is valid when the scope function is in use.
For scope="true" WFrame, component IDs inside the WFrame is changed with the prefix(wframeID + "_") being added before the ID given by the user (originalID).
The originalID means the ID before the prefix being added.

Return
type	description
String	originalID of the component

Sample

// An example of multi-WFrame page // Main page with a WFrame (main.xml) <w2:wframe id="wframe1" src="text.xml" scope="true"/> // Source page to be contained in the WFrame (text.xml) <w2:textbox id="textbox1"/> // (Example) Check the Id and the original ID in the script of text.xml // Run getID. textbox1.getID(); // "wframe1_textbox1" is returned. // Run getOriginalID. textbox1.getOriginalID(); // "textbox1" is returned.

getPluginName( )

Returns the name of the WebSquare component. (Supported in all WebSquare components.)

Return
type	description
String	Name of the WebSquare component (pluginName)

Sample

// When a common function dynamically receives a WebSQuare object as shown below, different actions can be made for each component type. var commObj = {}; commObj.fn_makeReqData = function(tmpObj){ var tmpID = tmpObj.getID(); // Component ID var tmpCompType = tmpObj.getPluginName(); // Component name if(tmpCompType == "input"){ //..Logic.. }else if(tmpCompType == "gridView"){ //..Logic .. }else{ //..Logic.. } };

getPosition( positionName )

Returns the position (left and top) of the WebSquare component. (Supported in all WebSquare components.)
When the position is set in 0%, the value will be converted into %.

Parameter
name	type	required	description
positionName	String	Y	[left, top] Position type

Return
type	description
Number	Position of the component

Sample

// CSS margin is applied to the Input component as shown below. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;margin:10px;"></xf:input> // (Example) Check the top value of the InputBox. var returnValue = input1.getPosition("top"); // Position value in pixels will be returned. // (Return) 10

getReadOnly( )

Returns the current value of the readOnly property. (Supported in all WebSquare components.)

Return
type	description
Boolean	The current setting of the readOnly property

Sample

// Example to check the readOnly setting of the component. var returnValue = componentId.getReadOnly(); // (Return Example) false

getScope( )

For the child component of a scope="true" WFrame, returns the parent WFrame object. (Supported in all WebSquare components.)
For scope="true" WFrame, null will be returned.

Return
type	description
Object	WFrame object or null

Sample

// (Example) // The main page has wframe1 which contains wframe1 which also contains wframe11. // The source page of wframe11 has textbox1. textbox1.getScope(); // (Return Example) wframe11 object

getScopeWindow( )

For the child component of a scope="true" WFrame, returns the parent WFrame object. (Supported in all WebSquare components.)
If not a child of a scope="true" WFrame, a global window object will be returned.

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

Sample

// (Example) // The main page has wframe1 which contains wframe1 which also contains wframe11. // The source page of wframe11 has 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 )

Sets the size (width and height) of the WebSquare component. (Supported in all WebSquare components.)
If set in %, values will be converted into pixels.

Parameter
name	type	required	description
sizeName	String	Y	Size types. For calculation of each size type, see the below:

Return
type	description
Number	Size of the component

Sample

var returnValue = componentId.getSize("width"); // (Return Example) 100 // Values are in pixels. // If set in %, values will be converted into pixels.

getStyle( propertyName )

Returns the CSS setting of the WebSquare component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
propertyName	String	Y	CSS property to return

Return
type	description
String	CSS value

Sample

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

getStyleValue( style )

[deprecated]
Use getStyle instead.
Returns the current CSS applied to the WebSquare component.

Parameter
name	type	required	description
style	String	Y	CSS property to return

Return
type	description
String	CSS value (Colors are returned in HexCode.)

getTabCount( options )

Returns the number of the current tabs.

Parameter
name	type	required	description
options	JSONObject	Y	Return options of getTabCount

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

Returns the title of the WebSquare component. (Supported in all WebSquare components.)

Return
type	description
String	Title

Sample

// In the following example, the Title is “Input Name”. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" title="이름 입력"></xf:input> var tmpTitle = input1.getTitle(); // (Return Example) “Enter your name.”

getUdcHome( )

Returns the path of the UDC file including the file name in which the UDC object is defined. (Supported in all WebSquare components.)
The file name includes .xml. In order to get the file path without .xml, use getUdcRoot.
When called by a WebSquare component, not a UDC object, “undefined” will be returned.

Return
type	description
String	UDC file path (For others than the UDC, undefined will be returned.)

Sample

// Example // UDC file path is /a/b/udc.xml. // Page XML is /a/c/main.xml. // UDC ID is udc1. udc1.getUdcHome(); // (Result) /a/b/udc.xml

getUdcRoot( )

Returns the path of the UDC file in which the UDC object is defined. (Supported in all WebSquare components.)
Not contains the file name. In order to get a path including the file name, use getUdcHome.
When called by a WebSquare component, not a UDC object, “undefined” will be returned.

Return
type	description
String	UDC file path (For others than the UDC, undefined will be returned.)

Sample

// Example // UDC file path is /a/b/udc.xml. // Page XML is /a/c/main.xml. // UDC ID is udc1. udc1.getUdcHome(); // (Execution Result) /a/b/

getUserData( key )

Returns the value set by setUserData or directly defined by the user in the XML file. (Supported in all WebSquare components.)

Parameter
name	type	required	description
key	String	Y	Data key

Return
type	description
String	Value for the given key

Sample

// (Example) Setting the user property (setTest) in the InputBox <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" setTest="Hello"></xf:input> // Returns the value of the setTest property. input1.getUserData("setTest"); // (Return) "Hello" // Set 'valueTest' (key) and 'WebSquare' (data) through setUserData. input1.setUserData("valueTest","WebSquare"); // Returns the value of the setTest property. input1.getUserData("WebSquare"); // (Return) "WebSquare"

getWindow( idx )

Returns the window object of the specified tab index or id.
Through the returned window content, the developer can access WebSquare5 components, functions, and parameters.
Returns the window content of the currently selected in case the idx is not given.

Parameter
name	type	required	description
idx	Number\|\|String	N	tab index or tab id

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 WebSquare component has a certain class. (Supported in all WebSQuare components.)

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

Return
type	description
Boolean	Whether the class exists or not

Sample

hide( )

Hides the WebSquare component. (Supported in all WebSquare components.)
display:none; or visibility:hidden; CSS is applied.

Sample

// (Example) Hide the component. 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 a class from the WebSquare component. (Supported in all WebSquare components.)
Only the classes added by addClass can be removed.
In order to remove classes directly defined as a property of the component, add the following in config.xml. // Add the following in config.xml. <style><removeDefaultClass value="true" /></style>

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

Sample

// If the class is directly defined as an InputBox property. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // In the config.xml file, add the following. <style> <removeDefaultClass value="true" /> </style> // Classes can be removed by removeClass. 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 of the WebSquare component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
disabled	Boolean	Y	Disabled status

Sample

// Sets the disabled property in the component. componentId.setDisabled(true);

setEventPause( evList , flag )

Pauses the event. (Supported in all WebSquare components.)

Parameter
name	type	required	description
evList	String	N	List of the events to pause. (in case of null, all events of the corresponding WebSquare component is paused or restarted.)
flag	Boolean	Y	Whether to pause the event or not.

Sample

// (Example 1) // Pause the onclick event. input1.setEventPause("onclick", true); // (Example 2) // Restart the onfocus and the onblur events. input1.setEventPause("onfocus,onblur", false); // (Example 3) // Pause all events registered in input1. input1.setEventPause(null, true);

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 )

Restores the initial style of the WebSquare component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
property	String	N	CSS property (If not spcified, all properties will be restored.)

Sample

// (Example) group1.setInitStyle();

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 in the WebSquare component. (Supported in all WebSquare components.)
The engine sets the opacity property (of CSS).

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

Sample

// (Example) Set the opacity as 0.45. componentId.setOpacity(0.45);

setPosition( left , top , mode )

Sets the position (left, top) of the WebSquare component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
left	Number	Y	Left position value or null
top	Number	Y	Top position value or null
mode	String	N	Position setting method. [default: absolute, delta]

Sample

// (Example) Set the top position as 100px. componentId.setPosition(null, 100);

setReadOnly( readOnly )

Sets the readOnly proprety of the WebSquare component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
readOnly	Boolean	Y	Setting of the readOnly property. (“true”: Used. “false”: Not used.)

Sample

// Set the readOnly property as true. 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 CSS of the WebSquare component. (Supported in all WebSquare components.)

Parameter
name	type	required	description
propertyName	String	Y	CSS property to set.
value	String	Y	Value to set as the specified CSS property

Sample

// (Example 1) Set the width as 200px. componentId.setStyle("width", "200px"); // (Example 2) Set the background as 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 random data in the WebSquare component. (Supported in all WebSquare components.)
Enter key values supported by the component. In case a key value not supported by the component is entered, corresponding logs will be displayed.

Parameter
name	type	required	description
key	String	Y	Data key to set
value	String	Y	Defined data value

Sample

// Set 'data' key and 'WebSquare' value in the component. componentId.setUserData("data", "WebSquare"); // The key must be supported in the component. componentId.setUserData("title", "WebSquare"); // Following logs will be displayed. // !!!WARNING - [title] can't be defined 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);

setWindowMaxNum( windowMaxNum )

Sets the maximum number of windows to be opened in the TabControl.

Parameter
name	type	required	description
windowMaxNum	Number	Y	Maximum number of the windows

show( displayType )

Shows the WebSquare component on the page. (Supported in all WebSquare components.)
Sets the display property as specified and applies "visibility: show;" CSS.

Parameter
name	type	required	description
displayType	String	N	CSS display setting to apply.

Sample

// (Example) display: block; componentId.show(); // (Example) Restore the previous display setting. 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 )

Adds or removes a CSS class to or from a WebSquare component. (Supported in all WebSquare components.)
Removes the class from the WebSquare component.
If the WebSquare component does not have the specified class, adds the class.
Only the classes added by addClass can be removed.
In order to remove classes directly defined as a property of the component, add the following in config.xml. // Add the following in config.xml. <style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
className	String	Y	Class to add or remove

Sample

// The class is directly defined in the inputBox component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following in config.xml. <style> <removeDefaultClass value="true" /> </style> // Remove tmpInputClass class. input1.toggleClass("tmpInputClass"); // Add the (previously removed) tmpInputClass. input1.toggleClass("tmpInputClass");

trigger( type , array )

Triggers a certain event in the component. (Supported in all WebSquare components.)

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

Sample

// (Example 1) // Trigger the onclick event in input1 component. input1.trigger("onclick"); // (Example 2) // Trigger the onviewchange event in input1, and send (1, 2) parameter to the handler function. input1.trigger("onviewchange", [1,2]);

unbind( type , function )

Removes the event from the component. (Supported in all WebSquare component.)

Parameter
name	type	required	description
type	String	N	Event to remove. (If not specified, all events of the component 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

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

visible( flag )

[deprecated]
Use show/hide or setStyle instead.
The Engine sets the CSS visibility property.

Parameter
name	type	required	description
flag	Boolean	Y	CSS visibility setting