Web Dynpro for ABAP(2):Basic & Dynamic Programmings

3Web Dynpro ABAP Development

Basic: Web Dynpro application组成结构；

Cross-Component Programming:跨组件通信；

Dynamic Programming：上下文，布局动态操作；

Integration：不同应用技术，程序集成；

Advanced Concepts： Web Dynpro ABAP高级项目中可能具有重要意义的各种主题；

Quality Assurance and Supportability：确保程序性能工具，分析可能错误；

Unified Rendering Light Speed in Web Dynpro ABAP：新的渲染技术信息；

Example Applications：示例程序说明；

Programming Notes：使用Web Dynpro ABAP程序设计的Notes；

3.1Basic

Web Dynpro Component

Web Dynpro Component：可以重复使用的组件，通过创建Web Dynpro Application直接访问到Component;

Web Dynpro Component可以嵌入其他Component;

View

View:当创建Component时，默认创建View:MAIN;

View编辑页面布局：

 

UI Elements of Views:

Group,TabStrip可以包含其他Elements；

TextView,Image,Table显示信息；

InputField,Button用户交互；

 

Context of View:

每个View拥有自己的Context,Context包含View使用的数据；

 

Data Binding

单个Attribute绑定

 

Table节点绑定

 

Table的数据绑定可以使用导航。

如图创建TABLE:TAB_SFLIGHT;

右键->Create Binding,创建资料绑定到Context节点;

 

Attributes Flagged as 'Nullable'

当fields没有值时，输出显示数据类型对应默认值。示例：NUMC4数据类型输出‘0000’、T数据类型输出‘00:00:00’;

IF_WD_CONTEXT_NODE_INFO=>SET_NULLABLE( )使用方法设置节点可以为空；

IF_WD_CONTEXT_NODE->SET_ATTRIBUTE_NULL( '”Node_Name”' )设置节点值为空；

UI Element Actions

Creating Actions:一些UI Element有自己的Action,例如:Button Click;

Event Handler Methods:创建Action，自动生成Event Methods;

Controller Methods：Controller自动生成Methods，例如:WDDOINIT,WDDOEXIT;

Controller:

每个Component有自己的Controller,每个View有自己的Controller,每个Window有自己的Controller;

View的Context可以和Component Controller的Context映射；

WD_CONTEXT:Context对应对象,类型IF_WD_CONTEXT_NODE；

WD_THIS:对应组件对象，可以是Component,View,Window；

对应类型：

IF_COMPONENTCONTROLLER

IF_<MY_CUSTOM_CONTROLLER>

IF_<MY_VIEW>

IF_<MY_WINDOW>

使用context获取子节点：wdctx_xxx,xxx表示Node节点名

示例：wd_context->get_child_node( wd_this->wdctx_my_node )；

 

使用WD_GET_API()方法获取Web Dynpro Runtime API，例如：portal manager or message manager；

View Controller的Attributes:WD_COMP_CONTROLLER,Type: IG_COMPONENTCONTROLLER;

Methods of Local Controller Interface

WDDOINIT:初始化方法；

WDDOEXIT:退出application方法；

Component Controller	View Controller	Window Controller
WDDOINIT / WDDOEXIT	WDDOINIT / WDDOEXIT	WDDOINIT / WDDOEXIT
WDDOAPPLICATIONSTATECHANGE	WDDOBEFOREACTION
WDDOBEFORENAVIGATION	WDDOAFTERACTION	WDDOONOPEN
WDDOPOSTPROCESSING	WDDOMODIFYVIEW	WDDOONCLOSE
	WDDOONCONTEXTMENU

 

 

 

 

 

 

 

 

Predefined Methods of the Local Controller Interface

1.Method: WD_GET_API

Ig_Componentcontroller value(Result) type ref to IF_WD_COMPONENT

If_“View_Name“ value(Result) type ref to IF_WD_VIEW_CONTROLLER

Ig_“Window_Name“ value(Result) type ref to IF_WD_VIEW_CONTROLLER

2.Method: GET_<MY_USED_CONTROLLER>_CTR

返回值类型IG_<MY_USED_CONTROLLER>;

3.Method: WD_CPUSE_<MY_COMPONENT_USAGE>

4.Method: WD_CPIFC_<MY_USED_COMPONENT>

实现Component嵌入其他Component使用Method;

5.Method:FIRE_<MY_PLUG>_PLG

实现view,window跳转；

6.Method: FIRE_<MY_EVENT>_EVT

触发Component controller or Custom controller event;

 

示例：

Component Controller的Event页签

Event:

MY_EVENT

Parameter:

MY_PARAMETER type wdy_boolean

 

Component Controller的Method页签

method MY_COMP_CONTROLLER_METHOD .

WD_THIS->FIRE_MY_EVENT_EV( MY_PARAMETER ='X').

