An Image control can correspond to an item found in a data file, in a query, ... Two types of items can be associated with an Image control:

• A "Text" item: the stored information is the path of the image.
• A "Sound, image, binary" item: the stored information is the image itself.

Storing the images in the data file as Text items

1. In the data model editor:
   • Create a Text item (PHOTO_Path for example). This item will be used to store the path giving access to the image.
   • Don' forget to resize this item (255 characters for example).
   • In the shared information of the item, this control is associated with an edit control.
   • Generate the analysis to take the modifications into account.
2. In the window (or in the page) that will be used to edit/view the image:
   • Create an Image control (IMG_Photo in our example). This Image control is linked to no item.
   • Create an edit control linked to the PHOTO_PATH item (this control is named EDT_Photo in our example).
     To create this control, Drag and Drop the item found in the "Analysis" pane to your window or page.
     This control allows the user to specify the path of the image file to use. A button used to select the requested image can be added beside this control. The "Click" event of the Button control can contain the following code (for example):
     
     // Opens an image picker
     EDT_Photo = fImageSelect("c:\my documents", "", "Select the customer photo")
     // Run the event "Whenever modified" of the EDT_Photo Edit control
     // to update the Image control
     ExecuteProcess(EDT_Photo, trtChange)
     
   • In the event "On each change" of this control, enter for example the following code:
     
     IF fFileExist(MySelf) = True THEN
     IMG_Photo = MySelf
     ELSE
     IMG_Photo = ""
     END
     
     
     This code is used to:
     • check the existence of the image file.
     • display the image in the Image control. All you have to do is assign the path of the image to the Image control in order for the image to be displayed. If the image does not exist, no image is displayed.
   • When displaying the window or the page, force (if necessary) the execution of the "Whenever modified" event of the control with ExecuteProcess. For example:
     
     ExecuteProcess(EDT_Photo, trtChange)
     
3. The information will be automatically saved in the data file when using:
   • ScreenToFile.
   • PageToFile.

The path of the image will be automatically saved in the Text item.

Storing the images in the data file as "Image" items

1. In the data model editor:
   • Create a "Sound, image, binary" item (PHOTO_Image for example). This item will be used to store the image.
   • In the "General" tab of item, specify the "Image (binary memo)" sub-type.
   • In the shared information of the item, this control is associated with an Image control.
   • Generate the analysis to take the modifications into account.
2. In the window (or in the page) that will be used to edit/view the image:
   • Create an Image control (IMG_Photo in our example). This Image control is linked to the "Sound, image, binary" item created in the analysis. To create this control, Drag and Drop the item found in the "Analysis" pane to your window or page.
   • Create an edit control if necessary (EDT_Photo in our example). This control allows the user to specify the path of the image file to use. This control is linked to no item. A button used to select the requested image can be added beside this control. The "Click" event of the Button control can contain the following code (for example):
     
     // Opens an image picker
     EDT_Photo = fImageSelect("c:\my documents", "", "Select the customer photo")
     // Run the event "Whenever modified" of the EDT_Photo Edit control
     // to update the Image control
     ExecuteProcess(EDT_Photo, trtChange)
     
   • In the event "On each change" of this control, enter for example the following code:
     
     IF fFileExist(MySelf) = True THEN
     IMG_Photo = MySelf
     ELSE
     IMG_Photo = ""
     END
     
     
     This code is used to:
     • check the existence of the image file.
     • display the image in the Image control. All you have to do is assign the path of the image to the Image control in order for the image to be displayed. If the image does not exist, no image is displayed.
3. The information will be automatically saved in the data file when using:
   • ScreenToFile.
   • PageToFile.

The image will be automatically saved in the "Sound, image, binary" item.

1st case: the controls in the window or page are bound to items in a data file
All the items in the data file (or a related file) that are bound to a control in the window or page will be updated by:

• ScreenToFile in WINDEV or WINDEV Mobile.
• PageToFile in WEBDEV.

The item linked to the Image control can use HFSQL thumbnails. In this case, the display of images will be optimized.