Foxnic-Web 代码生成 (6) —— 配置字段的表单组件

LeeFJ
• 阅读 529
Foxnic-Web 代码生成 (6) —— 配置字段的表单组件
概述

  上一篇中我们讲述了字段配置的通用项,本篇将详细介绍字段的表单编辑器配置。针对不同的表单编辑器,可以指定不同的代码生成参数。默认情况下,代码生成会根据表字段的类型等信息自动匹配一个表单组件。当然,开发人员也可以手动指定每个字段的表单组件类型。

  虽然表单组件是呈现在表单界面的,但是它的设置同样会影响搜索区域对应的条件输入框。搜索区域的条件输入框组件按一定的规则与表单组件对应。本文将逐个介绍表单组件以及它们的代码生成配置项。

  本文中的示例代码均可在 https://gitee.com/LeeFJ/foxnic-samples 项目中找到,本文对照 webfull 项目讲解

完整示例

  由于,每个组件的配置较多,本篇也不能完全一一列举,提供 Foxnic-Web 项目下有一各种组件支持的完整示例,请大家参考:

https://gitee.com/LeeFJ/foxnic-web/blob/1.7.0.RELEASE/common/generator/src/main/java/org/github/foxnic/web/generator/module/example/CodeExampleConfig.java

单行文本框

  单行文本框是大多数情况下字段的默认组件。通过 view.field(XXX).form().textInput() 方法指定,默认搜索框为单行文本框。它的配置项有:

配置项 说明
defaultText 指定默认文本
多行文本框

  多行文本框通过 view.field(XXX).form().textArea() 方法指定,默认搜索框为单行文本框。它的配置项有:

配置项 说明
defaultText 指定默认文本
height 指定文本框高度
数值输入框

  数值输入框通过 view.field(XXX).form().numberInput() 方法指定,默认搜索框为数值输入框。它的配置项有:

配置项 说明
allowNegative 是否允许负数,默认允许
decimal 指定为小数输入框
integer 指定为整数输入框
defaultValue 默认值
range 数值范围
scale 小数位
step 滚轮步长
按钮组件

按钮组件通过 view.field(XXX).form().button() 方法指定。它的配置项有:

配置项 说明
action 指定默认文本
chooseOrganization 打开组织选择对话框
chooseCompany 打开公司选择对话框
chooseDepartment 打开部门选择对话框
chooseEmployee 打开员工选择对话框
choosePosition 打开岗位对话框
复选框

复选框组件通过 view.field(XXX).form().checkBox() 方法指定,默认搜索框为下拉框。它的配置项有:

配置项 说明
defaultValue 指定默认选中的值
defaultIndex 指定默认选中的序号
enumType 指定选项为枚举类型
dict 指定选项为数据字典
单选框

单选框组件通过 view.field(XXX).form().radioBox() 方法指定,默认搜索框为下拉框。它的配置项有:

配置项 说明
defaultValue 指定默认选中的值
defaultIndex 指定默认选中的序号
enumType 指定选项为枚举类型
dict 指定选项为数据字典
下拉框

下拉框组件通过 view.field(XXX).form().selectBox() 方法指定,默认搜索框为下拉框。它的配置项有:

配置项 说明
defaultValue 指定默认选中的值
defaultIndex 指定默认选中的序号
enumType 指定选项为枚举类型
dict 指定选项为数据字典
fillWith 指定用哪个属性的数据填充下拉框的已选值
filter 是否使用过滤功能
muliti 配置为是否多选
paging 是否分页
size 分页大小
queryApi 指定取数的 API 地址
valueField 设置值列名
textField 设置显示列名
toolbar 是否使用工具栏
日期选择框

日期选择框通过 view.field(XXX).form().dateInput() 方法指定。它的配置项有:

配置项 说明
format 格式,如: yyyy-MM-dd HH:mm:ss , yyyy-MM-dd默认,为自动识别
defaultNow 设置默认值为当前时间
renderAtTop 为避免 iframe 区域太小而被遮挡,可设置改值使其弹出框显示在 iframe 之外 ; 默认 false
Switch组件

Switch 组件通过 view.field(XXX).form().logicField() 方法指定。它的配置项有:

配置项 说明
defaultValue 指定默认文本
on 设置开启(逻辑真)状态下的标签与值
off 设置关闭(逻辑假)状态下的标签与值
文件上传组件

文件上传组件通过 view.field(XXX).form().upload() 方法指定。它的配置项有:

