Tabs

Provides a tab control for the HTML pages that are open on the screen.

Syntax

HTML	<div cordysType="wcp.library.ui.Tabs" id = tabID > ... </div>

The library provides an easy navigation to the Web pages that are opened. Each page opened by the user is assigned a tab. The user can navigate through various tabs. The list of all tabs appears either in the lower or the top portion of the page (it can be seen in the Explorer).
Note: In case of multiple tabs, the scroll feature is available as a roller, by default. The previously available scrollby attribute that provided the roller and extender scroll options is now removed.
In Process Platform Ajax Toolkit application Framework, tabs are created using the application component's select() method. Following is an example of how the select() method can be used to open a page.

Scripting

application.select(applicationDefinition, data, callBack)

Here,applicationDefinitiondenotes the application to open/call. Below is how the application definition looks:

XML

<script id="applicationDefinition" type="cordys/xml">
    <Application>
        <id>applicationID</id>
        <url>url to be loaded</url>
        <caption>caption of the tab and titlebar</caption>
        <description>description which will be in tooltip and titlebar</description>
        <frame>location where the application should be loaded</frame>
    </Application>
</script>

Tabs opened through the application framework have a titlebar and a close button (on the top right corner of the window using which the tab page can be closed).

Whenever an application is selected, either from the menu or through the script, the selected application tab will get the focus and become visible in the main frame. This would force the main frame to have only one tab to have focus and be visible. This shortcoming is overcome by the introduction of an attribute focus in the application node of the applicationDefinition. When this property is set to false, the selected application tab (new or already present) blinks (background becomes blue) to get the attention of the user that something has changed on that tab. It is up to the user to select the blinking tab and give it focus. The tab caption remains highlighted till the user selects it. This feature facilitates a single frame to have multiple highlighted tabs.

To dynamically add and initialize this component, you can use the initializeHTMLElements()or addType() methods of the Application object.

For information about the keyboard shortcuts available for the Tabs type library, see Keyboard Shortcuts.

The various properties, methods, and events that are defined on the tabs component are as follows:

Table 1. List of Attributes

Attribute	Property	Description
closableTabs	closableTabs	Variant that defines whether the Close button is to be displayed on the caption bar of the tab. A Close button is shown on each tab caption, and enables you to close the tab. Possible values are: yes - Close button is shown. no - (Default) Close button is not shown. true - Close button is shown. false - Close button is not shown. 1 - Close button is shown. 0 - Close button is not shown.
loadedTabs	loadedTabs	Integer that retrieves the number of tabs that are currently loaded. This property is read-only. When no tabs are initialized, this value remains 0.
orientation		String that denotes the position of tab headers. Possible values are: left: Tab headers are positioned along the left edge of each tab. right: Tab headers are positioned along the right edge of each tab. top: Tab headers are placed at the top of each tab. bottom: Default. Tab headers are placed at the bottom of each tab. stacked: Tabs are stacked.
showTabs	showTabs	Variant that defines whether the caption bar of the tabs can he shown or hidden. Caption bar is where the tab headers are placed. Possible values are: yes - (Default) Caption bar is shown. no - Caption bar is not shown. true - Caption bar is shown. false - Caption bar is not shown. 1 - Caption bar is shown. 0 - Caption bar is not shown.
stackedTabs	stackedTabs	Variant that defines whether each of the tabs in the page can be stacked one over the other. When tabs are stacked, the headers of the tabs appear as buttons in the page, which span to the length of the page. While clicking a button, the particular tab expands. Clicking another tab header will expand that, while closing the previously opened tab. Possible values are: no - (Default) Tabs are not stacked. yes - Tabs are stacked. false - Tabs are not stacked. true - Tabs are stacked. 0 - Tabs are not stacked. 1 - Tabs are stacked.
tabsatbottom	tabsatbottom	Variant that defines whether tab headers are to be placed at the bottom or at top. Possible values are: yes - (Default) Tab headers are placed at bottom. no - Tab headers are placed at top. true - Tab headers are placed at bottom. false - Tab headers are placed at top. 1 - Tab headers are placed at bottom. 0 - Tab headers are placed at top.
textDirection		String that denotes the placement or orientation of the displayed text. Possible values are: horizontal: Default. Tab-header text is displayed horizontally. vertical: Tab-header text is displayed vertically.
tile	N/A	Sets the tile property, which is a variant that defines whether tabs are tiled in the page. Tiling of tabs can be done horizontally or vertically. The tabs are realigned and their positions are based on the number of tabs available in the page. When this is set to some value, then the showtabs property will automatically be set to 'false'. Possible values are: horizontal - Tabs are tiled horizontally. vertical - Tabs are tiled vertically.
tileCount		Variant that defines the number of tabs. It accepts a numeric value. For a given tileCount, the tabs are tiled in rows and columns for horizontal and vertical tiles, respectively.

Table 2. List of Methods

Method	Description
getTab	Returns the tab specified by the unique identifier. If such a tab does not exist, then it creates a tab and returns it.
getTextDirection()	Returns the current text direction of tab captions.
getTile	Gets the value of the tile property.
getType()	Returns the current orientation of tabs.
setTextDirection(sValue)	Sets the text direction of a tab caption. Possible values are: horizontal: The text direction of tab captions is horizontal. vertical: The text direction of tab captions is vertical.
setTile	Sets the tile property, which is a variant that defines whether tabs are tiled in the page. Tiling of tabs can be done horizontally or vertically. The tabs are realigned and their positions are based on the number of tabs available in the page. When this is set to some value, then the showtabs property will automatically be set to false. Possible values are: horizontal - Tabs are tiled horizontally. vertical - Tabs are tiled vertically.

