Interview Questions

User Interface Elements (UI elements) Static and Dynamic Programming

The UI elements we can use in the Web Dynpro ABAP are divided in various categories.In this chapter, we are going to present some of the UI elements, included in the categories:action, selection,layout, complex, graphic and integration. Each UI element will be illustrated by an example,showing the modality of using it either in static or in dynamic variant.

A UI element is a User Interface element we use to create a screen for the end user. The UI Elements are grouped in categories we can access via the View Layout,and each UI Element has some properties, as follows

  • Common with other UI elements,inherited from superclasses
  • Specific only for an UI element
  • For example, the following properties are inherited:
  • Tooltip: Shows a quick info text when the user passes the mouse pointer over the UI element
  • Visible: Determined if an UI element is visible in the screen or not
  • Enabled: Specified if the UI element is active or inactive

By using the Class Builder transaction SE24, we can see different classes along with their inheritances and attributes. For example, the class CL_WD_UIELEMENT is the super class of all the UI elements we use in Web Dynpro ABAP. Being super class, this class has CL_WD_VIEW_ELEMENT. presents the tooltip,visible and enable properties for an InputField UI element.

Most of the UI elements properties can be bound to different context nodes or attributes.In this way, we can manipulate the UI elements via the data held in the context. Each bindable property of a UI element has a certain type. For example,the enabled property can be bound to an attribute of WDY_BOOLEAN type.

when this attribute is set ABAP_TRUE, the respective UI element is active.When this attribute is set ABAP_FALSE, the respective UI element is inactive.

The UI elements, along with the aggregations, determine the appearance and behaviour of the UI elements on the screen. The Web Dynpro UI elements are divided in categories. Hereunder, we present some of these categories.

Graphic

This category contains UI elements that help us to work with graphics maps,etc. Hereunder,we present some of the UI Elements included in this category.

Image

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.

Some of the Image UI element properties

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.

WD component structure

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.

Context structure and data binding

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

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

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.

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

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’).

BusinessGraphics

This UI element enables us to use several chart types in our WD application.The Internet Graphics Service (IGS) helps us to work with this UI element,being able to show graphics in a browser.

The chart engine is a C++ library that supports chart types, from simple charts (e.g. bars or pie) to complex charts(e.g. gantt).We create a WD Component with the structure presented in Fig. By using the BusinessGraphics UI element,we show the graphical illustration of the data stored in our database table YPERSON.

WD component structure

Context structure

The node person has the dictionary structure YPERSON, cardinality 1...n, Singleton. From this structure,we choose only LASTNAME and AGE. We have used a chart of columns type,to graphically display the data contained by the columns of our database table.

View Layout

By using the supply function, we populate the node PERSON with data from the database table YPERSON. We select all the data from the two columns LASTNAME and AGE.

Runtime

To perform customizing settings for business graphics, we have to use the SAP Chart Designer. We access this tool by double-clicking on the chart picture, in the view layout. Now,the SAP Chart Designer is open and we can customise our chart.

Chart designer

We save the settings we made; the Framework generates a MIME file in XML format and sets the property customizing of the BusinessGraphics UI element.

Saving the customizing in a XML file

Runtime result

Dynamic Programming

RUNTIME CLASS: CL_WD_BUSINESS_GRAPHICS

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 a BusinessGraphics UI element (Table). For a BusinessGra . The Category object has the CL_WD_CATEGORY runtime class.The Series can be Series,runtime
CL_WD_SERIES or SimpleSeries,runtime class CL_WD_SIMPLE_SERIES

The implementation of a dynamic BusinessGraphics UI element(with a SimpleSeries and a Category)contains the following statements.

Dynamic creation of a BusinessGraphics UI element

 METHOD wddomodifyview.
  DATA lr_flow_data TYPE REF TO cl_wd_flow_data.
 DATA lr_container TYPE REF TO cl_wd_uielement_container.
 DATA lr_businessgraphics TYPE REF TO cl_wd_business_graphics.
 DATA lr_category TYPE REF TO cl_wd_category.
 DATA lr_simpleseries TYPE REF TO cl_wd_simple_series.
 IF first_time EQ abap_true.
 lr_container ?= view->get_element('ROOTUIELEMENTCONTAINER').
 lr_businessgraphics = cl_wd_business_graphics=>new_business_graphics(id = 'BGR'
 chart_type = cl_wd_business_graphics=> e_
 chart_type-columns
 dimension = cl_wd_business_graphics=>e_dimension-two
 height = 300
 width = 300
 bind_series_source = 'PERSON'
 customizing = 'D57PJD6VB3MQAZR78XQHWTMIT.xml'
 ).
 lr_flow_data = cl_wd_flow_data=>
 new_flow_data(element = lr_businessgraphics).
 lr_container->add_child(lr_businessgraphics).
 lr_category ?= cl_wd_category=>new_category(id = 'CATEGORY'
 bind_description = 'PERSON.LASTNAME'
 tooltip ='Candidates last name'
 ).
 lr_simpleseries ?=  cl_wd_simple_series=>
 new_simple_series(id ='SIMPLESERIES'
 label ='Candidate Age'
 bind_value ='PERSON.AGE'
 tooltip ='Candidate Age'
 ).
 lr_businessgraphics->set_category(the_category = lr_category).
 lr_businessgraphics->add_series(the_series = lr_simpleseries).
 ENDIF.
 ENDMETHOD.

Pragna Meter
Next Chapter  
e-University Search
Related Jobs