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
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.
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.
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’).
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