Google+ Facebook Twitter MySpace SC

Friday, August 24, 2012

User Interface Elements (UI elements) Static and Dynamic Programming-part 1


User Interface Elements (UI elements) Static and Dynamic Programming-part 1


The UI elements we can use in the Web Dynpro ABAP are divided in various categories.In this chapter, we are going to present some of the UI elements, included in the categories:action, selection,layout, complex, graphic and integration. Each UI element will be illustrated by an example,showing the modality of using it either in static or in dynamic variant.
A UI element is a User Interface element we use to create a screen for the end user. The UI Elements are grouped in categories we can access via the View Layout,and each UI Element has some properties, as follows
  • Common with other UI elements,inherited from superclasses
  • Specific only for an UI element
  • For example, the following properties are inherited:
  • Tooltip: Shows a quick info text when the user passes the mouse pointer over the UI element
  • Visible: Determined if an UI element is visible in the screen or not
  • Enabled: Specified if the UI element is active or inactive
  •  
By using the Class Builder transaction SE24, we can see different classes along with their inheritances and attributes. For example, the class CL_WD_UIELEMENT is the super class of all the UI elements we use in Web Dynpro ABAP. Being super class, this class has CL_WD_VIEW_ELEMENT. presents the tooltip,visible and enable properties for an InputField UI element.
Most of the UI elements properties can be bound to different context nodes or attributes.In this way, we can manipulate the UI elements via the data held in the context. Each bindable property of a UI element has a certain type. For example,the enabled property can be bound to an attribute of WDY_BOOLEAN type.
when this attribute is set ABAP_TRUE, the respective UI element is active.When this attribute is set ABAP_FALSE, the respective UI element is inactive.
The UI elements, along with the aggregations, determine the appearance and behaviour of the UI elements on the screen. The Web Dynpro UI elements are divided in categories. Hereunder, we present some of these categories.
Graphic
This category contains UI elements that help us to work with graphics maps,etc. Hereunder,we present some of the UI Elements included in this category.
Image
This UI element enables us to integrate graphics in our WD application. Same as other UI elements, it has some properties. Hereunder,we show a table with some of the Image UI element properties that can be bound,and the attribute type in case the property is bindable.
Some of the Image UI element properties
We create a WD Component, where we can choose among three images and we can manipulate the current image via the data held in the context.The WD component structure is presented.
WD component structure
We import three images in JPG format.As we have mentioned,to import an image into a MIME folder,we have to choose Create Mime Object Import from the contextual menu,shown by right-clicking on the WD component name.
The context node DYNAMIC is Singleton, cardinality 1...1. The attributes WIDTH and HEIGH are STRING type and the attribute BORDER is I type. We use these attributes to manipulate the properties of the Image UI element. For the attributes WIDTH,BORDER and HEIGH, it is defined the data binding to the properties (with the same names) of the UI element Image.
Context structure and data binding
The context node DROPDOWNBYINDEX has the dictionary structure SHSVALSTR2,cardinality 0...n,Singleton.We have defined a data binding between the attribute KEY and the property texts of the dropDownByIndex UI element. The attribute VALUE is used to manipulate the property source of the Image UI element.This property defines the name of the image file shown on the screen.
View Layout structure
To populate with values the context attributes of the context node DROPDOWNBYINDEX, we use the supply function method shown in the Listing.
Supply function method
 METHOD supply_dropdownbyindex.
 DATA:
 ls_image TYPE wd_this->element_drop down by index,lt_image LIKE TABLE OF ls_image.
 ls_image-key ='Germany'.
 ls_image-value ='deutschland.jpg'.
 APPEND ls_image TO lt_image.
 ls_image-key = 'France'.
 ls_image-value ='france.jpg'.
 APPEND ls_image TO lt_image.
 ls_image-key ='Italy'.
 ls_image-value ='italia.jpg'.
 APPEND ls_image TO lt_image.
 node->bind_table(
 new_items =lt_image
 set_initial_elements = abap_true).
 ENDMETHOD.
Runtime
Dynamic Programming
RUNTIME CLASS: CL_WD_IMAGE
Hereunder,we present a table showing the correspondence between the view designer name and the runtime name, with the proper types,in case of dynamic programming of an Image UI element.
The implementation of a dynamic Image UI element contains the following statements:
Dynamic creation of an Image UI element
 data lr_image type ref to cl_wd_image.
 data lr_image type ref to cl_wd_image.
 Ir_image = cl_wd_image=>new_image( id =‘IMG_IMAGE’
 bind_width =‘DYNAMIC.WIDTH’
 bind_height =‘DYNAMIC.HEIGHT’
 bind_border =‘DYNAMIC.BORDER’
 bind_source =‘DROPDOWNBYINDEX.VALUE’).
