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:

  • useImages - true or false value that determines if images for drawing the tabs are provided in a subdirectory of the /www/profoundui/htdocs/profoundui/proddata/images/tabs/ IFS directory; if set to true, the following images must be created:
    • left.gif - the left side of an unselected tab
    • left-sel.gif - the left side of a selected tab
    • middle.gif - the middle of an unselected tab; this image is repeated horizontally
    • middle-sel.gif - the middle of a selected tab; this image is repeated horizontally
    • right.gif - the right side of an unselected tab
    • right-sel.gif - the ride side of a selected tab
  • hiImages - true or false value that determines if hover or highlight images are provided; if set to true, the following images must be created:
    • left-hi.gif
    • middle-hi.gif
    • right-hi.gif
  • imageFileExtension - optional property to specify a different file extension for images; if not specified, the .gif extension is used
  • height - determines the tab height in pixels
  • defaultBackColor - default background color (if images are not used)
  • hiColor - highlight color (if images are not used)
  • leftWidth - width of the image on the left side of the tab (if images are used)
  • rightWidth - width of the image on the right side of the tab (if images are used)
  • selColor - selected tab color
  • borderColor - border color
  • leftMargin - left margin in pixels for each tab
  • hiUnderline - if set to true, the tab text is underlined on hover
  • selBold - if set to true, the tab text is bolded when selected
  • separated - true of false value to determine if there should be a separation gap between the tabs
  • backBar - determines if the top of the tab panel has a back bar or if it is transparent
  • backBarColor - color of the back bar, if backBar is set to true
  • borderSize - the tab panel's border size in pixels; the default value is 1

The JavaScript syntax for adding a tab panel style is as follows:

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:

The following sample JavaScript code creates a custom tab panel.

Labels
  • No labels