CN105487858B - 一种基于html5的在线表单设计系统 - Google Patents

Abstract

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

Description

一种基于HTML5的在线表单设计系统

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

优选地，所述表格布局子模块还包括：

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

优选地，所述表格布局子模块还包括：

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

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

附图说明

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

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

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

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

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

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

具体实施方式

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

图1为本发明第一实施例提供的一种基于HTML5的在线表单设计系统的结构框图。如图1所示，基于HTML5的在线表单设计系统包括控件生成模块10和连接于控件生成模块10的布局模块20，其中，控件生成模块10用于利用HTML5画布技术生成控件。进一步地，布局模块20包括外层控件布局子模块210和连接于外层控件布局子模块210的表格布局子模块220，其中，外层控件布局子模块210用于利用停放列表布局方式设置多个外层控件，表格布局子模块220用于在多个外层控件内利用表格布局方式设置表格布局子控件。具体地，外层控件布局子模块210用于在最外层的设计容器中利用停放列表布局方式来布局多个外层控件，当需要将表格布局子控件放入外层控件中时，利用表格布局子模块220在多个外层控件内利用表格布局的方式来设置表格布局子控件。进一步地，可在表格布局子控件内放入其他控件，也可在其某一单元格内再嵌入表格布局子控件。

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

图2为本发明一实施例提供的一种基于HTML5的在线表单设计系统的外层控件布局子模块的结构框图。如图2所示，外层控件布局子模块210包括依次连接的判断单元211、停放布局单元212以及列表布局单元213。具体地，判断单元211遍历多个外层控件，判断多个外层控件是否具有停放属性，当外层控件具有停放属性时，利用停放布局单元212来设置外层控件的位置和尺寸，当遍历完所有多个外层控件后，利用列表布局单元213来设置不具有停放属性的外层控件的位置和尺寸。其中，位置包括外层控件的x坐标和y坐标，尺寸包括外层控件的控件宽度和控件高度。

在本发明一实施例中，停放布局单元212采用停放方式来设置外层控件的位置和尺寸。具体地，通过某些拖入设计容器的子控件设置停放属性，可设置按方位上、左、下、右、中停放。例如，如果停放属性为左停放，则此控件宽度不变，纵向充满设计容器，靠容器左边开始位置停放，如果左边已有向左停放控件，则从该控件右边开始停放。

在本发明一实施例中，列表布局单元213采用列表方式来设置外层控件的位置和尺寸，其默认纵向从上往下依次排列，横向则充满设计容器。

进一步地，外层控件布局子模块210还包括第一初始化单元214和第一更新单元215。第一初始化单元214用于初始化第一坐标集，第一更新单元215用于在在停放布局后更新第一坐标集，其中，第一坐标集包括上坐标top、下坐标bottom、左坐标left和右坐标right。优选地，第一初始化单元214将第一坐标集初始化为{top＝0；bottom＝设计容器的容器高度；left＝0；right＝设计容器的容器宽度}。

进一步地，停放属性包括左停放、右停放、上停放、下停放和中停放。停放布局单元212和更新单元215对停放属性的设置如下：

当停放属性为左停放时，x＝left，y＝top，控件宽度＝原始控件宽度，控件高度＝bottom-top，left＝left+原始控件宽度+控件间距；

当停放属性为右停放时，x＝right-原始控件宽度，y＝top，控件宽度＝原始控件宽度，控件高度＝bottom-top，right＝right-(原始控件宽度+控件间距)；

当停放属性为上停放时，x＝left，y＝top，控件宽度＝right-left，控件高度＝原始控件高度，top＝top+原始控件高度+控件间距；

当停放属性为下停放时，x＝left，y＝bottom-原始控件高度，控件宽度＝right-left，控件高度＝原始控件高度，bottom＝bottom-(控件高度+控件间距)；以及

当停放属性为中停放时，x＝left，y＝top，控件宽度＝right-left，控件高度＝bottom-top。

