CN110795093B - 一种交互式视图生成方法和装置 - Google Patents

Abstract

本发明公开了交互式视图生成方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：基于栅格布局通过视图布局视图中的预定义组件生成布局树；设置视图中预定义组件的数据接口定义和数据流信息生成数据流图；基于所述布局树和所述数据流图创建组件树；以及通过组件化方式动态地加载组件树，并通过与数据的交互而生成交互式视图。该实施方式通过视图布局和数据流设置，自动生成交互性强的视图页面，可以减轻工作人员工作量。

Description

一种交互式视图生成方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种交互式视图生成方法和装置。

背景技术

多维数据的可视化是数据分析系统中最常用的场景之一。一个系统视图会有多个图表或文字，在多维数据分析的聚合和汇总过程中，多个图表需要实现数据的下钻、上钻等级联操作。然而图表的布局形式多样，要实现不同布局下多维视图的交互展示，需要工作人员手工编写视图页面代码。

现有技术中的视图生成包括栅格布局和前端组件化架构。栅格布局提供了一种标准尺寸的设计，通过用等长等宽的线将视图划分为若干个小栅格来规范视图中的元素。而在前端组件化架构中，视图由若干可重用的组件组成，一个组件包括显示在网页上的视图模板和对应的数据。组件可以嵌套，当一个组件被加载时，视图生成装置会编译该组件及其子组件：将数据填入模板的对应位置并生成HTML(HyperText Markup Language，超文本标记语言)片段，监听对该片段的操作(例如，点击按钮或标签，编辑文本等操作)，最终插入视图。组件提供“属性注入”和“事件传播”两种方式在嵌套时和其他组件通信。属性注入将父组件的部分数据向下注入到子组件中，相反的，子组件可以将事件向上传播到父组件，兄弟组件之间不能直接通信。当组件中的数据改变时，视图会随之改变。

现有技术中至少存在如下问题：

在生成多维数据分析应用的交互式视图时，栅格布局无法复用已有的模板，比如折线图等，且视图无法直接和用户产生交互，无法处理图表多维度查询的情况。

组件化架构中，组件关系的产生完全依赖工作人员的设计，无法自动产生适合多维数据分析的视图。如果组件关系被设计得过于扁平，层次不清晰，封装性就差，会使关系太复杂，但如果设计得不合理会导致视图的渲染效率低下。

发明内容

有鉴于此，本发明实施例提供一种互式视图生成方法和装置，其能够自动地产生适合多维数据分析的交互式视图。

为实现上述目的，根据本发明实施例的一个方面，提供了一种交互式视图生成方法，其包括：基于栅格布局通过视图布局视图中的预定义组件生成布局树；设置视图中预定义组件的数据接口定义和数据流信息生成数据流图；基于所述布局树和所述数据流图创建组件树；以及通过组件化方式动态地加载组件树，并通过与数据的交互而生成交互式视图。

优选的，所述视图布局包括：记录每个预定义组件的类型、位置、长度和宽度，形成若干叶子布局节点；以及通过布局树生成算法进行布局解析，按行和列来交替分隔整个栅格，同时生成内部布局节点。

优选的，内部布局节点和叶子布局节点都包含类型、位置和长宽信息；以及每个预定义组件都对应一个叶子布局节点。

优选的，所述布局树生成算法包括：布局树行分隔算法和布局树列分隔算法，所述布局树行分隔算法和布局树列分隔算法交替执行，用于获取内部布局节点和叶子布局节点的类型、位置和长宽信息。

优选的，设置视图中预定义组件的数据接口定义包括：定义预定义组件的数据接口的输入和输出，并解析该输入和输出形成数据流。

优选的，基于所述预定义组件和其数据流构成数据流图，在该数据流图中，预定义组件和其输入、输出数据是互相交错的。

优选的，基于所述布局树和所述数据流图创建组件树包括：基于所述数据流图通过组件上浮算法生成上浮后的组件树，以及基于所述布局树和生成的上浮后的组件树生成组件树。

