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。