14.Container

14.1FloatingLayer

14.2Generator

14.3Group

14.4ScrollView

14.5SlideHide

14.6Switch

14.7TabControl

14.7.1Tab Frame Type (frameMode)

// The following is an example. 
// Using the same frameMode is recommended in the TabControl.

<w2:tabControl id="tabControl1">
    <w2:tabs label="tab_iframe" id="tabs1"></w2:tabs>
    <w2:tabs label="tab_wframe" id="tabs2"></w2:tabs>
    <w2:tabs label="tab_wframePreload" id="tabs3"></w2:tabs>
        <w2:content id="content1" alwaysDraw="false" src="sub.xml" 
            frameMode="iframe"></w2:content>
        <w2:content id="content2" alwaysDraw="false" src="sub2.xml" 
            frameMode="wframe" scope="true"></w2:content>
        <w2:content id="content3" alwaysDraw="false" src="sub3.xml" 
            frameMode="wframePreload" scope="true"></w2:content>
</w2:tabControl>

14.7.2Event Loading Sequence

14.7.3Adding Tabs (addTab)

WFrame tabs can be created. Note, however, that the scope setting must be added.

Define a JSON-type dataObject containing parameters and pass it when creating a tab.

The passed parameters can be returned by $p.getParameter(name);. In the following example, $p.getParameter("pageParam"); is used to get the name of the src page.

tabControl1.addTab("cmcm011", {
    "label": "Common Code",
    "title": "Common Code",
    "openAction": "exist",
    "closable": "true"
}, {
    "src": "CodeManage.xml",
    "frameMode": "wframePreload"
    "scope": true,
    "alwaysDraw": "true",
    "dataObject": {
        "type": "json",
        "name": "pageParam",
        "data": {
            "name": "WebSquare",
            "addr": "Seoul"
        }
    }
});

14.7.3.1Passing Parameters through dataObject

Pass parameters to the new tab added by addTab through the dataObject. On the created tab, check the received parameters through $p.getParameter.

scwin.addTab = function(label, tabId, src) {
    var tabOpt = {
        label: label,
        closable: true,
        addTabIndex: 0
    };
    var contOpt = {
        frameMode: "iframe",
        scope: true,
        src: src,
        alwaysDraw: false,
        title: tabId,
        "dataObject": {
            "type": "json",
            "name": "dataObject",
            "data": {
                "tabId": tabId,
                "src": src,
                "callback": "$p.parent().scwin.tac_main_callback"
            }
        }
    };
    tabControl1.addTab(tabId, tabOpt, contOpt);
}

14.7.3.2Progress Dialog

In case the src page of the WFrame tab contains a submission, the developer can set to display the process window that is generated upon execution of the submission within the WFrame.

Moreover, by changing the settings in the Config.xml file, the developer can change the source of the process message.

14.7.4Scope Referencing

WFrame tabs can be referred to by getWindow and $p.parent APIs.

14.7.5Changing the src Property

When dynamically changing the path of the content page, use the getFrame API.

