WebSquare.uiplugin.windowContainer

Supports Multiple Document Interface (MDI). Opens multiple windows within a page.
Used to contain main contents, and arranges windows vertically, horizontally, or sequentially.
The SPA is supported in TabControl.
At the highest level of the component is the HTML div tag.

Type

uiplugin

Property Summary

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).
closeType: [default:all, fixedWindow, noneFixedWindow] Set the window not to be closed upon the end user’s clicking the Close All button.
confirmFalseAction: [default:newWindow, selectWindow, existWindow] Action to be taken upon the end user's clicking Cancel to the confirmation message.
confirmMessage: Content of the confirmation message to display when the useConfirmMessage is true.
confirmTrueAction: [default:existWindow, selectWindow, newWindow] Action to be taken upon the end user's clicking Yes to the confirmation message.
controlIconPosition: [default:left] Position of the control icon of the WindowContainer
customMsg: Customized message to be displayed on the lower part of the window.
defaultHeight: [default:210px] Default height of the window (in pixels or %). The width in CSS setting.
defaultWidth: [default:300px] Default width of the window (in pixels or %). The width in CSS setting.
fixArrangeFullScreen: [default:false, true] Uses the full screen even when there are less windows than the arrangeNum. Valid when the useFixButton is true.
hideTitleOnMaximize: [default:false, true] Hides the window title upon maximizing the window. (In case the window is hidden, the user can maximize or restore the window size using the controlIcon.)
horizontalArrangeNum: [default:2] Number of the windows to horizontally arrange. Valid when the useFixButton is true.
id: ID of the component. Allocated as a global object. Scripts access the component through the ID.
lineBreakNum: [default:4] Breaks the line when there are more windows than the specified count upon vertical or horizontal arrangement.
minimumHeight: [default:150px] Minimum height of the window (in pixels or %).
minimumWidth: [default:150px] Minimum width of the window (in pixels or %).
nameLayerMove: [default: false, true] Moves the window tab through mouse drag-and-drop.
nameLayerMoveGap: [default: 110] When useNameContainer is true, specify the unit distance to move the nameLayer using the arrow keys. (Unit: px)
restoreWinSize: [default:false, true] Restores the defaultHeight and the defaultWidth used in initial window creation.
sequentialArrangeColNum: [default:2] Number of the columns when arranging windows in tiles. Valid when the useFixButton is true.
sequentialArrangeRowNum: [default:2] Number of the rows when arranging windows in tiles. Valid when the useFixButton is true.
spaAuto: [default:false, true] Generates only one empty IFrame in the SPA mode after execution of createWindow.
spaAutoDelay: [default:false, true] Set the durationto wait before creating the IFrame after execution of createWindow when the spaAuto is enabled.
spaInitCount: Number of the IFrames to create in advance for SPA mode for faster creation of windows.
spaReplaceHistory: Prevents the history feature (moving forward and backward) in the window area (IFrame) in the SPA mode.
statusMsg: Default status message to be displayed on the lower part of the window.
stopMinimizeOnNameLayer: Keeps the window size instead of minimizing it upon the end user’s clicking the name layer of the window.
stopToggleOnLast: Maintains the window size upon user's clicking the name layer of the window when there is a single window.
tabIndex: Same as the tabindex property in HTML standard. Indicates the focusing order of the component by the tab key.
toolbarPosition: [default:bottom] Toolbar position
toolbarWidth: Toolbar width defined by the user.
tooltipDisplay: [default:true, false] Displays the tooltip on the name layer.
tooltipGroupClass: [default:true, false] Includes w2group style in the tooltip when the tooltipDisplay is true.
useCloseButton: [default:false, true] Uses Close button on the name layer.
useConfirmMessage: [default:true, false] Uses a confirmation message for overlapping windows when dynamically creating a window with createWindow API. Note the following.
useControlIconTitle: [default:false, true] Inserts a title in the control icon (vertical, horizontal, cascade, and tile arrangements, and close button).
useCustomMsg: [default:false, false] Uses the customized message on the lower part of the window.
useFixButton: [default:false, true] Uses a Fix button on the name layer.
useNameContainer: [default:false] Covers the name layer in the toolbar with div tag.
userData1: User-defined property
userData2: User-defined property
userData3: User-defined property
useStatusMsg: [default:true, false] Uses a status message on the lower part of the window.
verticalArrangeNum: [default:2] Number of the windows to vertically arrange. Valid when the useFixButton is true.
windowAutoResize: [default:false, true] Rearranges and resizes the child windows upon execution of setSize().
windowMaximizeAll: Maximizes all windows at the same time.
windowMaxNum: [default:5] Maximum number of the windows when creating windows using the createWindow API.
windowTooltipDisplay: [default:true, false] Displays the tooltip on the window header.

