Image

The UI element Image enables you to integrate graphics into the Web application in a format that is processed by the Web Server - for example, GIF, JPG, and PNG format. The height and width of the graphic can be specified using the properties height and width. The graphic is displayed without borders.

Note

To enable the development of accessible applications, the tooltip property is checked during the syntax check if the properties label and isDecorative are not set.

Since the visualization of Image is not adjusted when you set the High Contrast Black theme, you have to ensure yourself that accessibility is provided for and guaranteed. If you want to create an accessible application, you must ensure that the embedded Image has sufficient color contrast.

Runtime Class

CL_WD_IMAGE

Properties in View Designer

Name	Type	Initial Value	Bindable
id	STRING	(automatic)	No
adjustImageSize	WDY_BOOLEAN	false	Yes
border	I	0	Yes
contextMenuBehaviour	WDUI_CONTEXT_MENU_BEHAVIOUR	inherit	No
contextMenuId	WDY_MD_UI_ELEMENT_REFERENCE		No
enabled	WDY_BOOLEAN	true	Yes
height	STRING		Yes
isDecorative	WDY_BOOLEAN	false	Yes
isDragHandle	WDY_BOOLEAN	false	No
source	STRING		Yes
styleClassName	STRING		Yes
tooltip	Translatable text		Yes
visible	WDUI_VISIBILITY	visible	Yes
width	STRING		Yes

Aggregations in the View Designer

Name	Cardinality	Type
DRAG_SOURCE_INFO	0..1	DragSourceInfo
Menu	0..1	Menu

Note

Other properties that can be inherited are defined in the related higher-level classes. The related UI elements are:

Dynamic Programming

For dynamic programming, the same properties, events, and aggregations as in the View Designer are available. But note that the spelling format and use of upper/lower case is different.

Dynamic Programming of Properties

View Designer Name	Runtime Name	Type
adjustImageSize	ADJUST_IMAGE_SIZE	WDY_BOOLEAN
border	BORDER	I
contextMenuBehaviour	CONTEXT_MENU_BEHAVIOUR	WDUI_CONTEXT_MENU_BEHAVIOUR
contextMenuBehaviour: inherit	CL_WD_IMAGE=>E_CONTEXT_MENU_BEHAVIOUR-INHERIT
contextMenuBehaviour: provide	CL_WD_IMAGE=>E_CONTEXT_MENU_BEHAVIOUR-PROVIDE
contextMenuBehaviour: suppress	CL_WD_IMAGE=>E_CONTEXT_MENU_BEHAVIOUR-SUPPRESS
contextMenuId	CONTEXT_MENU_ID	WDY_MD_UI_ELEMENT_REFERENCE
enabled	ENABLED	WDY_BOOLEAN
height	HEIGHT	STRING
isDecorative	IS_DECORATIVE	WDY_BOOLEAN
isDragHandle	IS_DRAG_HANDLE	WDY_BOOLEAN
source	SOURCE	STRING
styleClassName	STYLE_CLASS_NAME	STRING
tooltip	TOOLTIP	WDY_MD_TRANSLATABLE_TEXT
visible	VISIBLE	WDUI_VISIBILITY
visible: none	CL_WD_IMAGE=>E_VISIBLE-NONE
visible: visible	CL_WD_IMAGE=>E_VISIBLE-VISIBLE
vAlign	V_ALIGN	WDUI_VALIGN
vAlign: baseline	CL_WD_IMAGE=>E_V_ALIGN-BASELINE
vAlign: bottom	CL_WD_IMAGE=>E_V_ALIGN-BOTTOM
vAlign: middle	CL_WD_IMAGE=>E_V_ALIGN-MIDDLE
vAlign: top	CL_WD_IMAGE=>E_V_ALIGN-TOP
width	WIDTH	STRING

Dynamic Programming of Aggregations

View Designer Name	Runtime Name	Cardinality
DRAG_SOURCE_INFO	DRAG_SOURCE_INFO	0..1
Menu	MENU	0..1
POPUP_BUBBLE	POPUP_BUBBLE	0..1

Example

You can find examples in the system in the Web Dynpro application, WDR_TEST_UI_ELEMENTS.