CN108073435A - 一种多信息集成显示方法及系统 - Google Patents

Abstract

本发明提供一种多信息集成显示方法及系统，所述方法包括：初始化插件并指定配置文件；读取配置信息；渲染页面元素；发送跨域请求；异步接收远程跨域信息；拖拽编辑自动保存，所述系统包括插件初始化单元、配置信息解析单元、页面元素渲染单元、跨域信息请求单元、跨域信息接收单元和拖拽编辑单元。本发明提供了一种基于jQuery的轻量级Portal(门户)集成技术，支持跨域信息的整合，支持界面显示和内容布局的个性化定制，能够方便的进行项目开发和应用部署，并在实际项目中得到了验证。

Description

一种多信息集成显示方法及系统

技术领域

本发明涉及一种多信息集成显示方法及系统，属于Web前端技术领域。

背景技术

随着互联网和Web信息系统的兴起，各企事业单位内出现了大量的业务系统，在各业务系统逐步发展完备的情形下，逐步浮现出如下问题：各种信息系统自成一体，用户查看各种信息资源需要分别登录进入不同系统，操作繁琐，工作效率受限，且用户不能按需获取信息定制内容；再者信息系统由不同的厂商开发，信息资源的共享存在不同信息系统之间技术架构和跨域访问的壁垒。

Portal(门户)技术的出现，解决了多业务系统之间信息资源共享的问题，实现了信息的集中展示和访问，方便地将来源于各种业务系统的信息集成在一个统一的界面之内。根据Portal提供的定制功能，各终端用户还可定制个性化的自定义展示界面，极大满足了不同用户的个性化需要。

随着Portal(门户)技术的兴起，有众多的厂商涉足Portal产品开发，并构建出自己的Portal组件和基于它的产品，比如IBM、Oracle、SAP等。

其中，功能最强大、应用最广泛的是Liferay Portal。Liferay Portal是一个开源产品，提供对多个独立系统的内容集成，该产品包含了一个完整的J2EE应用，使用了Web、EJB以及JMS等技术，其前台界面部分使用Struts框架技术，使用基于XML的Portlet配置文件自由地动态扩展显示内容，使用Web Service来支持跨域信息的获取等等，为企业信息、流程等的整合提供了一套完整的解决方案。

也有多款基于jQuery开发的轻量级门户(Portal)框架，其中的佼佼者如JPolite2(JPolite的改良版本)，它集成了jQuery UI和主题，支持基于文本配置文件定制模块的显示内容和布局，支持页面拖拽方式定制模块位置和大小，支持多种模块类型并提供多种模板。

Liferay Portal既是一个开源门户网站建设工具，同时也是一个基于Java架构的应用软件开发平台，集成了众多套件，功能十分强大。正因为如此，Liferay Portal的技术架构属于“重量级”，应用Liferay开发内容集成门户页面技术要求较高，必须配置一个强有力的开发团队，而且开发环境的搭建、配置比较繁琐，运行起来依赖较多。如果仅是针对企业内部跨域信息整合的需求，使用Liferay Portal进行开发需要做大量的“瘦身”工作，而且在项目完成之后，运行维护的要求也会较高。

JPolite2的开发和运行维护的成本较低，但由于集成了jQuery UI，使用JPolite2开发的门户系统界面风格和主题都遵从jQuery UI，不易与非jQuery UI实现的现有系统风格保持一致；且JPolite2在利用Ajax技术实现内容整合时，并未考虑到跨域资源的获取，在进行信息整合时也会遇到一些问题。

本发明主要是针对Liferay Portal和JPolite2的这些缺点提出了一套基于JavaScript(jQuery)实现的技术方案，目的是实现一个轻量级、可快速开发和配置使用，并支持跨域资源获取的实用型门户集成技术。

发明内容

本发明的目的在于克服现有技术不足，提供了一种多信息集成显示方法及系统。

本发明的技术解决方案：

一种多信息集成显示方法，包括以下步骤：

步骤1，初始化插件并指定配置文件；

步骤2，读取配置信息；

步骤3，渲染页面元素；

步骤4，发送跨域请求；

步骤5，异步接收远程跨域信息。

