一种基于html5的在线表单设计系统的制作方法

【技术领域】

[0001]本发明涉及计算机技术领域，尤其涉及一种基于HTML5的在线表单设计系统。

【背景技术】

[0002]现有很多表单设计工具大多数是客户端/服务端模式，需要在表单设计的计算机上安装表单设计工具，主要布局方式为绝对布局方式，也有部分在线表单设计工具，一般只采用表格布局方式，不方便快速布署。例如，使用微软的表单开发工具，在开发CS客户端/月艮务端程序时，主要布局方式绝对布局和表格布局，也可实现停放与锚定，在开发BS浏览器/服务端程序时，主要布局方式为表格布局方式。也有少数在线HTML表单设计，但布局方式不够灵活，功能比较简单。

[0003]此外，针对不同的移动终端，采用不同的开发语言、不同的开发工具，开发同样业务逻辑的系统，比较繁琐、重复性工作比较多。例如，Android、1S两个平台需要单独开发，业务逻辑不能复用，开发效率低。

【发明内容】

[0004]本发明的目的在于提供一种基于HTML5的在线表单设计系统以改进现有技术的缺陷。

[0005]本发明为了解决上述技术问题，采用的技术方案是:一种基于HTML5的在线表单设计系统，其特征在于，包括:

[0006]控件生成模块，用于利用HTML5画布技术生成控件；

[0007]布局模块，连接于所述控件生成模块，包括:

[0008]外层控件布局子模块，用于利用停放列表布局方式设置多个外层控件；

[0009]表格布局子模块，连接于所述外层控件布局子模块，用于在所述多个外层控件内利用表格布局方式设置表格布局子控件。

[0010]优选地，所述外层控件布局子模块包括判断单元、停放布局单元以及列表布局单元，其中，

[0011 ]所述判断单元用于遍历所述多个外层控件，判断所述多个外层控件是否具有停放属性，当所述外层控件具有所述停放属性时，利用所述停放布局单元来设置所述外层控件的位置和尺寸，当遍历完所有所述多个外层控件后，利用所述列表布局单元来设置不具有所述停放属性的所述外层控件的位置和尺寸。

[0012]优选地，所述外层控件布局子模块还包括第一初始化单元和第一更新单元，所述第一初始化单元用于初始化第一坐标集，所述第一更新单元用于在在停放布局后更新所述第一坐标集，其中，所述第一坐标集包括上坐标、下坐标、左坐标和右坐标，所述上坐标为0，所述下坐标为设计容器的容器高度，所述左坐标为0，所述右坐标为所述设计容器的容器宽度。

[0013]优选地，所述位置包括所述外层控件的X坐标和y坐标，所述尺寸包括所述外层控件的控件宽度和控件高度，其中，

[0014]当所述停放属性为左停放时，所述停放布局单元将所述X坐标设置为所述左坐标，所述y坐标设置为所述上坐标，所述控件宽度设置为所述控件的原始控件宽度，所述控件高度设置为所述下坐标和所述上坐标的差值，在停放布局完成后，所述第一更新单元将所述左坐标值更新为所述左坐标与所述原始控件宽度以及控件间距之和；

[0015]当所述停放属性为右停放时，所述停放布局单元将所述X坐标设置为所述右坐标与所述原始控件宽度之间的差值，所述y坐标设置为所述上坐标，所述控件宽度设置为所述原始控件宽度，所述控件高度设置为所述下坐标和所述上坐标的差值，在停放布局完成后，所述第一更新单元将所述右坐标值更新为所述右坐标与所述原始控件宽度以及所述控件间距之差；

[0016]当所述停放属性为上停放时，所述停放布局单元将所述X坐标设置为所述左坐标，所述y坐标设置为所述上坐标，所述控件宽度设置为所述右坐标与所述左坐标的差值，所述控件高度设置为所述外层控件的原始控件高度，在停放布局完成后，所述第一更新单元将所述上坐标值更新为所述上坐标与所述原始控件高度以及所述控件间距之和；

