文档章节

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

ccflow-黄志敏
 ccflow-黄志敏
发布于 08/06 19:47
字数 1189
阅读 54
收藏 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-黄志敏
粉丝 3
博文 23
码字总数 13776
作品 0
济南
程序员
私信 提问
基于Linux环境的Web.py框架介绍

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

元宵大师
07/27
0
0
工作流系统之二十五 .net工作流系统开发体会

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

长平狐
2012/10/11
218
0
我的python学习--第十天

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

yaoliang833
2016/09/05
0
0
小程序 发送模板消息的功能实现

☹. 背景 微信消息通知 的区别: 此处参考京东购物的消息通知如下(也就是在下想要实现的效果): ❶ 前期准备 ①. 首先,微信小程序官方文档为我们提供了指导 --- 【发送模板消息】 我们可以...

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

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

ccflow
2009/06/05
0
20

没有更多内容

加载失败,请刷新页面

加载更多

自定义Maven插件功能

自定义maven插件 创建一个maven 项目 通过上述方式创建,会自动引入maven-plugin-api 依赖和打包方式;如下 <packaging>maven-plugin</packaging><dependency> <groupId>org.apache.mave......

春哥大魔王的博客
29分钟前
2
0
和平之翼代码生成器SMEU版5.0-7.0项目代号初稿兼征求意见

现在,和平之翼代码生成器SMEU 4.0 宝船 Treasure Ship已经开始研发。是规划下一代代码生成器项目代号和功能清单的时候了。 宝船: 这是我初步的计划,欢迎您的意见: 和平之翼SMEU 5.0 福船...

火箭船
39分钟前
1
0
0016-Avro序列化&反序列化和Spark读取Avro数据

1.简介 本篇文章主要讲如何使用java生成Avro格式数据以及如何通过spark将Avro数据文件转换成DataSet和DataFrame进行操作。 1.1Apache Arvo是什么? Apache Avro 是一个数据序列化系统,Avro提...

Hadoop实操
51分钟前
1
0
访问日志不记录静态文件、切割和静态元素过期时间

11月16日任务 11.22 访问日志不记录静态文件 11.23 访问日志切割 11.24 静态元素过期时间 1. 访问日志不记录静态文件 示例一: 网站大多元素为静态文件,如图片、css、js等,这些元素可以不用...

hhpuppy
57分钟前
2
0
day151-2018-11-18-英语流利阅读-待学习

后双十一时代阿里将何去何从? Daniel 2018-11-18 1.今日导读 “这么便宜,我要买下来,统统都要买下来!” 这个双十一,你剁手了吗?据说阿里巴巴天猫在刚过去的双十一里单日销售额再创新高...

飞鱼说编程
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部