所述配置信息包括页面标题、页面显示配置和Portlet显示配置：

所述页面显示配置包括：页面边距、页面布局网格大小；

所述Portlet显示配置可配置的内容包括：id即唯一标识符、当前Portlet所处的行序号、当前Portlet所处的列序号、x轴方向占网格数、y轴方向占网格数、Portlet的css即层叠样式表类名、Portlet的标题、工具栏按钮配置、Portlet内容发布接口地址、内容加载完成之后的回调函数。

所述渲染页面元素，包括读取到配置信息后，插件根据配置信息初始化页面元素，生成页面布局和各Portlet位置占位符，生成各Portlet的位置、大小，并根据配置渲染各Portlet的颜色、标题、工具栏。

所述发送跨域请求包括插件通过JSONP方式向Portlet所配置的内容发布接口地址提出请求，包括请求地址、传入回调函数名、传入发出请求的Portlet的id；服务器接受程序接收到该请求，获取到所述传入回调函数名和id参数后，可按设定格式返回内容。

插件自动监控用户对页面Portlet的拖拽编辑，并自动进行保存。

Portlet的显示样式通过指定css类名的方式由用户进行配置。

插件异步接收到跨域服务器返回的信息后，将内容渲染至对应的Portlet中显示，显示完成后，若配置了回调函数，则调用回调函数。

插件初始化单元、配置信息解析单元、页面元素渲染单元、跨域信息请求单元、跨域信息接收单元和拖拽编辑单元，其中：

插件初始化单元，用于对插件进行初始化，并为插件指定配置文件或URL地址，以及需要初始化的页面元素。

配置信息解析单元，与插件初始化单元连接，用于所述插件根据初始化内容读取配置信息；

页面元素渲染单元，与配置信息解析单元连接，用于读取到配置信息后，插件开始根据配置信息初始化页面元素，生成页面布局和各Portlet位置占位符，生成各Portlet的位置、大小，并根据配置渲染各Portlet的颜色、标题、工具栏；

跨域信息请求单元，与配置信息解析单元连接，用于插件通过JSONP方式向Portlet所配置的内容发布接口地址提出请求，包括请求地址、传入回调函数名、传入发出请求的Portlet的id即唯一标识符；插件自动将附加的信息以参数的形式提交，其中，有两个参数是使用本插件需要使用的，即参数传入回调函数名和id；服务器接受程序接收到该请求，获取到callback和id参数后，按设定格式返回内容；

跨域信息接收单元，与页面元素渲染单元连接，用于插件异步接收到跨域服务器返回的信息后，将内容渲染至对应的Portlet中显示，显示完成后，若配置了回调函数，则调用回调函数；

拖拽编辑单元，与页面元素渲染单元连接，用于插件自动监控用户对页面Portlet的拖拽编辑，并自动进行保存。此功能默认开启，可在初始化配置时关闭。

所述配置信息包括页面标题、页面显示配置和Portlet显示配置：

所述页面显示配置包括：页面边距、页面布局网格大小；

所述Portlet显示配置可配置的内容包括：id即唯一标识符、当前Portlet所处的行序号、当前Portlet所处的列序号、x轴方向占网格数、y轴方向占网格数、Portlet的css即层叠样式表类名、Portlet的标题、工具栏按钮配置、Portlet内容发布接口地址、内容加载完成之后的回调函数。

本发明与现有技术相比的有益效果：

(1)本发明提供的技术能够实现跨域内容的整合显示。

(2)本发明提供的技术基于jQuery实现，是一种轻量级Portal(门户)集成技术。

(3)使用本发明提供的技术能够方便的进行项目开发和应用部署，并支持内容布局和界面样式的个性化定制，已在实际项目中得到了验证。

附图说明

所包括的附图用来提供对本发明实施例的进一步的理解，其构成了说明书的一部分，用于例示本发明的实施例，并与文字描述一起来阐释本发明的原理。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明一种多信息集成显示方法原理框图；

图2为本发明一种多信息集成显示方法流程示意图；

图3为跨域请求格式结构示意图；

图4为服务器返回内容格式结构示意图；

图5本发明一种多信息集成显示系统结构示意图。

