，外层控件布局子模块210用于利用停放列表布局方式设置多个外层控件，表格布局子模块220用于在多个外层控件内利用表格布局方式设置表格布局子控件。具体地，外层控件布局子模块210用于在最外层的设计容器中利用停放列表布局方式来布局多个外层控件，当需要将表格布局子控件放入外层控件中时，利用表格布局子模块220在多个外层控件内利用表格布局的方式来设置表格布局子控件。进一步地，可在表格布局子控件内放入其他控件，也可在其某一单元格内再嵌入表格布局子控件。
[0039]本发明提供的基于HTML5画布技术的在线设计系统，充分利用HTML5在多浏览器上的兼容性来生成控件，一套设计，可运行在Android、1S两个安装有兼容HTML5的浏览器的移动终端上。此外，针对移动端的特点，采用停放列表与表格布局相结合的方式，能满足移动终端屏幕自动适应的需求，便于快速且灵活的进行移动端的表单设计与控件布局。
[0040]图2为本发明一实施例提供的一种基于HTML5的在线表单设计系统的外层控件布局子模块的结构框图。如图2所示，外层控件布局子模块210包括依次连接的判断单元211、停放布局单元212以及列表布局单元213。具体地，判断单元211遍历多个外层控件，判断多个外层控件是否具有停放属性，当外层控件具有停放属性时，利用停放布局单元212来设置外层控件的位置和尺寸，当遍历完所有多个外层控件后，利用列表布局单元213来设置不具有停放属性的外层控件的位置和尺寸。其中，位置包括外层控件的X坐标和y坐标，尺寸包括外层控件的控件宽度和控件高度。
[0041]在本发明一实施例中，停放布局单元212采用停放方式来设置外层控件的位置和尺寸。具体地，通过某些拖入设计容器的子控件设置停放属性，可设置按方位上、左、下、右、中停放。例如，如果停放属性为左停放，则此控件宽度不变，纵向充满设计容器，靠容器左边开始位置停放，如果左边已有向左停放控件，则从该控件右边开始停放。
[0042]在本发明一实施例中，列表布局单元213采用列表方式来设置外层控件的位置和尺寸，其默认纵向从上往下依次排列，横向则充满设计容器。
[0043]进一步地，外层控件布局子模块210还包括第一初始化单元214和第一更新单元215。第一初始化单元214用于初始化第一坐标集，第一更新单元215用于在在停放布局后更新第一坐标集，其中，第一坐标集包括上坐标top、下坐标bottom、左坐标left和右坐标right。优选地，第一初始化单元214将第一坐标集初始化为{top = 0;bottom =设计容器的容器高度；left = 0;right =设计容器的容器宽度}。
[0044]进一步地，停放属性包括左停放、右停放、上停放、下停放和中停放。停放布局单元212和更新单元215对停放属性的设置如下:
[0045]当停放属性为左停放时，X= 1 ef t，y = top，控件宽度=原始控件宽度，控件高度=bottom-top，left = left+原始控件宽度+控件间距；
[0046]当停放属性为右停放时，x= right_原始控件宽度，y = top，控件宽度=原始控件宽度，控件高度= bottom-top，right = right-(原始控件宽度+控件间距)；
[0047]当停放属性为上停放时^ = 16代，7 = 1:(^，控件宽度=1^8111:-16；^，控件高度=原始控件高度，top = top+原始控件高度+控件间距；
[0048]当停放属性为下停放时^=16代，7= 1301:1:0111-原始控件高度，控件宽度=1^8111:-left，控件高度=原始控件高度，bottom = bottom_(控件高度+控件间距)；以及
[0049]当停放属性为中停放时^=1#丨，7 =丨叩，控件宽度=481^-16代，控件高度=bottom—topο
[0050]进一步地，外层控件布局子模块还包括第二初始化单元216和第二更新单元217，其中，第二初始化单元216用于在停放布局单元212设置完所有具有停放属性的外层控件后，初始化第二坐标集，第二坐标集包括横坐标幻、纵坐标y i和横向宽度w，其中，横坐标^初始化为第一坐标集中的左坐标(即X1 = left)，纵坐标yi初始化为第一坐标集中的上坐标(SPyi = top)，横向宽度w初始化为第一坐标集中的右坐标与左坐标的差值(S卩w = right-left)，列表布局单元213将不具有停放属性的外层控件的X坐标设置为横坐标，y坐标设置为纵坐标，控件宽度设置为横向宽度，控件高度设置为原始控件高度;第二更新单元217用于在列表布局单元213设置完成后，将纵坐标更新为纵坐标与原始控件高度以及控件间距之和(即yi = yi+原始控件高度+控件间距)。
[0051]本发明提供的线表单设计系统采用将停放方式与列表布局方式相结合的方式，可以满足移动终端从上到下进行表单设计的特点。
[0052]具体地，外层控件布局子模块210按照如图4所示的流程来执行停放列表过程:
[0053]步骤S41:由第一初始化单元214初始化第一坐标集。
[0054]步骤S42:由判断单元211判断外层控件是否具有停放属性，如果有，则流程前进到步骤S43，反之，流程前进到步骤S44。
[0055]步骤S43:由停放布局单元212根据外层控件的停放属性来设置外层控件的位置和尺寸，由第一更新单元215更新第一坐标集。
[0056]步骤S44:由判断单元211判断是否具有下一外层控件，如果有，则流程前进到步骤S42，反之，流程前进到步骤S45。
[0057]步骤S45:由第二初始化单元216初始化第二坐标集。
[0058]步骤S46:由判断单元211判断外层控件是否具有停放属性，如果有，则流程前进到步骤S48，反之，流程前进到步骤S47。
[0059]步骤S47:由列表布局单元213设置不具有停放属性的外层控件的位置和尺寸，由第二更新单元217更新第二坐标集。
[0060]步骤S48:由判断单元211判断是否具有下一外层控件，如果有，则流程前进到步骤S46，反之，结束。
[0061]图3为本发明一实施例提供的一种基于HTML5的在线表单设计系统的表格布局子模块的结构框图。其中，利用表格布局方式在外层控件内设置表格布局子控件时，外层控件具有多个单元格，每个单元格内有且只有一个表格布局子控件。如图3所示，表格布局子模块220包设置单元221和布局单元222，其中，设置单元221用于根据外层控件的表格布局属性来设置行高数组和列高数组;布局单元222用于根据行高数组、列高数组和表格布局子控件的布局条件属性来设置表格布局子控件的位置和尺寸。
[0062]进一步地，表格布局子模块220还包括校验单元223，用于校验单元格内是否设置有表格布局子控件，如果该单元格已经有控件，则不再重复加入。
[0063]进一步地，表格布局属性包括行样式属性、列样式属性、子控件样式属性。当子控件样式属性中存在表格布局子控件时，布局单元222还用于根据子控件样式属性判断表格布局子控件是否存在于子控件样式属性中，并根据合并标志来判断是否需要进行合并。其中:
[0064]行样式属性默认为“0，50;0，50”，其中，0表示按比率，50表示百分之50 ；如果是1，50，则1表示按绝对坐示值，50表示50像数。所以“0，50 ; 0，50”表示该表格2行，各占百分之50；
[0065]同样地，列样式属性默认为“0，50;0，50”，表不该表格2列，各占百分之50;
[0066]子控件样式属性默认为空，如果子控件样式属性设置如下:
[0067]xGridLayout.layoutStyles = [{“id”:"xButtonl","column":1,"row":1，"colSpan〃:1,〃rowSpan〃:1},
[0068]{"id":"xTextFieldl","column":1,"row":0,"colSpan":1,"rowSpan":1},
[0069]{"id":"xNotel","column":0,"row":1,"colSpan":2,"rowSpan":1}]；
[0070]则表示第2行2列放置按钮控件，控件ID为xButtonl;表示第1行2列放置文本框控件，控件ID为xTextFieldl;表示第1行1列到第1行第2列放置备注控件，控件ID为xNotel;如上所示，子控件样式属性中行合并标志rowSpan，默认值为1表示该控件只占一行，当值为2表示占2行，表示需要由布局单元222来执