1. 程式人生 > >Panda_05_單表功能開發(四)_Screen頁面開發

Panda_05_單表功能開發(四)_Screen頁面開發

一、前言

參考許可權規則功能,頁面如下:
在這裡插入圖片描述

二、頁面結構

Screen頁面其實就是一個XML頁面,頁面結構如下:

  • screen
    • init-procedure
    • view
      • script
      • dataSets(資料儲存)
        • dataSet
        • dataSet
      • screenTopToolbar(資料顯示)
      • form(資料顯示)
        • formToolbar
        • textField
      • grid(資料顯示)
        • columns
        • editors

Aurora的Web介面主要由dataSets、form和grid以及其他元件構成。

三、dataSet

  • fields
  • events

1.本質

(1)dataSet是前端的資料儲存元件。所有前後端互動的資料都會存在dataSet中。

(2)顯示元件 <-> DataSet <-> 後端。

(3)所有的顯示元件都會繫結在dataset上,您所看能夠在頁面上看到的一切都只是負責顯示和資料輸入,實際的資料都儲存在Dataset中

2.兩個DS

DataSet與後端實體類相對應

QueryDs — 用於查詢
ResultDs — 用於提交

3.fields

field 屬性

屬性名 含義 描述
name 屬性名 name欄位值與後端實體類屬性一一對應
prompt 描述 Screen中填寫描述程式碼,頁面渲染時會根據當前語言環境獲取到對應的中文描述(或英文描述)

3.1 下拉框

<a:dataSet id="FND502_docCategoryDs" autoQuery="true"
                       queryUrl="$[/request/@context_path]/common/auroraCode/FND.DOC_CATEGORY/"/>

<a:dataSet id="FND502_businessRuleQueryDs" autoCreate="true">
                <a:fields >
                    <a:field name="businessRuleCode" prompt="fnd_business_rule.business_rule_code"/>
                    <a:field name="businessName" prompt="fnd_business_rule.business_rule_name"  />
                    
                    
                    <!-- 下拉框,單據型別名列表 -->
                    <a:field name="docCategoryName" displayField="meaning" options="FND502_docCategoryDs"
                             returnField="docCategory" valueField="value"
                             prompt="fnd_business_rule.doc_category_name" />
                  
                  
                    <a:field name="docCategory" />
                </a:fields>
            </a:dataSet>

3.2 多語言

多語言欄位對應的field需要新增 dto 以及 dtoId 屬性。

 <a:field name="businessName" descIdField="businessName_id" prompt="fnd_business_rule.business_rule_name" dto="com.hand.hec.panda.fnd.dto.FndBusinessRule" dtoId="businessRuleId" />

4. events

DataSet是具有事件的。

   <a:events>
       <a:event name="submitsuccess" handler="FND502_businessRuleSubmitSuccess"/>
   </a:events>

四、screenTopToolbar

toolbar
工具條 是一個顯示元件。所有的顯示元件都需要繫結在dataset上。

<a:screenTopToolbar>
      <a:gridButton bind="FND502_businessRuleResultGrid" type="add" width="80"/>
      <a:gridButton bind="FND502_businessRuleResultGrid" type="save" width="80"/>
      <a:gridButton bind="FND502_businessRuleResultGrid" type="delete" width="80"/>
</a:screenTopToolbar>

gridButton 屬性列表:

屬性名 含義 描述
bind 指定繫結的DataSet 對應的按鈕型別的操作會對繫結的DataSet產生相應的影響
type 按鈕型別 add / save / delete /clear

五、Form

在這裡插入圖片描述
queryForm 是一個顯示元件。所有的顯示元件都需要繫結在dataset上。

   <a:queryForm bindTarget="FND502_businessRuleQueryDs" resultTarget="FND502_businessRuleResultDs" style="width:100%;border:none">
       <a:formToolBar labelWidth="100">
           <a:label name="separator"/>
           <a:textField name="businessRuleCode" bindTarget="FND502_businessRuleQueryDs" typeCase="upper"/>
           <a:textField name="businessName" bindTarget="FND502_businessRuleQueryDs"/>
           <a:comboBox name="docCategoryName" bindTarget="FND502_businessRuleQueryDs"/>
       </a:formToolBar>
   </a:queryForm>
  • bindTarget : 將查詢條件繫結到 QueryDs
  • resultTarget : 將查詢返回結果繫結到 ResultDs

六、Grid

在這裡插入圖片描述
grid是一個柵格形式的顯示元件,顯示為一個表格。所有的顯示元件都需要繫結在dataset上。

   <a:grid id="FND502_businessRuleResultGrid" bindTarget="FND502_businessRuleResultDs" marginHeight="115" marginWidth="3" navBar="true">
       <a:columns>
           <a:column name="businessRuleCode" align="center" editorFunction="textFunc" width="80"/>
           <a:column name="businessName" align="left" editor="FND502_tld" width="120"/>
           <a:column name="docCategoryName" align="left" editor="FND502_cb" width="120"/>
           <a:column name="enabledFlag" align="center" editor="FND502_chk" width="80"/>
           <a:column name="businessRuleDetails" renderer="FND502_businessRuleDetails"  width="120"/>
       </a:columns>
       <a:editors>
           <a:tledit id="FND502_tld"/>
           <a:textField id="FND502_tf_01"/>
           <a:textField id="FND502_tf_02" typeCase="upper"/>
           <a:lov id="FND502_lov" />
           <a:checkBox id="FND502_chk"/>
           <a:comboBox id="FND502_cb" />
           <a:numberField id="FND502_nf" allowDecimals="false" allowNegative="false"   />
       </a:editors>
   </a:grid>
  • bindTarget : 指定繫結的DataSet
  • navBar : 分頁導航
  • editors :編輯器。加上編輯器就可以有輸入框了。

七、參考資料

  1. Aurora開發者平臺
  2. Aurora Tag Document
  3. Aurora Javascript Document