OAF中的TableLayout

我们经常会遇到这种情况，我们要把显示界面分成几块区域来分别显示不同的内容。比如在同一行左边显示messageComponentLayout，右边显示table，这时，我们就要用到tableLayout功能，下面，我们就试着创建一个tableLayout。

学习目标

1、掌握Region Style：tableLayout，rowLayout，cellFormat的创建方法，属性设置

2、了解他们的意义，从属关系，并能灵活嵌套

一、创建AM

在test.oracle.apps.cux上点右键，选择 Create Application Module

输入Package：test.oracle.apps.cux.table.server

Name：TableAM。

下一步到完成。

二、创建VO PoHeaderVO

在test.oracle.apps.cux.table.server上点右键，选择 Create View Object。

下一步到 Step5 SQL Statement，

在Query Statement框中输入

SELECT poh.po_header_id ,poh.segment1 po_number ,poh.vendor_id ,pv.vendor_name ,poh.vendor_site_id ,pvs.vendor_site_code ,poh.org_id FROM po_headers_all poh ,po_vendors pv ,po_vendor_sites_all pvs WHERE poh.vendor_id = pv.vendor_id AND poh.vendor_site_id = pvs.vendor_site_id AND nvl(pv.enabled_flag,'Y') = 'Y' AND poh.type_lookup_code = 'STANDARD'

下一步到Java页，确认View Object Class和View Row Class的勾都勾上。

点完成。

三、创建VO PoLineVO

在test.oracle.apps.cux.table.server上点右键，选择 Create View Object

输入 Package：test.oracle.apps.cux.table.server

Name：PoLineVO

下一步到Step5 SQL Statement，

在Query Statement框中输入

SELECT pol.po_header_id ,pol.po_line_id ,pol.line_num ,pt.line_type ,pol.item_id ,msib.segment1 item_code ,pol.item_description ,pol.unit_meas_lookup_code ,pol.quantity ,pol.unit_price ,pol.closed_flag ,pol.cancel_flag ,pol.closed_date ,pol.cancel_date FROM po_lines_all pol ,mtl_system_items_b msib ,po_line_types pt WHERE pol.item_id = msib.inventory_item_id(+) AND pol.org_id = msib.organization_id(+) AND pol.line_type_id = pt.line_type_id AND nvl(msib.enabled_flag,'Y') = 'Y'

下一步到完成。

四、添加VO到AM下

双击TableAM，打开AM编辑界面

在Data Model界面，将VO添加到TableAM下面

五、新建页面

在test.oracle.apps.cux.table上点右键，选择 New->Web Tier->OA Components->Page

输入 Name：TablePG

Package：test.oracle.apps.cux.table.webui

确定。

修改Region的属性

ID：PageLayoutRN

AM Definition：test.oracle.apps.cux.table.server.TableAM

Window Title：Table Test

Title：Table Test：Skycloud

在PageLayout下添加Region,并更改属性

ID：PoHeaderHdr

Prompt：订单头

在PoHeaderHdr下面新建Region，并更改属性

ID：PoHeaderLayout

Region Style：messageComponentLayout

Width：100%

在messageComponentLayout下面，新建messageLayout,并更改属性

ID：PHMessageLayout

在PHMessageLayout下面，新建Region，并更改属性

ID：RowLayoutRN

Region Style：rowLayout

Width：100%

在rowLayout下面新建三个Region

更改Region1的属性

ID：PoHeaderNumCel

Region Style：cellFormat

Width：30%

更改Region2的属性

ID：PoVendorCel

Region Style：cellFormat

Width：30%

更改Region3的属性

ID：PoVendorSiteCel

Region Style：cellFormat

Width：40%

分别为每个cellFormat，创建一个ITEM，并更改其属性

	ID	Item Style	Search Allowed	View Instance	View Attribute	Prompt
Item1	PoHeaderNum	messageStyleText	True	PoHeaderVO1	PoNumber	采购订单
Item2	PoVendor	messageStyleText	True	PoHeaderVO1	VendorName	供应商
Item3	PoVendorSite	messageStyleText	True	PoHeaderVO1	VendorSiteCode	地点

结构图如下:

运行，看一下结果。

下面添加查询条件

在PageLayoutRN中添加Region，并修改属性。

ID：QueryLayoutRN

RegionStyle：Header

Text：查询

在QueryLayoutRN上添加Region，并修改属性。

