WebDynpro for ABAP 初了解结合案例一

一、简单剖析
众所周知，WEBDYNPRO是今天来SAP主推的一个面向WEB的MVC编程框架，接触过J2EE的朋友都不会对MVC这种设计模式陌生，WEBDYNPRO ABAP的基本设计思路和很多著名的面向互联网的MVC框架很相似（比如STRUCTS）

SAPNETWEAVER 平台上也有WEBDYNPRO的一些标准应用，譬如PI RWB上面的ALERT CONFIGRATION功能，理解WEBDYNPRO的工作原理，有助于技术顾问在实施项目的时候很好的处理一些相关的异常问题。

前提：在应用WEBDYNPRO之前，首先要将你的APPLICATION SERVER中的FQDN配置好，也就是说您的WS必须是Full Qualified Domain Name,如：hostname.companyname.com这种形式，任何以IP地址或者机器名称为命名的URL地址都不能正常访问WEBDYNPRO，因此在开始开发WEBDYNPRO之前，首先我们要和BASIS确认服务器是Full Qualified Domain Name即FQDN。

二、WEBDYNPRO的主要组成部分如下：

1 Views: 相当于我们的一个个页面，传统意义上的V（MVC），每个VIEW里面有一个CONTROLLER，CONTROLLER里面有上下文（用来存储相当于我们认为的在每个VIEW范围内的局部变量），EVENT HANDLER，还有属于VIEW的一些HOOK MATHOD等。

2 Controller:传统意义上的C（MVC），存储上下文数据节点，METHOD，EVENT，有关页面跳转的OUTBOUND PLUG和INBOUND PLUG等等都存在其中，Component Controller是COMPONENT范围内一个全局的CONTROLLER，所有的VIEW中的Controller可以和Component Controller进行数据映射，从而达到VIEW之间共享传递数据的功能。

3 Windows 相当于VIEWS以及VIEWS之间导航的预定义的集合（STRUCTS也有基本上同样的设计），VIEW之间依靠定义INBOUND PLUG和 OUTBOUND PLUG的NAVIGATION LINK的激发实现导航，我们可以通过OUT_BOUND plug传递参数或者通过VIEW controller和Component Controller之间的上下文映射实现VIEW之间的数据共享。

4 Component Interface: WEBDYNPRO 实现组件复用的基础，WEBDYNPRO应用程序时可以实现组件嵌套的，比如我们开发了一个COMPONENT可以被另一个COMPOPENT使用，WEBDYNPRO的ALV就是个典型的例子。而Component Interface（包括INTERFACE VIEWS和INTERFACECONTROLLER ）是组件暴露出来供给其他组件使用调用。

三、下面就一个简单的例子了解一下WEBDYNPRO的开发步骤：
（一）功能：
初始界面


点击CONTINUE跳转页面

点 back返回

(二)、实现：
1 首先在SE80创建WEBDYNPRO应用


2 创建VIEW:START AND RESULT



3 在 start view 的 layout 表中添加 label 和 input：


在 label 的属性中添加如下：

4.添加一个按钮， text 属性设置为 continue，添加 onaction 事件。



5 在 inbound plugs表中添加如下：

6.创建VIEW的CONTEXT

7 将 input 值和 name 绑定：
解释：CONTEXT须和VIEWS上的某些控件的特定属性绑定，这样当我们改变了CONTEXT的某个节点的数据，那么相应控件的值也会跟着改变，比如这个我们创建了CONTEXT的一个节点下的NAME字段用于存放和绑定INPUT BOX里面的VALUE属性。

8.创建 result view ，添加 text1 类型为 textview， button text 属性为 back。



8 在 result view 的 context 中添加如下 node 和 attribute ：

9 将 text1 的 text 属性和 name 绑定

10 在 button 中添加事件 back。

11. 在RESULT VIEW 的 inbound plugs中添加如下：

12 在 COMPONENTCONTROLLER中添加 main node 和 name attribute,将 start view和result view 中的 main和 COMPONENTCONTROLLER中的 main 绑定。
解释：建立CONPONENT CONTROLLER中的CONTEXT节点并且和VIEW CONTEXT相应节点映射，这样就相当于把全局变量和局部变量相关联



result view 定义映射通start view.

13 在 result 的 WDDOMODIFYVIEW 中添加以下代码：

method wddomodifyview .
  data lo_nd_main type ref to if_wd_context_node.
  data lo_el_main type ref to if_wd_context_element.
  data ls_main type wd_this->element_main.
  data lv_name type wd_this->element_main-name.
* navigate from <CONTEXT> to <MAIN> via lead selection
  lo_nd_main = wd_context->get_child_node( name = wd_this->wdctx_main
  ).
* @TODO handle non existant child
* IF lo_nd_main IS INITIAL.
* ENDIF.
* get element via lead selection
  lo_el_main = lo_nd_main->get_element( ).
* @TODO handle not set lead selection
  if lo_el_main is initial .
    BREAK-POINT.
  endif .
* get single attribute
  lo_el_main->get_attribute(
  exporting
  name = 'Name'
  importing
  value = lv_name ).
  concatenate 'welcome to wda,' lv_name into lv_name
  separated by space.
  lo_el_main->set_attribute(
  exporting
  name = 'Name'
  value = lv_name
  ).
endmethod .

14 在 ONACTIONBACK 中添加以下代码：

method onactionback .
  data lo_nd_main type ref to if_wd_context_node.
  data lo_el_main type ref to if_wd_context_element.
  data ls_main type wd_this->element_main.
  data lv_name type wd_this->element_main-name.
* navigate from <CONTEXT> to <MAIN> via lead selection
  lo_nd_main = wd_context->get_child_node( name = wd_this->wdctx_main ).
* @TODO handle non existant child
* IF lo_nd_main IS INITIAL.
* ENDIF.
* get element via lead selection
  lo_el_main = lo_nd_main->get_element( ).
* @TODO handle not set lead selection
  if lo_el_main is initial .
  endif .
* get single attribute
  lo_el_main->get_attribute(
  exporting
  name = `NAME`
  importing
  value = lv_name ).
  clear lv_name.
  lo_el_main->set_attribute(
  exporting
  name = 'Name'
  value = lv_name
  ).
  wd_this->fire_tostart_plg(
  ).
endmethod.

15 将 result 和 start view 拖到窗口，创建双向导航链接。
解释：建立VIEWS之间的导航，我们需要分别在不同的VIEWS里面插入相应的OUTBOUND 和INBOUND PLUG，并最终在WINDOWS里面建立他们的NAVIGATION LINK。



将SATART VIEW设为缺省（默认第一屏）
16 创建 web dynpro application。


17.测试， ok