CN102929940A - 界面展现装置和界面展现方法 - Google Patents

Abstract

本发明提供一种界面展现装置和一种界面展现方法，其中界面展现装置包括：索引界面生成模块，生成索引界面，所述索引界面中包括片段图标区和片段内容区；区域显示控制模块，根据用户的指令，隐藏所述片段图标区并显示所述片段内容区，或隐藏所述片段内容区并显示所述片段图标区；片段界面控制模块，获取请求地址中片段的片段描述文件，根据所述片段描述文件为所述片段设置片段界面，并将所述片段界面显示在所述片段内容区内；片段图标控制模块，为所述片段设置图标，并将所述图标显示在所述片段图标区内。通过本发明，能够将WEB针对不同类型的展现设备，以相适应的形式进行展现，同时不需要对WEB界面针对不同设备进行重新设计。

Description

界面展现装置和界面展现方法

技术领域

本发明涉及计算机技术领域，具体而言，涉及一种界面展现装置和一种界面展现方法。

背景技术

与PC机相比，移动终端设备使用触摸操作代替了鼠标操作，屏幕尺寸也不同，传统WEB界面在移动设备上难以获得良好的用户体验。现在一些新兴的互联网站重新设计了针对移动终端的网页，极大的提升了用户的操作体验。

但是该方法有一个不足，一切界面都要针对移动终端重新制作，对于有现有***无法充分利用，开发成本巨大。

如图1所示，现有技术的WEB界面展现流程为：

步骤1：转发器102接收客户端请求；

步骤2：根据请求头判断客户端类型，获取对应的界面地址；

步骤3：重定向到目标设备界面，如果客户端为PC类型，则定向至PC界面104，如果客户端为屏幕分辨率1024×768的移动终端106，则定向至该移动终端106，如果客户端为屏幕分辨率800×480的移动终端108，则定向至该移动终端108。

上面的流程就是经典的WEB界面适配移动终端的流程，如前所述，这个流程的不足也是显而易见的，需要针对多设备进行重新设计界面，根据定向的不同设备，发送不同的界面。

因此，需要一种新的用于WEB界面展现的技术方案，能够将WEB针对不同类型的展现设备，以相适应的形式进行展现，同时不需要对WEB界面针对不同设备进行重新设计，节省开发成本。

发明内容

本发明所要解决的技术问题在于，提供一种新的用于WEB界面展现的技术方案，能够将WEB针对不同类型的展现设备，以相适应的形式进行展现，同时不需要对WEB界面针对不同设备进行重新设计，节省开发成本。

有鉴于此，本发明提供一种界面展现装置，包括：索引界面生成模块，生成索引界面，所述索引界面中包括片段图标区和片段内容区；区域显示控制模块，根据用户的指令，隐藏所述片段图标区并显示所述片段内容区，或隐藏所述片段内容区并显示所述片段图标区；片段界面控制模块，获取请求地址中片段的片段描述文件，根据所述片段描述文件为所述片段设置片段界面，并将所述片段界面显示在所述片段内容区内；片段图标控制模块，为所述片段设置图标，并将所述图标显示在所述片段图标区内。在该技术方案中，基于片段来进行界面显示，在索引界面上显示各个片段的图标，各个图标的位置可根据显示设备屏幕类型来灵活布置，在片段界面显示片段的具体内容，其也可以根据设备屏幕类型来灵活缩放大小，用户可以切换片段图标区和片段内容区，以查看不同片段的内容，这样一来，WEB界面的展现可以灵活适应不同类型的显示设备，不需重新设计，节省了开发成本。

在上述技术方案中，优选地，所述索引界面生成模块获取当前设备的设备信息，根据所述设备信息生成界面模板，并根据所述界面模板，生成所述索引界面。在该技术方案中，设备信息包括屏幕大小、分辨率等内容，按设备信息设置界面模板，可以保证最终生成的索引界面大小与设备相符合，尤其是图标能够按显示设备的屏幕大小、分辨率等来布置，片段内容也可以按显示设备来缩放。

在上述技术方案中，优选地，所述片段界面控制模块根据所述片段描述文件，生成所述片段的网页代码，并将所述网页代码输出至所述片段内容区，并显示为所述片段界面。在该技术方案中，为了保证能够正确显示片段的具体内容，所以需提取片段的网页代码（如HTML代码），通过该代码可以展现片段的具体内容。

