文本教程培訓web dynpro training

1、1Web Dynpro for ABAP Training2主要內(nèi)容主要內(nèi)容 Part 1： Web Dynpro for ABAP基礎 Part 2： Web Dynpro for ABAP高級編程3課程目錄課程目錄 Part 1： Web Dynpro for ABAP基礎 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課程目標課程目標 熟悉Web Dynpro 架構 熟悉Web Dynpro for ABAP的各個組件 能夠熟練操作UI Elements 設計Layout 能夠編寫簡單的Web Dynpro 的應用 5Unit 1 - Web Dynpro Overview What is Web Dynpro Web Dynpro 是SAP在NetWeaver平臺上的主要開發(fā)工具，早期的時候有Web Dynpro for java，基于系統(tǒng)性能等考慮，后來擴展到ABAP平臺，就是web dynpro for ABAP， 它是一種基于Web應用的用戶接口技術。它的設計模式源于MVC模式（m

3、odel view controller）. Web dynpro強調(diào)model與View的分離，model生成應用所需的數(shù)據(jù)，View則用可視化的界面展示數(shù)據(jù)和收集數(shù)據(jù)。它們之間通過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在兩個View之間定義 navigation ，需要用outbound plugs和inbou

5、nd plugs 來對相對應的View創(chuàng)建出口和入口11Unit 1 - Web Dynpro Overview12Unit 1 Web Dynpro Overview 一個簡單的Web Dynpro 應用實例 創(chuàng)建一個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 每個Web Dynpro component都只有一個component controller. 這是一個global controller, 對其他controllers是可見的. The component controller 用于整個Component的功能 這個 controller 沒有可視化的接口. 其lifetime與Component的lifetime一樣，當啟動一個Web Dynpro 應用時, component controller 被Web Dynpro runtime實例化.15Unit 2- We

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

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

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

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

11、Window controller 實例不能被顯式刪除.19Unit 2- Web Dynpro Controllers Attributes Controller: wd_this Context: wd_contextHook Method wddoinit 當controller實例被創(chuàng)建時執(zhí)行 wddoexit當controller實例被刪除時執(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組成，這是一個hierarchical structure called the UI element hierarchy 由一個UI element是始終在 UI element hierarchy中存在的 the ROOTUIELEMENTCONTAINER. 它是整個 UI element hierarchy的root.24Unit 3- Web Dynpro UI elements常用的UI element ContainerTran

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

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

16、在一個tabular format 中排它的child elements ，每一行 的cells可以不同，line break可以通過 assigning 給一個UI elements 來添加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通常綁定一個cardinality為（0:n）or (1: n)的context node ，該node collection下的每個element就成為table的lines table的column 通過一個table cell editor的定義. The cell editor 可

18、以是 TextView, or InputField, or 其他可以用來顯示context attribute 值的UI elements。29Unit 3- Web Dynpro UI elements常用的UI element Table 重要的properties Design（還與readonly和enable有關） 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等） 針對相應的action有相應的action handler method。它有一個重要的接口參數(shù)：WDEVENT，wdevent包含一個內(nèi)表（WDEVENT-parameters） 實例（Filter） 附加1 Table Filter32Unit 3- We

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

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

22、t總有一個父node，叫context root node（根節(jié)點）.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 的值設為true， Web Dynpro framework 會自動把collection中

24、的第一條數(shù)據(jù)設置為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é)點elements的值與其父節(jié)點的the lead selection的值有關時.當 If the lead selection被改變時the supply function 能夠訪問新的lead selection element 并且能夠相應的重新計算子節(jié)點elements的值.44Unit 4- Context at design time45Unit 5- Controller and Context programmingAccessing a Context

26、Node若想訪問一個context elements 或者context attribute ，首先我們需要得到相關context note 的Reference下面兩點很重要:. 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的名字（大寫）這個常量可以用來訪問context note根節(jié)點可以用sta

27、ndard attribute WD_CONTEXT來訪問，其Child nodes 可以通過get_child_node() method來取得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基礎基礎 練習 1. 在上次的練習中，根據(jù)SFLIGHT 表顯示的

34、結果，選中一條，顯示所選航班的預定信息到另一個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. 設置選擇條件CARRID的默認值為LH。 59課程目錄課程目錄 Part 2： Web Dynpro for ABAP高級編程 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課程目標課程目標 了解Web Dynpro 的Message使用 了解Web Dynpro 的Value Help 的使用 了解Web Dynpro 的Popus的使用 能夠熟練使用Component的Reuse 了解更多Web Dynpro 動態(tài)編程技術61Unit 1 - Message Defining the Position of

36、the Message Area 默認的message area 在頁面的頂部. 如果需要另外的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練習練習1. 在第一部分的第一個例子基礎上，當沒有選中flights時，報一個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 沒有可用的search help. Automatic The

39、 value help 由 Web Dynpro runtime決定. Dictionary Search Help 可以選擇一個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實例-OVS 附加1 OVS72Unit 2 Value Help and Semantic Help Field dependent Help Texts可以使用以下技術為 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 為多個fields提供一個help text或提供與field無關的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 在另外一個瀏覽器窗口中打開，而且能夠獨立于原始窗口在屏幕上到處移動. External dialog boxes 一般是modeless. Modal dialog box: A modal dialog box 在當前瀏覽器窗口中打開. The modal

44、dialog box 可以用來顯示同一個component的window, used component 的interface view , 以及confirmation dialog.79Unit 3 - Dialog Boxes(Popus) Steps：1. First, 用WD_COMP_CONTROLLER調(diào)用wd_get_api( )得到一個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.這樣得到一個type IF_WD_WINDOW_MAN- AGER 的Reference (lo_window_manager).3. Now, 不同類型的dialog boxes 可以通過調(diào)用lo_window_manager的相關method來創(chuàng)建.4. 不管是什么類型的 dialog box, 將會得到一個類型為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 高級編程高級編程 練習：OVS ，Popus1. 在查詢fights的例子中，使用OVS作為搜索字段的input help2. 在上面例子的基礎上，當點選search時做一個comfirm 的窗口，當選擇確定時，繼續(xù)查詢，當選擇cancel時，回到查詢頁面TIPS:響應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中加上要實施的component interface .

51、在該tab, 對每一個component interface press the Reimplement button . 這樣會把整個component interface拷貝到 component controller.96Unit 4 Component Reuse實例實例3 使用使用select options component 附加3 select options實例實例4-Using ALV in Web Dynpro附加4 using ALV97Unit 4 Component Reuse 練習練習 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總結 通過Part1 和Part2的學習，我們已經(jīng)介紹了Web Dynpro的基礎知識以及Web Dynpro的高級編程技術。由于時間關系，還有一些細節(jié)無法一一俱到，希望大家課后能夠多做練習。112提問提問Any question ？113 作業(yè)作業(yè)1發(fā)文系統(tǒng)發(fā)文系統(tǒng)BP與BP之間發(fā)送文件通過點擊執(zhí)行文件應用，把文件上傳到服務器，對每個文件分配一個GUID（綁定發(fā)送方和接收方），通過GUID，當接收方執(zhí)行應用時，點擊接收文件就可以看到其他BP發(fā)給自己的文件。114 作業(yè)作業(yè)2通