Event Summary

onafternamelayermove: Triggered right after the window position is changed by mouse dragging-and-dropping.
onbeforecloseall: Triggered upon closing of all windows by the Close All button.
onbeforenamelayermove: Triggered right before the window position is changed by mouse dragging-and-dropping. If the event handler function returns false, the position change will be canceled.
onclosewindow: Triggered upon a single window closed by the Close button.
oncustomcontrolclick: Triggered upon the end user’s clicking the control icon created by the controlIconFormatter.
oncustomcontrolout: Triggered upon mouse moving out from the icon created by the controlIconFormatter.
oncustomcontrolover: Triggered upon the control created by the controlIconFormatter being moused over.
onmenuclick: Triggered upon the menu of the nameLayer being clicked while the nameLayerMenu is true.
onwindowchange: Triggered upon a window being opened/closed.
onwindowload: Triggered when the new window is completely loaded.
onwindowtabclick: Triggered when the tab of the child window in the WindowContainer is clicked.

Method Summary

addClass( className ): Adds a class to the component.
bind( eventType , function ): Dynamically allocates events to the component.
changeClass( oldClassName , newClassName ): Renames the class from oldClassName to newClassName.
closeOthers( windowId ): Closes all popups except the currently activated popup.
closeWindow( windowId ): Closes the currently selected window.
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.
createWindow( title , iconUrl , src , windowTitle , windowId , openAction , closeAction , windowTooltip ): Creates a window.
fixWindow( winInfoId ): Fixes the window of the specified ID.
focus( ): Moves the focus to the component.
getDisabled( ): Gets the current value of the disabled property.
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.
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).
getSelectedIndex( ): Gets the index of the selected window.
getSelectedWindowId( ): Returns the ID of the selected window.
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.
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.
getUniqueIdByTitle( title ): Returns the unique ID of the window with the specified title.
getUniqueIdByWindowId( windowId ): Returns the unique ID of the window with the specified windowID.
getUserData( key ): Returns the user-defined property value set by setUserData as the user data or source (page XML).
getWindow( title ): Returns the window object of the corresponding title.
getWindowByUniqueId( uuid , focus ): Returns the window object with the given uniqueID.
getWindowByWindowId( windowId , focus ): Returns the window object of corresponding windowId.
getWindowLabel( windowId , type ): Returns the label (text) depending on the type received.
hasClass( className ): Checks whether the component has className received as a parameter or not.
hide( ): Hides the component.
hideWindowList( windowMaxNum ): Sets the maximum number of the windows that can be opened in the WindowContainer.
isMultiView( ): Returns the current status of the multiView mode (to view two windows in parallel.)
removeClass( className ): Removes className from the component.
restoreWindowSize( windowId ): Restores the window of the specified windowId to the previous size (as set by defaultWidth and defaultHeight).
setAllWindowStatusMsg( msg ): Sets the status message of all windows.
setArrangeWindows( ): Provides the same function as the window sorting icons on the toolbar.
setDisabled( disabled ): Sets the disabled property.
setEventPause( evList , flag ): Disables or enables the component event.
setFocus( index ): Focuses the window of the corresponding index.
setInitStyle( property ): Initializes the component style.
setMenu( arrData , height ): Dynamically sets the menu list when using the nameLayerMenu property.
setMultiView( windowId , direction ): Runs the multiView mode (to view the two windows in parallel.)
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.
setSingleView( ): Cancels the multiView mode (to view the two windows in parallel.)
setSize( width , height ): Adjusts the component size.
setStyle( propertyName , value ): Sets the style of the specified property.
setUserData( key , value ): Sets the user data in the component.
setWindowCustomMsg( msg ): Sets the customized message for the current window.
setWindowLabel( windowId , type , value ): Sets the label according to the window type.
setWindowMaxNum( windowMaxNum ): Sets the maximum number of the windows that can be opened in the WindowContainer.
setWindowPosition( left , top ): Sets the position of the currently selected window (in pixels).
setWindowSize( width , height ): Sets the size of the currently selected window (in pixels).
setWindowStatusMsg( msg ): Sets the status message of the current window.
setZIndex( windowIndex ): Sets the Z index as much as the given parameter.
show( displayType ): Displays the component.
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

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).
WebSquare5 Engine applies different classes to different components. By defining a common class, the common class can be applied to multiple components.
closeType: [default:all, fixedWindow, noneFixedWindow] Set the window not to be closed upon the end user’s clicking the Close All button.
all: Closes all windows regardless of the fix pin. (Default)
noneFixedWindow: Does not close windows with the fix pin.
fixedWindow : Closes only the windows with the fix pin.
Related Property: useFixButton="true"
confirmFalseAction: [default:newWindow, selectWindow, existWindow] Action to be taken upon the end user's clicking Cancel to the confirmation message.
(newWindow: On a new window, selectWindow: On the existing window, existWindow: Load the source on the windowID window)
confirmMessage: Content of the confirmation message to display when the useConfirmMessage is true.
The Engine displays the confirmation message by checking the window title values.
confirmTrueAction: [default:existWindow, selectWindow, newWindow] Action to be taken upon the end user's clicking Yes to the confirmation message.
(newWindow: Load on a new window. / selectWindow: Select of the current tabs. / existWindow: Load the new src on the tab of the corresponding tabID and select the tab.)
controlIconPosition: [default:left] Position of the control icon of the WindowContainer Valid when the useNameContainer is true.
customMsg: Customized message to be displayed on the lower part of the window.
defaultHeight: [default:210px] Default height of the window (in pixels or %). The width in CSS setting.
When the window opens for the fist time, it is in maximum size. By clicking the resizing button on the upper-right corner, the user can change the window size to the default size.
defaultWidth: [default:300px] Default width of the window (in pixels or %). The width in CSS setting.
When the window opens for the fist time, it is in maximum size. By clicking the resizing button on the upper-right corner, the user can change the window size to the default size.
fixArrangeFullScreen: [default:false, true] Uses the full screen even when there are less windows than the arrangeNum. Valid when the useFixButton is true.
Related Properties: verticalArrangeNum, horizontalArrangeNum, sequentialArrangeRowNum, sequentialArrangeColNum
hideTitleOnMaximize: [default:false, true] Hides the window title upon maximizing the window. (In case the window is hidden, the user can maximize or restore the window size using the controlIcon.)
horizontalArrangeNum: [default:2] Number of the windows to horizontally arrange. Valid when the useFixButton is true.
id: ID of the component. Allocated as a global object. Scripts access the component through the ID.
lineBreakNum: [default:4] Breaks the line when there are more windows than the specified count upon vertical or horizontal arrangement.
When useFixButton is true, the arrangeNum (and the related properties) will be used.
Related Properties: verticalArrangeNum, horizontalArrangeNum, sequentialArrangeRowNum, sequentialArrangeColNum
minimumHeight: [default:150px] Minimum height of the window (in pixels or %).
minimumWidth: [default:150px] Minimum width of the window (in pixels or %).
nameLayerMove: [default: false, true] Moves the window tab through mouse drag-and-drop.
true: Moves the window tab.
false (Default): The window tab cannot be moved.
Similar Properties: moveTab of the TabControl
nameLayerMoveGap: [default: 110] When useNameContainer is true, specify the unit distance to move the nameLayer using the arrow keys. (Unit: px)
restoreWinSize: [default:false, true] Restores the defaultHeight and the defaultWidth used in initial window creation.
Related API: restoreWindowSize
sequentialArrangeColNum: [default:2] Number of the columns when arranging windows in tiles. Valid when the useFixButton is true.
sequentialArrangeRowNum: [default:2] Number of the rows when arranging windows in tiles. Valid when the useFixButton is true.
spaAuto: [default:false, true] Generates only one empty IFrame in the SPA mode after execution of createWindow.
Prior to the spaInitCount. If this property is true, the spaInitCount setting will be ignored.
In case maximum number of windows have been already created, no more empty IFrames will be created.
(Version: Added in 5.0_2.2777B.20170904.121217.)
spaAutoDelay: [default:false, true] Set the durationto wait before creating the IFrame after execution of createWindow when the spaAuto is enabled.
If createWindow is called more frequently, an empty IFrame will be crated after the last calling of createWindow.
The default is 3000ms. In other words, an empty IFrame will be generated 3 seconds later the createWindow is called.
(Version: Added in 5.0_2.2777B.20170904.121217.)
spaInitCount: Number of the IFrames to create in advance for SPA mode for faster creation of windows.
The SPA mode is to create IFrames and load the resources in advance. Using the SPA mode will improve loading performances of the windows created by the createWindow.
If the value is larger than 0, the SPA mode will be enabled. Otherwise, the value should be same as the windowMaxNum.
spaReplaceHistory: Prevents the history feature (moving forward and backward) in the window area (IFrame) in the SPA mode.
Prevents moving to the previous page in the IFrame in order to prevent display of a blank page. Clicking the previous button will display the previous page of the browser, not the IFrame.
true: Prevents moving to the next or previous pages.
false (Default): Allows moving to the next or previous pages.
statusMsg: Default status message to be displayed on the lower part of the window.
stopMinimizeOnNameLayer: Keeps the window size instead of minimizing it upon the end user’s clicking the name layer of the window.
stopToggleOnLast: Maintains the window size upon user's clicking the name layer of the window when there is a single window.
tabIndex: Same as the tabindex property in HTML standard. Indicates the focusing order of the component by the tab key.
toolbarPosition: [default:bottom] Toolbar position
toolbarWidth: Toolbar width defined by the user.
tooltipDisplay: [default:true, false] Displays the tooltip on the name layer.
tooltipGroupClass: [default:true, false] Includes w2group style in the tooltip when the tooltipDisplay is true.
useCloseButton: [default:false, true] Uses Close button on the name layer.
useConfirmMessage: [default:true, false] Uses a confirmation message for overlapping windows when dynamically creating a window with createWindow API. Note the following.
If openAction is not defined among the parameters of the createWindow API and the window IDs overlap, use the following properties to confirm the overlapping windows.
Related Properties: confirmMessage, confirmTrueAction, confirmFalseAction
useControlIconTitle: [default:false, true] Inserts a title in the control icon (vertical, horizontal, cascade, and tile arrangements, and close button).
Upon the user's hovering the mouse over the icon, the description will be displayed.
useCustomMsg: [default:false, false] Uses the customized message on the lower part of the window.
useFixButton: [default:false, true] Uses a Fix button on the name layer.
useNameContainer: [default:false] Covers the name layer in the toolbar with div tag.
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.
useStatusMsg: [default:true, false] Uses a status message on the lower part of the window.
verticalArrangeNum: [default:2] Number of the windows to vertically arrange. Valid when the useFixButton is true.
windowAutoResize: [default:false, true] Rearranges and resizes the child windows upon execution of setSize().
windowMaximizeAll: Maximizes all windows at the same time.
windowMaxNum: [default:5] Maximum number of the windows when creating windows using the createWindow API.
windowTooltipDisplay: [default:true, false] Displays the tooltip on the window header.

