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 "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.