CN101706821A - 基于标签的移动互联网页面设计系统及方法 - Google Patents

Abstract

本发明公开了一种基于标签的移动互联网页面设计系统及方法，系统包括：存储模块、设计模块和页面生成模块，其中，存储模块存储预定义的页面设计模板以及标签；设计模块加载选定的页面设计模板，并将选定的标签插入到选定的页面设计模板中，为每个标签设置标签属性，标签属性包括：基本属性、业务规则数据和数据信息属性；同时设计模块将标签的基本属性和业务规则属性持久化到设定的模型文件中，将标签的数据信息属性持久化到数据库中；页面生成模块将设定的模型文件转换成预定格式的移动互联网页面，并在该移动互联网页面运行时，根据数据信息属性动态加载相应的数据内容；本发明能够根据用户需要进行灵活地设计模型页面，且实现模型和数据分离。

Description

基于标签的移动互联网页面设计系统及方法

技术领域

本发明涉及移动互联网技术领域，尤其涉及一种基于标签的移动互联网页面设计系统及方法。

背景技术

随着移动互联网的蓬勃发展，越来越多的移动互联网内容提供商迅速壮大。目前，移动互联网内容提供商一般采用如下两种方式来实现移动互联网页面的开发：

1、由开发人员用某种格式化标记语言手工编写页面；这种方式的缺点在于，由于互联网页面的开发需要使用特殊的标签语言，这就增加了开发人员开发的复杂程度，而且手工编写页面的方法容易出错。

2、页面设计人员通过web方式，从数据库提取页面展现元素，插入需编辑页面，然后再按照数据库保存的信息，显示成页面；这种方式的缺点在于，从数据库提取页面展现元素插入需编辑页面时，需要对页面元素的位置进行动态调整，由于页面的平面的二维结构，所以涉及纵向，横向两个维度的调整，现有技术只能对页面元素进行纵向调整；并且由于不同终端对页面语法的支持程度不一致，需要生成不同格式移动互联网页面，比如wml，html，xhtml等，而通过这种方式生成的页面在编写时就固定了某一种语法结构，不能满足终端对多种格式页面的需要。

发明内容

鉴于上述的分析，本发明旨在提供一种基于标签的页面设计系统及方法，用以解决现有技术中存在的移动互联网页面设计复杂以及语法固定等问题。

本发明的目的主要是通过以下技术方案实现的：

本发明提供了一种基于标签的移动互联网页面设计系统，包括：存储模块、设计模块和页面生成模块，其中，

所述存储模块，用于存储预定义的页面设计模板以及标签；

所述设计模块，用于加载选定的页面设计模板，并将选定的标签插入到选定的页面设计模板中，为每个标签设置标签属性，所述标签属性包括：基本属性、业务规则数据和数据信息属性；同时所述设计模块还用于，将标签的基本属性和业务规则属性持久化到设定的模型文件中，将标签的数据信息属性持久化到数据库中；

所述页面生成模块，用于将设定的模型文件转换成预定格式的移动互联网页面，并在该移动互联网页面运行时，根据数据信息属性动态加载相应的数据内容。

进一步地，所述存储模块具体包括：页面设计模板库和标签库，其中，

所述页面设计模板库，用于存储预定的多种页面设计模板；

所述标签库，用于存储预定的多种标签；所述标签至少包括基础标签、业务标签和自定义标签中的一个或多个，其中，所述基础标签至少包括多选框、文本框、单选框、下拉框、超链接、水平线、文件上传、图片、表格和日历中的一个或多个；所述业务标签至少包括频道、主题、栏目、内容、tab页、菜单、返回、导航条和树中的一个或多个.

进一步地，所述设计模块具体包括：标签位置设置单元和标签属性设置单元，其中，

所述标签位置设置单元，用于加载选定的页面设计模板，并通过表格或者坐标的方式给每个标签设定其在该页面设计模板中的位置，将选定的标签插入到选定的页面设计模板中；

所述标签属性设置单元，用于为选定的页面设计模板中的每个标签设置标签属性，同时将标签的基本属性和业务规则属性持久化到模型文件中，将标签的数据信息属性持久化到数据库中。

进一步地，所述标签位置设置单元具体用于，加载选定的页面设计模板，在选定的页面设计模板中插入表格，将选定的标签分别插入到表格的多个单元格中；或者，

所述标签位置设置单元具体用于，加载选定的页面设计模板，并给选定的每个标签设定其在页面设计模板中的坐标。

进一步地，所述页面生成模块具体包括：模型页面转化装置、页面生成器和加载单元，其中，

