Creating a custom styled button
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"
}
});
Some documentation pages have recently moved to a new section: Profound AppDev. If you are having trouble finding specific pages, try the documentation search capability or reach out to our Support team!