CN106886418B - Html界面控件贴 - Google Patents

Abstract

本发明提出一种业务人员能自行设计使用维护信息化系统的有配属数据处理功能界面的HTML界面控件贴工具。工具采用可视化操作方式，能自由产生表格、浮动或绝对定位布局中的块状区域组合。块状区域是业务要素的容器，可通过复用已有的界面控件方式关联或拖动业务要素到选中块状区域方式关联，两种方式均在块状区域中产生各自的特定标记。块状区域可采用诸如图片、文本控件等基本控件进行说明修饰，也可进行诸如边框、背景色、字体大小等的外观设计。产生的设计方案是包含特定标记的各HTML元素的组合序列的描述，和生成使用该描述的页面代码，并把代码动态编译以供业务人员工作使用。业务人员自行完成界面开发维护，极大减低开销费用。

Description

HTML界面控件贴

技术领域

本发明实施方式涉及一种B/S模式的信息化系统的界面设计工具，尤其是涉及一种业务人员能自行开发使用维护界面的有配属数据处理功能的界面设计工具。

背景技术

随着计算机科技的发展，社会各方面与软件越来越紧密结合，尤其是事企业单位越来越依赖于信息化系统来处理日常事务。界面是业务人员操作信息化系统的主要方式，是开发维护信息化系统的重要组成部分。当前的界面设计工具几乎都是面向开发人员，其中很重要的原因就是使用该界面的数据的处理功能需要编程实现，数据的标识不同和使用的多样性导致同类界面不能一样，数据处理功能更不可能一样，可复用性较差，开发效率不高。常规的开发流程使得对信息化系统的需求满足需要较长的周期，最终导致开发维护开销较大。

本发明与自动化业务设计管理系统共用一个总的发明思路，引进其名为界面控件的概念来解决复用性问题，本发明主要针对HTML平台下的界面控件贴。界面控件是已由系统开发人员完成的控件，属于客户端程序，拥有可以调用已有的数据处理功能的数据接口和获取已设置的界面属性的数据接口，显示内部设定的界面，如同便利贴纸一样，供业务人员在信息化系统内各界面中按需使用。业务人员根据自身业务特点和需求采用本发明实施方式自行完成信息化系统的界面开发维护，最大限度减低开销费用。

当前信息化系统界面开发存在问题总结如下：

1.技术上，界面设计结果可复用性较差，工具使用人员多为开发人员，要求较高；

2.费用上，由开发人员实施的开发流程环节较多，开销较大。

发明内容

本发明所要解决的技术问题是，提出一种B/S模式下的信息化管理系统业务人员能自行开发使用维护满足自身业务需求的界面的有配属数据处理功能的界面设计工具——HTML界面控件贴。具体解决方案是：

HTML界面控件贴，采用可视化操作方式，能自由产生表格、浮动或绝对定位布局中的块状区域组合。块状区域是业务要素的容器，可通过复用已有的界面控件方式关联或拖动业务要素到选中块状区域方式关联，两种方式均在块状区域中产生各自的特定的标记。块状区域可采用诸如图片、文本控件等基本控件进行说明修饰，也可进行诸如边框、背景色、字体大小等的外观设计。产生的设计方案是包含特定标记的各HTML元素的组合序列的描述，和生成使用该描述的页面代码，并把代码动态编译以供业务人员工作使用。

本发明的有益效果是，业务人员使用HTML界面控件贴工具，最大限度地复用业务表或业务模块在页面的显示及数据处理功能，有效规避了业务人员无法进行编程的缺点。使用定位架，可以很方便地把设计区域划分为所需的区域，可视化操作方便地产生表单或展示页面的HTML元素序列，所见即所得的效果降低了对业务人员的要求。业务人员的操作减少了信息化系统的开发维护环节，最大限度地节约了开销费用。

附图说明

图1为本发明界面控件贴设计功能示意图。

具体实施方式

HTML界面控件贴设计工具，是B/S模式的一种自动化业务设计管理系统的一个页面设计工具。如图1所示，工具组件包括但不限于定位架设计区、设计参数配置区、业务要素加载区、界面控件选择区、设计生成程序。产出的设计方案是定位架设计区内设计的带业务要素的特定的标记的各HTML元素的组合序列的描述，和根据已预设的使用设计HTML描述的增删改查统计功能页面生成代码模板，生成并动态编译为当前HTML平台技术的所需功能的使用场景页面。采用可视化操作实现所见即所得结果，方式包括但不限于参数配置，拖放拉动，放大缩小，选中目标菜单操作。

