The Image control lets you place bitmapped and vector images in a window or report. The bitmap file formats supported are PNG, JPG, WMF,.BMP, .PCX, .GIF, .ICO, .and CUR. The vector file format supported is .WMF. Clarion can support up to 16.7 million color resolution.
You must add the PALETTE attribute to a WINDOW to support custom palettes and color depths beyond the resolution of the end user's machine at runtime. For example, to support a 16.7 million color palette, the proper attribute is PALETTE(16777215).
The Image control cannot receive focus, nor can it generate events without the use of the ActiveImage Class. If you want to use an Image control as a button, go to the Actions dialog for the image control and tick ON the “Enable Active Image” checkbox. Using the ActiveImage Class the Image control registers for the following events:
see Actions below for information on the Active Image Template support.
The Property View presents you with two ways to viewing a control's properties.
This help documents displays the properties in the categorical view.
|Locked||“Freezes” the control so that subsequent data dictionary changes are not applied. You can override the #Freeze attribute for all controls or for individual controls. See Application Options.|
|Tab Index||Determines the index in the TAB order that this control will follow. The first tab in the order is index zero (0).To change the TabIndex property immediately while in the Designer, use the Show tab order interface (i.e. on the right-click menu).If you set the TabIndex property using the property page, the z-order is not updated until you save and exit the Window Designer.|
|File||Select a graphics file. Type in a file name, or press the ellipsis (…) button to the right of the File field to select a graphics file using the standard File Open dialog.|
|Image Mode||Select from the drop list one of the following modes:|
|Stretched||Specifies the image displays stretched to fill the area of the IMAGE.|
|Centered||Specifies the image displays at its default size and is centered in the area of the IMAGE (PROP:CENTERED)|
|Tiled||Specifies the image displays at its default size and is tiled to fill the entire area of the IMAGE (PROP:TILED).|
|Layout||Indicates the orientation of the control. Left to Right maintains the original layout specified in the Window Designer. Right to Left essentially “flips” the controls' display as a mirror image of the layout specified in the Window Designer. Default field navigation moves from right to left. The setting in the Application Frame will cascade its setting to all child windows and controls that have the default setting active.|
|Use||This defines the USE attribute for the control. Type a field equate label to reference the control in executable code.|
|Disable||Disables or 'grays-out' the control when your program initially displays it. The Window Designer places the DISABLE attribute on the control. Use the ENABLE statement to allow the user access to the control.|
|Hide||Makes the control invisible at the time Windows would initially display it. Windows actually creates the control–it just doesn't display it on screen. The Window Designer places the HIDE attribute on the control. Use the UNHIDE statement to display the control.|
|Scroll||Specifies whether the control should move with the window when the user scrolls the window. By default, (False), the control does not move with the window. Leave the Scroll property False to create a control that stays fixed when the user scrolls the window. The Window Designer places the SCROLL attribute on the control when checked.|
Lets you set the location and size of the control.
The Position tab lets you specify the AT attribute. Filling in the attribute manually is optional–you may set the position and size visually by dragging with the mouse in the Window Designer.
To set the location of the control's Top Left Corner, set an X (horizontal) and Y (vertical) coordinate in Dialog units. The coordinate is relative to the top left corner of the structure containing it, that is, the window or the report band.
To set the control's size, choose from the following options for Width and Height.
|Default||The Clarion runtime library determines the size of the control based on the applicable font and picture token.|
|Full||The control is the full height or width of the window or report.|
|Fixed||Lets you set a precise width or height in Dialog units on a window, or in thousandths of inch, points, or millimeters on a report.|
|Horizontal||To add a horizontal scroll bar to the control, set the Horizontal property to True. Scroll bars only appear when the contents of the text box are bigger than the window.|
|Vertical||To add a vertical scroll bar, set the Vertical property to True.|
These options add the HSCROLL, VSCROLL, and HVSCROLL attributes to the control.
|Embeds||Accesses the Embedded Source dialog for points surrounding the event handling for this control only.|
Use the Actions menu item to bring up the template dialog. The ActiveImage template provides functionality to your Image control so that it “mimics” – behaves similar to a Button control. Filling in these prompts causes the Image control to post the EVENT:Accepted to the original control when the image is clicked. The template uses the ActiveImage CLASS to provide the functionality. The ActiveImage CLASS is found in ActiveImage.Inc and ActiveImage.Clw.
Turn on the “Enable Active Image” checkbox. Accept the default “Object Name” or change it to somethng more memorable. Use the dropdown to select the Button that the Active Image will mimic. Those are the only requirements to make the Image control an “active Image”, but you can enhance the UIX if you provide images for the Disabled, Hot and Pressed states. See below for additional details.
|Enable Active Image||Checkbox to toggle the active image template support ON/OFF|
|Object Name||[Required]Name for the object instance associated with the Image control. You can accept the default name or change it to something you will recognize easier.|
|Button to Mimic||[Required]Use the dropdown list to select the Button control that the image control will replace. The original Button is automatically hidden at runtime by the Template at runtime.|
|Image is Round?||[Optional]Checkbox to tell the template if the image is Round. The ActiveImage Class has special handling for round images.|
|Override Image||[Optional]Enter a value here to signal the template so that at runtime it replaces the image that you populated at Design time as soon as the window is opened.Press the “V” button if you intend to use a Variable so that you can set the image at runtime.Press the ellipsis button to either select a Variable from the Data pad, or to select a physical image file.|
|Disable Image||[Optional]Enter a value here if you have an image that should be displayed to represent a “Disabled” state. If you don't enter a value here and you call the iBtn.Disable() method the class sets PROP:Disable for the image control so that the image will be repainted in greyscale colors.Call the iBtn.Disable() method (or iBtn.Enable() method) to toggle the image shown, or toggle the greyscale painting on or off.where iBtn is the value specified for “Object Name” for that ActiveImage instancePress the “V” button if you intend to use a Variable so that you can set the image at runtime.Press the ellipsis button to either select a Variable from the Data pad, or to select a physical image file.|
|Hot Image||[Optional]The class/template detects when the mouse cursor is hovering over the active image and if you enter a value the class changes the Image control to display the “Hot image” specified herePress the “V” button if you intend to use a Variable so that you can set the image at runtime.Press the ellipsis button to either select a Variable from the Data pad, or to select a physical image file.|
|Pressed Image||[Optional]Enter a value here if you have an image that should be displayed to represent a “Pressed” state.When the Image control is clicked (pressed) the ActiveImage class posts an EVENT:Accepted to the original button control (the one that the Image control 'mimics').Press the “V” button if you intend to use a Variable so that you can set the image at runtime.Press the ellipsis button to either select a Variable from the Data pad, or to select a physical image file.|
see also: ActiveImage Class