CN106708484A - 一种建立页面的方法和装置 - Google Patents

一种建立页面的方法和装置 Download PDF

Info

Publication number
CN106708484A
CN106708484A CN201510778587.3A CN201510778587A CN106708484A CN 106708484 A CN106708484 A CN 106708484A CN 201510778587 A CN201510778587 A CN 201510778587A CN 106708484 A CN106708484 A CN 106708484A
Authority
CN
China
Prior art keywords
page
control
region
information
created
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201510778587.3A
Other languages
English (en)
Other versions
CN106708484B (zh
Inventor
王瑞
沙彦魁
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Cainiao Smart Logistics Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201510778587.3A priority Critical patent/CN106708484B/zh
Publication of CN106708484A publication Critical patent/CN106708484A/zh
Application granted granted Critical
Publication of CN106708484B publication Critical patent/CN106708484B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • Stored Programmes (AREA)
  • Document Processing Apparatus (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供了一种建立页面的方法和装置,其中方法包括:接收到用户的页面创建指令后,获取页面模板信息,所述页面模板信息包括可创建的区域信息和各区域可创建的控件信息;获取用户从所述可创建的区域信息中选择的区域信息,依据选择的区域信息创建区域;获取用户从所创建区域可创建的控件信息中选择的控件信息,依据选择的控件信息在对应区域中创建控件。通过本发明,开发人员能够快速创建设计统一性较高的页面,并且即便没有专业的UI设计经验,也能够方便快速地完成页面创建。

Description

一种建立页面的方法和装置
【技术领域】
本发明涉及计算机应用技术领域,特别涉及一种建立页面的方法和装置。
【背景技术】
在开发网站系统时,常常面临几十到几百的网页需要开发,对于普通开发人员来说,由于对前端的知识不够了解,在写页面时感到困难重重。而对于前端开发人员来说,大量相似页面的开发,又浪费太多的开发时间,急需一种能够提高开发效率的页面可发工具。
目前页面存在一个可视化的页面开发工具,在该开发工具中,通常是提供一个设计面板和控件库,用户可自由的将控件拖入设计面板的任何地方,从而完成页面的创建。
然而,如果该页面开发工具由非UI(用户界面)专业的开发人员使用,由于其对UI设计的知识和经验欠缺,会导致页面的交互设计很差。即便该页面开发工具由UI设计专业的开发人员使用,由于该页面开发工具是控件粒度的设计,自由度过大,设计出的页面差异度可能很大,UI设计的统一性不能保证,对于同一个web系统而言,千变万化的UI设计显然十分凌乱,对于页面的使用者来说体验很差。
【发明内容】
有鉴于此,本发明提供了一种建立页面的方法和装置,以便开发人员能够快速创建设计统一性较高的页面。
具体技术方案如下:
本发明提供了一种建立页面的方法,其特征在于,该方法包括:
接收到用户的页面创建指令后,获取页面模板信息,所述页面模板信息包括可创建的区域信息和各区域可创建的控件信息;
获取用户从所述可创建的区域信息中选择的区域信息,依据选择的区域信息创建区域;
获取用户从所创建区域可创建的控件信息中选择的控件信息,依据选择的控件信息在对应区域中创建控件。
根据本发明一优选实施方式,所述可创建的区域信息包括区域名称,或者进一步包括区域属性和各区域之间的顺序中至少一种。
根据本发明一优选实施方式,所述页面创建指令包含页面类型信息;
所述获取页面模板信息包括:获取所述页面类型对应的页面模板信息。
根据本发明一优选实施方式,该方法还包括:
预先收集各页面类型的页面UI信息;
利用收集的各页面类型的页面UI信息,建立各页面类型对应的页面模板。
根据本发明一优选实施方式,在建立各页面类型对应的页面模板时,分别针对各页面类型执行:
预先确定该页面类型的各区域的位置范围;
统计针对该页面类型收集的各控件的出现数量和出现位置;
选择各区域的位置范围中出现数量满足预设数量要求的控件,分别作为各区域可创建的控件;
基于各区域可创建的控件在各区域中的出现位置,分别确定各区域可创建的控件在对应区域中的位置。
根据本发明一优选实施方式,在建立各页面类型对应的页面模板时,分别针对各页面类型执行:
统计针对该页面类型收集的各控件的出现数量和出现位置;
选择页面中出现数量满足预设数量要求的控件;
基于选择出的控件的出现位置,划分该页面类型的区域并确定各区域可创建的控件信息。
根据本发明一优选实施方式,所述依据选择的区域信息创建区域包括:
依据用户从所述可创建的区域信息中选择的区域信息,确定所创建页面包含的区域名称、区域属性和区域顺序;
依据确定的区域名称、区域属性和区域顺序,创建区域实例;
对创建的区域实例进行渲染。
根据本发明一优选实施方式,该方法还包括:
接收到用户的区域修改指令后,获取页面模板信息;
获取用户修改后的区域信息,依据修改后的区域信息重新创建区域。
根据本发明一优选实施方式,在所述获取页面模板信息之后,还包括:
依据所述页面模板信息向用户返回区域配置界面,以便用户在所述区域配置界面选择或修改区域信息。
根据本发明一优选实施方式,在所述创建区域之后,还包括:
依据所创建区域向用户返回控件配置界面,其中所述控件配置界面包含所创建区域可创建的控件信息,以便用户在所述控件配置界面选择控件信息。
根据本发明一优选实施方式,所述依据选择的控件信息在对应区域中创建控件包括:
依据用户从所创建区域可创建的控件信息中选择的控件信息,确定所创建区域的控件名称和控件属性;
依据确定的控件名称和控件属性,针对所创建区域分别创建控件实例;
对创建的控件实例进行渲染。
本发明提供了一种建立页面的装置,该装置包括:页面管理单元、模板管理单元、区域管理单元和控件管理单元;
所述页面管理单元,用于接收到用户的页面创建指令后,从所述模板管理单元获取页面模板信息;获取用户从可创建的区域信息中选择的区域信息并提供给所述区域管理单元;获取用户从所创建区域可创建的控件信息中选择的控件信息并提供给所述控件管理单元;
所述模板管理单元,用于维护页面模板信息,所述页面模板信息包括可创建的区域信息和各区域可创建的控件信息;
所述区域管理单元,用于依据所述页面管理单元提供的区域信息创建区域;
所述控件管理单元,用于依据所述页面管理单元提供的控件信息在对应区域中创建控件。
根据本发明一优选实施方式,所述可创建的区域信息包括区域名称,或者进一步包括区域属性、各区域之间的顺序以及各区域之间的依赖关系中至少一种。
根据本发明一优选实施方式,所述页面创建指令包含页面类型信息;
所述模板管理单元维护各页面类型对应的页面模板信息;
所述页面管理单元从所述模板管理单元获取所述页面创建指令包含的页面类型信息对应的页面模板信息。
根据本发明一优选实施方式,该装置还包括:
模板建立单元,用于预先收集各页面类型的页面UI信息;利用收集的各页面类型的页面UI信息,建立各页面类型对应的页面模板。
根据本发明一优选实施方式,所述模板建立单元在建立各页面类型对应的页面模板时,分别针对各页面类型执行:
预先确定该页面类型的各区域的位置范围;
统计针对该页面类型收集的各控件的出现数量和出现位置;
选择各区域的位置范围中出现数量满足预设数量要求的控件,分别作为各区域可创建的控件;
基于各区域可创建的控件在各区域中的出现位置,分别确定各区域可创建的控件在对应区域中的位置。
根据本发明一优选实施方式,所述模板建立单元在建立各页面类型对应的页面模板时,分别针对各页面类型执行:
统计针对该页面类型收集的各控件的出现数量和出现位置;
选择页面中出现数量满足预设数量要求的控件;
基于选择出的控件的出现位置,划分该页面类型的区域并确定各区域可创建的控件信息。
根据本发明一优选实施方式,所述区域管理单元,具体用于:
依据所述页面管理单元提供的区域信息,确定所创建页面包含的区域名称、区域属性和区域顺序;
依据确定的区域名称、区域属性和区域顺序,创建区域实例;
对创建的区域实例进行渲染。
根据本发明一优选实施方式,所述页面管理单元,还用于接收到用户的区域修改指令后,从所述模板管理单元获取页面模板信息;获取用户修改后的区域信息并提供给所述区域管理单元;
所述区域管理单元,还用于依据所述修改后的区域信息重新创建区域。
根据本发明一优选实施方式,所述页面管理单元在所述获取页面模板信息之后,还用于依据所述页面模板信息向用户返回区域配置界面,以便用户在所述区域配置界面选择或修改区域信息。
根据本发明一优选实施方式,所述页面管理单元在所述创建区域之后,还用于依据所创建区域向用户返回控件配置界面,其中所述控件配置界面包含所创建区域可创建的控件信息,以便用户在所述控件配置界面选择控件信息。
根据本发明一优选实施方式,所述控件管理单元,具体用于:
依据用户从所创建区域可创建的控件信息中选择的控件信息,确定所创建区域的控件名称和控件属性;
依据确定的控件名称和控件属性,针对所创建区域分别创建控件实例;
对创建的控件实例进行渲染。
由以上技术方案可以看出,通过本发明提供的方式,开发人员能够在预先创建的页面模板对区域信息以及控件信息的约束下,进行页面的创建,从而快速创建设计统一性较高的页面。
【附图说明】
图1为本发明实施例提供的建立页面的主要方法流程图;
图2a为本发明实施例提供的一种页面模板的建立方法流程图;
图2b为本发明实施例提供的另一种页面模板的建立方法流程图;
图3为本发明实施例提供的一种区域配置界面的示意图;
图4为本发明实施例提供的一种创建区域的方法流程图;
图5为本发明实施例提供的一种控件配置界面的示意图;
图6为本发明实施例提供的一种添加控件的界面示意图;
图7为本发明实施例提供的一种创建控件的方法流程图;
图8为本发明实施例提供的建立页面的装置结构图。
【具体实施方式】
为了使本发明的目的、技术方案和优点更加清楚,下面结合附图和具体实施例对本发明进行详细描述。
由于常见的页面类型存在一些统一的UI元素,基于这些统一的UI元素能够预先抽象出页面模板,其中页面模板可以对可创建的区域以及各区域可创建的控件进行约束,这些页面模板能够供开发人员在建立页面时使用。
为了方便对本发明进行理解,首先对本发明实施例中涉及的几个概念进行描述:
1)页面,是包含了一组区域的集合,即页面由一个或多于一个的区域构成。
2)区域,是页面中特定功能区块的抽象,例如搜索功能区块抽象为搜索区域,表格功能区块抽象为表格区域,导航功能区块抽象为导航区域,等等。每个区域中都可以包含一些具体的控件。
3)控件,是页面中用于完成特定功能的UI元素,例如下拉框、输入框、表格、按钮等等。
4)页面模板,是对页面内容的抽象,其定义了某一类型页面包含的区域、区域之间的顺序,以及各区域中包含的控件信息。通过页面模板可以对页面类型与区域之间的关系以及区域与控件之间的关系进行约束。
图1为本发明实施例提供的建立页面的主要方法流程图,如图1中所示,该方法可以包括以下步骤:
在101中,接收到用户的页面创建指令后,获取页面模板信息,其中页面模板信息可以包括可创建的区域信息和各区域可创建的控件信息。
在本发明实施例中,可以预先针对不同的页面类型分别建立页面模板,其中页面类型可以包括但不限于:查询类页面、表单类页面、展示类页面等。在本步骤中,用户在创建页面时,可以选择要创建的页面类型。因此本步骤中,页面开发工具接收到的页面创建指令中可以包括页面类型信息,相应地,获取该页面类型所对应的页面模板信息。
在本发明实施例中,可以预先收集各页面类型的页面UI信息,然后利用收集的各页面类型的页面UI信息,建立各页面类型对应的页面模板。图2a示出了一种页面模板的建立方式,如图2a中所示,页面模板的建立过程可以包括以下步骤:
在201a中,预先收集各页面类型的页面UI信息。
本步骤中页面UI信息可以包括控件名称、控件数量、控件位置等信息。在本实施例中可以预先搜集一些确定页面类型的页面样本,例如对查询类页面、表单类页面、展示类页面分别搜集100个页面作为样本,然后分别收集各页面类型的样本中的UI信息。
然后分别针对各页面类型执行以下步骤:
在202a中,预先确定该页面类型的各区域的位置范围。
通常一个页面类型经常包含或者必须包含的区域是有限的,因此可以通过人工划定的方式,预先针对各页面类型分别确定可创建的区域,以及各区域的位置范围。可以由有经验的设计人员依据经验状况预先确定,其中各区域的位置范围可以以栅格的方式体现。
在203a中,统计针对该页面类型收集的各控件的出现数量和出现位置。
在对各控件进行统计时,可以基于各控件的ID进行出现数量和出现位置的统计。
在204a中,选择各区域的位置范围中出现数量满足预设数量要求的控件,分别作为各区域可创建的控件。
可以选择各区域的位置范围中出现数量排在前N个的控件,N为预设的正整数;也可以选择各区域的位置范围中出现数量超过预设出现数量阈值的控件。
在205a中,基于各区域可创建的控件在各区域中的出现位置,分别确定各区域可创建的控件在对应区域中的位置。
在本步骤中,可以对各区域可创建的控件进行基于出现位置的聚类,然后依据聚类中心确定各控件在对应区域中的位置,该位置也可以采用栅格化的形式,例如将聚类中心所在的栅格作为控件的位置。
也可以由设计人员依据各区域可创建的控件在各区域中的出现位置,人工确定各区域可创建的控件在对应区域中的位置。
图2b示出了另一种页面模板的建立方式,如图2b中所示,可以包括以下步骤:
在201b中,预先收集各页面类型的页面UI信息。
同样,本步骤中页面UI信息可以包括控件名称、控件数量、控件位置等信息。在本实施例中可以预先搜集一些确定页面类型的页面样本,例如对查询类页面、表单类页面、展示类页面分别搜集100个页面作为样本,然后分别收集各页面类型的样本中的UI信息。
然后分别针对各页面类型执行以下步骤:
在202b中,统计针对该页面类型收集的各控件的出现数量和出现位置。
在203b中,选择页面中出现数量满足预设数量要求的控件。
本实施例与图2a中所示流程不同的是,图2a中是首先确定页面中的各区域以及各区域的位置范围,然后确定各区域中的控件信息。而本实施例是首先对页面上的控件进行统计,基于控件的统计结果再进一步划分各区域以及各区域的位置。
本步骤中,可以选择各页面中出现数量排在前M个的控件,M为预设的正整数;也可以选择各页面中出现数量超过预设出现次数阈值的控件。
在204b中,基于选择出的控件的出现位置,划分该页面类型的区域并确定各区域可创建的控件信息。
本步骤中,可以分别对选择出的各控件的出现位置进行聚类,由设计人员根据具有相似功能的各控件的出现位置聚类结果,进行区域的划分。然后,可以将各控件的聚类中心作为其在对应区域中的位置,或者由设计人员确定各控件的位置。
对于各页面类型的页面模板中,各区域的名称、位置以及各控件的名称、位置等可以由图2a或图2b所示的流程确定,对于各区域或控件的其他属性,例如区域是否可选、区域数量、控件数量等,可以由设计人员依据经验进行配置。
在本发明实施例中,可以将建立的页面模板信息配置于模板配置文件中。当接收到页面创建指令后,从模板配置文件中读取相应的页面模板信息。
页面模板信息包含的区域信息可以包括但不限于:区域名称、区域属性、各区域之间的顺序中的至少一种。也就是说,页面模板对该类型页面包含的区域进行了约束。其中区域属性可以是该区域是该种类型的页面中的必须区域还是可选区域,还可以包含该区域的可选择数量、位置等等信息。
页面类型可以包括但不限于查询类页面、表单类页面、展示类页面等。下面以查询类页面为例,对页面模板进行介绍。查询类页面的页面模板可以划分但不限于以下几个区域:导航区域、全局操作区域、搜索区域、表格区域、表格操作区域,等等。
其中导航区域用来指示页面标题或路径,可以指示其一,也可以综合设计。全局操作区域用来指示整体页面操作的区域,例如整体行业切换,整体业务线的切换等等。搜索区域用来实现搜索功能的区域,例如触发搜索的执行。表格区域用来展示表格的区域。表格操作区域用来实现对表格进行操作的区域,例如实现表格导出、表格选中、表格删除等。其中,对于一些区域可以进一步包含子区域,例如表格操作区可以分为:表格全局操作子区域、表格批量操作子区域、分页子区域等等。
在部分或者全部区域中可以包含一些控件。例如在搜索区域可以包含诸如输入框控件、搜索按钮控件、单选控件、多选控件等。在表格操作区域可以包含诸如全选控件、导出控件等。
在本发明实施例中,在接收到用户的页面创建指令后,可以将该页面模板信息中包含的可创建的区域信息以如图3中所示的区域配置界面提供给用户,供用户从中选择区域信息。如图3中所示,将可创建的区域名称以列表的形式提供,还可以提供各区域的数量选项。对于用户选择的区域,可以在该界面中以页面区域预览图的形式展现给用户,该预览图可以依据选择的各区域的名称和数量,以及页面模板中定义的区域属性(例如区域位置)、顺序等生成。另外,在该区域配置界面上还可以展现对各区域的相关描述信息,例如功能描述、是否为可选区域的描述、位置描述、依赖关系的描述等等。
在102中,获取用户从可创建的区域信息中选择的区域信息,依据选择的区域信息创建区域。
在本步骤中,用户可以在如图3中所示的界面上选择要创建的区域名称、数量等。另外,如果用户对各区域的顺序没有进行选择,那么可以依据模板中定义的各区域的顺序进行创建。除此之外,用户如果不想采用模板中定义的顺序或位置,可以修改区域的顺序或位置。例如用户可以在图3所示的预览图中对各区域进行拖拽,从而改变各区域的位置或顺序。当然也可以采用其他方式修改区域的顺序或位置,在此不再一一举例。
在依据选择的区域信息创建区域时,可以具体执行如图4中所示的流程,具体包括:
在401中,依据用户从可创建的区域信息中选择的区域信息,确定所创建页面包含的区域名称、区域属性和区域顺序。
其中区域属性可以包括区域数量、位置等信息。区域名称和区域数量可以为用户手工选择的。如果用户没有主动修改区域位置和区域顺序,则认为用户选择了页面模板所定义的区域位置和区域顺序;如果用户主动修改了区域位置和区域顺序,则采用用户修改后的区域位置和区域顺序。另外,区域数量可以由用户手工选择,也可以由页面模板定义。
在402中,依据确定的区域名称、区域属性和区域顺序,创建区域实例。
在本步骤中,可以以此对各区域进行实例创建,可以具体以各区域为类,创建各区域的实例。创建的实例中可以包含诸如区域名称、属性、位置、操作方法等对象。
在403中,对创建的区域实例进行渲染。
对创建的区域实例进行渲染后,就能够得到创建了各区域的页面,该阶段下创建的页面可以以如图5中所示的控件配置界面显示给用户。在图5中示出了所创建页面的雏形,示出了各区域的布局状况。另外,在图5所示的界面中,可以针对各区域提供创建控件的部件,例如在每个区域提供一个添加控件的按钮,当用户点击该按钮时,展现该区域可创建的控件信息,例如可创建的控件名称(或类型)。如图6所示,当用户点击区域B中“添加控件”的按钮时,弹出该区域B可创建的控件名称,包括文本输入框、下拉选择框、日期选择框,以供用户选择,如果用户从中选择了一个或多于一个的控件,则继续执行图1所示流程中的103。
另外,如果用户想要对创建的区域进行修改,则可以通过返回区域配置界面的入口,返回如图3所示的区域配置界面,修改选择的区域信息,依据修改后的区域信息重新创建区域。上述区域配置界面的入口可以采用多种形式,例如专门提供一个按钮,当该按钮被点击后返回区域配置界面;或者当页面上某区域被双击或长按后,返回区域配置界面;还可以采用其他方式,在此不再一一列举。
在103中,获取用户从所创建区域可创建的控件信息中选择的控件信息,依据选择的控件信息在对应区域中创建控件。
用户除了在所创建区域可创建的控件信息中选择控件名称之外,还可以对控件的属性进行设置,例如对控件的数量、位置等进行设置。例如,用户可以通过如图6中所示的控件属性配置面板对所选择控件的属性进行设置。当用户选择添加某个控件后,可以在控件属性配置面板中提供该控件的属性配置信息,例如可选的控件数量和位置等配置选项,以方便用户对属性进行设置。
在依据选择的控件信息在对应区域中创建控件时,可以按照图7中所示的流程执行。如图7中所示,可以具体执行以下步骤:
在701中,依据用户从所创建区域可创建的控件信息中选择的控件信息,确定所创建区域的控件名称和控件属性。
在702中,依据确定的控件名称和控件属性,针对所创建区域分别创建控件实例。
在本步骤中针对区域中的各控件分别创建实例,创建的实例中可以包含诸如控件名称、属性等对象。
在703中,对创建的控件实例进行渲染。
对创建的控件实例进行渲染后,就能够得到创建了各区域且区域中创建了控件的页面。
以上是对本发明所提供的方法进行的详细描述,下面对本发明提供的装置进行描述。
图8为本发明实施例提供的建立页面的装置结构图,如图8中所示,该装置可以包括:页面管理单元01、模板管理单元02、区域管理单元03和控件管理单元04,还可以进一步包括模板建立单元05。各组成单元的主要功能如下:
页面管理单元01在接收到用户的页面创建指令后,从模板管理单元02获取页面模板信息。
模板管理单元02负责维护页面模板信息,页面模板信息包括可创建的区域信息和各区域可创建的控件信息。具体地,模板管理单元02可以将页面模板信息配置于模板配置文件中。当接收到页面创建指令后,从模板配置文件中读取相应的页面模板信息。
页面模板信息包含的区域信息可以包括但不限于:区域名称、区域属性、各区域之间的顺序以及各区域之间的依赖关系中的至少一种。也就是说,页面模板对该页面包含的区域进行了约束。其中区域属性可以是该区域是该种类型的页面中的必须区域还是可选区域,还可以包含该区域的可选择数量、位置等等信息。页面模板包含的控件信息可以包括但不限于控件名称、控件属性。其中控件属性可以包括控件数量、控件位置等。
然后,页面管理单元01获取用户从可创建的区域信息中选择的区域信息并提供给区域管理单元03。由区域管理单元03依据页面管理单元01提供的区域信息创建区域。
区域管理单元03在创建区域时,可以具体执行:依据页面管理单元01提供的区域信息,确定所创建页面包含的区域名称、区域属性和区域顺序;依据确定的区域名称、区域属性和区域顺序,创建区域实例;对创建的区域实例进行渲染。
另外,如果用户希望对页面中创建的区域进行修改,则可以通过预设的特定操作,例如双击页面上的区域,或者长按页面上的区域等操作,来触发返回页面创建的界面。即页面管理单元01接收到用户的区域修改指令后,从模板管理单元02获取页面模板信息。用户可以界面上对区域信息进行修改,即页面管理单元01在获取用户修改后的区域信息并提供给区域管理单元03。区域管理单元03依据修改后的区域信息重新创建区域。
页面管理单元01在获取页面模板信息之后,可以依据页面模板信息向用户返回区域配置界面,例如图3中所示的界面,用户可以在该区域配置界面选择或修改区域信息。
另外,页面管理单元01可以在创建区域之后,依据所创建区域向用户返回控件配置界面,例如图5所示的界面,其中该控件配置界面包含所创建区域可创建的控件信息,以便用户在该控件配置界面选择控件信息。
最后,页面管理单元01获取用户从所创建区域可创建的控件信息中选择的控件信息并提供给控件管理单元04。控件管理单元04依据页面管理单元01提供的控件信息在对应区域中创建控件。
具体地,控件管理单元04在创建控件时,可以执行:依据用户从所创建区域可创建的控件信息中选择的控件信息,确定所创建区域的控件名称和控件属性;依据确定的控件名称和控件属性,针对所创建区域分别创建控件实例;对创建的控件实例进行渲染。
优选地,本发明可以预先针对不同的页面类型分别建立页面模板,即模板管理单元02维护有各页面类型对应的页面模板信息。用户在创建页面时,可以选择具体的页面类型,相应地,页面管理单元01接收到的页面创建指令包含页面类型信息,然后页面管理单元01从模板管理单元02获取页面创建指令包含的页面类型信息对应的页面模板信息。
模板建立单元05预先收集各页面类型的页面UI信息;利用收集的各页面类型的页面UI信息,建立各页面类型对应的页面模板。
模板建立单元05在建立各页面类型对应的页面模板时,可以分别针对各页面类型执行:
预先确定该页面类型的各区域的位置范围;
统计针对该页面类型收集的各控件的出现数量和出现位置;
选择各区域的位置范围中出现数量满足预设数量要求的控件,分别作为各区域可创建的控件;
基于各区域可创建的控件在各区域中的出现位置,分别确定各区域可创建的控件在对应区域中的位置。
或者,模板建立单元05在建立各页面类型对应的页面模板时,分别针对各页面类型执行:
统计针对该页面类型收集的各控件的出现数量和出现位置;
选择页面中出现数量满足预设数量要求的控件;
基于选择出的控件的出现位置,划分该页面类型的区域并确定各区域可创建的控件信息。
由以上描述可以看出,本发明提供的方法和装置可以具备以下优点:
1)通过本发明提供的方式,开发人员能够在预先创建的页面模板对区域信息以及控件信息的约束下,进行页面的创建,从而快速创建设计统一性较高的页面。
2)通过网页模板对区域信息以及控件信息的约束,能够为用户提供可视化的界面帮助用户进行区域配置以及控件配置,即便没有专业的UI设计经验,也能够方便快速地完成页面创建。
在本发明所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用硬件加软件功能单元的形式实现。
上述以软件功能单元的形式实现的集成的单元,可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)或处理器(processor)执行本发明各个实施例所述方法的部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(Random Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅为本发明的较佳实施例而已,并不用以限制本发明,凡在本发明的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本发明保护的范围之内。

Claims (22)

1.一种建立页面的方法,其特征在于,该方法包括:
接收到用户的页面创建指令后,获取页面模板信息,所述页面模板信息包括可创建的区域信息和各区域可创建的控件信息;
获取用户从所述可创建的区域信息中选择的区域信息,依据选择的区域信息创建区域;
获取用户从所创建区域可创建的控件信息中选择的控件信息,依据选择的控件信息在对应区域中创建控件。
2.根据权利要求1所述的方法,其特征在于,所述可创建的区域信息包括区域名称,或者进一步包括区域属性和各区域之间的顺序中至少一种。
3.根据权利要求1所述的方法,其特征在于,所述页面创建指令包含页面类型信息;
所述获取页面模板信息包括:获取所述页面类型对应的页面模板信息。
4.根据权利要求3所述的方法,其特征在于,该方法还包括:
预先收集各页面类型的页面UI信息;
利用收集的各页面类型的页面UI信息,建立各页面类型对应的页面模板。
5.根据权利要求4所述的方法,其特征在于,在建立各页面类型对应的页面模板时,分别针对各页面类型执行:
预先确定该页面类型的各区域的位置范围;
统计针对该页面类型收集的各控件的出现数量和出现位置;
选择各区域的位置范围中出现数量满足预设数量要求的控件,分别作为各区域可创建的控件;
基于各区域可创建的控件在各区域中的出现位置,分别确定各区域可创建的控件在对应区域中的位置。
6.根据权利要求4所述的方法,其特征在于,在建立各页面类型对应的页面模板时,分别针对各页面类型执行:
统计针对该页面类型收集的各控件的出现数量和出现位置;
选择页面中出现数量满足预设数量要求的控件;
基于选择出的控件的出现位置,划分该页面类型的区域并确定各区域可创建的控件信息。
7.根据权利要求2所述的方法,其特征在于,所述依据选择的区域信息创建区域包括:
依据用户从所述可创建的区域信息中选择的区域信息,确定所创建页面包含的区域名称、区域属性和区域顺序;
依据确定的区域名称、区域属性和区域顺序,创建区域实例;
对创建的区域实例进行渲染。
8.根据权利要求1所述的方法,其特征在于,该方法还包括:
接收到用户的区域修改指令后,获取页面模板信息;
获取用户修改后的区域信息,依据修改后的区域信息重新创建区域。
9.根据权利要求1或8所述的方法,其特征在于,在所述获取页面模板信息之后,还包括:
依据所述页面模板信息向用户返回区域配置界面,以便用户在所述区域配置界面选择或修改区域信息。
10.根据权利要求1所述的方法,其特征在于,在所述创建区域之后,还包括:
依据所创建区域向用户返回控件配置界面,其中所述控件配置界面包含所创建区域可创建的控件信息,以便用户在所述控件配置界面选择控件信息。
11.根据权利要求1所述的方法,其特征在于,所述依据选择的控件信息在对应区域中创建控件包括:
依据用户从所创建区域可创建的控件信息中选择的控件信息,确定所创建区域的控件名称和控件属性;
依据确定的控件名称和控件属性,针对所创建区域分别创建控件实例;
对创建的控件实例进行渲染。
12.一种建立页面的装置,其特征在于,该装置包括:页面管理单元、模板管理单元、区域管理单元和控件管理单元;
所述页面管理单元,用于接收到用户的页面创建指令后,从所述模板管理单元获取页面模板信息;获取用户从可创建的区域信息中选择的区域信息并提供给所述区域管理单元;获取用户从所创建区域可创建的控件信息中选择的控件信息并提供给所述控件管理单元;
所述模板管理单元,用于维护页面模板信息,所述页面模板信息包括可创建的区域信息和各区域可创建的控件信息;
所述区域管理单元,用于依据所述页面管理单元提供的区域信息创建区域;
所述控件管理单元,用于依据所述页面管理单元提供的控件信息在对应区域中创建控件。
13.根据权利要求12所述的装置,其特征在于,所述可创建的区域信息包括区域名称,或者进一步包括区域属性、各区域之间的顺序以及各区域之间的依赖关系中至少一种。
14.根据权利要求12所述的装置,其特征在于,所述页面创建指令包含页面类型信息;
所述模板管理单元维护各页面类型对应的页面模板信息;
所述页面管理单元从所述模板管理单元获取所述页面创建指令包含的页面类型信息对应的页面模板信息。
15.根据权利要求14所述的装置,其特征在于,该装置还包括:
模板建立单元,用于预先收集各页面类型的页面UI信息;利用收集的各页面类型的页面UI信息,建立各页面类型对应的页面模板。
16.根据权利要求15所述的装置,其特征在于,所述模板建立单元在建立各页面类型对应的页面模板时,分别针对各页面类型执行:
预先确定该页面类型的各区域的位置范围;
统计针对该页面类型收集的各控件的出现数量和出现位置;
选择各区域的位置范围中出现数量满足预设数量要求的控件,分别作为各区域可创建的控件;
基于各区域可创建的控件在各区域中的出现位置,分别确定各区域可创建的控件在对应区域中的位置。
17.根据权利要求15所述的装置,其特征在于,所述模板建立单元在建立各页面类型对应的页面模板时,分别针对各页面类型执行:
统计针对该页面类型收集的各控件的出现数量和出现位置;
选择页面中出现数量满足预设数量要求的控件;
基于选择出的控件的出现位置,划分该页面类型的区域并确定各区域可创建的控件信息。
18.根据权利要求13所述的装置,其特征在于,所述区域管理单元,具体用于:
依据所述页面管理单元提供的区域信息,确定所创建页面包含的区域名称、区域属性和区域顺序;
依据确定的区域名称、区域属性和区域顺序,创建区域实例;
对创建的区域实例进行渲染。
19.根据权利要求12所述的装置,其特征在于,所述页面管理单元,还用于接收到用户的区域修改指令后,从所述模板管理单元获取页面模板信息;获取用户修改后的区域信息并提供给所述区域管理单元;
所述区域管理单元,还用于依据所述修改后的区域信息重新创建区域。
20.根据权利要求12或19所述的装置,其特征在于,所述页面管理单元在所述获取页面模板信息之后,还用于依据所述页面模板信息向用户返回区域配置界面,以便用户在所述区域配置界面选择或修改区域信息。
21.根据权利要求12所述的装置,其特征在于,所述页面管理单元在所述创建区域之后,还用于依据所创建区域向用户返回控件配置界面,其中所述控件配置界面包含所创建区域可创建的控件信息,以便用户在所述控件配置界面选择控件信息。
22.根据权利要求12所述的装置,其特征在于,所述控件管理单元,具体用于:
依据用户从所创建区域可创建的控件信息中选择的控件信息,确定所创建区域的控件名称和控件属性;
依据确定的控件名称和控件属性,针对所创建区域分别创建控件实例;
对创建的控件实例进行渲染。
CN201510778587.3A 2015-11-13 2015-11-13 一种建立页面的方法和装置 Active CN106708484B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510778587.3A CN106708484B (zh) 2015-11-13 2015-11-13 一种建立页面的方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510778587.3A CN106708484B (zh) 2015-11-13 2015-11-13 一种建立页面的方法和装置

Publications (2)

Publication Number Publication Date
CN106708484A true CN106708484A (zh) 2017-05-24
CN106708484B CN106708484B (zh) 2020-08-25

Family

ID=58931334

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510778587.3A Active CN106708484B (zh) 2015-11-13 2015-11-13 一种建立页面的方法和装置

Country Status (1)

Country Link
CN (1) CN106708484B (zh)

Cited By (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107506193A (zh) * 2017-08-18 2017-12-22 平安科技(深圳)有限公司 一种子系统页面的开发方法、存储介质和服务器
CN107832041A (zh) * 2017-11-01 2018-03-23 中国平安人寿保险股份有限公司 专题页面制作方法、装置、设备及可读存储介质
CN108415706A (zh) * 2018-03-14 2018-08-17 上海携程商务有限公司 可视化网页生成的方法、系统、设备及存储介质
CN108733369A (zh) * 2018-03-22 2018-11-02 厦门欣旅通科技有限公司 一种系统页面建立方法及装置
CN108958735A (zh) * 2018-07-16 2018-12-07 山东威尔数据股份有限公司 一种终端组件化应用的ui重构方法
CN109343851A (zh) * 2018-09-26 2019-02-15 中国平安人寿保险股份有限公司 页面生成方法、装置、计算机设备和存储介质
CN109376344A (zh) * 2018-09-03 2019-02-22 平安普惠企业管理有限公司 表单的生成方法及终端设备
CN111199457A (zh) * 2019-12-30 2020-05-26 上海移为通信技术股份有限公司 页面生成方法及装置
CN111435300A (zh) * 2019-01-15 2020-07-21 北大方正信息产业集团有限公司 web系统开发方法、装置、设备及存储介质
CN111723317A (zh) * 2019-03-22 2020-09-29 深圳Tcl新技术有限公司 一种页面动态处理方法、智能终端及存储介质
CN113779448A (zh) * 2020-08-10 2021-12-10 北京沃东天骏信息技术有限公司 一种页面处理方法和装置

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102087597A (zh) * 2011-02-14 2011-06-08 浪潮通信信息系统有限公司 一种基于j2ee和构件集的可视化开发平台
CN102880708A (zh) * 2012-09-28 2013-01-16 用友软件股份有限公司 用于实现html页面的可视化设计的系统和方法
CN104391703A (zh) * 2014-11-21 2015-03-04 用友软件股份有限公司 快速完成页面布局的装置和方法

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102087597A (zh) * 2011-02-14 2011-06-08 浪潮通信信息系统有限公司 一种基于j2ee和构件集的可视化开发平台
CN102880708A (zh) * 2012-09-28 2013-01-16 用友软件股份有限公司 用于实现html页面的可视化设计的系统和方法
CN104391703A (zh) * 2014-11-21 2015-03-04 用友软件股份有限公司 快速完成页面布局的装置和方法

Cited By (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107506193B (zh) * 2017-08-18 2020-05-22 平安科技(深圳)有限公司 一种子系统页面的开发方法、存储介质和服务器
CN107506193A (zh) * 2017-08-18 2017-12-22 平安科技(深圳)有限公司 一种子系统页面的开发方法、存储介质和服务器
WO2019033520A1 (zh) * 2017-08-18 2019-02-21 平安科技(深圳)有限公司 一种子系统页面的开发方法、存储介质和服务器
CN107832041A (zh) * 2017-11-01 2018-03-23 中国平安人寿保险股份有限公司 专题页面制作方法、装置、设备及可读存储介质
CN107832041B (zh) * 2017-11-01 2020-10-30 中国平安人寿保险股份有限公司 专题页面制作方法、装置、设备及可读存储介质
CN108415706A (zh) * 2018-03-14 2018-08-17 上海携程商务有限公司 可视化网页生成的方法、系统、设备及存储介质
CN108415706B (zh) * 2018-03-14 2021-07-06 上海携程商务有限公司 可视化网页生成的方法、系统、设备及存储介质
CN108733369A (zh) * 2018-03-22 2018-11-02 厦门欣旅通科技有限公司 一种系统页面建立方法及装置
CN108958735A (zh) * 2018-07-16 2018-12-07 山东威尔数据股份有限公司 一种终端组件化应用的ui重构方法
CN109376344A (zh) * 2018-09-03 2019-02-22 平安普惠企业管理有限公司 表单的生成方法及终端设备
CN109343851A (zh) * 2018-09-26 2019-02-15 中国平安人寿保险股份有限公司 页面生成方法、装置、计算机设备和存储介质
CN111435300A (zh) * 2019-01-15 2020-07-21 北大方正信息产业集团有限公司 web系统开发方法、装置、设备及存储介质
CN111723317A (zh) * 2019-03-22 2020-09-29 深圳Tcl新技术有限公司 一种页面动态处理方法、智能终端及存储介质
CN111199457A (zh) * 2019-12-30 2020-05-26 上海移为通信技术股份有限公司 页面生成方法及装置
CN113779448A (zh) * 2020-08-10 2021-12-10 北京沃东天骏信息技术有限公司 一种页面处理方法和装置

Also Published As

Publication number Publication date
CN106708484B (zh) 2020-08-25

Similar Documents

Publication Publication Date Title
CN106708484A (zh) 一种建立页面的方法和装置
US20110219321A1 (en) Web-based control using integrated control interface having dynamic hit zones
CN103885943B (zh) 网页中的下拉列表框控件的实现方法
CN108491205A (zh) 一种基于组件树的前端网页开发方法及系统
CN108664245A (zh) 一种基于json自描述结构的网页界面生成方法及装置
CN113094037A (zh) 表单和工作流的交互方法、开发平台、设备及存储介质
JP7044893B2 (ja) 業務分析方法
JP6031535B2 (ja) 多様な形態のカードを利用してサイトの製作を支援するサイト管理方法およびシステム
CN103677802B (zh) 用于分析的改进的消费模型的系统和方法
US7921366B2 (en) Information processing apparatus, assignment method and display method of information processing apparatus, and computer-readable program product
EP3667493B1 (en) A method for a software development system
CN105094736B (zh) 显示控制方法、显示控制装置和电子设备
CN107291736A (zh) 一种编辑页面的方法和系统
Lafreniere et al. Characterizing large-scale use of a direct manipulation application in the wild
CN103677510A (zh) 图标排列方法和装置
JP5496119B2 (ja) プログラマブル表示器用画面データ編集装置
CN106201184A (zh) 一种sns消息的编辑方法、装置和终端
CN110020132B (zh) 关键词推荐方法、装置、计算设备及存储介质
JP6032250B2 (ja) プログラム生成装置、情報処理装置、制御方法、およびプログラム
JP4885651B2 (ja) 処理装置、処理装置における制御方法、プログラムおよび記録媒体
KR20170045325A (ko) 입력방법 기반의 웹사이트 정보 제공방법 및 장치
JP6251860B2 (ja) 情報管理装置並びにファイル管理方法
JP4640861B2 (ja) 検索処理方法及びプログラム
Bainbridge et al. Interactive context-aware user-driven metadata correction in digital libraries
CN104216626A (zh) 一种图像获取方法及电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
TA01 Transfer of patent application right
TA01 Transfer of patent application right

Effective date of registration: 20180411

Address after: Four story 847 mailbox of the capital mansion of Cayman Islands, Cayman Islands, Cayman

Applicant after: CAINIAO SMART LOGISTICS HOLDING Ltd.

Address before: Cayman Islands Grand Cayman capital building a four storey No. 847 mailbox

Applicant before: ALIBABA GROUP HOLDING Ltd.

GR01 Patent grant
GR01 Patent grant