Foxnic-Web 代码生成 (5) —— 配置字段的通用项
概述
字段的配置是代码生成的核心。一个字段在界面上出现的位置有三个:表单、表格、表格的搜索区域,且这三个位置可能存在一定的相关性。字段配置就是要对某个字段在这个三个位置的表现形式和功能特性进行配置,从而生成符合业务需求的代码。
本文中的示例代码均可在 https://gitee.com/LeeFJ/foxnic-samples 项目中找到,本文对照 webfull 项目讲解。
通用配置项
字段配置在 configFields 方法完成,configFields 方法传入 ViewOptions 类型的参数,通过 ViewOptions.field 方法获得字段配置对象,通过链式调用完成代码生成选项的配置。
/**
* 配置字段
*/
@Override
public void configFields(ViewOptions view) {
// NAME 字段,单行文本框
view.field(WEBFULL_EXAMPLE_ADDRESS.NAME)
// 基础设置:指定标签值
.basic().label("收件人")
// 搜索栏:设置模糊搜索
.search().fuzzySearch()
// 表格列:指定对齐方式
.table().alignLeft()
// 表单:指定表单编辑器为文本输入框,并指定默认值
.form().textInput().defaultText("乔峰")
// 表单校验:必填
.form().validate().required();
}
从上面是示例代码中,我们可以看到几个5个通用配置项,我们通过一个表格来说明各个项目的作用与原理。另外,代码中的 form().textInput() 指定编辑器为单行文本,它将影响搜索框与表格列的展现形式与功能特性。Foxnix-Web 支持多种表单组件类型,这部分内容我们将在其它章节展开。
配置项 | 下属项目 | 说明 |
---|---|---|
basic() | 基础配置项 | |
hidden | 表单、表格、搜索区域都隐藏 | |
label | 表单、表格、搜索统一使用的标签 | |
table() | 表格配置项,配置指定字段表格列的展现方式与功能特性 | |
disable | 禁用;默认false | |
hidden | 隐藏;默认false | |
displayWhenDBTreaty | 强制显示默认情况下被 DBTreaty 规则排除的字段 | |
fix | 固定栏次;默认false | |
label | 表头文本 | |
alignCenter | 居中对齐 | |
alignRight | 右对齐 | |
alignLeft | 左对齐 | |
sort | 列是否自持排序 | |
useBadgeStyle | 使用角标样式,针对关联或字典数据 | |
useThemeBadgeStyle | 使用主题的角标样式,针对关联或字典数据 | |
permission | 指定权限字符串 | |
fillBy | 指定列表单元格中的填充的数据依次指定值所在的属性,形成路径,控制器将生成 Join 代码 | |
fillByProperty | 指定列表单元格中的填充的数据依次指定值所在的属性,形成路径 | |
search() | 搜索配置项,配置指定字段搜索区域的展现方式与功能特性 | |
hidden | 是否隐藏;默认false | |
label | 指定标签 | |
fuzzySearch | 是否模糊搜索,默认false | |
checkJsonElement | 用于匹配JSON数组的查询,适用的情况: 如,字段内存储格式为字符串,且JSON数组格式,如 ["red","blue","orange"] | |
inputWidth | 设置搜索输入框宽度 | |
matchType | 查询时的值匹配模式 | |
on | 指定搜索字段,默认为当前配置的字段当非本表字段时,需要指定 table().fillBy 或 form 的 fillwith 实现自动的关联查询 | |
range | 是否使用范围搜索,仅支持 日期 和 数字 类型搜索栏出现两个输入框,指定搜索范围 | |
selectMuliti | 是否多选,下拉框等组件适用 | |
triggerOnSelect | 针对某些需要选择的组件,是否在选择后立即触发查询 | |
form() | 表单配置项,配置指定表单字段的展现方式与功能特性 | |
hidden | 是否隐藏;默认false | |
label | 字段标签 | |
readOnly | 是否只读;默认false | |
fillBy | 指定表单字段中要填充的数据依次指定值所在的属性,形成路径如果 select box 要使用 fillWith | |
button | 表单元素为按钮 | |
checkBox | 设置当前字段为复选框,在搜索栏表现为可多选的下拉框 | |
dateInput | 设置当前字段为日期选择框 | |
logicField | 设置当前字段为逻辑字段,在搜索栏表现为可多选的下拉框 | |
numberInput | 设置当前字段为数字输入框 | |
radioBox | 设置当前字段为单选框,在搜索栏表现为可多选的下拉框 | |
selectBox | 设置当前字段为下拉框,在搜索栏表现为可多选的下拉框 | |
textArea | 设置当前字段为文本域(多行) | |
upload | 设置当前字段为文件上传 | |
validate | 设置设置当前字段的校验逻辑 | |
form().validate() | 表单校验项,字段在表单上的校验逻辑 | |
required | 必填校验 | |
date | 日期校验 | |
邮件地址校验 | ||
identity | 身份证校验 | |
phone | 手机号校验 | |
url | URL地址校验 |
以上表格展示了字段在代码生成时的通用配置项目,随着版本迭代的深入,这些通用配置项目的属性还会进一步扩展,使其能够更好的支持业务实现。
小结
本节主要比较快速地介绍了字段配置的通用项目,在我们官方文档可以找到对应的视频示例,有利于大家更加直观的理解代码生成是字段的配置,以及不同配置参数最终是如何在系统上呈现的。当然最好的方还是亲自动手实践。
相关项目
https://gitee.com/LeeFJ/foxnic
https://gitee.com/LeeFJ/foxnic-web
https://gitee.com/LeeFJ/foxnic-samples