优选的，所述上浮算法包括：将数据流图中的预定义组件改为叶子节点，提取出可合并的数据，以及新建自定义组件使得生成一个上浮后的组件树，其中，所述自定义组件中包含了会被传播至该组件的输入和输出的数据。

优选的，所述下沉算法包括：将上浮后的组件树和布局树进行比对，以及如果布局树中的组件和上浮后的组件树中的划分方式不一样，则合并该组件和其父组件。

根据本发明实施例的另一方面，提供了一种交互式视图生成装置，其特征在于，包括：视图布局模块，其基于栅格布局通过视图布局视图中的预定义组件生成布局树；数据流设置模块，其设置视图中预定义组件的数据接口定义和数据流信息生成数据流图；组件树生成模块，其基于所述布局树和所述数据流图创建组件树；以及加载模块，其通过组件化方式动态地加载组件树，并通过与数据的交互而生成交互式视图。

根据本发明实施例的又一方面，提供了一种电子设备，其包括：一个或多个处理器；存储器，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上述所描述的方法。

根据本发明实施例的又一方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现如上述所描述的方法。

上述发明中的一个实施例具有如下优点或有益效果：通过视图布局和数据流设置，自动生成交互性强、能够符合逻辑的视图页面，可以减轻工作人员工作量。因为视图靠解析出的结构产生，也能动态加载。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定，其中：

图1是根据本发明实施例的交互式视图生成方法的流程图；

图2是根据本发明实施例的交互式视图生成装置的示意图；

图3是根据实施例的视图布局的示意图；

图4是根据本发明实施例的数据流图的示意图；

图5是根据本发明实施例的生成组件树的上浮算法的示意图；

图6是根据本发明实施例的生成组件树的下沉算法的示意图；

图7是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图；

图8是本发明实施例可以应用于其中的示例性系统架构图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

本发明定义了如下技术术语：

下钻和上钻：其是根据不同维度查询数据的方式，下钻是高维度到低纬度查询，上钻是低纬度到高维度查询；

内部节点和叶子节点：树型数据结构的节点类型，内部节点是有孩子的节点，叶子是没有孩子节点的节点；

有向无环图：一种图结构，节点之间的边有方向，且节点不能通过遍历其他节点回到自己。

下面参照附图1-2具体描述根据本发明的实施例的视图生成方法和视图生成装置。

图1是根据本发明实施例的交互式视图生成方法，如图1所示，本发明的交互式视图生成方法包括如下步骤：步骤S101，基于栅格布局通过视图布局视图中的预定义组件生成布局树；步骤S102，设置视图中预定义组件的数据接口定义和数据流信息生成数据流图；步骤S103，基于所述布局树和所述数据流图创建组件树；以及步骤S104，通过组件化方式动态地加载组件树，并通过与数据的交互而生成交互式视图。

图2是根据本发明实施例的交互式视图生成装置，如图2所示，本发明的交互式视图生成装置200包括：视图布局模块201，其配置为基于栅格布局通过视图布局视图中的预定义组件生成布局树；数据流设置模块202，其被配置用于设置视图中预定义组件的数据接口定义和数据流信息生成数据流图；组件树生成模块203，其被配置为基于所述布局树和所述数据流图创建组件树；以及加载模块204，其被配置为通过组件化方式动态地加载组件树，并通过与数据的交互而生成交互式视图。

该交互式视图生成装置提供预定义组件并自动生成自定义组件，预定义组件是页面上的图表、按钮等，在视图生成装置解析视图前就存在的。

自定义组件是交互式视图生成装置在解析视图时生成的。在视图布局结构上，预定义组件一定是叶子节点，自定义组件一定是内部节点，所有的自定义组件都是预定义组件的父节点。预定义组件在交互式视图生成装置中提供了默认的样式，是可以复用的基础，自定义组件会根据实际业务由视图生成装置自动生成，预定义组件和自定义组件只提供“属性注入”和“事件传播”的能力。

预定义组件的种类包括：输入框、下拉框和图表组件等，而输入框和下拉框提供了图表的查询条件。

