本教程将向 JavaServer Faces 开发人员介绍一些由 Oracle ADF Faces 提供的较为复杂的用户界面组件以及开源 Trinidad 组件，这些都可以从 Apache 孵化器中获得。在本教程的学习期间，您将利用 Oracle JDeveloper 探索 ADF Faces。
在这一部分中，您将在 Main 页面中创建一个调用 Dialog 页面的 Action。然后，通过运行 Main.jspx 页面，您可以尝试利用外观特性更改应用程序的外观。
| 1. |
在 faces-config.xml 图中，双击 Tree.jspx 图标打开页面，以创建 ADF Faces 层级式树组件并将其绑定到所提供的树形数据模型。
|
| 2. |
在组件选项板中，将 Tree 组件拖放到页面中已有的 PanelPage 组件上。
|
| 3. |
在打开的对话框中，提供下列值
| 属性 |
值 |
| Value |
#{treehandler.treemodel} |
| Var |
node |
| Node Stamp Component |
af:outputText |
| Node Stamp Value |
#{node.description} |
单击 OK。
|
| 4. |
从组件选项板中，将 CommandLink 组件拖放到 af:outputText 组件旁边。此操作可在可视化编辑器或 Structure 窗口中完成。如果树节点是一个部门，则只显示命令链接。否则，会显示 outputComponent。通过树节点的 nodeType 属性，您可以确定节点的类型。
|
| 5. |
打开属性检查器，并将 CommandLink 的 Text 属性设置为 #{node.description}。
|
| 6. |
将 Rendered 属性值设置为 #{node.nodeType == "department"}。为此，您需要单击 Rendered 属性域，并通过单击属性检查器工具栏中的数据库图标  打开 ExpressionBuilder。在 Expression 域中，键入 EL #{node.nodeType == "department"}
单击 OK。
|
| 7. |
要连接命令链接与 JSF 活动，请选择 ActionListener 属性并按  按钮。
|
| 8. |
选择 treehandler 作为 Managed Bean 属性。选择 treeNodeSelected 作为 Method。
单击 OK。
|
| 9. |
选择 af:outputText 组件并打开属性检查器。
|
| 10. |
将 Rendered 属性值设置为 #{node.nodeType != "department"}。为此，您需要单击 Rendered 属性域，并通过单击属性检查器工具栏中的数据库图标 打开 ExpressionBuilder。在 Expression 域中，键入 EL #{node.nodeType != "department"}。
单击 OK。
|
| 11. |
接下来，可以开发从表格了。主/从行为由托管 bean 处理。在组件选项板中，选择 PanelBox 组件，并将其拖放到 af:tree 组件的下方。
|
| 12. |
从组件选项板中，选择 Table 组件并将其放入 PanelBox。
|
| 13. |
单击 Next 跳过 Table 向导的欢迎页面，并在 Binding 对话框中输入下列值
| 属性 |
值 |
| Value |
#{treehandler.tableModel} |
| Var |
row |
| Data Type Hint |
oracle.adffaces.handson.model.EmployeeBean |
单击 Next。
|
| 14. |
在第 2 步中，按如下顺序排序表格列：Ename、Email、Phone、Hiredate、Salary。
单击 Next。
|
| 15. |
在第 3 步中，单击 Next 保留默认设置。
|
| 16. |
在第 4 步中，设置 Include Range Navigation 选项，并将 Row 属性设为 5。
单击 Finish 关闭对话框。
|
| 17. |
在 Structure 窗口中，选择 af:table 组件并打开属性检查器。
|
| 18. |
选择 Binding 属性并按 按钮，然后在 Binding 对话框中，针对 Managed Bean 选择 treehandler 项，并在 Property 域中选择 detailTable。
单击 OK。
|
| 19. |
右键单击 Applications Navigator 中的 Tree.jspx 节点，并从上下文中选择 Run 选项。
|
| 20. |
展开 Root 节点，然后展开嵌入的节点，以测试树行为。
|
书签
按钮将其移到 Expression 窗格中，然后单击 OK。
，在您的浏览器中启动 Table 页。