UI Elements Solution

Chapter: Theme: UI Elements Container UI Elements

At the end of this Exercise, you are able to: Define an Image UI Element. Place the image within a Tray UI Element.

Developing

3-3 Add a Tray UI element to the view

Add a Tray UI element to the view. Name it TRAY_1 Define Bomb as the Trays title. (>Text attribute of CAPTION_1)

3-4 Download - Upload Download the image explosion.gif from Web Dynpro Component WD_04S_UI_IMAGE and upload it to your component.

1 UI Elements Solution

3-5 Add an Image to the Tray UI element

Add an Image to the Tray UI element. Name of the image: IMAGE_BOMB. Set the value of property source to explosion.gif and tooltip to This is an explosion image.

Optional: Setting image properties programmatically

4-1 Bind the image properties alt and source to the context of the view. Bind the image properties source, tooltip and visible to the context of the view container:

Add a new context node to the view controller context, having the name Image. Change the cardinality of this node to 1..1. Add three new attributes to the node Image, having the names SOURCE, TOOLTIP (both of type string) and VISIBLE (of type WDUI_VISIBILITY). Bind the properties SOURCE, TOOLTIP and VISIBLE of the Image I element to these context elements.

2 UI Elements Solution

4-2 Set the image properties programmatically

Set the image properties SOURCE, TOOLTIP and VISIBLE programmatically in method WDDOINIT of view IMAGE_VIEW.
MEHTHOD wddoinit . DATA: context_node context_elem stru_image TYPE REF TO if_wd_context_node, TYPE REF TO if_wd_context_element, TYPE if_image_view=>element_image.

* fill structure with values stru_image-source = 'explosion.gif'. stru_image-tooltip = 'Explosion boom!!'. stru_image-visible = '02'. "=visible * navigate to <IMAGE> via lead selection context_node = wd_context->get_child_node( name = `IMAGE` ). * get element via lead selection context_elem = context_node->get_element( ). * bind structure to context element image CALL METHOD context_elem->set_static_attributes EXPORTING static_attributes = stru_image. ENDMETHOD.

3 UI Elements Solution