基于Extjs的web表单设计器

基于Extjs的web表单设计器 第一节

基于Extjs的web表单设计器 第二节——表单控件设计

基于Extjs的web表单设计器 第三节——控件拖放

基于Extjs的web表单设计器 第四节——控件拖放

基于Extjs的web表单设计器 第五节——数据库设计

基于Extjs的web表单设计器 第六节——界面框架设计

基于Extjs的web表单设计器 第七节——取数公式设计之取数公式定义

基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

基于Extjs的web表单设计器 第八节——表单引擎设计

  在上一节中给大家介绍了如何定义一套取数公式,以及取数公式的参数设计。有了这些知识基础,我们本节主要介绍取数公式的使用。

  一个具体业务范畴的系统中,我们首先会根据业务知识的积累,定义出业务范围之内通用的取数公式。比如单据的日期、单据编号、制单人、制单部门、部门职员、职员职责等等信息。这些取数方法基本上每个业务单据都会涉及到。当我们抽象并定义出了这些取数公式之后,后面在表单设计器中设计业务单据的时候直接使用它们就行了。

首先我们定义一个取数公式的实体类型:

 public class Formula
{
/// <summary>
/// 取数公式名称
/// </summary>
public string Name { get; set; } /// <summary>
/// 取数地址
/// </summary>
public string Url { get; set; } /// <summary>
/// 取数参数列表
/// </summary>
public Dictionary<string, string> Parameters { get; set; } /// <summary>
/// 计算公式
/// </summary>
public string Expression { get; set; } /// <summary>
/// 授权的控件类型
/// </summary>
public string ControlType { get; set; } /// <summary>
/// 取数公式对应的资源参照
/// </summary>
public string ResourceTypeID { get; set; } public Formula()
{
this.Parameters = new Dictionary<string, string>();
}
}

取数公式的实体类

  该实体类型的属性和我们上一节讲的取数公式的XML定义的属性基本一致的,只是少了一个公式的描述,多了一个Expression的属性。该属性是我们用来存储一些特殊的取数公式的表达式用的。那些特殊的取数公式会有表达式呢?这里我给大家列举两类特殊的取数公式会有表达式,然后就是控件的条件隐藏功能会用到表达式。这里请注意,我们没有把条件隐藏作为取数公式,而是一个控件的功能属性。为什么?请大家思考。

  因为取数公式是每个控件的数据源的抽象表示,一个控件的数据来源不会有两个公式吧?而每个控件也都有可能会根据其他控件的取值进行隐藏、显示的(条件隐藏)需求吧。因此两者是不同的东西,是并行存在的。那这里可能会有人会问,既然是两个并行存在的不同的东西,那为什么会把条件隐藏的表达式存放到公式的实体中去呢?(如果有人想到这个问题,我很想赞美你一句“很好,说明你已经具备很强的软件设计能力。懂得职责单一的道理。”)既然把它们两个东西搞到一坨,肯定还是有点道理的,职责单一也不是说非得什么东西都得单一设计,具体情况具体分析。这儿因为这两个表达式的保存前的校验,数据库中的保存方式,前台JS引擎解析等过程都是一样的流程,因此我们没有必要单一设计。把它们统一到一个Json对象中统一处理也不为一种好的处理方式。

  好啦,掰扯了半天还没说“两类特殊的取数公式”是啥?这里所说的两类特殊的取数公式是下图一中的描述的东东。我现在喜欢用一些图来表述一些东西,很简洁,很明了,很爽。深切体会到“文不如表,表不如图”。相信大家一看就明白了。

  

  为了在表单设计器中使用这些取数公式,那么我们首先得取到这些取数公式。我们定义一个接口专门把取数公式的XML文件中的所有的XML描述的取数公式全部解析到对应的Formula实体对象的集合。

public IEnumerable<Formula> GetFormulaList()
{
XElement xRoot = XElement.Load(path);
foreach (var xel in xRoot.Elements())
{
var url = xel.Attribute("Url");
var controlType = xel.Attribute("ControlType");
var resourceTypeId = xel.Attribute("ResourceTypeID");
Dictionary<string, string> dict = null;
if (xel.HasElements)
{
dict = new Dictionary<string, string>();
foreach (var p in xel.Element("Parameters").Elements())
{
var pName = p.Attribute("Name");
var name = pName == null ? null : pName.Value;
dict.Add(p.Value, name);
}
}
yield return new Formula
{
Name = xel.Attribute("Name").Value,
Url = url == null ? null : url.Value,
ControlType = controlType == null ? null : controlType.Value,
ResourceTypeID = resourceTypeId == null ? null : resourceTypeId.Value,
Parameters = dict
};
}
}

