能够访问或已经安装了 Oracle JDeveloper (10.1.3.1.0) 或 Oracle JDeveloper (10.1.3.2.0)。可以从 Oracle 技术网下载它。

单击 此处将预先建立的 10.1.3.1 版应用程序（zip 文件格式）下载到您的系统上。

或者

单击 此处将预先建立的 10.1.3.2 版应用程序（zip 文件格式）下载到您的系统上。

将 jsftrinidad. zip 文件解压缩到 ( /jdev/mywork/ ) 目录中。

启动 JDeveloper。双击 JDeveloper 可执行文件 jdeveloper.exe ，该文件位于您解压缩它的根目录 ( ) 中。

现在应显示 JDeveloper IDE。

在 JDeveloper 中，选择 File | Open。在 Open 对话框中，选择 ( /jdev/mywork/jsftrinidad ) 目录中的文件 jsftrinidad.jws，然后单击 Open。

1.

在 JDeveloper 中，打开 viewlayer 项目，右键单击 viewlayer 节点，然后从上下文中选择 Open JSF Navigation。

图表应如下所示：

双击 Dialog.jspx 图标，打开页面的设计编辑器。

该页面已经预先定义了输入文本域。您将添加 2 个下拉列表。

3.

从组件选项板中，将 SelectOneChoice 组件拖放到 Address 输入文本域的下方。系统将显示一个对话框，您可以通过它将 SelectOneChoice 属性绑定到列表源和目标值属性。

4.

在 Select 选项卡上，按 Value 域旁边的 Bind 按钮，并查找 dialogbean 托管 bean。在该 bean 中，选择 stateSelectItems 并单击 按钮将其移到 Expression 窗格中，然后单击 OK。

关闭表达式语言生成器会创建以下绑定字符串： #{dialogbean.stateSelectItems}。当然，如果您不需要声明式编辑器，可以在值域中直接键入字符串。

在 Common Properties 选项卡上，输入 State 作为 Label 值，并输入 #{userbean.state} 作为 Value。这将确保把从列表中选择的值写入用户 bean，该 bean 表示该项目的模型。

选择 Advanced Properties 选项卡，然后选择 Bindings 属性并按 按钮启动绑定对话框。在对话框中，选择 Managed Bean 部分中的 dialogbean 项。
在 Property 域中， 选择 OneChoice1，然后选择 OK 返回 Advanced Properties 选项卡。

5.

还是在 Advanced Properties 选项卡中，设置以下属性

单击 OK。

注：将 immediate 属性设为 true 将跳过 JSF 生命周期，因为 select 操作不需要它。

6.

将另一个 SelectOneChoice 组件拖放到 State 组件下方。

7.

在 Select 选项卡上，为 #{dialogbean.citySelectItems} 添加值或使用表达式语言生成器。

8.

在 Common Properties 选项卡上，将 Label 设置为 City，并将 Value 设置为 #{userbean.city} 。

9.

选择 Advanced Properties 选项卡，并选择 Binding 属性。按 按钮。

在 Binding 对话框中，从 Managed Beans 列表中选择 dialogbean。在 Property 值中，选择 selectOneChoice2 。

按 OK 创建新的绑定。

10.

选择 PartialTriggers 属性并按 按钮打开 PartialTriggers 对话框。

按 New 按钮，并单击新创建的选择以显示下拉列表。从下拉列表中，选择 selectOneChoice1 选项。

注：一旦 State SelectOneChoice 更改了其选中的值，该设置将刷新 SelectOneChoice 组件。您可以使用 ADF Faces 中的部分页面呈现功能创建相关列表框。

按 OK 关闭 SelectOneChoice 对话框。

11.

右键单击 Applications Navigator 中的 Dialog.jspx，并从上下文中选择 Run。

12.

Dialog 页面将加载到默认浏览器中，并为您添加的域显示 2 个空白下拉列表。

13.

从州列表中选择一个州。

14.

然后，从城市列表中选择一个城市。

注：在显示 City 的值时会用到部分页面呈现。City 列表视州的选择而异。

关闭您的浏览器窗口。

1.

返回到 JDeveloper，单击 faces-config.xml 选项卡打开页面流图。

2.

从 JDeveloper 组件选项板 (Ctrl+shift+P) 中，选择 JSF Navigation Case 组件，然后绘制一条从 Main.jspx 页面到 Dialog.jspx 页面的直线。

