CN102541534B - 移动设备网页窗体生成方法 - Google Patents

Abstract

本发明涉及一种移动设备网页窗体生成方法，它包括以下步骤：提供至少一复合控件，所述每一复合控件系由一第一子控件及至少一第二子控件卷标组合而成，所述复合控件应用于一移动设备网页；将所述所有复合控件的所述第一子控件设定为靠单边对齐；以及根据所述移动设备网页的宽度及所述所有复合控件的宽度，将所述第二子控件进行折行。本发明的移动设备网页窗体生成方法针对网页窗体在不同移动浏览器内呈现的一致性要求，提出一种解决方案：藉由复合控件的设计，可避免因移动浏览器解译方式差异造成网页窗体呈现不一致的问题，可适应不同的移动浏览器。

Description

移动设备网页窗体生成方法

技术领域

本发明涉及网页窗体生成方法，特别涉及一种移动设备网页窗体生成的方法。 

背景技术

随着移动设备如智能手机的功能提升、购入门坎降低、3G与WiFi等无线通信的普及，移动上网的人数已越来越多，通过移动浏览器浏览网页已成为移动用户接收信息的重要管道。 

移动设备如手机(mobile phone)、平板计算机(tablet PC)或个人数字助理(PDA)等上面的浏览器（以下简称移动浏览器）种类多，支持的网页技术（如：HTML、JavaScript、CSS等）标准不一，而且移动设备的显示屏尺寸多样，造成网页在不同的移动浏览器内有着不同的呈现结果。 

企业数据储存于数据库，为结构化数据。针对企业移动用户所发展的应用，例如：客户查询、商品查询、订单查询/修改等，为了让用户容易阅读及修改数据，必须清楚显示字段卷标与字段内容，并且排列整齐，所以通常以窗体（form）方式呈现。 

为了提高易用性（usability），窗体的呈现以不出现横向滚动条为前提。在表单域数较多的情况下，出现纵向滚动条是有其必要的，但是如果同时出现横向滚动条，使用者必定难以操作。 

为了达到窗体式呈现的最佳效果，通常采用表格式布局（table layout）。如果不用表格式布局，而用绝对寻址方式设定控件显示位置与大小，因为移动浏览器特性不同，呈现出来的结果往往不一致。 

采用表格式布局，就是在网页设计时使用Table（如HTML<table>tag），将页面控件放置在表格内适当的Cell（即HTML<tr><td>tag），并且在设计时间将窗体定义完成。目前某些高级手机如iPhone、Android Phone可支持这样的布局方式，达到窗体正常显示的效果，但仍有以下缺点： 

1、在设计时间完成窗体排版，需要较多的开发工时。

2、因为执行时不得出现横向滚动条，在设计时间，必须对每一种移动设备，根据其屏幕大小（特别指宽度）做针对性的设计。 

对于企业应用软件开发者而言，如果不能有效克服网页窗体在不同移动浏览器内的呈现一致性问题，而必须对个别移动浏览器做针对性的设计，那么势必会降低软件开发的生产力。 

有鉴于此，寻求一种移动设备网页窗体生成方法成为该领域技术人员的追求目标。 

发明内容

本发明的任务是提供一种移动设备网页窗体生成方法，它克服了上述现有技术的缺点，针对网页窗体在不同移动浏览器内呈现的一致性要求，提出一种解决方案：藉由复合控件的设计，可避免因移动浏览器解译方式差异造成网页窗体呈现不一致的问题，可适应不同的移动浏览器。 

本发明的技术解决方案如下： 

一种移动设备网页窗体生成方法，包括以下步骤：

提供至少一复合控件，所述每一复合控件系由一第一子控件及至少一第二子控件卷标组合而成，所述复合控件应用于一移动设备网页；

将所述所有复合控件的所述第一子控件设定为靠单边对齐；以及

根据所述移动设备网页的宽度及所述所有复合控件的宽度，将所述第二子控件进行折行。

将所述复合控件显示于所述移动设备网页。 

所述靠单边对齐的步骤，包括以下步骤： 

