CN106445559A - 一种通过视图化模板解决页面差异化的装置及方法 - Google Patents

Abstract

本发明公开了一种通过视图化模板解决页面差异化的装置及方法，由于主要包括：视图模板化方案，采用模板控制器进行模板配置解析，进行视图布局，视图实现分为复杂视图库和基础视图控制器，公共的视图作为复杂视图库存在，基本的视图通过基础视图控制器结合组件来实现；从而可以克服现有技术中在数据的可视化视图呈现中，同层级资源对象的需求存在一定的差异化内容，微小的、可预判的差异可以通过业务代码逻辑实现；若从布局到内容都迥然不同，使用统一的基础框架和业务逻辑代码处理，则随着待描述的资源对象增多，维护成本剧增，扩展性也存在很多弊端的缺陷性。

Description

一种通过视图化模板解决页面差异化的装置及方法

技术领域

本发明涉及解决差异化视图技术领域，具体地，涉及一种通过视图化模板解决页面差异化的装置及方法。

背景技术

在数据的可视化视图呈现中，同层级资源对象的需求存在一定的差异化内容。微小的、可预判的差异可以通过业务代码逻辑实现；若从布局到内容都迥然不同，使用统一的基础框架和业务逻辑代码处理，则随着待描述的资源对象增多，维护成本剧增，扩展性也存在很多弊端。使用统一视图框架，需要针对具体实体分别处理，造成业务需求与视图过于耦合，繁杂的业务代码不容易维护和扩展；若采用实体类型的插件式页面，可以满足多样化需求，但局部高重复度的内容会造成代码冗余，而且不断变更的业务需求会随着类型数量加倍维护成本。通常，可视化差异视图需求具有以下几个特点：局部内容相近，重复度高；有特殊视图；布局灵活多变。

发明内容

本发明的目的在于，针对上述问题，提出一种通过视图化模板解决页面差异化的装置及方法，以实现在描述同层级的资源时，面对繁复的可视化视图呈现，无需进行复杂的页面逻辑处理和事件绑定，也不用担心后期反复的需求调整带来的维护成本，基于视图模板的配置策略来实例化页面，可重用独立封装的视图节点。基于“模板方法”模式，统一的模板控制器对页面及事件进行独立封装，对配置策略进行解析，控制页面布局及异步数据加载，处理事件绑定或解绑，避免事件泄露，使可视化过程高效快捷。

为实现上述目的，本发明采用的技术方案是：一种通过视图化模板解决页面差异化的装置，主要包括：模板控制器，控制页面结构和布局的生成，具体包括解析视图模板配置信息，组织页面的页签结构，并对页面内视图进行视图布局控制，进行视图加载；

复杂视图预置库，提供可共重用的较复杂视图的实现方式；

基础视图控制器，对基本数据结构进行组件化视图生成的过程进行控制；

基础视图组件，提供基础视图的实现过程；

数据处理器，对数据进行清洗。

进一步地，所述基础视图组件具有扩展性，且包括已预置的表格视图组件、文本视图组件、曲线视图组件、面积视图组件、柱状视图组件、饼状图组件、热点图组件和堆积图组件。

进一步地，所述数据处理器对数据进行清洗包括，数据类型校验、均值最值计算、小数点位处理、页面元素id生成和时间格式处理。

进一步地，页面视图中的内容为独立封装，形成多个视图，多个视图形成一个大视图，多个大视图对资源对象进行多维度描述，所述多个视图和多个大视图形成“视图树”；

所述视图模板含有一组视图配置信息，定义视图的实现和布局信息，所述视图模板与大视图进行对应。

通过视图化模板解决差异化页面的方法，其特征在于包括：

步骤1：开始生成页面，读取视图模板配置文件；

步骤2：模板控制器首先解析视图模板配置文件，组织生成页签页面，一个视图模板对应一个页面描述，即生成一个页签；然后对当前页面对应的视图模板配置文件进行解析，得到页面的视图配置，根据视图配置进行视图的布局控制；

步骤3：根据视图配置信息，判断该视图实现的方式，若为基础视图，则通过基础视图控制器根据配置信息实例化组件生成视图，并执行步骤4；若为复杂视图库，则直接执行步骤4；

步骤4：整个页面的各视图异步加载，完成页面的实例化过程。

