ABAPWebDynpro实例Word格式.docx

ABAPWebDynpro实例Word格式.docx

《ABAPWebDynpro实例Word格式.docx》由会员分享，可在线阅读，更多相关《ABAPWebDynpro实例Word格式.docx（38页珍藏版）》请在冰豆网上搜索。

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-1

2、输入AttributeName，然后选择Typeassignment和Type（根据实际需要输入），然后打钩，如图1.2.1.2-2：

图1.2.1.2-2

a、也可以通过图中的“AdditionalAttribute”按钮进行导航添加。

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-1

2、输入NodeName，然后输入要参考的结构名，再选择其他参数，选择完后点击”AddAttributesFromStructure“进行结构的字段选择（为Node创建Attributes），如图1.3.1-2：

图1.3.1-2

3、根据业务需要选择需要使用的字段，然后打钩，如图1.3.1-3：

图1.3.1-3

4、生成Node并显示刚选定的字段生成相应的Attributes，如图1.3.1-4：

图1.3.1-4

a、Node"

Z_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

在本练习中为采购订单行项目，所以基数“Cardinality”选择为0（0-n行数据），“Selection”参数也是选择0（0-n行数据），也只有选择0才能实现数据行的多选。

6、参考1-4步创建Node"

Z_ORDER_PARTNER"

（采购订单合作伙伴信息），如图1.3.1-6：

图1.3.1-6

a、图中的Attributes没有全部列出来，如果参照改练习做的话在选择合作伙伴Node时可用全选字段。

7、参考1-4步创建Node"

Z_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-2

2、右击需要创建元素的组件，选择“InsertElement”进行新建Element，如图1.3.2.1-3：

图1.3.2.1-3

3、输入Element的ID，选择“LABEL”类型，然后打钩，如图1.3.2.1-4：

图1.3.2.1-4

4、生成Label元素，并在布局界面显示，修改元素的“text”属性为“凭证日期”，如图1.3.2.1-5：

图1.3.2.1-5

Label元素就创建好了。

1.3.2.2创建TextView元素

1、参照1.3.2.1创建类型为“TEXT_VIEW”的元素，如图1.3.2.2-1：

图1.3.2.2-1

2、点击TextView元素属性中“text”对应的按钮，在弹出的绑定窗口中进行元素与Context节点的绑定，选中需要绑定的Context节点，然后打钩，如图1.3.2.2-2：

图1.3.2.2-2

3、绑定后在属性框中显示绑定对应的结构-字段，如图1.3.2.2-3：

图1.3.2.2-3

4、绑定“text”后还需要进行“enabled”设置，如图1.3.2.2-4：

图1.3.2.2-4

5、“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-1

2、创建Table元素后，为其绑定数据源，操作如图1.3.2.3-2：

图1.3.2.3-2

3、绑定后在属性中显示绑定源，如图1.3.2.3-3：

图1.3.2.3-3

1.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-1

2、输入元素ID，选择“TABLE_COLUMN”类型，然后打钩，如图1.3.2.4-2：

图1.3.2.4-2

3、生成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-4

5、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-1

2、输入元素ID，选择类型“TEXT_EDIT”，然后打钩，如图1.3.2.5-2：

图1.3.2.5-2

3、创建TextEdit后需要为其绑定数据源，操作如图1.3.2.5-3：

图1.3.2.5-3

4、指定完数据源后，需要配置“enabled”，操作如图1.3.2.5-4：

图1.3.2.5-4

5、配置完“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-1

2、输入Button的ID，选择“BUTTON”类型，然后打钩，如图1.3.2.6-2：

图1.3.2.6-2

3、生成Button后，在“text”中为Button命名，然后在“onAction”中为按钮指定触发的事件“PRINT”（在生成Button后保存操作系统就会自动生成该事件，可以在“Actions”页签中找到该事件并对其进行逻辑设计，后续会讲到），如图1.3.2.6-3：

图1.3.2.6-3

Button添加完毕，而Button生成的事件及其对应的处理器在“Actions”页签中进行，后续会讲到。

到这里该练习所使用到的Layout元素就都介绍到了。

1.3.3Attributes属性介绍

