WDA学习(1):Create a Simple Web Dynpro Application

1.1Create a simple Web Dynpro Application

       本实例创建一个简单的Web Dynpro组件,由一个MAIN视图组成。对应MAIN视图组件,创建其上下文,并且连接上下文到视图组件布局元素,创建Web Dynpro Application,在浏览器运行。

Step 1:

创建Web Dynpro Component,

打开SAP工作台SE80,Repository Brower->Web Dynpro Comp./Intf.,输入创建Component名字,z_test_wda1。

 

点击enter,直接默认即可。

设置Web Dynpro Component名;

设置Web Dynpro Component描述;

设置创建类型;

设置默认创建Window名;

设置默认初始View名;

 

在Object List下,可以看到我们初始创建的Web Dynpro Compnent包含的东西。

 

双击Windows->Z_TEST_WDA1窗口组件,可以看到MAIN这个视图组件已经包含在窗口组件中。如果还有其他视图组件,可以通过拖动对应视图组件到窗口组件下。

 

双击Views->MAIN视图组件,打开编辑模式。

context页签,设置上下文;

创建一个SFLIGHT_NODE节点,这里没有其他视图的数据交换,不用使用到COMPONENTCONTROLLER的CONTEXT(组件控制器的上下文)

右键CONTEXT->create->node

设置Node Name;

设置Dictionary structure,使用数据库中已有数据结构;

设置Cardinality,运行时可以包含数据条数;

设置完成后,点击Add Attributes from Structure;

 

 

 

  Layout页签,设置视图组件中布局;

 

 左边是一些视图组件中的视图控件,右边是视图控件的结构树和显示当前活动视图控件的属性。

ROOTUIELEMENTCONTAINER:根UI控件容器,视图组件MAIN的所有UI控件都在它的下面。

创建一个Table显示SFLIGHT内表数据。

右键ROOTUIELEMENTCONTAINER->Insert Element

输入创建Element控件名;

输入创建Element 控件类型;

 

使用SFLIGHT_NODE绑定TAB_SFLIGHT表。

方式1:选择TAB_SFLIGHT控件,设置dataSource属性,创建Context binding。

 

 

 

方式2:

右键->Create Binding;

选择要绑定的Context上下文;

只需要显示,选择TextView;

 

 

 

设置完成后,Layout显示效果

 

Method页签,视图组件初始化,响应用户操作调用方法。

在视图组件初始化时,获取数据。

重写WDDOINIT方法;

实例代码:

method WDDOINIT .
  "node_sflight變量,類型if_wd_context_node類型
  DATA:node_sflight TYPE REF TO IF_WD_CONTEXT_NODE.
  "sflight內表保存查詢數據
  DATA:t_sflight TYPE TABLE OF sflight.

  "獲取數據
  SELECT * INTO CORRESPONDING FIELDS OF TABLE t_sflight FROM sflight.

  "獲取上下文節點
  "wd_context是Attributes中的參數,代表View組件的Context對象
  "一個View組件,類似一個類,有一些方法和參數;
  node_sflight =  wd_context->get_child_node( name = 'SFLIGHT_NODE' ).

  "將數據綁定到上下文節點
*  node_sflight->bind_table( new_items = t_sflight ).
  node_sflight->bind_table( t_sflight ).
endmethod.

注意:在高效的Web Dynpro应用程序中,不应直接从Web Dynpro方法中访问数据库,应该使用supply function或者BAPI调用进行数据访问。

创建一个Web Dynpro Application,浏览器访问Web Dynpro应用。

选择Web Dynpro Comp 下Z_TEST_WDA1->右键->Create->Web Dynpro Application。

 

 

运行Web Dynpro Application。

选择Web Dynpro Applications下Z_TEST_WDA1->右键->test。

 

 

原文地址:https://www.cnblogs.com/tangToms/p/12796398.html