An image object represents an area on a frame into which you can load an image file from disk. This can be an image in the following formats: .bmp, .gif, .ico, .jpg, .png, and .tif.

Important: The steps in this exercise require a set of image files that correspond to items in the database. However, these image files are no longer available with the OpenEdge installation. Therefore, it is recommended to not do the steps in this topic as-is. If you do, you will see repeated warning messages about being unable to open files for the images.

To add an image to the window:

  1. Select the Image icon from the Palette.
  2. Drop the image onto the design window to the right of the browse and shape it to be roughly the height of the browse.

    The image area displays a default black-and-white image just so you can see how large it is, until you load a specific image into it.

  3. Double-click on the image to bring up its property sheet.
  4. Name it ItemImage.

    You are going to use the image to display a picture of one of the Items in the Sports2020 database.

    To show each image properly within whatever space you allocated to it, you can select two attributes that will adjust it as needed.

  5. Check the Stretch-to-Fit toggle box. This option fits the image to the space.
  6. Check the Retain-Shape toggle box. This option retains the overall ratio of height to width of the image as its size is changed to fit the space:

Each Order displayed for a Customer can have one or many Order Lines. Each of these Order Lines is for a specific Item the Customer has ordered. Since there is not room in this simple test window to show all Order Lines for each Order along with the Item information, you just show the Item image for the first Order Line for the currently selected Order.

There is an image file in the sports2020/images directory for each Item in the item catalog of the Sports2020 database. The name of the file is cat plus the item number as a five-digit number, with the .jpg extension. To load the image into the image object area in the window, you use the LOAD-IMAGE method.

To find the right item to display and load its image:

  1. Add these lines of code to the end of the VALUE-CHANGED trigger for the Order browse:
    FIND Item OF Orderline. /* No need for FIRST because there’s just one item.*/
ItemImage:LOAD-IMAGE('src/sports2020/images/cat' +
  STRING(Item.ItemNum, '99999') + '.jpg').
  2. Save and Run the window once more.

    Each time you select a different Order, either by selecting a row in the browse or switching to a different Customer, a new image should appear.