下面结合附图3-6来具体描述所述交互式视图生成方法的详细技术方案。

交互式视图生成装置按照以下视图生成方法来执行：视图布局模块基于栅格布局通过视图布局视图中的预定义组件生成布局树；数据流设置模块设置视图中预定义组件的数据接口定义和数据流信息生成数据流图，组件树生成模块基于所述布局树和所述数据流图创建组件树，以及加载模块通过组件化方式动态地加载组件树，并通过与数据的交互而生成交互式视图。

视图布局基于一个栅格布局的操作界面，用户使用预定义组件设置无嵌套的布局，通过该视图布局步骤而生成一个有嵌套层次的、被称为“布局树”的中间结构，布局树描述了布局的情况，但树中节点不是组件。

数据流设置先由用户设置视图中预定义组件对应的数据接口，然后提取出上一步结果中的预定义组件，并设置各预定义组件的数据流信息，该步骤会生成一个称为“数据流图”的抽象结构。

视图布局和数据流设置完成后，视图生成和展示装置根据布局树和数据流图创建一个称为“组件树”的抽象结构，组件树能保证视图的展示满足布局结果，同时能够合理的接受用户的操作。

当组件树解析完成后，视图生成和展示装置通过组件化方式动态地加载组件树和数据流图并生成需要的视图。

下面结合附图3详细描述视图布局模块基于栅格布局通过视图布局视图中的预定义组件生成布局树的步骤：

视图布局模块201执行视图布局步骤：

视图布局时，用户需要将所有预定义的组件放置到宽度为M，长度为N的栅格系统中，每个组件可以占据多个栅格，组件需要对齐，对齐过程中可以留白，未对齐的组件无法通过解析。图3的左侧是设置的16*9栅格布局图，右侧是通过视图布局而生成的布局树。

在用户设置视图布局时，视图生成装置记录每个预定义组件的类型、位置、长度和宽度，形成若干叶子布局节点，然后按照下面的布局树生成算法layout-tree()进行布局解析。该布局树生成算法会按布局树行分隔算法和布局树列分隔算法来交替分隔整个栅格，同时生成内部布局节点，内部布局节点和叶子布局节点都包含类型、位置和长宽信息。每个预定义组件都对应一个叶子布局节点。

布局树生成算法：

布局树行分隔算法

参见上述布局树行的分隔算法，其中，S标识一个集合，其表示所有由预定义组件一对一生成的节点的集合；而集合Q表示本次迭代产生的节点集合；而C_i表示该节点的行位置，X_i1表示行的起始位置，X_i2表示行的结束位置；这里，I,k和t都为正整数。

布局树列分隔算法

参见上述布局树行的分隔算法，其中，S标识一个集合，其表示所有由预定义组件一对一生成的节点的集合；而集合Q表示本次迭代产生的节点集合；而C_i表示该节点的列位置，Y_i1表示列的起始位置，Y_i2表示列的结束位置；这里，i,k,j和t都为正整数。

布局树中的布局节点可以直接转化为HTML中的块元素及对应的样式，在后续的生成组件树时，布局树及其子树将被划分，并作为组件的视图模板。

下面结合附图3进行具体的说明：

图3是一个16*9的示例：组件A-H可以转化是叶子节点，带上长宽，先来一个虚拟的根(root)。

步骤1，按行切，得到(AB)，(CD)，(E)，(FGH)四块，然后，他们分别调用按列切的方法，

步骤2,(AB)按列切，得到A和B，(AB)的宽度就是A和B加起来，长度是A或B的长度，返回给步骤1；

步骤3,(CD)按列切，得到C和D，(CD)的宽度就是C和D加起来，长度是C或D的长度，返回给步骤1；

步骤4,(E)的长宽就是E自己的长宽，返回给步骤1；

步骤5，(FGH)按列切得到(F)和(GH)；

步骤6，(F)的长宽就是F的长宽，返回给步骤5；

步骤7，(GH)按行切，得到G和H，长是G加H的长，宽是G或H的宽，返回给步骤5；