3.

将导航链接从 success 重命名为 dialog:open 。在导航案例中使用前缀“dialog:”，以便向 ADF Faces 表明该页面应当在对话框中显示。

双击 Dialog.jspx 图标，打开页面的设计编辑器。

5.

从 JDeveloper 的组件选项板中，在第二个 SelectOneChoice (City) 下方添加一个 InputTextField，并设置下列属性：

6.

要创建一个重置和提交按钮，将 PanelGroup 组件从组件选项板拖放到 PanelForm 的 footer facet 中。

7.

通过组件选项板，在 panelGroup 中添加一个 ResetButton 和一个 CommandButton 组件。在属性检查器中，将重置按钮的 Text 属性设置为 Reset，将提交按钮的 Text 属性设置为 Submit。

8.

选择 Submit 按钮，并在属性检查器中选择 Action 属性。按 按钮，并选择 dialogbean 作为 Managed Bean 属性的值。在 Method 选择框中选择 submitDialogAction。

单击 OK。

1.

通过在 Applications Navigator 或 faces-config.xml 可视化编辑器中双击文件项，打开 Main.jspx 文件。

2.

选择 Create Customer 按钮，打开属性检查器并设置以下属性：

选择 ReturnListener 属性并按 按钮。在 Managed Bean 列表中选择 dialogbean，在 Method 域中选择 returnFromProcess。

按 OK 关闭对话框。

3.

在 Structure 窗口中，选择 af:panelPage 元素并打开属性检查器。

4.

选择 PartialTriggers 属性并按 按钮。

注：现有的 skinSelector 项是一个预先定义的部分触发器，用于动态地更改页面外观，即外观特性。在运行 Main.jspx 页面时，您可以对外观特性进行探索。

5.

在显示的对话框中按 New 按钮。选择新条目，并从下拉列表中选择 createUserButton。按下此按钮时，这将刷新面板页。

单击 OK。

6.

转到 faces-config.xml 图，并选择 Main.jspx 图标。

7.

右键单击并选择 Run 选项，对应用程序进行测试。

8.

您的默认浏览器中将显示 Main 页面。

9.

单击 Skin Selector 项旁边的下拉列表，并选择 OOW Skin 值。页面将刷新，并显示一个新 UI 以反映 oow 样式表。

注： oow.css 样式表在 Web Content > skins 文件夹中定义。

10.

您可以将 Skin Selector 重新设置为原来的 Oracle Skin 值。

单击 Create Customer 按钮调出对话框。

11.

在 Dialog 窗口中，用您选择的值填写表单。

单击 Submit。

12.

Main 页面将通过页面底部的信息消息来反映在对话框窗口中输入的值。

13.

关闭浏览器窗口。

1.

在 faces-config.xml 编辑器中，双击 Table.jspx 图标打开页面。

2.

从组件选项板中，将 table 组件拖放到 Single Row Select 选项卡。

在表格绑定向导中，按 Next 跳过欢迎页面。在第 1 步中，按 Value 域旁边的 Bind 按钮。从表达式语言生成器中，选择 singleselectionhandler > tableModel 并单击 按钮将其移到 Expression 窗格。

单击 OK。

将 Var 域的值设置为 row。

按 Data Type Hint 域的 Browse 按钮，并键入 Customer。从列表中选择 oracle.adffaces.handson.model 程序包的 CustomerBean 类。

单击 OK。

Data Type Hint 域应显示 oracle.adffaces.handson.model.CustomerBean。向导在确定下一个向导页上显示的表格列时需要此提示。

单击 Next。

在表向导的第 2 步中，删除名为 Selected 的列，并将列进行排序，以便它们按以下顺序显示： Full Name、 Address、 Phone、 Email、 Company。

单击 Next。

6.

在向导的第 3 步中，将列标记为可排序。排序是 ADF Faces 表格组件集成的一个特性。选择每一列并提供以下值

单击 Next。

7.

在向导的第 4 步中，定义以下值：

完成对话框以创建表格。

8.

在可视化编辑器（或者 Structure 窗格）中选择 table 并打开属性检查器。选择 Binding 属性并单击 按钮。

9.

在 ManagedBean 域中选择 singleselectionhandler 项，在 Property 域中选择 table1。

按 OK 关闭对话框。

10.