进一步地，在步骤1中读取视图模板配置文件之前还包括，判断所要呈现的资源，即页面的所有视图，是否在复杂视图预置库或是否可以通过基础视图控制器生成，如果是，则对该资源配置一个视图模板文件，通过定义视图类型及参数，描述视图的实例化内容完成对视图的配置，所述视图类型为复杂视图库或基础视图；

如果所要呈现的页面的所有视图，不被复杂视图库包含或不能通过基础视图控制器生成，则自定义该视图，并在视图模板中进行配置，实现可扩展使用。

进一步地，页面视图中的内容为独立封装，形成多个视图，多个视图形成一个大视图，多个大视图对资源对象进行多维度描述，所述多个视图和多个大视图形成“视图树”；

所述视图模板含有一个页签页面内包含的全部视图配置信息，定义视图的实现和布局信息，所述视图模板与大视图进行对应。

本发明各实施例的一种通过视图化模板解决页面差异化的装置及方法，由于主要包括：视图模板化方案，采用模板控制器进行模板配置解析，进行视图布局，视图实现分为复杂视图库和基础视图控制器，公共的视图作为复杂视图库存在，基本的视图通过基础视图控制器结合组件来实现；从而可以克服现有技术中在数据的可视化视图呈现中，同层级资源对象的需求存在一定的差异化内容。微小的、可预判的差异可以通过业务代码逻辑实现；若从布局到内容都迥然不同，使用统一的基础框架和业务逻辑代码处理，则随着待描述的资源对象增多，维护成本剧增，扩展性也存在很多弊端。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明具体实施方式所述的一种通过视图化模板解决页面差异化的装置及方法中现有技术差异化视图呈现的缺陷图；

图2为本发明具体实施方式所述的一种通过视图化模板解决页面差异化的装置的结构流程图；

图3为本发明具体实施方式所述的一种通过视图化模板解决页面差异化的方法流程图；

图4为本发明具体实施方式所述的一种通过视图化模板解决页面差异化的装置及方法描述的视图树；

图5为本发明具体实施方式所述的一种通过视图化模板解决页面差异化的装置及方法描述的基于视图配置的视图控制原理图；

图6为本发明具体实施方式所述的一种通过视图化模板解决页面差异化的装置及方法描述的可视化模板及页面对应图；

图7为本发明具体实施方式所述的一种通过视图化模板解决页面差异化的装置及方法描述的应用于系统的展现图；

图8为本发明具体实施方式所述的一种通过视图化模板解决页面差异化的装置及方法描述的视图树对比图。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

具体地，一种通过视图化模板解决页面差异化的装置，主要包括：模板控制器，控制页面结构和布局的生成，具体包括解析视图模板配置信息，组织页面的页签结构，并对页面内视图进行视图布局控制，进行视图加载；

复杂视图预置库，提供公共视图的实现过程；

基础视图控制器，对基本数据结构进行组件化视图生成的过程进行控制；

基础视图组件，提供基础视图的实现过程；

数据处理器，对数据进行清洗。

所述基础视图组件具有扩展性，且包括已预置的表格视图组件、文本视图组件、曲线视图组件、面积视图组件、柱状视图组件、饼状图组件、热点图组件和堆积图组件。

所述数据处理器对数据进行清洗包括，数据类型校验、均值最值计算、小数点位处理、页面元素id生成和时间格式处理。

页面视图中的内容为独立封装，形成多个视图，多个视图形成一个大视图，多个大视图对资源对象进行多维度描述，所述多个视图和多个大视图形成“视图树”；

所述视图模板含有一组视图配置信息，定义视图的实现和布局信息，所述视图模板与大视图进行对应。

通过视图化模板解决差异化页面的方法，其特征在于包括：

步骤1：开始生成页面，读取视图模板配置文件；

步骤2：模板控制器首先解析视图模板配置文件，组织生成页签页面，一个视图模板对应一个页面描述，即生成一个页签；然后对当前页面对应的视图模板配置文件进行解析，得到页面的视图配置，根据视图配置进行视图的布局控制；

步骤3：根据视图配置信息，判断该视图实现的方式，若为基础视图，则通过基础视图控制器根据配置信息实例化组件生成视图，并执行步骤4；若为复杂视图库，则直接执行步骤4；

步骤4：整个页面的各视图异步加载，完成页面的实例化过程。

在步骤1中读取视图模板配置文件之前还包括，判断所要呈现的资源，即页面的所有视图，是否在复杂视图预置库或是否可以通过基础视图控制器生成，如果是，则对该资源配置一个视图模板文件，通过定义视图类型及参数，描述视图的实例化内容完成对视图的配置，所述视图类型为复杂视图库或基础视图；

