ABAPWebDynpro实例Word文档格式.docx

1、a、Node 的创建，也可以使用“ CreateUsingTheWizard ”（带有导向的创建方法）来 创建，以便根据系统结构的字段类型来创建。2 、输入 Node Name ，选择相应的参数，然后打钩，如图 1.2.1.1-2 ：图 1.2.1.1-2a、图中的选项为本练习的需求，自定义创建；b 、创建节点前面提到了可以通过“ CreateUsingTheWizard ”来，也可以在图 1.2-2 过“ Add Attributes from Structure ”或者“ Additional Node ”来创建；c、图中的“ Cardinality ”选项选择 1，即节点在 WebDyn

2、pro 程序初始化时就生成一 个基数，“ Selection ”选择 1 则是节点数据只能单选 （如果选择 2,即可以多选， 具体可参照 下拉框中的选项） ，“ Init.LeadSelection ”选项选择为 X 则是程序初始化时就选择一个节点。3、生成 Node “Z_ORDER_GUID ”，并在属性界面显示在创建时选定的属性，如图 1.2.1.1-3 ：图 1.2.1.1-3a、可以在属性界面直接修改 Node 的属性。1.2.1.2创建 Attribute 节点1、右击需要创建 Attribute 的 Node “Z_ORDER_GUID ”，选择“Create 下的“ Attri

3、bute ”，如图 1.2.1.2-1 ：图 1.2.1.2-12、输入 AttributeName ，然后选择 Type assignment 和 Type （根据实际需要输入），然后打钩，如图 1.2.1.2-2 ：图 1.2.1.2-2按钮进行导航添加。a、也可以通过图中的“ Additional Attribute3、生成 Attribute “ORDER_GUID ”，属性框中显示了创建时选择的参数，如图 1.2.1.2-3 ：图 1.2.1.2-3a、可以在属性框中直接修改属性值。1.3视图设计WebDynpro 程序的控制器设置完后， 就可以进行程序界面及逻辑处理的开 发，在程序

4、中就是对视图进行开发设计， 而视图下又分为了 Properties 、Layout 、 InboundPlugs 、OutboundPlugs 、Context 、Attributes 、Actions 、Methods 这 8 个设计页签，也就是熟悉了这 8 个页签的设计也就熟悉了 WebDynpro 程 序的视图设计。在操作之前先简要介绍下上面 8 个页签的主要功能：Properties ：显示视图的主要信息，通常不需要修改；Layout ：设计视图界面的布局以及数据绑定；InboundPlugs ：入站处理（用于别的页面跳转到该页面）；OutboundPlugs ：出站处理（用于跳转的别

5、的页面的判断）；Context ：节点设置，也就是定义参数；Attributes ：属性界面，显示自动生成的类型，供程序逻辑开发时使用；Actions ：事件处理，自动根据按钮生成事件名；Methods ：方法，用于程序逻辑的处理。下面将详细介绍视图开发设计。1.3.1创建 Context-Node、Context-Attribute在 Context 中创建了参数以后，才能在 Methods 、 Actions 中使用并给参 数赋值，并将参数的值传递给绑定的 Layout 的元素中。在前面 1.2.1 已经介绍 了自定义 Node 、 Attribute 的方法。而在本节将介绍根据系统的结构

6、进行定义，并定义四个 Node ：1、Node “Z_ORDER_PRINT_H ”（采购订单抬头信息）创建：右击需要创建NODES 的节点“CONTEXT”，选择“Create ”下的“Node ”，如图 1.3.1-1 ：图 1.3.1-12、输入 NodeName ，然后输入要参考的结构名，再选择其他参数，选择完后点击” AddAttributesFromStructure “进行结构的字段选择（为 Node 创建 Attributes ），如图 1.3.1-2 ：图 1.3.1-21.3.1-3 ：3、根据业务需要选择需要使用的字段，然后打钩，如图图 1.3.1-34、生成 Node

7、并显示刚选定的字段生成相应的 Attributes ，如图 1.3.1-4 ：图 1.3.1-4a、NodeZ_ORDER_PRINT_H 等同于定义了名为 Z_ORDER_PRINT_H ，含有 4 个字 段的工作区；b、 Node 的 Attributes 也可以在图中的“ DictionaryStructure ”中进行添加；c、 Node 在本练习中为采购订单抬头行项，所以基数 “Cardinality ”选择为 1（ 1 行数据）。5、参考 1-4 步创建 Node Z_ORDER_PRINT_I （采购订单行项目信息） ，如图1.3.1-5 ：图 1.3.1-5 在本练习中为采购订

