Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 13 Next »

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"
  }
});
  • No labels