Table 3. List of Events

Event	Description
onbeforetabunload	Fires before a tab is unloaded.
ontabblur	Fires when a tab loses the input focus.
ontabfocus	Fires when a tab is set to focus.
ontabload	Fires when a tab is loaded.
ontabsready	Fires when the tabs component in the page is initialized. This is also fired when a tab is selected or when the title of the tab is set using the setTitle() method or when it is created using getTab() method. This situation might occur, for example, when creating tabs dynamically (using addLibrary) or using the above mentioned methods before the "ondocumentready" of the tabs library.
ontabunload	Fires when a tab is unloaded.

The following methods are exposed for every tab that is created.

Table 4. List of Properties (used for every tab)

Property	Description
tabId	String that denotes the unique identifier of the tab.

Table 5. List of Methods (used for every tab)

Method	Description
blink	Keeps the tab page blinking until the control is brought to focus on the tab.
close	Closes and deletes a tab from the tabs collection. The event ontabunload is fired once the tab is deleted.
getActiveTab	This method returns the currently active or selected tab page.
getCaption	Gets the caption of a tab. The caption set for the tab will be on the header of the tab.
getImage	Gets the image of a tab.
getTabControl	Returns the tab control from which the tab specified by tabID property is created.
getTooltip	Gets the tooltip of a tab. The tooltip set for the tab will be on the tooltip and header of the tab.
hide	Hides a tab (Soft Close). While hiding a tab, the tab is actually unloaded. The loadedtabs property is decremented by 1, and the ontabunload event is fired.A hidden tab can be shown only by using the show() method.
select	Selects a tab. Once a tab is created, it will be selected by default. In order to select tabs that are already created, use getTab() method to get the tab page that was created, and use this method on the tab.
setCaption	Sets the caption for the tab.
setImage	Sets the image for a tab.
setTooltip	Sets the tooltip for the tab.
setType(sOrientation)	Sets the position of the tab header with respect to the tab.
show	Shows a tab (reloads a tab). While showing a tab, the tab is loaded. The loadedtabs property is incremented by 1, and the ontabload event is fired.It is possible to show a tab only after the tab is hidden. A tab can be hidden by the hide() method.This method also takes a parameter called "select". The default value for the select parameter is "true". Also, when the select parameter is absent, the default value is taken. When this method is called with the default value of select, i.e. show() or show(true), the hidden tab will be displayed and will also become the current selected tab. When the select parameter is false, i.e. the show(false) method is called, the hidden tab will be displayed (the tab caption will appear) but the tab will not become the current tab.

Note: When an IFRAME element is added to a tab page and the class attribute is set as container for the element, it is advisable to use the application.select() method to invoke any HTML application inside the IFRAME.

Example

The following example shows how the tab component is used.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="/cordys/wcp/application.js"></script>
<script>
    function addtabsFunc()
    {
        var yahooTab = tabControl.getTab("yahooTab");
        yahooTab.innerHTML = "<iframe id='yahoo' src='http://www.yahoo.com' style='width:100%;height:100%'></iframe>";
        yahooTab.setCaption("yahooTab");
        yahooTab.setTooltip("yahooTab");
 
        var vgTab = tabControl.getTab("vgTab");
        vgTab.innerHTML = "<iframe id='vgroup' src='http://www.vanenburg.com' style='width:100%;height:100%'></iframe>";
        vgTab.setCaption("vgTab");
        vgTab.setTooltip("vgTab");
    }
    function getTab()
    {
        var id = prompt("Enter the ID of the tab : ", "");
        if (id)
        {
            var tab = tabControl.getTab(id);
            if (! tab.firstChild)
            {
                tab.innerHTML = "<div style='width:100%;height:100%' class='input'></div>"
                tab.firstChild.innerHTML = "This is custom created tab\n\nTab ID : " + id;
                tab.setCaption(id);
                tab.setTooltip(id);
                tab.blink(true);
            }
        }
    }
    function removeTab()
    {
        if (tabControl.loadedTabs == 0)
        {
            application.notify("No Tabs to delete !");
            return;
        }
        var id = prompt("Specify Tab to remove");
        if (typeof(id) != "undefined" &amp;&amp; id.match(/\S/))
        {
            tabControl.getTab(id).close();
            application.notify("Tab " + id + " deleted !");
        }
    }
    function hideAndShow(isHide)
    {
        var id = prompt("Enter the ID of the tab : ", "");
        if (id)
        {
            var tab = tabControl.getTab(id);
            if (tab)
            {
                if (isHide == false) tab.show();
                else tab.hide();
            }
        }
    }
</script>
</head>
    <body>
        <br><br>
        <button class="medium" onclick="addtabsFunc()">Create Tabs</button> 
        <button class="medium" onclick="getTab()">Get tab</button> 
        <button class="medium" onclick="removeTab()">Remove tab</button> 
        <button class="medium" onclick="hideAndShow(true)">Hide</button> 
        <button class="medium" onclick="hideAndShow(false)">Show</button>
        <br><br>
        <div cordysType="wcp.library.ui.Tabs" id="tabControl" style="width:70%;height:80%;top:100px"></div>
    </body>
</html>

pp108 : Tabs

Tabs

Syntax

Example