CN105653278B - 多个WebApp的运行系统及方法 - Google Patents
多个WebApp的运行系统及方法 Download PDFInfo
- Publication number
- CN105653278B CN105653278B CN201511019863.4A CN201511019863A CN105653278B CN 105653278 B CN105653278 B CN 105653278B CN 201511019863 A CN201511019863 A CN 201511019863A CN 105653278 B CN105653278 B CN 105653278B
- Authority
- CN
- China
- Prior art keywords
- webapp
- picture
- tree
- layer
- resource
- 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.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明提出一种多个WebApp的运行系统及方法,该系统包括:WebApp管理模块;进程管理模块;动画模块;窗口树生成模块,用于生成描述所述多个WebApp资源的窗口树;参数注入与画面整合模块,用于为窗口树生成模块注入相应的参数,并对多个WebApp的运行画面进行整合;图层树生成模块,用于为多个WebApp的运行画面构造图层树,图层树用于描述画面图层结构和响应的资源节点;参数注入与画面转换模块,用于为图层树生成模块注入相应的参数,并对多个WebApp的运行画面进行转换;处理器。本发明的实施例可以实现在一个窗口画面里面运行并显示两个以上的WebApp,并对每个独立运行的WebApp的动态画面进行叠加、融合、切换、拼接等操作,进而提升用户的使用体验。
Description
技术领域
本发明涉及计算机应用技术领域,特别涉及一种多个WebApp的运行系统及方法。
背景技术
WebApp是指基于Web的系统和应用,其作用是向广大的最终用户发布一组复杂的内容和功能。从一个简单的帮助消费者计算汽车租借费用的网页,到为商业人员和度假者提供全套旅游服务的大型复杂的网络(Web)站点,都是WebApp。它包括一些完整的Web站点,Web站点的专门功能以及在Internet、Intranet或ExtraNet上的信息处理应用。
相关技术中,WebApp运行平台无法实现在一个窗口画面里面运行并显示两个以上的WebApp,并对每个独立运行的WebApp的动态画面进行叠加、融合、切换、拼接等操作,进而影响用户的使用体验。
发明内容
本发明旨在至少解决上述技术问题之一。
为此,本发明的一个目的在于提出一种多个WebApp的运行系统。该方法可以实现在一个窗口画面里面运行并显示两个以上的WebApp,并对每个独立运行的WebApp的动态画面进行叠加、融合、切换、拼接等操作,进而提升用户的使用体验。
本发明的另一个目的在于提出一种多个WebApp的运行方法。
为了实现上述目的,本发明的第一方面的实施例公开了一种多个WebApp的运行系统,包括:WebApp管理模块,用于对多个WebApp进行运行管理;进程管理模块,用于生成对应于所述多个WebApp运行的多个rendor进程,并对所述多个rendor进程进行管理;动画模块,用于为所述多个WebApp运行提供运行动画;窗口树生成模块,用于生成描述所述多个WebApp资源的窗口树;参数注入与画面整合模块,用于为所述窗口树生成模块注入相应的参数,并对所述多个WebApp的运行画面进行整合;图层树生成模块,用于为所述多个WebApp的运行画面构造图层树,所述图层树用于描述画面图层结构和响应的资源节点;参数注入与画面转换模块,用于为所述图层树生成模块注入相应的参数,并对所述多个WebApp的运行画面进行转换;处理器,所述处理器用于缓存和处理所述图层树生成模块生成的数据,以控制所述多个WebApp的运行。
根据本发明实施例的多个WebApp的运行系统,可以实现在一个窗口画面里面运行并显示两个以上的WebApp,并对每个独立运行的WebApp的动态画面进行叠加、融合、切换、拼接等操作,进而提升用户的使用体验。
进一步地,所述窗口树描述的所述多个WebApp资源包括:WebApp的运行画面的布局和资源,所述资源包括所述WebApp的运行画面中每个像素点的坐标以及所述WebApp的运行画面的窗口大小。
进一步地,所述图层树描述的画面图层结构和响应的资源节点包括:融合位置坐标以及融合窗口大小。
进一步地,所述图层树生成模块为所述多个WebApp的运行画面构造图层树,包括:对位置坐标相同而内容不同的节点资源进行处理,生成用于描述画面图层结构和响应的资源节点的图层树。
本发明的第二方面的实施例公开了一种多个WebApp的运行方法,包括以下步骤:生成对应于多个WebApp运行的多个rendor进程,并对所述多个rendor进程进行管理;为所述多个WebApp运行提供运行动画;生成描述所述多个WebApp资源的窗口树;为所述窗口树注入相应的参数,并对所述多个WebApp的运行画面进行整合;为所述多个WebApp的运行画面构造图层树,所述图层树用于描述画面图层结构和响应的资源节点;为所述图层树注入相应的参数,并对所述多个WebApp的运行画面进行转换;缓存和处理所述图层树生成模块生成的数据,以控制所述多个WebApp的运行。
根据本发明实施例的多个WebApp的运行方法,可以实现在一个窗口画面里面运行并显示两个以上的WebApp,并对每个独立运行的WebApp的动态画面进行叠加、融合、切换、拼接等操作,进而提升用户的使用体验。
进一步地,所述窗口树描述的所述多个WebApp资源包括:WebApp的运行画面的布局和资源,所述资源包括所述WebApp的运行画面中每个像素点的坐标以及所述WebApp的运行画面的窗口大小。
进一步地,所述图层树描述的画面图层结构和响应的资源节点包括:融合位置坐标以及融合窗口大小。
进一步地,为所述多个WebApp的运行画面构造图层树,包括:对位置坐标相同而内容不同的节点资源进行处理,生成用于描述画面图层结构和响应的资源节点的图层树。
本发明的附加方面和优点将在下面的描述中部分给出,部分将从下面的描述中变得明显,或通过本发明的实践了解到。
附图说明
本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解,其中:
图1是根据本发明一个实施例的多个WebApp的运行系统的结构框图;
图2是基于本发明一个实施例的多个WebApp的运行系统的WebApp执行平台示意图;
图3是根据本发明一个实施例的窗口树的示意图;以及
图4是根据本发明一个实施例的图层树的示意图。
具体实施方式
下面详细描述本发明的实施例,所述实施例的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的,仅用于解释本发明,而不能理解为对本发明的限制。
在本发明的描述中,需要理解的是,术语“中心”、“纵向”、“横向”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系,仅是为了便于描述本发明和简化描述,而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作,因此不能理解为对本发明的限制。此外,术语“第一”、“第二”仅用于描述目的,而不能理解为指示或暗示相对重要性。
在本发明的描述中,需要说明的是,除非另有明确的规定和限定,术语“安装”、“相连”、“连接”应做广义理解,例如,可以是固定连接,也可以是可拆卸连接,或一体地连接;可以是机械连接,也可以是电连接;可以是直接相连,也可以通过中间媒介间接相连,可以是两个元件内部的连通。对于本领域的普通技术人员而言,可以具体情况理解上述术语在本发明中的具体含义。
以下结合附图描述根据本发明实施例的多个WebApp的运行系统及方法。
图1是根据本发明一个实施例的多个WebApp的运行系统的结构框图。如图1所示,根据本发明一个实施例的多个WebApp的运行系统,包括:WebApp管理模块110、进程管理模块120、动画模块130、窗口树生成模块140、参数注入与画面整合模块150、图层树生成模块160、参数注入与画面转换模块170和处理器180。
其中,WebApp管理模块110用于对多个WebApp进行运行管理。进程管理模块120用于生成对应于所述多个WebApp运行的多个rendor进程,并对所述多个rendor进程进行管理。动画模块130用于为所述多个WebApp运行提供运行动画。窗口树生成模块140用于生成描述所述多个WebApp资源的窗口树。参数注入与画面整合模块150用于为所述窗口树生成模块注入相应的参数,并对所述多个WebApp的运行画面进行整合。图层树生成模块160用于为所述多个WebApp的运行画面构造图层树,所述图层树用于描述画面图层结构和响应的资源节点。参数注入与画面转换模块170用于为所述图层树生成模块注入相应的参数,并对所述多个WebApp的运行画面进行转换。处理器180用于缓存和处理所述图层树生成模块生成的数据,以控制所述多个WebApp的运行。
其中,窗口树描述的所述多个WebApp资源包括:WebApp的运行画面的布局和资源,所述资源包括所述WebApp的运行画面中每个像素点的坐标以及所述WebApp的运行画面的窗口大小。
图层树描述的画面图层结构和响应的资源节点包括:融合位置坐标以及融合窗口大小。
图层树生成模块160为所述多个WebApp的运行画面构造图层树,包括:对位置坐标相同而内容不同的节点资源进行处理,生成用于描述画面图层结构和响应的资源节点的图层树。
结合图1和图2所示,本发明实现在一个窗口画面中可以并行运行多个WebApp,并且每个运行的WebApp的画面可以互相叠加、融合、切换和拼接。如图2所述,linux系统层包括基本的linux操作系统内核、底层图形库、根文件系统等。硬件层可以是以ARM系列处理器架构或者是X86系列处理器架构为核心的硬件主板,既可以是面向PC领域的也可以是面向嵌入式领域的。WebApp层包括两个以上的独立运行的WebApp。
WebApp平台(即本发明实施例的多个WebApp的运行系统)支持WebApp的运行、安装、卸载、调度管理等,也支持多个WebApp的并行运行,并且每个运行的WebAppp的画面可以互相叠加、融合、切换和拼接。
具体地说,Web app runtime模块(即本发明实施例的WebApp管理模块):用于管理平台运行的各个web app,包括安装、运行、挂起、卸载等。
Rendor manage模块(即本发明实施例的进程管理模块):能够动态的生成多个rendor进程,并对每个rendor进程进行管理。
动画系统模块(即本发明实施例的动画模块):支持web app的一些动画效果实现。
Rendor模块:在一个独立进程中运行web app并解析相应的代码和资源文件。
Window tree模块(即本发明实施例的窗口树生成模块):生成一个窗口树用于描述web app资源。
compositor模块(即本发明实施例的参数注入与画面整合模块):为window tree注入相应的参数,并对多个web app的动态画面进行整合。
Layer tree模块(即本发明实施例的图层树生成模块):构建图层树,描述画面图层结构和响应的资源节点。
Animation transform模块(即本发明实施例的参数注入与画面转换模块):为layer tree注入相应的参数,并对动态画面数据进行转换。
GPU模块(即本发明实施例的处理器):缓存layer tree生成的图像数据,并与底层GPU处理器通信,将图像数据发送给GPU进行下一步的合成。
本发明的实施例可运行多个web app,首选是Web app runtime模块对每个webapp进行管理,根据用户的设置来决定那些app在前台运行,并可动态的切换app的前后台显示。后续的rendor manage模块为每个app动态的生成一个独立进程的rendor模块,rendor模块中运行web app,并对web app中的多媒体资源、代码逻辑、相关依赖库等文件进行解析,生成相应的rendor tree和dom tree,生成的解析信息最后传递给下层的window tree模块。compositor模块帮助window tree模块整合多个rendor模块发送来的解析信息,并提供必要的参数。window tree模块将rendor解析后并经compositor模块合成并注入参数的解析数据进行融合,并生成一颗具有多个资源节点的窗口树。
窗口树的格式如图3所示,window tree 1描述了web app1生成的窗口画面的布局和资源,例如图形T11所在的位置是:X轴第100个像素、Y轴第100个像素为起点的位置,覆盖的区域根据T11的大小来决定。同样,window tree 2描述了web app2生成的窗口画面的布局和资源,例如图形T21所在的位置是:X轴第100个像素、Y轴第100个像素为起点的位置,覆盖的区域根据T21的大小来决定。那么,每一个window tree描述了一个窗口画面的具体描画细节,而且是实时动态生成和不断变化的,例如以每秒40帧的速度进行更新和描画。
如图4所示,layer tree是将多个window tree进行合并后生成的新的画面描画树,例如将window tree1和window tree2进行合并,合并需求是将window tree2中的图形T21融合到window tree1中图形T11的位置,即web app2中的图形元素T21融合到web app1中去,替换T11.具体的操作就是用window tree2中的图形T21节点替换window tree1中的图形T11节点,生成新的window tree1,并用新的window tree1描绘画面,最终生成画面后发送给底层的GPU输出。
Layer tree模块构建出图层树之后对相同位置不同内容的节点资源最后进行处理,最后生成图像资源的图层树,并经Animat1ion transform模块转换后生成图像数据。图像数据经过GPU模块进行转换合成后输出到终端进行显示。
根据本发明实施例的多个WebApp的运行系统,可以实现在一个窗口画面里面运行并显示两个以上的WebApp,并对每个独立运行的WebApp的动态画面进行叠加、融合、切换、拼接等操作,进而提升用户的使用体验。
进一步地,根据本发明一个实施例的多个WebApp的运行方法,包括以下步骤:
生成对应于多个WebApp运行的多个rendor进程,并对所述多个rendor进程进行管理;
为所述多个WebApp运行提供运行动画;
生成描述所述多个WebApp资源的窗口树;
为所述窗口树注入相应的参数,并对所述多个WebApp的运行画面进行整合;
为所述多个WebApp的运行画面构造图层树,所述图层树用于描述画面图层结构和响应的资源节点;
为所述图层树注入相应的参数,并对所述多个WebApp的运行画面进行转换;
缓存和处理所述图层树生成模块生成的数据,以控制所述多个WebApp的运行。
进一步地,所述窗口树描述的所述多个WebApp资源包括:WebApp的运行画面的布局和资源,所述资源包括所述WebApp的运行画面中每个像素点的坐标以及所述WebApp的运行画面的窗口大小。
进一步地,所述图层树描述的画面图层结构和响应的资源节点包括:融合位置坐标以及融合窗口大小。
进一步地,为所述多个WebApp的运行画面构造图层树,包括:对位置坐标相同而内容不同的节点资源进行处理,生成用于描述画面图层结构和响应的资源节点的图层树。
根据本发明实施例的多个WebApp的运行方法,可以实现在一个窗口画面里面运行并显示两个以上的WebApp,并对每个独立运行的WebApp的动态画面进行叠加、融合、切换、拼接等操作,进而提升用户的使用体验。
需要说明的是,本发明实施例的多个WebApp的运行方法的具体实现方式与本发明实施例的多个WebApp的运行系统的具体实现方式类似,具体请参见方法部分的描述,为了减少冗余,此处不做赘述。
在本说明书的描述中,参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不一定指的是相同的实施例或示例。而且,描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
尽管已经示出和描述了本发明的实施例,本领域的普通技术人员可以理解:在不脱离本发明的原理和宗旨的情况下可以对这些实施例进行多种变化、修改、替换和变型,本发明的范围由权利要求及其等同限定。
Claims (8)
1.一种多个WebApp的运行系统,其特征在于,包括:
WebApp管理模块,用于对多个WebApp进行运行管理;
进程管理模块,用于生成对应于所述多个WebApp运行的多个rendor进程,并对所述多个rendor进程进行管理,其中rendor指图像渲染;
动画模块,用于为所述多个WebApp运行提供运行动画;
窗口树生成模块,用于生成描述所述多个WebApp资源的窗口树;
参数注入与画面整合模块,用于为所述窗口树生成模块注入相应的参数,并对所述多个WebApp的运行画面进行整合;
图层树生成模块,用于为所述多个WebApp的运行画面构造图层树,所述图层树用于描述画面图层结构和响应的资源节点;
参数注入与画面转换模块,用于为所述图层树生成模块注入相应的参数,并对所述多个WebApp的运行画面进行转换;
处理器,所述处理器用于缓存和处理所述图层树生成模块生成的数据,以控制所述多个WebApp的运行。
2.根据权利要求1所述的WebApp的运行系统,其特征在于,所述窗口树描述的所述多个WebApp资源包括:WebApp的运行画面的布局和资源,所述资源包括所述WebApp的运行画面中每个像素点的坐标以及所述WebApp的运行画面的窗口大小。
3.根据权利要求1所述的WebApp的运行系统,其特征在于,所述图层树描述的画面图层结构和响应的资源节点包括:融合位置坐标以及融合窗口大小。
4.根据权利要求3所述的WebApp的运行系统,其特征在于,所述图层树生成模块为所述多个WebApp的运行画面构造图层树,包括:对位置坐标相同而内容不同的节点资源进行处理,生成用于描述画面图层结构和响应的资源节点的图层树。
5.一种多个WebApp的运行方法,其特征在于,包括以下步骤:
生成对应于多个WebApp运行的多个rendor进程,并对所述多个rendor进程进行管理,其中rendor指图像渲染;
为所述多个WebApp运行提供运行动画;
生成描述所述多个WebApp资源的窗口树;
为所述窗口树注入相应的参数,并对所述多个WebApp的运行画面进行整合;
为所述多个WebApp的运行画面构造图层树,所述图层树用于描述画面图层结构和响应的资源节点;
为所述图层树注入相应的参数,并对所述多个WebApp的运行画面进行转换;
缓存和处理所述图层树生成模块生成的数据,以控制所述多个WebApp的运行。
6.根据权利要求5所述的WebApp的运行方法,其特征在于,所述窗口树描述的所述多个WebApp资源包括:WebApp的运行画面的布局和资源,所述资源包括所述WebApp的运行画面中每个像素点的坐标以及所述WebApp的运行画面的窗口大小。
7.根据权利要求6所述的WebApp的运行方法,其特征在于,所述图层树描述的画面图层结构和响应的资源节点包括:融合位置坐标以及融合窗口大小。
8.根据权利要求7所述的WebApp的运行方法,其特征在于,为所述多个WebApp的运行画面构造图层树,包括:对位置坐标相同而内容不同的节点资源进行处理,生成用于描述画面图层结构和响应的资源节点的图层树。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201511019863.4A CN105653278B (zh) | 2015-12-30 | 2015-12-30 | 多个WebApp的运行系统及方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201511019863.4A CN105653278B (zh) | 2015-12-30 | 2015-12-30 | 多个WebApp的运行系统及方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN105653278A CN105653278A (zh) | 2016-06-08 |
CN105653278B true CN105653278B (zh) | 2019-01-25 |
Family
ID=56478161
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201511019863.4A Active CN105653278B (zh) | 2015-12-30 | 2015-12-30 | 多个WebApp的运行系统及方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN105653278B (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109165013A (zh) * | 2018-07-04 | 2019-01-08 | 惠州市德赛西威汽车电子股份有限公司 | 应用程序中多图层叠加显示方法、装置、存储介质及终端 |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101388979A (zh) * | 2007-09-14 | 2009-03-18 | 中兴通讯股份有限公司 | 一种在视频画面上叠加用户界面的方法 |
CN105159999A (zh) * | 2015-09-08 | 2015-12-16 | 百度在线网络技术(北京)有限公司 | 动态页面的展现方法及装置 |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20110307808A1 (en) * | 2010-06-10 | 2011-12-15 | Microsoft Corporation | Rendering incompatible content within a user interface |
-
2015
- 2015-12-30 CN CN201511019863.4A patent/CN105653278B/zh active Active
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101388979A (zh) * | 2007-09-14 | 2009-03-18 | 中兴通讯股份有限公司 | 一种在视频画面上叠加用户界面的方法 |
CN105159999A (zh) * | 2015-09-08 | 2015-12-16 | 百度在线网络技术(北京)有限公司 | 动态页面的展现方法及装置 |
Non-Patent Citations (1)
Title |
---|
WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析;luluping;《https://www.cnblogs.com/luluping/archive/2013/04/05/3000460.html》;20130405;全文 |
Also Published As
Publication number | Publication date |
---|---|
CN105653278A (zh) | 2016-06-08 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US20210133388A1 (en) | Webpage rendering method, device, electronic apparatus and storage medium | |
CN111737032B (zh) | 一种基于微内核系统的子程序运行方法、装置和电子设备 | |
CN110704136B (zh) | 小程序组件的渲染方法、客户端、电子设备及存储介质 | |
US8589865B2 (en) | Composite applications using service component architecture model and open virtualization format | |
WO2018050003A1 (zh) | 3D canvas网页元素的渲染方法、装置及电子设备 | |
US9122658B2 (en) | Webpage display system leveraging OSGi | |
CN100437483C (zh) | 基于Web页面的事件分发方法与装置 | |
CN106997298B (zh) | 一种应用资源获取方法及装置 | |
CN104995601B (zh) | 切换到本机网页应用程序及从本机网页应用程序切换离开 | |
CN111026490B (zh) | 页面渲染方法、装置、电子设备及存储介质 | |
CN107783821A (zh) | 车载一体虚拟化方法和装置 | |
CN111008019B (zh) | 小程序的Web化运行方法、装置、设备及介质 | |
CN104573066A (zh) | 页面复用方法及装置 | |
CN103605527A (zh) | 实现云计算应用间界面集成和统一样式展现的系统及方法 | |
CN112905179A (zh) | 移动端h5页面生成方法、装置、电子设备和存储介质 | |
CN104010031A (zh) | 一种改善Web浏览器应用效率的分布式协同方法 | |
CN103077034B (zh) | 混合虚拟化平台java应用迁移方法与系统 | |
CN103677970A (zh) | 实现终端本地桌面和远端虚拟桌面合并显示的系统和方法 | |
CN105653278B (zh) | 多个WebApp的运行系统及方法 | |
CN115794093A (zh) | 一种基于多应用融合的微前端实现方法 | |
CN110807162A (zh) | 加载占位图的方法和装置 | |
CN113254043A (zh) | Web前端项目处理方法、装置、电子设备及存储介质 | |
JP2021068414A (ja) | ラッピング方法、登録方法、装置、レンダリングディバイス、及びプログラム | |
CN109983504A (zh) | 通过使用多层移动来促进立体视觉的方法和装置 | |
US20180205617A1 (en) | System and method for graphically building a virtual network of computer components |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |