Layout UI Elements

The following section details and describes the Layout of the UI elements. Here, we are going to present the various types of existent Layouts and the modality to use them, either in static or in dynamic variant. The layout helps us to manage the arrangement of the UI elements within their parent container.

All the UI elements within a view are hierarchy arranged. The node ROOTUIELEMENTCONTAINER is the root of this hierarchy and all the UI elements. within a view are children of this root container. It is of TransparentContainer type and has initially assigned to it the FlowLayout layout. In our first example, we have seen that we have the possibility to change it from ransparentContainer into another UI element, in case this one doesn’t have any children. Table shows the layout UI elements that are available for arranging the UI elements in a view, and the corresponding LayoutData. The layout is the abstract base class of all the layout UI elements within Web Dynpro and has the runtime class CL_WD_LAYOUT.

Layout and LayoutData UI element

The layout data of an UI element are used to specify the position within a container and have the runtime class CL_WD_LAYOUT_DATA.

Flow Layout

If we use the FlowLayout layout, all the UI elements are displayed in a line. Byusing the property WRAPPING of the container into which the UI elements are going to be integrated, we can manipulate the modality of putting these UI elements on screen. In case this property is ABAP_TRUE, the UI elements that don’t enter in the first line are arranged bellow, in another line, to automatically adapt to the client window. In case of ABAP_FALSE, the UI elements are not automatically adapted to the client window.

For a better understanding, we create a Registration Form with three fields: first name, last name and date of birth. The WD component structure and the view layout are presented.

WD component structure and view layout

In View context, we create the same well-known STUDENT contextnode with the dictionary structure YSTR_PERSON.

ROOTUIELEMENTCONTAINER and Group UI element are both UI elements of container type, which have the FlowLayout layout in the default mode. Each UI element reference to a LayoutData object and every UI element inserted within a container must have the data layout that matches the respective container.

Layout and layout data

Runtime: wrapping ABAP_TRUE

As we can see, the UI elements are arranged in a line. Because the attributes of STUDENT context node are empty, the InputField’s UI elements bound to these attributes are not shown. After the user presses the Save Button, we show all the data that the user has entered in the InputField UI elements. In this case, all the UI elements don’t enter in a line anymore, because the client window is too small for that. The elements that don’t enter in the first line are arranged below in another line, to automatically adapt to the client window.

We can see that, for the layout data, we can set two properties: cellDesign that specifies the distance between rows and vGutter that specifies the additional distance to the left edge. The default of these values is cellDesign – padless (there is no distance between the row and the edges) and vGutter – none (no additional distance). In case the wrapping property is ABAP_FALSE, the UI elements that don’t enter in the first line are not arranged below in another line, they are not visible anymore.

Runtime: wrapping ABAP_FALSE

For a dynamic manipulation, we can use the runtime class CL_WD_FLOW_DATA to embedding the UI elements into the container that has a FlowLayout layout.An example of using this class we have seen in the wdDoModifyView example.

GridLayout

f we use the GridLayout layout, all the UI elements are arranged in container in a tabular grid with a fixed number of columns. We can specify the number of columns in the grid by usingthe property colCount. The number of rows depends on the number of the UI elements added to the container.We create the same example, but in this case we use GridLayout layout for the Group container.

Group container: GridLayout

We arrange all the UI elements from the GRP Group UI element in two columns.In this case, at runtime we have: As we can see,the number of columns is two and the number of rows is five.We want the Save button to remain alone in its row. To do this, we have to use an InvisibleElement.

Runtime

This UI element is an invisible element on the screen and can be used to fill an empty cell in the GridLayout.

InvisibleElement and GridLayout

For a dynamic manipulation, we can use the runtime class CL_WD_GRID_ DATA to embedding the UI elements into the GRP container that has a GridLayout layout.

UI elements into the GRP container that has a GridLayout layout

 METHOD wddomodifyview.
 DATA lv_bind_attribute TYPE string.
 DATA lr_input_field TYPE REF TO cl_wd_input_field.
 DATA lr_container TYPE REF TO cl_wd_group.
 DATA lr_label TYPE REF TO cl_wd_label.
 DATA lr_grid_data TYPE REF TO cl_wd_grid_data.
 IF first_time EQ abap_true.
 lr_label = cl_wd_label=>new_label(id ='FIRSTNAME_LABEL' label_for ='FIRSTNAME' ).
 lr_grid_data = cl_wd_grid_data=>new_grid_data(element = lr_label).
 lr_container ?= view->get_element('GRP').
 lr_container->add_child(index = 1 the_child = lr_label).
 lv_bind_attribute = 'STUDENT.FIRSTNAME'.
 lr_input_field = cl_wd_input_field=>new_input_field(
id ='FIRSTNAME' bind_value = lv_bind_attribute).
 lr_grid_data = cl_wd_grid_data=>new_grid_data(element = lr_input_field).
 lr_container ?= view->get_element('GRP').
 lr_container->add_child(index = 2 the_child = lr_input_field ).
 ENDIF.
  ENDMETHOD.