所述模型页面转化装置，用于将所述设计模块中生成的模型文件解析成模拟运行的显示结果提供给用户预览；

所述页面生成器，用于将用户预览通过的模型文件转换成预定格式的移动互联网页面；

所述加载单元，用于在该移动互联网页面运行时，根据数据库中的数据信息属性动态加载相应的数据内容。

进一步地，所述标签的基本属性至少包括标签在页面中的位置、前背景色、字体、样式、是否显示链接中的一个或多个；所述标签的业务规则属性至少包括显示方式、分页、导航数据、前后分割符、结尾分隔符、排序规则、排序方式、排序依据、是否滚动中的一个或多个；数据信息属性至少包括标签获取数据的来源、需要获取的数据的条数中的一个或多个。

本发明还提供了一种基于标签的移动互联网页面设计方法，预定义有页面设计模板以及标签，所述方法包括：

步骤A：加载选定的页面设计模板，并将选定的标签插入到选定的页面设计模板中，为每个标签设置标签属性，所述标签属性包括：基本属性、业务规则数据和数据信息属性；同时将标签的基本属性和业务规则属性持久化到设定的模型文件中，将标签的数据信息属性持久化到数据库中；

步骤B：将模型文件转换成预定格式的移动互联网页面；

步骤C：当该移动互联网页面运行时，根据数据库中存的数据信息属性动态加载相应的数据内容。

进一步地，所述步骤A具体包括：

加载选定的页面设计模板，并通过表格或者坐标的方式给每个标签设定其在该页面设计模板中的位置，将选定的标签插入到选定的页面设计模板中，；

为选定的页面设计模板中的每个标签设置标签属性，同时将标签的基本属性和业务规则属性保存到模型文件中，将标签的数据信息属性保存到数据库中.

进一步地，所述步骤B具体包括：

将选定的模型文件解析成模拟运行的显示结果提供给用户预览；

将用户预览通过的模型文件转换成预定格式的移动互联网页面。

进一步地，所述标签至少包括基础标签、业务标签和自定义标签中的一个或多个，其中，所述基础标签至少包括多选框、文本框、单选框、下拉框、超链接、水平线、文件上传、图片、表格和日历中的一个或多个；所述业务标签至少包括频道、主题、栏目、内容、tab页、菜单、返回和导航条和树中的一个或多个。

所述标签的基本属性至少包括标签在页面中的位置、前背景色、字体、样式、是否显示链接中的一个或多个；所述标签的业务规则属性至少包括显示方式、分页、导航数据、前后分割符、结尾分隔符、排序规则、排序方式、排序依据、是否滚动中的一个或多个；数据信息属性至少包括标签获取数据的来源、需要获取的数据的条数中的一个或多个。

本发明有益效果如下：

本发明能够根据用户需要进行灵活地设计模型页面，且实现模型和数据分离，有效的隔离模型和数据的耦合，实现模型转化为多种语法目标页面。

本发明的其他特征和优点将在随后的说明书中阐述，并且，部分的从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

图1为本发明实施例所述装置的结构视图；

图2为本发明实施例所述方法的流程示意图；

图3为本发明实施例的页面设计流程示意图。

具体实施方式

本发明的目的在于提供一种基于标签的页面设计系统及方法，能够根据用户需要进行灵活地设计模型页面，且实现模型和数据分离，有效的隔离模型和数据的耦合，实现模型转化为多种语法目标页面。

下面结合附图来具体描述本发明的优选实施例，其中，附图构成本申请一部分，并与本发明的实施例一起用于阐释本发明的原理。为了清楚和简化目的，当其可能使本发明的主题模糊不清时，将省略本文所描述的器件中已知功能和结构的详细具体说明。

首先结合附图对本发明实施例所述的移动互联网页面设计系统进行详细说明。

如图1所示，图1为发明实施例所述的移动互联网页面设计系统的结构示意图，具体可以包括：存储模块、设计模块和页面生成模块，其中，存储模块具体包括：页面设计模板库和标签库；设计模块具体包括：标签位置设置单元和标签属性设置单元；页面生成模块具体可以包括：模型页面转化装置、页面生成器和加载单元。

(一)存储模块，存储预定义的页面设计模板以及标签；存储模块具体包括：页面设计模板库和标签库，其中，

页面设计模板库，将预定义的多个页面设计模板存储在页面设计模板库中，通过页面设计模版的样式等模板属性可以设定页面的显示风格；

标签库，标签库就是标签的集合，是一个工具箱面板，标签可以根据功效分为基础标签，业务标签，和自定义标签；

其中，基础标签包括：多选框，文本框，单选框，下拉框，超链接，水平线，文件上传，图片，表格、日历等；

