Adding images to buttons

Bitmap size is not restricted in the form or on the disk. All forms are stored in memory, however, and forms with large images can cause a performance decline. Furthermore, adding an image to multiple views causes copies of the same image to be stored in memory. For a browser, large images increase the download time. For best performance, use images with small file sizes, such as GIF or JPG files.

To support the Image Reference functionality for button fields, AR System  clients and supporting applications such as the Mid Tier  must be release 7.5.00 or later. When previous clients open a form containing an image reference, the server converts the image format into a byte stream that is cached on the client, as in earlier versions.

The functionality to gray out disabled buttons is part of the button feature; you do not need different bitmaps to represent different button "states" (for example, normal, dimmed, depressed, reversed).

The following video (3:54) provides a summary of adding static or SVG images in Developer Studio for progressive views: https://www.youtube.com/watch?v=349xdes86qM

To add an image to a button

1. Select the button.
2. In the Properties tab, click the Image property, and click the ellipsis button.
3. In the Image dialog box:
   1. If necessary, click Clear Image to delete an existing image.
   2. Browse for the image to display on the button.
      You can select .bmp, .jpeg, .jpg, .gif, and .png files. The selected image appears in the Preview area.
   3. To save the image to a different file or folder, click Save to File.
   4. Set the Image Type:
      • Embedded Image—The image is stored in the field display properties as an ARByteList.
        In this case, the image is embedded in the form and is therefore downloaded with the form whenever the form is refreshed by the client.
      • Image Reference—A reference to a shared image object is stored in the field display properties.
        In this case, the image is stored as an image object in AR System server . When the form is downloaded, the image is cached separately, so the image does not have to be refreshed along with the form. This allows for faster form refresh time. See Adding icons and images to Progressive Web Applications.
   5. Click OK.
4. Select the button, and set the following properties in the Properties tab:

   • Alternative Text—Provides a text description of the button to display as a tooltip and to satisfy accessibility requirements. The alternative text description can include spaces.

     When the Alternative Text field is left blank, the button does not have a tooltip association. To satisfy accessibility requirements, the button label displays when the field is left blank.

   • Display as Flat Image—Displays the button without its three-dimensional border. This is helpful when you want to use images as trim.
     If the button performs an action when clicked, make sure the button looks like an object that users should click. For example, you can include a label for the button.
   • Image Position—Sets the image location relative to the label:
     • Center (default)
     • Left
     • Right
     • Top
     • Bottom
     • When the image is centered, the label is not visible inside the button.
   • Scale Image to Fit—Scales the image to fit the size of the button.
     If this option is set to False, the image might be cropped, and you might need to resize the button frame.
   • Maintain Aspect Ratio—Retains the proportions of the image when the image is resized to fit the size of the button. This option is enabled when Scale Image To Fit is set to True.
   • Mouseover Effect—Specifies what shape does a mouse pointer take and whether the button is displayed when you hover the mouse pointer over a button. This property is displayed only when you set the value of the Display as Flat Image property to True.
5. Set other field properties as needed.
   See Field Properties.
6. Right-click the form, and select Save.