CN111124391A - 一种桌面端软件挂件视窗管理方法和系统 - Google Patents

Abstract

本发明提供了一种桌面端软件挂件视窗管理方法和系统，在主应用和子应用上实施，包括以下步骤：运行主应用，生成主视窗；将子应用放到外部容器中运行，生成多个挂件视窗；对所述主视窗和多个挂件视窗进行显示层级的配置；通过主应用与子应用之间通信，实现对所述挂件视窗的管理。本发明通过采用沙箱隔离技术，具有隔离性好，方便集成多种不同技术栈的优点，同时对所有挂件视窗的显示层级采用统一的管理,并统一了挂件视窗交互规范，不同部件间的控制切换更加灵活方便。

Description

一种桌面端软件挂件视窗管理方法和系统

技术领域

本发明涉及桌面应用软件开发领域，具体而言，涉及一种桌面端软件挂件视窗管理方法和系统。

背景技术

在桌面应用软件开发技术中，多是以一个主视窗为背景，通过不同挂件视窗的平铺和层叠，完成整个桌面应用的页面设计，在部分场景下，会弹出一个或多个辅助挂件视窗，如应用的设置页面，形成挂件视窗的层叠，不同挂件视窗位置如果重叠会互相覆盖，当前获得焦点的挂件视窗会出现在最上层，这是windows等操作系统的默认视窗管理行为，开发者仅需要关心同一主视窗下的不同挂件视窗的布局和样式,按照应用的设计样式进行开发即可。

上述方案在进行页面模块化的时候有很多不足，不同开发人员在开发不同模块的时候难以和其余模块解耦，因为同一个挂件视窗大都是在同一个渲染进程中进行，容易出现样式覆盖，变量名冲突等各种问题。

在基于electron框架(Electron是一种将HTML5网页技术和NodeJS技术结合开发桌面端应用的框架)开发桌面端应用时，页面模块化的方案缺点更加明显。使用electron开发的应用内主要有两种进程，一种是主进程，负责进行应用初始化和后台操作等，另一种是渲染进程，负责页面的加载渲染。如果采用传统的多视窗方案，需要开启多个渲染进程分别加载不同模块，在模块较多时多个进程会占据大量系统资源。如果直接在同一个渲染进程中进行模块划分，由于JavaScript语言在设计上就没有强有力的命名空间约束，极其容易造成全局变量名的冲突，css层叠样式表的使用更是容易造成样式污染，缺少一种灵活有效的页面模块化方案。

发明内容

有鉴于此，本发明实施例的目的在于，提供一种桌面端软件挂件视窗管理方法和系统以解决上述问题。

具体技术方案如下：

一个方面，本发明提供了一种桌面端软件挂件视窗管理方法，在主应用和子应用上实施，包括以下步骤：

运行主应用，生成主视窗；

将子应用放到外部容器中运行，生成多个挂件视窗；

对所述主视窗和多个挂件视窗进行显示层级的配置；

通过主应用与子应用之间通信，实现对所述挂件视窗的管理。

根据本发明一优选实施方式，所述生成多个挂件视窗，包括：

主应用启动时，需要先从特定配置目录中读取存在的子应用配置文件，根据配置文件读取子应用的信息，并生成对应数量的挂件视窗；

其中，所述子应用的信息包括id，名字，主页地址，默认显示位置，图标。

根据本发明一优选实施方式，所述对多个所述挂件视窗进行显示层级的配置包括：

所述主视窗位于底部，其显示层级最低，多个所述挂件视窗具有不同的显示层级,后显示的挂件视窗比前面的挂件视窗显示层级高，并且获得当前窗口焦点的挂件视窗会自动获得最高的显示层级。

根据本发明一优选实施方式，所述主应用与子应用之间通信包括：

在所述主应用和子应用内封装事件驱动库，且所述主应用和子应用通过功能接口交互，并在所述事件驱动库的驱动下，发送约定的事件和字符串参数，实现通信。

根据本发明一优选实施方式，所述挂件视窗的四周为操作区，在操作区内进行放大、缩小或移动操作时，所述挂件视窗的位置和大小发生相应变化。

根据本发明一优选实施方式，所述主应用实时记录并保存所述挂件视窗的位置和/或大小信息，用于保证所述挂件视窗在下一次启动时能够还原到之前的状态。

根据本发明一优选实施方式，所述子应用实时接收其对应外部容器的尺寸，并根据自身需求决定是否对内部页面布局进行响应式变更。

另一个方面，本发明提供了一种桌面端软件挂件视窗系统，包括：

建立模块，用于创建主视窗和多个挂件视窗，并将所述挂件视窗放到外部容器中运行；

层级配置模块，用于将主视窗位于底部，其显示层级最低，多个所述挂件视窗具有不同的显示层级,后显示的挂件视窗比前面的挂件视窗显示层级高，并且获得当前窗口焦点的挂件视窗会自动获得最高的显示层级；

通信模块，用于进行主应用和子应用之间的通信，实现对所述挂件视窗的管理。