在上述技术方案中，优选地，所述区域显示控制模块在所述用户对所述图标进行第一方式的操作时，隐藏所述片段图标区并显示所述片段内容区，在所述用户对所述索引界面上的特定位置进行第二方式的操作时，隐藏所述片段内容区并显示所述片段图标区。在该技术方案中，用户可以通过点击、长按等方式，查看某个片段的具体内容，也可以通过点击home键等操作，返回索引界面，重新选择片段，这些操作方式符合用户的操作习惯。

在上述技术方案中，优选地，还包括：设备识别控制模块，获取当前设备的设备信息，根据所述设备信息判断所述当前是否为移动终端，并在判断结果为是时，启动所述索引界面生成模块。在该技术方案中，由于PC屏幕较大，所以可以按传统方式直接展现WEB界面，而移动终端上则可以采用上述的提供片段图标区和片段内容区的展现方式，体现了区分PC和移动终端，选择适宜的界面展现方式的优点。

本发明还提供一种界面展现方法，包括：步骤302，生成索引界面，所述索引界面中包括片段图标区和片段内容区；步骤304，根据用户的指令，隐藏所述片段图标区并显示所述片段内容区，或隐藏所述片段内容区并显示所述片段图标区；步骤306，获取请求地址中片段的片段描述文件，根据所述片段描述文件为所述片段设置片段界面，并将所述片段界面显示在所述片段内容区内；步骤308，为所述片段设置图标，并将所述图标显示在所述片段图标区内。在该技术方案中，基于片段来进行界面显示，在索引界面上显示各个片段的图标，各个图标的位置可根据显示设备屏幕类型来灵活布置，在片段界面显示片段的具体内容，其也可以根据设备屏幕类型来灵活缩放大小，用户可以切换片段图标区和片段内容区，以查看不同片段的内容，这样一来，WEB界面的展现可以灵活适应不同类型的显示设备，不需重新设计，节省了开发成本。

在上述技术方案中，优选地，所述步骤302包括：获取当前设备的设备信息，根据所述设备信息生成界面模板；根据所述界面模板，生成所述索引界面。在该技术方案中，设备信息包括屏幕大小、分辨率等内容，按设备信息设置界面模板，可以保证最终生成的索引界面大小与设备相符合，尤其是图标能够按显示设备的屏幕大小、分辨率等来布置，片段内容也可以按显示设备来缩放。

在上述技术方案中，优选地，所述步骤306包括：根据所述片段描述文件，生成所述片段的网页代码；将所述网页代码输出至所述片段内容区，并显示为所述片段界面。在该技术方案中，为了保证能够正确显示片段的具体内容，所以需提取片段的网页代码（如HTML代码），通过该代码可以展现片段的具体内容。

在上述技术方案中，优选地，所述步骤304包括：在所述用户对所述图标进行第一方式的操作时，隐藏所述片段图标区并显示所述片段内容区；在所述用户对所述索引界面上的特定位置进行第二方式的操作时，隐藏所述片段内容区并显示所述片段图标区。在该技术方案中，用户可以通过点击、长按等方式，查看某个片段的具体内容，也可以通过点击home键等操作，返回索引界面，重新选择片段，这些操作方式符合用户的操作习惯。

在上述技术方案中，优选地，在所述步骤302之前，还包括：获取当前设备的设备信息，根据所述设备信息判断所述当前是否为移动终端，并在判断结果为是时，执行所述步骤302。在该技术方案中，由于PC屏幕较大，所以可以按传统方式直接展现WEB界面，而移动终端上则可以采用上述的提供片段图标区和片段内容区的展现方式，体现了区分PC和移动终端，选择适宜的界面展现方式的优点。

通过以上技术方案，可以实现一种界面展现装置和一种界面展现方法，能够将WEB针对不同类型的展现设备，以相适应的形式进行展现，同时不需要对WEB界面针对不同设备进行重新设计，节省开发成本。

附图说明

图1是现有技术的网页界面展现的流程示意图；

图2是根据本发明的一个实施例的界面展现装置的框图；

图3是根据本发明的一个实施例的界面展现方法的流程图；

图4是一个网页界面的示意图；

图5是根据本发明的一个实施例的界面展现方法的工作流程图；

图6是根据本发明的一个实施例的生成界面的示意图；

图7是根据本发明的一个实施例的生成界面的示意图。

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。

在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明并不限于下面公开的具体实施例的限制。

图2是根据本发明的一个实施例的界面展现装置的框图。