具体实施方式

下面将结合附图对本发明的具体实施例进行详细说明。在下面的描述中，出于解释而非限制性的目的，阐述了具体细节，以帮助全面地理解本发明。然而，对本领域技术人员来说显而易见的是，也可以在脱离了这些具体细节的其它实施例中实践本发明。

在此需要说明的是，为了避免因不必要的细节而模糊了本发明，在附图中仅仅示出了与根据本发明的方案密切相关的设备结构和/或处理步骤，而省略了与本发明关系不大的其他细节。

下面参照附图对本发明的实施例进行说明。

在介绍本发明具体实施方式之前，先介绍本发明中涉及的术语。

Portal：Portal(中文翻译为“门户”)是一个基于Web的应用，通常提供个性化、单点登录、不同源的内容聚合功能。Portal展现在最终用户面前的是类似于Web网页的Portal页面(也有些Portal主页制作得更像是一个桌面系统的界面)，由一系列展现不同内容的Portlet构成。

Portlet：Portlet作为Portal的界面组成元素，由Portal进行管理，负责在Portal中以窗口的形式呈现各种集成的动态信息内容、响应用户信息请求，Portlet支持用户定义和个性化。

JSONP：JSON with Padding，是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于serverl.example.com的网页无法与不是serverl.example.com的服务器沟通，而HTML的<script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的JSONP。而JSONP抓到的资料并不是JSON，而是任意的JavaScript，用JavaScript直译器执行而不是用JSON解析器解析。

如图2所示，一种多信息集成显示方法，包括以下步骤：

步骤1，初始化插件并指定配置文件。

插件在使用时首先要进行初始化，并为插件指定配置文件(标准json格式)或URL地址(返回的内容也为标准json格式)，以及需要初始化的页面元素。

步骤2，读取配置信息。

所述插件根据初始化内容读取配置信息，插件实现功能需要的配置包括：

1)页面标题；

2)页面显示配置，包括：页面边距、页面布局网格大小；

3)Portlet显示配置，可对页面内的Portlet进行个性化配置，每个Portlet可配置内容包括：id(唯一标识符)、当前Portlet所处的行序号、当前Portlet所处的列序号、x轴方向占网格数、y轴方向占网格数、Portlet的css(Cascading Style Sheets，层叠样式表)类名、Portlet的标题、工具栏按钮配置、Portlet内容发布接口地址、内容加载完成之后的回调函数。

步骤3，渲染页面元素。

读取到配置信息后，插件开始根据配置信息初始化页面元素，生成页面布局和各Portlet位置占位符，生成各Portlet的位置、大小，并根据配置渲染各Portlet的颜色、标题、工具栏。

本实施例中并未指定Portlet的样式，各Portlet的显示样式可以通过指定css(Cascading Style Sheets，层叠样式表)类名的方式由用户进行配置，如可以为Portlet指定已有系统的css样式，并能随着部署的不同系统进行调整，在保证现有系统界面一致性方面更为便捷。

步骤4，发送跨域请求

Portlet支持跨域信息的获取，主要是基于JSONP(JSON with Padding)实现，插件通过JSONP方式向Portlet所配置的内容发布接口地址提出请求(请求中包含传入参数)，一个典型的访问请求如图3所示，包括请求地址、callback(传入回调函数名)、id(传入发出请求的Portlet的唯一标识符)。

插件自动将附加的信息以参数的形式提交，其中，有两个参数是使用本插件需要使用的，即参数callback和id。

callback：传入回调函数名；id：传入发出请求的Portlet的唯一标识符。

服务器接受程序接收到该请求，获取到callback和id参数后，可按如图4所示的设定格式返回内容(字符串)，设定格式为：返回值为一个javascript函数的字符串形式，使用传入的callback参数作为函数名，参数为一个对象，这个对象具有两个属性：id和content，其中，属性id的值为传入参数id的值，属性content的值为主要返回内容，将渲然至对应的id的Portlet中显示。

步骤5，异步接收远程跨域信息

插件异步接收到(跨域)服务器返回的信息后，将内容渲染至对应的Portlet中显示，显示完成后，若配置了回调函数，则调用回调函数。

