CN104484171B - 终端界面设计系统、方法及相关设备 - Google Patents

Abstract

本发明公开了一种终端界面设计系统、方法及相关设备，以解决现有的终端界面开发技术需要针对用户终端的类型分别开发，效率低下等问题。本发明一些可行的实施方式中，系统可包括：控件库，用于提供界面控件；编辑器，用于提供可视化编辑界面，根据编辑指令从所述控件库中提取界面控件至所述可视化编辑界面，并设置提取的所述界面控件的属性，形成所需要的终端界面；代码生成器，用于根据所述编辑器中呈现的终端界面，以通用代码格式生成相应的界面描述文件；存储器，用于保存所述界面描述文件；以及，适配器，用于提供适配库，所述适配库用于获取并解析所述界面描述文件，生成与用户终端适配的、其它代码格式的界面程序代码。

Description

终端界面设计系统、方法及相关设备

技术领域

本发明涉及网络技术领域，具体涉及一种终端界面设计系统、方法及相关设备。

背景技术

用户终端的类型越来越多，包括PC(personal computer，个人计算机)、手机、平板、智能电视等。一个业务的开发需要适配众多用户终端，而每种用户终端的终端界面开发技术不尽相同，需要针对不同用户终端招聘不同的技术人员进行适配开发，耗费大量时间、金钱，效率也相当低下。

发明内容

本发明实施例提供一种终端界面设计系统、方法及相关设备，以解决现有的终端界面开发技术需要针对用户终端的类型分别开发，效率低下等问题。

本发明第一方面提供一种终端界面设计方法，包括：

控件库，用于提供界面控件；

编辑器，用于提供可视化编辑界面，根据编辑指令从所述控件库中提取界面控件至所述可视化编辑界面，并设置提取的所述界面控件的属性，形成所需要的终端界面；

代码生成器，用于根据所述编辑器中呈现的终端界面，以通用代码格式生成相应的界面描述文件；

存储器，用于保存所述界面描述文件；以及，

适配器，用于提供适配库，所述适配库用于获取并解析所述界面描述文件，生成与用户终端适配的、其它代码格式的界面程序代码。

本发明第二方面提供一种终端界面设计系统，包括：

提供可视化编辑界面，根据编辑指令从所述控件库中提取界面控件至所述可视化编辑界面，并设置提取的所述界面控件的属性，形成所需要的终端界面；

根据所述编辑器中呈现的终端界面，以通用代码格式生成相应的界面描述文件，并保存所述界面描述文件；以及，

提供适配库，所述适配库用于获取并解析所述界面描述文件，生成与用户终端适配的、其它代码格式的界面程序代码。

本发明第三方面提供一种用户终端，包括：

发送模块，用于发送终端界面访问请求给服务器；

接收模块，用于接收所述服务器返回的通用代码格式的界面描述文件；

适配库模块，用于解析所述界面描述文件，生成与所述用户终端适配的、其它代码格式的界面程序代码；

显示模块，用于根据所述界面程序代码显示相应的终端界面。

本发明第四方面提供一种服务器，包括：

接收模块，用于接收用户终端发送的终端界面访问请求；

获取模块，用于根据所述终端界面访问请求提取相应的通用代码格式的界面描述文件；

识别模块，用于识别所述用户终端的类型；

适配库模块，用于根据所述用户终端的类型，解析所述界面描述文件，生成与所述用户终端适配的、其它代码格式的界面程序代码；

发送模块，用于发送所述其它代码格式的界面程序代码给所述用户终端。

由上可见，本发明实施例通过采用上述技术方案，使得，开发终端界面时，不需要考虑用户终端的类型，只需要生成通用代码格式的界面描述文件即可；用户终端可利用适配库将通用代码格式的界面描述文件转换为与用户终端适配的界面程序代码，最终呈现出相应的终端界面；从而取得以下技术效果：

1、在可视化编辑界面中通过编辑控件形成终端界面，所见即所得，不需要直接写代码，因而降低了开发难度，使得普通技术人员也可以开发终端界面。

2、由于可利用适配库进行代码转换，不需要针对每一种用户终端分别开发终端界面，只需要根据形成的终端界面生成一种通用代码格式的界面描述文件即可，简化了开发操作，提高了开发效率。

3、本发明终端界面设计系统能兼容多种主流平台的界面开发，所兼容的平台数量取决于适配库的开发数量。

附图说明