定位架通过块状区域来划分页面，定位方式包括表格定位、浮动定位和绝对定位，其中，表格定位在定位架设计区内建一个HTML简单表格，并定义一组表格操作函数对该简单表格进行可视化操作，最终得到所需要的表格，表格的各组成部分就表示为块状区域；浮动定位和绝对定位需要在定位架设计区使用画图基本控件，该控件的画布大小是需进行设计的区域，即最终生成的页面显示区域尺寸，通过可视化操作方式产生多个互不交叠的矩形，通过转换算法，把矩形图形在画布的定位信息转化成页面显示区域的表示为块状区域的HTML元素的位置属性，把页面显示区域分隔成多个互不交叠的块状区域，块状区域可无限地再次调用定位架定位方式继续细分，这时使用的画图基本控件的画布就是块状区域大小，绝对定位取相对于画布原点的定位信息，也就是最终页面显示区域左上角的原点位置；定位架设计区域可对表示为块状区域的HTML元素进行诸如背景色、字体大小等外观设定。

浮动定位的转换算法在功能上是画布的矩形组合和页面块状区域组合的互转换，其中，矩形组合转块状区域组合：把整个画布看作一个检测区域，当检测区域只有一个矩形，即可根据HTML浮动规则和检测区域与矩形的图形关系，产生一个块状区域，该块状区域在HTML模型中用一种元素表示，该元素体现了占空间大小为检测区域但可放置区域为矩形大小的块状区域，该元素可以为div或其他偏好的块级元素，当检测区域内有多个矩形，可优先按水平方向解析，即是在垂直方向依照不能分割矩形和必须包含矩形的原则进行极大数分段，形成水平向检测区域，对每一个水平向检测区域进行水平方向的不能分割矩形和必须包含矩形原则的极大数分段，形成水平向水平段检测区域，对每一个水平向水平段检测区域进行检测，如果内只有一个矩形，即可产生块状区域，如果有多个矩形，就把该水平向水平段检测区域生成一个额外块状区域，该额外块状区域可以为div或其他偏好的块级元素，并对该水平向水平段检测区域在垂直方向以不可分割矩形和必须包含矩形原则作极大数分子段，形成水平向水平段垂直子段检测区域，对每一个水平向水平段垂直子段检测区域进行检测，如果内只有一个矩形，就可生成对应块状区域，如果有多个矩形，就继续分水平孙段再检测，这样水平和垂直交替分段并在进行垂直分段时，把该检测区域转成一个额外块状区域的递归检测，最终使每一个检测区域内都只有一个矩形，转换规则上增加考虑与额外块状区域在HTML模型的位置关系，最终转换成所需的块状区域组合，也可在水平向检测区域时先垂直分段再水平分段，也可先按垂直方向解析，即是在水平方向按不可分割矩形和必须包含矩形原则进行极大数分段，形成垂直向检测区域，如果形成多于一个垂直向检测区域，那么每一个垂直向检测区域都要生成一个额外块状区域，对每一个垂直向检测区域进行检测，如果只有一个矩形，即可生成块状区域，如果有多个矩形，那么就进行垂直与水平交替分段并在进行垂直分段时，把该检测区域转成一个额外块状区域的递归检测，逐步分解，最终转换成所需的块状区域组合；块状区域组合转矩形组合是逆运算，供维护修改使用，对块状区域对应的HTML模型的元素的位置属性进行计算，获取可放置区域相对于页面显示区域左上角原点，也就是画布原点的位置信息，根据这些位置信息在画布中生成矩形组合。

绝对定位的转换算法在功能上是画布的矩形组合和块状区域组合在HTML绝对布局方式的互转换，其中，矩形组合转块状区域组合：第一次使用定位架绝对定位是第一层画布，即是全画布，在它上面所产生的矩形按照相对于全画布原点的位置信息转换成页面可显示区域的原点与块状区域的位置属性，该块状区域在HTML中用一种元素表示，该元素体现了占空间大小和可放置区域均为矩形大小的块状区域，该元素可以是div元素或其他偏好的块级元素，在块状区域上递归调用定位架绝对定位所产生的第二层以上的画布，即是局部画布，它所产生的矩形的位置信息相对于局部画布原点，应按照HTML模型规则，或补足相对于全画布原点的位置信息，或在第二层起采用相对位置方式，最终转换成所需的块状区域；块状区域组合转矩形组合是逆运算，对块状区域HTML元素的位置属性进行计算，获取相对于页面左上角原点的位置信息，根据这些位置信息在画布中生成矩形组合。

设计参数配置区作为工具基本操作的操作区域使用，支持操作有加载草稿、保存草稿、提交设计。设计参数配置区作为可视化操作参数配置的操作区域使用，对其他组件提供操作支持。对定位架设计区中各定位方式提供操作支持：固定通用的操作包括但不限于恢复上一步操作、重做下一步操作、定位方式选择、提交设计、保存草稿，对于提交设计操作，嵌套调用定位架打开的新设计工具产生的设计HTML对象经过调整后加入上一层定位架的相关块状区域中；根据选择的定位方式不同，显示不同的定位方式内容，对于表格定位，有表格的各基本特征参数设定表单和创建表格按钮，各基本特征参数包括但不限于表格宽度、行列数、是否使用标题、是否使用表头、是否使用表脚，调整这些参数可反映到定位架设计区的表格上，对于浮动定位，有浮动方式选择浮向左或右，对于绝对定位，有当前定位架用绝对计算或相对计算选择。对设计生成程序，有生成场景页面的数据处理种类的选择，及页面基本信息设定，包括但不限于页面名、标题，数据处理种类包括增删改查统计，还可选择是否在页面中根据处理种类额外生成一个提交按钮。