tabControl1.getFrame("tab1").setSrc(
        "/ui/tab2.xml", {
            "dataObject": {
                "type": "json",
                "name": "pageParam",
                "data": {
                    "name": "WebSquare",
                    "addr": "Seoul"
                }
            }
        );

14.7.6When There are Multiple Tabs

14.7.6.1Position of Tabs (tabPosition)

When there are multiple tabs, the developer can decide where to display the tabs by setting the tabPosition property.

14.7.6.2Scroll and Tab List (tabScroll="true")

When creating multiple tab, add tabScroll="true" setting to display a scroll and a tab list on the top.

14.7.6.3Activating Tab by Scroll Button (changeActiveTab="true")

Setting as tabScroll="true" will display scroll buttons and clicking the scroll button will only show the tab list. Adding changeActiveTab="true" setting, however, will allow the end user to activate a tab on the tab list.

14.7.6.4Moving Remaining Tabs Forward upon Tab Closing (tabScrollAuto="true")

Moreover, by adding tabScrollAuto="true", the developer can display as many tabs as possible.

14.7.7Keeping Child Tab Disabled

Setting as keepDisabledTab="true" will keep the child tab disabled regardless of the status of the parent tab.

For example, when a tab in the parent TabControl has a child TabControl, the disabled tab of the child TabControl will remain disabled although the tab of the parent TabControl is activated or enabled.

14.7.8PopUp

14.7.8.1Displaying PopUp in the Specified Frame

When creating a frameMode="wframe" or frameMode="wframePreload" tab and opening a popup on the wframe or wframePreload tab with $open.popUp(), the developer can specify the frame to display the popup. Use $open.popUp() function and options.frameModal option.

14.7.8.2Closing Parent – Child PopUps

The developer can create popups on a tab using $p.openPopup() and can close all child popups and the parent popup.

1. Note, however, this feature is valid only on the WFrame tabs. Create a frameMode="wframe" or frameMode="wframePreload" tab.

2. Set the frameModal of the TabControl as "true".

14.7.9Major APIs

14.8TableLayout

14.8.1Rendering

14.8.2Adaptive Web

14.8.3DataCollection Binding and Automatic Component Insertion

1. Draw a TableLayout component.

1. Create a DataMap as shown below.

1. Drag the DataMap key on the Output tab to a cell in the TableLayout.

2. Check if the following popup shows up.

1. Select the component to bind with the DataMap.

1. The following is after the component is bound in each cell. Component key values (Name, Nationality, etc.) are automatically inputted, and the DataMap is also displayed.

14.9WidgetContainer

14.9.1Positioning

<w2:widgetContainer id="widgetContainer1" cols="8"
    style="width:100%; height:800px;"
    unitHeightPixel="200" mode="pushpull"></w2:widgetContainer>

The WidgetContainer creates a twp-dimensional coordinate system based on cols and unitHeightPixel settings.

Locations and sizes of all widgets contained in the WidgetContainer are decided based on the coordinate system. Adding Widgets When adding widgets, decide the position and the size of the widget using the following options.

Related Options

x: X position

y: Y position

unitWidth: Width on the coordinate system

unitHeight: Height on the coordinate system

14.9.2Adding Widgets

The widgets of the WidgetContainer can be dynamically created and added only by the addWidgets function. (Directly adding a widget on the XML file is not allowed.)

The following figure shows basic structure of the widget. The contents part is on the WFrame which carries the XML page (set as the src option.)

Related Functions

addWidgets( optionsArr ): Define a widget to create using options or as an array.

14.9.3Import/Export

14.9.3.1All Widgets

The developer can export all existing widgets and can also newly add multiple widgets.

Related Functions

importWidgets( jsonArr , clearFlag ): Adds new widgets to the WidgetContainer.

exportWidgets: Exports all widgets currently contained in the WidgetContainer.

var jsonArr = widgetContainer1.exportWidgets();

var jsonArr = widgetContainer1.exportWidgets();

14.9.3.2Individual

The developer can export or import one existing widget.

Related Functions

exportWidget(<widget ID>') : Exports the widget of the corresponding ID.

importWidget( <Widget id>, JSON ): Receives the ID and information of the existing widget in JSON and adds to the WidgetContainer.

widgetContainer.importWidget('widget1',  { 
    id: 'widget1',
    src:"widget.xml",
    scope:true,
    x:0,
    y:0,
    title:"Individual import",
    }
);

14.9.4Access

14.9.4.1Individual Access

Related Functions

getWidgetById: Returns the widget of the specified ID. (If not exists, null will be returned.)

getWidgetByTitle: Returns the widget of the specified title. (If not exists, null will be returned.)

var widget0 = widgetContainer1.getWidgetById('widget0');

var widget0 = widgetContainer1.getWidgetByTitle('Widget 0');

14.9.4.2Accessing Objects in the Widget

Using the following functions, the developer can access the objects within the widget.

Related Functions

setSrc

getObj

getObjList

The following is an example.

var widget0 = widgetContainer1.getWidgetById('widget0');
widget0.setSrc('other_page.xml');
var myObj = widget0.getObj('myObj');
var objList = widget0.getObjList();
console.log(myObj);
console.log(objList);

14.9.4.3Cross-referencing

When using the scope="true" setting of the WFrame, the WidgetContainer and the widgets contained can refer to each other.

The $p.widget function is designed for widgets only. This function is valid only for the widgets. Use the following functions to get information of the widgets.

Related Functions

$p.widget.getWidgetId(): Returns the widget ID.

$p.widget.getWidgetContainerId(): Returns the ID of the WidgetContainer that contains the widget.

$p.widget.getWidgetContainer(): Returns the WidgetContainer object that manages the widget.

if($p.widget) {
        dataMap1.set( "key1" , $p.widget.getWidgetId() );
    } else {
        dataMap1.set( "key1" , "Not a widget" );
    }

Frequently Used Functions

$p;: Provides utility-like functions.

$p.data;: Controls the DataCollection.

The following is an example to execute a submission in the widget that uses scope="true" setting of the WFrame. In other words, use $p.xxx functions. $p.xxx functions will search submissions in the main area.

scwin.startInit = function() {
    $p.executeSubmission("submission1");
};

scwin.submission1_submitdone = function(e) {
    alert('done');
};

scwin.startInit();

14.9.5Title

14.9.5.1Dynamic Change of Text

Use the following functions to dynamically change the text.

Related Functions

getTitle

setTitle

var widget0 = widgetContainer1.getWidgetByTitle('widget0');
var title = widget0.getTitle();  // 'widget0'
title += '_MODIFIED';
widget0.setTitle(title);  // 'widget0_MODIFIED'

14.9.5.2Applying Style

Define the style in the <style> tag. When adding a widget through the addWidgets, specify the defined style in the titleClass property. In this way, the developer can create widgets each of which uses different styles.

<head>
...
<script type="text/javascript"><![CDATA[
    widgetContainer1.addWidgets({
            title : "Widget  0",
            ...
            titleClass : "w2widget_red",
    });

    widgetContainer1.addWidgets({
        title : "Widget  1",
        ...
        titleClass : "w2widget_red",
    });

    widgetContainer1.addWidgets({
        title : "Widget  2",
        ...
        titleClass : "w2widget_red",
    });

 ]]></script>
</head>
<style>
    .w2widget_red{
        background-color: red;
        height: 50px;
        font-size: 30px;
        color: white;
    }
    
    .w2widget_orange{
        background-color: orange;
    }
    
    .w2widget_green{
        background-color: green;
    }
</style>

14.9.5.3Showing/Hiding Widgets

Using the following APIs, the developer can decide display of all widgets or selected widgets of the WidgetContainer.

addWidgets([{
    ...
    hasTitleBar: false,
    ...
}]);

showTitle();

enableWidgetTitle();

14.9.6Maximize/Minimize

Double-click each widget to minimize or maximize. However, when the widget is fixed, the widget size will not change.

14.9.7Moving & Resizing

The developer can control moving of all widgets in the WidgetContainer.

The developer can decide whether to allow moving of all or individual widgets in the WidgetContainer using the following APIs.

14.9.8Checking and Removing All Widgets

With exportWidgets(); or removeWidgetsAll(); functions, the developer can return or remove all current widgets.

14.9.9Prevention of Widget Maximization

14.9.10Example

1. Before adding a widget, set the ID of the WidgetContainer, and specify cols and unitHeightPixel to create a coordinate system.

<w2:widgetContainer id="widgetContainer1" minUnitWidth="1" widgetMove="" cols="8" horizontalMargin="0" verticalMargin="0" params="false" widgetResize=""mode="pushpull"threshold="null"style="width:100%;height:100%;margin: 20px;" unitHeightPixel="200"></w2:widgetContainer>

The following is when cols="8" & unitHeightPixel="200" are set.

1. Add a widget by writing script on the <script> tab as shown below.

<script type="text/javascript">
    <![CDATA[
        widgetContainer1.addWidgets({
                id : "widget0",
                title : "Widget 0",
                src : "widget0.xml",
                scope : true,
                x : 0,
                y : 0,
                unitWidth : 2,
                unitHeight : 1
            });

            widgetContainer1.addWidgets({
                id : "widget1",
                title : "Widget  1",
                src : null,
                scope : true,
                x : 1,
                y : 1,
                unitWidth : 1,
                unitHeight : 1
            });

            widgetContainer1.addWidgets({
                id : "widget2",
                title : "Widget  2",
                 src : "widget.xml",
                scope : true,
                x : 3,
                y : 0,
                unitWidth : 2,
                unitHeight : 2
            });
    ]]w2widget_red
</script>

1. Save the changes and refresh the browser to see whether the widget has been successfully added.

1. Using the buttons on the upper-right corner of each widget, check if the following operations are possible:

• Fix

• Maximize/Minimize

• Close

• Move (by dragging the tab)

• Resizing (by dragging the lower-right corner)

14.10WindowContainer

14.10.1Creating Windows (createWindow())

Define a JSON-type dataObject containing parameters and pass it when creating a tab. The passed parameters can be returned by $p.getParameter(name);. In the following example, $p.getParameter("pageParam"); is to get the name of the src page.

var obj = {
    "title": "wframeWindow1",
    "windowId": "window1",
    "src": "/ui/window1.xml",
    "frameMode": "wframe",
    "dataObject": {
        "type": "json",
        "name": "pageParam",
        "data": {
            "name": "WebSquare",
            "addr": "Seoul"
        }
    }
};
windowContainer1.createWindow(obj);

14.10.1.1Changing the src

When dynamically changing the path of the src page, use the getFrame API.

windowContainer1.getFrame("window1").setSrc(
        "/ui/tab2.xml", {
            "dataObject": {
                "type": "json",
                "name": "pageParam",
                "data": {
                    "name": "WebSquare",
                    "addr": "Seoul"
                }
            }
        );

14.10.1.2Passing Parameters through dataObject upon Window Creation

Pass parameters to the new window added by createWindow through the dataObject. On the created window, check the received parameters through $p.getParameter.

scwin.createWindow = function(windowIdx) {
    var frameMode = "wframe";
    var windowId = "window" + windowIdx;
    var src = "sub" + windowIdx + ".xml";
    var obj = {
        "title": frameMode + "Window" + windowIdx,
        "windowId": windowId,
        "src": src,
        "frameMode": frameMode,
        "dataObject": {
            "type": "json",
            "name": "dataObject",
            "data": {
                "windowId": windowId,
                "src": src,
                "callback": "$p.parent().scwin.windowContainer1_callback"
            }
        }
    };

    windowContainer1.createWindow(obj);
};undefined

undefined14.10.1.3Window Frame Type (undefinedframeMode)undefined

When creating a new window with the undefinedcreateWindow function, decide the frame type using the undefinedframeMode option.undefined

undefined14.10.1.4Displaying Process Message on WFrame Windowundefined

In case the src page of the WFrame window contains a submission, the developer can set to display the process window that is generated upon execution of the submission within the WFrame window.

Moreover, by changing the settings in the undefined Config.xmlundefinedfile, the developer can change the source of the process message. undefined

Moreover, by changing the settings in the undefined Config.xmlundefinedfile, the developer can change the source of the process message. undefined

undefined14.10.1.5Disabling History Feature of IFrameundefined

If the WindowContainer contains an IFrame, the developer can control moving to the previous page on the IFrame. When undefinedspaReplaceHistory="true" setting is in use, not the page in the IFrame but the entire browser page will move to the previous page. undefined

undefined14.10.1.6Event Loading Sequenceundefined

WindowContainer provides undefinedonwindowload/undefinedonwindowunload events. The undefinedonwindowload event of the WindowContainer is fired after undefinedinitScript and undefinedpostScript of the page are called.undefined

undefined14.10.1.7Referring to Other Windowsundefined

WFrame window can be referred to through undefinedgetWindow (same as the existing undefinedgetWindowbyWindowID) and undefined$p.parent API.undefined

undefined14.10.1.8Setting Default Size of the Windowundefined

When creating a window with undefinedcreateWindow() function, the developer can define the default width and the default height with undefineddefaultWidth and undefineddefaultHeight.undefined

var winObj = {
    ...
    defaultWidth: "600",
    defaultHeight: "300",
    ...
}
windowContainer1.createWindow(winObj);

When a window is initially created, the window is in maximum size as shown below.

Clicking the restoration button will restore the window in the size of defaultWidth and defaultHeight.

14.10.1.9Checking Window Index

With getSelectedIndex() function, the user can check the index of the selected window. Upon every window being created by createWindow() function, the window index increases by “1”, and upon every window being closed, the window index will be recalculated.

14.10.2PopUp

14.10.2.1Displaying PopUp in the Specified Frame

When creating a frameMode="wframe" window and creating a popup using $open.popUp() on the WFrame window, the developer can specify the frame to display the popup. Use $open.popUp() function with options.frameModal option.

14.10.2.2Closing Parent – Child PopUps

The developer can create popups on a tab using $p.openPopup() and can close all child popups and the parent popup.

1. Note that this valid only in the WFrame window.

2. Create a frameMode="wframe" window.

3. Set the frameModal property of the window as "true".

windowContainer1.createWindow({
    "title": "PopUp Closing",
    "windowTitle": "PopUp Closing",
    "src": "01_wframe_frameModal.xml",
    "windowId": "window01",
    "frameMode": "wframe",
    "frameModal": "true"
});

14.10.3Showing Windows

14.10.3.1Arrangement (setArrangeWindows())

setArrangeWindows(); provides four options to arrange windows (vertical, horizontal, cascade, and sequential).

// (Example 1) 
// window1, window3, and window2 are vertically opened.
windowContainer1.setArrangeWindows("vertical", ["window1", "window3", "window2"]);


// (Example 2) 
// window2, window1, and window3 are horizontally opened.
windowContainer1.setArrangeWindows("horizontal", ["window2", "window1", "window3"]);

14.10.3.2Automatic Arrangement (autoArrange)

When closing one of the arranged windows, the developer might want the remaining windows to be re-arranged. In this case, use the autoArange property.

14.10.3.3Window Control Icons (controlIconPosition)

With the controlIconPosition property, the developer can decide where to put the window control icons. Note, however, using the controlIconPosition property requires useNameContainer="true" setting.

controlIconPosition

"left" (Default) : Scrolling arrows are on the sides, and the arrangement icons are on the left.

"right" : Scrolling arrows are on the sides, and the arrangement icons are on the right.

"allright" : Scrolling icons are all on the right, and the arrangement icons are also on the right.

14.10.3.4Changing Maximum Number of Windows (setWindowMaxNum())

With setWindowMaxNum() function, the developer can set the maximum number of windows that can be created in the WindowContainer.

14.10.3.5Keeping the Window Always Open (stopMinimizeOnNameLayer)

stopMinimizeOnNameLayer="true" is to keep the windows always open regardless of the end user’s clicking the name layer.

14.10.3.6Window Maximization

The end user can maximize the window by clicking the window maximization button or double-clicking the window tile.

14.10.3.7Window Minimization

The end user can minimize the window by clicking the window minimization button or clicking the name layer.

14.10.3.8Display of Window Being Dragged (windowMoveType)

Setting as windowMoveType="overflow" allows the end user to drag the window outside of the WindowContainer and displays the dragged window. In the mean time, setting as windowMoveType="restrict" will allow the end user to drag the window only within the WindowContainer.

14.10.3.9Currently Selected Window

The w2window_selected style class is to differentiate the currently selected window from other windows.

<style>.w2window_selected {border: solid 2px green;}</style>

When the above style is applied, the current window will have green bold border as shown below.

14.10.4Controlling Windows

14.10.4.1Closing All Windows

14.10.4.2Closing All Windows Except Specified One (closeOthers())

Using closeOthers() function, the developer can close all windows except the currently selected window or a certain window specified by windowID or uniqueID.

14.10.4.3Prevention of Window Closing

useFixButton="true" is to display the Fix button next to the window name on the name layer.

Also, when useFixbutton="true" and closeType="noneFixedWindow" are used together, the developer can selectively define windows that will not be closed even upon the end user’s clicking Close All button. In other words, some windows may be not closed even upon the end user’s clicking Close All button.

With fixWindow and unfixWindow functions, the developer can dynamically enable/disable the Window Fix button to prevent window closing.

14.10.5Name Layer

14.10.5.1Moving Name Layer (nameLayerMove)

14.10.5.2Window Order on the Name Layer (nameLayerMove & nameLayerRearrange)

Setting as nameLayerMove="true" and nameLayerRearrange="true" will move the window fixed by the pin (useFixButton="true") to the first position on the name layer.

When no window, is fixed, the windows will be displayed on the name layer in order of "aaa" "bbb" "ccc".

In case window "bbb" is fixed in the above, "bbb" window will move to the first position on the name layer.

14.10.6Toolbar

14.10.6.1List of the Windows (useWindowScrollButton)

Using the useWindowScrollButton property, the developer can add a button to the toolbar that shows the list of the current windows. Moreover, when displaying the window list button by useWindowScrollButton="true", the developer can limit the row count of the window list through the windowScrollVisibleRowNum property.