Customizer's Guide > Working with XUI (XML-based User Interface) Dialog Boxes > Working with Images
  
Working with Images
Images can be used in many areas of XUI dialog boxes, such as in check boxes, on menus, and on buttons. (However, images are not available on submenu items.) Images are first defined using image or imagelist elements. The images are then referenced using the image attribute of the element displaying the image.
The following example uses the image element to define the image c:\temp\logo1.jpg and display it on a button.
<window>
<imagegroup>
<image id="imageLogo" path="c:\temp\logo1.jpg"/>
</imagegroup>
...
<button image="imageLogo"></button>
...
</window>
When deploying XUI controls, absolute paths to images may be restrictive. For XUI controls referencing images by name only, Arbortext Editor will first search the paths defined with the set dialogspath command option (and Advanced Preference). If the image is not found, Arbortext Editor will search the paths defined with set graphicspath. Images with relative paths will also be searched for in directories relative to the paths defined by set dialogspath and set graphicspath.
Another approach to working with images is to use the imagelist element to specify that a single graphic file contains multiple images of identical widths and heights.
For example, if path specifies a graphic file with a width of 48 and height of 16, and imagewidth is set to a value of 16, imagelist will contain 3 image elements, each defining an image 16 pixels wide by 16 pixels high.
The following example uses the imagelist element to define three images in tool_icons.jpg and displays them in a list box.
<window>
<imagegroup>
<imagelist path="tool_icons.bmp" imagewidth="16">
<image id="imageIconCopy"/>
<image id="imageIconCut"/>
<image id="imageIconPaste"/>
</imagelist>
</imagegroup>
...
<listbox>
<listitem image="imageIconCopy">
<listitem image="imageIconCut">
<listitem image="imageIconpaste">
</listbox>
...
</window>
If a menu item has the same command as a toolbar button, then the button's image is displayed next to the item on the menu. For example, if a toolbar button element has command set to FileNew and image set to image.jpg, and a menuitem element also has command set to FileNew, the image image.jpg will be displayed next to the menu item.