cObject
---cWebObject
------cWebBaseUIObject
---------cWebBaseDEOServer
------------cWebBaseControl
---------------cWebImage
Use the cWebImage class to display an image inside your web view or dialog (cWebView, cWebModalDialog). The Image control provides support for a server-side OnClick event when the image is clicked.
The image to be displayed can be a file at the host application's URL, a file at any other URL, or a local file anywhere on the web application's server that the web application has rights to access.
Object oImage1 is a cWebImage
Set psUrl to "Images/HappyFace.png"
Set piColumnSpan to 0
Set pbShowBorder to True
End_Object
Object oSadBtn is a cWebButton
Set psCaption to "Sad"
Set pbServerOnClick to True
Procedure OnClick
WebSet psURL of oImage1 to "Images/SadFace.png"
End_Procedure
End_Object
In the above example, a cWebImage object is used to display an image (HappyFace.png) located is in the Images sub-folder of the web application's URL.
This example also demonstrates the use of the Set command, to set the design-time value of psURL, and the WebSet command to change the local value of psURL for the client that made the OnClick call.
This class supports any image type supported by the browser(s) used by the Web App.
The Web Framework uniquely identifies each web object via a combination of the object hierarchy (object nesting), and object name. This means that web object names must be unique within their parent (i.e. each sibling web object must have a unique name).
Image controls must be placed within a web container (e.g. cWebPanel, cWebView or cWebModalDialog).
Image controls may not be nested inside other web controls. You may not mix web panels and web controls as sibling objects.
Set psURL the URL of the image you wish to insert in the Image control.
Object oImage is a cWebImage
Set psUrl to "Images/HappyFace.png"
//...
End_Object
In the above example, the URL represents an image (HappyFace.png) located is in the Images sub-folder of the web application's URL. Any image that is located in the web application's URL (or a sub folder) can be referenced in this way.
Object oImage is a cWebImage
Set psUrl to "https://www.dataaccess.com/dataflex-logo.svg-f192"
//...
End_Object
In the above example, the entire URL to an image file (DAWlogo.gif) is specified. This file may be located in any reachable URL.
Alternatively you can set the psLocalFile property to reference a file in the server's local file system. So long as the web application has access rights to this file, then it can be read and sent to the image control on the client.
Object oImage is a cWebImage
Set psLocalFile to "C:\Photos\MiamiHoliday.jpg"
//...
End_Object
In the above example, an image file (MiamiHoliday.jpg) in a local server folder is referenced using the psLocalFile property.
For security reasons, the psLocalFile property is not synchronized to the client. psLocalFile can be set in the object declaration but not modified once the image control is loaded to the client. Send UpdateLocalImage to change the local file image that is displayed in the image control.
Object oButton is a cWebButton
Set psCaption to "Change Holiday"
Procedure OnClick
Send UpdateLocalImage of oImage "C:\Photos\NewYorkHoliday.jpg"
End_Procedure
End_Object
The psLocalFile and psURL properties are mutually exclusive. You should use one or the other, but not both.
Set the pePosition property to determine how the image is displayed within the boundaries of the image control. The default pePosition value is wiActual, which positions the image in the top left corner and shows the image in its actual size without stretching or scaling. Other possible position values are: wiStretch, wiStretchHoriz and wiCenter.
Web controls are positioned by HTML flow layout (left to right, top to bottom). The relative position of the control in this flow is determined by the location of the object declaration in your code.
In addition to the flow layout, each web container is divided into a fixed number of equal-width columns (piColumnCount). Child controls are aligned to these columns to determine their horizontal position and width.
Set piColumnIndex to position an image control in a particular column of the parent container.
Set piColumnSpan to determine the width of the image control i.e., the number of columns occupied by the control. The actual width is determined by the number of columns and the width of the parent container.
For more information, see Positioning and Layout of Controls.
Set piHeight to determine the image control's height. You can also instruct an image control to occupy all available vertical height in its parent container by setting pbFillHeight to true.
This control can be used as a valid drop target by registering it as such in a cWebDragDropHelper object.
The supported actions for this control are:
- C_WebDropOnControl
This allows the control to accept data dragged from elsewhere in the control (if configured that way) and can also be used to accept files when registered within a cWebDragDropFileHelper.
By default a portion of the control's width is reserved to display a descriptive label. By default, the label is displayed to the left of the control and consumes approximately 120px of the total width.
Set psLabel to the text string you want to display as a label.
Set peLabelAlign to position the label text to the left, right or center of the space allocated to the control's label (alignLeft, alignRight, alignCenter).
Set peLabelPosition to change the position of the space allocated to the control's label. By default, the label is positioned to the left of the control (lpLeft). The label can also be positioned above or to the right of the control (lpTop, lpRight).
Set piLabelOffset to change the amount of space that is consumed by the control's label. By default, the label consumes approximately 120px.
The label's text color is determined by the web application's CSS theme (psTheme). Set psLabelColor to directly override the label's CSS themed color.
Set pbShowLabel to False to hide the label and remove space used the control's label. By default, pbShowLabel is True.