如图2所示，本发明提供一种界面展现装置200，包括：索引界面生成模块202，生成索引界面，所述索引界面中包括片段图标区和片段内容区；区域显示控制模块204，根据用户的指令，隐藏所述片段图标区并显示所述片段内容区，或隐藏所述片段内容区并显示所述片段图标区；片段界面控制模块206，获取请求地址中片段的片段描述文件，根据所述片段描述文件为所述片段设置片段界面，并将所述片段界面显示在所述片段内容区内；片段图标控制模块208，为所述片段设置图标，并将所述图标显示在所述片段图标区内。在该技术方案中，基于片段来进行界面显示，在索引界面上显示各个片段的图标，各个图标的位置可根据显示设备屏幕类型来灵活布置，在片段界面显示片段的具体内容，其也可以根据设备屏幕类型来灵活缩放大小，用户可以切换片段图标区和片段内容区，以查看不同片段的内容，这样一来，WEB界面的展现可以灵活适应不同类型的显示设备，不需重新设计，节省了开发成本。

在上述技术方案中，优选地，所述索引界面生成模块202获取当前设备的设备信息，根据所述设备信息生成界面模板，并根据所述界面模板，生成所述索引界面。在该技术方案中，设备信息包括屏幕大小、分辨率等内容，按设备信息设置界面模板，可以保证最终生成的索引界面大小与设备相符合，尤其是图标能够按显示设备的屏幕大小、分辨率等来布置，片段内容也可以按显示设备来缩放。

在上述技术方案中，优选地，所述片段界面控制模块206根据所述片段描述文件，生成所述片段的网页代码，并将所述网页代码输出至所述片段内容区，并显示为所述片段界面。在该技术方案中，为了保证能够正确显示片段的具体内容，所以需提取片段的网页代码（如HTML代码），通过该代码可以展现片段的具体内容。

在上述技术方案中，优选地，所述区域显示控制模块204在所述用户对所述图标进行第一方式的操作时，隐藏所述片段图标区并显示所述片段内容区，在所述用户对所述索引界面上的特定位置进行第二方式的操作时，隐藏所述片段内容区并显示所述片段图标区。在该技术方案中，用户可以通过点击、长按等方式，查看某个片段的具体内容，也可以通过点击home键等操作，返回索引界面，重新选择片段，这些操作方式符合用户的操作习惯。

在上述技术方案中，优选地，还包括：设备识别控制模块210，获取当前设备的设备信息，根据所述设备信息判断所述当前是否为移动终端，并在判断结果为是时，启动所述索引界面生成模块202。在该技术方案中，由于PC屏幕较大，所以可以按传统方式直接展现WEB界面，而移动终端上则可以采用上述的提供片段图标区和片段内容区的展现方式，体现了区分PC和移动终端，选择适宜的界面展现方式的优点。

图3是根据本发明的一个实施例的界面展现流程的流程图。

如图3所示，本发明还提供一种界面展现方法，包括：步骤302，生成索引界面，所述索引界面中包括片段图标区和片段内容区；步骤304，根据用户的指令，隐藏所述片段图标区并显示所述片段内容区，或隐藏所述片段内容区并显示所述片段图标区；步骤306，获取请求地址中片段的片段描述文件，根据所述片段描述文件为所述片段设置片段界面，并将所述片段界面显示在所述片段内容区内；步骤308，为所述片段设置图标，并将所述图标显示在所述片段图标区内。在该技术方案中，基于片段来进行界面显示，在索引界面上显示各个片段的图标，各个图标的位置可根据显示设备屏幕类型来灵活布置，在片段界面显示片段的具体内容，其也可以根据设备屏幕类型来灵活缩放大小，用户可以切换片段图标区和片段内容区，以查看不同片段的内容，这样一来，WEB界面的展现可以灵活适应不同类型的显示设备，不需重新设计，节省了开发成本。

在上述技术方案中，优选地，所述步骤302包括：获取当前设备的设备信息，根据所述设备信息生成界面模板；根据所述界面模板，生成所述索引界面。在该技术方案中，设备信息包括屏幕大小、分辨率等内容，按设备信息设置界面模板，可以保证最终生成的索引界面大小与设备相符合，尤其是图标能够按显示设备的屏幕大小、分辨率等来布置，片段内容也可以按显示设备来缩放。

在上述技术方案中，优选地，所述步骤306包括：根据所述片段描述文件，生成所述片段的网页代码；将所述网页代码输出至所述片段内容区，并显示为所述片段界面。在该技术方案中，为了保证能够正确显示片段的具体内容，所以需提取片段的网页代码（如HTML代码），通过该代码可以展现片段的具体内容。