取出所述所有复合控件的所述第一子控件宽度，计算出其中的最大值；以及

将所述所有复合控件的所述第一子控件的宽度设定为所述最大值，且设定为靠单边对齐。

将所述第二子控件进行折行的步骤，包括以下步骤： 

根据所述最大值，计算所述每一复合控件的所述第一子控件及所述第二子控件的一总宽度；以及

当所述总宽度超过该移动设备网页的宽度时，则将所述第二子控件进行折行，且同时增加所述复合控件第一子控件的一个行跨度。

计算所述每一复合控件的所述总宽度步骤，包括以下步骤： 

加总所述第一子控件的宽度及所述一第一个第二子控件的宽度为所述总宽度；以及

当所述总宽度未超出所述移动设备网页的宽度时，则加总所述总宽度及所述一第二个第二子控件的宽度为所述总宽度。

所述靠单边对齐为左边对齐。 

所述靠单边对齐为右边对齐。 

按本发明的方法，根据最大值，计算每一复合控件的第一子控件及第二子控件的总宽度。在此，计算总宽度的详细步骤为加总第一子控件的宽度及一个第二子控件的宽度为总宽度。当计算出的总宽度尚未超出移动设备网页的宽度时，则将现有总宽度及下一个第二子控件的宽度相加为总宽度。直到总宽度超出移动设备网页的宽度为止，则根据移动设备网页的宽度及所有复合控件的宽度，将第二子控件进行折行，同时增加复合控件第一子控件的一个行跨度。然后，将复合控件显示于所述移动设备网页。 

在此，本发明所提出的方法中，靠单边对齐可以是左边对齐，也可以是右边对齐。 

为解决窗体在不同移动浏览器内的呈现一致性等问题，本发明提供一种复合控件，藉由复合控件简化页面的设计，并可避免因移动浏览器解译方式差异造成网页窗体呈现不一致的问题，可适应不同的移动浏览器（例如iPhone iOS、Android、Symbian S60 5th、Windows Mobile/Phone）。 

复合控件系由一个第一子控件及至少一个第二子控件卷标组合而成，并可搭配一个设计器（Designer）以及一渲染(Rending)方式，设计者只须将需要的复合控件依序拖曳至设计区域，并依据移动浏览器的屏幕宽度处理复合控件内第一子控件的对齐，接着再依序处理所有复合控件内第二子控件的排列与折行。 

本发明提供一种复合控件，每一复合控件系由一个第一子控件及至少一个第二子控件卷标（例如HTML的Table）组合而成。 

复合控件可搭配一个设计器，使设计者在设计时期可利用设计器进行网页窗体的基本设计，不需要考虑页面控件的排版，也不需要考虑移动浏览器的种类与版本。设计者只须将需要的复合控件依序拖曳至设计区域中，自上而下排列而不需要排版，即可完成页面设计。完成设计后储存为一个页面定义脚本(script)，可为XML格式，部署在Web服务器。藉由复合控件所完成的页面设计，可依据使用者提出的请求，由渲染方式根据使用者端移动浏览器的属性，将前述的页面定义脚本渲染成网页，同时完成页面控件的排版，最终呈现于该客户端移动浏览器。 

渲染方式动态排版工作原理： 

处理所有复合控件内第一子控件的对齐。方法为：取出各个复合控件的第一子控件宽度，计算出最大值。将各个复合控件的第一子控件的宽度设定为该最大值，且设定为靠单边（右边或左边）对齐。

依据移动浏览器的屏幕宽度，在不产生横向滚动条的前提下，依序处理所有复合控件内第二子控件的排列与折行。方法为：计算该第一子控件及各该第二子控件的总宽度，判断是否超过该移动浏览器的宽度。如是，则该第二子控件进行折行，且同时增加该复合控件第一子控件的一个行跨度（row span）。如否，则直接输出该第二子控件。 

