文档章节

表单引擎呈现部分-代码实现逻辑结构详解

ccflow-黄志敏
 ccflow-黄志敏
发布于 2018/08/06 19:47
字数 1189
阅读 1.2K
收藏 1

基于上篇文章我们只做了简单了两种设计思想的对比,没有深入说明实现原理。

本章节我们的重点说明表单引擎系统基于关系型数据库设计的实现原理以及CCBPM实现的重点代码结构。

表单引擎系统是由表单设计器和表单解析器和表单模板三部分组成。

表单设计器为表单设计入口,通过表单设计器的表单设计将表单组成元素存储到数据表中,在进行表单展示过程中,通过表单解析器进行对表单模板数据进行解析和拼接,生成网页内容进行展示。

表单设计器

实现原理详解

驰骋工作流引擎-傻瓜表单实现原理

 

代码详解,

在Designer.htm初始化界面中,工具栏按钮直接在表单上进行展示。

新建组件时,弹出FieldTypeList.htm页面。实现对各种类型的组件新增功能。

新建字段时,执行AddF方法,弹出页面。

function AddF() {

    var url = 'FieldTypeList.htm?DoType=AddF&FK_MapData=' + GetQueryString('FK_MapData');

    var h = 500;

    var w = 600;

    var l = (screen.width - w) / 2;

    var t = (screen.height - h) / 2;

    var s = 'width=' + w + ', height=' + h + ', top=' + t + ', left=' + l;

    s += ', toolbar=no, scrollbars=no, menubar=no, location=no, resizable=no';

    var b = window.showModalDialog(url, 'ass', s);

    window.location.href = window.location.href;

}

FieldTypeList.htm页面详解

新建字段时弹出该页面,该接页面在初始化加载时将组件控件进行展示

在点击保存触发时,将控件信息记录到对应的组件数据表中。

控件在数据库中的存储//求出选择的字段类型.

            MapAttr attr = new MapAttr();
            attr.Name = newName;
            attr.KeyOfEn = newNo;
            attr.FK_MapData = this.FK_MapData;
            attr.LGType = FieldTypeS.Normal;
            attr.MyPK = this.FK_MapData + "_" + newNo;
            attr.GroupID = iGroupID;
            attr.MyDataType = fType;

            int colspan = attr.ColSpan;
            attr.Para_FontSize = 12;
            int rows = attr.UIRows;

            if (attr.MyDataType == DataType.AppString)
            {
                attr.UIWidth = 100;
                attr.UIHeight = 23;
                attr.UIVisible = true;
                attr.UIIsEnable = true;
                attr.ColSpan = 1;
                attr.MinLen = 0;
                attr.MaxLen = 50;
                attr.MyDataType = DataType.AppString;
                attr.UIContralType = UIContralType.TB;
                attr.Insert();
                return "url@../../Comm/En.htm?EnName=BP.Sys.FrmUI.MapAttrString&MyPK=" + attr.MyPK;
            }

普通文本类型、日期类型、数值类型、枚举类型、外键类型在Sys_Mapatrr中进行存储。附件控件,在Sys_FrmAttachment附件表中存储。普通标签类型在Sys_FrmLab表中存储。

更多控件类型存储,请参考代码实现。

表单解析器

表单解析器工作原理为从存储组件的数据表中获取存储数据表以及组件表的相互关系,以JSON数据格式返回至展示界面。展示界面介绍JSON数据后通过JS脚本解析,分别对各种控件文本控件、数据控件、日期控件、枚举控件、外键控件、附件控件、明细表控件、审核组件控件等的解析予以不同的字符串拼接展示。最终以htm网页的形式展示出来。

表单解析器代码详解

表单设计器由同一入口文件传入的设计类型判断加载设计器的类型为傻瓜表单设计器还是自由表单设计器。

Designer.htm页面初始化函数如下:

一般处理程序方法实现:

Designer.htm页面加载设计器

使用data接受返回的json数据。

对json里面的三个对象<Sys_Mapdata、Sys_MapAttr、Sysy_GroupField>做拼接table。

普通文本类型、日期类型、数值类型、枚举类型、外键类型的表单实现,在实现过程中将根据控件属性,权限<只读、可编辑、不可见>、默认值填充等进行加载。

 html += "<td class='FDesc'>" + GenerLabel(mapAttr) + "</td>";
 html += "<td ColSpan=" + mapAttr.ColSpan + "><div id='DIV_" + mapAttr.KeyOfEn + "'><input class='form-control' style='width:99%;margin:3px;' maxlength=" + mapAttr.MaxLen + "  name='TB_" + mapAttr.KeyOfEn + "' id='TB_" + mapAttr.KeyOfEn + "' type='text' " + (mapAttr.UIIsEnable == 1 ? '' : ' disabled="disabled"') + "/></div></td>";
 html += "</tr>";

附件控件的表单实现