步骤8,回到步骤5，根据步骤6和步骤7得到长是(F)或(GH)的长，宽是(F)加上(GH)，返回给步骤1；以及

步骤9,回到步骤1，得到了四个子块的长宽，也得算出自己长宽，E有留空，宽度取得是最大，长度是四个子块的长。

最终得到的就是图3右边的布局树的图。

下面结合附图4详细描述设置视图中预定义组件的数据接口定义和数据流信息生成数据流图的步骤：

数据流设置模块202执行该数据流图的生成步骤S102:

多维数据分析中，视图展示的是经过后台聚合处理后的数据，因此需要先设置该视图的预定义组件对应的数据接口的定义，视图中所有预定义组件都分别对应了一个数据接口。

视图中的每个图表(其对应于预定义组件)对应的都是后台的一个接口，接口的输入定义怎么查数据，接口的输出定义怎么展示数据。比如一个查询，接口的输入是：仓库＝北京3C仓，时间＝2018-07-08，输出是：销量＝[1,2,3,4,5]。

字段，则是用于说明该输入或输出数据的是如何定义的，例如上述接口的输入和输出中的“仓库”、“时间”和"销量"就是定义的字段，其实字段名一般用英文字符来定义，当然也可以用其他字符来定义。

定义了预定义组件的数据接口后，视图生成和展示装置可以解析出预定义组件的“输入”和“输出”，输入是预定义组件查询条件的参数，而输出是预定义组件查询结果中会影响其他组件的参数，输入的类型有下列三种：

1.分组和排序的依据，如:品类，仓库属于数据的元信息；

2.筛选的条件，如：“分页的数目、页数和排序方式等”；

3.查询的值，如：某品类的编码值才和具体的字段对应。

每个预定义组件的输入和输出形成了一个数据流，所有预定义组件和其数据流构成“数据流图”。预定义组件间的数据流不应出现循环依赖，因此构建的数据流图在结构上是一个有向无环图，但可能是非连通图。

如图4所示，组件“下拉框”的输出是仓库的值，用户选择某数据的值后会影响预定义组件“图表1”和“图表2”的输入和输出参数。图表1在页面上显示一级分类下对应的聚合结果，当点击某个一级分类时，图表2会对该一级分类下所有的二级分类分组并聚合，这是一个典型的数据下钻的场景。这时一级分类是图表1的输出，也是图表2的输入，聚合的字段“价格”不会对其他组件产生影响。

将输入、输出的数据和组件作为图的节点，将组件和输入、输出间的数据流作为图的边，即可以生成一个图结构，也就是数据流图。在该数据流图中，预定义组件和其输入、输出数据一定是互相交错的。

对预定义组件设置了数据接口定义后，每个预定义组件都附带了两种数据定义：输入和输出，那么可能有两个组件是存在关联的，A的输出是B的输入。如图4所示，圆形是预定义组件，方形是数据，图表1加上输入输出是(仓库->图表1->一级分类)，图表2加上输入输出是(一级分类->图表2->二级分类)，这里图表1的输出就是图表2的输入。这里预定义组件(图表1，图表2)和数据(仓库，1级分类，2级分类)都是图的节点，而流向表示的是谁是谁的输入，或者谁是谁的输出这种关系。

下面结合附图5-6详细描述基于所述布局树和所述数据流图创建组件树的步骤：

组件树生成模块203执行组件树的生成步骤S103：

该步骤根据布局树和数据流图生成组件树，要求是：

1.在布局树同一子树中的组件，也位于组件树的同一子树。

2.组件树中事件传播方向和数据流图中的数据流向等价,且距离根节点越近的节点，包含的数据越少。

生成组件树的步骤包括有被称作“组件上浮算法”和“组件下沉算法”的两个步骤：

步骤1(组件上浮算法)：根据数据流图生成上浮后的组件树，这一步会生成一些自定义组件，而布局节点是组件的模板。自定义组件中包含了会被传播至该组件的输入和输出的数据，生成过程中的组件树会渐渐升高(这个步骤是“上浮”)；

