ABAP-WebDynpro实例.docx

1、WebDynpro实例目的：将SAP中开发的程序在Web中运行进而不需要在客户机上安装SAPGUI。说明：涉及内容：1.1 SE80创建WebDynpro程序1、T-CODE：SE80进入“对象导航“界面，程序类型选择“WebDynpro组件/接口”，然后在程序名处输入程序名，如图1.1-1：图1.1-12、光标置于程序名称处，点击“火车”（或者名称旁边的小眼镜），如果程序不存在（如果存在，则直接显示如图1.1-5）则跳出提示框，然后点击“是”，如图1.1-2：图1.1-23、输入程序描述，选择类型，窗口名称及视图名称会自动带出来，可以直接更改，然后打钩，如图1.1-3：图1.1-34、选择“包”（或存于本地对象），然后点击保存，如图1.1-4：图1.1-4图中也可以查询系统标准的或自定义的页格式。5、保存后生成程序，如图1.1-5：图1.1-51.2 控制器COMPONENTCONTROLLER设置WebDynpro程序的控制器中包含了特性描述、节点、属性、事件以及方法5个页签，用于控制WebDynpro程序的URL连接、初始化等等。因为本练习是为SRM开发的一个页面，所以控制器中仅对Context进行讲述，用于控制生成URL，供SRM程序调用。而其他几个页签的设计在WebDynpro的Main视图中也会讲到，如果这里需要设计的话参考Main中的即可。具体“Context”的节点、属性创建步骤如下。1.2.1 创建Context-Node、Context-AttributeContext下的Node、Attribute可以自定义也可以根据系统中结构的字段类型来定义，本练习采用自定义的方式（下面会提到如何参考结构的字段类型来定义），步骤如下：1.2.1.1创建Node节点1、右击需要创建NODES的节点“CONTEXT”，选择“Create”下的“Node”，如图1.2.1.1-1：图1.2.1.1-1说明：a、Node的创建，也可以使用“CreateUsingTheWizard”（带有导向的创建方法）来创建，以便根据系统结构的字段类型来创建。2、输入Node Name，选择相应的参数，然后打钩，如图1.2.1.1-2：图1.2.1.1-2说明：a、图中的选项为本练习的需求，自定义创建；b、创建节点前面提到了可以通过“CreateUsingTheWizard ”来，也可以在图1.2-2中通过“Add Attributes from Structure”或者“Additional Node”来创建；c、图中的“Cardinality”选项选择1，即节点在WebDynpro程序初始化时就生成一个基数，“Selection”选择1则是节点数据只能单选（如果选择2,即可以多选，具体可参照下拉框中的选项），“Init.LeadSelection”选项选择为X则是程序初始化时就选择一个节点。3、生成Node“Z_ORDER_GUID”，并在属性界面显示在创建时选定的属性，如图1.2.1.1-3：图1.2.1.1-3说明：a、可以在属性界面直接修改Node的属性。1.2.1.2创建Attribute节点1、右击需要创建Attribute的Node“Z_ORDER_GUID”，选择“Create”下的“Attribute”，如图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 Attribute”按钮进行导航添加。3、生成Attribute“ORDER_GUID”，属性框中显示了创建时选择的参数，如图1.2.1.2-3：图1.2.1.2-3说明：a、可以在属性框中直接修改属性值。1.3 视图设计WebDynpro程序的控制器设置完后，就可以进行程序界面及逻辑处理的开发，在程序中就是对视图进行开发设计，而视图下又分为了Properties、Layout、InboundPlugs、OutboundPlugs、Context、Attributes、Actions、Methods这8个设计页签，也就是熟悉了这8个页签的设计也就熟悉了WebDynpro程序的视图设计。在操作之前先简要介绍下上面8个页签的主要功能：Properties：显示视图的主要信息，通常不需要修改；Layout：设计视图界面的布局以及数据绑定；InboundPlugs：入站处理（用于别的页面跳转到该页面）；OutboundPlugs：出站处理（用于跳转的别的页面的判断）；Context：节点设置，也就是定义参数；Attributes：属性界面，显示自动生成的类型，供程序逻辑开发时使用；Actions：事件处理，自动根据按钮生成事件名；Methods：方法，用于程序逻辑的处理。下面将详细介绍视图开发设计。1.3.1创建Context-Node、Context-Attribute在Context中创建了参数以后，才能在Methods、Actions中使用并给参数赋值，并将参数的值传递给绑定的Layout的元素中。在前面1.2.1已经介绍了自定义Node、Attribute的方法。而在本节将介绍根据系统的结构进行定义，并定义四个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-23、根据业务需要选择需要使用的字段，然后打钩，如图1.3.1-3：图1.3.1-34、生成Node并显示刚选定的字段生成相应的Attributes，如图1.3.1-4：图1.3.1-4说明：a、NodeZ_ORDER_PRINT_H等同于定义了名为Z_ORDER_PRINT_H，含有4个字段的工作区；b、Node的Attributes也可以在图中的“DictionaryStructure”中进行添加；c、NodeZ_ORDER_PRINT_H在本练习中为采购订单抬头行项，所以基数“Cardinality”选择为1（1行数据）。5、参考1-4步创建NodeZ_ORDER_PRINT_I（采购订单行项目信息），如图1.3.1-5：图1.3.1-5说明：a、NodeZ_ORDER_PRINT_I在本练习中为采购订单行项目，所以基数“Cardinality”选择为0（0-n行数据），“Selection”参数也是选择0（0-n行数据），也只有选择0才能实现数据行的多选。6、参考1-4步创建NodeZ_ORDER_PARTNER（采购订单合作伙伴信息），如图1.3.1-6：图1.3.1-6说明：a、图中的Attributes没有全部列出来，如果参照改练习做的话在选择合作伙伴Node时可用全选字段。7、参考1-4步创建NodeZ_ORDER_SEL（用于存放选中的数据行信息），如图1.3.1-7，其对应的Attribute属性如图1.3.1-8：图1.3.1-7图1.3.1-8说明：a、图1.3.1-8中显示的是Attribute的属性（自定义），前面几个Node的Attributes就不显示属性了，因为是参照系统结构的。到这里视图“MAIN”的Context就定义完成了。1.3.2创建Layout-Element定义完Context后，接下来就是给视图创建Layout-Element（布局元素），该练习使用的元素有以下几种：Label：标签；TextView：文本显示框（不可编辑）TextEdit：文本显示框（可编辑）Table：表格TableColumn：表格中的列Button：按钮另外，也还有很多的元素可使用，具体可尝试使用。下面就介绍本练习使用的元素的创建方法。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”类型，然后打钩，如图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-23、绑定后在属性框中显示绑定对应的结构-字段，如图1.3.2.2-3：图1.3.2.2-34、绑定“text”后还需要进行“enabled”设置，如图1.3.2.2-4：图1.3.2.2-45、“enabled”设置后，如图1.3.2.2-5：图1.3.2.2-5就完成了TextView元素的创建。1.3.2.3 创建Table元素1、参照1.3.2.1创建类型为“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创建操作步骤如下：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.2.1为TableColumn创建TextView，如图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-12、输入元素ID，选择类型“TEXT_EDIT”，然后打钩，如图1.3.2.5-2：图1.3.2.5-23、创建TextEdit后需要为其绑定数据源，操作如图1.3.2.5-3：图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的组件，选择“InsertElement”，如图1.3.2.6-1：图1.3.2.6-12、输入Button的ID，选择“BUTTON”类型，然后打钩，如图1.3.2.6-2：图1.3.2.6-23、生成Button后，在“text”中为Button命名，然后在“onAction”中为按钮指定触发的事件“PRINT”（在生成Button后保存操作系统就会自动生成该事件，可以在“Actions”页签中找到该事件并对其进行逻辑设计，后续会讲到），如图1.3.2.6-3：图1.3.2.6-3Button添加完毕，而Button生成的事件及其对应的处理器在“Actions”页签中进行，后续会讲到。到这里该练习所使用到的Layout元素就都介绍到了。1.3.3 Attributes属性介绍前面创建了WebDynpro程序后，Attributes页签中就会生成3个属性，并对应关联的类型，如图1.3.3-1：图1.3.3-1说明：a、WD_CONTEXT用于关联Main视图中的Context，使得数据在查询后可以显示到Layout元素中；b、WD_THIS用于MAIN视图内部的自关联，略；c、WD_COMP_CONTROLLER用于管理WebDynpro程序中的控制器COMPONENTCONTROLLER，这样才能将控制器中的Context在MAIN视图中可以引用。1.3.4视图初始化数据处理在前面两个页签中已经把Context（参数）和布局（Layout）元素完成了定义和绑定，接下来就为视图进行数据初始化输出处理。操作步骤如下：1、在视图的“Methods”页签中，找到“WDDOINIT”方法，双击进行代码编写，如图1.3.4-1：图1.3.4-12、代码如下：methodWDDOINIT.DATA:lo_componentTYPEREFTOif_wd_component,lo_contextTYPEREFTOif_wd_context,lo_controllertypeREFTOif_wd_controller,lo_nodetypeREFTOif_wd_context_node,lo_childTYPEREFTOif_wd_context_node,lo_cmp_usageTYPEREFTOif_wd_component_usage,lv_guidTYPEbbp_guid,lr_header_orderTYPEBBP_PDS_SUSPO_HEADER_D,lr_items_orderTYPESTANDARDTABLEOFBBP_PDS_SUSPO_ITEM_D,ls_items_orderTYPEBBP_PDS_SUSPO_ITEM_D,lr_parternTYPETABLEOFBBP_PDS_PARTNER,node_order_hTYPEREFTOif_wd_context_node,node_order_iTYPEREFTOif_wd_context_node,node_order_pTYPEREFTOif_wd_context_node.lo_component=wd_comp_controller-wd_get_api().lo_controller?=lo_component.CALLMETHODlo_controller-get_contextRECEIVINGcontext=lo_context.lo_node=lo_context-root_node.lo_child=lo_node-get_child_node(Z_ORDER_GUID).CALLMETHODlo_child-GET_ATTRIBUTEEXPORTINGNAME=ORDER_GUIDIMPORTINGVALUE=lv_guid. 通过调用函数BBP_PD_SUSPO_GETDETAIL根据lv_guid（URL）查询采购订单信息CALLFUNCTIONBBP_PD_SUSPO_GETDETAILEXPORTINGI_GUID=lv_guidIMPORTINGE_HEADER=lr_header_order*ET_ATTACH=TABLESE_ITEM=lr_items_orderE_PARTNER=lr_partern.loopatlr_items_orderINTOls_items_order.SHIFTls_items_order-ordered_prodLEFTDELETINGLEADING0.SHIFTls_items_order-SRC_ITM_IDLEFTDELETINGLEADING0.SHIFTls_items_order-NUMBER_INTLEFTDELETINGLEADING0.modifylr_items_orderFROMls_items_order.ENDLOOP.DELETElr_parternWHEREPARTNER_FCT00000019.node_order_h=WD_CONTEXT-get_Child_Node(name=Z_ORDER_PRINT_H).node_order_i=WD_CONTEXT-get_Child_Node(name=Z_ORDER_PRINT_I).node_order_p=WD_CONTEXT-get_Child_Node(name=Z_ORDER_PARTNER).node_order_h-BIND_STRUCTURE(lr_header_order).node_order_i-bind_table(lr_items_order).node_order_p-bind_table(lr_partern).endmethod.1.3.5Button事件处理Layout中添加了按钮后，会在”Actions“页签中生成与之对应的“Action”（即按钮的事件名）和“EventHandler”（事件实现功能的方法名），。下面就对前面添加的按钮进行事件处理，操作步骤如下：1、在视图的“Actions”页签中，找到按钮对应的事件“PRINT”对应的Handler“ONACTIONPRINT”，双击进行代码编写，如图1.3.5-1：图1.3.5-12、代码如下：methodONACTIONPRINT.DATA:LV_FUNCTION_NAMETYPERS38L_FNAM,LS_ARCHIVE_INDEXTYPETOA_DARA,LS_ARCHIVE_PARAMETERSTYPEARC_PARAMS,LT_ARCHIVE_INDEXTYPETSFDARA,LV_PPF_SAP_OBJECTTYPESAEANWDID,LV_PPF_AR_OBJECTTYPESAEOBJECT,LS_CONTROL_PARAMETERSTYPESSFCTRLOP,LS_OUTPUT_OPTIONSTYPESSFCOMPOP,LV_MEDIUM_TYPETYPEPPFDMETYPE,LS_MAIL_APPL_OBJTYPESWOTOBJID,LS_MAIL_RECIPIENTTYPESWOTOBJID,LS_MAIL_SENDERTYPESWOTOBJID,LV_USER_SETTINGSTYPETDBOOLVALUEX,LS_FORM_ATTACHMENTTYPEBBPS_FORMS_OUTPUT,LT_ERROR_BIDTYPETABLEOFBBP_TR_ERROR,LV_ARCHDONETYPETDARCDONE,LV_ARCHIVE_COPIESTYPETDARCCOP,LV_ARMODTYPESYARMOD,LV_PPF_ARMODTYPESYARMOD,LS_DOCUMENT_OUTPUT_INFOTYPESSFCRESPD,#ECNEEDEDLS_JOB_OUTPUT_INFOTYPESSFCRESCL,#ECNEEDEDLS_JOB_OUTPUT_OPTIONSTYPESSFCRESOP,LV_BIN_FILESIZETYPEI,LS_PDFTYPEXSTRING,LT_PDF_LINESTYPETABLEOFTLINE,LV_PDF_STREAMTYPEXSTRING.data:lo_api_controllerTYPEREFtoif_wd_controller,lo_message_managerTYPEREFTOif_wd_message_manager.Data:context_nodetypereftoif_wd_context_node.Data:context_node2typereftoif_wd_context_node,context_node3typereftoif_wd_context_node,v_Indextypei.Data:it_order_itemtypeSTANDARDTABLEOFif_MAIN=Element_z_order_print_i,wa_order_itemTYPEif_MAIN=Element_z_order_print_i,wa_selrowtypeif_MAIN=Element_z_order_print_i,ld_elementtypereftoif_wd_context_element,it_rowstypeWDR_CONTEXT_ELEMENT_SET,wa_rowslikelineofit_rows.DATA:ld_indextypei.Data:it_partnertypeSTANDARDTABLEOFif_MAIN=Element_z_order_partner,wa_partnerTYPEif_MAIN=Element_z_order_partner.DATA:SSFFLAG(6)TYPEC.DATA:G_SSFCRESCLTYPESSFCRESCL.context_node=wd_context-get_child_node(name=Z_ORDER_PRINT_I).context_node-get_static_attributes_table(importingtable=it_order_item).context_node2=wd_context-get_child_node(name=Z_ORDER_PARTNER).context_node2-get_static_attributes_table(importingtable=it_partner).ifit_partnerisNOTINITIAL.READTABLEit_partnerINDEX1intowa_partner.ENDIF.*ld_element=context_node-get_lead_selection().it_rows=context_node-GET_SELECTED_ELEMENTS().context_node3=wd_Context-get_Child_Node(Name=Z_ORDER_SEL).v_Index=context_node3-GET_LEAD_SELECTION_INDEX().ifit_rowsisINITIAL.lo_api_controller?=wd_this-wd_get_api().CALLMETHODlo_api_controller-get_message_managerRECEIVINGmessage_manager=lo_message_manager.CALLMETHODlo_message_manager-raise_error_messageEXPORTINGmessage_text=请选择需要打印的数据！.endif.SSFFLAG=.设置打开标志为空LS_CONTROL_PARAMETERS-NO_OPEN=X.LS_CONTROL_PARAMETERS-NO_CLOSE=X.LS_CONTROL_PARAMETERS-GETOTF=X.CALLFUNCTIONSSF_OPENEXPORTINGCONTROL_PARAMETERS=LS_CONTROL_PARAMETERSEXCEPTIONSFORMATTING_ERROR=1INTERNAL_ERROR=2SEND_ERROR=3USER_CANCELED=4OTHERS=5.IFSY-SUBRC=0.SSFFLAG=X.设置打开标志选中ENDIF.LOOPATit_rowsINTOwa_rows.CALLMETHODwa_rows-get_static_attributesIMPORTINGstatic_attributes=wa_selrow.readTABLEit_order_itemintowa_order_itemwithkeyNUMBER_INT=wa_selrow-number_int.ld_index=sy-tabix.indexofselectedrow*getthefunctionnameforthissmartformCALLFUNCTIONSSF_FUNCTION_MODULE_NAMEEXPORTINGFORMNAME=Z_ORDER_PRINT_BCIMPORTINGFM_NAME=LV_FUNCTION_NAMEEXCEPTIONSNO_FORM=1NO_FUNCTION_MODULE=2OTHERS=3.DATA:V_E_DEVTYPETYPERSPOPTYPE.DATA:LV_LANGUTYPETDSPRAS.DATA:ev_is_unicode_system(1)TYPEc.LS_CONTROL_PARAMETERS-NO_DIALOG=X.LS_CONTROL_PARAMETERS-GETOTF=X.ls_control_parameters-langu=1.ls_output_options-TDDEST=LP01.CALLFUNCTIONLV_FUNCTION_NAMEEXPORTINGCONTROL_PARAMETERS=LS_CONTROL_PARAMETERSOUTPUT_OPTIONS=LS_OUTPUT_OPTIONSUSER_SETTINGS=wa_order_item=wa_order_itemwa_partner=wa_partnerIMPORTINGJOB_OUTPUT_INFO=LS_JOB_OUTPUT_INFOEXCEPTIONSFORMATTING_ERROR=1INTERNAL_ERROR=2SEND_ERROR=3USER_CANCELED=4OTHERS=5.ENDLOOP.CALLFUNCTIONSSF_CLOSEcloseIMPORTINGJOB_OUTPUT_INFO=G_SSFCRESCLEXCEPTIONSFORMATTING_ERROR=1INTERNAL_ERROR=2SEND_ERROR=3OTHERS=4.IFSY-SUBRC0.MESSAGEIDSY-MSGIDTYPESY-MSGTYNUMBERSY-MSGNOWITHSY