取数公式数据源接口

  那么至此我们准备好了取数公式的数据源,剩下的事儿就是在表单设计器中根据不同类型的控件来选择这些不同的取数公式并设定相关的公式参数。文不如图,那么就直接上图,下面图二是表单设计器中我们对两类不同类型控件的取数公式界面的截图展示。一个是金额控件,一个是下拉树控件,请大家对比其中的一些区别地方。

                  图二

区别有三:

1.下拉树控件的取数公式的类型比金额控件多了一个选项“资源取数”;

2.下拉树控件的取数公式选择类型为“资源取数”后,设置的界面多了一个“设置取值范围”的功能,见上图;

3.两种控件的公式取数,取数公式内容不一样;(PS:上图是看不出来的,不用找了)

这里对这三个区别一一做出解释:

1.下拉树控件的取数方法多了一个资源取数,这儿请大家联想我们在上一节中介绍的知识去理解。因为下拉树的数据源就是我们系统中的资源类型,这里的资源取数其实就是对应我们在上一节中介绍的静态资源。我们可以为下拉树控件直接设定它的数据源是某种静态的资源,而不需要根据其他参数进行组合筛选,因此这里的资源取数是必要的的。

2.因为有了上面的1的存在,因此2 的存在也是必要的。既然我们可以为下拉树控件设置静态的资源,那么我们就可以设定一个静态的资源作为下拉树控件的默认值。有些同学可能会问,难道根据公式取数的动态资源就不能设定默认值么???答案是可以设定的,但是设定了是没有意义的,既然没有意义,那么就不需提供这个功能!!!为什么没有意义?我的解释是——既然是公式取数,那么公式就是在运行时解析的一个东西,我们事先是不能明确该公式的参数值的,既然参数值都不能确定,那么结果值就更不能确定了,也许结果集里面根本就不包含这个默认值,那么你设置一个默认值还有意义么?所以公式取数我们是没有默认值范围的。

3.在上一节中已经介绍了,每个取数公式都有一个支持的控件的类型,不同类型的控件能够使用的取数公式也自然是不一样的。因此我们在表单设计器中使用的时候肯定会根据选择的控件类型不同来对取数公式的数据源进行过滤,只提供该类型控件能够使用的取数公式列表即可。

  下面我们来通过一个例子介绍一下取数公式在表单设计器中的使用。比如有一个叫取数公式“部门下的职员”——意思就是根据选择的部门key来动态获取该部门下的所有职员的列表。那么在我们的表单模板设计中,比如有两个控件:一个是“借款部门”,另一个是“借款人” 如图三所示。

              图三

  然后借款人就需要根据“部门下的职员”这个取数公式来动态的传入“借款部门”这个控件所选取的值作为参数来获取该部门下的职员列表。那么我们在设置借款人这个控件的取数公式的时候就需要选择公式列表中的“部门下的职员”这个公式。然后设定它的公式参数“部门”的值为"借款部门"这个控件。这里我们也提供了两种特殊的取数公式“摘要生成”和“公式计算”的使用截图,如图四所示。请大家注意图四中几幅图的区别和联系。

                                                              图四

  然后设置好这些属性之后,我们点击控件属性面板的“确定”按钮表单设计器就会自动的为控件生成一个取数公式的JSON对象,并且会去校验取数公式设置的正确与否,如果正确就存放到控件的Formula属性中去,最后保存表单模板的就会直接存入数据库中。至此,我们介绍了取数公式在表单设计器中的使用,到这里我们表单设计器这个部分的主要功能和设计都已经作了介绍。余下的就是另一个重要的组成部分——表单引擎的介绍了。表单引擎主要负责了我们表单模板的加载、控件层级关系嵌套及渲染,控件各个属性的生成及应用,控件取数公式的生成及解析,控件联动关系的生成及解析,权限值的控制及应用等等核心内容。这些内容我们会在后面的章节娓娓道来,请看下一节“基于Extjs的web表单设计器 第八节——表单引擎设计 “。

