WDA入门教程Ⅰ：Web Dynpro for ABAP 入门(转）
转自：https://www.jianshu.com/p/68c1592f1a87
WDA全称Web Dynpro for ABAP，也写作WD4A或WDA，是用于在ABAP环境中开发Web应用程序的SAP标准UI技术。 它由运行时环境和图形开发环境组成，其中包含集成在ABAP Workbench（SE80）中的特殊Web Dynpro工具。
本教程提供了开发一个WDA程序的分步指南。
目录：
- 创建WDA对象
- 创建视图
- 添加UI元素和视图
- 创建组件控制器上下文
- 数据映射
- 从组件控制器访问数据
- 定义导航模式
- 创建应用
- 测试WDA应用
1. 创建WDA对象
进入事务码SE80，在左侧对象框列表中选择“Web Dynpro组件/接口”，输入对象的名称“Z_TUTORIAL1”，然后回车，系统将询问是否创建此对象，单击“是”。
输入对象描述和要创建的视图名称，回车。将会出现一个要求分配包的对话框，这里选择本地对象。
现在，WDA对象就创建好了。
2. 创建视图
视图包含用户与应用程序交互所需的UI元素，SAP提供了许多不同的类型的UI元素。
这里需要创建两个视图，第一个视图已经在创建对象的时候自动创建好了。
我们再来创建一个Result视图。
保存并激活所有对象之后，就能看到下图了。
3. 添加UI元素和视图
接下来，我们为Start视图构建用户界面。
如上图所示界面，在右侧找到ROOTUIELEMENTCONTAINER，右键选择“Inser Element”。
出现一个对话框，输入“Label1”，类型选择“LABEL”。
如此，再创建一个输入框和按钮。
为 Label1 添加显示文本：Enter Your Name。
为BUTTON1添加显示文本：Continue。
并未其创建事件触发，单击右侧新建按钮。
输入如下信息，填写描述及输出，按回车。
此时出现是否创建Outbound Plug，选择“是”。
点击“Inbound Plug”选项卡，并创建“FromResult”。
创建视图的上下文，单击“Context”选项卡，首先右键选择创建一个节点。
弹出对话框，键入如下，回车。
再在MAIN下创建一个属性，选择MAIN节点，右键创建。
输入如下，回车。
再回到Layout选项卡，给Input1元素映射到视图上下文。单击value旁边的小图标，然后从弹出的对话框选择NAME。
保存并激活所有对象。
仿照对Start视图的操作，为Result视图添加一个名为“TEXT1”的元素，类型为TextView。并添加一个名为“BUTTON1”的按钮，将动作指定为“Back”。
在Context选项卡，创建MAIN节点和NAME属性。
来到Layout，创建TEXT1。
选择TEXT1的text字段，点击右边的小方块，弹出对话框后，选择NAME，回车。
在ROOTUIELEMENTCONTAINER创建一个BUTTON1按钮并为其添加显示文本“Back”和事件触发“Back”。
在弹出的对话框填写如下，回车。在弹出的讯问中选择“是”。
在 Inbound Plugs 输入 FROMSTART。
保存并激活全部对象。
4. 创建组件控制器上下文
通过组件控制器上下文控制数据的传递。
在COMPONENTCONTROLLER，为Context创建节点和属性。
节点MAIN。
属性NAME。
保存并激活全部对象。
5. 数据映射
数据映射是组件控制器将用多个视图数据连接起来。
双击左侧的 START 视图，在Context选项卡，右键单击视图控制器的MAIN节点，然后选择“Define Mapping”。
在弹出的对话框中选择MAIN。
为Result视图做同样的操作。
保存并激活所有对象。
6. 从组件控制器访问数据
用户将在START视图中输入数据，并在RESULT视图中显示改值。
来到RESULT视图，单击Methods选项卡，找到“WDDOMODIFYVIEW”方法，双击进入。在代码中键入空行，然后在上方工具栏选择“Web Dynpro Code Wizard”按钮（快捷键Ctrl+F7）。
通过选择上下文的按钮，在弹出的对话框选择NAME，回车两次。
代码已生成。
在endmethod之前添加一段逻辑如下。
CONCATENATE 'Welcome to WDA' LV_NAME INTO LV_NAME
SEPARATED BY SPACE.
LO_EL_MAIN->SET_ATTRIBUTE(
EXPORTING
NAME = 'NAME'
VALUE = LV_NAME ).
回到 Method List ，找到 ONACTIONBACK 双击进入。在WD_THIS->FIRE_TOSTART_PLG之前插入空行，再次使用“Web Dynpro Code Wizard”按钮生产代码。
在WD_THIS->FIRE_TOSTART_PLG之前插入几行代码。
CLEAR LV_NAME.
LO_EL_MAIN->SET_ATTRIBUTE(
EXPORTING
NAME = 'NAME'
VALUE = LV_NAME ).
结果如图。
7. 定义导航模式
导航模式允许定义师徒之间的导航流。定义入站和出站插件提供的入口和出口点。导航连接定义视图的显示顺序。
双击窗口下的 Z_TUTORIAL1 ，然后将视图Result拉入Z_TUTORIAL1。
结果如图。
在ToResult上右键“创建导航连接”。
在弹出的对话框中，“目标视图”输入框通过F4选择“RESULT”，回车。
在ToStart上右键“创建导航连接”，在弹出的对话框中，“目标视图”输入框通过F4选择“START”，回车。
结果如图。
保存并激活所有对象。
8. 创建应用
本程序是允许在浏览器中通过URL寻址和显示的WDA对象，通过右键单击左侧对象树中的WDA对象来创建应用程序。
输入描述，并保存为本地对象。
9. 测试WDA应用
此时在下方出现一个Web Dynpro 应用程序，打开后右键单击测试，就会弹出浏览器界面。
在输入框输入一段文字，单击按钮。
结果如图。
至此，恭喜你完成了第一个WDA程序的创建。
错漏之处，欢迎指正。