业务要素控件在功能上是把业务要素与定位架产生的块状区域相关联，关联的业务要素信息至少应包括业务要素名称和业务要素数据两种，业务要素与所在的业务表或多表联合的业务模块的字段对应，业务要素名称与字段中文名称对应，业务要素数据与字段标识（字段名）对应，体现数据内容，通过加载业务表或业务模块的字段信息获取所有的业务要素，有一组表单对各业务要素数据在该设计方案下所需功能使用场景页面的界面属性选择，体现该业务要素数据在所需功能页面的外观，诸如一个查功能页面该业务要素是否用一个范围获取值或是获取一个模糊值等等，可视化操作拖动当前设计所需业务要素信息到定位架的块状区域形成特定的标记。

界面控件选择区在功能上是把系统所能支持的界面控件罗列出来，让用户进行选择，由于在自动化业务设计管理系统中，用户定义业务表或业务模块时，对该业务的各业务要素在增删改查统计方面都作了界面属性设定，这些设定都落实在使用它们的界面控件中，因此，当复用界面控件时，可以使用这些界面属性信息，也可根据原有界面属性集合，对本设计方案作新的设定。根据加载业务表或业务模块确定使用该界面控件的业务，并有一组表单让用户选择当前需求下该界面控件各组成部分的显示或隐藏，也有一组表单让用户选择该业务的各业务要素在当前设计下该界面控件中显示或隐藏，通过可视化操作拖动到定位架的块状区域，形成特定的标记。

对于已关联业务要素的定位架设计区，可以被看作是一个适用于当前需求的界面控件。对于块状区域，可以关联一些基本控件，如图片基本控件或文本基本控件等，它们产生的html描述被直接使用，无需做任何数据处理操作。

设计生成程序功能上把各设计组件的设计信息保存到数据库或者文件，供修改维护使用，并产生设计方案。根据产生时使用带特定标记的html描述展开的时机的不同，有两种实现方式：一种是在生成所需功能页面前端代码时展开特定标记，该页面前端代码具有完整html代码，不含标记，一种是生成简单前端的页面，该页面加载时获取带标记的html描述并展开并添加在页面中。展开特定标记是获取对应的html描述，把其中特定的标记在该使用场景下进行外观界面解析，用相应的界面控件的正常调用方式取代标记或根据所需场景用正确基本控件取代标记，最终使得业务要素信息得以按已设定的界面属性进行展示。若所需场景是增删改统计使用场景且使用了业务要素控件进行业务要素信息标记，那么根据设计参数配置区用户根据所需场景选择是否生成多一个提交按钮，若是，按钮点击事件数据接口与这个提交按钮关联，在该数据接口中调用配属的数据处理功能完成增删改统计，所有场景页面都注册有页面加载事件数据接口，加载场景时对其中的界面控件进行入口函数调用，对删改查场景页面中该数据接口调用配属的查数据功能获取对应数据进行展示。对于页面的后端代码，由于数据处理功能已配属，所以只需包含但不限于加载时的登录状态检测及权限检测即可。

举例说明：

某个Asp.net平台实施的自动化业务设计管理系统是一个有配属数据处理功能的信息化管理系统，HTML界面控件贴是它的一个页面设计工具。在本实施例中，对业务表或业务模块已有的配属数据处理功能，实体是业务表或模块的实体类在增删改查统计的功能函数，已被动态编译，根据固定的调用地址传递不同的实体类标识(业务标识)和数据记录标识及处理种类，确定调用那个业务或该业务中那条记录或进行那种处理。本例的HTML界面控件贴设计工具是一个分成3列页面，第一列的上部分是设计参数配置区域，下部分是界面控件选择区域，第二列是设计主体定位架设计区域，第三列是业务要素控件。