在上述技术方案中，优选地，所述步骤304包括：在所述用户对所述图标进行第一方式的操作时，隐藏所述片段图标区并显示所述片段内容区；在所述用户对所述索引界面上的特定位置进行第二方式的操作时，隐藏所述片段内容区并显示所述片段图标区。在该技术方案中，用户可以通过点击、长按等方式，查看某个片段的具体内容，也可以通过点击home键等操作，返回索引界面，重新选择片段，这些操作方式符合用户的操作习惯。

在上述技术方案中，优选地，在所述步骤302之前，还包括：获取当前设备的设备信息，根据所述设备信息判断所述当前是否为移动终端，并在判断结果为是时，执行所述步骤302。在该技术方案中，由于PC屏幕较大，所以可以按传统方式直接展现WEB界面，而移动终端上则可以采用上述的提供片段图标区和片段内容区的展现方式，体现了区分PC和移动终端，选择适宜的界面展现方式的优点。

在本发明的一个实施例中个，为解决现有技术中存在的问题，基于片段描述的WEB界面扩充了适配移动终端的流程，增加了策略，基于片段描述的WEB界面是企业信息***中一种界面展现技术。

图4中显示的页面包括多个WEB界面片段（block），通过对多个片段位置、样式的描述，形成一个片段描述文件。通过片段描述文件来生成出完整的界面。

本实施例中的WEB界面展现流程的前半部分，与传统流程相同，不再描述。与之前的不同在于重定向的目标界面是根据策略生成的界面，而不是完全重做的界面。

功能模块的具体构成描述如下：

1：该流程增加了片段索引界面创建策略收集装置。该装置预置了默认的针对不同设备的界面索引创建策略，并提供了索引界面创建策略的设计界面。通过界面可以设计索引创建策略。如在某设备的浏览态标记某片段为索引界面，或者另外一种设备浏览的时候标记某片段固定在索引界面的某部位。

2：该流程增加了片段索引界面创建装置。索引界面创建装置根据策略，渲染出索引界面。

3：该流程增加了片段创建策略收集装置。该装置提供了默认的针对不同设备的片段界面创建策略，并提供了片段界面创建策略的设计界面。通过设计界面可以定制片段针对某些设备的界面创建策略。

4：该流程增加了片段界面创建装置。片段界面创建装置根据片段创建策略渲染出片段的界面

5：界面生成装置：将索引界面与片段界面结合在一起，形成针对移动终端最终的界面。

如图5所示，本实施例中进行WEB界面展现的工作流程如下：

步骤502，客户端发送请求到转发器。

步骤504，转发器收集客户端的设备信息。包括设备类型，屏幕分辨率，方向信息，将设备信息放置在环境变量中。

步骤506，如果设备类型是PC，将访问重定向到PC界面，采用普通界面渲染方式渲染WEB界面。

步骤508，如果设备类型是移动设备，将请求重定向到索引界面创建装置，选用针对移动终端的界面渲染方式。

步骤510，索引创建装置获取从环境变量中获取设备信息，从请求地址中获取当前请求对应的片段描述文件，以及根据片段描述文件及设备信息获取索引界面创建策略。

如果管理员定制策略，指定某片段为当前设备的索引界面，那调用该策略中该片段的生成HTML代码方法，并将其生成的代码输出到界面上。如果管理员未定制策略，使用默认策略生成索引界面。

生成索引界面的过程如下，索引界面可以参考图6：

1、首先取策略获取配置的HTML模板。

2、根据设备的屏幕宽（sw）高（sh），与缩略图的宽高(iw,ih)计算出当前界面缩略图排列放置方式，根据不同情况处理：

（a）默认情况iw=200,ih=200；

（b）如果sw×sh/(iw×ih)<8，则定义iw=100,ih=100；

（c）如果sw×sh/(iw×ih)>32，则定义iw=400,ih=400

判断：如果sw/iw>4，则图标排列方式为4列2行；反之4行2列。

具体地，可以设置图标的间距602=iw/5。

3、根据片段描述文件及片段创建策略获取当前界面上可显示的片段。片段图标区604中包含片段的自定缩略图或缩放得到的图标。如果片段定义了缩略图，则使用缩略图，如图假设图标4（606）为自定义的缩略图，否则将该片段等比例缩小到iw，ih。形成片段的图标，如图假设图6（608）为按比例缩小片段得到的图标。