基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用的更多相关文章

  1. 基于Extjs的web表单设计器 第六节——界面框架设计

    基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extj ...

  2. 基于Extjs的web表单设计器 第五节——数据库设计

    这里列出表单设计器系列的内容,6.7.8节的内容应该在春节后才有时间出了.因为这周末就请假回老家了,准备我的结婚大事.在此提前祝大家春节快乐! 基于Extjs的web表单设计器 基于Extjs的web ...

  3. 基于Extjs的web表单设计器 第四节——控件拖放

    接着上一节介绍控件拖放的设计. 通过前面的介绍知道,我们的区域类型的容器控件有三种:Card.Table.Mixed. Card 可以支持几乎所有的常用控件,包括:文本TextField.多文本Tex ...

  4. 基于Extjs的web表单设计器 第三节——控件拖放

    看过之前设计器截图的朋友应该有印象,可能会发觉我们的设计器UI设计布局其实类似Visual studio 的设计界面,采用的是左.中.右三个区域布局.左侧为控件区域.中间为表单的画布设区域.右侧为属性 ...

  5. 基于Extjs的web表单设计器

    由于这样工作和自身的一些原因很长一段时间没有写过博客了.最近想把自己前面一段时间搞出的一个表单设计器的相关经验或者经历记录下来.分享给大家,也算是对自己前2个月的一个总结回顾吧. 首先介绍一下开发此版 ...

  6. 基于Extjs的web表单设计器 第一节

    前面一节介绍了表单设计器的背景和最终的大概样式,本节主要介绍表单设计器的需求及功能设计. 在讲需求之前先明确几个常用的概念: 主表或者卡片表——具有多行多列的一个区域的控件块,如下图所示. 明细表—— ...

  7. 基于Extjs的web表单设计器 第二节——表单控件设计

    这一节介绍表单设计器的常用控件的设计. 在前面两章节的附图中我已经给出了表单控件的两大分类:区域控件.常用控件.这里对每个分类以及分类所包含的控件的作用进行一一的介绍,因为它们很重要,是表单设计器的基 ...

  8. YbSoftwareFactory 代码生成插件【十六】:Web 下灵活、强大的审批流程实现(含流程控制组件、流程设计器和表单设计器)

    程序=数据结构+算法,而企业级的软件=数据+流程,流程往往千差万别,客户自身有时都搞不清楚,随时变化的情况更是家常便饭,抛开功能等不谈,需求变化很大程度上就是流程的变化,流程的变化会给开发工作造成很大 ...

  9. .net web 开发平台- 表单设计器 一(web版)

    如今为了适应需求的不断变化,动态表单设计器应运而生.它主要是为了满足界面的不断变化和提高开发速度.比如:一些页面客户可能也无法确定页面的终于布局,控件的位置,在哪种情况下显示或不显示等可能须要随时改动 ...

随机推荐

  1. [Effective JavaScript 笔记]第52条:数组字面量优于数组构造函数

    js的优雅很大程序要归功于程序中常见的构造块(Object,Function及Array)的简明的字面量语法.字面量是一种表示数组的优雅方法. var a=[1,2,3,5,7,8]; 也可以使用构造 ...

  2. [Educational Codeforces Round 16]A. King Moves

    [Educational Codeforces Round 16]A. King Moves 试题描述 The only king stands on the standard chess board ...

  3. 又一款linux提权辅助工具

    又一款linux提权辅助工具 – Linux_Exploit_Suggester 2013-09-06 10:34 1455人阅读 评论(0) 收藏 举报 https://github.com/Pen ...

  4. Android 下载文件及写入SD卡

    Android 下载文件及写入SD卡,实例代码 <?xml version="1.0" encoding="utf-8"?> <LinearL ...

  5. string s = null 和 string s = “”的区别

    string s = null; 表示一个空串,没有占用了空间,不在内存中开辟空间 string s = "";在内存中开辟空间,但空间中没有值(""也是一个字 ...

  6. iOS 利用self.navigationItem.backBarButtonItem修改后退按钮文字

    @property(nonatomic,retain) UIBarButtonItem *backBarButtonItem; // Bar button item to use for the ba ...

  7. Maven运行时异常java.lang.UnsupportedClassVersionError的解决方案

    我用的Maven版本为最新版:3.3.9,但是我执行一个简单的clean命令会报如下错误: Exception in thread "main" java.lang.Unsuppo ...

  8. 【python】format函数格式化字符串的用法

    来源:http://www.jb51.net/article/63672.htm 自python2.6开始,新增了一种格式化字符串的函数str.format(),可谓威力十足.那么,他跟之前的%型格式 ...

  9. win8系统使用Administrator用户 命令行

    windows键+X,再按A键进入管理员模式的命令提示符 输入命令:net user administrator /active:yes 然后注销,即可使用管理员账户登录

  10. intellij 提交代码到git

    .配置git .create git repository .git-->add commit Directory .提交代码 git remote add origin https://git ...