Skip to Content
0
Apr 14, 2014 at 05:55 AM

Issue with UI alignment during dynamic programming

115 Views

Hi Experts,

Am trying to build a Web dynpro application wherein the Web dynpro applications context & layout would be created dynamically based on few custom tables configured by the functional guys. Everything comes up fine but there is a small issue with the UI alignment. It comes up with excess spacing between the label & actual UI element as shown below:

I tried recreating a similar layout statically & comparing the property of each UI alignment with what I was doing dynamically but could not figure out the issue. Please pitch in with your inputs on this. Below is the coding that am using for creating the various individual UI elements:

Creating the outermost Group:

METHOD create_group.


DATA: lo_container TYPE REF TO cl_wd_uielement_container,
lo_caption TYPE REF TO cl_wd_caption,
lo_group TYPE REF TO cl_wd_group.

lo_container ?= wd_this->go_view->get_root_element( ).

cl_wd_matrix_layout=>new_matrix_layout( container = lo_container ).

lo_group = cl_wd_group=>new_group( id = 'GRP1'
has_content_padding = abap_true
width = '100%' ).

lo_group->set_width( value = '100%' ).


cl_wd_flow_layout=>new_flow_layout( container = lo_group
wrapping = abap_true ).

cl_wd_matrix_head_data=>new_matrix_head_data( element = lo_group
cell_design = cl_wd_matrix_head_data=>e_cell_design-r_pad
col_span = '1'
h_align = cl_wd_matrix_head_data=>e_h_align-begin_of_line
v_align = cl_wd_matrix_head_data=>e_v_align-top ).

lo_caption = cl_wd_caption=>new_caption( text = iv_group_title ).

cl_wd_matrix_data=>new_matrix_data( element = lo_caption ).

lo_group->set_header( the_header = lo_caption ).

lo_container->add_child( the_child = lo_group ).

ro_group = lo_group.

ENDMETHOD

.

Creating the Inner Trays:

METHOD create_tray .

DATA lo_caption TYPE REF TO cl_wd_caption.

CALL METHOD cl_wd_tray=>new_tray
EXPORTING
design = cl_wd_tray=>e_design-fill
expanded = iv_tray_expanded
has_content_padding = abap_true
id = iv_tray_id
on_toggle = iv_on_toggle
RECEIVING
control = ro_tray.

cl_wd_matrix_layout=>new_matrix_layout( container = ro_tray ).

cl_wd_flow_data=>new_flow_data( element = ro_tray
cell_design = cl_wd_flow_data=>e_cell_design-padless ).

lo_caption = cl_wd_caption=>new_caption( image_source = IV_IMAGE_SOURCE
image_first = abap_true
text = iv_caption ).

cl_wd_matrix_data=>new_matrix_data( element = lo_caption
cell_design = cl_wd_matrix_data=>e_cell_design-padless
h_align = cl_wd_matrix_data=>e_h_align-begin_of_line ).


ro_tray->set_header( the_header = lo_caption ).

io_group->add_child( the_child = ro_tray ).

ENDMETHOD

Creating Radiobutton & its corresponding label:

METHOD create_radio_button .


DATA: lo_radio_button TYPE REF TO cl_wd_radiobutton_group_by_key,
lo_label TYPE REF TO cl_wd_label.

CALL METHOD cl_wd_radiobutton_group_by_key=>new_radiobutton_group_by_key
EXPORTING
bind_selected_key = iv_selected_key
id = iv_ui_elem_id
state = iv_mandatory
text_direction = cl_wd_radiobutton_group_by_key=>e_text_direction-rtl
text_wrapping = abap_true
visible = iv_visible
RECEIVING
control = lo_radio_button.

CALL METHOD cl_wd_label=>new_label
EXPORTING
label_for = iv_ui_elem_id
text = iv_caption
text_direction = cl_wd_label=>e_text_direction-rtl
wrapping = abap_true
RECEIVING
control = lo_label.

cl_wd_matrix_head_data=>new_matrix_head_data( element = lo_label
cell_design = cl_wd_matrix_head_data=>e_cell_design-padless
col_span = '1'
h_align = cl_wd_matrix_head_data=>e_h_align-begin_of_line
v_align = cl_wd_matrix_head_data=>e_v_align-top ).

cl_wd_matrix_data=>new_matrix_data( element = lo_radio_button
cell_design = cl_wd_matrix_head_data=>e_cell_design-padless
h_align = cl_wd_matrix_head_data=>e_h_align-begin_of_line ).

io_tray->add_child( the_child = lo_label ).

io_tray->add_child( the_child = lo_radio_button ).

ENDMETHOD.

Creating the Checkbox:

METHOD create_check_box .

DATA: lo_checkbox TYPE REF TO cl_wd_checkbox,
lo_label TYPE REF TO cl_wd_label.

CALL METHOD cl_wd_checkbox=>new_checkbox
EXPORTING
bind_checked = iv_bind_checked
id = iv_ui_elem_id
state = iv_mandatory
text = iv_label
visible = iv_visible
RECEIVING
control = lo_checkbox.

cl_wd_matrix_head_data=>new_matrix_head_data( element = lo_checkbox
cell_design = cl_wd_matrix_head_data=>e_cell_design-padless
col_span = '1'
h_align = cl_wd_matrix_head_data=>e_h_align-begin_of_line
v_align = cl_wd_matrix_head_data=>e_v_align-top ).

io_tray->add_child( the_child = lo_checkbox ).

ENDMETHOD.

Creationg Inputfield & its corresponding label:

METHOD create_input_field .


DATA: lo_input_field TYPE REF TO cl_wd_input_field,
lo_label TYPE REF TO cl_wd_label.

CALL METHOD cl_wd_input_field=>new_input_field
EXPORTING
bind_value = iv_bind_value
id = iv_ui_elem_id
state = iv_mandatory
RECEIVING
control = lo_input_field.

CALL METHOD cl_wd_label=>new_label
EXPORTING
label_for = iv_ui_elem_id
text = iv_caption
text_direction = cl_wd_label=>e_text_direction-rtl
wrapping = abap_true
RECEIVING
control = lo_label.

cl_wd_matrix_head_data=>new_matrix_head_data( element = lo_label
cell_design = cl_wd_matrix_head_data=>e_cell_design-padless
col_span = '1'
h_align = cl_wd_matrix_head_data=>e_h_align-begin_of_line
v_align = cl_wd_matrix_head_data=>e_v_align-top ).

cl_wd_matrix_data=>new_matrix_data( element = lo_input_field
cell_design = cl_wd_matrix_head_data=>e_cell_design-padless
h_align = cl_wd_matrix_head_data=>e_h_align-begin_of_line ).

io_tray->add_child( the_child = lo_label ).

io_tray->add_child( the_child = lo_input_field ).

ENDMETHOD.

Attachments

excess spacing.png (20.5 kB)