ABAP Webdynpro Interface View的用法

If the component usage is not defined at design time, it is not possible to embed an interface view of this component usage into a ViewUIElementContainer of another view. It is also not possible to define a navigation link connecting any outbound plug of an existing view to an inbound plug of this interface view at design time. In this case methods of the Web Dynpro API have to be applied.

I will use the example in the following two blogs to demonstrate the trick.

(1) Step by Step to create UI elements and context node attribute in the runtime
(2) Step by step to use Component usage clone

after you specify the number of rows you want to generate and click the create button, all UI elements and context node attribute will be generated in the runtime. The UI elements marked in blue come from the interface view of another component, and this view embedding logic is also done dynamically in the runtime.

Step1

Draw a simple caption in component ZDYNAMICUSAGE which will be consumed by host component ZDYNAMIC.

Step2

The layout of main view in component ZDYNAMIC remains unchanged.
Create an outbound plug, which will be used in API later.

Create a new attribute in view controller to store all component usage name, both static one and the dynamical one cloned from the static one.

Step3

In method GET_VALUE_BY_INDEX, store the component usage of both static and dynamic one into the attribute GT_USAGE_NAME created in step 2.

DATA(lo_static_com_usage) = wd_this->wd_cpuse_zclone_example( ).

  DATA: lo_generic_usage TYPE REF TO if_wd_component_usage,
        lo_interface_control TYPE REF TO ZIWCI_DYNAMICUSAGE.

  READ TABLE wd_this->gt_cmp_usages ASSIGNING FIELD-SYMBOL(<usage>) INDEX iv_index.
  CASE iv_index.
    WHEN 1.
      IF lo_static_com_usage->has_active_component( ) IS INITIAL.
         lo_static_com_usage->create_component( ).
      ENDIF.
APPEND 'ZCLONE_EXAMPLE' TO wd_this->gt_usage_name.
      lo_generic_usage = lo_static_com_usage.

    WHEN OTHERS.
      READ TABLE wd_this->gt_cmp_usages ASSIGNING FIELD-SYMBOL(<dyn_usage>) INDEX iv_index.
      IF sy-subrc <> 0.
         DATA(lv_usage_name) = 'DYNAMIC_USAGE' && sy-index.
         data(lo_dyn_usage) = lo_static_com_usage->create_comp_usage_of_same_type( name = lv_usage_name ).
         APPEND lo_dyn_usage TO wd_this->gt_cmp_usages.
  APPEND lv_usage_name TO wd_this->gt_usage_name.
      ENDIF.
      IF lo_dyn_usage->has_active_component( ) IS INITIAL.
         lo_dyn_usage->create_component( ).
      ENDIF.
      lo_generic_usage = lo_dyn_usage.
   ENDCASE.

   lo_interface_control ?= lo_generic_usage->get_interface_controller( ).

   rv_output = lo_interface_control->get_field_value( iv_index ).
endmethod.​

Step4

In method ONACTIONCREATE, now also create separate view container UIElement instance for each component usage. That view container will be used to embed
the interface view exposed by component ZDYNAMICUSAGE. Then we use API prepare_dynamic_navigation to create a navigation link dynamically, from host view in component ZDYNAMIC to the interface view of component ZDYNAMICUSAGE. The component usage name stored in attribute gt_usage_name in step 3 will be used during API call. Finally fire the outbound plug of MAIN view to make the embedded view displayed in UI.

method ONACTIONCREATE .

CONSTANTS: cv_label TYPE string VALUE 'LABEL',
cv_field TYPE string VALUE 'FIELD',
    cv_container TYPE string VALUE 'EMBEDDED',
cv_bind_text TYPE string VALUE 'DYNAMIC.VALUE'.
DATA: lv_count type i,
lo_container type ref to cl_Wd_uielement_container.
wd_context->get_attribute( EXPORTING name = 'NUMBER' IMPORTING value = lv_count ).

CHECK lv_count > 0.
create_context( lv_count ).
DATA(lo_root) = wd_this->mr_view->get_element( 'DYNAMICUI' ).
lo_container ?= lo_root.
lo_container->remove_all_children( ).

DO lv_count TIMES.
data(lv_field_id) = cv_field && sy-index.
data(lv_label_id) = cv_label && sy-index.
data(lv_bind_path) = cv_bind_text && sy-index.
DATA(lo_text_view) = cl_wd_text_view=>new_text_view( id = lv_field_id bind_text = lv_bind_path ).
DATA(lo_label) = cl_wd_label=>new_label( id = lv_label_id label_for = lo_text_view->id text = lv_label_id ).
CL_WD_ROW_HEAD_DATA=>new_row_head_data( element = lo_label ).
cl_wd_row_data=>new_row_data( element = lo_text_view ).

DATA(lv_container_id) = cv_container && sy-index.
data(lo_view_cont) = CL_WD_VIEW_CONTAINER_UIELEMENT=>new_view_container_uielement( id = lv_container_id ).
    CL_WD_ROW_HEAD_DATA=>new_row_head_data( element = lo_view_cont ).
lo_container->add_child( the_child = lo_label ).
lo_container->add_child( the_child = lo_text_view ).
    lo_container->add_child( the_child = lo_view_cont ).

ENDDO.

DATA: lr_api_main_view TYPE REF TO if_wD_view_controller.

lr_api_main_view = wd_this->wd_get_api( ).

DO lv_count TIMES.
  READ TABLE wd_this->gt_usage_name ASSIGNING FIELD-SYMBOL(<usage_name>) INDEX sy-index.
DATA(lv_position) = 'MAIN/' && cv_container && sy-index.
lr_api_main_view->prepare_dynamic_navigation(
       source_window_name = 'ZDYNAMIC'
       source_vusage_name = 'MAIN_USAGE_0'
       source_plug_name   = 'VIEW_TO_USAGE'
       target_component_name = 'ZDYNAMICUSAGE'
       target_component_usage = <usage_name>
       target_view_name       = 'ZDYNAMICUSAGE'
       target_plug_name       = 'DEFAULT'
       target_embedding_position = lv_position ).

    wd_this->fire_view_to_usage_plg( ).
ENDDO.
endmethod.

How to find the value of source_vusage_name?

要获取更多Jerry的原创文章，请关注公众号"汪子熙":