Creating a custom styled button

Owned by Alex Roytman
Last updated: Aug 16, 2023 by Jessica Tomkins
3 min read



There are 3 steps to creating a custom styled button.

First, a mockup of the styled button must be created and sliced into 9 png images representing all sides and the middle portion of the button:

  • bottomleft.png - bottom left corner

  • bottommiddle.png - bottom of the button; this image is repeated horizontally to fill the width of the button as it is sized

  • bottomright.png - bottom right corner

  • left.png - left side of the button; this image is repeated vertically to fill the height of the button as it is sized

  • middle.png - center of the button; this image repeated horizontally and stretched vertically in order to fill the button

  • right.png - right side of the button; this image is repeated vertically to fill the height of the button as it is sized

  • topleft.png - top left corner

  • topmiddle.png - top of the button; this image is repeated horizontally to fill the width of the button as it is sized

  • topright.png - top right corner

You can also copy images from an existing styled button located under the IFS directory /www/profoundui/htdocs/profoundui/proddata/images/buttons, and use them as a starting point.

If the button has a highlighted mouse over state, alternate images should be created using the following names:

  • bottomleft-hi.png

  • bottommiddle-hi.png

  • bottomrightp-hi.png

  • left-hi.png

  • middle-hi.png

  • right-hi.png

  • topleft-hi.png

  • topmiddle-hi.png

  • topright-hi.png 

If the button has a special click state, alternate images should be created using the following names:

  • bottomleft-click.png

  • bottommiddle-click.png

  • bottomrightp-click.png

  • left-click.png

  • middle-click.png

  • right-click.png

  • topleft-click.png

  • topmiddle-click.png

  • topright-click.png 

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

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

  • left - width of the left side of the button in pixels (should match the width of the images provided for the left side)

  • right - width of the right side of the button in pixels (should match the width of the images provided for the right side)

  • top - height of the top side of the button in pixels (should match the height of the images provided for the top side)

  • bottom - height of the bottom side of the button in pixels (should match the height of the images provided for the bottom side)

  • hasOverState - determines if the button has a separate set of images for when the user hovers the mouse over it

  • hasClickState - determines if the button has a separate set of images for when the user clicks it

  • textColor - default color of text within the button

  • editBackgroundColor - edit box background color used in inline editing within the Visual Designer

  • width - default button width

  • clickStateIsNormalState - when set to true, the click state images will be the same as the normal state images

  • hiColor - highlight color

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

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

The "button style name" will then appear as an option in the Visual Designer under the "button 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.getStyledButtonProxy() that can automatically create a drag and drop proxy from the custom styled button definition.  This function should be used for the "proxyHTML" configuration option.  The "defaults" configuration option should assign the "button style" property to the new button 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 styled button.

// Add a custom button style pui.widgets.buttonStyles["Custom Button"] = { left: 23, right: 23, top: 10, bottom: 10, hasOverState: false, hasClickState: false, textColor: "#000000", editBackgroundColor: "#eca430", width: 125 } // Now, add an entry to the Widgets Toolbox pui.toolbox.add({ category: "Custom Widgets", widget: "styled button", text: "Custom Styled Button", icon: "/profoundui/proddata/images/buttons/Custom Button/icon.png", proxyHeight: 23, proxyWidth: 125, proxyHTML: function(defaults) { return pui.widgets.getStyledButtonProxy(defaults); }, defaults: { "button style": "Custom Button", "width": "125px", "color": "#000000" } });