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.

 

posted @ 2022-04-23 09:35  渔歌晚唱  阅读(161)  评论(0编辑  收藏  举报