BusinessGraphics
This UI element enables us to use several chart types in our WD application.The Internet Graphics Service (IGS) helps us to work with this UI element,being able to show graphics in a browser.
The chart engine is a C++ library that supports chart types, from simple charts (e.g. bars or pie) to complex charts(e.g. gantt).We create a WD Component with the structure presented in Fig. By using the BusinessGraphics UI element,we show the graphical illustration of the data stored in our database table YPERSON.
WD component structure
Context structure
The node person has the dictionary structure YPERSON, cardinality 1...n, Singleton. From this structure,we choose only LASTNAME and AGE. We have used a chart of columns type,to graphically display the data contained by the columns of our database table.
View Layout
By using the supply function, we populate the node PERSON with data from the database table YPERSON. We select all the data from the two columns LASTNAME and AGE.
Runtime
To perform customizing settings for business graphics, we have to use the SAP Chart Designer. We access this tool by double-clicking on the chart picture, in the view layout. Now,the SAP Chart Designer is open and we can customise our chart.
Chart designer
We save the settings we made; the Framework generates a MIME file in XML format and sets the property customizing of the BusinessGraphics UI element.
Saving the customizing in a XML file
Runtime result
Dynamic Programming
RUNTIME CLASS: CL_WD_BUSINESS_GRAPHICS
Hereunder,we present a table showing the correspondence between the view designer name and the runtime name, with the proper types,in case of dynamic programming of a BusinessGraphics UI element (Table). For a BusinessGra . The Category object has the CL_WD_CATEGORY runtime class.The Series can be Series,runtime
CL_WD_SERIES or SimpleSeries,runtime class CL_WD_SIMPLE_SERIES
The implementation of a dynamic BusinessGraphics UI element(with a SimpleSeries and a Category)contains the following statements.
Dynamic creation of a BusinessGraphics UI element
 METHOD wddomodifyview.
  DATA lr_flow_data TYPE REF TO cl_wd_flow_data.
 DATA lr_container TYPE REF TO cl_wd_uielement_container.
 DATA lr_businessgraphics TYPE REF TO cl_wd_business_graphics.
 DATA lr_category TYPE REF TO cl_wd_category.
 DATA lr_simpleseries TYPE REF TO cl_wd_simple_series.
 IF first_time EQ abap_true.
 lr_container ?= view->get_element('ROOTUIELEMENTCONTAINER').
 lr_businessgraphics = cl_wd_business_graphics=>new_business_graphics(id = 'BGR'
 chart_type = cl_wd_business_graphics=> e_
 chart_type-columns
 dimension = cl_wd_business_graphics=>e_dimension-two
 height = 300
 width = 300
 bind_series_source = 'PERSON'
 customizing = 'D57PJD6VB3MQAZR78XQHWTMIT.xml'
 ).
 lr_flow_data = cl_wd_flow_data=>
 new_flow_data(element = lr_businessgraphics).
 lr_container->add_child(lr_businessgraphics).
 lr_category ?= cl_wd_category=>new_category(id = 'CATEGORY'
 bind_description = 'PERSON.LASTNAME'
 tooltip ='Candidates last name'
 ).
 lr_simpleseries ?=  cl_wd_simple_series=>
 new_simple_series(id ='SIMPLESERIES'
 label ='Candidate Age'
 bind_value ='PERSON.AGE'
 tooltip ='Candidate Age'
 ).
 lr_businessgraphics->set_category(the_category = lr_category).
 lr_businessgraphics->add_series(the_series = lr_simpleseries).
 ENDIF.
 ENDMETHOD.
Action
The UI elements that contain an action are included in this category.Some of these UI elements we have already used (Button, LinkToAction).
Timed Trigger
This UI element triggers automatically and periodically an event.To specify the periodicity,we have to use its delay property. As we have mentioned above, most of the UI element properties can be bound. Hereunder, we show a table with some of the TimedTrigger properties that can be bound and the attribute type in case the property is bindable
Some of TimedTrigger UI element properties

WD component
At every 5 s, we trigger an event that uses a Function Module to generate a random number under 1,000.In context view, we create a node named COUNTER,cardinality 1...1,Singleton that has an attribute COUNTER_TT of i type.
View layout
 