4：按照图标排列方式生成索引界面。索引界面上加入触摸事件监听。如果手指向左滑动超过iw，则将当前屏幕上的图标替换为下8个，直到后面没有图标。如果手指向右滑动距离超过iw，则将当前屏幕上的图标替换为上8个，直到前面没有图标。

5：图标上增加点击事件。当图标被点击时。将片段图标区域中的图标隐藏，替换成被点击图标对应的片段的HTML代码，以显示出所选择的片段。

6：创建返回索引界面按钮610。点击后将片段内容区隐藏，片段图标区显示。

7：将生成的HTML代码片段增加到HTML模板中的位置，并输出片段界面，具体如图7所示，片段图标区604被隐藏，更新为片段内容区，其中显示了片段的具体内容，假设为地图。

8、管理员对索引界面创建策略收集装置对片段描述进行设置并存储。此步骤为非必要步骤，管理员可以跳过此步骤，若发现一些片段使用默认策略生成的索引界面不友好，或者需要优化，可以使用此装置进行创建策略的定制。如定制片段的缩略图，定义模板等操作。

综上所述，通过本发明的技术方案，可以实现一种界面展现装置和一种界面展现方法，通过预置的策略可使已存在的界面很好的适应移动设备，不需要重新设计整个界面，只需要对部分片段进行配置或设计就可以满足移动设备的需求，以及不需要针对多种设备设计不同的界面，只需要对部分需要优化的片段进行配置或设计即可满足多种移动终端的接入需求。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种界面展现装置，其特征在于，包括：

索引界面生成模块，生成索引界面，所述索引界面中包括片段图标区和片段内容区；

区域显示控制模块，根据用户的指令，隐藏所述片段图标区并显示所述片段内容区，或隐藏所述片段内容区并显示所述片段图标区；

片段界面控制模块，获取请求地址中片段的片段描述文件，根据所述片段描述文件为所述片段设置片段界面，并将所述片段界面显示在所述片段内容区内；

片段图标控制模块，为所述片段设置图标，并将所述图标显示在所述片段图标区内。

2.根据权利要求1所述的界面展现装置，其特征在于，所述索引界面生成模块获取当前设备的设备信息，根据所述设备信息生成界面模板，并根据所述界面模板，生成所述索引界面。

3.根据权利要求1所述的界面展现装置，其特征在于，所述片段界面控制模块根据所述片段描述文件，生成所述片段的网页代码，并将所述网页代码输出至所述片段内容区，并显示为所述片段界面。

4.根据权利要求1所述的界面展现装置，其特征在于，所述区域显示控制模块在所述用户对所述图标进行第一方式的操作时，隐藏所述片段图标区并显示所述片段内容区，在所述用户对所述索引界面上的特定位置进行第二方式的操作时，隐藏所述片段内容区并显示所述片段图标区。

5.根据权利要求1至4中任一项所述的界面展现装置，其特征在于，还包括：

设备识别控制模块，获取当前设备的设备信息，根据所述设备信息判断所述当前是否为移动终端，并在判断结果为是时，启动所述索引界面生成模块。

6.一种界面展现方法，其特征在于，包括：

步骤302，生成索引界面，所述索引界面中包括片段图标区和片段内容区；

步骤304，根据用户的指令，隐藏所述片段图标区并显示所述片段内容区，或隐藏所述片段内容区并显示所述片段图标区；

步骤306，获取请求地址中片段的片段描述文件，根据所述片段描述文件为所述片段设置片段界面，并将所述片段界面显示在所述片段内容区内；

步骤308，为所述片段设置图标，并将所述图标显示在所述片段图标区内。

7.根据权利要求6所述的界面展现方法，其特征在于，所述步骤302包括：

获取当前设备的设备信息，根据所述设备信息生成界面模板；

根据所述界面模板，生成所述索引界面。

8.根据权利要求6所述的界面展现方法，其特征在于，所述步骤306包括：

根据所述片段描述文件，生成所述片段的网页代码；

将所述网页代码输出至所述片段内容区，并显示为所述片段界面。

9.根据权利要求6所述的界面展现方法，其特征在于，所述步骤304包括：

在所述用户对所述图标进行第一方式的操作时，隐藏所述片段图标区并显示所述片段内容区；

在所述用户对所述索引界面上的特定位置进行第二方式的操作时，隐藏所述片段内容区并显示所述片段图标区。

10.根据权利要求6至9中任一项所述的界面展现方法，其特征在于，在所述步骤302之前，还包括：

获取当前设备的设备信息，根据所述设备信息判断所述当前是否为移动终端，并在判断结果为是时，执行所述步骤302。

Images