一种实现单窗口下多标签页的切换方法及装置与流程

本发明涉及通信技术领域，尤其涉及一种实现单窗口下多标签页的切换方法及装置。

背景技术：

在web开发中，需要使用很多的第三方库，用来实现编辑器的各种功能。而ace作为一个成熟的第三方库，提供了强大的编辑器组件。ace编辑器可以编写代码或文本，能够实现代码高亮、缩进等功能。然后ace本身并没有多标签页的状态。当用户编写python的频率越来越高，有越来越多的python文件需要相互依赖编辑的时候，单页面或者多窗口打开的编辑器无法满足用户的编写需求，为用户在ace编辑器中编辑文本带来了不便。

因此，现有技术还有待于改进和发展。

技术实现要素：

鉴于上述现有技术的不足，本发明的目的在于提供一种实现单窗口下多标签页的切换方法及装置，旨在解决现有技术中ace编辑器的单面或者多窗口打开的编辑器无法满足用户的编写需求的问题。

本发明的技术方案如下：

一种实现单窗口下多标签页的切换方法，应用于图形化编辑器，所述方法包括：

获取预先编写好的顶部的标签页组件；

获取若干个标签页的标识id,根据标识id将标签页的对象属性进行存储；

检测到标签页切换指令，获取切换后的标签页的标识id,将切换后的标签页的标识id标记作为当前标签页的标识id；

根据标识id获取对应标签页的对象属性，根据对象属性对标签页的对象进行渲染，完成标签页面切换。

可选地，所述获取预先编写好的顶部的标签页组件，包括：

获取预先通过reactjs和css的预编译处理器sass编写的顶部的标签页组件。

可选地，所述获取若干个标签页的标识id,根据标识id将标签页的对象属性进行存储前，还包括：

在redux中加入state,所述state用于存储标签页的对象属性。

可选地，所述获取若干个标签页的标识id,根据标识id将标签页的对象属性进行存储，包括：

获取若干个标签页的唯一的hash值,将唯一的hash值作为标签页对应的标识id；

以标识id的值作为key值，将对应的标签页的对象属性存储在state中。

可选地，所述检测到标签页切换指令，获取切换后的标签页的标识id,将切换后的标签页的标识id标记作为当前标签页的标识id，包括：

检测到标签页切换指令，redux会触发一个动作函数，同时获取当前切换后的标签页；

获取存储的切换后的标签页的标识id,将切换后的标签页的标识id传递给动作函数；

根据动作函数将切换后的标签页的标识id替换标记当前标签页的标识id，实现将切换后的标签页的标识id作为当前标签页的标识id。

可选地，所述对象属性包括标签页的文本数据、积木数据、保存状态和编辑状态。

可选地，所述根据标识id获取对应标签页的对象属性，根据对象属性对标签页的对象进行渲染，完成标签页面切换，包括：

根据标识id获取对应标签页的文本数据和积木数据；

通过stevalue接口及前端api接口渲染当前标签页的文本和积木，完成标签页面切换。

本发明又一实施例还提供了一种实现单窗口下多标签页的切换装置，所述装置包括至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述的实现单窗口下多标签页的切换方法。

本发明的另一实施例还提供了一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行上述的实现单窗口下多标签页的切换方法。

本发明的另一种实施例提供了一种计算机程序产品，所述计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被处理器执行时，使所述处理器执行上述的实现单窗口下多标签页的切换方法。

有益效果：本发明公开了一种实现单窗口下多标签页的切换方法及装置，相比于现有技术，本发明实施例登旨在实现单窗口下多标签页编辑的功能，每个标签页相当于独立打开单个窗口进行编辑，每个窗口下的对象都是独立的，在基于js编程的基础上，使得图形化编辑器的功能日趋完善。

附图说明

下面将结合附图及实施例对本发明作进一步说明，附图中：

图1为本发明一种实现单窗口下多标签页的切换方法较佳实施例的流程图；

图2为本发明一种实现单窗口下多标签页的切换装置较佳实施例的硬件结构示意图。

具体实施方式

为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。以下结合附图对本发明实施例进行介绍。

请参阅图1，图1为本发明一种实现单窗口下多标签页的切换方法较佳实施例的流程图。本发明实施例中的实现单窗口下多标签页的切换方法应用于图形化编辑器，如图1所示，其包括步骤：

步骤s100、获取预先编写好的顶部的标签页组件；

步骤s200、获取若干个标签页的标识id,根据标识id将标签页的对象属性进行存储；

步骤s300、检测到标签页切换指令，获取切换后的标签页的标识id,将切换后的标签页的标识id标记作为当前标签页的标识id；

步骤s400、根据标识id获取对应标签页的对象属性，根据对象属性对标签页的对象进行渲染，完成标签页面切换。