配置项 说明
acceptAllType 允许上传任意类型的文件
acceptAudioType 仅允许上传音频
acceptImageType 仅允许上传图片
acceptSingleFile 仅允许上传单个文件
acceptSingleImage 仅允许上传单个图片
acceptVideoType 仅允许上传视频
acceptMime 允许上传的Mime
acceptExts 允许上传的文件扩展名
buttonLabel 文件浏览按钮的显示文本
displayFileName 是否显示文件名
maxFileCount 最大文件数量
小结

  本节列举了 Foxnic-Web 目前已经支持的全部表单组件。表格中的每个配置方法都包含若干参数,由于篇幅限制不能一一列举每个方法内参数的用法,大家可以按 JavaDoc 提示指定参数值。

相关项目

  https://gitee.com/LeeFJ/foxnic

  https://gitee.com/LeeFJ/foxnic-web

  https://gitee.com/lank/eam

  https://gitee.com/LeeFJ/foxnic-samples

官方文档

  http://foxnicweb.com/docs/doc.html

点赞
收藏
评论区
推荐文章
LeeFJ LeeFJ
1年前
Foxnic-Web 代码生成 (7) —— 配置表单页
我们之前已经介绍了字段的通用配置和字段的表单组件配置,这些配置仅限于单个字段。由于FoxnicWeb的模块页面以打开窗口的方式呈现表单内容,自然就会有对表单窗口的控制,以及表单字段布局的控制。
LeeFJ LeeFJ
1年前
Foxnic-Web 代码生成 (5) —— 配置字段的通用项
字段的配置是代码生成的核心。一个字段在界面上出现的位置有三个:表单、表格、表格的搜索区域,且这三个位置可能存在一定的相关性。字段配置就是要对某个字段在这个三个位置的表现形式和功能特性进行配置,从而生成符合业务需求的代码。
LeeFJ LeeFJ
1年前
Foxnic-Web 代码生成 (8) —— 配置列表页
列表页面主要包含了顶部的搜索区域和表格区域,搜索区域有点类似表单,配置上可能存在相似之处。本篇我们就来了解一下,在代码生成时的列表页呈现方面,我们可以做点啥。
浩浩 浩浩
3年前
【Flutter实战】输入框和表单
3.7输入框及表单Material组件库中提供了输入框组件TextField和表单组件Form。下面我们分别介绍一下。3.7.1TextFieldTextField用于文本输入,它提供了很多属性,我们先简单介绍一下主要属性的作用,然后通过几个示例来演示一下关键属性的用法。dartconstTextField({...
AWS国庆双重礼,仅限7天
自2021年10月1日00:00起至2021年10月7日24:00,新注册并激活(需全部完成账号注册的五个步骤,否则账号状态并未激活)AWS海外区域账户,填写页面下方表单,即可申领价值$200美元的AWS海外区域账户服务抵扣券直充到您的账户,用以抵扣服务消费,助您轻松体验多个云迁移应用场景。同时,您还可获赠AWS精美祥云纪念T恤一件。,仅限7天$20
前端配置化表单组件设计方法 | 京东云技术团队
前端开发中涉及表单的页面非常多,看似功能简单,开发快速,实则占去了很大一部分时间。当某个表单包含元素过多时还会导致html代码过多,vue文件过大。从而不容易查找、修改和维护。为了提高开发效率及降低维护成本,下面介绍表单配置化组件的封装原理与封装方法。
Stella981 Stella981
2年前
ELK学习笔记之配置logstash消费kafka多个topic并分别生成索引
0x00 filebeat配置多个topicfilebeat.prospectors:input_type:logencoding:GB2312fields_under_root:truefields:添加字段
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
2年前
Phalcon7发布1.1.0版
合并Phalcon\Mvc\Model\Validator\到Phalcon\Validation\Validator\统一验证类。优化表单类,更加方便的创建新的表单元素,并支持转换为数组,提供给前端JS动态生成表单。内置支持HMVC。强化Model,更加方便的自定义字段和映射字段。完善了文档。<?php
京东云开发者 京东云开发者
8个月前
实现动态表单的一种思路 | 京东云技术团队
一、动态表单是什么区别于传统表单前后端配合联调的开发实现方式,动态表单通过一种基于元数据管理的配置化方法来实现表单的动态生成,并能根据配置自由增改删指定字段。实现特定需求的自助化。图1.1传统表单前后台协作模式图1.2动态表单前后台协作模式二、解决什么问题