一、前言

参考权限规则功能，页面如下：
在这里插入图片描述

二、页面结构

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 ：编辑器。加上编辑器就可以有输入框了。

Panda_05_单表功能开发(四)_Screen页面开发