本发明由于采用了以上技术方案，使之与现有技术相比，本发明的移动设备网页窗体生成方法针对网页窗体在不同移动浏览器内呈现的一致性要求，提出了解决方案；藉由复合控件的设计，可避免因移动浏览器解译方式差异造成网页窗体呈现不一致的问题，可适应不同的移动浏览器；在设计时期，不须做页面控件的排版设定，简化开发工作；在执行时期，由渲染引擎根据客户端移动浏览器的属性，将设计时期产生的页面定义脚本渲染成网页，同时完成页面控件的排版，包括对各复合控件内第一子控件的对齐处理，以及第二子控件的行列位置调整。 

附图说明

图1为本发明的一种移动设备网页窗体生成方法的步骤一的流程图。 

图2为本发明的一种移动设备网页窗体生成方法的步骤二的流程图。 

图3为本发明中第一子控件与第二子控件的示意图。 

图4至图7为本发明的移动设备网页窗体生成方法在实际使用中的步骤示意图。 

附图标记： 

10为第一子控件，20为第二子控件。

具体实施方式

下面结合附图和实施例对本发明作详细说明。 

参看图3至图7，本发明的一种移动设备网页窗体生成方法包括以下步骤： 

提供至少一复合控件，每一复合控件系由第一子控件10及至少一第二子控件20卷标组合而成，复合控件应用在移动设备网页上。

将所有复合控件的第一子控件10设定为靠单边对齐。在此，靠单边对齐的详细步骤为取出所有复合控件的第一子控件宽度，计算出其中的最大值，将所有复合控件的第一子控件10的宽度设定为为计算出的最大值，且设定为靠单边对齐。 

接着，根据最大值，计算每一复合控件的第一子控件10及第二子控件20的总宽度。在此，计算总宽度的详细步骤为加总第一子控件10的宽度及一个第二子控件20的宽度为总宽度。当计算出的总宽度尚未超出移动设备网页的宽度时，则将现有总宽度及下一个第二子控件20的宽度相加为总宽度。直到总宽度超出移动设备网页的宽度为止，则根据移动设备网页的宽度及所有复合控件的宽度，将第二子控件20进行折行，同时增加复合控件第一子控件10的一个行跨度。然后，将复合控件显示于所述移动设备网页。 

在此，本发明所提出的方法中，靠单边对齐可以是左边对齐，也可以是右边对齐。 

如图3至图2所示，本发明提供了一种移动设备网页窗体生成方法，它包括至少一复合控件，该复合控件系由一第一子控件10及至少一第二子控件20卷标组合而成。 

参看图1，本发明的一种移动设备网页窗体生成方法包括以下步骤： 

（1）处理所有复合控件内第一子控件10的对齐，取出各个复合控件的第一子控件10宽度，计算出其中的最大值；将各个复合控件的第一子控件10的宽度设定为该最大值，且设定为靠单边对齐（左边对齐或右边对齐）。

（11）选取至少一个复合控件； 

（12）截取移动装置屏幕宽度；

（13）判断是否有二个以上复合控件，若是，则执行步骤（14）；若否，则执行步骤（16）；

（14）计算各复合控件的第一子控件10宽度，并取得最大值；

（15）将各个复合控件的第一子控件10的宽度依据该最大值调整，且靠单边对齐；

（16）计算该复合控件的宽度是否大于移动浏览器宽度，若是，则执行步骤（17）；若否，则执行步骤（18）；

（17）该复合控件进行折行；

（18）显示复合控件。

参看图2，（2）依据移动浏览器的屏幕宽度，在不产生横向滚动条的前提下，依序处理所有复合控件内第二子控件20的排列与折行，计算该第一子控件10及各该第二子控件20的总宽度，判断是否超过该移动浏览器的宽度；若是，则该第二子控件20进行折行，且同时增加该复合控件第一子控件10的一个行跨度；若否，则直接输出该第二子控件20。 

（21）计算该第一个子控件及一第二子控件20的总宽度； 

（22）确认该第一子控件10及该第二子控件20的总宽度是否超出该移动浏览器的总宽度，若是，则执行步骤（23）；若否，则执行步骤（24）；

（23）将该第一子控件10的行宽度加一，并将该第二子控件20折行；

（24）确认是否有下一个第二子控件20，若是，则执行步骤（22）；若否，则执行步骤（25）；