endmethod.

View Controller的method页签

Method：MY_EVENT_HANDLER

Method Type:Event handler

Event:MY_EVENT

注意：Event Handler方法都有WDEVENT参数，类型CL_WD_CUSTOM_EVENT；

Supply Function

每个Context Node可以有一个Supply Function;

Singleton子节点可以通过Supply Function根据父节点更新对应节点资料；

注意：

1.Supply functions只能用于包含在其他节点的次级节点context数据填充；

2.避免Supply function中raising exception;

3.Supply functions运行时独立执行，运行时间不确定；

Web Dynpro Runtime APIs

Window Manager:IF_WD_WINDOW_MANAGER;

Portal Manager: IF_WD_PORTAL_INTEGRATION;

返回三种类型界面

IF_WD_VIEW_CONTROLLER (for all view controllers)

IF_WD_COMPONENT (for all component controllers) or

IF_WD_CONTROLLER (for all interface controllers or custom controllers)

示例：

method MY_VIEW_CONTROLLER_METHOD .

data:L_RUNTIMEAPI type ref to IF_WD_VIEW_CONTROLLER.

L_RUNTIMEAPI = WD_THIS->WD_GET_API( ) .

endmethod. 

Web Dynpro Window

每个Web Dynpro Component至少包含一个Web Dynpro Window；

所有View被嵌入Window可以被显示；

View之之间跳转使用Navigation Link；

 

示例：MY_OUTBOUND,outbound名字,可以传递参数EDITABLE

WD_THIS->FIRE_<MY_OUTBOUND>_PLG( EDITABLE = 'X' ).

示例：HANDLEIN，second view使用Event Handler处理跳转参数

method HANDLEIN .

  data:L_CONTEXT_NODE type ref to IF_WD_CONTEXT_NODE.

   L_CONTEXT_NODE = WD_CONTEXT->GET_CHILD_NODE( 'STATUS' ).

   L_CONTEXT_NODE->SET_ATTRIBUTE( NAME = 'ENABLED' VALUE = EDITABLE ).

endmethod. 

Web Dynpro Application

 

创建Application时，URL会自动生成；

SAP系统namespace:

<schema>://<host>.<domain>.<extension>:<port>/sap/bc/webdynpro/<namespace>/<application name>

Customer namespace:

<schema>://<host>.<domain>.<extension>:<port>/abc/klm/xyz/<namespace>/webdynpro/<application name>

<schema>://<host>.<domain>.<extension>:<port>/namespace>/webdynpro/<application name>

使用Customer namespace步骤：

Preparatory Settings：To ensure that Web Dynpro runs smoothly in a customer namespace, you need to make the following settings:

1.Call up the Internet Communication Framework using transaction SICF.

2.Create a new root node for your namespace (for example, /acme) in the service tree directly below the default host.

3.Note that you only enter and save the name here.

4.Below your new root node, create a subnode called webdynpro: The path is then /acme/webdynpro.Note that the name of the subnode must be webdynpro (without any spaces).For the subnode webdynpro, specify CL_WDR_MAIN_TASK as the handler on the Handler List tab.

5.If you have existing applications that have a node under the long ICF path, create a new node under the new path for each of these old applications and then delete the old path completely.

6.In the MIME Repository tree, create a new root node for your namespace and underneath it a subnode for webdynpro.

The method CREATE_ROOT_FOLDER of class CL_MIME_REPOSITORY_API is provided for this.In the MIME Repository, the path is then as follows: /acme/webdynpro

Move existing images under the long/old path in the MIME Repository to the relevant positions in the new path.

Component定义inbound参数，调用URL传参数;

示例:获取URL传参

 wdr_task=>client_window->if_wdr_client_info_object~get_parameter( 'CARRID' ).

3.2Cross-Component Programming

Component可以嵌入其他Component使用。

Model Component:没有图形元素但具有完整控制器功能的组件。

The Controllers of a Web Dynpro Component

Component Controller三种界面：

IF_<controller_name>:coding within the controller;

IG_<controller_name>:cross-controller coding within the current component;

IWCI_<component_name>：cross-component coding;

Component Usages:

使用嵌入Component必须定义Component Usage;

Component Usage without Controller Access

 

示例：使用MY_COMP_USAGE，固定方法获取Usage, WD_CPUSE_<MY_COMPONENT_USAGE>,但是不能够使用component interface method

method MY_CONTROLLER_METHOD .

data: L_REF_CMP_USAGE type ref to IF_WD_COMPONENT_USAGE.

L_REF_CMP_USAGE = WD_THIS->WD_CPUSE_MY_COMP_USAGE( ).

if L_REF_CMP_USAGE->HAS_ACTIVE_COMPONENT( ) is initial.

L_REF_CMP_USAGE->CREATE_COMPONENT( ).

