文本教程培訓(xùn)web dynpro training

1、1Web Dynpro for ABAP Training2主要內(nèi)容主要內(nèi)容 Part 1： Web Dynpro for ABAP基礎(chǔ) Part 2： Web Dynpro for ABAP高級(jí)編程3課程目錄課程目錄 Part 1： Web Dynpro for ABAP基礎(chǔ) Unit 1 ： Web Dynpro Overview Unit 2 ： Web Dynpro Controllers Unit 3 : Web Dynpro UI elements Unit 4 ： Context at design time Unit 5 ： Controller and Context Pro

2、gramming4課程目標(biāo)課程目標(biāo) 熟悉Web Dynpro 架構(gòu) 熟悉Web Dynpro for ABAP的各個(gè)組件 能夠熟練操作UI Elements 設(shè)計(jì)Layout 能夠編寫簡(jiǎn)單的Web Dynpro 的應(yīng)用 5Unit 1 - Web Dynpro Overview What is Web Dynpro Web Dynpro 是SAP在NetWeaver平臺(tái)上的主要開(kāi)發(fā)工具，早期的時(shí)候有Web Dynpro for java，基于系統(tǒng)性能等考慮，后來(lái)擴(kuò)展到ABAP平臺(tái)，就是web dynpro for ABAP， 它是一種基于Web應(yīng)用的用戶接口技術(shù)。它的設(shè)計(jì)模式源于MVC模式（m

3、odel view controller）. Web dynpro強(qiáng)調(diào)model與View的分離，model生成應(yīng)用所需的數(shù)據(jù)，View則用可視化的界面展示數(shù)據(jù)和收集數(shù)據(jù)。它們之間通過(guò)controller通信和控制邏輯流 6Unit 1 - Web Dynpro Overview Application Scenarios with Web Dynpro7Unit 1 - Web Dynpro OverviewBenefit of Web Dynpro8Unit 1 - Web Dynpro Overview Web Dynpro Architecture：Entities and Conce

4、pts9Unit 1 - Web Dynpro Overview同一Component 中Controller之間的數(shù)據(jù)連接叫 Internal Context Mapping不同Component中Controllers之間的數(shù)據(jù)連接叫External Context MappingUI elements的值與Context Attribute之間的連接叫做Data Binding數(shù)據(jù)如何傳遞與共享？10Unit 1 - Web Dynpro Overview不同Views之間的Navigation在兩個(gè)View之間定義 navigation ，需要用outbound plugs和inbou

5、nd plugs 來(lái)對(duì)相對(duì)應(yīng)的View創(chuàng)建出口和入口11Unit 1 - Web Dynpro Overview12Unit 1 Web Dynpro Overview 一個(gè)簡(jiǎn)單的Web Dynpro 應(yīng)用實(shí)例 創(chuàng)建一個(gè)View,顯示table sflight的內(nèi)容13Unit 2- Web Dynpro Controllers Controllers類型 Component controller Custom controllers Configuration controller View controllers Window controllers14Unit 2- Web Dynpro

6、 Controllers Component controller 每個(gè)Web Dynpro component都只有一個(gè)component controller. 這是一個(gè)global controller, 對(duì)其他controllers是可見(jiàn)的. The component controller 用于整個(gè)Component的功能 這個(gè) controller 沒(méi)有可視化的接口. 其lifetime與Component的lifetime一樣，當(dāng)啟動(dòng)一個(gè)Web Dynpro 應(yīng)用時(shí), component controller 被Web Dynpro runtime實(shí)例化.15Unit 2- We

7、b Dynpro Controllers Custom controllers Custom Controller 是可選的. 他們必須在design時(shí)定義，他們可以用于封裝component controller 的Sub-functions 一個(gè)component可以定義多個(gè) custom controllers . Web Dynpro framework會(huì)自動(dòng)實(shí)例化Custom controllers ，但實(shí)例化的順序是不確定的， 因此，一個(gè)Custom controller 中的代碼不能依賴于其他的custom controller. 當(dāng)custom controller的第一個(gè)方法