为了更清楚地说明本发明实施例技术方案，下面将对实施例和现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1是本发明实施例提供的一种终端界面设计系统的结构示意图；

图2是本发明实施例终端界面设计系统的一个逻辑结构及原理示意图；

图3是本发明实施例提供的一种终端界面设计方法的流程示意图；

图4是本发明实施例提供的一种用户终端的结构示意图；

图5是本发明实施例提供的一种服务器的结构示意图。

具体实施方式

本发明实施例提供一种终端界面设计系统、方法及相关设备，以解决现有的终端界面开发技术需要针对用户终端的类型分别开发，效率低下等问题。

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

下面通过具体实施例，分别进行详细的说明。

实施例一、

请参考图1，本发明实施例提供一种终端界面设计系统，可包括：

控件库101，用于提供界面控件；

编辑器102，用于提供可视化编辑界面，根据编辑指令从所述控件库中提取界面控件至所述可视化编辑界面，并设置提取的所述界面控件的属性，形成所需要的终端界面；

代码生成器103，用于根据所述编辑器102中呈现的终端界面，以通用代码格式生成相应的界面描述文件；

存储器104，用于保存所述界面描述文件；以及，

适配器105，用于提供适配库，所述适配库用于获取并解析所述界面描述文件，生成与用户终端适配的、其它代码格式的界面程序代码。

请参考图2，是本发明实施例终端界面设计系统的一个逻辑结构及原理示意图。下面，结合图1和图2，对本发明做进一步详细说明：

本发明实施例中，所述控件库101中可存储多种常用类型的界面控件，例如可包括按钮、选择框、文本框、输入框、图片、列表、跑马条、视频框等。

所述编辑器102可提供可视化编辑界面，用户可以在可视化编辑界面中新建终端界面，可以从所述控件库中将需要的界面控件拖曳至新建的终端界面中，摆放在合适位置，可以选中任一个界面控件，编辑其控件属性，控件属性可包括：位置、尺寸、内容等等。所述可视化编辑界面可利用javascript脚本技术，来实现拖拽和属性编辑功能。编辑完毕，编辑器102的可视化编辑界面中，呈现出最终需要的终端界面。所说的终端界面具体可以是网页，游戏页面等。

完成编辑后，用户可指令代码生成器103执行代码生成步骤，代码生成器103根据编辑器最终状态信息，即编辑器102中最终呈现的终端界面，以通用代码格式生成相应的界面描述文件。所说的通用代码格式具体可以是JSON或XML等通用型描述格式。所说的界面描述文件用于描述所述终端界面的配置信息，包括其中的界面控件的控件属性信息等。

存储器104可将生成的通用代码格式的界面描述文件保存到数据库或文本文件中。这些界面描述文件最终可提供给用于提供网络服务的网页服务器或者其它服务器，以待用户终端访问。

本发明实施例系统生成的是通用代码格式的界面描述文件。为了能够适用于不同类型的用户终端，本发明实施例系统的适配器还提供适配库，适配库用于提供代码转换功能，可解析所述界面描述文件，生成与用户终端适配的、其它代码格式的界面程序代码。

本发明实施例中，所说的用户终端可以是计算机设备或者安卓设备或者苹果IOS设备，所述的安卓设备或苹果IOS设备具体可以是手机或平板电脑或Ipad等。举例来说，针对采用视窗(Windows)操作系统的计算机设备，适配库可具体用于生成与计算机设备匹配的、html或者jsp或者php或者python或者ruby格式的界面程序代码。针对安卓设备，可生成与安卓设备匹配的、java格式的界面程序代码。针对苹果IOS设备，可生成与苹果IOS设备匹配的、object-c格式的界面程序代码。

本发明实施例中，适配库可提供给提供网络服务的服务器，或者提供给用户终端。以便服务器或者用户终端将需要转换的通用格式的界面描述文件转换成所需要的其它代码格式的界面程序代码。界面程序代码可在用户终端中转换为界面元素显示出来，最终呈现为终端界面。

以将适配库配置在服务器为例。

服务器可以在接收用户终端发送的终端界面访问请求后，根据所述终端界面访问请求提取相应的通用代码格式的界面描述文件；并识别所述用户终端的类型；利用适配库，根据所述用户终端的类型，解析所述界面描述文件，生成与所述用户终端适配的、其它代码格式的界面程序代码；将所述其它代码格式的界面程序代码发送给所述用户终端。