endif.

endmethod. 

Component Usage with Controller Access

 

使用WD_CPIFC_<MY_COMPONENT_USAGE>方法获取接口对象IWCI_<USED_COMPONENT>

示例：

method MY_CONTROLLER_METHOD .

data:L_REF_INTERFACECONTROLLER type ref to IWCI_MY_USABLE_COMPONENT,

 L_API_INTERFACECONTROLLER type ref to IF_WD_CONTROLLER.

 L_REF_INTERFACECONTROLLER = WD_THIS->WD_CPIFC_MY_COMP_USAGE().

 L_API_INTERFACECONTROLLER = L_REF_INTERFACECONTROLLER->WD_GET_API().

endmethod. 

Window Plugs

Window拥有预设Default Inbound Plug，可以在这里根据参数,改变预设跳转View,跳转不同的View;

 

Cross-Component Context Mapping

不同Component之间，通过Component的Interface Controller映射其他Component的Context。

 

3.3Dynamic Programming

SAP程序示例：

Component:WDR_TEST_DYNAMIC

Component Interface:WDR_TEST_DYNAMIC_CI

实现WDR_TEST_DYNAMIC_CI

WDR_TEST_DYNAMIC_1

WDR_TEST_DYNAMIC_2

WDR_TEST_DYNAMIC_3

动态修改页面Layout；

移除UI Element；

修改UI Element参数；

绑定Event给Action；

示例：动态创建按钮到ROOTUIELEMENTCONTAINER中

method WDDOMODIFYVIEW .

data: LR_CONTAINER  type ref to CL_WD_UIELEMENT_CONTAINER,

  LR_BUTTON  type ref to CL_WD_BUTTON,
  LR_FLOW_DATA  type ref to CL_WD_FLOW_DATA.
  LR_BUTTON  =  CL_WD_BUTTON=>NEW_BUTTON( ).
  LR_FLOW_DATA  =  CL_WD_FLOW_DATA=>NEW_FLOW_DATA( element = LR_BUTTON ).

  LR_CONTAINER ?= view->GET_ELEMENT( 'ROOTUIELEMENTCONTAINER' ).
 LR_CONTAINER->ADD_CHILD( LR_BUTTON ).

endmethod. 

示例：创建按钮时指定按钮显示Text，也可以CL_WD_BUTTON的方法SET_TEXT方法设置文本。

data:MY_TEXT  type string. 
MY_TEXT  =  CL_WD_UTILITIES=>GET_OTR_TEXT_BY_ALIAS( 'MY_TEXT_ALIAS' ).
LR_BUTTON  =  CL_WD_BUTTON=>NEW_BUTTON( text = MY_TEXT ). 

示例：创建按钮绑定ACTION

LR_BUTTON  =  CL_WD_BUTTON=>NEW_BUTTON(  text = MY_TEXT On_action = MY_ACTION ).

示例：绑定Context节点值

LR_BUTTON->BIND_TEXT( 'NODE_NAME.ATTRIBUT_NAME' ). 

示例：移除UI Element

CL_WD_UIELEMENT_CONTAINER的REMOVE_CHILD方法；

示例：动态创建Event Parameters

METHOD wddomodifyview.

DATA:lt_parameters LIKE if_wd_event=>parameters,
parameter LIKE LINE OF lt_parameters,
lr_link1 TYPE REF TO cl_wd_link_to_action,
lr_link2 TYPE REF TO cl_wd_link_to_action.

CHECK first_time = abap_true.
lr_link1 ?= view->get_element( 'LINK1' ).
lr_link2 ?= view->get_element( 'LINK2' ).

CHECK first_time = abap_true.
lr_link1 ?= view->get_element( 'LINK1' ).
lr_link2 ?= view->get_element( 'LINK2' ).

"设置参数
parameter-name= 'MYID'.
parameter-value = 1.
parameter-type= 'g'.
INSERT parameter INTO TABLE lt_parameters.
lr_link1->map_on_action( lt_parameters ).

CLEAR lt_parameters[].
parameter-name= 'MYID'.
parameter-value = 2.
parameter-type= 'g'.
INSERT parameter INTO TABLE lt_parameters.
lr_link2->map_on_action( lt_parameters ). 

动态创建Context,使用CL_WD_DYNAMIC_TOOL类提供方法

IF_WD_CONTEXT_NODE_INFO->ADD_NEW_CHILD_NODE添加Context节点

CL_WD_DYNAMIC_TOOL->CREATE_NODEINFO_FROM_STRUCT创建Context节点

动态创建Component Usages

示例：创建component usages

