ADF_Starting系列3_使用ADF开发富Web应用程序之开发User Interface

2014-05-03 Created By BaoXinjian

 一、摘要

---

本教程通过一个简单的场景的构建富internet应用程序提供了一个用户界面来访问数据库表。

创建一个完整的应用程序包括业务服务、用户接口和页面流。

案例描述：创建一个实验指南来查询Department和Employee，创建多个JSF页面来让你查询和更新数据在数据库中

案例目的如下：

Part 1: Creating a Fusion Web Application and Building the Business Services

Step 1: Create a Fusion Web Application

Step 2: Build the Business Services

Part 2: Developing the User Interface

Step 1: Create a JSF Page

Step 2: Bind Data Controls to the Page

Step 3: Refine the Business Services

Step 4: Enhance the JSF Page

Step 5: Add More Complexity to the Business Services

Part 3: Enhancing the User Interface

Step 1: Create a Page Flow

Step 2: Use Partial Page Refresh

Step 3: Use the ADF AutoSuggest Behavior

Step 4: Use Drop Down Menus and Operation Components

Step 5: Add CRUD Operation Components to your Page

Step 6: Create a Query-only Business Service Based on Parameters

Step 7: Create a Reusable Page Fragment

 

 二、案例实现 - Create JSF Web Pages

---

Step1. 建立测试JSF页面

Step2.  创建JSF Page，定义属性参数

Step3. 查看无数据绑定的页面布局

 

 三、案例实现 - Bind Data Controls to the Page

---

Step1. 从 Datacontrol中绑定Departement信息到页面上

Step2. 选择绑定数据时的栏位

Step3. 从Data Control绑定Employee Header信息到页面上

Step4. 从Data Control中绑定Employee Lines的信息到页面上

Step5. 查看最终创建的页面组件结构如下

Step6. 运行测试结果如下

 

 四、案例实现 - Refine the Business Services

---

Step1. 重定义页面组件，对组件HireDate设定默认值

 

Step2. 重定义页面组件， 对组件HireDate设定默认值的日期格式

Step3.  重定义页面组件， 对组件Salary设定验证条件

 

 

 五、案例实现 - Enhance the JSF Page

---

  Step1.  从Data Control中绑定Employee信息到页面中

 Step2. 导入数据作为图标Pie

Step3. 设定图标的X轴和Y轴的取值方式

 

 六、案例实现 - Add More Complexity to the Business Services

---

 Step1. 创建一个VO

Step2.  VO的数据来源定义为为之前的Emp和Dep Entity

 Step3.  从EO中选择需在VO中呈现的栏位

Step4.  创建新的栏位

 Step5.  定义新的栏位的取值方式

Step6. 创建Employee ID为LOV的方式

Step7.  定义LOV Configuration

Step8.  定义LOV UI Hints

 Step10.  运行AM，查看所常见的VO的数据显示

 

Thanks and Regards