ID：QueryComponentLayout

Region Style：messageComponentLayout

在QueryComponentLayout上右键，选择messageLayout，修改属性。

ID：OrgMessageLayout

在OrgMessageLayout下新建Region，并修改其属性。
ID：OrgRowLayout

Region Style：rowLayout

在OrgRowLayout下新建Region，并修改其属性。

ID：OrgSearchCel

Region Style：cellFormat

在OrgSearchCel下新建Item，修改属性。

ID：OrgSearch

Region Style：messageTextInput

Data Type：VARCHAR2

Prompt：库存组织

Max Length：20

Length：20

Repquired：yes

在QueryComponentLayout上右键，选择messageLayout，修改属性。

ID：NumMessageLayout

在messageLayout上，新建一个Region，修改属性。

ID：NumRowLayout

Region Style：rowLayout

在rowLayout上，新建两个Region，修改属性

ID：PoHdrSearchCel

Region Style：cellFormat

ID：QueryButtonCel

Region Style：cellFormat

分别在cellFormat下创建一个ITEM

更改Item1的属性。

ID：PoNumSearch

Item Style：messageTextInput

Prompt：订单编号

Additional Text：请输入订单编号进行查询

Maximum Length：20

Length：20

Repquired：yes

更改Item2的属性。

ID：Query

Item Style：submitButton

Prompt：查找

运行看一下效果吧。

添加从块

在PageLayoutRN上点右键，新建Region，修改属性。

ID：PolineHdr

Region Style：header

Text：订单行

在PoLineHdr上点右键，新建Region，修改其属性。

ID：TableLayoutRN

Region Style：tableLayout

Width：100%

在tableLayout上，新建rowLayout，修改其属性。

ID：LineRowLayout

Region Style：rowLayout

Width：100%

在LineRowLayout上新建两个cellFormat

修改第一个cellFormat的属性。

ID：PoNumCel

Region Style：cellFormat

修改第二个cellFormat的属性。

ID：PoLineCel

Region Style：cellFormat

在PoNumCel中新建一个Item，修改属性。

ID：PoHeaderNum1

Item Style：messageStyleText

Search Allowed：True

View Instance：PoHeaderVO1

View Attribute：PoNumber

Prompt：订单编号

在PoLineCel上点右键，选择New->Region Using Wizard...

输入 Application Module：test.oracle.apps.cux.table.server.TableAM

Available View Usage：PoLineVO1。

下一步。

输入 Region ID：QueryTable

Region Style：table。

下一步,选择LineNum，LineType，Item_code，Quantity，UnitPrice，UnitMeasLookupCode。

修改表格属性，如图：

完成。

修改表格属性

View Link Instance：PoHeaderToLineLink

Width：100%

修改ITEM属性，Search Allowed为True

六、创建CO

在PayeLayoutRN上点击右键，选择Set New Controller...,创建控制文件。

输入 Package Name：test.oracle.apps.cux.table.webui

　　 　　Class Name：TableCO。

在processFormRequest函数中加入如下代码：

public void processFormRequest(OAPageContext pageContext, OAWebBean webBean) { super.processFormRequest(pageContext, webBean); OAApplicationModule am = pageContext.getApplicationModule(webBean); OAViewObject vo = (OAViewObject)am.findViewObject("PoHeaderVO1"); OAViewObject lineVO = (OAViewObject)am.findViewObject("PoLineVO1"); if (pageContext.getParameter("Query")!= null) { String PoNumber = pageContext.getParameter("PoNumSearch"); String OrgId = pageContext.getParameter("OrgSearch"); vo.setWhereClause(null); vo.setWhereClauseParams(null); String whereClause = " (po_number = :2) and (org_id = :3) " ; vo.setWhereClause(whereClause); vo.setWhereClauseParam(1,PoNumber); vo.setWhereClauseParam(2,OrgId); vo.executeQuery(); vo.first(); PoHeaderVORowImpl row = (PoHeaderVORowImpl)vo.getCurrentRow(); Number headerId = new Number(row.getPoHeaderId()); lineVO.setWhereClause(null); lineVO.setWhereClauseParams(null); String whereClause1 = "(po_header_id = :4)" ; lineVO.setWhereClause(whereClause1); lineVO.setWhereClauseParam(3,headerId); lineVO.executeQuery(); } }

好了，可以看看最终的结果了。