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 

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

    images/abs10.png
  2. 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'.

    images/abs12.png
    Selecting Image here means that the button will only be the image. As such, the button will have no border around it.
  3. 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.

    images/abs11.png

Specifying an Image 

You can use system images, imported images, svg images, an external url, or css images on a button control.

  1. Create an image to use for the button.

    images/saturn.png
  2. After creating a button control, go to the properties list and set the 'Advanced button control type' property to 'Image'.

    images/si3.png
    Selecting 'Image' here will create a button with no generated borders.
  3. Scroll down to the 'Button Appearance' section and click the [...] button next to the 'Image name' property.

    images/si4.png
  4. 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.

    images/si5.png
  5. Click the "Add Image to Project" button.

    images/si6.png
  6. In the "Add Image to Project" dialog click the up arrow next to the 'Source filename' textbox.

    images/si7.png
  7. 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.

    images/si8.png
  8. Scroll down the button's properties list to the 'Javascript' section and click on the [...] button next to the "onClick" property.

    images/si9.png
  9. In the 'Edit onClick Event' dialog select the 'Text mode' radio button option. Add a simple javascript alert to the button.

    images/si10.png
  10. Run the component in Live Preview. Click on the button.

    images/si11.png

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.

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

    images/adi2.png
  2. 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.

    images/adi3.png
  3. 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'.

    images/adi4.png
  4. Click the [...] button next to the 'Button layout' property and select the 'Image above text' option.

    images/adi5.png
  5. Click the [...] button next to the "Image name" property.

    images/adi6.png
  6. In the 'Specify Image' dialog select the "SVG Icon" radio button option. Click the 'Select' button.

    images/adi7.png
  7. On the SVG Icon page a number of default system icons should be displayed. Select an icon and click 'OK' and 'OK' again.

    images/adi8.png
  8. In the Button Appearance section click the [...] button next to the 'Hover image name' property

    images/adi9.png
  9. In the 'Specify Image' dialog again select the 'SVG Icon' radio button option. Click the 'Select' button again.

    images/adi7.png
  10. Highlight the same icon that you did before. Click the 'up' arrow next to the 'Fill color' textbox.

    images/adi10.png
  11. 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.

    images/adi11.png
  12. In the 'Button Appearance' properties section click the [...] button next to the 'Pressed image name' property.

    images/adi12.png
  13. Again select the SVG radio button icon and click 'Select'.

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

    images/adi13.png
  15. Run the component in Live Preview

    images/adi14.png
  16. Now hover over the button with the mouse, the icon should change to the color specified in the 'Hover image name' property.

    images/adi15.png
  17. Click on the icon and you should see the style change again.

    images/adi16.png

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

images/ain2.png
{images.GridRow.SaveRecord} run in the 'Alpha Style'.
images/ain3.png
{images.GridRow.SaveRecord} run in the 'iOS7 Style'.

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.

images/ain4.png
'Image name' set to {images.GridRow.SaveRecord} in 'Alpha Style'.
images/ain5.png
'Hover image name' set to {images.GridRow.SaveRecord} in 'Alpha Style'.
images/ain6.png
'Pressed image name' set to {images.GridRow.SaveRecord} in 'Alpha Style'.

In order to select an abstract style do the following.

  1. Click the [...] button next to the property where you want to define the style.

    images/ain7.png
  2. Select the 'Image in Web Project or Style' radio button. Click the 'Select' button and choose the 'Select from the Style' option.

    images/ain8.png
  3. Choose an image from the list and click OK.

    images/ain9.png

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.

  • images/abs2.png
    Text only
    images/abs3.png
    Image only
  • images/abs4.png
    Text followed by Image
    images/abs5.png
    Image followed by text
  • images/abs6.png
    Image above text
    images/abs7.png
    Text above image
  • images/abs8.png
    Text left & image right
    images/abs9.png
    Text right & image left

See Also