Advanced Button Styling
Description
When they are initially added to a component most buttons are somewhat bland. Changing the text and images on a button control, however, is easy.
For an illustration of styling options follow the guide below or watch this video.
The Advanced Styling Section
In the UX Builder on the UX Controls page open the 'Other Controls' menu. Click on the [Button] option to add a button control to the component.
Highlight the button control in the controls tree. In the properties list, in the Button Properties section, set the 'Advanced button control type' property dropdown to 'Button', 'Hyperlink', or 'Image'.
Selecting Image here means that the button will only be the image. As such, the button will have no border around it.View the 'Button Appearance' section of the properties list. The property settings in this section will change depending on the advanced button control type selected.
Specifying an Image
You can use system images, imported images, svg images, an external url, or css images on a button control.
Create an image to use for the button.
After creating a button control, go to the properties list and set the 'Advanced button control type' property to 'Image'.
Selecting 'Image' here will create a button with no generated borders.Scroll down to the 'Button Appearance' section and click the [...] button next to the 'Image name' property.
In the Specify Image dialog use the radio buttons to select the "Image in Web Project or Style" option. Click the 'Select' button and choose the 'Select from Web Project Folder' option.
Click the "Add Image to Project" button.
In the "Add Image to Project" dialog click the up arrow next to the 'Source filename' textbox.
Select the images file extension from the dropdown in the lower-right hand corner. Then select the image you want to use and click Open. Click OK, OK, and OK again.
Scroll down the button's properties list to the 'Javascript' section and click on the [...] button next to the "onClick" property.
In the 'Edit onClick Event' dialog select the 'Text mode' radio button option. Add a simple javascript alert to the button.
Run the component in Live Preview. Click on the button.
Adding Different Images for Different Button States
A common design feature used with buttons in an application is to change a button's styling when the state of the button changes. For example, when the button is hovered over the color of the text or image on the button might change. Similar changes can also occur when the button is pressed or disabled.
In the UX Builder open the UX Properties page. In the UX Properties section find the 'Style name' property. Click the [...] button next to the property.
In the 'Select Style' dialog set the 'Location' to be 'System' and select the 'Alpha' style. Selecting this style will make it easy to access a number of pre-defined SVG icons.
Open the UX Controls page and go to the 'Other Controls' menu. Click on the [Button] option to add a button control to the component. Highlight the button control in the controls tree and go to the properties list. Click the dropdown next to the 'Advanced button control type' and select 'Button'.
Click the [...] button next to the 'Button layout' property and select the 'Image above text' option.
Click the [...] button next to the "Image name" property.
In the 'Specify Image' dialog select the "SVG Icon" radio button option. Click the 'Select' button.
On the SVG Icon page a number of default system icons should be displayed. Select an icon and click 'OK' and 'OK' again.
In the Button Appearance section click the [...] button next to the 'Hover image name' property
In the 'Specify Image' dialog again select the 'SVG Icon' radio button option. Click the 'Select' button again.
Highlight the same icon that you did before. Click the 'up' arrow next to the 'Fill color' textbox.
Select a color from the 'Color Picker' and click OK. All of the icons in the 'SVG Icon' dialog should now be filled with the color that was selected. You can also change the 'Stroke Color' of icons using a color picker; in the upper right-hand corner. Changing the color fill or stroke of the icons here only impacts this particular instance of that icon. Click 'OK' and 'OK' again.
In the 'Button Appearance' properties section click the [...] button next to the 'Pressed image name' property.
Again select the SVG radio button icon and click 'Select'.
Choose the same icon that was used with the 'Image name' and 'Hover image name' properties. Change the fill color to a new color and click OK and OK again.
Run the component in Live Preview
Now hover over the button with the mouse, the icon should change to the color specified in the 'Hover image name' property.
Click on the icon and you should see the style change again.
Using an Abstract Image Name
In addition to selecting a specific image name, you can also select an abstract image name. An abstract image name is the name of the image that is used with a given style such as the 'Alpha' style or 'iOS7', or 'MobBlue'. As shown earlier, these styles are defined in the Style name property on the UX Properties page.
In many cases different styles have the same abstract image name for a particular images, only the images are different to meet the style. For example, the abstract image {images.GridRow.SaveRecord} will produce a one image when the 'Style name' is 'Alpha' and a different image when the 'Style name' is set to 'iOS7'.
The same abstract image can be assigned to different button states in the same style. In many cases only one abstract image is needed to define the 'Image name', 'Hover image name', 'Pressed image name', and 'Disabled image name'. When the application is run, the style of the image will be still change in response to any state changes.
In order to select an abstract style do the following.
Click the [...] button next to the property where you want to define the style.
Select the 'Image in Web Project or Style' radio button. Click the 'Select' button and choose the 'Select from the Style' option.
Choose an image from the list and click OK.
Button Layout
If you select 'Button' from the 'Advanced button control type' property dropdown, then you can add both an image and text to the button. You can also add just an image or some text. The placement of the image and text on the button can be specified using the 'Button layout' property. Selecting the 'Image only' option here is different from selecting 'Image' in the 'Advanced button control type' property. The 'Image only' setting here will also only show an image, but this image will usually have an automatic border placed around it.
Text only
Image only
Text followed by Image
Image followed by text
Image above text
Text above image
Text left & image right
Text right & image left
See Also