用户终端在发送终端界面访问请求后，可收到服务器返回的所述界面程序代码，转化为用户终端能识别的界面元素，实时呈现为终端界面。

以将适配库配置在用户终端为例。

服务器可以在接收用户终端发送的终端界面访问请求后，根据所述终端界面访问请求提取相应的通用代码格式的界面描述文件；将所述通用代码格式的界面描述文件发送给所述用户终端。

用户终端在发送终端界面访问请求给服务器之后，可接收所述服务器返回的通用代码格式的界面描述文件；然后，利用适配库解析所述界面描述文件，生成与所述用户终端适配的、其它代码格式的界面程序代码；根据所述界面程序代码，转换得到用户终端能识别的界面元素，显示相应的终端界面。

其中，所述界面描述文件可以是JSON或者XML格式的界面描述文件。所述界面程序代码可以是与计算机设备匹配的、html或者jsp或者php或者python或者ruby格式的界面程序代码；或者，可以是与安卓设备匹配的、java格式的界面程序代码；或者，可以是与苹果IOS设备匹配的、object-c格式的界面程序代码。

由上可见，本发明实施例中，在可视化编辑界面完成终端界面制作后，将代码生成过程分成两个阶段来实现：

第一阶段，生成通用代码格式的界面描述文件。界面描述文件是由格式化数据描述的终端界面的配置信息，包括对每一种控件的属性的详细定义。后续，将通用代码格式的界面描述文件作为提供不同用户终端的统一数据源，可确保不同用户终端平台的数据源的一致性。一般的，一个终端界面对应一个界面描述文件。界面描述文件可以是通用代码格式的文本文件，例如JSON或XML格式的文本文件。界面描述文件可包括终端界面的属性信息，以及所包括的各类界面控件的属性信息，界面描述文件中的属性信息与实际的用户终端平台无关，可视为对终端界面及其界面控件的客观信息描述。

第二阶段，通过利用适配库进行转换，由界面描述文件生成适应于用户终端平台的界面元素，并在终端展现出终端界面。

适配库与各类用户终端平台强相关。适配库可运行在用户终端上，用户终端访问终端界面时，用户终端可调用适配库，由适配库获取相应的界面描述文件，解析并生成本用户终端适配的界面程序代码，转化为本用户终端能识别的界面元素，进行实时呈现，显示出终端界面。其中，交互功能可统一通过控件的action属性调用相应接口完成。

本发明一个应用场景中，例如一种利用JSON格式代码语言描述的界面描述文件，可如下所示：

本发明一个应用场景中，例如一种利用XML格式代码语言描述的界面描述文件，可如下所示：

需要说明的是，上述两种格式的界面描述文件只是示例，不用于限制本发明。实际应用中，界面描述文件的具体表现和封装模式及命名规则等可以采用各种不同的方式。

由上可见，本发明实施例提供了一种终端界面设计系统，采用该系统，开发终端界面时，不需要考虑用户终端的类型，只需要生成通用代码格式的界面描述文件即可；用户终端可利用适配库将通用代码格式的界面描述文件转换为与用户终端适配的界面程序代码，最终呈现出相应的终端界面；从而取得以下技术效果：

1、在可视化编辑界面中通过编辑控件形成终端界面，所见即所得，不需要开发人员直接写代码，因此，降低了开发难度，使得普通技术人员也可以开发终端界面。

2、由于可利用适配库进行代码转换，不需要针对每一种用户终端分别开发终端界面，只需要根据形成的终端界面生成一种通用代码格式的界面描述文件即可，简化了开发操作，提高了开发效率。

3、本发明终端界面设计系统能兼容多种主流平台的界面开发，所兼容的平台数量取决于适配库的开发数量。

可见，本发明终端界面设计系统使用一种开发技术，即可兼容不同的开发平台，提高了工作效率，降低开发成本，解决了现有开发系统只能适配单个平台的问题。

实施例二、

请参考图3，本发明实施例提供一种终端界面设计方法，可包括：

301、提供可视化编辑界面，根据编辑指令从所述控件库中提取界面控件至所述可视化编辑界面，并设置提取的所述界面控件的属性，形成所需要的终端界面；

302、根据所述编辑器中呈现的终端界面，以通用代码格式生成相应的界面描述文件，并保存所述界面描述文件；以及，

303、提供适配库，所述适配库用于获取并解析所述界面描述文件，生成与用户终端适配的、其它代码格式的界面程序代码。