业务标签可以划分频道，主题，栏目，内容，tab页，树、菜单、返回、导航条等；频道可以是一类栏目的集合，主题也是一类栏目的集合；栏目是一个树型结构，一个栏目只有一个父亲，一个栏目只有一个或者多个孩子，也可以没有孩子；栏目是用来归类内容的，相关的内容都挂载在一个栏目下

自定义标签是一组基础标签、业务标签的集合，用户可以把设计好的一组基础标签或则业务标签，自定义为一个标签。

(二)设计模块，设计模块就是一个设计容器，在设计容器中完成页面的设计；当用户选定页面设计模块后，将选定的页面设计模板加载到其中，并将用户选定的标签插入到选定的页面设计模板中，为每个标签设置标签属性；所述标签属性包括：基本属性、业务规则数据和数据信息属性；通过属性设置确定标签的外观和行为，以便在页面运行时可以动态展现的页面数据。

标签的基本属性包括：标签在页面中的位置、前背景色、字体、样式、是否显示链接等；标签的业务规则属性包括：显示方式、分页、导航数据、前后分割符、结尾分隔符、排序规则、排序方式、排序依据、是否滚动中等；数据信息属性包括：标签获取数据的来源、需要获取的数据的条数等。

为标签设置好标签属性后，设计模块将标签的基本属性和业务规则属性持久化到模型文件中，将标签的数据信息属性持久化到数据库中；这样可以实现模型和数据的分离，有效的隔离模型和数据的耦合。

设计模块具体包括：标签位置设置单元和标签属性设置单元，其中，

标签位置设置单元，加载选定的页面设计模板，并在选定的页面设计模板中插入标签；由于插入的标签通常有多个，所以需要对每个标签在页面设计模板中的位置进行设定；位置设定方法可以有两种：一是表格是方式，即在页面设计模板中先插入一个表格，标签的纵向横向通过表格来排版，将选定的标签分别插入到表格的多个单元格中，标签之间的互相移动可以拽动；二是坐标的方式，给选定的每个标签设定其在页面设计模板中的坐标，每个标签都记录了其在设计视图的坐标，通过调整水平，垂直的坐标，调整标签在设计视图的位置；

标签属性设置单元，标签的位置确定后，标签属性设置单元为该于页面设计模板中的每个标签设置标签属性，同时将标签的基本属性和业务规则属性保存到设定的模型文件中，将标签的数据信息属性保存到数据库中；模型文件可以是.xml格式的文件，保存标签的基本属性和业务规则，记录该标签在设计页面的逻辑模型，可以映射到设计视图，使得用户可以任意的进行拖拽。

(三)页面生成模块，将所述设计模块中生成的模型文件解析成模拟运行的显示结果提供给用户预览，将用户预览通过的模型文件转换成预定格式的移动互联网页面，并在该移动互联网页面运行时，根据数据库中存储的数据信息属性动态加载相应的数据内容.

页面生成模块具体可以包括：模型页面转化装置、页面生成器和加载单元，其中，

模型页面转化装置，当标签被保存到模型文件和数据库中之后，可以对整个页面进行预览；模型页面转化装置具有模型页面转化功能，把模型文件解析成模拟运行的显示效果给用户预览，通过预览检验效果，根据用户需求对页面进行调整；

页面生成器，将用户预览通过的模型文件转换成目标格式的移动互联网页面；具体的说就是，通过页面生成器，根据用户所需的语法结构，把模型文件转化成预定格式的目标页面。目标页面的格式是可选的，默认是生成全部支持的类型。本发明实施例中，页面生成器采用现有的模板引擎Velocity，Velocity是一个基于java的模板引擎，它允许任何人仅仅简单的使用模板语言来引用由java代码定义的对象，通过模版定义不同语法的模版，可以将模型转化成目标页面文件；

加载单元，在该移动互联网页面运行时，用户浏览时根据数据库中存储的数据信息属性动态加载相应的数据内容。

下面再结合附图2对本发明实施例所述方法进行详细说明。

如图2所示，图2为本发明实施例所述方法的流程示意图，本发明实施例所述方法在执行前必须预先存有多种预定义的页面设计模块和标签，本发明实施例所述方法具体可以包括如下步骤：

步骤201：选择一种页面设计模板；选择页面设计模版时，需指定页面设计模版的样式等模版属性，通过模版的样式等模板属性可以设定页面的显示风格；

步骤202：从标签库选择标签；

标签库是标签的集合，是一个工具箱面板，标签可以根据功效分为基础标签，业务标签，和自定义标签；

其中，基础标签包括：多选框，文本框，单选框，下拉框，超链接，水平线，文件上传，图片，表格、日历等；

