zoukankan      html  css  js  c++  java
  • .NET 开源表单设计器: SlickMaster开源表单设计器快速使用指南

    前言:在企业数据处理过程中,经常需要通过定制表单来输入业务数据。由于涉及的数据比较离散,并不同于ERP系统的紧密关联数据。假如由开发人员每个增加页面,工作量会比较大,后期后期的维护很升级也耗费时间和精力。所以表单设计器是一个实现动态表单的解决办法,用户无需重复编写表单代码就可以管理表单和存储表单数据。

    1. 表单设计器

        表单设计器是一款基于Bootstrap3风格的WEB应用,操作过程描述主要是将左侧面板控件拖动到表单编辑区域进行排版,每个控件可以编辑对应的数据库字段属性,常见属性有:字段类型,输入格式,控件名称等。等所有界面字段编辑保存后,生成表单模板的HTML文本。从而可以预览正式的表单加载页面。这样在表单集成业务应用系统中,生成正式的运行页面。在运行阶段,页面控件的输入数值可以被保存在后端对应的数据库表中。

    1.1 控件类型

     常见的控件类型主要有:输入文本框,下拉框,单选按钮,复选按钮,多选列表,命令按钮和数据表格等。其中如文本等类型的控件对应数据库的输入字段,而如按钮类型的控件只是在界面上显示而已,并不对应于数据库的字段。

    1.2 HTML内容

        表单定义内容被存储成HTML内容,便于表单后期解析加载。其中HTML的Bootstrap框架样式和脚本文件只需要记录路径就可以。通过表的设计器上的预览功能界面上,就可以看到完整的HTML输出内容和页面布局。

    1.3 高级控件功能实现

    a) 文件上传组件

        表单附件是依附于表单的文档数据,比如WORD、EXCEL、PDF和JPEG文件等。在表单设计器控件中,文件上传组件采用了第三方组件FineUpload完成这一控件功能。表单定义的HTML内容中包含了上传组件类型,在表单解析器中将会加载FineUpload控件的样式和脚本,并通过上传页面完整实现文件上传到后端服务器的过程。

        文件上传到服务器端后,可以对接用户自有的文件系统,也可以比如阿里云或其它云端存储系统。

     

    b) 数据表格组件

        在一个表单中为了展现关联数据,可以设置数据表格控件来读取数据库其它表单实体数据。数据表格采用ag-grid控件,主要是考虑复杂数据格式的处理和编辑。

     

    1.4 表单解析器

        表单解析器是把表单定义的HTML内容重新加载到页面DIV控件中,对于简单控件类型,直接加载预留的控件格式定义就可以,但是对于高级控件,如文件上传和数据表格控件,则需要额外读取这些控件的样式或者脚本,或者其它标准定义好的页面,从而完成这些控件的所实现的表单高级功能。

    2. 表单数据存储

        常见的表单数据存储有XML格式,或者预留的多列数据库结构定义以及EAV模型存储。在SlickMaster表单设计器项目中,优先采用了EVA模型,主要考虑的是系统的数据存储和后期读取效率的平衡。EAV模型也被知名电商公司Magento应用于产品数据定义,确实很好地解决了表单定义、表单数据存储和表单数据查询等关键问题。

    2.1 EAV模型解释

        EAV是Entity-Attribute-Value的缩写,用于存储表单实体、属性定义和属性数值。跟传统关系型数据库不同的是:实际表数据库存储时是key-value格式的行记录存储,而关系型数据库是多列数据存储。

    2.2 表单数据行列转置

        数据读取虽然可以通过行记录方法读取出来,其中一行读取一条属性名称和属性数值。但是通常的行记录是希望包含多列数据同时拼凑出一条。所以数据库记录需要行列转置(Pivot)来实现表单数据实体的读取。虽然属性不是固定对象字段类型,但是仍然可以通过.NET的dynamic类型来操作处理。再有,这些动态类型的实体数据,在前端展现也可以通过每次动态生成的列标题来加载展现,最终实现了数据的用户友好体验展现。

    3. 表单和工作流引擎的集成

        表单可以跟引擎组件集成在一起完成文档的审批流转。其中表单数据的保存、接收、流转、撤销、退回、废弃和结束等通用按钮都是可以被标准化定义出来。而表单解析器则是通过把表单设计器定义好的表单HTML内容加载在动态表单的展现区域。

    4. 总结:

        表单设计器用于解决常见的比如调查问卷填写,或企业管理数据的录入和维护,其主要功能是渲染生成HTML表单,存储结构化数据。在高级应用功能是集成工作流引擎组件,完成表单审批流转。

    5. DEMO

        演示地址:http://demo.slickflow.com/smd/

    6. 社区版源代码

        SlickMaster项目开源地址:

        http://github.com/besley/slickmaster

    7. 企业版授权说明

    1) Demo仅作为功能演示使用,如需获取产品完整源代码和开发文档,请申请企业版商业授权。

    2) QQ群:233248778

    3) EMail: sales@ruochisoft.com

  • 相关阅读:
    IMX6ULL开发板Ubuntu文件系统Ubuntu-base构建
    迅为3399开发板新增目标检测技术-RKSSD-编译程序
    国际化支持、activity生命周期、屏幕翻转的ui适配
    java调用第三方接口(转载)
    android基础控件的使用
    java并发框架--Fork-Join
    java并发框架--Executor
    多线程管理
    死锁问题
    java多线程信息共享
  • 原文地址:https://www.cnblogs.com/slickflow/p/8832924.html
Copyright © 2011-2022 走看看