本发明一些实施例中，所述以通用代码格式生成相应的界面描述文件可包括：生成JSON或者XML格式的界面描述文件。

本发明一些实施例中，所述保存所述界面描述文件可包括：将所述界面描述文件保存在数据库或者文本文件中。

本发明一些实施例中，所述生成与用户终端适配的、其它代码格式的界面程序代码可包括：生成与计算机设备匹配的、html或者jsp或者php或者python或者ruby格式的界面程序代码；或者，生成与安卓设备匹配的、java格式的界面程序代码；或者，生成与苹果IOS设备匹配的、object-c格式的界面程序代码

由上可见，本发明实施例提供了一种终端界面设计方法，采用该方法，开发终端界面时，不需要考虑用户终端的类型，只需要生成通用代码格式的界面描述文件即可；用户终端可利用适配库将通用代码格式的界面描述文件转换为与用户终端适配的界面程序代码，最终呈现出相应的终端界面；从而取得以下技术效果：

1、在可视化编辑界面中通过编辑控件形成终端界面，所见即所得，不需要开发人员直接写代码，因此，降低了开发难度，使得普通技术人员也可以开发终端界面。

2、由于可利用适配库进行代码转换，不需要针对每一种用户终端分别开发终端界面，只需要根据形成的终端界面生成一种通用代码格式的界面描述文件即可，简化了开发操作，提高了开发效率。

3、本发明终端界面设计系统能兼容多种主流平台的界面开发，所兼容的平台数量取决于适配库的开发数量。

可见，本发明终端界面设计系统使用一种开发技术，即可兼容不同的开发平台，提高了工作效率，降低开发成本，解决了现有开发系统只能适配单个平台的问题。

实施例三、

请参考图4，本发明实施例提供一种用户终端，可包括：

发送模块401，用于发送终端界面访问请求给服务器；

接收模块402，用于接收所述服务器返回的通用代码格式的界面描述文件；

适配库模块403，用于解析所述界面描述文件，生成与所述用户终端适配的、其它代码格式的界面程序代码；

显示模块404，用于根据所述界面程序代码显示相应的终端界面。

本发明一些实施例中，所述界面描述文件是JSON或者XML格式的界面描述文件；所述界面程序代码是与计算机设备匹配的、html或者jsp或者php或者python或者ruby格式的界面程序代码；或者，是与安卓设备匹配的、java格式的界面程序代码；或者，是与苹果IOS设备匹配的、object-c格式的界面程序代码。

由上可见，本发明实施例提供了一种用户终端，该用户终端可利用适配库将通用代码格式的界面描述文件转换为与用户终端适配的界面程序代码，最终呈现出相应的终端界面；从而取得以下技术效果：

由于可利用适配库进行代码转换，因而进行界面开发时，不需要针对每一种用户终端分别开发终端界面，只需要根据形成的终端界面生成一种通用代码格式的界面描述文件即可，简化了开发操作，提高了开发效率。

实施例四、

请参考图5，本发明实施例提供一种服务器，可包括：

接收模块501，用于接收用户终端发送的终端界面访问请求；

获取模块502，用于根据所述终端界面访问请求提取相应的通用代码格式的界面描述文件；

识别模块503，用于识别所述用户终端的类型；

适配库模块504，用于根据所述用户终端的类型，解析所述界面描述文件，生成与所述用户终端适配的、其它代码格式的界面程序代码；

发送模块505，用于发送所述其它代码格式的界面程序代码给所述用户终端。

本发明一些实施例中，所述界面描述文件是JSON或者XML格式的界面描述文件；所述界面程序代码是与计算机设备匹配的、html或者jsp或者php或者python或者ruby格式的界面程序代码；或者，是与安卓设备匹配的、java格式的界面程序代码；或者，是与苹果IOS设备匹配的、object-c格式的界面程序代码。

由上可见，本发明实施例提供了一种服务器，该服务器可利用适配库将通用代码格式的界面描述文件转换为与用户终端适配的界面程序代码，最终呈现出相应的终端界面；从而取得以下技术效果：

由于可利用适配库进行代码转换，因而进行界面开发时，不需要针对每一种用户终端分别开发终端界面，只需要根据形成的终端界面生成一种通用代码格式的界面描述文件即可，简化了开发操作，提高了开发效率。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详细描述的部分，可以参见其它实施例的相关描述。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述动作顺序的限制，因为依据本发明，某些步骤可以采用其它顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