具体实施时，图形化编辑器是指同时支持文本模式编程和积木编程的编程软件，例如，点猫公司的海龟编辑器就是其中的一种。本发明实施例的技术方案应用在海龟编辑器的网页端。以海龟编辑器的网页端为例，海龟编辑器网页端在文本模式下，使编辑器窗口显示编程文本，而在积木模式下，编辑器窗口一侧显示积木编程，另一侧显示对应的编程文本。

通过获取预先通过js语言的框架库及预编译处理器对顶部的标签页组件进行编写，并在基于js语言的第三方库中存储所有标签页的标识id,每个标签页的标识id都是唯一的。当检测到标签页切换指令，切换前的标签页记为第一标签页，切换后的标签页记为第二标签页，第一标签页的标识id记为第一标识id，第二标签页的标识id记为第二标识id,当前显示的标签页为第一标识id,在检测到标签切换指令后，将第二标识id作为当前显示的标签页的标识id，根据第二标识id获取第二标签页的对象属性，根据第二标签页的对象属性对当前标签页的对象进行渲染，从而实现当前显示页面为第二标签页，完成标签页面的切换。

使用本发明的技术方案，图形化编辑器能够实现单窗口下打开标记多个python文档，并且每个标签页下的文本，积木和编辑状态都能够相互独立，极大的提高了用户的编写效率。

进一步地，获取预先编写好的顶部的标签页组件，包括：

获取预先通过reactjs和css的预编译处理器sass编写的顶部的标签页组件。

具体实施时，通过facebook的reactjs(js语言的框架库)和css的预编译处理器sass(本质如同css)写好顶部的标签页组件，并且切换标签页的时候，通过点击事件改变动态该表当前标签页的class，来区分当前标签页和其他标签页。例如当前标签页的class为current，而其他标签页的class为normal，并针对产品需求，使用sass写好该class的样式，点击事件会获取当前点击元素，然后改变该元素的class，可以改变当前标签页和其他标签页的样式。

进一步地，获取若干个标签页的标识id,根据标识id将标签页的对象属性进行存储前，还包括：

在redux中加入state,所述state用于存储标签页的对象属性。

具体实施时，在redux(基于js语言的一个第三方库，常见的是与react共同使用，管理前端组件状态的库)中加入state，假设该state的名字叫做tab_list_state(state的名字是可以自定义的，根据开发者的书写习惯决定)，state用于存储标签页的对象属性。

进一步地，获取若干个标签页的标识id,根据标识id将标签页的对象属性进行存储，包括：

获取若干个标签页的唯一的hash值,将唯一的hash值作为标签页对应的标识id；

以标识id的值作为key值，将对应的标签页的对象属性存储在state中。

具体实施时，每个标签页附上一个唯一的hash值，一般以当前时间的时间戳作为hash值，作为该标签页的id，以id值为key值，将每个标签页的文本，保存状态，积木等信息作为该标签页对象的属性存入到state中。

在一些其他的实施例中，检测到标签页切换指令，获取切换后的标签页的标识id,将切换后的标签页的标识id标记作为当前标签页的标识id，包括：

检测到标签页切换指令，redux会触发一个动作函数，同时获取当前切换后的标签页；

获取存储的切换后的标签页的标识id,将切换后的标签页的标识id传递给动作函数；

根据动作函数将切换后的标签页的标识id替换标记当前标签页的标识id，实现将切换后的标签页的标识id作为当前标签页的标识id。

具体实施时，每次切换标签的时候，通过redux的机制，点击事件会触发dispatch一个动作函数atcion，该点击事件触发时能够dom元素的事件机制，dom(dom—documentobjectmodel)是w3c国际组织的一套web标准。它定义了访问html文档对象的一套属性、方法和事件。获取到当前元素，我们通过预先存入的标签页id，拿到当前元素的id，将id值作为参数传递给action，action本质上就是个函数，这个函数的作用就是管理存储store的，我们将传递过来的id值替换旧的记录在store中的标记当前标签页id的state值，从而改变了当前选中的标签页的id,做到在数据层面上切换页签的效果。

进一步地，对象属性包括标签页的文本数据、积木数据、保存状态和编辑状态。根据标识id获取对应标签页的对象属性，根据对象属性对标签页的对象进行渲染，完成标签页面切换，包括：

根据标识id获取对应标签页的文本数据和积木数据；

通过stevalue接口及前端api接口渲染当前标签页的文本和积木，完成标签页面切换。

具体实施时，将存在该state中的文本和积木数据拿出来，通过ace的setvalue接口以及blockly的dom_to_workspace等前端api接口分别对应渲染当前面板的文本和积木。即积木模式下的积木样式和代码模式下的文本信息。

