一种基于可视化建模网页布局代码生成方法技术

本发明专利技术提出一种基于可视化建模网页布局代码生成方法，采用<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＝"Wc"rowspan＝"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个单元格；在代码上输出<tdcolspan＝"Wc"rowspan＝"Hc">元素的HTML代码</td>。在整个网页生成HTML代码后生成布局的CSS样式，通过CSS元素控制每个<td>大小，即td{width:Wmaxpx；height:Hmaxpx；}。本专利技术的有益效果是：对网页采用<table>来进行布局的定位，可以实现横向跨行，也可以纵向跨列，即使格子文字过多，也能自动伸缩；当录入了超过格子的数据后，<td>是会自动伸缩，解决了布局变形或者信息展示不全的问题，满足用户在进行可视化建模“所见即所得”的需求，将绝对定位的建模态转换为相对定位的运行态布局，让用户更高效的开发出程序界面。具体实施方式通过如下实施例对本申请方案作进一步描述：本专利技术在建模时候对网页元素采用绝对定位来网页建模，在生成运行网页的时候采用相对定位的布局生成网页元素。具体是：绝对定位是采用一种坐标的方式来描述网页元素，如(0，25，40，25)，表示在网页坐标左0像素，下25像素的位置下，画了一个长40像素，高25像素的网页元素。在一个网页上，这样的元素有很多，但是不允许元素相互重叠的。本专利技术采用<table>来进行布局的定位，将整个网页看成一个大的<table>，HTML标签<table>可以实现横向跨行，也可以纵向跨列，即使格子文字过多，也能自动伸缩。网页建模步骤中，有网页元素A的绝对坐标为Pa(0，25，40，25)，网页元素B的绝对坐标Pb(0，25，60，25)；那么，在网页代码生成步骤中计算每个元素大小的最大公约数；即，网页元素A和B的“长”参数的最大公约数就是(40，60)＝20，其“高”参数的最大公约数就是(25,25)＝25。那么<table>布局中的<td>元素的长是20，高是25。如果不进行这种计算，那么为了满足绝对定位的需求，每个<td>元素大小是1，那么大小为1024*768网页生成1024*768个<td>标志,导致生成网页的代码量非常大。遍历所有网页元素，根据网页元素的坐标查找其所在表格的位置，然后根据网页元素的大小，计算网页元素占表格多少个格子<td>。比如，网页元素A的绝对坐标为Pa(0，25，40，25)，其中，(0，25)代表了元素的位置，也就是在表格的第二行位置，同时，“长”参数40/20＝2，“高”参数25/25＝1，这个元素占了2*1个格子,即网页元素A的相对坐标为P2a(2，1)。那么，在代码上输出<tdcolspan＝"2">元素的HTML代码</td>。又如，网页元素C的绝对坐标Pc(0，25，40，60)，则这个元素占了2*2个格子，在代码上输出<tdcolspan＝"2"rowspan＝"2">元素的HTML代码</td>。最后，生成布局的CSS样式。在整个网页生成HTML代码后，通过CSS元素控制每个<td>大小；在上面的例子中是在CSS文件中输出：td{width:20px；height:25px；}。这种方式让网页在在没有录入数据的时候，即是“所见即所得”的模型。当录入了超过格子的数据后，<td>是会自动伸缩，解决了布局变形或者信息展示不全的问题。上述优选实施方式应视为本申请方案实施方式的举例说明，凡与本申请方案雷同、近似或以此为基础作出的技术推演、替换、改进等，均应视为本专利的保护范围。本文档来自技高网...

【技术保护点】
1.一种基于可视化建模网页布局代码生成方法，其特征在于：整体网页采用<table>来进行布局的定位；其中包括网页建模步骤和网页代码生成步骤；/n所述网页建模步骤是：/n设定好每一网页元素对应绝对坐标为P(X，Y，W，H)，X代表网页元素的起点相对网页零坐标的X向像素距离，Y代表网页元素的起点相对网页零坐标的Y向像素距离，W代表网页元素的长度，W代表网页元素的宽度；/n所述网页代码生成步骤是：/n遍历所有网页元素，计算得到其尺寸最大公约数，即(Wmax，Hmax)；/n将<table>布局中的<td>元素的“width”设为Wmax，“height”设为Hmax；/n根据网页元素的绝对坐标P(X，Y，W，H)和尺寸最大公约数(Wmax，Hmax)，换算成网页元素的相对尺寸(Wc＝W/Wmax，Hc＝H/Wmax)，即网页元素的“width”占Wc个单元格，“height”占Hc个单元格；在代码上输出<td colspan＝"Wc"rowspan＝"Hc">元素的HTML代码</td>。/n

【技术特征摘要】
1.一种基于可视化建模网页布局代码生成方法，其特征在于：整体网页采用<table>来进行布局的定位；其中包括网页建模步骤和网页代码生成步骤；
所述网页建模步骤是：
设定好每一网页元素对应绝对坐标为P(X，Y，W，H)，X代表网页元素的起点相对网页零坐标的X向像素距离，Y代表网页元素的起点相对网页零坐标的Y向像素距离，W代表网页元素的长度，W代表网页元素的宽度；
所述网页代码生成步骤是：
遍历所有网页元素，计算得到其尺寸最大公约数，即(Wmax，Hmax)；
将<table>布局中的<td>元素的“width”设为Wmax，“height”设为Hm...

【专利技术属性】
技术研发人员：张大志，史玉洁，袁志远，吴恺，欧阳少海，喻勋勋，
申请(专利权)人：广东飞企互联科技股份有限公司，
类型：发明
国别省市：广东;44