以上对本发明实施例所提供的终端界面设计系统、方法及相关设备进行了详细介绍，但以上实施例的说明只是用于帮助理解本发明的方法及其核心思想，不应理解为对本发明的限制。本技术领域的技术人员，依据本发明的思想，在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。

Claims (8)

1.一种终端界面设计系统，其特征在于，包括：

控件库，用于提供界面控件；

编辑器，用于提供可视化编辑界面，根据编辑指令从所述控件库中提取界面控件至所述可视化编辑界面，并设置提取的所述界面控件的属性，形成所需要的终端界面；

代码生成器，用于根据所述编辑器中呈现的终端界面，以通用代码格式生成相应的界面描述文件，所述界面描述文件作为提供给不同用户终端的统一数据源；

存储器，用于保存所述界面描述文件；以及，

适配器，用于提供适配库，所述适配库用于获取并解析所述界面描述文件，生成与用户终端适配的、其它代码格式的界面程序代码；所述适配库具体用于生成与计算机设备匹配的、html或者jsp或者php或者python或者ruby格式的界面程序代码；或者，生成与安卓设备匹配的、java格式的界面程序代码；或者，生成与苹果IOS设备匹配的、object-c格式的界面程序代码。

2.根据权利要求1所述的系统，其特征在于，

所述代码生成器具体用于生成JSON或者XML格式的界面描述文件。

3.根据权利要求1所述的系统，其特征在于，

所述存储器具体用于将所述界面描述文件保存在数据库或者文本文件中。

4.一种终端界面设计方法，其特征在于，包括：

提供可视化编辑界面，根据编辑指令从控件库中提取界面控件至所述可视化编辑界面，并设置提取的所述界面控件的属性，形成所需要的终端界面；

根据编辑器中呈现的终端界面，以通用代码格式生成相应的界面描述文件，并保存所述界面描述文件，所述界面描述文件作为提供给不同用户终端的统一数据源；以及，

提供适配库，所述适配库用于获取并解析所述界面描述文件，生成与用户终端适配的、其它代码格式的界面程序代码；所述生成与用户终端适配的、其它代码格式的界面程序代码包括：生成与计算机设备匹配的、html或者jsp或者php或者python或者ruby格式的界面程序代码；或者，生成与安卓设备匹配的、java格式的界面程序代码；或者，生成与苹果IOS设备匹配的、object-c格式的界面程序代码。

5.根据权利要求4所述的方法，其特征在于，所述以通用代码格式生成相应的界面描述文件包括：

生成JSON或者XML格式的界面描述文件。

6.根据权利要求4所述的方法，其特征在于，所述保存所述界面描述文件包括：

将所述界面描述文件保存在数据库或者文本文件中。

7.一种用户终端，其特征在于，包括：

发送模块，用于发送终端界面访问请求给服务器；

接收模块，用于接收所述服务器返回的通用代码格式的界面描述文件，所述界面描述文件作为提供给不同用户终端的统一数据源；

适配库模块，用于解析所述界面描述文件，生成与所述用户终端适配的、其它代码格式的界面程序代码；

显示模块，用于根据所述界面程序代码显示相应的终端界面；

所述界面描述文件是JSON或者XML格式的界面描述文件；

所述界面程序代码是与计算机设备匹配的、html或者jsp或者php或者python或者ruby格式的界面程序代码；或者，是与安卓设备匹配的、java格式的界面程序代码；或者，是与苹果IOS设备匹配的、object-c格式的界面程序代码。

8.一种服务器，其特征在于，包括：

接收模块，用于接收用户终端发送的终端界面访问请求；

获取模块，用于根据所述终端界面访问请求提取相应的通用代码格式的界面描述文件，所述界面描述文件作为提供给不同用户终端的统一数据源；

识别模块，用于识别所述用户终端的类型；

适配库模块，用于根据所述用户终端的类型，解析所述界面描述文件，生成与所述用户终端适配的、其它代码格式的界面程序代码；

发送模块，用于发送所述其它代码格式的界面程序代码给所述用户终端；

所述界面描述文件是JSON或者XML格式的界面描述文件；

所述界面程序代码是与计算机设备匹配的、html或者jsp或者php或者python或者ruby格式的界面程序代码；或者，是与安卓设备匹配的、java格式的界面程序代码；或者，是与苹果IOS设备匹配的、object-c格式的界面程序代码。