We have used an action named TRIGGER to specify the action to be triggered after the specified delay 5.
 METHOD onactiontrigger.
 DATA lr_node TYPE REF TO if_wd_context_node.
 DATA ls_data TYPE wd_this->element_counter.
 DATA lv_step TYPE i.
 lr_node = wd_context->get_child_node('COUNTER').
 CALL FUNCTION 'GENERAL_GET_RANDOM_INT'
 EXPORTING
 range = 1000
 IMPORTING
 random = lv_step.
 ls_data-counter_tt = lv_step.
 lr_node->set_static_attributes(ls_data).
 ENDMETHOD.
The Function Module GENERAL_GET_RANDOM_INT has an import parameter named RANGE of i type and an exporting parameter named RANDOM of i type. This function returns the random value with 0(RANDOM)(RANGE) At runtime.
runtime fig
Dynamic Programming
RUNTIME CLASS: CL_WD_TIMED_TRIGGER
As we have seen,by using the wdDoModifyView( )Hook method we can dynamically create an UI element. The same properties, events and aggregations as in the View Designer are available. Hereunder,we present a table showing the correspondence between the view designer name and the runtime name, with the proper types,in case of dynamic programming of a TimedTrigger UI element .
Dynamic programming
The implementation of a dynamic TimedTrigger UI element contains the following statements.
 DATA lr_timed_trigger TYPE REF TO cl_wd_timed_trigger.
  lr_timed_trigger = cl_wd_timed_trigger=>
 new_timed_trigger(id ='TIMED_TRIGGER'delay = 5 on_action ='TRIGGER').
ButtonChoice
We can use this UI element to choose among the various options offered by the menu. Hereunder, we present a list with some of the ButtonChoice properties that can be bound, and the attribute type in case the property is bindable.
Some of the ButtonChoice UI element properties
We create aWDapplication, where we use the ButtonChoice UI element to offer to the end user a menu list with two options: power and divide. To realise these calculations, we have used the methods of the class CL_FOEV_BUILTINS.As we can see in Fig.this class has many calculation methods,from the PLUS method (that performs a simple addition) to functions,in order to obtain the Integer Part or Hyperbola Sinus.
Class CL_FOEV_BUILTINS
The structure of the POWER method
This method has two importing parameters, named IM_ARG1 and IM_ARG2, and an exporting parameter, named EX_RESULT, of float type. The method DIVIDE has the same parameters.
For this scope, we create our context node named CALCULATE, with the context attributes ARG1 of f type, ARG2 of f type and RESULT of f type, required to perform the calculations and to holdthe result.The WD component structure and the view context structure are presented.
WD component structure and view context structure
The View layout
In the ButtonChoice UI element, we insert two options: menuactionitem1 and menuactionitem2.For the two created options, we set actions(divide and power), and we use the hotkey property to offer to the end user the capability to press the respective key combination to trigger the associated event handler method.
When the user interacts the first time with the ButtonChoice UI element,an action can be selected,and the Framework triggers the proper event handler method. The last selected action remains on the ButtonChoice UI element after the action has been executed. This behaviour is possible through the property repeat SelectedAction.
Some of the ButtonChoice UI element properties
The Framework triggers the event handler method onactiondivide when the user clicks the respective choice option button or he presses the CTRL_D key combination. Listing shows the coding of this method.
 METHOD onactiondivide.
 DATA lr_oref TYPE REF TO cx_foev_error_in_function.
 DATA ls_calculate TYPE wd_this->element_calculate.
 DATA lv_arg1 LIKE ls_calculate-arg1.
 DATA lv_arg2 LIKE ls_calculate-arg2.
 DATA lv_result LIKE ls_calculate-result.
 wd_this->attribute_get(IMPORTING p_arg1 = lv_arg1
 p_arg2 = lv_arg2).
 TRY.
 cl_foev_builtins=>divide(EXPORTING im_arg1 = lv_arg1
 im_arg2 = lv_arg2
 IMPORTING ex_result = lv_result).
 CATCH cx_foev_error_in_function INTO lr_oref.
 ENDTRY.
 wd_this->attribute_set(EXPORTING p_result = lv_result).
 ENDMETHOD.