业务标签可以划分频道，主题，栏目，内容，tab页，树、菜单、返回、导航条等；频道可以是一类栏目的集合，主题也是一类栏目的集合；栏目是一个树型结构，一个栏目只有一个父亲，一个栏目只有一个或者多个孩子，也可以没有孩子；栏目是用来归类内容的，相关的内容都挂载在一个栏目下

自定义标签是一组基础标签的集合，用户可以把设计好的一组基础标签，自定义为一个标签。

步骤203：将选定的标签插入到选定的页面设计模板中；由于插入的标签通常有多个，所以需要对每个标签在页面设计模板中的位置进行设定；位置设定方法可以有两种：一是表格是方式，即在页面设计模板中先插入一个表格，标签的纵向横向通过表格来排版，将选定的标签分别插入到表格的多个单元格中，标签之间的互相移动可以拽动；二是坐标的方式，给选定的每个标签设定其在页面设计模板中的坐标，每个标签都记录了其在设计视图的坐标，通过调整水平，垂直的坐标，调整标签在设计视图的位置；

步骤204：插入标签后，为每个标签设定标签属性，通过属性设置确定标签的外观和行为，以便在页面运行时可以动态展现的页面数据；其中属性包括基础属性，业务规则属性，数据信息属性等，

其中，标签的基本属性包括：标签在页面中的位置、前背景色、字体、样式、是否显示链接等；标签的业务规则属性包括：显示方式、分页、导航数据、前后分割符、结尾分隔符、排序规则、排序方式、排序依据、是否滚动中等；数据信息属性包括：标签获取数据的来源、需要获取的数据的条数等。

步骤205：将标签的基本属性和业务规则属性持久化到模型文件中，同时将标签的业务规则及数据信息持久化到数据库；

模型文件是.xml格式的文件，保存标签的基础信息，记录该标签在设计页面的逻辑模型，可以映射到设计视图，使得用户可以任意的进行拖拽；

模型文件是生成目标页面的基础，也是从用户设计到目标页面的中间状态，模型文件是一个抽象的逻辑结构，有效的隔离模型和数据的关系，模型文件和用户的页面设计是对应的，是设计视图展现的基础。

步骤206：当标签被保存到模型文件和数据库中之后，可以对整个页面进行预览；具体的说就是，通过模型页面转化装置，把模型文件解析成模拟运行的显示效果，通过预览检验效果，然后根据用户需求对页面进行调整。

步骤207：将模型文件转换成目标格式的移动互联网页面；具体的说就是，通过页面生成器，根据用户所需的语法结构，把模型文件转化成目标页面。

步骤208：当移动互联网页面运行时，在用户浏览时就可以根据数据信息属性从数据库中动态加载相应的数据内容。

如图3所示，图3为页面设计流程示意图，即用户通过移动互联网页面设计系统完成页面设计的过程，具体可以包括：选择页面设计模板和标签，通过设计视图将标签插入到选定的页面设计模板中，然后进行属性视图设置标签属性，将标签属性保存到模型文件中，然后进行页面转化视图预览，通过模板引擎生成预定格式的页面。

综上所述，本发明实施例提供了基于标签的移动互联网页面设计系统及方法，通过页面设计容器设计页面模型，其中页面设计容器的标签来自于标签库，标签库是一个可以扩展的工具箱，标签是一种页面构成元素，通过多样化属性视图设置，用户的设置持久化模型文件，通过页面生成器，将模型文件转化成移动互联网页面。

按照本发明实施例所述的基于标签的页面设计系统及方法，可以根据模板类型设计不同格式的页面，标签库可以自由扩展，可以对已有标签自定义组合，因此可以避免重复制造轮子，能够根据用户需要进行灵活地设计各种格式的页面，且实现模型和数据分离，有效的隔离模型和数据的耦合。

以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求书的保护范围为准。

Claims (11)

1.一种基于标签的移动互联网页面设计系统，其特征在于，包括：存储模块、设计模块和页面生成模块，其中，

所述存储模块，用于存储预定义的页面设计模板以及标签；

所述设计模块，用于加载选定的页面设计模板，并将选定的标签插入到选定的页面设计模板中，为每个标签设置标签属性，所述标签属性包括：基本属性、业务规则数据和数据信息属性；同时所述设计模块还用于，将标签的基本属性和业务规则属性持久化到设定的模型文件中，将标签的数据信息属性持久化到数据库中；

所述页面生成模块，用于将设定的模型文件转换成预定格式的移动互联网页面，并在该移动互联网页面运行时，根据数据信息属性动态加载相应的数据内容。