设计参数配置区域，基本操作有提交设计按钮、保存草稿按钮、导入草稿按钮。保存草稿把所有区域的信息都收集起来作为一个数组对象提交到后台进行文本加密后传回前端下载保存，供下次修改维护使用。导入草稿按钮是逆运算，把加密的文件提交到后台进行文本解密后传递到前端，对前端各区域各设计参数进行赋值，恢复现场继续设计。提交设计拥有保存草稿的功能，并且把定位架设计区的html描述保存在数据库的界面控件贴设计稿表中，本例的提交设计采用使用时加载html描述才展开，因此，在生成的页面前端代码中导入使用的界面控件的js文件及相关的css文件，注册页面onload事件，事件中调用获取界面控件贴设计稿表对应的设计稿，进行展开。HTML界面控件特定标记采用自定义HTML标签的方式与界面控件一一配对，所以获取的html描述可直接插入页body中，对所有的自定义标签进行匹配，用界面控件的正常调用的HTML描述取代界面控件特定标记，取代后分别对每一个使用的界面控件调用其入口函数，界面控件选择区域中设定的业务标识及业务要素显示和界面控件组件显示信息作为参数传入，界面控件内部根据这些参数进行显示控制。业务要素数据信息使用特定标记（标记包括对应的字段名），展开时，对于删查统计场景中的数据展示，用字段名为id的label元素取代，并赋值数据内容，对于增改场景，若没有指定的使用其他基本控件的界面属性，那么默认使用单行输入input元素作为基本控件取代。展开算法实现函数放在js文件中在页头部加载。有输入生成页面的名称的表单。根据名称，生成页面的后端代码，是系统页面通用的登陆超时和权限检查代码。对生成的前端代码，输出指定名称的aspx文件在自定义的mydesign目录，后端代码动态编译后生成dll文件放置在bin目录。

设计参数配置区域有对当前的定位架定位方式的单选下拉框，选定后出现具体定位方式下的参数配置表单。对于表格定位方式，有创建表格按钮（创建后或加载草稿已有表格情况下隐藏）、表格宽度设置（数值）输入框、表格宽度单位设置（本例支持px和%）输入框、行数输入框、列数输入框、是否使用标题多选框、是否使用表头多选框、是否使用表脚多选框。点击创建表格按钮出现一个对话框，对话框表单也有这些表格参数的值设定，作为创建表格的初始值提交在定位架设计区生成基本表格，本例的表格采用fixed布局和页面居中显示，数值赋值给设计参数配置区的对应的表格参数表单元素。设计参数配置区的对应的表格参数表单元素各自绑定onchange事件，对定位架的表格操作：行（列）数调整从最后一行（列）开始增删；是否使用标题多选框调整标题的显示或隐藏；是否使用表头多选框调整表头的显示或隐藏；是否使用表脚多选框调整表脚的显示或隐藏；表格宽度及宽度单位调整表格的宽度属性。对于浮动定位，有选择浮向左或右的单选下拉框，该控件绑定onchange事件对定位架内所有的作为块状区域使用的div的浮动方式进行变更，也有页面居中显示区域的宽度设置输入框和宽度单位设置。对于绝对定位，有选择当前定位架用的方式是绝对还是相对定位的单选下拉框。

设计参数配置区域有回退操作按钮和重复操作按钮。定位架设计区域有个固定大小（本例为10）的队列，每个操作得到的html描述都会被入队列，当需要回退时，取出上一个html描述覆盖当前设计区达到恢复原状的效果，当需要重复时，取出下一个html描述覆盖当前设计区达到重做的效果。

定位架设计区域是设计主体，采用可视化操作的方式进行设计。