由以上方法实施例可知，本发明提供了一种实现单窗口下多标签页的切换方法，获取预先编写好的顶部的标签页组件；获取若干个标签页的标识id,根据标识id将标签页的对象属性进行存储；检测到标签页切换指令，获取切换后的标签页的标识id,将切换后的标签页的标识id标记作为当前标签页的标识id；根据标识id获取对应标签页的对象属性，根据对象属性对标签页的对象进行渲染，完成标签页面切换。本发明实施例旨在实现单窗口下多标签页编辑的功能，每个标签页相当于独立打开单个窗口进行编辑，每个窗口下的对象都是独立的，在基于js编程的基础上，使得图形化编辑器的功能日趋完善。

本发明另一实施例提供一种实现单窗口下多标签页的切换装置，如图2所示，装置10包括：

一个或多个处理器110以及存储器120，图2中以一个处理器110为例进行介绍，处理器110和存储器120可以通过总线或者其他方式连接，图2中以通过总线连接为例。

处理器110用于完成装置10的各种控制逻辑，其可以为通用处理器、数字信号处理器(dsp)、专用集成电路(asic)、现场可编程门阵列(fpga)、单片机、arm(acornriscmachine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。还有，处理器110还可以是任何传统处理器、微处理器或状态机。处理器110也可以被实现为计算设备的组合，例如，dsp和微处理器的组合、多个微处理器、一个或多个微处理器结合dsp核、或任何其它这种配置。

存储器120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的实现单窗口下多标签页的切换方法对应的程序指令。处理器110通过运行存储在存储器120中的非易失性软件程序、指令以及单元，从而执行装置10的各种功能应用以及数据处理，即实现上述方法实施例中的实现单窗口下多标签页的切换方法。

存储器120可以包括存储程序区和存储数据区，其中，存储程序区可存储操作装置、至少一个功能所需要的应用程序；存储数据区可存储根据装置10使用所创建的数据等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器120可选包括相对于处理器110远程设置的存储器，这些远程存储器可以通过网络连接至装置10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

一个或者多个单元存储在存储器120中，当被一个或者多个处理器110执行时，执行上述任意方法实施例中的实现单窗口下多标签页的切换方法，例如，执行以上描述的图1中的方法步骤s100至步骤s400。

本发明实施例提供了一种非易失性计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行，例如，执行以上描述的图1中的方法步骤s100至步骤s400。

作为示例，非易失性存储介质能够包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦rom(eeprom)或闪速存储器。易失性存储器能够包括作为外部高速缓存存储器的随机存取存储器(ram)。通过说明丽非限制，ram可以以诸如同步ram(sram)、动态ram、(dram)、同步dram(sdram)、双数据速率sdram(ddrsdram)、增强型sdram(esdram)、synchlinkdram(sldram)以及直接rambus(兰巴斯)ram(drram)之类的许多形式得到。本文中所描述的操作环境的所公开的存储器组件或存储器旨在包括这些和/或任何其他适合类型的存储器中的一个或多个。

本发明的另一种实施例提供了一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行上述方法实施例的实现单窗口下多标签页的切换方法。例如，执行以上描述的图1中的方法步骤s100至步骤s400。

以上所描述的实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际需要选择其中的部分或者全部模块来实现本实施例方案的目的。

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

除了其他之外，诸如"能够'、"能"、"可能"或"可以"之类的条件语言除非另外具体地陈述或者在如所使用的上下文内以其他方式理解，否则一般地旨在传达特定实施方式能包括(然而其他实施方式不包括)特定特征、元件和/或操作。因此，这样的条件语言一般地不旨在暗示特征、元件和/或操作对于一个或多个实施方式无论如何都是需要的或者一个或多个实施方式必须包括用于在有或没有学生输入或提示的情况下判定这些特征、元件和/或操作是否被包括或者将在任何特定实施方式中被执行的逻辑。

已经在本文中在本说明书和附图中描述的内容包括能够提供实现单窗口下多标签页的切换方法及装置的示例。当然，不能够出于描述本公开的各种特征的目的来描述元件和/或方法的每个可以想象的组合，但是可以认识到，所公开的特征的许多另外的组合和置换是可能的。因此，显而易见的是，在不脱离本公开的范围或精神的情况下能够对本公开做出各种修改。此外，或在替代方案中，本公开的其他实施例从对本说明书和附图的考虑以及如本文中所呈现的本公开的实践中可能是显而易见的。意图是，本说明书和附图中所提出的示例在所有方面被认为是说明性的而非限制性的。尽管在本文中采用了特定术语，但是它们在通用和描述性意义上被使用并且不用于限制的目的。