method MY_CONTROLLER_METHOD .
data: L_COMPONENT_USAGE  type ref to IF_WD_COMPONENT_USAGE,
L_MY_INITIAL_USAGE  type ref to IF_WD_COMPONENT_USAGE.
L_MY_INITIAL_USAGE = WD_THIS->WD_CPUSE_MY_INITAL_USAGE( ).
L_COMPONENT_USAGE = L_MY_INITIAL_USAGE->CREATE_COMP_USAGE_OF_SAME_TYPE( <NAME_OF_THE_SECOND_USAGE> ).
endmethod. 

示例：创建Component Usages Group

method MY_CONTROLLER_METHOD .

data: L_CMP_API  type ref to IF_WD_COMPONENT,
      L_CMP_USAGE_GROUP  type ref to IF_WD_COMPONENT_USAGE_GROUP.
      L_CMP_API = WD_THIS->WD_GET_API( ).
  if L_CMP_API->HAS_CMP_USAGE_GROUP( 'TESTGROUP' ) is initial.

   WD_THIS->CMP_USAGE_GROUP = L_CMP_API->CREATE_CMP_USAGE_GROUP(
     NAME  = 'TESTGROUP'
     USED_COMPONENT  = '<name used component>').
  endif.

WD_THIS->CMP_USAGE_GROUP->ADD_COMPONENT_USAGE(
  NAME  = 'USAGE1'
  EMBEDDING_POSITION  = '<name view>/<name container>'
  USED_COMPONENT  = '<name used component>'  ).

  WD_THIS->CMP_USAGE_GROUP->ADD_COMPONENT_USAGE(
   NAME  = 'USAGE2'
   EMBEDDING_POSITION  = '<Name View>/<Name Container>'
   USED_COMPONENT  = '<Name used component>'  ).

endmethod.

示例：动态Navigation

data: L_VIEW_CONTROLLER_API type ref to IF_WD_VIEW_CONTROLLER,
      L_COMPONENT_USAGE type ref to IF_WD_COMPONENT_USAGE,
      COMPONENT_NAME  type STRING.

if L_COMPONENT_USAGE->HAS_ACTIVE_COMPONENT( ) is initial.
  L_COMPONENT_USAGE->CREATE_COMPONENT( COMPONENT_NAME ).
endif.

L_VIEW_CONTROLLER_API = WD_THIS->WD_GET_API( ).
L_VIEW_CONTROLLER_API->PREPARE_DYNAMIC_NAVIGATION(
  source_window_name  = 'W0'
  source_vusage_name  = 'MAIN_USAGE_1'
  source_plug_name  = 'TO_V1'
  target_component_name  = <component_name>
  target_component_usage  = <component_usage_name>
  target_view_name  = <interface_view_name>
  target_plug_name  = <inbound_plug_name>
  target_embedding_position  = <embedding_position> ).

"跳转
WD_THIS->FIRE_TO_V1_PLG( ).

示例：动态创建View Container

data: L_ROOT_CNT  type ref to CL_WD_UIELEMENT_CONTAINER,
  L_VIEW_CNT    type ref to CL_WD_VIEW_CONTAINER_UIELEMENT,
  L_MATRIX_HEAD_DATA  type ref to CL_WD_MATRIX_HEAD_DATA.

if first time = abap_true.
  L_ROOT_CNT ?= VIEW->GET_ELEMENT( 'ROOTUIELEMENTCONTAINER' ).
  L_VIEW_CNT  = CL_WD_VIEW_CONTAINER_UIELEMENT=>NEW_VIEW_CONTAINER_UIELEMENT(
   ID = 'CNT1' ).

 L_ROOT_CNT->ADD_CHILD( L_VIEW_CNT ).
 L_MATRIX_HEAD_DATA = CL_WD_MATRIX_HEAD_DATA=>NEW_MATRIX_HEAD_DATA(
  ELEMENT = L_VIEW_CNT ).
endif. 

示例：调用Component Usage method

data: L_INTF_CONTROLLER  type ref to IWCI_<NAME_INTERFACE_DEFINITION>,
L_COMPONENT_USAGE  type ref to IF_WD_COMPONENT_USAGE.
L_INTF_CONTROLLER ?= L_COMPONENT_USAGE->GET_INTERFACE_CONTROLLER( ).
L_INTF_CONTROLLER-><NAME_METHOD>( ). 

示例：动态创建Event Handler

method MY_CONTROLLER_METHOD .

data: L_COMPONENT_API  type ref to IF_WD_COMPONENT,
      L_COMPONENT_USAGE  type ref to IF_WD_COMPONENT_USAGE.

 L_COMPONENT_API = WD_COMP_CONTROLLER->WD_GET_API( ).

 L_COMPONENT_USAGE->ADD_EVENT_HANDLER(
   listener  = L_COMPONENT_API
   handler_name  = <event_handler_name>
   controller_name  = 'INTERFACECONTROLLER'
   event_name  = <event_name>  ).
endmethod.