对于表格定位，表格的标题区域和表头表体表脚单元格注册鼠标右键菜单功能。标题的右键菜单项有自由调整高度、嵌套设计、清空标题、界面控件。自由调整高度是把标题区所在的块状区域转换页面遮罩层中用拉斐尔插件以遮罩层为画布的该块状区域位置大小的矩形图形，转换关系利用标题相对于页面左上角的left和top属性计算以遮罩层大小为画布的矩形位置关系，画布与矩形的产生使用拉斐尔画图js工具，在矩形的下底边中间有一个调整小矩形，上下拖动矩形的高的drag事件中调整标题的height属性，确定用键盘的Enter键销毁画布和遮罩层，并把结果入操作队列，取消用键盘的Esc键通过获取操作队列的回退操作恢复原来的高，达到随意操控表格标题区域的效果。嵌套设计是在新页面打开新的HTML界面控件贴，在页面地址get方式传递新的定位架设计区域的width和height数值，局限为标题区域大小，新html界面控件贴的所有设计宽度的设定均隐藏不可设置，且提交代码按钮的功能是向父页面opener的指定块状区域（实现上可以在选择嵌套设计菜单时保存事件源元素）插入新页面产生的html元素组合，与原界面控件贴功能不一致的功能通过判断是否具有width和height的get方式参数进行分支，分别实现。清空标题就是把标题区域的html元素组合全部删除。界面控件是对标题区内部的界面控件进行设置，预置了各支持的界面控件的各组件显示和隐藏操作项。单元格的右键菜单项有行单元格合并、列单元格合并、上添加行、下添加行、左添加单元格、右添加单元格、删除选中行、删除选中单元格、清空单元格内容、自由变换行距、自由变换列宽、背景色设置、文本颜色设置、对齐方式设置、嵌套设计、界面控件。表格的单元格支持鼠标左键点击拖动选中，选中的状态通过一个特定的背景色#3BB5FF表示，，再次点击清除上次选中的单元格（背景色恢复#FFF）进入新一轮拖动选中，而且每次只能选中表头表体表脚中的一种单元格。菜单项操作函数若涉及设计参数配置区域中表格的参数，需要根据操作结果更新参数值。行单元格合并，按行对单元格进行检测，若行中有单元格选中，那么第一个选中单元格的rowspan和colspan数值为基数（属性未定义设为1），该行的其他选中单元格必须与第一个选中单元格连续，否则报不连续错误无法合并，该行的其他选中单元格的rowspan属性必须与第一个选中的单元格的rowspan相同，否则报rowspan基数不一致错误无法合并，对该行的其他选中单元格的colspan数值汇总，加上colspan基数就是合并后的单元格colspan数值，把该行的其他选中单元格删除。上添加行，在选中的单元格的第一个所在行前根据设计参数配置区域表格的列数添加一行。下添加行，在选中的单元格的最后一行后根据设计参数配置区域表格的列数添加一行。左添加单元格，在选中的单元格的左边添加单元格。右添加单元格，在选中的单元格的右边添加单元格。删除选中行，检查选中单元格的个数，若选中单元格个数大于1个，报不支持错误，只支持1个单元格选中，获取其rowspan值和colspan值，获取选中单元格的所在位置因colspan原因的真正排列列数，若选中单元格的rowspan值大于0，那么需要对以下因rowspan涉及的行进行补偿，首先根据colspan值确定对删除该选中单元格以下行要补偿的列数，找到相等于所选单元格真正排列列数的单元格，在之前插入补偿的列，补偿完所有的行，删除选中单元格所在的行，若选中单元格的rowspan值未设置，直接删除选中单元格所在的行。删除选中单元格，对每一行进行检测，统计该行选中的单元格数，如果小于该行的总单元格数，直接删除选中的单元格，不需考虑rowspan和colspan，如果等于该行的总单元格数，报不能删除整行的错误。清空单元格内容，删除单元格内的所有元素。自由变换行距，获取选中单元格所在行相对与页面左上角的top和left属性，建立一个遮罩层，覆盖全页面，使用拉斐尔画图插件，把遮罩层建立画布，在所在行的位置建立一个和所在行一样位置大小的矩形，并在下底边中心建立一个调整矩形，注册拖动事件，把矩形的位置信息转换为行矩形的高度变化，注册按键事件，回车键删除画布及遮罩层，esc键调用操作队列回退操作，回复原行高度，删除遮罩层。自由变换列宽，只支持表头单元格，建立一个遮罩层，覆盖全页面，使用拉斐尔画图插件，把全页面建立画布，在所在表头单元格的位置建立一个和所在表头单元格一样大小的矩形，并在左右边中心各建立一个调整矩形，注册拖动事件，把矩形的位置信息转换为表头单元格的宽度变化，注册按键事件，回车键删除画布及遮罩层，esc键调用操作队列回退操作，回复原单元格宽度，删除遮罩层。背景色设置、文本颜色设置、对齐方式设置对单元格等进行css操作。嵌套设计，对选中的单元格块状区域进行嵌套设计，获取选中块状区域的宽高，作为参数打开新HTML界面控件贴设计工具页面。界面控件是对单元格内部的界面控件进行设置，预置了各支持的界面控件的各组件显示和隐藏操作项。

对于浮动定位和绝对定位，需要用到画图基本控件，画图基本控件使用拉斐尔插件，浮动定位的画布大小是页面居中显示区域大小在定位架设计区的居中同大小的区域，绝对定位的画布大小是定位架设计区大小的区域，画图基本控件使用鼠标左键拖动方式产生矩形，单击可选中矩形，选中后可拖动放置在画布任何地方，但不可与其他矩形交叠，判断不交叠的算法是本矩形的四个顶点都不在其他矩形中及其他矩形的四个顶点都不在本矩形内。对于嵌套设计的画图基本控件的画布是相应的宽高参数的区域。

对于浮动定位和绝对定位，产生的块状区域div的右键菜单项有背景色设置、文本颜色设置、对齐方式设置、作为图片容器、作为文本容器、嵌套设计、界面控件。背景色设置、文本颜色设置、对齐方式设置、嵌套设计、界面控件同表格定位方式。作为图片容器，调用上传图片控件，产生img元素，它的source就是上传图片后图片的地址。作为文本容器，弹出一个对话框层，内有输入表单，获取文字信息，对话框的确定按钮点击产生一个label元素，它的text就是设置的文本。

对块状区域div、表格标题、各单元格注册拖放事件，对拖动类型是label元素的，添加一个自定义属性xrjfactor，属性值为name，产生label元素的html描述，对拖动类型为input元素的，添加一个自定义属性xrjfactor，属性值为data，产生input元素的html描述的特定标记，对拖动类型为li元素的，添加一个自定义属性interface，属性值为界面控件名，另一个自定义属性xrjcrudid，属性值为业务表或模块的标识id，产生一个同li元素属性的自定义属性xx的html描述的特定标记。

