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(); } }

好了，可以看看最終的結果了。