Event Detail

onafternamelayermove

Triggered right after the window position is changed by mouse dragging-and-dropping.
Related Property: nameLayerMove="true"

Parameter
name	type	description
info	Object	Returns an object containing startWindowID, startIndex, endWindowID, and endIndex.

onbeforecloseall

Triggered upon closing of all windows by the Close All button.

onbeforenamelayermove

Triggered right before the window position is changed by mouse dragging-and-dropping. If the event handler function returns false, the position change will be canceled.
Related Property: nameLayerMove="true"

Parameter
name	type	description
info	Object	Returns an object containing startWindowID, startIndex, endWindowID, and endIndex.

onclosewindow

Triggered upon a single window closed by the Close button.

Parameter
name	type	description
event	Object	Returns an event object triggered upon clicking of the Close button.

oncustomcontrolclick

Triggered upon the end user’s clicking the control icon created by the controlIconFormatter.

Parameter
name	type	description
controlId	String	ID of the control icon added

oncustomcontrolout

Triggered upon mouse moving out from the icon created by the controlIconFormatter.

Parameter
name	type	description
controlId	String	ID of the control icon added

oncustomcontrolover

Triggered upon the control created by the controlIconFormatter being moused over.

Parameter
name	type	description
controlId	String	ID of the control icon added

onmenuclick