业务要素控件区域，有一个加载业务表或模块的加载按钮，点击后弹出对话框，对话框有一个选择业务表和模块的选择列表，确定后提交，后台根据所选的业务表或模块的id，获取相应的业务要素信息，本例只获取必要的业务要素中文名称和业务要素数据信息（业务要素对应表字段的名称，英文），业务表或模块的标识id用一个隐藏input装载，业务表或模块的名称用一个文本控件展示，业务要素中文名称和业务要素数据信息用一个列表ul展示，每一项li用包括label元素的中文名文本和id为字段英文名的input元素。两种元素均注册拖动事件，支持拖动。注册input元素点击事件，可以弹出一对话框，对该业务要素在本设计中的界面属性进行设置。

业务要素控件在增场景需求中，在业务要素控件的业务要素在本设计中的界面属性备选项有属于验证属性的是否必填、是否是邮件、是否为网络地址、是否为数值、是否为整数、内容与指定控件同（有1个附属参数，收录指定控件的id）、扩展名限定（有1个附属参数，收录用|分割的扩展名）、最大长度（有1个附属参数，收录字符串最大长度）、最小长度（有1个附属参数，收录字符串最小长度）、长度范围（有2个附属参数，收录字符串最小和最大长度）、数值范围（有2个附属参数，收录数字最小和最大值）、最大数值（有1个附属参数，收录数字最大值）、最小数值（有1个附属参数，收录数字最小值），验证工具使用jquery的validate控件，因此在把业务要素取代特定标记时在输入基本控件中有相关的属性：是否必填（required）、是否是邮件（email=”true”）、是否为网络地址（url=”true”）、 是否为数值（number=”true”）、是否为整数（digits=”true”）、内容与指定控件同（equalTo=” 收录指定控件的id”）、扩展名限定（extension=”收录用|分割的扩展名”）、最大长度（maxlength=”字符串最大长度”）、 最小长度（minlength=”字符串最小长度”）、长度范围（rangelength=”[字符串最小长度, 字符串最大长度]”）、数值范围（range=”[数字最小值, 数字最大值]”）、最大数值（max=”数字最大值”）、最小数值（min=”收录数字最小值”）。备选项有属于数据属性的图片上传（本字段存放图片的地址，多图片用分号分割）、附件上传（本字段存放附件的地址，多附件用分号分割）、视频上传（本字段存放视频的地址，多视频用分号分割）、Textarea编写（用textarea元素取代默认的单行input元素）、日期（采用日期控件进行赋值）、日期时间（采用日期时间控件进行赋值），用户根据需求选择界面属性，对有附属参数的，根据实际情况录入，完成表单后，提交保存在界面控件贴业务要素界面属性关系表中；删场景本例没有界面属性关联，对于删场景中的业务要素信息的展示数据与界面属性获取接口同查场景功能一样，但业务数据标识本例设定从地址的get方式获取参数id，另外可选地提供多一个删除提交按钮，用于调用该业务的指定数据记录标识的删除处理；改场景的界面属性使用增场景的界面属性；查场景在本例中没有界面属性关联，通过从地址的get方式获取参数id作为业务数据记录标识，调用数据获取接口得到数据，对各业务要素的数据容器label元素赋值，进行展示；统计场景在本例的实现中需要使用grid界面控件的查询组件，界面控件的备选项有数据属性的最大值、最小值、求和、计数，在制作统计场景界面时，使用grid界面控件，可选屏蔽表格组件、按钮区、分页区，所需的业务要素的数据容器使用label元素，可选使用统计提交按钮，该按钮提交grid界面控件的查询组件form中的表单内容，经过统计处理返回的统计数值赋值给对应的label元素。

界面控件选择区，是一个列表，li列表项是界面控件的名字文本，li元素注册拖动事件，支持拖动。界面控件有grid界面控件（名：grid）、新增界面控件（名：add）。Grid界面控件组成部件有查询条件区（search）、按钮区（button）、表格数据展示区（show）、分页区（page），在各块状区域的右键菜单的界面控件菜单中有这4个部件的隐藏及显示操作项，隐藏操作为xx自定义元素增加一个自定义属性hiddenzone，属性值为各区的名字，多选用,分隔，显示操作为xx自定义元素删除自定义属性hiddenzone的对应属性值。li元素注册点击事件，事件中根据业务要素控件加载的业务id获取所有业务要素，在一个弹出对话框中对各业务要素进行显示或隐藏决定，结果保存在界面控件和设计方案及业务要素配对表中。本例使用界面控件的已设界面属性。