2.根据权利要求1所述的系统，其特征在于，所述存储模块具体包括：页面设计模板库和标签库，其中，

所述页面设计模板库，用于存储预定的多种页面设计模板；

所述标签库，用于存储预定的多种标签；所述标签至少包括基础标签、业务标签和自定义标签中的一个或多个，其中，所述基础标签至少包括多选框、文本框、单选框、下拉框、超链接、水平线、文件上传、图片、表格、日历中的一个或多个；所述业务标签至少包括频道、主题、栏目、内容、tab页、菜单、返回、导航条和树中的一个或多个。

3.根据权利要求1所述的系统，其特征在于，所述设计模块具体包括：标签位置设置单元和标签属性设置单元，其中，

所述标签位置设置单元，用于加载选定的页面设计模板，并通过表格或者坐标的方式给每个标签设定其在该页面设计模板中的位置，将选定的标签插入到选定的页面设计模板中；

所述标签属性设置单元，用于为选定的页面设计模板中的每个标签设置标签属性，同时将标签的基本属性和业务规则属性持久化到模型文件中，将标签的数据信息属性持久化到数据库中。

4.根据权利要求3所述的系统，其特征在于，所述标签位置设置单元具体用于，加载选定的页面设计模板，在选定的页面设计模板中插入表格，将选定的标签分别插入到表格的多个单元格中；或者，

所述标签位置设置单元具体用于，加载选定的页面设计模板，并给选定的每个标签设定其在页面设计模板中的坐标。

5.根据权利要求1到4中任意一项所述的系统，其特征在于，所述页面生成模块具体包括：模型页面转化装置、页面生成器和加载单元，其中，

所述模型页面转化装置，用于将所述设计模块中生成的模型文件解析成模拟运行的显示结果提供给用户预览；

所述页面生成器，用于将用户预览通过的模型文件转换成预定格式的移动互联网页面；

所述加载单元，用于在该移动互联网页面运行时，根据数据库中的数据信息属性动态加载相应的数据内容。

6.根据权利要求1或3所述的系统，其特征在于，所述标签的基本属性至少包括标签在页面中的位置、前背景色、字体、样式、是否显示链接中的一个或多个；所述标签的业务规则属性至少包括显示方式、分页、导航数据、前后分割符、结尾分隔符、排序规则、排序方式、排序依据、是否滚动中的一个或多个；数据信息属性至少包括标签获取数据的来源、需要获取的数据的条数中的一个或多个.

7.一种基于标签的移动互联网页面设计方法，其特征在于，预定义有页面设计模板以及标签，所述方法包括：

步骤A：加载选定的页面设计模板，并将选定的标签插入到选定的页面设计模板中，为每个标签设置标签属性，所述标签属性包括：基本属性、业务规则数据和数据信息属性；同时将标签的基本属性和业务规则属性持久化到设定的模型文件中，将标签的数据信息属性持久化到数据库中；

步骤B：将模型文件转换成预定格式的移动互联网页面；

步骤C：当该移动互联网页面运行时，根据数据库中存的数据信息属性动态加载相应的数据内容。

8.根据权利要求7所述的方法，其特征在于，所述步骤A具体包括：

加载选定的页面设计模板，并通过表格或者坐标的方式给每个标签设定其在该页面设计模板中的位置，将选定的标签插入到选定的页面设计模板中；

为选定的页面设计模板中的每个标签设置标签属性，同时将标签的基本属性和业务规则属性保存到模型文件中，将标签的数据信息属性保存到数据库中。

9.根据权利要求7或8所述的方法，其特征在于，所述步骤B具体包括：

将选定的模型文件解析成模拟运行的显示结果提供给用户预览；

将用户预览通过的模型文件转换成预定格式的移动互联网页面。

10.根据权利要求7或8所述的方法，其特征在于，所述标签至少包括基础标签、业务标签和自定义标签中的一个或多个，其中，所述基础标签至少包括多选框、文本框、单选框、下拉框、超链接、水平线、文件上传、图片、表格和日历中的一个或多个；所述业务标签至少包括频道、主题、栏目、内容、tab页、菜单、返回、导航条和树中的一个或多个。

11.根据权利要求7或8所述的方法，其特征在于，所述标签的基本属性至少包括标签在页面中的位置、前背景色、字体、样式、是否显示链接中的一个或多个；所述标签的业务规则属性至少包括显示方式、分页、导航数据、前后分割符、结尾分隔符、排序规则、排序方式、排序依据、是否滚动中的一个或多个；数据信息属性至少包括标签获取数据的来源、需要获取的数据的条数中的一个或多个。

Images