8、被調(diào)用時(shí)，才會(huì)進(jìn)行實(shí)例化，custom controller的實(shí)例不能被顯示刪除.16Unit 2- Web Dynpro Controllers Configuration controller 這是一種特殊的Custom Controller. 只有在component實(shí)施了特定的configuration和personalization functionality的時(shí)候需要. 任何一個(gè)component只能有一個(gè)Configuration Controller. 任何其他的Controller可以訪問(wèn)Configuration Controller，但Configuration Cont

9、roller不能訪問(wèn)其他 作為component的第一個(gè)controller實(shí)例化，其lifetime與component一致17Unit 2- Web Dynpro Controllers View controller 每一個(gè)view都包含一個(gè)controller，這個(gè)controller只涉及跟View相關(guān)的邏輯，比如Check User Input 和 Handling User Action 當(dāng)View的Method第一次被調(diào)用時(shí)才進(jìn)行實(shí)例化，它的生命周期取決于Views properties： 如果選擇了framework controller ，該view instance 的周

10、期和component 一樣； 如果選擇了when Visible，顧名思義，只要該View不再屬于當(dāng)前view assembly，該view instance就會(huì)被刪除.18Unit 2- Web Dynpro Controllers Window controller 每個(gè)Window只能有一個(gè)controller，這個(gè)controller主要用來(lái)在處理inbound plug復(fù)用作為child controller的傳輸?shù)臄?shù)據(jù).這個(gè)controller的methods可以被window的inbound plug methods調(diào)用 同樣的，只有它的Method第一次被調(diào)用時(shí)才進(jìn)行實(shí)例化，

11、Window controller 實(shí)例不能被顯式刪除.19Unit 2- Web Dynpro Controllers Attributes Controller: wd_this Context: wd_contextHook Method wddoinit 當(dāng)controller實(shí)例被創(chuàng)建時(shí)執(zhí)行 wddoexit當(dāng)controller實(shí)例被刪除時(shí)執(zhí)行Common Controller Entities20Unit 2- Web Dynpro Controllers EventHook Method wddobeforenavigation wddopostprocessingSpecia

12、l Entities of Component / Custom Controllers21Unit 2- Web Dynpro Controllers ActionAttributes wd_comp_controllerOutbound Plugs Inbound PlugsHook Method wddobeforeaction wddomodifyviewSpecial Entities of View Controllers22Unit 2- Web Dynpro Controllers 基本與View controller一樣Special Entities of Window C

13、ontrollers23Unit 3- Web Dynpro UI elementsView layout View layout 由UI element組成，這是一個(gè)hierarchical structure called the UI element hierarchy 由一個(gè)UI element是始終在 UI element hierarchy中存在的 the ROOTUIELEMENTCONTAINER. 它是整個(gè) UI element hierarchy的root.24Unit 3- Web Dynpro UI elements常用的UI element ContainerTran

14、sparentContainer: 它并不可見(jiàn) The ROOTUIELEMENTCONTAINER 就是transparent container.Group: 它是可見(jiàn)的，并且包含一個(gè) caption.Tray: 和Group類似，在又上角有一個(gè)打開(kāi)，收攏的按鈕. ScrollContainer: 這個(gè)UI element已經(jīng)不推薦使用了，我們完全可以用 transparent container代替.25Unit 3- Web Dynpro UI elementsContainer的一個(gè)重要properties Layout FlowLayout: Container中的child el

15、ements一個(gè)接一個(gè)往后排，不能定義line break RowLayout: RowLayout 是在一個(gè)column中一個(gè)接一個(gè)的安排其child elements ， Line breaks 可以通過(guò)assigning RowHeadData 給一個(gè)UI element來(lái)定義GridLayout: GridLayout 在一個(gè)二維的grid中排它的child elements ，每一個(gè)行包 含相同數(shù)目的cells，line break在UI elements 占得column大于剩余的 cells in a line的時(shí)候自動(dòng)增加.MatrixLayout: MatrixLayout

16、在一個(gè)tabular format 中排它的child elements ，每一行 的cells可以不同，line break可以通過(guò) assigning 給一個(gè)UI elements 來(lái)添加26Unit 3- Web Dynpro UI elements常用的UI element Tabtrip TabStrip UI elements do not contain properties that have to be bound to context attributes. Thus, it is not obligatory to define TabStrip-related cont