进一步地，外层控件布局子模块还包括第二初始化单元216和第二更新单元217，其中，第二初始化单元216用于在停放布局单元212设置完所有具有停放属性的外层控件后，初始化第二坐标集，第二坐标集包括横坐标x₁、纵坐标y₁和横向宽度w，其中，横坐标x₁初始化为第一坐标集中的左坐标(即x₁＝left)，纵坐标y₁初始化为第一坐标集中的上坐标(即y₁＝top)，横向宽度w初始化为第一坐标集中的右坐标与左坐标的差值(即w＝right-left)，列表布局单元213将不具有停放属性的外层控件的x坐标设置为横坐标，y坐标设置为纵坐标，控件宽度设置为横向宽度，控件高度设置为原始控件高度；第二更新单元217用于在列表布局单元213设置完成后，将纵坐标更新为纵坐标与原始控件高度以及控件间距之和(即y₁＝y₁+原始控件高度+控件间距)。

本发明提供的线表单设计系统采用将停放方式与列表布局方式相结合的方式，可以满足移动终端从上到下进行表单设计的特点。

具体地，外层控件布局子模块210按照如图4所示的流程来执行停放列表过程：

步骤S41：由第一初始化单元214初始化第一坐标集。

步骤S42：由判断单元211判断外层控件是否具有停放属性，如果有，则流程前进到步骤S43，反之，流程前进到步骤S44。

步骤S43：由停放布局单元212根据外层控件的停放属性来设置外层控件的位置和尺寸，由第一更新单元215更新第一坐标集。

步骤S44：由判断单元211判断是否具有下一外层控件，如果有，则流程前进到步骤S42，反之，流程前进到步骤S45。

步骤S45：由第二初始化单元216初始化第二坐标集。

步骤S46：由判断单元211判断外层控件是否具有停放属性，如果有，则流程前进到步骤S48，反之，流程前进到步骤S47。

步骤S47：由列表布局单元213设置不具有停放属性的外层控件的位置和尺寸，由第二更新单元217更新第二坐标集。

步骤S48：由判断单元211判断是否具有下一外层控件，如果有，则流程前进到步骤S46，反之，结束。

图3为本发明一实施例提供的一种基于HTML5的在线表单设计系统的表格布局子模块的结构框图。其中，利用表格布局方式在外层控件内设置表格布局子控件时，外层控件具有多个单元格，每个单元格内有且只有一个表格布局子控件。如图3所示，表格布局子模块220包设置单元221和布局单元222，其中，设置单元221用于根据外层控件的表格布局属性来设置行高数组和列高数组；布局单元222用于根据行高数组、列高数组和表格布局子控件的布局条件属性来设置表格布局子控件的位置和尺寸。

进一步地，表格布局子模块220还包括校验单元223，用于校验单元格内是否设置有表格布局子控件，如果该单元格已经有控件，则不再重复加入。

进一步地，表格布局属性包括行样式属性、列样式属性、子控件样式属性。当子控件样式属性中存在表格布局子控件时，布局单元222还用于根据子控件样式属性判断表格布局子控件是否存在于子控件样式属性中，并根据合并标志来判断是否需要进行合并。其中：

行样式属性默认为“0，50；0，50”，其中，0表示按比率，50表示百分之50；如果是1，50，则1表示按绝对坐示值，50表示50像数。所以“0，50；0，50”表示该表格2行，各占百分之50；

同样地，列样式属性默认为“0，50；0，50”，表示该表格2列，各占百分之50；

子控件样式属性默认为空，如果子控件样式属性设置如下：

xGridLayout.layoutStyles＝[{“id”:"xButton1","column":1,"row":1,"colSpan":1,"rowSpan":1},

{"id":"xTextField1","column":1,"row":0,"colSpan":1,"rowSpan":1},

{"id":"xNote1","column":0,"row":1,"colSpan":2,"rowSpan":1}]；