In this example,we dynamically created the first two UI elements: InputField for the user first name and the corresponding label. To embed these UI elements into the GRP container (GridLayout),we use the proper GridData layout.

MatrixLayout

If we use the MatrixLayout, all the UI elements from a container are arranged in columns. With MatrixLayout, we can produce a grid with a variable number of columns per row. Each UI element inserted in a container that has the MatrixLayout layout will contain either a MatrixData object or a MatrixHeadData object.

Layout and layout data

An UI element that has MatrixHeadData data layout starts a new row and the UI elements that have MatrixData data layout are shown in the same row, until an UI element is set MatrixHeadData and a new row is created.

UI elements arranged in a container by using a MatrixLayout layout

For a dynamic manipulation, we can use the runtime class CL_WD_MATRIX_ HEAD_DATA and CL_WD_MATRIX_DATA to embed the UI elements into the GRP container that has a MatrixLayout layout .

GRP container that has a MatrixLayout layout

 METHOD wddomodifyview.
 DATA lv_bind_attribute TYPE string.
 DATA lr_input_field TYPE REF TO cl_wd_input_field.
 DATA lr_container TYPE REF TO cl_wd_group.
 DATA lr_label TYPE REF TO cl_wd_label.
 DATA lr_matrix_head_data TYPE REF TO cl_wd_matrix_head_data.
 DATA lr_matrix_data TYPE REF TO cl_wd_matrix_data.
 IF first_time EQ abap_true.
 lr_label = cl_wd_label=>new_label(id ='FIRSTNAME_LABEL'
 label_for ='FIRSTNAME').
 lr_matrix_head_data =
 cl_wd_matrix_head_data=>new_matrix_head_data(element = lr_label).
 lr_container ?= view->get_element('GRP').
 lr_container->add_child(index = 1 the_child = lr_label).
 lv_bind_attribute ='STUDENT.FIRSTNAME'.
 lr_input_field = cl_wd_input_field=>new_input_field(id ='FIRSTNAME'
 bind_value = lv_bind_attribute).
 lr_matrix_data = cl_wd_matrix_data=>new_matrix_data(element =
 lr_input_field).
 lr_container ?= view->get_element('GRP').
 lr_container->add_child(index = 2 the_child = lr_input_field).
 ENDIF.
 ENDMETHOD.

RowLayout

If we use RowLayout, all the UI elements from a container are arranged into horizontal rows. Each UI element inserted in a container that has the RowLayout layout will contain either a RowData object or a RowHeadData object.

Layout and layout data

This kind of layout is helpful when we want to arrange our UI elements into horizontal rows,but where we don’t need a vertical alignment between the resulting columns..

UI elements arranged in a container by using a RowLayout layout

For a dynamic manipulation, we can use the runtime class CL_WD_ROW_ HEAD_DATA and CL_WD_ROW_DATA to embed the UI elements into the GRP container that has a RowLayout layout..

GRP container that has a RowLayout layout

 METHOD wddomodifyview.
 DATA lv_bind_attribute TYPE string.
 DATA lr_input_field TYPE REF TO cl_wd_input_field.
 DATA lr_container TYPE REF TO cl_wd_group.
 DATA lr_label TYPE REF TO cl_wd_label.
 DATA lr_row_head_data TYPE REF TO cl_wd_row_head_data.
 DATA lr_row_data TYPE REF TO cl_wd_row_data.
 IF first_time EQ abap_true.
 lr_label = cl_wd_label=>new_label(id ='FIRSTNAME_LABEL'
 label_for = 'FIRSTNAME').
 lr_row_head_data = cl_wd_row_head_data = >new_row_head_data(element = lr_label).
 lr_container ?= view->get_element('GRP').
 lr_container->add_child(index = 1
 the_child = lr_label).
 lv_bind_attribute ='STUDENT.FIRSTNAME'.
 lr_input_field = cl_wd_input_field= new_input_field(id ='FIRSTNAME'
 bind_value = lv_bind_attribute).
 lr_row_data = cl_wd_row_data=>new_row_data(element =lr_input_field).
 lr_container ?= view->get_element('GRP').
 lr_container->add_child(index = 2 the_child = lr_input_field).
 ENDIF.
 ENDMETHOD.