Triggered upon the menu of the nameLayer being clicked while the nameLayerMenu is true.

Parameter
name	type	description
windowId	String	ID of the menu-selected window
value	String	Selected menu value (label)

onwindowchange

Triggered upon a window being opened/closed.

Parameter
name	type	description
info	Object	Returns an object containing oldWindowId and newWindowId.

onwindowload

Triggered when the new window is completely loaded.

Parameter
name	type	description
windowId	String	Window ID

Sample

Define lazy="false" first in the script before using the event. <script type="javascript" lazy="false"><![CDATA[ scwin.windowContainer1_onwindowload = function(windowId) { console.log("window [" + windowId + "] load complete"); }; ]]></script>

onwindowtabclick

Triggered when the tab of the child window in the WindowContainer is clicked.

Parameter
name	type	description
oldWindowId	String	: ID of the previous window

Method Detail

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

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

closeOthers( windowId )

Closes all popups except the currently activated popup.

Parameter
name	type	required	description
windowId	String	N	Window ID to be referenced If not specified, the currently active window will be used.

Sample

// Close all windows except the currently activated window. windowContainer1.closeOthers();

closeWindow( windowId )

Closes the currently selected window.
Same as clicking the Close button on the window.

Parameter
name	type	required	description
windowId	String	N	ID of the window to close If not specified, the currently active window will be closed.

