on 04-14-2014 6:55 AM
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.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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.
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
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
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
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
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
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.
User | Count |
---|---|
88 | |
10 | |
10 | |
9 | |
7 | |
7 | |
6 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.