文档章节

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

ccflow-黄志敏
 ccflow-黄志敏
发布于 08/06 19:47
字数 1189
阅读 25
收藏 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-黄志敏
粉丝 2
博文 22
码字总数 13665
作品 0
济南
程序员
【译】通过Recompose库掌握React函数组件

【译】通过Recompose库掌握React函数组件 render() { }} //simpleclasscomponent.jsx ); //simplefunctionalcomponent.jsx const loadFromStorage = (key) => localStorage.getItem(key);con......

Crop Circle
08/20
0
0
工作流系统之二十五 .net工作流系统开发体会

.net工作流系统开发体会 公司的eworkflow自定义工作流系统,最初是开发了java版的。待java版的功能稳定后,就开始开发.net版的。 java版的eworkflow工作流系统,我们没有依赖于任何框架,如s...

长平狐
2012/10/11
218
0
How browsers work【中文版】

序言 这是一篇全面介绍 Webkit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源)...

k_k_anna
2015/02/10
0
0
浏览器的工作原理:新式网络浏览器幕后揭秘(转)

序言 这是一篇全面介绍 Webkit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源)...

Jeky
2012/12/07
1K
8
前端文摘:深入解析浏览器的幕后工作原理

简介   网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输入 直到您在浏览器屏幕上看到 Google 首页的整个过程中都发生了...

effto
2016/09/13
16
0

没有更多内容

加载失败,请刷新页面

加载更多

xilinx资源

本系列教学视频由赛灵思高级战略应用工程师带领你:从零开始,一步步深入 掌握 HLS 以及 UltraFAST 设计方法,帮助您成为系统设计和算法加速的大拿! http://www.eetrend.com/topics/2018-0...

whoisliang
4分钟前
0
0
=====BJmeter性能测试小接=====

一、性能测试分类 1、负载测试: 通过逐步加压的方法,达到既定的性能阈值的目标,阈值的设定应是小于某个值,如cpu使用率小于等于80% 2、压力测试: 通过逐步加压的方法,使得系统的某些资源...

覃光林
7分钟前
0
0
企业级开源四层负载均衡解决方案--LVS

网盘链接 企业级开源四层负载均衡解决方案--LVS 本课程将在Linux环境下,学习配置使用LVS,对Web集群和MySQL集群进行负载均衡,并结合利用Keepalived实现负载均衡器的高可用,实现对后端Rea...

qq__2304636824
13分钟前
0
0
Windows上安装Spacemacs

emacs安装 下载地址emacs 安装比较简单,解压后执行\bin\addpm.exe即可 emacs配置 emacs的默认配置文件路径和.emacs.d文件夹都是在Windows主目录下的 C:\Users\Administrator\AppData\Roami...

yxmsw2007
29分钟前
0
0
OSChina 周一乱弹 —— 鱼生不值得

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @瘟神灬念:分享新裤子的单曲《没有理想的人不伤心 (Remix版)》: 《没有理想的人不伤心 (Remix版)》- 新裤子 手机党少年们想听歌,请使劲儿戳...

小小编辑
今天
171
9

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部