在完成了本地配置以及服务器端配置后，就可以通过NWDS进行表单的开发以及使用了，具体过程如下。

1）在Web Dynpro项目中打开任意一个视图，首先创建表单所需要的上下文结点和特性。创建一个集合属性为“1··1”的“PrintNode”结点，并包含一个“header”结点和一个“contentList”，集合属性分别为“1··1”和“0··n”，用于存放对应的表头信息和行项目信息。随后创建对应字段的相关特性，如图8-36所示。

图8-36 上下文清单

2）右击“Outline”中的“RootElement”根结点元素，选择添加子元素，在弹出的对话框中选择“InteractiveForm”类型元素，并单击“OK”按钮，如图8-37所示。

图8-37 选择元素类型

3）添加完成后即可看到对应的元素对象，如图8-38所示。

4）选中“InteractiveForm”，将属性中的“dataSource”数据源指定上下文中的“Print⁃Node”结点，保存所有修改，如图8-39所示。

图8-38 元素清单

图8-39 修改属性

5）右击“Outline”中的“InteractiveForm”，在弹出快捷菜单中选择“Edit”，对表单进行编辑，如图8-40所示。

图8-40 编辑对象的菜单选择

6）进入Adobe LCD编辑器，如图8-41所示。

图8-41 LCD编辑器界面

7）最左侧的窗口中默认显示“Hierarchy”视图，用于展现设计视图的页面元素层次结构，包括主页面、页面、子表单等内容。在子表单（Subform）中编辑页面需要的控件，如图8-42所示。

图8-42 编辑器中的元素清单

8）最左侧窗口中隐藏的“DataView”用于查看绑定的数据源对应的结点结构，如图8-43所示。

9）最右侧的窗口默认显示“Object Library”控件库，包含了所有可编辑的表单控件，根据不同类型放在不同的子标签中，类似于Web Dynpro视图中的UI元素库，如图8-44所示。

图8-43 结点结构

图8-44 UI元素库

10）其中“Standard”标准对象中包含了一些常用的控件，如图8-45所示。

11）右下方窗口则显示了视图控件的详细属性，通过Object修改控件各种属性，使页面的风格统一。根据控件类型的不同，属性分为不同的页签，其中“Binding”用于标识绑定该控件对应的数据源，即Web Dynpro上下文对象，如图8-46所示。

图8-45 常用控件

图8-46 控件的详细属性

12）编辑器的中间窗口则用于视图的设计和开发，隐藏的“Preview PDF”视图用于设计模板的离线预览，可以随时查看开发页面的实际显示效果，如图8-47所示。

图8-47 设计视图与预览视图

13）下面开始对表单页面内容的编辑开发。其中，表头显示公司与部门，使用“Text⁃Field”控件，内容则以表格方式显示人员列表属性。首先从“Object Library”中选择“Tex⁃tField”并拖曳至“Disign View”设计视图中，如图8-48所示。

14）选择该控件对其属性进行调整，将文本修改为“公司”，如图8-49所示。

图8-48 添加后效果

图8-49 修改文本属性

15）随后在右下方找到“Binding”中的“Default Binding”，单击右侧按钮并找到对应的上下文特性，对控件和上下文进行绑定，如图8-50所示。

图8-50 绑定上下文的菜单选择

16）在弹出的对话框中选择是否更新相关属性，选择不更新相关属性，如图8-51所示。

17）完成了对应控件与Web Dynpro上下文的绑定，如图8-52所示。

(www.daowen.com)

图8-51 绑定属性对话框

图8-52 完成绑定后的界面

18）按照相同的方法添加部门输入框控件，并绑定对应的上下文特性，如图8-53所示。

19）随后设置字体格式，选择标签字体即可进行设置。将“Hierarchy”视图中的对象批量选中，随后修改字体为“Adobe Song Std.L”，如图8-54所示。

图8-53 创建后的效果

图8-54 修改字体

20）可以单击“Preview PDF”进行PDF文件预览，查看预览效果，如图8-55所示。

图8-55 预览效果

21）修改控件显示样式，在“Hierarchy”视图中批量选中新建的控件，在Object视图中找到“Field”页签中的“Appearance”属性，选择“None”，如图8-56所示。

22）单击“Value”页签，在“Type”下拉列表中选择“Read Only”，如图8-57所示。

图8-56 修改属性1

图8-57 修改属性2

23）再次进行PDF预览，确认实际效果与预期相符，如图8-58所示。

图8-58 预览效果

24）接着在设计视图中插入表格，设置列数与默认行，单击“OK”按钮，如图8-59所示。

25）在设计视图中的效果如图8-60所示。

图8-59 插入表格对话框

图8-60 预览效果

26）编辑表头，设置表头的描述以及对应字体，如图8-61所示。

图8-61 编辑文本属性

27）选中表格，在右下属性中找到“Binding”→“Default Binding”，进行上下文绑定，如图8-62所示。

图8-62 绑定上下文的菜单选择

28）批量选择单元格对象，选择“Text”类型，如图8-63所示。

29）选中每一个单元格，并分别绑定Web Dynpro的上下文，如图8-64所示。

30）接着选中表格中的“Row”行，在右下“Object”对象属性的“Binding”中选中“Repeat Row for Each Data Item”复选框，用于显示多条的行项目数据，如图8-65所示。

图8-63 修改属性1

图8-64 修改属性2

图8-65 修改属性3

31）PDF预览查看确认表单的实际效果，如图8-66所示。

图8-66 预览效果

32）在完成表单页面的开发后，回到Web Dynpro的项目中，进入视图的Java编辑器，在初始化方法中添加测试用例的代码，即可编译运行：