Sample

// Close the current window. windowContainer1.closeWindow();

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.
(Version: Added in 5.0_2.2777B.20170904.121217.)

createWindow( title , iconUrl , src , windowTitle , windowId , openAction , closeAction , windowTooltip )

Creates a window.

Parameter
name	type	required	description
title	String	Y	Title to be displayed on the name layer
iconUrl	String	Y	URL of each window icon. Currently not in use.
src	String	Y	Address to be displayed on the window
windowTitle	String	N	Window title to be displayed on the window header. In case of null or "", the title value will be displayed.
windowId	String	N	Window ID. If null or "" is entered, the title will be used as the ID.
openAction	String	N	[existWindow, newWindow, selectWindow] xistWindow: If there is a window of the same ID, uses the existing window. / newWindow: Always creates a new window. / selectWindow: If there is a window of the same ID, selects the window.
closeAction	String	N	Function to be called upon window closing. (The return value must be Boolean. false is not to close, and true is to close.)
windowTooltip	String	N	Window tooltip. (If not specified, the windowTile will be set as the tooltip.)

Sample

// (Case 1) Create a window without specifying options. windowContainer1.createWindow( "edu001" , null , "/uiTestW5/searchBox.xml" ); // The window ID is edu001, and the header title and the name layer is "edu001". // (Case 2) Create an window using closeAction with specifying options. // Define a function to control closing of the windows in the script block. - Use closeAction when executing the createWindow API. function fn_closeMsg(){ return confirm("do you close this window?"); // Use a window with OK and Cancel buttons. //return false; // Cancels window closing. } windowContainer1.createWindow( "music" , "" , "/test/music.xml", "page001", "P0001", "existWindow", "fn_closeMsg"); // A window of which ID is P0001 will be created, and is name layer will be "music" and the header title "page001". // When the window is closed, fn_closeMsg Function will be called.

fixWindow( winInfoId )

Fixes the window of the specified ID.

Parameter
name	type	required	description
winInfoId	String	Y	Window ID

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

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

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

