Skip to end of metadata
Go to start of metadata

To create a custom tab panel widget, a tab panel style must first be added to the pui.widgets.tabStyles associative array.  Each entry in pui.widgets.tabStyles is an object with name/value pairs; the following are possible names:

Property Name Possible Values Description Requirement(s)
useImages true/false Determines if images are provided and used in the drawing of a tab panel.
The following images are needed in the IFS Directory location /www/profoundui/htdocs/profoundui/proddata/images/tabs/custom_widget_style_name:
  • left.gif - the left side image of an inactive tab
  • left-sel.gif - the left side image of an active tab
  • middle.gif - horizontally repeated middle image of an inactive tab
  • middle-sel.gif - horizontally repeated middle image of an of an active tab
  • right.gif - the right side image of an inactive tab
  • right-sel.gif - the ride side image of an active tab
hiImages true/false Determines if highlight images are provided and used when the cursor hovers over a tab.
The following images are needed in the IFS Directory location /www/profoundui/htdocs/profoundui/proddata/images/tabs/custom_widget_style_name:
  • left-hi.gif - the left side image of a highlighted, inactive tab
  • middle-hi.gif - horizontally repeated middle image of a highlighted, inactive tab
  • right-hi.gif - the right side image of a highlighted,inactive tab
imageFileExtension

Any valid image file extension
Default: .gif

Specifies image file extension used for Tab Panel images.

Optional

height Any valid pixel value Determines the tab height in pixels. Digits Only
defaultBackColor Any valid color name or hex value Sets the default background color of the active tab. useImages needs to be set to false
hiColor Any valid color name or hex value Sets the highlight color of non-selected tabs when cursor hovers over. useImages needs to be set to false
leftWidth Any valid pixel value Sets the width of the left side image.

Digits Only

Should match width of provided image.

useImages needs to be set to true

rightWidth Any valid pixel value Sets the width of the right side image.

Digits Only

Should match width of provided image.

useImages needs to be set to true

selColor Any valid color name or hex value Determines color of active tab. useImages needs to be set to true
selBold true/false Determines if active tab header is also bold. useImages needs to be set to true
borderColor Any valid color name or hex value Sets the color of the Border.

borderSize needs to be set to a digit pixel value greater than zero (Otherwise, color will not be seen.)

leftMargin Any valid pixel value Sets the width of the left side margin of the tabs in pixels.

Digits Only

useImages needs to be set to true

hiUnderline true/false Determines if highlighted, inactive tab header is also underlined. Optional
separated true/false Determines if there is a separation gab between the tabs. useImages needs to be set to true
backBar

true/false

Determines if the area behind the tabs, the Back Bar, is visible or transparent. Optional

If set to true, it is required for either backBarColor to be set to a valid color value or an image named middle.gif be provided in the IFS Directory location /www/profoundui/htdocs/profoundui/proddata/images/tabs/custom_widget_style_name in order to be visible.

backBarColor Any valid color name or hex value Sets the color of the Back Bar. backBar needs to be set to true
borderSize

Any valid pixel value
Default: 1

Sets the tab panel's border size in pixels. Digits Only
defaultTabColor Any valid color name or hex value Sets the background color of inactive tabs.

useImages needs to be set to false

ProfoundUI version 5.12.1 or later.

JavaScript Syntax for Adding a Tab Panel Style

The "tab panel style name" will then appear as an option in the Visual Designer under the "tab panel style" property.

After adding a new tab style, the next step is to add an entry into the Widgets Toolbox by using the pui.toolbox.add() API.  For more details about this API, refer to the Widgets Development API section of the documentation.  You should create a tab panel proxy image and a tab panel icon image before using the API.  The "defaults" configuration option should assign the "tab panel style" property to the new tab panel style name. 

All JavaScript code should be saved into an external file that is placed in the /www/profoundui/htdocs/profoundui/userdata/custom/widgets IFS directory.

Example: JavaScript Code to Create a Custom Tab Panel

Labels