17、ext nodes or context attributes. 27Unit 3- Web Dynpro UI elements常用的UI element Tabtrip28Unit 3- Web Dynpro UI elements常用的UI element Table Table UI elements通常綁定一個(gè)cardinality為（0:n）or (1: n)的context node ，該node collection下的每個(gè)element就成為table的lines table的column 通過(guò)一個(gè)table cell editor的定義. The cell editor 可

18、以是 TextView, or InputField, or 其他可以用來(lái)顯示context attribute 值的UI elements。29Unit 3- Web Dynpro UI elements常用的UI element Table 重要的properties Design（還與readonly和enable有關(guān)） Vertical Scrolling and Context Paging visibleRowCount visibleFirstRow Row Selection selectionMode 30Unit 3- Web Dynpro UI elements常用的UI

19、 element TableImplementing additional Table Functionality :Header and Toolbar31Unit 3- Web Dynpro UI elements常用的UI element Table 支持client side event（sort，filter，scroll等） 針對(duì)相應(yīng)的action有相應(yīng)的action handler method。它有一個(gè)重要的接口參數(shù)：WDEVENT，wdevent包含一個(gè)內(nèi)表（WDEVENT-parameters） 實(shí)例（Filter） 附加1 Table Filter32Unit 3- We

20、b Dynpro UI elements其它常用的UI element inputfield button dropdownlist radiobutton 相關(guān)的properties需要綁定到對(duì)應(yīng)的context attribute33Part 1 Web Dynpro for ABAP基礎(chǔ)基礎(chǔ)練習(xí) 1.對(duì)字段CARRID,CONNID創(chuàng)建input field 和button search，當(dāng)點(diǎn)search，根據(jù)輸入條件篩選表SFLIGHT中的結(jié)果顯示出來(lái) 2.以上例為基礎(chǔ)做一個(gè)能對(duì)字段carrid進(jìn)行filter的功能 3. 在兩個(gè)view之間創(chuàng)建Navigation，當(dāng)沒(méi)有航班被選擇出

21、來(lái)時(shí)，顯示一個(gè)text 文本的view，并且有一個(gè)按鈕，可以回到search頁(yè)面的view Tips： 程序命名規(guī)則：zex_. 34Unit 4- Context at design time每一個(gè)Web Dynpro controller 都有一個(gè)層級(jí)的數(shù)據(jù)結(jié)構(gòu)，叫做context一旦controller instance 結(jié)束了, 他的context下所有的數(shù)據(jù)也沒(méi)有了.除非額外的聲明，否則運(yùn)行中，一個(gè)controller的context中的數(shù)據(jù)總是component私有的。所有的controller的context都由nodes and attributes組成組成. 一個(gè)contex

22、t總有一個(gè)父node，叫context root node（根節(jié)點(diǎn)）.35Unit 4- Context at design time36Unit 4- Context at design time The Collection Cardinality 四種可能的cardinality值(specified as .): . 0.1: Zero or one element permitted . 0.n: Zero or more elements permitted . 1.1: Exactly one element permitted . 1.n: One or more elemen

23、ts permitted37Unit 4- Context at design time38Unit 4- Context at design time39Unit 4- Context at design time The Lead Selection 類似ABAP中的工作區(qū) The lead selection 可以指向任意一條Node下的element或者為空，若為空，則有常數(shù)IF_WD_CONTEXT_NODE=NO_SELECTION. 如果Initialize Lead Selection 的值設(shè)為true， Web Dynpro framework 會(huì)自動(dòng)把collection中

24、的第一條數(shù)據(jù)設(shè)置為The lead selection.40Unit 4- Context at design time The Singleton Property The Boolean property Singleton dependent node and its critically affects the relationship between parent node!41Unit 4- Context at design time42Unit 4- Context at design time43Unit 4- Context at design time Supply Fu

25、nction The supply function 通常與singleton nodes 配合使用，singleton子節(jié)點(diǎn)elements的值與其父節(jié)點(diǎn)的the lead selection的值有關(guān)時(shí).當(dāng) If the lead selection被改變時(shí)the supply function 能夠訪問(wèn)新的lead selection element 并且能夠相應(yīng)的重新計(jì)算子節(jié)點(diǎn)elements的值.44Unit 4- Context at design time45Unit 5- Controller and Context programmingAccessing a Context