getSelectedIndex( )

Gets the index of the selected window.

Return
type	description
Number	Index of the selected window

Sample

// The first window among three windows is selected. var tmpRs = windowContainer1.getSelectedIndex(); // (Return Example) 0

getSelectedWindowId( )

Returns the ID of the selected window.
If the window ID is not specified for createWindow, the title will be used as the ID.

Sample

// Case 1. Create a window without specifying window ID. windowContainer1.createWindow( "page001" , null , "/uiTestW5/test0001.xml"); var tmpRs1 = windowContainer1.getSelectedWindowId(); // (Return) "page001" // Case 2. Set a window ID and create a window. windowContainer1.createWindow( "page001" , null , "/uiTestW5/test0001.xml", "page001" , "p001"); var tmpRs2 = windowContainer1.getSelectedWindowId(); // (Return) "p001"

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

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.

getUniqueIdByTitle( title )

Returns the unique ID of the window with the specified title.

Parameter
name	type	required	description
title	String	Y	window title

Return
type	description
Array	unique id

Sample

// Return the unique ID of the window of which title is 'sub1'. windowContainer1.getUniqueIdByTitle('sub1');

getUniqueIdByWindowId( windowId )

Returns the unique ID of the window with the specified windowID.

Parameter
name	type	required	description
windowId	String	Y	Window ID

Return
type	description
Array	unique id

Sample

// Return the unique ID of the window of which windowId is 'sub1'. windowContainer1.getUniqueIdByTitle('sub1');

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

Returns the window object of the corresponding title.
Used to access a linked function or component on the window.

Parameter
name	type	required	description
title	String	Y	Window title

Return
type	description
Object	Window object

Sample

// Access the input1 component in the window of which title is "edu001". // Get the window of which title is "eud001". var tmpObj = windowContainer1.getWindow("edu001"); // Get the value of the input1 component in the window. var tmpRs = tmpObj.input1.getValue();

getWindowByUniqueId( uuid , focus )

Returns the window object with the given uniqueID.

Parameter
name	type	required	description
uuid	String	Y	unique ID
focus	Boolean	N	Focusing on the window

Return
type	description
Object	Window object

Sample

// Get the value of input1 component by calling createWindow without specifying a window ID. (The title will be used as the ID.) // Create a window without specifying a window ID. windowContainer1.createWindow( "tmp001" , null , "/uiTestW5/test001.xml"); // Get the window of which title is "tmp001". var uniqueId = windowContainer1.getUniqueIdByTitle('tmp001'); var tmpObj = windowContainer1.getWindowByWindowId(uniqueId[0]);

getWindowByWindowId( windowId , focus )

Returns the window object of corresponding windowId.

Parameter
name	type	required	description
windowId	String	Y	Window ID
focus	Boolean	N	Focusing on the window

Return
type	description
Object	Window object

Sample

// Get the value of input1 component by calling createWindow without specifying a window ID. (The title will be used as the ID.) // Create a window without specifying a window ID. windowContainer1.createWindow( "tmp001" , null , "/uiTestW5/test001.xml"); // Get a window of which ID is "tmp001". (The title is used as the ID.) var tmpObj = windowContainer1.getWindowByWindowId("tmp001"); // Get the value of the input1 component in the window. var tmpRs = tmpObj.input1.getValue();

getWindowLabel( windowId , type )

Returns the label (text) depending on the type received.
types: toolbar (name layer on the toolbar), window (header title), tooltip (to be displayed upon mouse hovering over the name layer of the toolbar)

Parameter
name	type	required	description
windowId	String	Y	ID of the window to return
type	String	Y	[toolbar, window, tooltip] Type of the label

Sample

// Create a window as shown below. windowContainer1.createWindow( "edu001" , null , "/uiTestW5/searchBox.xml" , "test001" , "P001" ); // Get the name layer value var tmpRs1 = windowContainer1.getWindowLabel("P001", "toolbar"); // (Return) "edu001" // Get the header title. var tmpRs2 = windowContainer1.getWindowLabel("P001", "window"); // (Return) "test001"

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

hideWindowList( windowMaxNum )

