[发明专利]一种基于HTML5的在线表单设计系统

说明书

本发明公开了一种基于HTML5的在线表单设计系统，包括：利用HTML5画布技术生成控件的控件生成模块和布局模块，布局模块包括利用停放列表布局方式设置多个外层控件的外层控件布局子模块和在多个外层控件内利用表格布局方式设置表格布局子控件的表格布局子模块。本发明充分利用HTML5在多浏览器上的兼容性来生成控件，一套设计，可运行在Android、iOS两个安装有兼容HTML5的浏览器的移动终端上。此外，针对移动端的特点，采用停放列表与表格布局相结合的方式，能满足移动终端屏幕自动适应的需求，便于快速且灵活的进行移动端的表单设计与控件布局。

技术领域

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

背景技术

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

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

发明内容

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

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

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

布局模块，连接于所述控件生成模块，包括：

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

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

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

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

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

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

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

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