与现有技术相比，本发明的有益效果包括：通过采用沙箱隔离技术，具有隔离性好，方便集成多种不同技术栈的优点，同时对所有挂件视窗的显示层级采用统一的管理,并统一了挂件视窗交互规范，不同部件间的控制切换更加灵活方便。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例。其中：

图1为本发明实施例中提供的方法流程图；

图2为本发明实施例中应用组成结构示意图；

图3为本发明实施例中挂件视窗的页面布局图；

图4为本发明实施例中应用的显示层级示意图；

图5为本发明实施例中主应用与子应用之间通信流程图。

具体实施方式

容易理解，根据本发明的技术方案，在不变更本发明实质精神下，本领域的一般技术人员可以提出可相互替换的多种结构方式以及实现方式。因此，以下具体实施方式以及附图仅是对本发明的技术方案的示例性说明，而不应当视为本发明的全部或者视为对本发明技术方案的限定或限制。

参见图1，本发明的实施方式提供一种桌面端软件挂件视窗管理方法，该方法在主应用和子应用上实施，包括以下步骤：

S101：运行主应用，生成主视窗。

S102：将子应用放到外部容器中运行，生成多个挂件视窗。

将多个子应用模块放到彼此间独立的外部容器中运行，外部容器利用HTML(Hypertext Marked Language，即超文本标记语言)中iframe组件的沙箱特性建立，iframe是HTML技术中的一个特别组件，可以创建一个全新的独立宿主环境，内部加载的子应用与主应用内的代码不会互相干扰。

主应用启动时，通过鼠标点击，激活子应用，主应用从特定配置目录中读取存在的子应用配置文件，根据配置文件读取子应用的id，名字，主页地址，默认显示位置，图标等信息，并根据读取的配置文件生成对应数量的挂件视窗。

S103：对所述主视窗和多个挂件视窗进行显示层级的配置。

参见图2，主视窗和挂件视窗生成后，需要对其显示层级进行配置，显示层级默认以读取顺序为先后顺序，在某个基数(如9999)上依次递增，默认情况下，后读取挂件视窗一定显示在先读取挂件视窗之上，除非配置文件中指定了该子应用的显示层级，则对应挂件视窗直接在该指定层级上显示。

不同挂件视窗的显示层级并非固定，运行时如果用户点击了某个子应用，该子应用对应的挂件视窗将会获得窗口焦点，此时该挂件视窗的显示层级会自动变为程序内的最高层级，显示在所有视窗之上。

参见图3，该挂件视窗中间部分是可定制部分，利用iframe组件构建的子应用模块嵌入其中，可以实现子应用的独立加载运行，挂件视窗最外层为可缩放区，用户可以通过鼠标选中该部分区域对整个视窗进行拖动，不同区域可缩放的方向不同，见图3中箭头方向。该挂件视窗内部上方是标题栏部分，其中左侧是标题文字，该部分同时也是可拖动区域，用户可以通过鼠标长按该区域进行整个挂件视窗的拖动，移动到应用内的合适区域进行挂件视窗的排版布局，右侧为操作区，包含了挂件视窗的最小化，最大化(还原)和关闭功能。

当用户点击最小化按钮时，对应的挂件视窗的主体将会隐藏，直到用户点击恢复(最大化)按钮。

如果用户点击最大化按钮，则挂件视窗将会覆盖整个主视窗，并遮盖其余所有子应用的挂件视窗，直到用户点击恢复(最大化)按钮。

如果用户点击关闭按钮，则该挂件视窗会从主视窗上移除。

S104：通过主应用与子应用之间通信，实现对所述挂件视窗的管理。

通过封装iframe组件的通信机制实现子应用与主应用间通信，主应用与子应用间通过接口实现交互，具体的，主应用上具有iframe.window.function接口，子应用上具有parent.function接口。在主应用和子应用内封装事件驱动库，主应用和子应用导入事件驱动库，发送约定的事件和字符串参数，主应用和子应用通过自定义的事件和对应消息接口进行通信。

参见图5，通信过程具体包括以下步骤：

1)注册事件A，并定义接收函数，接收字符串参数；

在主应用的事件驱动库内部注册消息通知事件，事件名为A,定义接收函数，用于接收字符串参数MSG,主要功能就是在主视窗内弹出一个提示框，显示传入的MSG字段。

2)注册事件B；

在子应用的事件驱动库内部注册消息通知完成事件，事件名为B。

3)子应用通过事件驱动库触发事件A，传入字符串参数“这是一个来自子应用的通知消息”。

4)事件A对应的接收函数被触发，主应用显示子应用传来的消息；

主应用接收到事件A后，通过解析事件名和事件参数，触发内部的接收函数，在主视窗上弹出对应的消息通知框页面。

5)主应用通知子应用事件A处理完成。

6)子应用注册的事件B对应的接收函数被触发。

下面将具体介绍本发明实施方式的实现过程。

开发人员将开发两个独立的子应用，作为模块A和模块B，参见图4，由于采用了iframe组件作为独立外部容器加载子应用，子应用可以采用不同的技术栈进行开发，如模块A使用Vue.js库，模块B采用React库,或者同一个库的不同版本，两个子应用均不会产生冲突。

