Creating a custom panel or dialog

There are 3 steps to creating a custom panel or dialog.

First, a mockup of the panel must be created and sliced into 8 png images representing all sides of the panel:

bottomleft.png - bottom left corner
bottommiddle.png - bottom of the panel; this image is repeated horizontally to fill the width of the panel as it is sized
bottomright.png - bottom right corner
left.png - left side of the panel; this image is repeated vertically to fill the height of the panel as it is sized
right.png - right side of the panel; this image is repeated vertically to fill the height of the panel as it is sized
topleft.png - top left corner
topmiddle.png - top of the panel; this image is repeated horizontally to fill the width of the panel as it is sized
topright.png - top right corner

Alternatively, a copy can be made of images for an existing panel located under the IFS directory /www/profoundui/htdocs/profoundui/proddata/images/panels, and then modified.

In addition, a 16 by 16 pixel png icon should be created for the panel. All images should be placed into a subdirectory under /www/profoundui/htdocs/profoundui/proddata/images/panels. The name of the subdirectory will be the name of the panel style.

The second step is to add a panel style by modifying the pui.widgets.panelStyles associative array. Each entry in pui.widgets.panelStyles is an object with name/value pairs; the following are possible names:

left - width of the left side of the panel in pixels (should match the width of the images provided for the left side)
right - width of the right side of the panel in pixels (should match the width of the images provided for the right side)
top - height of the top side of the panel in pixels, including the title bar if this is a dialog (should match the height of the images provided for the top side)
bottom - height of the bottom side of the panel in pixels (should match the height of the images provided for the bottom side)
background - the background color used for the middle part of the panel
textColor - the default text color for the panel title
textBackground - background color of the panel title inline edit box in the designer
textTopPadding - top padding in pixels for the panel title
textAlign - title alignment (right, left, or center)
fontSize - title font size
noTitle - true or false value indicating whether a title can be assigned to the panel; default value is false
width - overrides default panel width
height - overrides default panel height
dialog - true or false value indicating whether the panel is a dialog; default value is false

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

pui.widgets.panelStyles["panel style name"] = {
  property1: value1, property2: value2, etc.
}

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

The third and final 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. Profound UI provides a special function pui.widgets.getPanelProxy() that can automatically create a drag and drop proxy from the custom panel definition. This function should be used for the "proxyHTML" configuration option. The "defaults" configuration option should assign the "panel style" property to the new 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 panel.

// Add a new panel style
pui.widgets.panelStyles["Custom Panel"] = {
  left: 10,
  right: 10,
  top: 33,
  bottom: 9,
  background: "gray",
  textColor: "#000000",
  textBackground: "#f6d47a",
  textTopPadding: "7px"
}

// Now, add an entry to the Widgets Toolbox
pui.toolbox.add({
  category: "Custom Widgets",
  widget: "panel",
  text: "Custom Panel",
  icon: "/profoundui/proddata/images/panels/Custom Panel/icon.png",

  proxyHeight: 100,
  proxyWidth: 200,
  proxyHTML: function(defaults) {
    return pui.widgets.getPanelProxy(defaults);
  },

  defaults: {
    "panel style": "Custom Panel",
    "color": "#000000"
  }
});