在 Structure 窗格中，选择 af:table 组件。展开 table 节点，查看 Table facets 并展开它。

11.

从组件选项板中，将 PanelButtonBar 组件拖放到 Table facets 节点的 actions 控件中。

12.

将 CommandButton 组件从组件选项板拖放到 PanelButtonBar 中。

13.

选择 CommandButton 1 并打开属性检查器。将 Text 属性设置为 Edit，并将 PartialSubmit 属性设置为 true。

14.

选择 ActionListener 属性并按 按钮。在 ActionListener 对话框中，从下拉列表中选择 tablebean 作为 Managed Bean。在 Method 域中，选择 launchEditDialog 值。

单击 OK。

15.

在属性检查器中，仍然选择命令按钮的 ReturnListener 属性，并按 按钮。在 Managed Bean 域中，选择 tablebean 项。选择 processReturnFromEdit 作为 Method。

单击 OK。

16.

选择 Binding 属性并按 按钮。在 Managed Bean 域中，选择 tablebean 项。在 Property 域中，选择 commandButton1。

单击 OK。

17.

单击 Run 图标 ，在您的浏览器中启动 Table 页。

在 Edit Customer 页面中，选择一个客户并单击 Edit。

18.

EditSingleTable Row 页面将显示选定的客户信息。根据您的需要进行更改。

单击 Submit 返回到 Table 页面。

19.

单击 Multi Row Select 链接，选择多个客户，然后单击 Edit。

20.

更新一个或多个选定客户，并单击 Commit 使更改生效。

21.

更新内容将在 Table 页面上反映出来。

22.

关闭浏览器窗口。

在 faces-config.xml 图中，双击 Tree.jspx 图标打开页面，以创建 ADF Faces 层级式树组件并将其绑定到所提供的树形数据模型。

在组件选项板中，将 Tree 组件拖放到页面中已有的 PanelPage 组件上。

在打开的对话框中，提供下列值

单击 OK。

从组件选项板中，将 CommandLink 组件拖放到 af:outputText 组件旁边。此操作可在可视化编辑器或 Structure 窗口中完成。如果树节点是一个部门，则只显示命令链接。否则，会显示 outputComponent。通过树节点的 nodeType 属性，您可以确定节点的类型。

打开属性检查器，并将 CommandLink 的 Text 属性设置为 #{node.description} 。

将 Rendered 属性值设置为 #{node.nodeType == "department"} 。为此，您需要单击 Rendered 属性域，并通过单击属性检查器工具栏中的数据库图标 打开 ExpressionBuilder。在 Expression 域中，键入 EL #{node.nodeType == "department"}

单击 OK。

要连接命令链接与 JSF 活动，请选择 ActionListener 属性并按 按钮。

选择 treehandler 作为 Managed Bean 属性。选择 treeNodeSelected 作为 Method。

单击 OK。

选择 af:outputText 组件并打开属性检查器。

将 Rendered 属性值设置为 #{node.nodeType != "department"} 。为此，您需要单击 Rendered 属性域，并通过单击属性检查器工具栏中的数据库图标 打开 ExpressionBuilder。在 Expression 域中，键入 EL #{node.nodeType != "department"}。

单击 OK。

接下来，可以开发从表格了。主/从行为由托管 bean 处理。在组件选项板中，选择 PanelBox 组件，并将其拖放到 af:tree 组件的下方。

从组件选项板中，选择 Table 组件并将其放入 PanelBox。

单击 Next 跳过 Table 向导的欢迎页面，并在 Binding 对话框中输入下列值

单击 Next。

在第 2 步中，按如下顺序排序表格列： Ename、 Email、 Phone、 Hiredate、 Salary。

单击 Next。

在第 3 步中，单击 Next 保留默认设置。

在第 4 步中，设置 Include Range Navigation 选项，并将 Row 属性设为 5。

单击 Finish 关闭对话框。

在 Structure 窗口中，选择 af:table 组件并打开属性检查器。

选择 Binding 属性并按 按钮，然后在 Binding 对话框中，针对 Managed Bean 选择 treehandler 项，并在 Property 域中选择 detailTable 。

单击 OK。

右键单击 Applications Navigator 中的 Tree.jspx 节点，并从上下文中选择 Run 选项。

展开 Root 节点，然后展开嵌入的节点，以测试树行为。

部分页面呈现

ADF Faces 对话框框架

单选和多选表格

树组件