As we can see, to read the context attributes ATR1 and ATR2, we use the user defined method named ATTRIBUTE_GET that has two exporting parameters.
To pass the result of the division calculation into the context attribute RESULT, we have used the user defined method ATTRIBUTE_SET that has an importing parameter
User defined method required to read the context attributes
User defined method required to populate the RESULT attribute
Runtime for the Divide operation
To rise to power a number (number1 risen to number2), the Framework triggers the event handler method onactionpower (Listing).
 METHOD onactionpower.
 …………..
 TRY.
 cl_foev_builtins=power(EXPORTING im_arg1 =
 lv_arg1 im_arg2 = lv_arg2   IMPORTING ex_result = lv_result).
 CATCH cx_foev_error_in_function INTO lr_oref.
 ENDTRY.
 ENDMETHOD.
We have used the static method POWER, of the calculation class CL_FOEV_BUILTINS, to perform the number1 risen to number2 operation.To read the context attributes ATR1 and ATR2, we call the same user defined method ATTRIBUTE_ GET; to pass the calculation result, we call the method ATTRIBUTE_SET. In this example, we have caught errors that can occur, but we didn’t display their message to the user. The way we can use try. . . endtry, the way we can raise, catch and display exceptions will be detailed described.
Dynamic Programming
RUNTIME CLASS: CL_WD_BUTTON_CHOICE
Hereunder,we present a table showing the correspondence between the view designer name and the runtime name, with the proper types,in case of dynamic programming of a ButtonChoice UI element.
Dynamic programming
The implementation of a dynamic ButtonChoice UI element with one mean action item, named DIVIDE, contains the following statements:
 METHOD wddomodifyview.
 DATA lr_button_choice TYPE REF TO cl_wd_button_choice.
 DATA lr_flow_data TYPE REF TO cl_wd_flow_data.
 DATA lr_container TYPE REF TO cl_wd_uielement_container.
 DATA lr_menu_action TYPE REF TO cl_wd_menu_action_item.
 IF first_time EQ abap_true.
 lr_container ?= view->get_element('ROOTUIELEMENTCONTAINER').
 lr_button_choice = cl_wd_button_choice=>
 new_button_choice( id = 'BTN_CHOICE'
 text = 'Choose'
 repeat_selected_action = abap_false
 ).
 lr_flow_data = cl_wd_flow_data=>new_flow_data(element =
 lr_button_choice).
 lr_container->add_child(lr_button_choice).
 lr_menu_action = cl_wd_menu_action_item=>new_menu_action_item
(id ='MENUACTIONITEM1'
 text = 'Divide'
 on_action = 'DIVIDE'
 hotkey = cl_wd_menu_action_item=>e_hotkey-ctrl_p
 ).
 lr_button_choice->add_choice(the_choice = lr_menu_action).
 ENDIF.
 ENDMETHOD.
Selection
This category contains UI elements that have selection options. Hereunder,we present some of the UI Elements included in this category.
Drop Down By Key
This UI element provides the end user with a dropdown list from where he can choose only one entry. We create a WD Component named Y_UI_DROPDOWNBYKEY with a view named V_VIEW and a window.
We have many possibilities to populate with values the dropdown list.For example,we can use a Domain defined in the ABAP Dictionary, we can use the wdDoInit Hook method or a supply function method. For our example, we use Y_COUNTRY_DOMAIN, domain that holds all the names of EU member states.
The View layout is presented in fig
As we have mentioned above, most of the UI element properties can be bound. Hereunder, we present a table with some of the DropDownByKey properties that can be bound, and the attribute type in case the property is bindable.
Some of the DropDownByKey UI element properties
The property selectedKey is mandatory; this means we have to realise data binding at this attribute. The context structure is presented.
Context structure
We have a context node with the cardinality 1. . .1 Singleton that has two attributes. The KEY attribute is of Y_DEFORDOMAIN type,defined in the ABAP Dictionary, and the RESULT attribute is of string type. We define a data binding between the KEY attribute and the selectedKey property of the DropDownByKey.
Data binding
If the selectedKey property of the DropDownByKey UI Element is bound to this attribute,the values stored in the attribute KEY are displayed in the selection list.
We use the attribute RESULT to show, in the textView UI Element,the capital of the first two EU countries,from the dropdown list. After the user chooses a value,the Framework triggers the event handler method onactionselect_country.
the event handler method
 METHOD onactionselect_country.
 DATA lr_node TYPE REF TO if_wd_context_node.
 DATA ls_data TYPE wd_this-element_dropdownbykey.
 DATA lv_value TYPE string.
 lr_node = wd_context-get_child_node('DROPDOWNBYKEY').
 lr_node-get_attribute(EXPORTING name ='KEY'IMPORTING value = lv_value).
 CASE lv_value.
 WHEN 'AT'.
 ls_data-result ='Vienna'.
 WHEN 'BE'.
 ls_data-result ='Brussels'.
 WHEN OTHERS.
 ls_data-result ='Unknown'.
 ENDCASE.
 lr_node-set_static_attributes(ls_data).
 ENDMETHOD.