26、Node若想訪問(wèn)一個(gè)context elements 或者context attribute ，首先我們需要得到相關(guān)context note 的Reference下面兩點(diǎn)很重要:. For each controller (), an interface is generated having the name IF_. For each node of a controller context, a constant (WDCTX_) is generated in this interface; 它的值是該node的名字（大寫）這個(gè)常量可以用來(lái)訪問(wèn)context note根節(jié)點(diǎn)可以用sta

27、ndard attribute WD_CONTEXT來(lái)訪問(wèn)，其Child nodes 可以通過(guò)get_child_node() method來(lái)取得46Unit 5- Controller and Context programming47Unit 5- Controller and Context programmingAccessing a Node ElementUsing method get_element( ). This method returns a reference to the element instance of type IF_WD_CONTEXT_ELEMENT.

28、The element with index n can be accessed using the method get_element( index = n ) . The number of elements in a collection can be obtained from the method get_element_count( )48Unit 5- Controller and Context programming49Unit 5- Controller and Context programmingAccessing Attributes of a Single Nod

29、e Element Using the method get_attribute( ). Here, the name of the attribute must be exported and the attribute value is returned in an import parameter. Using the method get_static_attributes( ). Here, a structure is returned in an import parameter. The target structure can be different from the no

30、de structure. This is possible because structure elements are copied individually to the target structure .With the method get_static_attributes_table( ), the attributes of all elements can be retrieved as an internal table.50Unit 5- Controller and Context programming51Unit 5- Controller and Context

31、 programming52Unit 5- Controller and Context programming53Unit 5- Controller and Context programming Changing Attribute Values of a given Node Element 與與Reading 類似，類似，Method為為 set_attribute( ) set_static_attributes( ).54Unit 5- Controller and Context programming Adding Elements to a Context Node usi

32、ng the method bind_element( ) related to the node reference. This method has two import parameters: The element reference is submitted via the parameter new_item. The parameter set_initial_elements defines if the new element is just added to the element collection (value = abap_false) or if the new

33、element replaces all existing elements in the collection (value = abap_true). Bind_structure() Bind_table()55Unit 5- Controller and Context programming56Unit 5- Controller and Context programming57Unit 5- Controller and Context programming58Part 1 Web Dynpro for ABAP基礎(chǔ)基礎(chǔ) 練習(xí) 1. 在上次的練習(xí)中，根據(jù)SFLIGHT 表顯示的

34、結(jié)果，選中一條，顯示所選航班的預(yù)定信息到另一個(gè)table elements：SBOOKINGS中。 提示：使用cl_abapwd_flight_model=get_bookings( carrid = ls_parent_attributes-carrid connid = ls_parent_attributes-connid fldate = ls_parent_attributes-fldate) 得到bookings 2. 設(shè)置選擇條件CARRID的默認(rèn)值為L(zhǎng)H。 59課程目錄課程目錄 Part 2： Web Dynpro for ABAP高級(jí)編程 Unit 1 ：Message Un

35、it 2 ：Value Help and Semantic Help Unit 3 ：Dialog Boxes(Popus) Unit 4 ：Component Reuse Unit 5 ：Dynamic Modification at Runtime60課程目標(biāo)課程目標(biāo) 了解Web Dynpro 的Message使用 了解Web Dynpro 的Value Help 的使用 了解Web Dynpro 的Popus的使用 能夠熟練使用Component的Reuse 了解更多Web Dynpro 動(dòng)態(tài)編程技術(shù)61Unit 1 - Message Defining the Position of

36、the Message Area 默認(rèn)的message area 在頁(yè)面的頂部. 如果需要另外的message area, 需要用到控件 MessageArea container UI element. MessageArea UI element 可以為任意其他container 控件的sub-element.62Unit 1 - Message Methods for Defining Messages: Categories In order to report a message, methods of the IF_WD_MESSAGE_MANAGER interface have

37、 to be used. DATA lo_api_ctrl TYPE REF TO if_wd_controller. DATA lo_message_manager TYPE REF TO if_wd_message_manager.lo_api_ctrl = wd_this-wd_get_api().lo_message_manager = lo_api_ctrl-get_message_manager().63Unit 1 - Message64Unit 1 - MessageCategory TEXT65Unit 1 - MessageCategory T10066Unit 1 - M

