发明内容
有鉴于此,本发明的目的在于提供一种基于GUI的交互方法、装置及电子设备,以使GUI与逻辑交互的结构简单易懂,节省了调试和问题查找所需的时间。
第一方面,本发明实施例提供了一种基于GUI的交互方法,包括:
将数据层的数据与用户界面的控件封装成绑定对象;
当监测到数据发生变化时,刷新与数据对应的控件进行展示;
当监测到控件接收到用户的操作指令后,修改与控件对应的数据,并将修改后的数据同步到数据层。
在一种实施方式中,当监测到数据发生变化时,刷新与数据对应的控件进行展示的步骤,包括:
当监测到数据发生变化时,通过校验器判断数据的类型和与数据对应的控件的类型是否匹配;
如果不匹配,通过转换器将数据的类型转换为与控件匹配的类型,并刷新控件进行展示。
在一种实施方式中,当监测到控件接收到用户的操作指令后,修改与控件对应的数据,并将修改后的数据同步到数据层的步骤,包括:
当监测到控件接收到用户的操作指令后,通过校验器校验控件的操作指令对应的输入是否满足预设要求;
如果不满足,通过转换器将输入进行转换,以使其满足预设要求;
修改与控件对应的数据,并将修改后的数据同步到数据层。
在一种实施方式中,还包括:根据控件之间的逻辑关系建立逻辑树;
根据逻辑树和控件对应的渲染单元确定渲染节点,建立渲染树;其中,渲染节点包括一个或多个渲染单元;
根据渲染树将具有相同渲染条件的渲染单元合并成同一批次进行渲染并展示。
在一种实施方式中,根据渲染树将具有相同渲染条件的渲染单元合并成同一批次进行渲染并展示的步骤,包括:
将目标渲染单元填入待填充的空白纹理,以使待填充的空白纹理被划分为三个区域;其中,三个区域包括一个占用区域和两个未用区域;
采用递归的方式依次将与目标渲染单元具有相同纹理的渲染单元填入未用区域,直到待填充的空白纹理被填满;
将被填满的待填充的空白纹理合并成图集进行渲染并展示。
在一种实施方式中,根据渲染树将具有相同渲染条件的渲染单元合并成同一批次进行渲染并展示的步骤,包括:
当目标渲染单元的面积大于阈值时,将目标渲染单元作为一个批次进行绘制。
在一种实施方式中,方法还包括:当检测到控件发生变化时,通过脏标识对发生变化的控件进行标识;
对具有脏标识的控件进行更新。
第二方面,本发明实施例提供了一种基于GUI的交互装置,包括:
封装模块,用于将数据层的数据与用户界面的控件封装成绑定对象;
第一监测模块,用于当监测到数据发生变化时,刷新与数据对应的控件进行展示;
第二监测模块,用于当监测到控件接收到用户的操作指令后,修改与控件对应的数据,并将修改后的数据同步到数据层。
第三方面,本发明实施例提供了一种电子设备,包括处理器和存储器,存储器存储有能够被处理器执行的计算机可执行指令,处理器执行计算机可执行指令以实现上述第一方面提供的任一项的方法的步骤。
第四方面,本发明实施例提供了一种计算机可读存储介质,计算机可读存储介质上存储有计算机程序,计算机程序被处理器运行时执行上述第一方面提供的任一项的方法的步骤。
本发明实施例提供的上述基于GUI的交互方法、装置及电子设备,能够将数据层的数据与用户界面的控件直接联系起来,在数据发生变化时,能够自动刷新与数据对应的控件进行展示;在控件接收到用户的操作指令后,能够自动修改与控件对应的数据,并将修改后的数据同步到数据层。上述方法在修改数据时,能够自动刷新控件进行展示;在操作控件界面时,能够自动将修改的数据同步给数据层,无需定义事件处理器,使数据与控件的显示一一对应起来,从而简化了GUI与逻辑交互的结构,同时节省了调试和问题查找所需的时间。
本发明的其他特征和优点将在随后的说明书中阐述,并且,部分地从说明书中变得显而易见,或者通过实施本发明而了解。本发明的目的和其他优点在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。
为使本发明的上述目的、特征和优点能更明显易懂,下文特举较佳实施例,并配合所附附图,作详细说明如下。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合附图对本发明的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
目前GUI通常采用基于“事件驱动”的模式,即“事件-订阅-事件处理器”模式,具体来说是定义所需要的控件事件并进行注册,在事件处理器中完成对应的事件逻辑,从而导致GUI结构复杂难懂,调试和问题查找更加困难。基于此,本发明实施例提供的一种基于GUI的交互方法、装置及电子设备,可以简化GUI与逻辑交互的结构,节省调试和问题查找所需的时间。
为便于对本实施例进行理解,首先对本发明实施例所公开的一种基于GUI的交互方法进行详细介绍,参见图1所示的一种基于GUI的交互方法的流程示意图,该方法可以由电子设备执行,主要包括以下步骤S101至步骤S103:
步骤S101:将数据层的数据与用户界面的控件封装成绑定对象。
具体的,在GUI的设计过程中,程序的本质是数据和算法,数据会在存储、逻辑和展示三个层面流通,但算法在程序中的分布一般不均匀,对于一个三层结构的程序来说,算法一般分布:数据库内部、读取和写回数据、业务逻辑、数据展示以及界面和逻辑的交互。其中,数据展示以及界面和逻辑的交互两部分都与逻辑层紧密相关,以消息或者事件的方式与逻辑层沟通,一旦出现同一个数据需要在多处展示或修改时,用于同步的代码就会错综复杂。因此,本发明实施例提供了一种“底层机制”,可以将数据层的数据与用户界面的控件进行绑定,也就是在程序中封装成绑定对象,在数据与控件之间建立直接的联系。
步骤S102:当监测到数据发生变化时,刷新与数据对应的控件进行展示。
步骤S103:当监测到控件接收到用户的操作指令后,修改与控件对应的数据,并将修改后的数据同步到数据层。
在一种具体应用中,对于上述“底层机制”具体实现为:将数据和控件的显示一一对应起来,当修改数据时,“底层机制”可以自动刷新对应的控件进行展示;当操作控件界面的时候,“底层机制”可以自动将修改的数据同步给数据层。
本发明实施例提供的上述基于GUI的交互方法,能够将数据层的数据与用户界面的控件直接联系起来,在数据发生变化时,能够自动刷新与数据对应的控件进行展示;在控件接收到用户的操作指令后,能够自动修改与控件对应的数据,并将修改后的数据同步到数据层。上述方法在修改数据时,能够自动刷新控件进行展示;在操作控件界面时,能够自动将修改的数据同步给数据层,无需定义事件处理器,使数据与控件的显示一一对应起来,从而可以简化GUI与逻辑交互的结构,同时节省了调试和问题查找所需的时间。
考虑到数据和控件进行交互时,数据的类型与控件显示的类型需要相互匹配,因此,在进行数据和控件封装时,同时需要封装校验器和转换器作为数据与控件之间的桥梁,使得数据和控件可以更好地进行交互。具体的,对于上述步骤S102可以按照以下步骤a1至步骤a2来执行:
步骤a1:当监测到数据发生变化时,通过校验器判断数据的类型和与数据对应的控件的类型是否匹配。
具体的,在监测到数据发生变化时(也就是修改数据时),数据和控件的显示类型可能是不匹配的,例如一个字符串要显示到一个label控件上,因为label本身就是显示字符串的,因此数据和控件之间是匹配的;但是如果数据本身是一种抽象的结构,但控件显示需要显示字符,那么数据与控件之间就是不匹配的,在数据和控件的交互过程中就可能出现错误。因此可以通过封装校验器对数据的类型进行校验,判断数据和控件的显示是否匹配,当匹配时,则可以直接将数据的修改在控件上进行显示。
步骤a2:如果不匹配,通过转换器将数据的类型转换为与控件匹配的类型,并刷新控件进行展示。
具体的,当校验器校验出数据与控件的显示类型不匹配时,诸如:上述提到的数据是一种抽象的结构,控件显示为字符,那么可以利用转换器将抽象的数据转换为字符,在控件上进行显示。
进一步,对于上述步骤S103可以按照以下步骤b1至步骤b3来执行:
步骤b1:当监测到控件接收到用户的操作指令后,通过校验器校验控件的操作指令对应的输入是否满足预设要求。
具体的,当在用户界面对控件进行操作时,有的数据和控件是不匹配的,比如数据是数字,但控件可以输入字符串,那么就可以通过校验器判断输入的字符串是不是数字以及能不能转换成对应的数据类型(也就是判断控件的操作指令对应的输入是否满足预设要求),如果能,那么从控件接收到的输入反馈才是有意义的,否则是一个错误的输入。
步骤b2:如果不满足,通过转换器将输入进行转换,以使其满足预设要求。
当校验器校验出数据与控件的显示类型不匹配时,可以通过转换器将控件的输入转换为数字,以使其满足数据的类型。
步骤b3:修改与控件对应的数据,并将修改后的数据同步到数据层。
具体的,当控件的输入与数据类型向匹配后,数据可以响应对控件的操作指令,自动进行修改,并且将修改后的数据同步到数据层。
为了更好的理解上述方法,本发明实施例还提供了一种数据和控件绑定界面的结构示意图,参见图2所示,示意出:初始化时,即将数据与实际的控件“联系”起来,也就是在程序中封装成绑定对象;当数据和控件其中的一方发生变化时,通知另外一方,以驱动其做出对应的操作,如数据变化驱动界面展示,界面操作的变化同步至数据,如需要,可以抛出数据改变的事件(也就是激发事件)以驱动逻辑执行;在相互交互时,可以封装校验器和转换器,使得数据与控件之间可以彼此相互理解(也就是数据类型与控件显示类型相互匹配)。但是在某些特定的情况下,String类型与文本控件有天然的对应关系,则校验器和转换器可做省略。
进一步,对于数据侧,数据对象具有其对应的属性,也就是结构体的一个成员,比如对于结构体Test来说:
VarA即为Test的一个成员,用于记录一个整形数据,那么VarA就是结构体Test的一个属性,记录数据的作用。而对于控件侧的依赖属性,本质上来说,对于控件本身来说,真正的属性可以是显示的文本、在窗口中的位置、控件的显示颜色等等,并不会是VarA这样的属性,也就是说VarA这个属性本质上是属于该控件所关联的数据的,而不是这个控件本身,但当这个属性在控件方面又要把这种关联关系记录下来,因此将其称为依赖属性(也就是和数据层属性的关联关系的记录)。基于上述数据的属性以及控件的依赖属性可以使得数据和控件的交互更加流畅。
进一步考虑到在现有的方法中,设计控件时,通常是面向逻辑来进行设计的,比如一个按钮,它的初始展示形式以及在鼠标点击下的不同的展示形式;或者一个列表应该有多少个条目,选中条目和普通条目的展示形式;以及控件的容器,如何排列它的所有子控件的形式。在控件绘制的过程中,所有的控件都是通过一个个小图片进行绘制的,图片绘制的位置以及混合模式等渲染相关的状态是现有方法中关注的重点,而现有的控件绘制是将控件的逻辑部分和渲染部分结合在一起,一次遍历做逻辑上的更新,一次遍历做渲染绘制,从而导致渲染的效率低。基于此,本发明实施例提供的上述方法还包括以下步骤c1至步骤c3:
步骤c1:根据控件之间的逻辑关系建立逻辑树。
步骤c2:根据逻辑树和控件对应的渲染单元确定渲染节点,建立渲染树。
其中,渲染节点包括一个或多个渲染单元,参见图3所示的一种逻辑树与渲染树分离的渲染结构示意图,示意出在控件渲染绘制过程中,在组织结构上建立逻辑树和渲染树两种形态不同的树。逻辑树本身是根据控件之间的逻辑关系,由控件组成的,比如一个面板下面有一个文本框和一个子面板,子面板下面又有输入框或者按钮。渲染树是由逻辑树上的控件需要渲染的部分组成的,从每一个逻辑控件可以抽离出它需要渲染的部分(有的控件可能只起到逻辑作用而根本不需要绘制,比如panel面板,可能只是用来对子控件的排序,而本身却不需要绘制),这样就得到一个可用于绘制的最小集,在此基础之上可以做合并批次等优化工作。每一个逻辑控件生成的渲染部分,可以被称作渲染节点,每个渲染节点可以包括一个或者多个渲染单元,每个渲染单元负责生成真正的渲染数据放到渲染队列当中。
步骤c3:根据渲染树将具有相同渲染条件的渲染单元合并成同一批次进行渲染并展示。
在一种具体的实施方式中,进行批次的合并渲染具有一定的先决条件,即渲染单元具有相同的渲染条件,也就是相同的顶点数据格式、相同的渲染状态以及相同的纹理(也就是具有相同的渲染条件)。考虑到预先生成的纹理可能会与运行时的纹理不匹配,且会造成较大的内存负担,因此本发明实施例提供了一种动态合并图集的算法技术,能够让不同的小图片在运行时快速的合并成为一张图集,不仅灵活的降低了批次,而且没有任何额外的开销和内存负担。上述动态合并图集的算法主要包括以下步骤d1至步骤d3:
步骤d1:将目标渲染单元填入待填充的空白纹理,以使待填充的空白纹理被划分为三个区域。
其中,三个区域包括一个占用区域和两个未用区域。为了更好的理解,本发明实施例提供了一种空白填充的示意图,参见图4所示,图4的(a)部分示意出当有一张纹理填入时,整个矩形空白纹理可以被分为三个区域:区域A、区域B和区域C,其中,区域A被标识为占用区域,区域B和区域C被标识为占用区域。
步骤d2:采用递归的方式依次将与目标渲染单元具有相同纹理的渲染单元填入未用区域,直到待填充的空白纹理被填满。
进一步,当有与第一张相同的纹理填入时,采用递归的方式,也就是根据填入纹理的大小,选择未占用的区域B或者区域C填入,区域B或区域C进而被划分为三个区域,参见图4的(b)所示,假设第二张纹理填入区域B,那么区域B即被划分为区域A1、区域B1和区域C1,其中,区域A1被标识为占用区域,区域B1和区域C1被标识为占用区域。以此类推,直至将待填充的空白纹理被填满。
步骤d3:将被填满的待填充的空白纹理合并成图集进行渲染并展示。
当待填充的空白纹理被填满后,由于所有填充的图元都具有相同的纹理,因此可以将其合并,同一批次进行渲染,从而提高渲染的效率。
进一步,图元可以合并到运行时图集需要有一定的条件限制,即当目标渲染单元的面积大于阈值时,可以将目标渲染单元作为一个批次进行绘制。
此外,对于文字通常也会生成一张位图,但位图的大小往往相同,在这种情况下,可以为文字单独生成一张文字的纹理,使得运行时图集的面积使用最大化。
进一步,在填充的过程中,可能会存在图元释放的情况,具体可以按照以下步骤(1)和步骤(2)进行释放:
步骤(1):当检测到占用单元被释放,判断与占用单元相同级别的区域是否被占用。
步骤(2):如果没有,将释放后的占用单元和与其相同级别的区域进行合并。
举例说明:参见图4的(b)部分所示,假设A1被释放,那么则判断与其同一级别的B1和C1是否被占用。如果B1和C1被占用,则将A1标识为未用单元;如果B1和C1没有被占用,那么则将A1、B1和C1合并后标识为未用单元,进一步,采用同样的方法向上一级进行合并尝试,直至不能合并。
进一步,考虑到,在执行用户界面操作时,通常只是一个控件或者几个控件变化,而不是全部,所以在逻辑结构上,我们可以通过脏标识来区分发生变化的控件,即组织好最小化更新列表。具体的,当检测到控件发生变化时,通过脏标识对发生变化的控件进行标识;对具有脏标识的控件进行更新。由于更新时只需要对发生变化的控件进行更新,因此通过脏标识进行区分可以实现更新效率最优化。
综上所述,采用上述方法,GUI能够有效地减低渲染的批次,省去了项目开发人员整理控件图集的步骤,同时精准的使用纹理图元,减少了内存的开销。
对于前述实施例提供的基于GUI的交互方法,本发明实施例还提供了一种基于GUI的交互装置,参见图5所示的一种基于GUI的交互装置的结构示意图,该装置可以包括以下部分:
封装模块501,用于将数据层的数据与用户界面的控件封装成绑定对象。
第一监测模块502,用于当监测到数据发生变化时,自动刷新与数据对应的控件进行展示。
第二监测模块503,用于当监测到控件接收到用户的操作指令后,自动修改与控件对应的数据,并将修改后的数据同步到数据层。
本发明实施例提供的上述基于GUI的交互装置,能够将数据层的数据与用户界面的控件直接联系起来,在数据发生变化时,能够自动刷新与数据对应的控件进行展示;在控件接收到用户的操作指令后,能够自动修改与控件对应的数据,并将修改后的数据同步到数据层。上述装置在修改数据时,能够自动刷新控件进行展示;在操作控件界面时,能够自动将修改的数据同步给数据层,无需定义事件处理器,使数据与控件的显示一一对应起来,从而可以简化GUI与逻辑交互的结构,同时节省了调试和问题查找所需的时间。
在一种实施方式中,上述第一监测模块502包括:
第一校验单元,用于当监测到数据发生变化时,通过校验器判断数据的类型和与数据对应的控件的类型是否匹配。
第一转换单元,用于如果不匹配,通过转换器将数据的类型转换为与控件匹配的类型,并刷新控件进行展示。
在一种实施方式中,第二监测模块503包括:
第二校验单元,用于当监测到控件接收到用户的操作指令后,通过校验器校验控件的操作指令对应的输入是否满足预设要求;
第二转换单元,用于如果不满足,通过转换器将输入进行转换,以使其满足预设要求。
数据修改单元,用于自动修改与控件对应的数据,并将修改后的数据同步到数据层。
在一种实施方式中,上述装置还包括:
逻辑树建立模块,用于根据控件之间的逻辑关系建立逻辑树。
渲染树建立模块,用于根据逻辑树和控件对应的渲染单元确定渲染节点,建立渲染树;其中,渲染节点包括一个或多个渲染单元。
渲染模块,用于根据渲染树将具有相同渲染条件的渲染单元合并成同一批次进行渲染并展示。
在一种实施方式中,上述渲染模块包括:
第一纹理填充单元,用于将目标渲染单元填入待填充的空白纹理,以使待填充的空白纹理被划分为三个区域;其中,三个区域包括一个占用区域和两个未用区域。
第二纹理填充单元,用于采用递归的方式依次将与目标渲染单元具有相同纹理的渲染单元填入未用区域,直到待填充的空白纹理被填满。
合并渲染单元,用于将被填满的待填充的空白纹理合并成图集进行渲染并展示。
在一种实施方式中,上述渲染模块还用于当目标渲染单元的面积大于阈值时,将目标渲染单元作为一个批次进行绘制。
在一种实施方式中,上述装置还包括:
标识模块,用于当检测到控件发生变化时,通过脏标识对发生变化的控件进行标识。
更新模块,用于对具有脏标识的控件进行更新。
本发明实施例所提供的装置,其实现原理及产生的技术效果和前述方法实施例相同,为简要描述,装置实施例部分未提及之处,可参考前述方法实施例中相应内容。
本发明实施例还提供了一种电子设备,具体的,该电子设备包括处理器和存储装置;存储装置上存储有计算机程序,计算机程序在被处理器运行时执行如上实施方式的任一项所述的方法。
图6为本发明实施例提供的一种电子设备的结构示意图,该电子设备100包括:处理器60,存储器61,总线62和通信接口63,所述处理器60、通信接口63和存储器61通过总线62连接;处理器60用于执行存储器61中存储的可执行模块,例如计算机程序。
其中,存储器61可能包含高速随机存取存储器(RAM,Random Access Memory),也可能还包括非不稳定的存储器(non-volatile memory),例如至少一个磁盘存储器。通过至少一个通信接口63(可以是有线或者无线)实现该***网元与至少一个其他网元之间的通信连接,可以使用互联网,广域网,本地网,城域网等。
总线62可以是ISA总线、PCI总线或EISA总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示,图6中仅用一个双向箭头表示,但并不表示仅有一根总线或一种类型的总线。
其中,存储器61用于存储程序,所述处理器60在接收到执行指令后,执行所述程序,前述本发明实施例任一实施例揭示的流过程定义的装置所执行的方法可以应用于处理器60中,或者由处理器60实现。
处理器60可能是一种集成电路芯片,具有信号的处理能力。在实现过程中,上述方法的各步骤可以通过处理器60中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器60可以是通用处理器,包括中央处理器(Central Processing Unit,简称CPU)、网络处理器(Network Processor,简称NP)等;还可以是数字信号处理器(Digital SignalProcessing,简称DSP)、专用集成电路(Application Specific Integrated Circuit,简称ASIC)、现成可编程门阵列(Field-Programmable Gate Array,简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成,或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器,闪存、只读存储器,可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器61,处理器60读取存储器61中的信息,结合其硬件完成上述方法的步骤。
本发明实施例所提供的可读存储介质的计算机程序产品,包括存储了程序代码的计算机可读存储介质,所述程序代码包括的指令可用于执行前面方法实施例中所述的方法,具体实现可参见前述方法实施例,在此不再赘述。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是:以上所述实施例,仅为本发明的具体实施方式,用以说明本发明的技术方案,而非对其限制,本发明的保护范围并不局限于此,尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化,或者对其中部分技术特征进行等同替换;而这些修改、变化或者替换,并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应所述以权利要求的保护范围为准。