则表示第2行2列放置按钮控件，控件ID为xButton1；表示第1行2列放置文本框控件，控件ID为xTextField1；表示第1行1列到第1行第2列放置备注控件，控件ID为xNote1；如上所示，子控件样式属性中行合并标志rowSpan,默认值为1表示该控件只占一行，当值为2表示占2行，表示需要由布局单元222来执行行合并操作；子控件样式属性中列合并标志colSpan，默认值为1，表示该控件只占一列，当值为2表示占2列，表示需要由布局单元222来执行列合并操作。

进一步地，布局条件属性包括间距参数、比率参数、锚定参数、拉伸参数。其中，间距参数表示表格布局子控件与其所在的单元格各边的距离；比率参数表示是否按比率设置间距参数，如果按比率设置则上边的间距参数代表的是百分比，表格布局子控件与各边的距离按百分比计算，否则间距参数代表的是绝对值；锚定参数表示子控件可按上、左上、右、左下、下、右下、右、右上、中九个方位与单元格各边锚定；拉伸参数包括不拉伸、充满、水平拉伸、垂直拉伸。

具体地，表格布局子模块220按照如图5所示的流程来执行表格布局过程：

步骤S51：由校验单元223校验单元格内是否设置有表格布局子控件，如果该单元格已经有控件，则不再重复加入，如果有则流程前进到步骤S52。

步骤S52：由设置单元221利用外层控件的表格布局属性来计算每行高度和每列宽度，分别存入行高数组和列高数组。

步骤S53：由布局单元222根据子控件样式属性判断表格布局子控件是否存在于子控件样式属性中，如果存在，则流程前进到步骤S54，反之，流程前进到步骤S56。

步骤S54：由布局单元222根据子控件样式属性中的合并标志来判断表格布局子控件是否需要进行合并，如果需要，则流程前进到步骤S55，反之，流程前进到步骤S56。

步骤S55：将需要合并的行数与列数进行合并。

步骤S56：由布局单元222根据行高数组、列高数组和表格布局子控件的布局条件属性来设置表格布局子控件的位置和尺寸。

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

以上所揭露的仅为本发明一种较佳实施例而已，当然不能以此来限定本发明之权利范围，本领域普通技术人员可以理解实现上述实施例的全部或部分流程，并依本发明权利要求所作的等同变化，仍属于发明所涵盖的范围。

Claims (6)

1.一种基于HTML5的在线表单设计系统，其特征在于，包括：

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

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

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

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

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

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

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

设置单元，用于根据所述外层控件的表格布局属性来设置行高数组和列高数组，其中，

所述表格布局属性包括行样式属性、列样式属性、子控件样式属性；以及

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

2.根据权利要求1所述的基于HTML5的在线表单设计系统，其特征在于，所述外层控件布局子模块还包括第一初始化单元和第一更新单元，所述第一初始化单元用于初始化第一坐标集，所述第一更新单元用于在停放布局后更新所述第一坐标集，其中，所述第一坐标集包括上坐标、下坐标、左坐标和右坐标，所述上坐标为0，所述下坐标为设计容器的容器高度，所述左坐标为0，所述右坐标为所述设计容器的容器宽度。

3.根据权利要求2所述的基于HTML5的在线表单设计系统，其特征在于，所述位置包括所述外层控件的x坐标和y坐标，所述尺寸包括所述外层控件的控件宽度和控件高度，其中，

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

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

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

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

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

4.根据权利要求3所述的基于HTML5的在线表单设计系统，其特征在于，所述外层控件布局子模块还包括第二初始化单元和第二更新单元，其中，

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

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

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

5.根据权利要求1所述的基于HTML5的在线表单设计系统，其特征在于，所述表格布局子模块还包括：

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

6.根据权利要求1所述的基于HTML5的在线表单设计系统，其特征在于，所述表格布局子模块还包括：

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