Runtime
Dynamic Programming
RUNTIME CLASS: CL_WD_DROPDOWN_BY_KEY
Hereunder,we present a table showing the correspondence between the view designer name and the runtime name, with the proper types,in case of dynamic programming of a DropDownByKey UI element.
Dynamic programming
The implementation of a dynamic DropDownByKey UI element contains the following statements.
Dynamic creation of a Drop Down By Key UI element
 DATA lr_dropdown_by_key TYPE REF TO cl_wd_dropdown_by_key.
 DATA lv_bind_attribute TYPE string.
 lv_bind_attribute = 'DROPDOWNBYKEY.KEY'.
 lr_dropdown_by_key =cl_wd_dropdown_by_key=
 new_dropdown_by_key(id ='DDK'bind_selected_key =
 lv_bind_attribute text_direction = 
cl_wd_dropdown_by_key=e_text_direction-ltr on_select = 'SELECT_COUNTRY').
Drop Down By Index
This UI element provides the end user with a dropdown list from where he can choose only one entry. This UI element doesn’t differ from the DropDownByKey when displayed on the screen, the implementation being the only difference. We create the same WD Component; in this case, we use a dropDownByIndex UI element instead of the dropDownByKey.In Fig. we show the context structure.In this case, we use a context node with the dictionary structure SHSVALSTR2, cardinality 0...n, Singleton.
Context structure
View Layout
Here under,we present a table with some of the DropDownByIndex properties that can be bound,and the attribute type in case the property is bindable.
Some of DropDownByIndex UI element properties
As we can see,the texts property is mandatory. If this property of the drop- DownByIndex UI Element is bound to the VALUE attribute, the values stored in this attribute are displayed in the selection list. Listing shows how we can populate the dropdown list with values via a supply function method.
Supply function method
 METHOD supply_dropdownbyindex.
 DATA:
 ls_country TYPE if_v_view=element_dropdownbyindex,
 lt_country LIKE TABLE OF ls_country.
 ls_country-value ='Austria'.
 ls_country-key ='Vienna'.
 APPEND ls_country TO lt_country.
 ls_country-value ='Belgium'.
 ls_country-key ='Brussels'.
 APPEND ls_country TO lt_country.
 node-bind_table(new_items = lt_country set_initial_elements = abap_true).
 ENDMETHOD.
Runtime
Dynamic Programming
RUNTIME CLASS: CL_WD_DROPDOWN_BY_IDX
Hereunder,we present a table showing the correspondence between the view designer name and the runtime name,with the proper types,in case of dynamic programming of a DropDownByIndex UI element.
Dynamic programming
The implementation of a dynamic DropDownByIndex UI element
 DATA lr_dropdown_by_index TYPE REF TO cl_wd_dropdown_by_idx.
 DATA lv_bind_attribute TYPE string.
 lv_bind_attribute ='DROPDOWNBYINDEX.VALUE'.
 lr_dropdown_by_index = cl_wd_dropdown_by_idx=new_dropdown_by_idx
