SAP Tech Pro

SAP Technical Blog
Topprice Price Comparison

How to use Web Dynpro UI element – “Image” with Static and Dynamic Programming

How to use Web Dynpro UI element – “Image” with Static and Dynamic Programming

This UI element enables us to integrate graphics in our WD application. Same as other UI elements, it has some properties. Hereunder,we show a table with some of the Image UI element properties that can be bound,and the attribute type in case the property is bindable (Table).

Web Dynpro UI element - Image

We create a WD Component, where we can choose among three images and we can manipulate the current image via the data held in the context.The WD component structure is presented in Fig.

WD component structure

Web Dynpro UI element - Image

We import three images in JPG format.As we have mentioned,to import an image into a MIME folder,we have to choose Create Mime Object Import from the contextual menu,shown by right-clicking on the WD component name.

The context node DYNAMIC is Singleton, cardinality 1...1. The attributes WIDTH and HEIGH are STRING type and the attribute BORDER is I type. We use these attributes to manipulate the properties of the Image UI element. For the attributes WIDTH,BORDER and HEIGH, it is defined the data binding to the properties (with the same names) of the UI element Image,Fig.

Context structure and data binding

Web Dynpro UI element - Image

The context node DROPDOWNBYINDEX has the dictionary structure SHSVALSTR2,cardinality 0...n,Singleton.We have defined a data binding between the attribute KEY and the property texts of the dropDownByIndex UI element. The attribute VALUE is used to manipulate the property source of the Image UI element.This property defines the name of the image file shown on the screen.

View Layout structure

Web Dynpro UI element - Image

To populate with values the context attributes of the context node DROPDOWNBYINDEX, we use the supply function method shown in the Listing.

Supply function method


METHOD supply_dropdownbyindex. 

DATA: 

ls_image TYPE wd_this->element_drop down by index,lt_image LIKE TABLE OF ls_image. 

ls_image-key ='Germany'. 

ls_image-value ='deutschland.jpg'. 

APPEND ls_image TO lt_image. 

ls_image-key = 'France'. 

ls_image-value ='france.jpg'. 

APPEND ls_image TO lt_image. 

ls_image-key ='Italy'. 

ls_image-value ='italia.jpg'. 

APPEND ls_image TO lt_image. 

node->bind_table( 

new_items =lt_image 

set_initial_elements = abap_true). 

ENDMETHOD.

Runtime

Web Dynpro UI element - Image

Dynamic Programming

RUNTIME CLASS: CL_WD_IMAGE

Hereunder,we present a table showing the correspondence between the view designer name and the runtime name, with the proper types,in case of dynamic programming of an Image UI element (Table ).

The implementation of a dynamic Image UI element contains the following statements(Listing ):

Dynamic creation of an Image UI element


 data lr_image type ref to cl_wd_image.

 data lr_image type ref to cl_wd_image.

 Ir_image = cl_wd_image=>new_image( id =‘IMG_IMAGE’
 bind_width =‘DYNAMIC.WIDTH’
 bind_height =‘DYNAMIC.HEIGHT’
 bind_border =‘DYNAMIC.BORDER’
 bind_source =‘DROPDOWNBYINDEX.VALUE’).

Add comment

Before Buying, Compare Prices at Topprice.in

Topprice.in