Aurora经典界面设计

最新推荐文章于 2026-04-27 13:06:37 发布

原创最新推荐文章于 2026-04-27 13:06:37 发布 · 1.8k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Aurora

Aurora架构专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Aurora经典界面的设计框架，包括功能栏、查询栏和结果栏的布局。详细解析了form表单属性，如column、row和title等，以及grid网格属性，如navBar、autoFocus和showRowNumber等。同时，文章还讨论了column字段属性，如sortable、lock和align等，提供了一种在不使用queryForm时设计表单的方法，并讲解了如何在grid上放置功能按钮，以及如何绑定dataset以实现查询和结果显示。

经典页面
在主界面上大部分都是这样一样的设计框架结构——-功能栏、查询栏和结果栏

代码

<a:screenBody>
            <a:screenTopToolbar>
                <!--获取注册页面得标题名-->
                <a:screenTitle/>
                <a:toolbarButton click="reset_fsd" text="HAP_RESET" width="80"/>
                <!--功能操作，type包括add、clear、delete、save内部已经实现功能的关键字，*需要绑定结果集的id*-->
                <a:gridButton bind="PIM1010_people_inf_grid" type="add" width="80"/>
                <a:gridButton bind="PIM1010_people_inf_grid" type="clear" width="80"/>
                <a:gridButton bind="PIM1010_people_inf_grid" type="delete" width="80"/>
                <a:gridButton bind="PIM1010_people_inf_grid" type="save" width="80"/>
            </a:screenTopToolbar>
            <!--**form是表单标签**-->
            <a:form column="3" title="查询条件" width="1100">
                <!--queryForm是查询表单，即自动赋予查询功能，formToolBar会自动成一个查询按钮，formBody会自动生成一个更多按钮（自动隐藏）-->
                <a:queryForm bindTarget="PIM1010_people_inf_query" resultTarget="PIM1010_people_inf_result">
                    <a:formToolBar>
                        <!--lov、textField、comboBox、datePicker都是输入框标签-->
                        <a:lov name="people_no" bindTarget="PIM1010_people_inf_query" prompt="入住人工号"/>
                        <a:textField name="people_name" bindTarget="PIM1010_people_inf_query" prompt="入住人姓名"/>
                        <a:comboBox name="gender" bindTarget="PIM1010_people_inf_query" prompt="性别"/>
                    </a:formToolBar>
                    <a:formBody column="3">
                        <a:comboBox name="department" bindTarget="PIM1010_people_inf_query" prompt="所在部门"/>
                        <a:comboBox name="base" bindTarget="PIM1010_people_inf_query" prompt="base地"/>
                        <a:textField name="telephone" prompt="联系电话"/>
                        <a:datePicker name="create_date_start" prompt="创建日期从"/>
                        <a:datePicker name="create_date_end" prompt="创建日期到"/>
                        <a:comboBox name="status" bindTarget="PIM1010_people_inf_query" prompt="入住状态"/>
                    </a:formBody>
                </a:queryForm>
            </a:form>
            <!--grid网格标签，一般用做结果集的显示-->
            <a:grid id="PIM1010_people_inf_grid" bindTarget="PIM1010_people_inf_result" height="400" navBar="true" width="1290">
                <!--结果集用数据库字段形式来显示-->
                <a:columns style="width:100%">
                    <a:column name="people_number" align="center" editor="textField_editor" prompt="入住人员编号" renderer="showDetail"/>
                    <a:column name="people_no" align="center" editor="textField_editor" prompt="入住人员工号"/>
                    <a:column name="people_name" align="center" editor="textField_editor" prompt="入住人员姓名"/>
                    <a:column name="gender" align="center" editor="comboBox_editor" prompt="性别"/>
                    <a:column name="department" align="center" editor="comboBox_editor" prompt="所在部门"/>
                    <a:column name="base" align="center" editor="comboBox_editor" prompt="base地"/>
                    <a:column name="telephone" align="center" editor="textField_editor" prompt="联系电话号码"/>
                    <a:column name="email" align="center" editor="textField_editor" prompt="邮箱地址"/>
                    <a:column name="people_comment" align="center" editor="textField_editor" prompt="备注"/>
                    <a:column name="creation_date" align="center" editor="datePicker_editor" prompt="创建日期"/>
                    <a:column name="status" align="center" editor="comboBox_editor" prompt="入住人员状态"/>
                </a:columns>
                <!--编辑器，对应字段的editor，告诉界面用怎样的格式显示数据-->
                <a:editors>
                    <a:textField id="textField_editor"/>
                    <a:numberField id="number_editor"/>
                    <a:datePicker id="datePicker_editor"/>
                    <a:comboBox id="comboBox_editor"/>
                </a:editors>
            </a:grid>
        </a:screenBody>

简析

form表单属性：

column ：表示了该表单每行有多少列。
row ：表示了该表单每行有多少行。
title：标题
width、height、marginWidth、marginHeight和HTML的定义一样
padding变得的内边距
showBorder是否显示边框

grid网格属性：

navBar 是否具有导航条 boolean
navBarType 导航条类型 navBarType
maxPageCount 导航条的类型simple时，最大可显示的页数，如果总页数超过该值，会以省略号显示。 int
autoFocus 自动对焦 boolean
autoAppend 自动新增行 boolean
autoAdjust 根据width和marginWidth自动调整列宽 boolean
showRowNumber 是否显示行号 boolean
editorBorder 输入框是否有边框 boolean
bindTarget 需要绑定的DataSet的ID DataSetReference
name 组件name,对应dataset中field的name
className 组件的样式
style 组件的style
hidden 组件是否隐藏 string
id 组件的ID,在同一个screen中ID不能重复

column字段属性：

sortable 是否可按照次字段排序 boolean
lock 是否锁定 boolean
align 排列方式 alignType
resizable 是否可调整宽度 boolean
renderer 列渲染，回调函数function(value,record,name){return value}，返回值value是html字符串
editor 列的编辑器,对应editors中的id
editorFunction 列编辑器函数,可动态改变编辑器，回调函数function(record,name){return editorid}，返回值editorid是编辑器的id
footerRenderer 列脚注渲染，回调函数function(data,name){return value}，参数data是所绑定的dataset中的数据,返回值value是html字符串
percentWidth table节点专用。列的百分比宽度,单位是(%) int
forExport 是否对该列进行导出 boolean
autoAdjust 是否自动调整列宽 boolean
maxAdjustWidth 列宽自动调整的最大值，最大值不会超过grid的宽度 int
exportDataFormat 导出数据格式
exportDataType 导出数据类型
exportField 导出列对应的Dataset的field,默认为name属性的值
showTitle Grid的单元格上是否显示浮动信息 boolean

经验小节

可能我们会犹豫，如果表单form里面不需要设计成查询集（既queryForm），我们要怎样设计。采用box标签
如果需要在grid，既结果集上放功能按钮（老式做法），我们就需要用到
<a:toolBar> <a:button click="GLD5010_createLineRecord" icon=" " text="HAP_NEW"/> <a:button text="删除" type="delete"/> </a:toolBar>
如果form是查询表单，那它需要绑定查询集的dataset对应的id（bindTarget=”PIM1010_people_inf_query”),和结果集的dataset对应的id（resultTarget=”PIM1010_people_inf_result”）。
grid是结果集的时候，他需要绑定结果集的dataset对应的id（bindTarget=”PIM1010_people_inf_result”）。
如果必须用编辑器editors，则查询出来的数据就无法’修改‘，也没有边框。