38、essageCategory EXCEPTIONS67Unit 1 - Message練習(xí)練習(xí)1. 在第一部分的第一個(gè)例子基礎(chǔ)上，當(dāng)沒(méi)有選中flights時(shí)，報(bào)一個(gè)error message 。68Unit 2 Value Help and Semantic Helpthe property Input Help Mode of the context attribute bound to the input field. There are five settings for this property: Deactivated 沒(méi)有可用的search help. Automatic The

39、 value help 由 Web Dynpro runtime決定. Dictionary Search Help 可以選擇一個(gè)ABAP Dictionary中事先定義好的search help Object Value Selector 使用component ：OVS User-Defined Programming 用戶自己編寫的search help69Unit 2 Value Help and Semantic Help Dynamically Assigning Value Sets to Context Attributes 前提：前提： If a value selector

40、 is implemented using the key binding technique, the value set can be defined at runtime. （key binding：Value set is related to the attribute to which the UI element property is bound）Value set需要被定義為line type為WDR_CONTEXT_ATTR_VALUE 的內(nèi)表、需要用到的methodget_node_info( )set_attribute_value_set()70Unit 2 Valu

41、e Help and Semantic Help71Unit 2 Value Help and Semantic HelpValue Help實(shí)例-OVS 附加1 OVS72Unit 2 Value Help and Semantic Help Field dependent Help Texts可以使用以下技術(shù)為 UI element提供help text: Tool tips Explanation texts Standard Dictionary F1 help73Unit 2 Value Help and Semantic HelpTool Tips74Unit 2 Value He

42、lp and Semantic HelpExplanation Texts75Unit 2 Value Help and Semantic Help Field independent Help Texts 為多個(gè)fields提供一個(gè)help text或提供與field無(wú)關(guān)的help information，可以使用以下兩種方法：Display EXPLANATION UI elementDisplay knowledge warehouse (KW) documents in the Help Center76Unit 2 Value Help and Semantic HelpUsing

43、the Explanation UI Element77Unit 2 Value Help and Semantic HelpUsing the Explanation UI Element78Unit 3 - Dialog Boxes(Popus) External dialog box: An external dialog box 在另外一個(gè)瀏覽器窗口中打開(kāi)，而且能夠獨(dú)立于原始窗口在屏幕上到處移動(dòng). External dialog boxes 一般是modeless. Modal dialog box: A modal dialog box 在當(dāng)前瀏覽器窗口中打開(kāi). The modal

44、dialog box 可以用來(lái)顯示同一個(gè)component的window, used component 的interface view , 以及confirmation dialog.79Unit 3 - Dialog Boxes(Popus) Steps：1. First, 用WD_COMP_CONTROLLER調(diào)用wd_get_api( )得到一個(gè)reference with type IF_WD_COMPONENT（lo_api_component）2. Next, 用第一步得到的reference 得到window manager，the method lo_api_componen

45、t-get_window_manager( ) has to be called.這樣得到一個(gè)type IF_WD_WINDOW_MAN- AGER 的Reference (lo_window_manager).3. Now, 不同類型的dialog boxes 可以通過(guò)調(diào)用lo_window_manager的相關(guān)method來(lái)創(chuàng)建.4. 不管是什么類型的 dialog box, 將會(huì)得到一個(gè)類型為IF_WD_WINDOW 的reference （representing the dialog box）. 80Unit 3 - Dialog Boxes(Popus) 81Unit 3 - Di

46、alog Boxes(Popus) External Dialog Box82Unit 3 - Dialog Boxes(Popus) Modal Dialog Boxes 1. Confirmation dialog box 2. Dialog box displaying a window of the same component 3. Dialog box displaying a window of a used component83Unit 3 - Dialog Boxes(Popus) Confirmation Dialog Box84Unit 3 - Dialog Boxes

