WDA入门教程Ⅱ:在WDA程序中使用选择选项

本文提供了在 WDA 程序中使用选择选项(Select Option)的分步操作指南,前提是您已学习了《WDA入门教程Ⅰ:Web Dynpro for ABAP 入门》一文,并非常了解WDA的基础知识。

目录

  1. 创建 WDA 对象
  2. 定义使用的组件
  3. 编辑视图
  4. 定义属性
  5. 方法实施
  6. 将视图嵌入窗口
  7. 创建应用并测试

1. 创建 WDA 对象

打开事务码 SE80,在左侧对象清单中选择“Web Dynpro 组件/接口”,在下方输入“Z_TUTORIAL2”并回车,系统将询问你是否创建,单击“是”。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第1张图片
创建 WDA 对象

在弹出的对话框中输入描述如下,回车。在弹出的包选择本地对象。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第2张图片
创建 WDA 对象

结果如下,保存并激活所有对象。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第3张图片
创建成功

2. 定义使用的组件

双击左侧的组件接口,在右边的窗口新建如下组件。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第4张图片
使用组件

3. 编辑视图

在已创建的 MAIN 视图属性(Properties)选项卡,点击新建按钮,添加两个 SELECT_OPTIONS 组件。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第5张图片
Properties

来到 Context(上下文)选项卡,为 CONTEXT 添加一个节点 FLIGHTS , Cardinality 选择“0...N”,回车。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第6张图片
Create Node

在创建好的 FLIGHTS 节点右键选择“Create Using the Wizard”->“Attributes from Commonents of Structure”。输入 Structure Name 为“SFLIGHT”,回车,选择除 MANDT 之外的所有字段,回车。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第7张图片
Add Attributes

结果如下图。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第8张图片
Reslut

单击 Layout 选项卡,添加一个名称为“View_Container” 的元素,类型为“VIEW_CONTAINER_UIELEMENT”。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第9张图片
View_Container

再添加一个名为“BUTTON1”的按钮,并为其添加一个 Action 事件“CONTINUE”。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第10张图片
BUTTON1
WDA入门教程Ⅱ:在WDA程序中使用选择选项_第11张图片
Result

最后,创建一个名为“FLIGHTTABLE”的表元素。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第12张图片
创建 FLIGHTTABLE

右键 FLIGHTTABLE,选择“Create Binding”,将表绑定到视图上文。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第13张图片
Create Binding
WDA入门教程Ⅱ:在WDA程序中使用选择选项_第14张图片
Create Context Binding

结果如图。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第15张图片
Result

4. 定义属性

单击 Attributes 选项卡,添加两个属性,分别为:

  • M_HANDLER,类型:IF_WD_SELECT_OPTIONS
  • M_WD_SELECT_OPTIONS,类型: IWCI_WDR_SELECT_OPTIONS。
WDA入门教程Ⅱ:在WDA程序中使用选择选项_第16张图片
image.png

保存并激活所有对象。

5. 方法实施

单击 Method 选项卡,找到 WDDOINI T双击进入,编写以下代码。

METHOD WDDOINIT .

  DATA:
    LT_RANGE_TABLE TYPE REF TO DATA,
    RT_RANGE_TABLE TYPE REF TO DATA,
    READ_ONLY      TYPE ABAP_BOOL,
    TYPENAME       TYPE STRING.

  DATA:
    LR_COMPONENTCONTROLLER TYPE REF TO IG_COMPONENTCONTROLLER,
    L_REF_CMP_USAGE        TYPE REF TO IF_WD_COMPONENT_USAGE.

* create the used component
  L_REF_CMP_USAGE = WD_THIS->WD_CPUSE_SELECT_OPTIONS( ).
  IF L_REF_CMP_USAGE->HAS_ACTIVE_COMPONENT( ) IS INITIAL.
    L_REF_CMP_USAGE->CREATE_COMPONENT( ).
  ENDIF.

* get a pointer to the interface controller of the select options
*component
  WD_THIS->M_WD_SELECT_OPTIONS =
       WD_THIS->WD_CPIFC_SELECT_OPTIONS( ).