[0017]当所述停放属性为下停放时，所述停放布局单元将所述X坐标设置为所述左坐标，所述y坐标设置为所述下坐标与所述原始控件高度之间的差值，所述控件宽度设置为所述右坐标与所述左坐标的差值，所述控件高度设置为所述原始控件高度，在停放布局完成后，所述第一更新单元将所述下坐标值更新为所述下坐标与所述原始控件高度以及所述控件间距之差；以及

[0018]当所述停放属性为中停放时，所述停放布局单元将所述X坐标设置为所述左坐标，所述y坐标设置为所述上坐标，所述控件宽度设置为所述右坐标与所述左坐标的差值，所述控件高度设置为所述下坐标与所述上坐标的差值。

[0019]优选地，所述外层控件布局子模块还包括第二初始化单元和第二更新单元，其中，

[0020]所述第二初始化单元用于在所述停放布局单元设置完所有具有所述停放属性的所述外层控件后，初始化第二坐标集，所述第二坐标集包括横坐标、纵坐标和横向宽度，其中，所述横坐标初始化为所述第一坐标集中的所述左坐标，所述纵坐标初始化为所述第一坐标集中的所述上坐标，所述横向宽度初始化为所述第一坐标集中的所述右坐标与所述左坐标的差值；

[0021]所述列表布局单元将所述不具有所述停放属性的所述外层控件的X坐标设置为所述横坐标，y坐标设置为所述纵坐标，控件宽度设置为所述横向宽度，控件高度设置为原始控件高度；

[0022]所述第二更新单元，用于在所述列表布局单元设置完成后，将所述纵坐标更新为所述纵坐标与所述原始控件高度以及控件间距之和。

[0023]优选地，利用所述表格布局方式在所述外层控件内设置所述表格布局子控件时，所述外层控件具有多个单元格，每个单元格内有且只有一个所述表格布局子控件，所述表格布局子模块包括:

[0024]设置单元，用于根据所述外层控件的表格布局属性来设置行高数组和列高数组，其中，所述表格布局属性包括行样式属性、列样式属性、子控件样式属性；以及

[0025]布局单元，用于根据所述行高数组、所述列高数组和所述表格布局子控件的布局条件属性来设置所述表格布局子控件的位置和尺寸，所述布局条件属性包括间距参数、比率参数、销定参数、拉伸参数。

[0026]优选地，所述表格布局子模块还包括:

[0027]校验单元，用于校验所述单元格内是否设置有所述表格布局子控件。

[0028]优选地，所述表格布局子模块还包括:

[0029]当所述子控件样式属性中存在所述表格布局子控件时，所述布局单元还用于根据所述子控件样式属性判断所述表格布局子控件是否存在于所述子控件样式属性中，并根据合并标志来判断是否需要进行合并。

[0030]实施本发明实施例，具有如下有益效果:本发明提供的基于HTML5画布技术的在线设计系统，充分利用HTML5在多浏览器上的兼容性来生成控件，一套设计，可运行在Android、1S两个安装有兼容HTML5的浏览器的移动终端上。此外，针对移动端的特点，采用停放列表与表格布局相结合的方式，能满足移动终端屏幕自动适应的需求，便于快速且灵活的进行移动端的表单设计与控件布局。

【附图说明】

[0031]为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

[0032]图1为本发明第一实施例提供的一种基于HTML5的在线表单设计系统的结构框图；

[0033]图2为本发明一实施例提供的一种基于HTML5的在线表单设计系统的外层控件布局子模块的结构框图。

[0034]图3为本发明一实施例提供的一种基于HTML5的在线表单设计系统的表格布局子模块的结构框图。

[0035]图4所示为本发明一实施例提供的停放列表过程的流程图。

[0036]图5所示为本发明一实施例提供的表格布局过程的流程图。

【具体实施方式】

[0037]下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

[0038]图1为本发明第一实施例提供的一种基于HTML5的在线表单设计系统的结构框图。如图1所示，基于HTML5的在线表单设计系统包括控件生成模块10和连接于控件生成模块10的布局模块20，其中，控件生成模块10用于利用HTML5画布技术生成控件。进一步地，布局模块20包括外层控件布局子模块210和连接于外层控件布局子模块210的表格布局子模块220，其中