Sets the maximum number of the windows that can be opened in the WindowContainer.

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

isMultiView( )

Returns the current status of the multiView mode (to view two windows in parallel.)

Return
type	description
Boolean	True in case of the multiView, or false.

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

restoreWindowSize( windowId )

Restores the window of the specified windowId to the previous size (as set by defaultWidth and defaultHeight).

Parameter
name	type	required	description
windowId	String	Y	ID of the window to restore the size

Sample

Set defaultWidth and defaultHeight as 210px and 300px each. Create a window, resize, and execute restoreWindowSize. Then, the size will be restored to defaultWidth and defaultHeight. windowContainer1.restoreWindowSize("win0");

setAllWindowStatusMsg( msg )

Sets the status message of all windows.

Parameter
name	type	required	description
msg	String	Y	Status message

Sample

// Change the status message of all windows. windowContainer1.setAllWindowStatusMsg('Have a good day!');

setArrangeWindows( )

Functions same as the window sorting icons on the toolbar. Types include vertical, horizontal, cascade, and sequential.

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.

setFocus( index )

Focuses the window of the corresponding index.

Parameter
name	type	required	description
index	Number	Y	Window index

Sample

windowContainer1.setFocus(0);

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

setMenu( arrData , height )

Dynamically sets the menu list when using the nameLayerMenu property.

Parameter
name	type	required	description
arrData	Array	Y	Array data to set the menu list
height	Number	N	Menu height

setMultiView( windowId , direction )

Runs the multiView mode (to view the two windows in parallel.)

Parameter
name	type	required	description
windowId	String	Y	ID of the new window to place next to the currently active window
direction	Number	N	Placing direction 0 or Default : horizontal, 1 : vertical

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

setSingleView( )

Cancels the multiView mode (to view the two windows in parallel.)

setSize( width , height )

Adjusts the component size.

Parameter
name	type	required	description
width	Number	Y	Width of the component
height	Number	Y	Height of the component

Sample

windowContainer1.setSize(300,300); Create a WindowContainer component of which width is 450px and height is 300px. The width must be minimum 450px and height minimum 150px.

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

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

setWindowCustomMsg( msg )

Sets the customized message for the current window. (Valid when useCustomMsg is "true".)

Parameter
name	type	required	description
msg	String	Y	Status message

Sample

// Define a customized message. windowContainer1.setWindowCustomMsg('Have a good day!');

setWindowLabel( windowId , type , value )

Sets the label according to the window type.
Window types : toolbar (name layer on the toolbar), window (header title), tooltip (tooltip displayed upon mouse hovering), all (all three options).

Parameter
name	type	required	description
windowId	String	Y	Window ID
type	String	Y	[toolbar, window, tooltip, all] Type of the label
value	String	Y	Value of the label

Sample

// Change the name layer, the header title, and the tooltipe of the window of which ID is window3 into TestWindow. windowContainer1.setWindowLabel("window3", "all", "TestWindow"); // Change the header title of the window of which id is window2 into "Test Page". windowContainer1.setWindowLabel("window2", "window", "Test Page");

setWindowMaxNum( windowMaxNum )

Sets the maximum number of the windows that can be opened in the WindowContainer.

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

setWindowPosition( left , top )

Sets the position of the currently selected window (in pixels).

Parameter
name	type	required	description
left	Number	Y
top	Number	Y

Sample

// Locate the window at 10px on X axis and 100px on Y axis. windowContainer1.setWindowPosition('10','100');

setWindowSize( width , height )

Sets the size of the currently selected window (in pixels).

Parameter
name	type	required	description
width	Number	Y	Width of the window
height	Number	Y	Height of the window

Sample

// Set the width and the height of the current window as 200px and 300px respectively. windowContainer1.setWindowSize('200','300');

setWindowStatusMsg( msg )

Sets the status message of the current window.

Parameter
name	type	required	description
msg	String	Y	Status message

Sample

// Set the status of the current window. windowContainer1.setWindowStatusMsg('Have a good day!');

setZIndex( windowIndex )

Sets the Z index as much as the given parameter.

Parameter
name	type	required	description
windowIndex	String	Y	Window Index of the corresponding component

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

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