步骤6，拖拽编辑自动保存

插件自动监控用户对页面Portlet的拖拽编辑，并自动进行保存。此功能默认开启，可在初始化配置时关闭。

本发明还提供一种多信息集成显示系统，如图5示，包括：插件初始化单元、配置信息解析单元、页面元素渲染单元、跨域信息请求单元、跨域信息接收单元和拖拽编辑单元。其中：

插件初始化单元，用于对插件进行初始化，并为插件指定配置文件(标准json格式)或URL地址(返回的内容也为标准json格式)，以及需要初始化的页面元素。

配置信息解析单元，与插件初始化单元连接，接收插件初始化单元传递的配置信息，并解析配置信息，插件实现功能需要的配置包括：

1)页面标题；

2)页面显示配置，包括：页面边距、页面布局网格大小；

3)Portlet显示配置，可对页面内的Portlet进行个性化配置，每个Portlet可配置内容包括：id(唯一标识符)、当前Portlet所处的行序号、当前Portlet所处的列序号、x轴方向占网格数、y轴方向占网格数、Portlet的css(Cascading Style Sheets，层叠样式表)类名、Portlet的标题、工具栏按钮配置、Portlet内容发布接口地址、内容加载完成之后的回调函数。

页面元素渲染单元，与配置信息解析单元连接，在接收到配置信息解析单元传递的显示相关的配置信息后，插件开始根据配置信息初始化页面元素，生成页面布局和各Portlet位置占位符，生成各Portlet的位置、大小，并根据配置渲染各Portlet的颜色、标题、工具栏。

本实施例中并未指定Portlet的样式，各Portlet的显示样式可以通过指定css(Cascading Style Sheets，层叠样式表)类名的方式由用户进行配置，如可以为Portlet指定已有系统的css(Cascading Style Sheets，层叠样式表)样式，并能随着部署的不同系统进行调整，在保证现有系统界面一致性方面更为便捷。

跨域信息请求单元，与配置信息解析单元连接，接收配置信息解析单元传递的各Portlet的id(唯一标识符)和内容发布接口地址。Portlet支持跨域信息的获取，主要是基于JSONP(JSON with Padding)实现，此单元用于插件通过JSONP方式向Portlet所配置的内容发布接口地址提出请求(请求中包含传入参数)，一个典型的访问请求如图3所示，包括请求地址、callback(传入回调函数名)、id(传入发出请求的Portlet的唯一标识符)。

插件自动将附加的信息以参数的形式提交，其中，有两个参数是使用本插件需要使用的，即参数callback和id。

服务器接受程序接收到该请求，获取到callback和id参数后，可按设定格式返回，格式返回内容(字符串)，如图4所示，设定格式为：返回值为一个javascript函数的字符串形式，使用传入的callback参数作为函数名，参数为一个对象，这个对象具有两个属性：id和content，其中，属性id的值为传入参数id的值，属性content的值为主要返回内容，将渲然至对应的id的Portlet中显示。

跨域信息接收单元，与页面元素渲染单元连接，插件异步接收到(跨域)服务器返回的信息后，将信息传递至页面元素渲染单元，渲染至对应的Portlet中显示，显示完成后，若配置了回调函数，则调用回调函数。

拖拽编辑单元，与页面元素渲染单元连接，插件自动监控用户对页面Portlet的拖拽编辑，保存改动内容，并将改动的内容传递至页面元素渲染单元进行渲染。此单元功能默认开启，可在初始化配置时关闭，关闭之后页面只能浏览，不可对Poretlet位置和布局进行编辑。

本发明的实施例的许多特征和优点根据该详细描述是清楚的，因此所附权利要求旨在覆盖这些实施例的落入其真实精神和范围内的所有这些特征和优点。此外，由于本领域的技术人员容易想到很多修改和改变，因此不是要将本发明的实施例限于所例示和描述的精确结构和操作，而是可以涵盖落入其范围内的所有合适修改和等同物。

本发明未详细说明部分为本领域技术人员公知技术。

Claims (10)

1.一种多信息集成显示方法，其特征在于，包括以下步骤：

步骤1，初始化插件并指定配置文件；

