UI Elements Exercise

Chapter: Theme: UI Elements Standard and Container UI Elements

At the end of this Exercise, you are able to: Define standard UI elements (e.g. Image) Place the standard UI elements in container UI elements (e.g. Tray)

Development Objectives

Container UI Elements Container UI Elements can be used to group a set of UI elements in the layout of a view. The following container UI elements exist: Group, Scroll Container, Transparent Container, and Tray. For each container UI element layout properties can be used to define the alignment of the UI elements within the container UI element.

Result In this exercise, you will define a standard UI element and you will place it within a container UI elements. Optional: You will set image properties programmatically.

1 UI Elements Exercise

Exercise without optional part: Template Solution: Web Dynpro Component: Application: Optional Part: Template Solution: Web Dynpro Component: Application: Group number: WD_04S_UI_IMAGE_DYN WD_04S_UI_IMAGE_DYN ## stands for the two-digit group number WD_04S_UI_IMAGE WD_04S_UI_IMAGE

Developing
3-1 Create a new Web Dynpro Component called

ZWD_##_UI_ELEMENTS. Change the proposed window name to MAIN. 3-2 Create a view called IMAGE_VIEW and navigate to the views Layout tab. Add a Tray UI element to the view. Name it TRAY_1 Define Bomb as the Trays title. (->Text attribute of CAPTION_1) Download the image explosion.gif from Web Dynpro Component WD_04S_UI_IMAGE and upload it to your component. 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. Embed view IMAGE_VIEW into window MAIN. Create the Web Dynpro application ZWD_##_UI_ELEMENTS.

3-3

3-4

3-5

3-6 3-7 4

Optional: Setting image properties programmatically 4-1 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
2 UI Elements Exercise

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 UI element to these context elements. 4-2 Set the image properties SOURCE, TOOLTIP and VISIBLE programmatically in method WDDOINIT of view IMAGE_VIEW.

3 UI Elements Exercise