然后需要生成配置文件并指定必要的参数，包括应用ID，如com.example.a和com.example.b,应用ID是子应用的身份证明，后续与主应用通信时需要提供此参数，应用ID不可重复，否则无法被正常加载，还需要提供子应用的入口文件，默认为安装包目录下的index.html文件。

当主应用启动时，生成主视窗，会自动检索配置目录下所有的子应用配置文件，根据应用ID生成并维护一份已安装的子应用模块列表，然后在主视窗上创建对应数量的挂件视窗并通过设置子应用的入口文件来加载子应用。不同的挂件视窗将会自动进行平铺排版，如果出现布局层叠，则根据默认或者配置文件设置的显示层级进行覆盖。

子应用的主体是包裹在设计好的挂件视窗内部的，四周则是挂件视窗的操作区。当用户操作挂件视窗，在对应区域进行放大，缩小，移动操作时，挂件视窗的位置和大小将发生变化。主应用将实时记录并保存对应子应用的位置和大小信息，来保证下一次启动时能够正确还原挂件视窗之前的状态。

需要注意的是，由于受主应用显示边界限制，所以子应用模块无法离开主应用的显示范围。子应用模块内部由于沙箱的隔离性，可能无法实时感知外部容器的尺寸变化，可以通过对应的应用间接口通信机制实时接收其外部容器尺寸大小，由子应用根据自身需求决定是否对内部页面布局进行响应式变更，否则在拉伸时容易出现挂件视窗内部布局错乱的情况。

本发明还提供了一种桌面端软件挂件视窗系统，包括：

建立模块，包括主应用和子应用，用于创建主视窗和多个挂件视窗，并将所述挂件视窗放到外部容器中运行；

层级配置模块，用于将主视窗位于底部，其显示层级最低，多个所述挂件视窗具有不同的显示层级,后显示的挂件视窗比前面的挂件视窗显示层级高，并且获得当前窗口焦点的挂件视窗会自动获得最高的显示层级；

通信模块，用于进行主应用和子应用之间的通信，实现对所述挂件视窗的管理。

该系统的具体实现过程与上述实施例一致，在此不做赘述。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例或者实施例的某些部分所述的方法。

本发明的技术范围不仅仅局限于上述说明中的内容，本领域技术人员可以在不脱离本发明技术思想的前提下，对上述实施例进行多种变形和修改，而这些变形和修改均应当属于本发明的保护范围内。

Claims (8)

1.一种桌面端软件挂件视窗管理方法，在主应用和子应用上实施，其特征在于，包括以下步骤：

运行主应用，生成主视窗；

将子应用放到外部容器中运行，生成多个挂件视窗；

对所述主视窗和多个挂件视窗进行显示层级的配置；

通过主应用与子应用之间通信，实现对所述挂件视窗的管理。

2.根据权利要求1所述的桌面端软件挂件视窗管理方法，其特征在于，所述生成多个挂件视窗，包括：

主应用启动时，需要先从特定配置目录中读取存在的子应用配置文件，根据配置文件读取子应用的信息，并生成对应数量的挂件视窗；

其中，所述子应用的信息包括id，名字，主页地址，默认显示位置，图标。

3.根据权利要求1所述的桌面端软件挂件视窗管理方法，其特征在于，所述对所述主视窗和多个挂件视窗进行显示层级的配置包括：

所述主视窗位于底部，其显示层级最低，多个所述挂件视窗具有不同的显示层级,后显示的挂件视窗比前面的挂件视窗显示层级高，并且获得当前窗口焦点的挂件视窗会自动获得最高的显示层级。

4.根据权利要求1所述的桌面端软件挂件视窗管理方法，其特征在于，所述主应用与子应用之间通信包括：

在所述主应用和子应用内封装事件驱动库，且所述主应用和子应用通过功能接口交互，并在所述事件驱动库的驱动下，发送约定的事件和字符串参数，实现通信。

5.根据权利要求1所述的桌面端软件挂件视窗管理方法，其特征在于，所述挂件视窗的四周为操作区，在操作区内进行放大、缩小或移动操作时，所述挂件视窗的位置和大小发生相应变化。

6.根据权利要求1所述的桌面端软件挂件视窗管理方法，其特征在于，所述主应用实时记录并保存所述挂件视窗的位置和/或大小信息，用于保证所述挂件视窗在下一次启动时能够还原到之前的状态。

7.根据权利要求1所述的桌面端软件挂件视窗管理方法，其特征在于，所述子应用实时接收其对应外部容器的尺寸，并根据自身需求决定是否对内部页面布局进行响应式变更。

8.一种桌面端软件挂件视窗系统，其特征在于，包括：

建立模块，用于创建主视窗和多个挂件视窗，并将所述挂件视窗放到外部容器中运行；

层级配置模块，用于将主视窗位于底部，其显示层级最低，多个所述挂件视窗具有不同的显示层级,后显示的挂件视窗比前面的挂件视窗显示层级高，并且获得当前窗口焦点的挂件视窗会自动获得最高的显示层级；

通信模块，用于进行主应用和子应用之间的通信，实现对所述挂件视窗的管理。

Images