8、单行项目， 所以基数 “ Cardinality 选择为 0（0-n 行数据），“ Selection ”参数也是选择 0 （0-n 行数据），也只有选择 0 才能 实现数据行的多选。6、参考 1-4 步创建 Node Z_ORDER_PARTNER （采购订单合作伙伴信息） ，如图 1.3.1-6 ：图 1.3.1-6a、图中的 Attributes 没有全部列出来，如果参照改练习做的话在选择合作伙伴 Node 时可用全选字段。7、参考 1-4 步创建 Node Z_ORDER_SEL （用于存放选中的数据行信息） ，如图1.3.1-7 ，其对应的 Attribute 属性如图 1.3.1-

9、8 ：图 1.3.1-7图 1.3.1-8a、图 1.3.1-8 中显示的是 Attribute 的属性（自定义） ，前面几个 Node 的 Attributes 就不显示属性了，因为是参照系统结构的。到这里视图“ MAIN ”的 Context 就定义完成了。1.3.2创建 Layout-Element定义完 Context 后，接下来就是给视图创建 Layout-Element （布局元素） ，该练习使 用的元素有以下几种：Label ：标签；TextView ：文本显示框（不可编辑）TextEdit ：文本显示框（可编辑）Table ：表格TableColumn ：表格中的列Button

10、 ：按钮另外，也还有很多的元素可使用，具体可尝试使用。 下面就介绍本练习使用的元素的创建方法。1.3.2.1 创建 Label 元素1 、点击“ Layout ”页签，如果是进入该程序首次点击“ Layout ”，会弹出登录的提示框，点击“确定”，如图 1.3.2.1-1 ，如果不是首次则直接显示布局，如图 1.3.2.1-2 ：图 1.3.2.1-1图 1.3.2.1-22 、右击需要创建元素的组件，选择“ InsertElement ”进行新建 Element ，如图 1.3.2.1-3 ：图 1.3.2.1-33、输入 Element 的 ID，选择“ LABEL”类型，然后打钩，如图

11、1.3.2.1-4 ：图 1.3.2.1-44 、生成 Label 元素，并在布局界面显示，修改元素的“ text属性为证日期”，如图 1.3.2.1-5 ：图 1.3.2.1-5Label 元素就创建好了。1.3.2.2创建 TextView 元素1、参照 1.3.2.1 创建类型为“ TEXT_VIEW”的元素，如图 1.3.2.2-1 ：图 1.3.2.2-12、点击 TextView 元素属性中“ text ”对应的按钮，在弹出的绑定窗口中进行元素与 Context 节点的绑定，选中需要绑定的 Context 节点，然后打钩，如 图 1.3.2.2-2 ：图 1.3.2.2-34 、绑

12、定“ text ”后还需要进行“ enabled ”设置，如图 1.3.2.2-4 ：图 1.3.2.2-23、绑定后在属性框中显示绑定对应的结构 -字段，如图 1.3.2.2-3 ：AnfPjJlNRld 口 TANidd 皿J_Niad 珂 *h収 hitxi丄na -H3LLI E 时Ji d=a yrrtfiNcoinawaiHiniocia 口 *4d=3tJJL?aa rkl呂:Tz 4?L1.lyrttNn MruuHdia dz njiTmh TF T_ UHynmUP q YldHjnriR.-. n MTl UHWHICTH TZ N Vflmarao i XMdid zJ

13、LMI 瓯理佃 1NRH ltfnUQ znt*wOjSUC 亠1 址:J 塔Cd： ZlTHJJd 曲EP，MI旳Lou sou bruMtfcT?! jaHai-mniUHlOQNn HlTlAIRMpaOH 3Z NRffli1 Ton JSIU 1NW 鈕阳Q ZMW 5 血丘二血七珂g匚匕h #匚aariiNWirahBiHinjLODMi 5HH=W J_X31MO3 |_ 由suoqpy5K-n|（j punwnQ五旳日二:9-2ZS L HW 日M “ peiqeuj yws e i nsue WdiMiD - m （i） rowk * sfpuiq5uEsp1 w*v_3】r

14、iL曹期t丄曲，恤OlOUf tHILT FJCJlfilTRnLOO -H 丄WJtf HzffllVlMtrJlTIdHJ UII1UUB 1 *吐hW丄NJJUJ归wlzlli丄lx?匚占SPU9W_B3JJJOD *Y 丄Cl ONl） AlrfCtoj d，科P iAJ Ip阿M c 3*4山皿讨什冲甘p*貫目电也勺1 pu-g zz2I.卄岀L ：L HVOSNiSOd q- * u J J- J=d a n- + ornp Q 亠-i. - 丄n%_ .鼻HLHssoeij-t就完成了 TextView 元素的创建。1.3.2.3创建 Table 元素1、参照 1.3.2.1 创

15、建类型为“ TABLE”的元素，如图 1.3.2.3-1 ：图 1.3.2.3-12、创建 Table 元素后，为其绑定数据源，操作如图 1.3.2.3-2 ：图 1.3.2.3-23、绑定后在属性中显示绑定源，如图 1.3.2.3-3 ：图 1.3.2.3-31.3.2.4创建 TableColumn 元素TableColumn 元素只能在 Table 元素下创建。而且创建 TableColumn 后 还得为 TableColumn 创建TextView （参考 1.3.2.2 ）、TextEdit （参考 1.3.2.5 ） 等元素后才能在 Table 中显示数据， TableColumn