设计生成程序功能在本例中采用生成简单前端的页面，该页面加载时获取带标记的html描述并展开并添加在页body中。展开特定标记是获取保存在数据库中的html描述，插入到页面body，对于xx自定义元素的界面控件，获取其自定义属性，得到业务id、所用那个界面控件、那个属性需要隐藏，这些是调用界面控件的所需参数，把xx元素删除，把正常使用界面控件的html描述添加到该块状区域中。对于grid界面控件就是<div id=’crud业务id值’></div>，注册页面的onload事件，在该事件处理代码上添加$(‘# crud业务id值’).grid(业务id值，是否隐藏查询区，是否隐藏按钮区，是否隐藏数据展示区，是否隐藏分页区)，那么在加载完页面就会调用界面控件的入口函数了。对于删改查场景，onload事件中要获取页面的get方式参数id，该参数若存在，是对应业务的记录id，异步调用数据处理功能地址，调用功能种类（查）和业务id作为get方式参数传入，记录id以post方式传递，获取该记录的数据，在页面中显示。根据设计参数配置区用户根据所需场景选择是否生成多一个提交按钮，如果是，那么本例对于增删改的展开的html还要外套一个form表单，在onload处理事件中代码添加jquery.valid插件的使用代码（使用form表单id），统计场景使用了grid的查询条件区form。还有注册提交按钮的点击事件代码，事件代码用jquery异步ajax调用所需的场景功能地址，调用功能种类和业务id作为get方式参数传入，对于删改功能，记录id值作为post方式传入，对于统计功能，统计条件作为post参数传入。后端的cs文件中，代码是通用的检查登陆超时，权限检查代码。后端代码动态编译成dll文件，放在bin目录。前端代码放在约定的位置。

按照所用的自动化业务设计管理系统实现的菜单权限方式配置新设计的页面给用户，该用户在菜单中点击，就可以按设计流程加载页面，使用设定的增删改查统计功能。

以上所述，仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。

Claims (8)

1.HTML界面控件贴，采用可视化操作，有预定功能代码模板，其特征在于， HTML界面控件贴针对HTML平台下的界面控件贴，界面控件是已由系统开发人员完成的控件，属于客户端程序，拥有可以调用已有的数据处理功能的数据接口和获取已设置的界面属性的数据接口，显示内部设定的界面；对已有的界面控件及业务要素控件进行复用，可根据具体的业务模块需求进行界面控件内部组成进行屏蔽显示调整，也可根据具体界面需求，挑选所在系统中已有的业务模块的业务要素，使用该业务要素的相关业务要素控件，业务要素控件在功能上是把业务要素与定位架产生的块状区域相关联，关联的业务要素信息至少应包括业务要素名称和业务要素数据两种，业务要素与所在的业务表或多表联合的业务模块的字段对应；组件包括定位架设计区、设计参数配置区、业务要素加载区、界面控件选择区、设计生成程序；定位架设计区产生HTML页面含定位信息的块状区域组合，块状区域可重复调用定位架进行细化；产生带业务要素的特定的标记的各HTML元素的组合序列的描述；由组合序列描述和代码模板合成生成最终的设计方案是系统所在的运行环境支持的可被业务人员使用的HTML页面。

2.如权利要求1所述的HTML界面控件贴，其特征在于，定位方式包括表格定位、浮动定位和绝对定位，表格定位在定位架设计区内建一个HTML简单表格，该表格的各组成部分对应的HTML元素是块状区域，表格组成部分是包含表体的表标题、表头、表脚的任意组合；浮动定位和绝对定位需要在定位架设计区使用HTML画图基本控件，产生的画布是HTML元素，画布大小是需进行设计的区域范围，即最终生成的页面显示区域尺寸，HTML画图基本控件通过可视化操作方式产生多个互不交叠的矩形，通过转换算法，把矩形图形在画布的定位信息转化成页面显示区域的表示为块状区域的HTML元素的位置属性，把页面显示区域分隔成多个互不交叠的块状区域，块状区域可再次调用定位架定位方式继续细分，这时使用的画图基本控件的画布大小就是块状区域大小，绝对定位取相对于画布原点的定位信息，也就是最终页面显示区域左上角的原点位置。

3.如权利要求1所述的HTML界面控件贴，其特征在于，浮动定位的转换算法在功能上是画布的矩形组合和页面块状区域组合的互转换，其中，矩形组合转块状区域组合：把整个画布看作一个检测区域，当检测区域只有一个矩形，即可根据HTML浮动规则和检测区域与矩形的图形关系，产生一个块状区域，该块状区域在HTML模型中用一种元素表示，该元素体现了占空间大小为检测区域但可放置区域为矩形大小的块状区域，当检测区域内有多个矩形，可优先按水平方向解析，即是在垂直方向依照不能分割矩形和必须包含矩形的原则进行极大数分段，形成水平向检测区域，对每一个水平向检测区域进行水平方向的不能分割矩形和必须包含矩形原则的极大数分段，形成水平向水平段检测区域，对每一个水平向水平段检测区域进行检测，如果内只有一个矩形，即可产生块状区域，如果有多个矩形，就把该水平向水平段检测区域生成一个额外块状区域，并对该水平向水平段检测区域在垂直方向以不可分割矩形和必须包含矩形原则作极大数分子段，形成水平向水平段垂直子段检测区域，对每一个水平向水平段垂直子段检测区域进行检测，如果内只有一个矩形，就可生成对应块状区域，如果有多个矩形，就继续分水平孙段再检测，这样水平和垂直交替分段并在进行垂直分段时，把该检测区域转成一个额外块状区域的递归检测，最终使每一个检测区域内都只有一个矩形，转换规则上增加考虑与额外块状区域在HTML模型的位置关系，最终转换成所需的块状区域组合，也可在水平向检测区域中先垂直分段再水平分段，也可先按垂直方向解析，即是在水平方向按不可分割矩形和必须包含矩形原则进行极大数分段，形成垂直向检测区域，如果形成多于一个垂直向检测区域，那么每一个垂直向检测区域都要生成一个额外块状区域，对每一个垂直向检测区域进行检测，如果只有一个矩形，即可生成块状区域，如果有多个矩形，那么就进行垂直与水平交替分段并在进行垂直分段时，把该检测区域转成一个额外块状区域的递归检测，逐步分解，最终转换成所需的块状区域组合；块状区域组合转矩形组合是逆运算，供维护修改使用，对块状区域对应的HTML模型的元素的位置属性进行计算，获取可放置区域相对于页面显示区域左上角原点，也就是画布原点的位置信息，根据这些位置信息在画布中生成矩形组合。

4.如权利要求1所述的HTML界面控件贴，如权利要求1所述的HTML界面控件贴，其特征在于，绝对定位的转换算法在功能上是画布的矩形组合和块状区域组合在HTML绝对布局方式的互转换，其中，矩形组合转块状区域组合：第一次使用定位架绝对定位是第一层画布，即是全画布，在它上面所产生的矩形按照相对于全画布原点的位置信息转换成页面可显示区域的原点与块状区域的位置属性，该块状区域在HTML中用一种元素表示，该元素体现了占空间大小和可放置区域均为矩形大小的块状区域，在块状区域上递归调用定位架绝对定位所产生的第二层以上的画布，即是局部画布，它所产生的矩形的位置信息相对于局部画布原点，应按照HTML模型规则，或补足相对于全画布原点的位置信息，或在第二层起采用相对位置方式，最终转换成所需的块状区域；块状区域组合转矩形组合是逆运算，对块状区域HTML元素的位置属性进行计算，获取相对于页面左上角原点的位置信息，根据这些位置信息在画布中生成矩形组合。

5.如权利要求1所述的HTML界面控件贴，其特征在于，设计参数配置区配置参数，提供基本操作来支持其他组件。

6.如权利要求1所述的HTML界面控件贴，其特征在于，业务要素加载区中选择加载已有业务模块，使其业务要素控件呈现在区内；可直接使用原业务要素控件，也可通过一组表单对业务要素对应的界面属性进行新设定，设定信息区别保存在约定的其他数据表内，根据新设定的界面属性，业务要素控件得以新基本控件形态参与在当前页面需求中；经可视化操作进入块状区域后产生特定的标记；多个界面属性对应一个业务要素。

7.如权利要求1所述的HTML界面控件贴，其特征在于，界面控件选择区罗列所有界面控件进行选择，通过加载业务模块确定与选用的界面控件相关联，并有一组表单让用户选择当前需求下该界面控件各组成部分的显示或屏蔽；可直接使用原界面控件，也可通过一组表单对与界面控件关联的业务模块的业务要素对应的界面属性进行新设定，设定信息区别保存在约定的其他数据表内，根据新设定的界面属性，界面控件得以以新基本控件形态参与在当前页面需求中；界面控件经可视化操作进入块状区域后产生特定的标记；多个界面属性对应一个业务要素。

8.如权利要求1所述的HTML界面控件贴，其特征在于，把各设计组件的设计信息保存到数据库或者文件，供修改维护使用；产生设计方案HTML页面；产生时根据使用带特定标记的html描述展开的时机的不同，有两种方式：一种是在生成所需功能页面前端代码时展开特定标记，该页面前端代码具有不含特定标记的完整html代码；一种是生成简单前端的页面，在加载时获取带特定标记的html描述添加在页面主体中，加载页面时展开特定标记；展开特定标记是把html描述中特定的标记在使用场景下进行外观界面解析，用相应的界面控件的正常调用方式取代标记或根据所需场景用正确业务要素控件取代特定标记，最终使得业务要素控件得以按已设定的界面属性进行展示；页面注册有页面加载事件接口，加载事件接口对其中的界面控件进行入口函数调用，对其中的业务要素控件在删改查场景中调用配属的数据查功能获取需要删改查的数据先行展示；对按需可选确定产生的场景提交按钮，按场景功能注册点击事件。

Images