Question Re: Issue with UI alignment during dynamic programming in Technology Q&A

Issue with UI alignment during dynamic programming

former_member213217 — Mon, 14 Apr 2014 05:55:48 GMT

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:

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.

Re: Issue with UI alignment during dynamic programming

Kiran_Valluru — Mon, 14 Apr 2014 06:11:45 GMT

Hi,

For Check box, give the col span to 2 and for input field, comment the text direction and check. similarly for radio button, comment the text direction and comment the change the colspan and check.

Regards,

Kiran

Re: Issue with UI alignment during dynamic programming

former_member213217 — Mon, 14 Apr 2014 06:29:36 GMT

Hi Kiran,

Thank you for pitching in with your inputs. I was just about to add an update to my initial post... I see that when I comment or change the text_direction (to either inherit/LTR) property of the LABEL the excess spacing issue gets fixed in one way but comes up with a new issue. As how you can see below there is now no extra spacing between the Label & its corresponding UI element but however there is an excess spacing before the LABEL. This is also the same output when I change the colspan property to '2' & comment out the code for assigning the text_direction property.

What's weird is that when I try to design the UI statically it comes up with the colspan as '1' and the text_direction set to "inherit". But this doesn't workout when I try to do it dynamically. Still trying to figure out as to which property am messing up on

Re: Issue with UI alignment during dynamic programming

Kiran_Valluru — Mon, 14 Apr 2014 06:44:39 GMT

Hi,

Try changing the hAlign property to Forced Left ( by keeping the col span of check box to 2) and check. Since you have different methods for creating different UI elements, you couldn't figure out which is causing the issue as each method having different layout assigned!

Regards,

Kiran

Re: Issue with UI alignment during dynamic programming

former_member213217 — Mon, 14 Apr 2014 08:24:44 GMT

Hi Kiran,

Unfortunately the layout still comes up in the same format as my 2nd screenshot. Earlier in the past whenever I got stuck in some issue in designing my layout with the dynamic programming approach I used to try create the layout statically and then try set similar properties dynamically. This approach always used to work well until now

Regards,

Uday

PS: Within each API method I am setting the Layout & LayoutData properties exactly as they were in my Static view design.

Re: Issue with UI alignment during dynamic programming

Former Member — Mon, 14 Apr 2014 09:11:45 GMT

Then what is the issue now, Same approach is not working here. ?

try to use matrix layout all places.

Re: Issue with UI alignment during dynamic programming

ramakrishnappa — Mon, 14 Apr 2014 09:38:18 GMT

Hi Uday,

The main issue here is the width of group is set to 100%. Please do not set the width of group to 100% as this makes the group to stretch 100% area and hence the extra space between the label and input/radio buttons.

If you use transparent container, you can control the width of input elements as required.

Please follow the below steps

Create another method CREATE_transparent_container and place the logic similar to create_tray
Now, all the input elements goes inside the transparent container
Transparent container is placed inside TRAY and you can set the width of transparent container as you required

Please find the below snap shot of some example:

Note: above snap, radio buttons are placed inside transparent container and width is set to 15EX

Hope helps you.

Regards,

Rama

Re: Issue with UI alignment during dynamic programming

Kiran_Valluru — Mon, 14 Apr 2014 10:16:22 GMT

Hi,

Remove the width property for your Group. Also, I see you set padding unnecessarily which is not required. First create a group with required properties and set the layout to all the UI elements uniformly. Then you can adjust the padding/ width if required later on.

Regards,

Kiran

Re: Issue with UI alignment during dynamic programming

former_member213217 — Mon, 14 Apr 2014 10:32:19 GMT

Hi Kiran,

When I remove the WIDTH & PADDING properties the UI does look a bit better as how shown in the picture below:

But then again this isn't that good coz lets say when the user maximizes the browser the UI still contains to occupy the same small portion of the screen. (i.e., maximum width is equal to the Tray's caption) Also notice how the "Review Date" inputfield is not left aligned. Ideally it should have been aligned with the other inputfield.

