[发明专利]一种基于可视化建模网页布局代码生成方法

说明书

本发明提出一种基于可视化建模网页布局代码生成方法，采用table来进行布局的定位；设定好每一网页元素的绝对坐标为P(X，Y，W，H)，(X，Y)代表网页元素的起点，(W，H)代表网页元素的长度和宽度；遍历所有网页元素，计算得到其尺寸最大公约数，即(Wmax，Hmax)；将table布局中的td元素的“width”设为Wmax，“height”设为Hmax；根据网页元素的绝对坐标P(X，Y，W，H)和尺寸最大公约数(Wmax，Hmax)，换算成网页元素的相对尺寸(Wc＝W/Wmax，Hc＝H/Wmax)，即网页元素的“width”占Wc个单元格，“height”占Hc个单元格；在代码上输出td colspan＝Wcrowspan＝Hc元素的HTML代码/td。

技术领域

本发明涉及一种基于可视化建模网页布局代码生成方法。

背景技术

模型驱动架构(MDA)是一种在企业软件开发的关键技术，能够创建出机器可读和高度抽象的模型，这种模型通过转换(Transformation)技术可自动转换为代码，从而提高软件开发效率，增强软件的可移植性、协同工作能力和可维护性。可视化建模是MDA的核心技术之一，可以让开发人员、实施人员或者系统管理员根据客户的需求通过拖拉拽的方式画出网页的元素，免去了手写代码的工作量，还能减少出错率，这种“所见即所得”的可视化建模方式大大提升了软件开发与实施的效率。

然而，在将模型转换为可运行的代码后，在显示大文本数据时，会造成网页界面变形，或者信息展示不全。例如，目前常见两种技术方案：一种是在建模时候，采用绝对定位来布局网页，在生成运行网页的时候，也采用绝对定位的布局生成网页元素。建模采用绝对定位来布局网页，有利于用户的拖拉拽操作，用户想将网页元素拖到哪里就拖到哪里。在运行时候使用绝对定位的布局，利用DIV/DIV的CSS进行绝对定位，保证了建模效果和运行效果的相同。但是用户的录入的数据太多，超过DIV的大小，会导致DIV出现滚动条而变形，如果隐藏滚动条，则信息展示不全。另一种是在建模时候，采用相对定位来布局网页，在运行时候，也采用相对定位的布局生成网页元素。这种方式让用户的建模操作比较“生硬”，操作必须满足HTML元素的限制，不能随意的将网页元素拖大拖小。在运行状态下，这种布局能随数据的大小而自动伸缩，但是这也让布局随着屏幕的大小而变形，导致网页运行的效果与建模的可视化效果相差太多，达不到“所见即所得”的目标。

发明内容

为克服现有技术的缺陷，本发明提出一种基于可视化建模网页布局代码生成方法，在建模时候采用绝对定位来网页建模，在生成运行网页的时候采用相对定位的布局生成网页元素，其具体技术内容如下：

整体网页采用table来进行布局的定位；其中包括网页建模步骤和网页代码生成步骤；

所述网页建模步骤是：设定好每一网页元素对应绝对坐标为P(X，Y，W，H)，X代表网页元素的起点相对网页零坐标的X向像素距离，Y代表网页元素的起点相对网页零坐标的Y向像素距离，W代表网页元素的长度，W代表网页元素的宽度；

所述网页代码生成步骤是：遍历所有网页元素，计算得到其尺寸最大公约数，即(Wmax，Hmax)；将table布局中的td元素的“width”设为Wmax，“height”设为Hmax；根据网页元素的绝对坐标P(X，Y，W，H)和尺寸最大公约数(Wmax，Hmax)，换算成网页元素的相对尺寸(Wc＝W/Wmax，Hc＝H/Wmax)，即网页元素的“width”占Wc个单元格，“height”占Hc个单元格；在代码上输出td colspan＝Wcrowspan＝Hc元素的HTML代码/td。

在整个网页生成HTML代码后生成布局的CSS样式，通过CSS元素控制每个td大小，即td{width:Wmax px；height:Hmax px；}。