ABAPWebDynpro实例Word文档格式.docx
《ABAPWebDynpro实例Word文档格式.docx》由会员分享，可在线阅读，更多相关《ABAPWebDynpro实例Word文档格式.docx（41页珍藏版）》请在冰豆网上搜索。
a、Node的创建，也可以使用“CreateUsingTheWizard”（带有导向的创建方法）来创建，以便根据系统结构的字段类型来创建。
2、输入NodeName，选择相应的参数，然后打钩，如图1.2.1.1-2：
图1.2.1.1-2
a、图中的选项为本练习的需求，自定义创建；
b、创建节点前面提到了可以通过“CreateUsingTheWizard”来，也可以在图1.2-2过“AddAttributesfromStructure”或者“AdditionalNode”来创建；
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-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
1.3.1-3：
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-3
4、绑定“text”后还需要进行“enabled”设置，如图1.3.2.2-4：
图1.3.2.2-2
3、绑定后在属性框中显示绑定对应的结构-字段，如图1.3.2.2-3：
AnfPj
JlNRld口•
TANidd皿
J_Niad珂*
h収hitxi丄na^-
H3LLIE时
Jid=ay^rrtfiNcoinawaiHiniocia口*
4
d=3tJJL?
aa"
rkl呂:
Tz4"
?
L1.
lyrtt^NnMruuHd"
i»
ad~znj^iT
mhTFT「_UHynmUPqYld
HjnriR.-.nMTlUHWHICTHTZNVfl
maraoiXMdidz
JLMI瓯理佃1NRHltfnUQznt*w
Oj]SUC亠1址:
J塔]Cd：
Z'
l'
TH
JJd曲EP，MI旳
LousoubruMtfcT?
!
jaHa~i£
-mni
UH~lOQNnHlTlAIRMpaOH3~ZNRffli
1T
on™JSI'
U1NW鈕阳QZMW5血丘』■二血■七珂g匚匕』h#匚
aarii¥
±
NWirahBiHinjLODMi□■
5HH=WJ_X31MO3|_由
suoqpy
5K-n|（jpunw^nQ
五旳日二
:
9-2ZSLHW'
日M“peiqeujy
wsein
sueWdiMiD-m（i）row
k■
*s
■<
r（±
jQ
•*
n甲阖
7
iJi-quE
召_、
"
50d"
H_itffbd■曰羽0~Z'
HlVkl
■ytB；
p-Epueas
jq叮旳LEUJ菲
■
a
府iMJHJgDueiA
JOXOrj]nuauj
I
IF-dAe
ojne
L
ApBiqeu»
p>
fpuiq5
uE^sp
1w
■*v_
3】riL曹期
t丄曲
，恤O『lOUft
HILT□♦
FJCJl'
filT^'
RnLOO□-
H丄WJtfHzffllVlMtrJlTIdHJUII1UUB1*
吐hW丄NJJUJ归wlzlli丄lx?
®
匚占
SPU9W_B3JJJOD□*
Y丄
ClONl）AlrfCtojd，科Pi»
AJ[I
p阿Mc
3
*4山皿」讨
£
什冲甘p*貫目电也勺1pu-g•
■zz2
「I.卄岀L：
L□
HVO~SN[iSOdq-*uJJ'
-J=dan-+ornpQ亠
」-i.-—■
丄n%_[.鼻
HL^H
■ssoeij-t
就完成了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-2
3、创建TextEdit后需要为其绑定数据源，操作如图1.3.2.5-3：
图1.3.2.5-1
2、输入元素ID，选择类型“TEXT_EDIT”，然后打钩，如图1.3.2.5-2：
图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
命名，然后在“onAction”中
3、生成Button后，在“text”中为Button
为按钮指定触发的事件“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、代码如下：
methodWDDOINIT
DATA:
lo_component
lo_context
TYPEREFTOif_wd_component,
TYPEREFTOif_wd_context,
lo_controller
typeREFTOif_wd_controller,
lo_node
typeREFTOif_wd_context_node,
lo_child
TYPEREFTOif_wd_context_node,
lo_cmp_usage
TYPEREFTOif_wd_component_usage,
lv_guid
TYPEbbp_guid,
lr_header_order
TYPEBBP_PDS_SUSPO_HEADER_D,
lr_items_order
TYPESTANDARDTABLEOFBBP_PDS_SUSP
O_ITEM_D
ls_items_order
TYPEBBP_PDS_SUSPO_ITEM_D
lr_partern
TYPETABLEOF
BBP_PDS_PARTNER
node_order_h
TYPEREFTO
if_wd_context_node
node_order_i
node_order_p
if
升级会员 