如果所要呈现的页面的所有视图，不被复杂视图库包含或不能通过基础视图控制器生成，则自定义该视图，并在视图模板中进行配置，实现可扩展使用。

页面视图中的内容为独立封装，形成多个视图，多个视图形成一个大视图，多个大视图对资源对象进行多维度描述，所述多个视图和多个大视图形成“视图树”；

所述视图模板含有一个页签页面内包含的全部视图配置信息，定义视图的实现和布局信息，所述视图模板与大视图进行对应。

本发明可应用于差异化页面需求场景，通过简单的模板配置，实现视图的独立封装及灵活组合呈现。视图模板化方案可以有效降低页面逻辑复杂度，提高页面重用性和扩展性。本发明是基于视图的模板配置，生成一棵“视图树”，树的节点是独立封装的视图，从而满足差异化需求并突出视觉层次，实现节点重用。

结合图1，在数据的可视化视图呈现中，同层级资源对象的需求存在一定的差异化内容。微小的、可预判的差异可以通过业务代码逻辑实现；若从布局到内容都迥然不同，使用统一的基础框架和业务逻辑代码处理，则随着待描述的资源对象增多，维护成本剧增，扩展性也存在很多弊端。

结合图2，本发明所设计的方案主要由：

(1) 模板控制器。即解析视图模板配置信息，组织页面的页签结构，并对页面内视图进行视图布局控制，进行视图加载。

(2) 复杂视图库。即提取的公共的视图实现。

(3) 基础视图控制器。即对基本数据结构进行组件化视图生成的过程。

(4) 基础视图组件。用于提供基础视图的实现方案，已预置表格视图、文本视图、曲线视图、面积视图、柱状视图、饼状图、热点图、堆积图等组件，支持扩展。

(5) 数据处理器。通过该数据处理器，对数据进行清洗，包括数据类型校验、均值最值计算、小数点位处理、页面元素id生成、时间格式处理等。

结合图3，视图模板工作流程图如图表3所示。开始生成页面时，读取视图模板配置文件：

首先，模板控制器对输入的视图模板文件进行解析，组织生成页签页面，一个视图模板对应一个页面描述，即生成一个页签；

其次，模板控制器对当前页面对应的模板文件进行解析，根据视图配置进行视图的布局控制；

然后，根据视图配置信息，判断该视图实现的方式，若为基础视图则通过基础视图控制器进行页面生成，若为复杂视图库，则进行相应的页面加载；

最后，整个页面的各视图异步加载，完成页面的实例化过程。

结合图4，在整个流程中，视图内容是独立进行封装的，形成多个VIEW，多个VIEW形成VIEW GROUP，即一个大视图，多个大视图可构成对资源对象的多维度描述。从根页面来看，类似一个“视图树”结构。

视图模板，即View Template，与上图中的VIEW GROUP对应，含有一组视图配置，

定义了视图的实现和布局等信息。

多个视图模板是对资源对象的多维度描述，体现为多页签页面。

视图，即View, 视图模板决定了页面的组织布局，视图配置的实例化是具体内容的实现。VIEW视图节点的实现方式如图5所示。

用户使用该视图模板方案进行页面呈现的时候，只需要进行以下配置即可灵活实现：

情况一：若所要呈现的页面所有视图，均包含在视图库中或通过基础视图控制器可生成，即只需要对该资源配置一个视图模板文件，对视图进行对应的配置即可完成；

情况二：若呈现的某视图不能通过基础控制器生成，内置的复杂视图库也没有，则可以自定义该视图，并在模板中进行配置，即可扩展使用。

满足任意上述两种情况，用户即可以调用如图表3所示的工作流程。

将本发明的方案应用于用户可视化界面，视图模板和生成效果对比图如图6所示。

应用于系统展现效果图如图表7,8所示，视图模板化方案既可以满足多样化的可视化需求，又可以避免视图冗余，便于后期的维护和扩展。

如图表7所示，两个大视图中，部分视图VIEW1、VIEW4为复杂视图，来自是视图库，VIEW3是基础视图。

转化为视图树，如图表8。维护成本为：两个VIEW GROUP及视图模板文件和VIEW1、2、4三个复杂视图，一个基础视图控制器。

可以看出，视图模板化方案遵循“重分解以一般化”的原则，视图的重用和扩展都能得到解决。并且多个模板展开对资源描述，模板控制器对各模板进行组织，具体模板中的视图实例化则由视图控制器完成。