16、 创建操作步骤如下：1、右击 Table 元素，选择“ InsertGROUPColumn ”，如图 1.3.2.4-1 ：图 1.3.2.4-12、输入元素 ID ，选择“ TABLE_COLUMN ”类型，然后打钩，如图 1.3.2.4-2 ：图 1.3.2.4-23 、生成 TableColumn 元素，如图 1.3.2.4-3图 1.3.2.4-3 a、创建完 TableColumn 后会自动生成一个 Label 元素。创建创建完 TableColumn 以后就可以为其创建相关的 TextView 、 TextEdit 元素了。4、 TextView （不可编辑元素）创建：参照 1.3

17、.2.1 为 TableColumnTextView ，如图 1.3.2.4-4 ：图 1.3.2.4-45、TextEdit（可编辑元素）创建：参照 1.3.2.5 为 TableColumn 创建 TextEdit ，如图 1.3.2.4-5 ：图 1.3.2.4-5创建完毕。1.3.2.5创建 TextEdit 元素本练习的 TextEdit 元素是在 TableColumn 下创建的，创建步骤如下：1、右击 Table 元素，选择“ InsertGROUPColumn ”，如图 1.3.2.5-1 ：图 1.3.2.5-23、创建 TextEdit 后需要为其绑定数据源，操作如图 1.

18、3.2.5-3 ：图 1.3.2.5-12、输入元素 ID ，选择类型“ TEXT_EDIT”，然后打钩，如图 1.3.2.5-2 ：图 1.3.2.5-34、指定完数据源后，需要配置“ enabled操作如图 1.3.2.5-4 ：图 1.3.2.5-45、配置完“ enabled ”，操作如图 1.3.2.5-5 ：图 1.3.2.5-5就完成了 TextEdit 的创建。1.3.2.6创建 Button 元素当 Web 页面中的数据需要操作或者打印时，可通过按钮来触发事件，以实 现数据处理， Button 创建步骤如下：1、右击需要创建 Button 的组件， 选择“ InsertEle

19、ment ”，如图 1.3.2.6-1 ：图 1.3.2.6-12、输入 Button 的 ID，选择“BUTTON ”类型，然后打钩，如图 1.3.2.6-2 ：图 1.3.2.6-2命名，然后在“ onAction ”中3、生成 Button 后，在“ text ”中为 Button为按钮指定触发的事件“ PRINT ”（在生成 Button 后保存操作系统就会自动生 成该事件，可以在“ Actions ”页签中找到该事件并对其进行逻辑设计，后续会 讲到），如图 1.3.2.6-3 ：图 1.3.2.6-3Button 添加完毕， 而 Button 生成的事件及其对应的处理器在 “ Act

20、ions ”页签中进行，后续会讲到。到这里该练习所使用到的Layout 元素就都介绍到了。1.3.3Attributes 属性介绍前面创建了 WebDynpro程序后， Attributes 页签中就会生成 3 个属性，并对应关联的类型， 如图 1.3.3-1 ：图 1.3.3-1a、WD_CONTEXT 用于关联 Main 视图中的 Context ，使得数据在查询后可以显示到Layout 元素中；b、 WD_THIS 用于 MAIN 视图部的自关联，略；c、 WD_COMP_CONTROLLER 用于管理 WebDynpro 程序中的控制器COMPONENTCONTROLLER ，这样才能

21、将控制器中的 Context 在 MAIN 视图中可以引用。1.3.4视图初始化数据处理在前面两个页签中已经把 Context （参数）和布局（ Layout ）元素完成了定义和绑定，接下来就为视图进行数据初始化输出处理。操作步骤如下：1、在视图的“ Methods ”页签中，找到“ WDDOINIT ”方法，双击进行代码编写，如图 1.3.4-1 ：图 1.3.4-12、代码如下：method WDDOINITDATA:lo_componentlo_contextTYPE REF TO if_wd_component ,TYPE REF TO if_wd_context ,lo_contro

22、llertype REF TO if_wd_controller ,lo_nodetype REF TO if_wd_context_node ,lo_childTYPE REF TO if_wd_context_node ,lo_cmp_usageTYPE REF TO if_wd_component_usage ,lv_guidTYPE bbp_guid ,lr_header_orderTYPE BBP_PDS_SUSPO_HEADER_D ,lr_items_orderTYPE STANDARD TABLE OF BBP_PDS_SUSPO_ITEM_Dls_items_orderTYPE BBP_PDS_SUSPO_ITEM_Dlr_parternTYPE TABLE OFBBP_PDS_PARTNERnode_order_hTYPE REF TOif_wd_context_nodenode_order_inode_order_pif