轉自：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程序的創建。
錯漏之處，歡迎指正。