Regards,

Uday

Re: Issue with UI alignment during dynamic programming

Kiran_Valluru — Mon, 14 Apr 2014 10:44:29 GMT

Hi,

But then again this isn't that good coz lets say when the user maximizes the browser the UI still contains to occupy the same small portion of the screen.

If you want your group to ocupy some space, create a invisible UI element and set the Width to it( in px).

And, I think you have set the hAlign to end of line for the Label 'Review Date'. Set it to 'Begin of Line'

Regards,

Kiran

Re: Issue with UI alignment during dynamic programming

ramakrishnappa — Mon, 14 Apr 2014 13:32:50 GMT

Hi Uday,

As mentioned in my previous reply, I had used transparent container and put the input elements inside it. Also set the group width to 100EX and transparent container to 15EX.

Try to put the elements inside the transparent container and try to adjust the width accordingly.

Regards,

Rama

Re: Issue with UI alignment during dynamic programming

former_member213217 — Tue, 15 Apr 2014 08:46:55 GMT

Hi Kiran & Ramakrishna,

Thanks a lot for your valuable inputs. I have now managed to get the UI into a much better aligned state than in my original output. It now looks as below:

I hadn't set a label for the checkbox & was directly setting the texts to the "Text" property. I have now changed the code to explicitly create & use a different Label UI element for it. I haven't removed the padding/text_direction properties that I was setting earlier nor had to use an InvisibleElement/TransparentContainer UI element. Also am still setting a width of 50% to the Group as the 3rd Tray within the Group has the largest width and if I were to collapse/expand this Tray then the entire width of the Group was toggling between alternative sizes. Am pasting the final version of the code in various methods for your observation.

Regards,

Uday

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                        = '50%' ).

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
                                                                           col_span = '1'
                                                                           h_align = cl_wd_matrix_head_data=>e_h_align-forced_left
                                                                           v_align = cl_wd_matrix_head_data=>e_v_align-top ).

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

cl_wd_flow_data=>new_flow_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
          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_flow_data=>new_flow_data( element = lo_caption ).

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_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-r_pad
                                                                           col_span     = '1'
                                                                           h_align       = cl_wd_matrix_head_data=>e_h_align-forced_left
                                                                           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-forced_left ).

io_tray->add_child( the_child = lo_label ).

io_tray->add_child( the_child = lo_radio_button ).

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
          visible       = iv_visible
     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
                                                                           col_span = '1'
                                                                           h_align = cl_wd_matrix_head_data=>e_h_align-forced_left
                                                                           v_align = cl_wd_matrix_head_data=>e_v_align-top ).

cl_wd_matrix_data=>new_matrix_data( element = lo_input_field
                                                          h_align = cl_wd_matrix_head_data=>e_h_align-forced_left ).

io_tray->add_child( the_child = lo_label ).

io_tray->add_child( the_child = lo_input_field ).

ENDMETHOD.

Creating the Checkbox & its corresponding label:

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
          visible           = iv_visible
     RECEIVING
          control = lo_checkbox.

CALL METHOD cl_wd_label=>new_label
     EXPORTING
          label_for = iv_ui_elem_id
          text = iv_label
          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-r_pad
                                                                           col_span    = '1'
                                                                           h_align       = cl_wd_matrix_head_data=>e_h_align-forced_left
                                                                           v_align       = cl_wd_matrix_head_data=>e_v_align-top ).

cl_wd_matrix_data=>new_matrix_data( element      = lo_checkbox
                                                          cell_design = cl_wd_matrix_head_data=>e_cell_design-padless
                                                          h_align       = cl_wd_matrix_head_data=>e_h_align-forced_left ).

io_tray->add_child( the_child = lo_label ).

io_tray->add_child( the_child = lo_checkbox ).

ENDMETHOD.

Re: Issue with UI alignment during dynamic programming

ramakrishnappa — Tue, 15 Apr 2014 08:49:51 GMT

That's good to hear