步骤2(组件下沉算法)：结合布局树和上述生成的上浮后的组件树生成最终的组件树。若布局树中的组件和上浮后的组件树中的划分方式不一样，会合并该组件和其父组件，合并过程中组件树会渐渐下沉(这个步骤是“下沉”)。

视图生成装置基于上浮算法将数据流图中的预定义组件改为叶子节点，并提取出可合并的数据，新建自定义组件使得生成一个上浮后的组件树，该上浮后的组件树是与数据流图等价的树形结构，如图5所示，图5左侧的附图是原始数据流图，右侧的附图是上浮后的组件树：

下面的上浮算法能将数据流图转化为等价的树形结构：

组件树上浮算法：

参见上述上浮算法，其中，T是组件树，在算法开始的时候，它是空的；K是正整数，其表示每次遍历时的节点；D是一个集合，其以节点K为起点，对图做深度优先搜索时经过的所有节点的集合；而N是新建的节点，只有T中节点都属于D时，才会触发新建的操作。

转化后的组件树通过属性注入和事件传播可以等价于数据流图。如在上浮后的组件树中：组件A改变数据1，向上传播事件至其父节点，又由于父节点的属性注入到其子节点，从而影响C,D的过程等价于数据流图中：A改变数据1，导致组件C和D的变化的过程。

然后上浮后的组件树和布局树进行比对，通过“下沉”让组件树结构符合布局树。每一次下沉都降低了布局树的高度，在最极端的情况下，布局树会退化成只有一个根节点的树结构。组件树下沉算法如下：

组件数下沉算法：

参见上述下沉算法，其中，K是正整数，其表示第K个子树；S是一个集合，其当前子树K的所有的叶子节点的集合；而S’是一个集合，其表示后续遍历时，在节点S之后的所有节点的集合。

如图6所示，图6的左侧是经过上浮后的组件树，图6的中间是布局树，图6的右侧是下沉后生成的组件树。对同一上浮后的组件树进行操作，不同的布局树会产生不同的结果。在遍历到组件树的节点K(包含CD两个组件)时，下半部分的视图树不存在S'使得S'＝S，所以将节点K的父节点下沉。

最终，组件树的中间节点是视图生成和展示装置产生的自定义组件，组件树的叶子节点都是用户设置的预定义组件，自定义组件中嵌套若干预定义组件。自定义组件的视图模板是布局树中的对应子树，且布局树中一定存在这样的子树。

下面结合附图5和6详细说明生成组件树的过程。

以图5来说明：为简化说明，数据1称为1，预定义组件A称为A，深度优先遍历称为DFS。

通过组件上浮算法上浮数据流图(预定义组件和数据)得到上浮的组件树：

1，拓扑排序得到ABCD

开始

2，k＝'D',集合D＝空，结束后T＝{'D'}；

3，k＝'C',可以遍历到T＝{'D'}，D＝(3),因为节点C(即变量K)和树T成为兄弟，新建节点N1＝(3)上浮，结束后T＝{'C','D'}；

4，k＝'B',可以遍历到T＝{'C','D'}，D＝(2),因为节点B(即变量K)和树T成为兄弟，新建节点N2＝(2)上浮，将D注入N2的非叶子节点N1,N1＝(2,3),结束后T＝{'B','C','D'}；

5，k＝'A',无法遍历到T＝{'B','C','D'}(B无法遍历到)，D＝(1),A作为T的子节点，将D注入非叶子节点N1＝(1,2,3),N2＝(1,2),,结束后T＝{'A','B','C','D'}。

其中，‘C’和'D'表示节点C和D；D表示集合D，其以节点K为起点，对图做深度优先搜索时经过的所有节点的集合。其他参数与上浮算法的定义相同。

结果如图5右图所示。

通过组件下沉算法下沉上浮的组件树和布局树得到最终的组件树，以图6为例，图6的左侧是组件树，图6的中间是布局树，给出两种不同情况，

