Foxnic-Web 代码生成 (7) —— 配置表单页

Foxnic-Web 代码生成 (7) —— 配置表单页

概述

        我们之前已经介绍了字段的通用配置和字段的表单组件配置，这些配置仅限于单个字段。由于 Foxnic-Web 的模块页面以打开窗口的方式呈现表单内容，自然就会有对表单窗口的控制，以及表单字段布局的控制。

        本篇我们就来了解一下，在代码生成时的表单呈现方面，我们可以做点啥。

        本文中的示例代码均可在 foxnic-samples: 用于展示和提供 Foxnic 相关的示例工程和代码 项目中找到，本文对照 webfull 项目讲解。

完整示例

        Foxnic-Web 项目提供代码生成的完整示例，请大家参考：

common/generator/src/main/java/org/github/foxnic/web/generator/module/example/CodeExampleConfig.java · LeeFJ/foxnic-web - Gitee.com

配置表单窗口

        表单相关的配置可以在模块代码配置类的 configForm 方法内实现：

@Override
public void configForm(ViewOptions view, FormOptions form, FormWindowOptions formWindow) {
    formWindow.width("120px");
    formWindow.bottomSpace(263);
}

        配置表单窗口，通过 ViewOptions.formWindow() 选项控制。formWindow 提供的控制项包括：

配置项	说明
width	设置表单窗口的宽度，默认500px；字符串可以指定像素或百分比。
bottomSpace	设置最下方的表单组件和窗口底部之间的间距，用于撑高表单窗口的高度，便于下拉框展示。

        表单窗是按表单内实际内容自动调节高度的，所以不必指定表单窗口的高度。单某些情况下，由于表单内字段较少，窗口高度也会比较低，这时，如果输入框是下拉框，那么可能不能很好地展示下拉选项，需要将表单窗口的高度人为的增加一些，这时就需要用到 bottomSpace 参数。

配置表单依赖文件

        表单以及表单页面通过 FormOptions 配置。在代码生成时，表单页面可以额外包含其它的 js 和 css 文件，以及变量等，配置项如下：

配置项	说明
addCss	添加 css 文件引入
addJs	添加 js 文件引入。
addJsVariable	添加 js 变量；这是表单的服务端模版变量。

配置表单外观参数

表单的外观参数如下：

配置项	说明
labelWidth	设置标签宽度，单栏次默认 65px；多栏次默认 100px
disableFooter	禁用 Footer，用于页面的嵌入。
disableMargin	禁用 Margin，用于页面的嵌入。
enableContextMenu	启用右键菜单，默认false。

配置表单布局

        Foxic-Web 的表单布局是比较丰富的，支持分组、分栏；支持添加嵌入页面、Tab等，相关配置项如下：

配置项	说明
columnLayout	使用分栏布局
addGroup	添加一个分组布局
addPage	添加一个内嵌页面
addTab	添加一个内嵌的 Tab

配置表单接口

        Foxic-Web 的表单布局是比较丰富的，支持分组、分栏；支持添加嵌入页面、Tab等，相关配置项如下：

配置项	说明
savingURL	设置自定义保存接口地址
loadingURL	设置自定义数据加载接口地址

小结

本节主要从表单窗口、表单页面依赖、表单外观、布局、接口等方面介绍了在代码生成时如何控制表单的外观呈现与功能特性。下一节，我们将介绍表格以及搜索相关方面的代码生成配置项。

相关项目

foxnic: Foxnic基础框架，开发工具。

foxnic-web: FoxnicWeb是一个应用开发框架，高效、快速、稳定。

Foxnic-EAM固定设备资产管理系统: EAM固定资产设备管理系统,满足中小企业基本需求，对常用资产设备进行信息化管理，包含自定义支持各类设备、自带导入导出、维护工作统计、采购管理、文档管理、合同管理等功能

foxnic-samples: 用于展示和提供 Foxnic 相关的示例工程和代码

官方文档

Foxnic 开发文档 - 入门指南