47、(Popus) Dialog Box displaying a Window of the same Component85Unit 3 - Dialog Boxes(Popus) Dialog Box displaying a Window of a used Component86Part 2 Web Dynpro 高級(jí)編程高級(jí)編程 練習(xí)：OVS ，Popus1. 在查詢fights的例子中，使用OVS作為搜索字段的input help2. 在上面例子的基礎(chǔ)上，當(dāng)點(diǎn)選search時(shí)做一個(gè)comfirm 的窗口，當(dāng)選擇確定時(shí)，繼續(xù)查詢，當(dāng)選擇cancel時(shí)，回到查詢頁(yè)面TIPS:響應(yīng)conf

48、irm窗口子action的方法：LO_WINDOW-SUBSCRIBE_TO_BUTTON_EVENT( button = if_wd_window=co_button_ok action_name = GO_SEARCH action_view = LR_VIEW is_default_button = abap_true ). 87Unit 4 Component Reuse88Unit 4 Component ReuseInstantiating and Deleting a Component Usage89Unit 4 Component ReuseInterface Views90

49、Unit 4 Component ReuseInterface Controller Methods91Unit 4 Component ReuseInterface Controller Event92Unit 4 Component ReuseCross-Component Context MappingThe mapping origin is defined in the interface controller of the used component (direct context mapping).The mapping origin is defined in a compo

50、nent controller or in a custom controller of the consumer component (external context mapping).93Unit 4 Component ReuseCross-Component Context Mapping94Unit 4 Component ReuseDynamic Component Usage95Unit 4 Component ReuseDynamic Component Usage在 Implemented Interfaces tab中加上要實(shí)施的component interface .

51、在該tab, 對(duì)每一個(gè)component interface press the Reimplement button . 這樣會(huì)把整個(gè)component interface拷貝到 component controller.96Unit 4 Component Reuse實(shí)例實(shí)例3 使用使用select options component 附加3 select options實(shí)例實(shí)例4-Using ALV in Web Dynpro附加4 using ALV97Unit 4 Component Reuse 練習(xí)練習(xí) 1. 把search航班的例子中table elements顯示的內(nèi)容用ALV

52、形式顯示 2. 在上例中使用 select options component 98Unit 5 Dynamic Modifications at Runtime Dynamic Context Manipulation Dynamic UI Manipulation Dynamic Assignment of Actions to UI Elements 99Unit 5 Dynamic Modifications at RuntimeDynamic Context Manipulation100Unit 5 Dynamic Modifications at RuntimeDynamic C

53、ontext Manipulation101Unit 5 Dynamic Modifications at RuntimeCreating Context Attributes102Unit 5 Dynamic Modifications at RuntimeCreating Context Attributes103Unit 5 Dynamic Modifications at RuntimeCreating Context Attributes104Unit 5 Dynamic Modifications at RuntimeDynamic UI Modifications105Unit

54、5 Dynamic Modifications at RuntimeDynamic UI Modifications106Unit 5 Dynamic Modifications at RuntimeAdjusting Container Properties and Assigning the Layout107Unit 5 Dynamic Modifications at RuntimeAdding a New UI Element to the UI Element Hierarchy 108Unit 5 Dynamic Modifications at RuntimeAdding a

55、New UI Element to the UI Element Hierarchy 109Unit 5 Dynamic Modifications at RuntimeAssigning Actions to UI Elements Dynamically110Unit 5 Dynamic Modifications at RuntimeAssigning Actions to UI Elements Dynamically111總結(jié) 通過(guò)Part1 和Part2的學(xué)習(xí)，我們已經(jīng)介紹了Web Dynpro的基礎(chǔ)知識(shí)以及Web Dynpro的高級(jí)編程技術(shù)。由于時(shí)間關(guān)系，還有一些細(xì)節(jié)無(wú)法一一俱到，希望大家課后能夠多做練習(xí)。112提問(wèn)提問(wèn)Any question ？113 作業(yè)作業(yè)1發(fā)文系統(tǒng)發(fā)文系統(tǒng)BP與BP之間發(fā)送文件通過(guò)點(diǎn)擊執(zhí)行文件應(yīng)用，把文件上傳到服務(wù)器，對(duì)每個(gè)文件分配一個(gè)GUID（綁定發(fā)送方和接收方），通過(guò)GUID，當(dāng)接收方執(zhí)行應(yīng)用時(shí)，點(diǎn)擊接收文件就可以看到其他BP發(fā)給自己的文件。114 作業(yè)作業(yè)2通