图6中间布局树的上方的布局树(后续遍历布局树的顺序为A,B,C,D)：

遍历布局树

1，布局树根节点所有叶子节点S＝{'A','B','C','D'}中第一个节点'A',开始S'＝{'A','B','C','D'}，S＝S'

2，自定义节点K，S＝{'C','D'}

遍历到视图树中第一个节点'C',因此S'＝{'C','D'}，S＝S'

结束(不需要下沉)

图6中间布局树的下方的布局树(后续遍历视图树的顺序为A,C,B,D)：

遍历布局树

1，布局树根节点所有叶子节点S＝{'A','B','C','D'}中第一个节点'A',开始S'＝{'A','B','C','D'}，S＝S'；

2，自定义节点K，S＝{'C','D'}；

遍历到布局树中第一个节点'C',因此S'＝{'C','B','D'}，S不等于S'，S'-S＝{'B'},K存在兄弟节点B，因此去掉K，B，C，D接到原K的父节点上(下沉)。

结束。

加载模块204执行动态加载组件树和数据从而生成交互式视图：

组件树生成后会作为一个模块通过组件化架构加载到视图中。

当和视图中的组件交互时，数据会传递至可以传递的最高父节点，之后被改变的数据通过属性注入会在子组件中被改变，最终重新绘制展示图表。

下面参考图7，其示出了适于用来实现本申请实施例的终端设备的计算机系统700的结构示意图。图7示出的终端设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图7所示，计算机系统700包括中央处理单元(CPU)701，其可以根据存储在只读存储器(ROM)702中的程序或者从存储部分708加载到随机访问存储器(RAM)703中的程序而执行各种适当的动作和处理。在RAM 703中，还存储有系统700操作所需的各种程序和数据。CPU 701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。

以下部件连接至I/O接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。

特别地，根据本发明公开的实施例，上文参考流程图1描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图1所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被中央处理单元(CPU)701执行时，执行本申请的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图1，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图1中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，流程图中的每个方框、以及流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括视图布局模块、数据流设置模块、组件树生成模块和加载模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：基于栅格布局通过视图布局视图中的预定义组件生成布局树；设置视图中预定义组件的数据接口定义和数据流信息生成数据流图；基于所述布局树和所述数据流图创建组件树；以及通过组件化方式动态地加载组件树，并通过与数据的交互而生成交互式视图。

图8示出了可以应用本发明实施例的交互式视图生成的方法或交互式视图生成的装置的示例性系统架构800。

如图8所示，系统架构800可以包括终端设备801、802、803，网络804和服务器805。网络804用以在终端设备801、802、803和服务器805之间提供通信链路的介质。网络804可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备801、802、803通过网络804与服务器805交互，以接收或发送消息等。终端设备801、802、803上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备801、802、803可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器805可以是提供各种服务的服务器，例如对用户利用终端设备801、802、803所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果反馈给终端设备。

需要说明的是，本发明实施例所提供的交互式视图生成的方法一般由服务器805执行，相应地，交互式视图生成的装置一般设置于服务器805中。

应该理解，图8中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (14)

1.一种交互式视图生成方法，其特征在于，包括：

基于栅格布局通过视图布局视图中的预定义组件生成布局树；

设置视图中预定义组件的数据接口定义和数据流信息生成数据流图；

基于所述布局树和所述数据流图创建组件树；以及

通过组件化方式动态地加载组件树，并通过与数据的交互而生成交互式视图；

基于所述布局树和所述数据流图创建组件树包括：基于所述数据流图通过组件上浮算法生成上浮后的组件树，以及基于所述布局树和生成的上浮后的组件树通过组件下沉算法生成组件树；该上浮后的组件树是与数据流图等价的树形结构，所述组件树的中间节点是自定义组件，组件树的叶子节点是用户设置的预定义组件，自定义组件中嵌套若干预定义组件；

所述上浮算法包括：将数据流图中的预定义组件改为叶子节点，提取出可合并的数据，以及新建自定义组件使得生成一个上浮后的组件树，其中，所述自定义组件中包含了会被传播至该组件的输入和输出的数据；

