1）如同Java工程由包和类组成，Web Dynpro工程则是由组件组成的。展开项目的清单，右击“Components”，在弹出的快捷菜单中选择“Create Component”创建一个组件，如图2-11所示。

2）输入组件的名称“Dynp01Comp”，选中创建默认的窗口和视图（见图2-12），单击“Next”按钮。注：在Web Dynpro中的很多开发可以通过标准的向导功能完成，在一定程度上减少了手动配置的工作量。

图2-11 创建一个组件

图2-12 输入组件的基本信息

3）输入窗口的名称“Dynp01CompWindow”以及接口视图的名称“Dynp01 CompInter⁃face View”（见图2-13），单击“Finish”按钮。

4）在完成组件、窗口和视图的创建后，在Web Dynpro浏览器中可以看到一个典型的Web Dynpro项目结构，如图2-14所示。

图2-13 输入窗口和视图的名称

图2-14 默认组件的目录结构

5）在右侧的模型编辑器中可以看到各个对象之间的关系，如图2-15所示。

图2-15 模型编辑器中的对象(www.daowen.com)

6）展开“Views”视图，并双击通过向导创建的视图。在左下角的“Outline”中右击“RootElement”，在弹出的快捷菜单中选择“Insert Child”，插入一个子元素，如图2-16所示。

图2-16 插入子元素的菜单选择

注：每个Web Dynpro的视图中都会固定有一个根元素，且无法被删除。

7）在弹出的对话框中选择插入元素的类型，前两个选项区用于显示不同元素类型的目录分类，第三个选项区是具体的元素对象。在“UI Element”选项区中选中“TextView”，单击“OK”按钮，如图2-17所示。

8）在右下方的属性选项卡中，将“TextView”的“text”文本内容修改为“This is Hello World Applica⁃tion”，如图2-18所示。

图2-17 选择元素类型

9）依次将“design”属性修改为“header1”、将“semanticColor”属性修改为“marked2”、将“width”属性修改为“500px”，如图2-19所示。完成所有修改后，单击开发工具左上方的“保存”按钮，或按＜Ctrl+S＞组合键进行保存。

图2-18 修改元文本属性

图2-19 修改元素属性