视图模板方案的特点：

1.支持模板的视图编辑——提供在线编辑模板模块，支持在线编辑配置；

2.支持模板的新增和删除——通过模板的新增或删除可以加强资源的可视化描述，使层次维度更明确；

3.支持模板的分享——从模板维度加强了重用性。

以上特点决定资源对象的多维度描述具备绝对的灵活多样和自定义扩展。对可视化需求的实现适用广泛。

本发明的目的旨在设计一种适用于差异化视图需求场景的视图模板方案。对页面内包含的视图进行独立封装，采用模板化的方式自由组合信息架构，达到满足需求和突出视觉层次的目的。

这种方案的实现，在描述同层级的资源时，面对繁复的可视化视图呈现，无需进行复杂的页面逻辑处理和事件绑定，也不用担心后期反复的需求调整带来的维护成本，基于视图模板的配置策略来实例化页面，可重用独立封装的视图节点。基于“模板方法”模式，统一的模板控制器对页面及事件进行独立封装，对配置策略进行解析，控制页面布局及异步数据加载，处理事件绑定或解绑，避免事件泄露，使可视化过程高效快捷。

最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (7)

1.通过视图化模板解决页面差异化的装置，其特征在于，包括：

模板控制器，控制页面结构和布局的生成，具体包括解析视图模板配置信息，组织页面的页签结构，并对页面内视图进行视图布局控制，进行视图加载；

复杂视图预置库，提供可共重用的较复杂视图的实现方式；

基础视图控制器，对基本数据结构进行组件化视图生成的过程进行控制；

基础视图组件，提供基础视图的实现过程；

数据处理器，对数据进行清洗。

2.根据权利要求1所述的通过视图化模板解决页面差异化的装置，其特征在于，所述基础视图组件具有扩展性，且包括已预置的表格视图组件、文本视图组件、曲线视图组件、面积视图组件、柱状视图组件、饼状图组件、热点图组件和堆积图组件。

3.根据权利要求2所述的通过视图化模板解决页面差异化的装置，其特征在于，所述数据处理器对数据进行清洗包括，数据类型校验、均值最值计算、小数点位处理、页面元素id生成和时间格式处理。

4.根据权利要求3所述的通过视图化模板解决页面差异化的装置，其特征在于，页面视图中的内容为独立封装，形成多个视图，多个视图形成一个大视图，多个大视图对资源对象进行多维度描述，所述多个视图和多个大视图形成“视图树”；

所述视图模板含有一组视图配置信息，定义视图的实现和布局信息，所述视图模板与大视图进行对应。

5.通过视图化模板解决页面差异化的方法，其特征在于包括：

步骤1：开始生成页面，读取视图模板配置文件；

步骤2：模板控制器首先解析视图模板配置文件，组织生成页签页面，一个视图模板对应一个页面描述，即生成一个页签；然后对当前页面对应的视图模板配置文件进行解析，得到页面的视图配置，根据视图配置进行视图的布局控制；

步骤3：根据视图配置信息，判断该视图实现的方式，若为基础视图，则通过基础视图控制器根据配置信息实例化组件生成视图，并执行步骤4；若为复杂视图库，则直接执行步骤4；

步骤4：整个页面的各视图异步加载，完成页面的实例化过程。

6.根据权利要求5所述的通过视图化模板解决页面差异化的方法，其特征在于，在步骤1中读取视图模板配置文件之前还包括，判断所要呈现的资源，即页面的所有视图，是否在复杂视图预置库或是否可以通过基础视图控制器生成，如果是，则对该资源配置一个视图模板文件，通过定义视图类型及参数，描述视图的实例化内容完成对视图的配置，所述视图类型为复杂视图库或基础视图；

如果所要呈现的页面的所有视图，不被复杂视图库包含或不能通过基础视图控制器生成，则通过补充复杂视图库的方式，自定义具体视图的实现方法，并在视图模板中进行配置，实现可扩展使用。

7.根据权利要求6所述的通过视图化模板解决页面差异化的方法，其特征在于，页面视图中的内容为独立封装，形成多个视图，多个视图形成一个大视图，多个大视图对资源对象进行多维度描述，所述多个视图和多个大视图形成“视图树”；

所述视图模板含有一个页签页面内包含的全部视图配置信息，定义视图的实现和布局信息，所述视图模板与大视图进行对应。