所述下沉算法包括：将上浮后的组件树和布局树进行比对，以及如果布局树中的组件和上浮后的组件树中的划分方式不一样，则合并该组件和其父组件。

2.根据权利要求1所述的方法，其特征在于，所述视图布局包括：

记录每个预定义组件的类型、位置、长度和宽度，形成若干叶子布局节点；以及

通过布局树生成算法进行布局解析，按行和列来交替分隔整个栅格，同时生成内部布局节点。

3.根据权利要求2所述的方法，其特征在于，

内部布局节点和叶子布局节点都包含类型、位置和长宽信息；以及

每个预定义组件都对应一个叶子布局节点。

4.根据权利要求1所述的方法，其特征在于，所述布局树生成算法包括：布局树行分隔算法和布局树列分隔算法，所述布局树行分隔算法和布局树列分隔算法交替执行，用于获取内部布局节点和叶子布局节点的类型、位置和长宽信息。

5.根据权利要求1所述的方法，其特征在于，设置视图中预定义组件的数据接口定义包括：定义预定义组件的数据接口的输入和输出，并解析该输入和输出形成数据流。

6.根据权利要求5所述的方法，其特征在于，基于所述预定义组件和其数据流构成数据流图，在该数据流图中，预定义组件和其输入、输出数据是互相交错的。

7.一种交互式视图生成装置，其特征在于，包括：

视图布局模块，其基于栅格布局通过视图布局视图中的预定义组件生成布局树；

数据流设置模块，其设置视图中预定义组件的数据接口定义和数据流信息生成数据流图；

组件树生成模块，其基于所述布局树和所述数据流图创建组件树；以及

加载模块，其通过组件化方式动态地加载组件树，并通过与数据的交互而生成交互式视图；

所述组件树生成模块基于所述布局树和所述数据流图创建组件树包括：基于所述数据流图通过组件上浮算法生成上浮后的组件树，以及基于所述布局树和生成的上浮后的组件树通过组件下沉算法生成组件树；该上浮后的组件树是与数据流图等价的树形结构，所述组件树的中间节点是自定义组件，组件树的叶子节点是用户设置的预定义组件，自定义组件中嵌套若干预定义组件；

所述上浮算法包括：将数据流图中的预定义组件改为叶子节点，提取出可合并的数据，以及新建自定义组件使得生成一个上浮后的组件树，其中，所述自定义组件中包含了会被传播至该组件的输入和输出的数据；

所述下沉算法包括：将上浮后的组件树和布局树进行比对，以及如果布局树中的组件和上浮后的组件树中的划分方式不一样，则合并该组件和其父组件。

8.根据权利要求7所述的装置，其特征在于，所述视图布局模块执行所述视图布局进一步包括：

记录每个预定义组件的类型、位置、长度和宽度，形成若干叶子布局节点；以及

通过布局树生成算法进行布局解析，按行和列来交替分隔整个栅格，同时生成内部布局节点。

9.根据权利要求8所述的装置，其特征在于，

内部布局节点和叶子布局节点都包含类型、位置和长宽信息；以及

每个预定义组件都对应一个叶子布局节点。

10.根据权利要求7所述的装置，其特征在于，所述视图布局模块执行所述布局树生成算法包括：布局树行分隔算法和布局树列分隔算法，所述布局树行分隔算法和布局树列分隔算法交替执行，用于获取内部布局节点和叶子布局节点的类型、位置和长宽信息。

11.根据权利要求7所述的装置，其特征在于，设置视图中预定义组件的数据接口定义包括：定义预定义组件的数据接口的输入和输出，并解析该输入和输出形成数据流。

12.根据权利要求11所述的装置，其特征在于，所述数据流设置模块基于所述预定义组件和其数据流构成数据流图，在该数据流图中，预定义组件和其输入、输出数据是互相交错的。

13.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储器，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如权利要求1-6中任一所述的方法。

14.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-6中任一所述的方法。