(id = 'DDI'bind_texts = lv_bind_attribute text_direction = cl_wd.
Radio Button Group By Index
This UI Element includes some RadioButtons,allowing the user to select only one value. Similar to the DropDown lists,we have here RadioButtons grouped by key and by index. Indifferent of the type,they don’t differ when they are displayed on the screen,but only in the implementation part.
We create the same WD Component as for the DropDownByIndex UI element;in this case,we change the DropDownByIndex UI element withthe RadioButton- GroupByIndex.The view context has the same structure. We create a context node named RADIOBUTTONGROUP_I with the dictionary structure SHSVALSTR2, cardinality 0. . .n, Singleton.
Hereunder, we present a table with some of the RadioButtonGroupByIndex properties that can be bound, and the attribute type in case the property is bindable.
Some of the RadioButtonGroupByIndex UI element properties
View Layout
We define the same data binding between the VALUE attribute and the texts property of the RadioButtonGroupByIndex. If this property of the RadioButton- GroupByIndex UI Element is bound to the VALUE attribute, the values stored in this attribute are displayed in columns and rows.
To specify the number of columns in which the RadioButtonGroup elements are grouped, we can use the property colCount. In our case, we have set “2”.This property can be personalised by an administrator.Listing  shows how we can populate the RadioButtons with values via a supply function method (the same method as for the DropDownByIndex lists).
Supply function method
 METHOD supply_radiobutton_i.
 DATA:
 ls_country TYPE wd_this-element_radiobuttongroup_i,
 lt_country LIKE TABLE OF ls_country.
 ls_country-value = 'Austria'.
 ls_country-key = 'Vienna'.
 APPEND ls_country TO lt_country.
 ls_country-value = 'Belgium'.
 ls_country-key = 'Brussels'.
 APPEND ls_country TO lt_country.
 node-bind_table( new_items = lt_country set_initial_elements = abap_true).
 ENDMETHOD.
Runtime
For the RadioButtonGroupByKey UI element, we have the same concept as described for the DropDownByKey.
Dynamic Programming
RUNTIME CLASS: CL_WD_RADIOBUTTON_GROUP_BY_IDX
Hereunder, we present a table showing the correspondence between the view designer name and the runtime name, with the proper types,in case of dynamic programming of a RadioButtonGroupByIndex UI element.
Dynamic programming
The implementation of a dynamic RadioButtonGroupByIndex UI element contains the following statements:
Dynamic creation of a RadioButtonGroupByIndex UI element
 DATA lr_radiobutton_group_by_index TYPE REF TO
 cl_wd_radiobutton_group_by_idx.
 DATA lv_bind_attribute TYPE string.
 lv_bind_attribute ='RADIOBUTTONGROUP_I.VALUE'.
 lr_radiobutton_group_by_index =
 cl_wd_radiobutton_group_by_idx=>new_radiobutton_group_by_idx(
 id = 'RDB_INDEX'
 bind_texts = lv_bind_attribute
 col_count = 2
 on_select = 'SHOW’).
Layout
This category has UI elements we use to form the layout. Hereunder,we present some of the UI Elements included in this category.
ViewContainerUIElement
This UI element is an area within a view that contains another view. It doesn’t have its own properties,but inherits properties from the abstract base class UIElement. We create a WD Component,a registration form with three views.In the view V_VIEW,we insert two ViewContainerUIElement’s (VCU_1 and VCU_2) required to embed the V_STEP1 and V_STEP2 views. The context node is created in COMPONENTCONTROLLER because we have to share data among different view controllers: V_STEP1, V_STEP2, V_VIEW.
WD component structure
Context structure
The node INFO has the cardinality 0...1, Singleton. The attributes NAME, EMAIL, CITY are of STRING type, and the attribute COUNTRY is of Y_DEFORDOMAIN type defined in the ABAP Dictionary, domain that holds all the EU member states.
At runtime, the view V_VIEW is the default view (e.g. the view that is first displayed when the window is called).
View V_VIEW layout
Because we want to display more views in the same time and in the same window,we are going to use ViewContainerUIElement. At runtime,when the screen is displayed for the first time, we want only the fields from V_VIEW view to be visible until the user presses the LinkToAction UI Element. This is the reason why we embed as default in VCU_1 and VCU_2 EMPTYVIEWs.An EMPTYVIEW is a special type of view, automatically generated, that can be used to hide another view.
Window structure
Runtime
As we can see, only the UI Elements from the default view V_VIEW are displayed, because the VCU_1 and VCU_2 have EMPTYVIEWs as default.
Embedding Views in Window
After the user presses the LinkToAction UI element, we want to show in the VCU_1 the view V_STEP1. To be able to do this, we define an outbound plug in the V_VIEW view.
Definition of an outbound plug in the view V_VIEW
 
V_STEP1 view layout
To be able to show the view V_STEP1 content when the user presses the LinkToAction UI Element, we have to define an inbound plug in the view V_STEP1.
Definition of an Inbound Plug in the view V_STEP1
Now,we embed the view V_STEP1 in the ViewContainerUIElement VCU_1 and we create the navigation link.
Window structure
When the user presses the LinkToAction UI element, the Framework triggers the event handler method onactionlta1. When we create an outbound plug for a view,a fire method is added to its interface. A fire method of our outbound plug op_to_v_ step1 is called with the statement:
wd_this!fire_op_to_v_step1_plg( ).
We have created a navigation link from OP_TO_V_STEP1 to IP_V_STEP1. When this method is fired, the view V_STEP1 is displayed. To integrate the fire method, we can use the Web Dynpro Code Wizard.
Calling the web Dynpro code wizard

No comments:

Post a Comment