前面创建了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-1

2、代码如下：

method 

WDDOINIT 

.

DATA:

lo_component 

TYPE 

REF 

TO 

if_wd_component,

lo_context 

if_wd_context,

lo_controller 

type 

if_wd_controller,

lo_node 

if_wd_context_node,

lo_child 

lo_cmp_usage 

if_wd_component_usage,

lv_guid 

bbp_guid,

lr_header_order 

BBP_PDS_SUSPO_HEADER_D,

lr_items_order 

STANDARD 

TABLE 

OF 

BBP_PDS_SUSPO_ITEM_D,

ls_items_order 

lr_partern 

BBP_PDS_PARTNER,

node_order_h 

node_order_i 

node_order_p 

if_wd_context_node.

= 

wd_comp_controller->

wd_get_api（ 

）.

?

lo_component.

CALL 

METHOD 

lo_controller->

get_context

RECEIVING

context 

lo_context.

lo_context->

root_node.

lo_node->

get_child_node（ 

'

Z_ORDER_GUID'

lo_child->

GET_ATTRIBUTE

EXPORTING

NAME 

ORDER_GUID'

IMPORTING

VALUE 

lv_guid.

"

通过调用函数BBP_PD_SUSPO_GETDETAIL根据lv_guid（URL）查询采购订单信息

FUNCTION 

BBP_PD_SUSPO_GETDETAIL'

I_GUID 

lv_guid

E_HEADER 

lr_header_order

* 

ET_ATTACH 

=

TABLES

E_ITEM 

lr_items_order

E_PARTNER 

lr_partern.

loop 

at 

INTO 

ls_items_order.

SHIFT 

ls_items_order-ordered_prod 

LEFT 

DELETING 

LEADING 

0'

ls_items_order-SRC_ITM_ID 

ls_items_order-NUMBER_INT 

modify 

FROM 

ENDLOOP.

DELETE 

WHERE 

PARTNER_FCT 

<

>

00000019'

WD_CONTEXT->

get_Child_Node（ 

name 

Z_ORDER_PRINT_H'

Z_ORDER_PRINT_I'

Z_ORDER_PARTNER'

node_order_h->

BIND_STRUCTURE（ 

node_order_i->

bind_table（ 

node_order_p->

endmethod.

1.3.5Button事件处理

Layout中添加了按钮后，会在”Actions“页签中生成与之对应的“Action”（即按钮的事件名）和“EventHandler”（事件实现功能的方法名），。

下面就对前面添加的按钮进行事件处理，操作步骤如下：

1、在视图的“Actions”页签中，找到按钮对应的事件“PRINT”对应的Handler“ONACTIONPRINT”，双击进行代码编写，如图1.3.5-1：

图1.3.5-1

ONACTIONPRINT 

LV_FUNCTION_NAME 

RS38L_FNAM,

LS_ARCHIVE_INDEX 

TOA_DARA,

LS_ARCHIVE_PARAMETERS 

ARC_PARAMS,

LT_ARCHIVE_INDEX 

TSFDARA,

LV_PPF_SAP_OBJECT 

SAEANWDID,

LV_PPF_AR_OBJECT 

SAEOBJECT,

LS_CONTROL_PARAMETERS 

SSFCTRLOP,

LS_OUTPUT_OPTIONS 

SSFCOMPOP,

LV_MEDIUM_TYPE 

PPFDMETYPE,

LS_MAIL_APPL_OBJ 

SWOTOBJID,

LS_MAIL_RECIPIENT 

LS_MAIL_SENDER 

LV_USER_SETTINGS 

TDBOOL 

X'

LS_FORM_ATTACHMENT 

BBPS_FORMS_OUTPUT,

LT_ERROR_BID 

BBP_TR_ERROR,

LV_ARCHDONE 

TDARCDONE,

LV_ARCHIVE_COPIES 

TDARCCOP,

LV_ARMOD 

SYARMOD,

LV_PPF_ARMOD 

LS_DOCUMENT_OUTPUT_INFO 

SSFCRESPD, 

"

#EC 

NEEDED

LS_JOB_OUTPUT_INFO 

SSFCRESCL,