var frameUrl = "<iframe ID='F" + athEn.MyPK + "' frameborder=0 style='padding:0px;border:0px;width:100%;height:" + athEn.H + "px;'  leftMargin='0'  topMargin='0' src='" + src + "'  scrolling='auto'  /></iframe>";
return "<tr><td colspan=4 id='TD" + athEn.MyPK + "' style='width:" + athEn.H + "px;'>" + frameUrl + "</td></tr>";

明细表、从表控件展示

var src = "MapDtlDe.htm?DoType=Edit&FK_MapData=" + pageParam.fk_mapdata + "&FK_MapDtl=" + dtl[0].No;
var frameUrl = "<iframe ID='F" + dtl[0].No + "' frameborder=0 style='padding:0px;border:0px;width:100%;height:" + dtl[0].H + "px;'  leftMargin='0'  topMargin='0' src='" + src + "'  scrolling='auto'  /></iframe>";
return "<tr><td colspan=4 id='TD" + dtl[0].No + "'>" + frameUrl + "</td></tr>";

审核组件控件展示

var src = "../../WorkOpt/WorkCheck.htm?WorkID=0&FK_Flow=" + fk_flow + "&FK_Node=" + nodeID + "&FK_MapData=" + pageParam.fk_mapdata;
var frameUrl = "<iframe ID='FWC' frameborder=0 style='padding:0px;border:0px;width:100%;height:" + h + "px;' leftMargin='0' topMargin='0' src='" + src + "' scrolling='auto'  /></iframe>";
return "<tr><td colspan=4 style='width:100%;height:" + h + "px;' id='FWC' >" + frameUrl + "</td></tr>";

更多实现过程,请参考代码。

© 著作权归作者所有

ccflow-黄志敏

ccflow-黄志敏

粉丝 8
博文 23
码字总数 13776
作品 0
济南
程序员
私信 提问
加载中

评论(0)

面向复杂场景的高性能表单解决方案

经过3年的洗礼,由阿里供应链平台前端团队研发打造的UForm终于发布!🎉🎉🎉 UForm 谐音 Your Form , 代表,这才是你想要的Form解决方案 高性能,高效率,可扩展,是UForm的三大核心特色...

janryWang
2019/04/20
0
0
Javascript Web应用开发之:MVC模式

  【IT168技术】MVC 是一种设计模式,它将应用划分为3 个部分:数据(模型)、展现层(视图)和用户交互层(控制器)。换句话说,一个事件的发生是这样的过程: ▲Javascript Web富应用开发图书推...

作者:李晶,张散集译
2012/06/26
0
0
基于Linux环境的Web.py框架介绍

前言 客户端和Web服务器的交互过程可以概括为:Web服务器接收客户端的请求后,由Web应用服务器对浏览器的请求进行处理,将生成的响应传递给Web服务器,再由Web服务器返回给客户端。为了简化W...

元宵大师
2018/07/27
0
0
我的python学习--第十天

上午: 作业讲解 div的使用 bootstrap的调用 下午: 扒页面 jinja2模板继承 系统流程 return false的作用(见第九天) 模态框 一、复习 1、一个完整开发项目要素 1.MVC----控制器(逻辑端),视图...

yaoliang833
2016/09/05
0
0
驰骋工作流引擎 - ccflow

开源的驰骋工作流引擎简介 驰骋工作流引擎研发与2003年,具有.net与java两个版本,它们代码结构、数据库结构、设计思想、功能组成、操作手册完全相同。流程表单模版两个版本完全通用。 CCFl...

ccflow
2009/06/05
15.8W
18

没有更多内容

加载失败,请刷新页面

加载更多

程序员需要了解依赖冲突的原因以及解决方案

0x00. 前言 依赖冲突是日常开发中经常碰到的过程,如果运气好,并不会有什么问题。偏偏小黑哥有点背,碰到好几次生产问题,排查一整晚,最后发现却是依赖冲突的引起的问题。 没碰到过这个问题...

楼下小黑哥
22分钟前
60
0
聊聊skywalking的JVMService

序 本文主要研究一下skywalking的JVMService BootService skywalking-6.6.0/apm-sniffer/apm-agent-core/src/main/java/org/apache/skywalking/apm/agent/core/boot/BootService.java publi......

go4it
23分钟前
42
0
python处理Redis的基本操作

安装 docker run -d -p 6379:6379 redis 操作 连接 redis-py提供两个类Redis和StrictRedis用于实现Redis的命令,StrictRedis用于实现大部分官方的命令,并使用官方的语法和命令,Redis是S...

项昂之
38分钟前
36
0
python 多文件编程文件调用方式

python 多文件编程文件调用方式 首先要知道的是在使用python命令执行python代码时,默认的代码执行方式是脚本的方式.如下: $ python main.pyHello World! 除了通过脚本的方式运行python代码...

ghimi
49分钟前
45
0
Linux 用户管理命令笔记

1、新增用户 useradd user1 用户创建流程 1、系统先将用户信息记录在/etc/passwd中,一般会在/etc/passwd和/etc/shadow末尾,同时分配该用户UID。 2、创建用户目录,一般创建路径/home目录中。...

IT技术分享社区
50分钟前
43
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部