（25）结束。

参看图4至图7，详细说明以下范例。 

如图4所示，假设设备屏幕分辨率为320′480（宽度′高度）。选取2个复合控件，一个复合控件由子控件Cell 11、Cell 12、Cell 13、Cell 14和Cell 15组成，另一个复合控件由子控件Cell 21、Cell 22、Cell 23、Cell 24和Cell 25组成。其中，一个复合控件中的子控件Cell 11为第一子控件10，其余子控件Cell 12、Cell 13、Cell 14和Cell 15分别为第二子控件20；另一个复合控件中的子控件Cell 21为第一子控件10，其余子控件Cell 22、Cell 23、Cell 24和Cell 25分别为第二子控件20。 

如图5所示，计算各个复合控件的第一子控件10宽度，如子控件Cell 11、Cell 21宽度，并取得最大值，以供依据该最大值对齐。在图5中可看出，Cell 11原来的宽度为100，在处理后会以最大值120靠边对齐。 

如图6所示，计算第一子控件10和第二子控件20是否超过屏幕宽度。当Cell 11(宽度120)和Cell 12(宽度90)相加小于屏幕宽度320时，总宽度会设为120+90=210，然后将总宽度和下一个第二子控件Cell 13(宽度40)相加，直到总宽度大于屏幕宽度320为止。在图6中可看出，当Cell 11(宽度120)和Cell 12(宽度90)、Cell 13(宽度40)以及Cell 14(宽度120)相加时，总宽度变成120+90+40+120=370，此时总宽度即大于屏幕宽度320。 

如图7所示，第一子控件10与该些第二子控件20超过屏幕，该些第二子控件20进行折行，如将子控件Cell 14折行。 

本发明所述的移动设备可以是手机、个人数字助理，也可以是掌上电脑或平板计算机。 

综上所述，本发明的移动设备网页窗体生成方法针对网页窗体在不同移动浏览器内呈现的一致性要求，提出了解决方案；藉由复合控件的设计，可避免因移动浏览器解译方式差异造成网页窗体呈现不一致的问题，可适应不同的移动浏览器；在设计时期，不须做页面控件的排版设定，简化开发工作；在执行时期，由渲染引擎根据客户端移动浏览器的属性，将设计时期产生的页面定义脚本渲染成网页，同时完成页面控件的排版，包括对各复合控件内第一子控件的对齐处理，以及第二子控件的行列位置调整。 

当然，本技术领域内的一般技术人员应当认识到，上述实施例仅是用来说明本发明，而并非用作对本发明的限定，只要在本发明的实质精神范围内，对上述实施例的变化、变型等都将落在本发明权利要求的范围内。 

Claims (4)

1.一种移动设备网页窗体生成方法，其特征在于，包括以下步骤：

提供至少一复合控件，所述复合控件是由一第一子控件及至少一第二子控件卷标组合而成，所述复合控件应用于一移动设备网页；

计算出所有所述复合控件的所述第一子控件的宽度的最大值，并将所有所述复合控件的所述第一子控件的宽度设定为所述最大值，且设定为靠单边对齐；以及

根据所述移动设备网页的宽度及所述最大值，计算所述复合控件的所述第一子控件及第一个第二子控件的一总宽度是否超出所述移动设备网页的宽度，当所述总宽度超过该移动设备网页的宽度时，将所述第二子控件进行折行，且同时增加所述复合控件第一子控件的一个跨行度；

计算所述复合控件的所述总宽度步骤，包括以下步骤：

加总所述第一子控件的宽度及所述第一个第二子控件的宽度为所述总宽度；以及

当所述总宽度未超出所述移动设备网页的宽度时，则加总所述总宽度及第二个第二子控件的宽度为所述总宽度。

2.如权利要求1所述的移动设备网页窗体生成方法，其特征在于：将所述复合控件显示于所述移动设备网页。

3.如权利要求1所述的移动设备网页窗体生成方法，其特征在于：所述靠单边对齐为左边对齐。

4.如权利要求1所述的移动设备网页窗体生成方法，其特征在于：所述靠单边对齐为右边对齐。