步骤2，读取配置信息；

步骤3，渲染页面元素；

步骤4，发送跨域请求；

步骤5，异步接收远程跨域信息。

2.根据权利要求1所述的一种多信息集成显示方法，其特征在于，所述配置信息包括页面标题、页面显示配置和Portlet显示配置：

所述页面显示配置包括：页面边距、页面布局网格大小；

所述Portlet显示配置可配置的内容包括：id即唯一标识符、当前Portlet所处的行序号、当前Portlet所处的列序号、x轴方向占网格数、y轴方向占网格数、Portlet的css即层叠样式表类名、Portlet的标题、工具栏按钮配置、Portlet内容发布接口地址、内容加载完成之后的回调函数。

3.根据权利要求1所述的一种多信息集成显示方法，其特征在于，所述渲染页面元素，包括读取到配置信息后，插件根据配置信息初始化页面元素，生成页面布局和各Portlet位置占位符，生成各Portlet的位置、大小，并根据配置渲染各Portlet的颜色、标题、工具栏。

4.根据权利要求1所述的一种多信息集成显示方法，其特征在于，所述发送跨域请求包括插件通过JSONP方式向Portlet所配置的内容发布接口地址提出请求，包括请求地址、传入回调函数名、传入发出请求的Portlet的id；服务器接受程序接收到该请求，获取到所述传入回调函数名和id参数后，可按设定格式返回内容。

5.根据权利要求1所述的一种多信息集成显示方法，其特征在于，还包括：插件自动监控用户对页面Portlet的拖拽编辑，并自动进行保存。

6.根据权利要求1所述的一种多信息集成显示方法，其特征在于，Portlet的显示样式通过指定css类名的方式由用户进行配置。

7.根据权利要求1所述的一种多信息集成显示方法，其特征在于，插件异步接收到跨域服务器返回的信息后，将内容渲染至对应的Portlet中显示，显示完成后，若配置了回调函数，则调用回调函数。

8.一种多信息集成显示系统，其特征在于，包括：插件初始化单元、配置信息解析单元、页面元素渲染单元、跨域信息请求单元、跨域信息接收单元和拖拽编辑单元，其中：

插件初始化单元，用于对插件进行初始化，并为插件指定配置文件或URL地址，以及需要初始化的页面元素。

配置信息解析单元，与插件初始化单元连接，用于所述插件根据初始化内容读取配置信息；

页面元素渲染单元，与配置信息解析单元连接，用于读取到配置信息后，插件开始根据配置信息初始化页面元素，生成页面布局和各Portlet位置占位符，生成各Portlet的位置、大小，并根据配置渲染各Portlet的颜色、标题、工具栏；

跨域信息请求单元，与配置信息解析单元连接，用于插件通过JSONP方式向Portlet所配置的内容发布接口地址提出请求，包括请求地址、传入回调函数名、传入发出请求的Portlet的id即唯一标识符；插件自动将附加的信息以参数的形式提交，其中，有两个参数是使用本插件需要使用的，即参数传入回调函数名和id；服务器接受程序接收到该请求，获取到callback和id参数后，按设定格式返回内容；

跨域信息接收单元，与页面元素渲染单元连接，用于插件异步接收到跨域服务器返回的信息后，将内容渲染至对应的Portlet中显示，显示完成后，若配置了回调函数，则调用回调函数。

9.如权利要求1所述的一种多信息集成显示系统，其特征在于，所述配置信息包括页面标题、页面显示配置和Portlet显示配置：

所述页面显示配置包括：页面边距、页面布局网格大小；

所述Portlet显示配置可配置的内容包括：id即唯一标识符、当前Portlet所处的行序号、当前Portlet所处的列序号、x轴方向占网格数、y轴方向占网格数、Portlet的css即层叠样式表类名、Portlet的标题、工具栏按钮配置、Portlet内容发布接口地址、内容加载完成之后的回调函数。

10.如权利要求1所述的一种多信息集成显示系统，其特征在于，还包括拖拽编辑单元，与页面元素渲染单元连接，用于插件自动监控用户对页面Portlet的拖拽编辑，并自动进行保存。此功能默认开启，可在初始化配置时关闭。