* init the select screen
  WD_THIS->M_HANDLER =
       WD_THIS->M_WD_SELECT_OPTIONS->INIT_SELECTION_SCREEN( ).

* create a range table that consists of this new data element
  LT_RANGE_TABLE =
    WD_THIS->M_HANDLER->CREATE_RANGE_TABLE(
         I_TYPENAME = 'S_CARR_ID' ).

* add a new field to the selection
  WD_THIS->M_HANDLER->ADD_SELECTION_FIELD(
                 I_ID = 'S_CARR_ID'
                 IT_RESULT = LT_RANGE_TABLE
                 I_READ_ONLY = READ_ONLY ).

* create a range table that consists of this new data element
  LT_RANGE_TABLE =
    WD_THIS->M_HANDLER->CREATE_RANGE_TABLE(
         I_TYPENAME = 'S_CONN_ID' ).

* add a new field to the selection
  WD_THIS->M_HANDLER->ADD_SELECTION_FIELD(
                 I_ID = 'S_CONN_ID'
                 IT_RESULT = LT_RANGE_TABLE
                 I_READ_ONLY = READ_ONLY ).

ENDMETHOD.

在来到 ONACTIONCONTINUE 方法,双击进入编辑,插入如下代码。

METHOD ONACTIONCONTINUE .

  DATA: NODE_FLIGHTS   TYPE REF TO IF_WD_CONTEXT_NODE.
  DATA: RT_CARRID TYPE REF TO DATA.
  DATA: RT_CONNID TYPE REF TO DATA.
  DATA: ISFLIGHT TYPE TABLE OF SFLIGHT.
  DATA: WSFLIGHT TYPE SFLIGHT.
  FIELD-SYMBOLS:  TYPE TABLE,
                  TYPE TABLE.

* Retrieve the data from the select option
  RT_CARRID = WD_THIS->M_HANDLER->GET_RANGE_TABLE_OF_SEL_FIELD(
                           I_ID = 'S_CARR_ID' ).
* Assign it to a field symbol
  ASSIGN RT_CARRID->* TO .

* Retrieve the data from the select option
  RT_CONNID = WD_THIS->M_HANDLER->GET_RANGE_TABLE_OF_SEL_FIELD(
                           I_ID = 'S_CONN_ID' ).
* Assign it to a field symbol
  ASSIGN RT_CONNID->* TO .

* Retrieve that data from the database.  Normally it is suggested to
* encapsulate the data retrieval in a separate class.
* For simplicity, the SELECT statement has been implemented here.
  CLEAR ISFLIGHT. REFRESH ISFLIGHT.
  SELECT * INTO CORRESPONDING FIELDS OF TABLE ISFLIGHT FROM SFLIGHT
          WHERE CARRID IN 
            AND CONNID IN .

* Bind the data to the context
  NODE_FLIGHTS = WD_CONTEXT->GET_CHILD_NODE( NAME = `FLIGHTS` ).
  NODE_FLIGHTS->BIND_ELEMENTS( ISFLIGHT ).

ENDMETHOD.

保存并激活所有对象。

6. 将视图嵌入窗口

来到窗口 Z_TUTORIAL2 下,展开清单,找到 VIEW_CONTAINER,右键单击嵌套视图,填入以下信息,回车。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第17张图片
嵌套视图

结果如下。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第18张图片
Result

保存并激活所有对象。

7. 创建应用并测试

创建 Web Dynpro 程序,并保存为本地对象。执行测试,在弹出的浏览器中进行检验。

WDA入门教程Ⅱ:在WDA程序中使用选择选项_第19张图片
Test

如果您的系统中没有数据,请运行程序 SAPBC_DATA_GENERATOR 生成.

错漏之处,欢迎指正。


参考文献:
[1] Getting Started with Web Dynpro for ABAP, Rich Heilman,2005
[2] Using Select Options in a WDA Application, Rich Heilman , 2006
[3] SAP Documentation

查看上一篇WDA入门教程Ⅰ:Web Dynpro for ABAP 入门

你可能感兴趣的:(WDA入门教程Ⅱ:在WDA程序中使用选择选项)