CN105278964A - 组件渲染方法和装置 - Google Patents

Abstract

本发明涉及一种组件渲染方法，所述方法包括：获取界面元数据，所述界面元数据中包括设计期组件和运行期组件，所述设计期组件包括预设控制功能；利用所述预设控制功能与所述运行期组件包装得到所述设计期组件对应的控制组件；通过对所述运行期组件进行渲染，得到运行期页面；通过对所述控制组件进行渲染，得到设计期页面。采用本方法能够有效提高开发效率。此外还提供一种组件渲染装置。

Description

组件渲染方法和装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种组件渲染方法和装置。

背景技术

UI(UserInterface，用户界面)动态扩展机制可以让最终用户个性化调整对应的页面，比如，设置表格的宽度，调整表格的列顺序，设置字段的位置等。Web(网页)中现有的动态扩展技术一般以UI元数据进行驱动，在设计期操作的全部是Web的UI元数据。设计期所渲染的界面是为了方便开发人员设计而定义的界面，与运行期无关。设计期页面与对应的运行期页面的内容和形式会有所不同。以WAFII(WebApplicationFrameworkⅡ，Web应用框架Ⅱ)平台为例，设计期页面如图1所示，而对应的运行期页面如图2所示，设计期页面与运行期页面并不一致。对于开发人员来讲，设计期和运行期相互隔离，即使在设计期就出现了界面错误，也只能等到运行期才能发现，从而导致开发效率下降。

发明内容

基于此，有必要针对上述技术问题，提供一种能够有效提高开发效率的组件渲染方法和装置。

一种组件渲染方法，所述方法包括：

获取界面元数据，所述界面元数据中包括设计期组件和运行期组件，所述设计期组件包括预设控制功能；

利用所述预设控制功能与所述运行期组件包装得到所述设计期组件对应的控制组件；

通过对所述运行期组件进行渲染，得到运行期页面；

通过对所述控制组件进行渲染，得到设计期页面。

在其中一个实施例中，所述运行期组件包括属性集合和功能集合，所述利用所述预设控制功能与所述运行期组件包装得到所述设计期组件对应的控制组件的步骤包括：

获取所述运行期组件的属性集合和功能集合；

利用所述属性集合和所述功能集合与所述预设控制功能进行包装，得到所述设计期组件对应的控制组件。

在其中一个实施例中，在所述通过对所述运行期组件进行渲染，得到运行期页面的步骤之前，还包括：

在对所述界面元数据进行渲染时，获取控制组件DOM；

对所述控制组件DOM进行渲染；

对所述控制组件绑定所述预设控制功能。

在其中一个实施例中，所述控制组件包括父控制组件和子控制组件，在所述通过对所述运行期组件进行渲染，得到运行期页面的步骤之后，还包括：

获取运行期组件DOM；

将所述运行期组件DOM加入到所述父控制组件中；

通过对子控制组件和所述父控制组件进行渲染，得到对应的设计期页面。

在其中一个实施例中，所述方法还包括：

当处于设计期时，利用控制组件的渲染方式对所述界面元数据进行渲染；

当处于运行期时，利用运行期组件的渲染方式对所述界面元数据进行渲染。

一种组件渲染装置，所述装置包括：

获取模块，用于获取界面元数据，所述界面元数据中包括设计期组件和运行期组件，所述设计期组件包括预设控制功能；

包装模块，用于利用所述预设控制功能与所述运行期组件包装得到所述设计期组件对应的控制组件；

设计期渲染模块，用于通过对所述控制组件进行渲染，得到设计期页面；

运行期渲染模块，用于通过对所述运行期组件进行渲染，得到运行期页面。

在其中一个实施例中，所述运行期组件包括属性集合和功能集合，所述获取模块还用于获取所述运行期组件的属性集合和功能集合；所述包装模块还用于利用所述属性集合和所述功能集合与所述预设控制功能进行包装，得到所述设计期组件对应的控制组件。

在其中一个实施例中，所述获取模块还用于在对所述界面元数据进行渲染时，获取控制组件DOM；所述设计期渲染模块还用于对控制组件DOM进行渲染；

所述装置还包括：

绑定模块，用于对控制组件绑定预设控制功能。

在其中一个实施例中，所述控制组件包括父控制组件和子控制组件，所述获取模块还用于获取运行期组件DOM；所述设计期渲染模块还用于将所述运行期组件DOM加入到所述父控制组件中；通过对子控制组件和所述父控制组件进行渲染，得到对应的设计期页面。

在其中一个实施例中，所述设计期渲染模块还用于当处于设计期时，利用控制组件的渲染方式对所述界面元数据进行渲染；所述运行期渲染模块还用于当处于运行期时，利用运行期组件的渲染方式对所述界面元数据进行渲染。

上述组件渲染方法和装置，通过对设计期组件的预设控制功能与运行期组件包装得到设计期组件对应的控制组件，继而对运行期组件进行渲染得到运行期页面，对控制组件进行渲染得到设计期页面，使得设计期组件的渲染方式与运行期组件的渲染方式得到统一，由此使得设计期页面和运行期页面几乎一致。从而提供了所见即所得的功能，有效提高了开发效率。

附图说明

图1为一个实施例中设计期页面的示意图；

图2为一个实施例中运行期页面的示意图；

图3为一个实施例中组件渲染方法流程图；

图4为又一个实施例中组件渲染方法流程图；

图5为一个实施例中采用组件渲染方法得到的设计期页面的示意图；

图6为一个实施例中组件渲染装置的结构示意图；

图7为又一个实施例中组件渲染装置的结构示意图。

具体实施方式

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

在一个实施例中，如图3所示，提供了一种组件渲染方法，该方法包括：

步骤302，获取界面元数据，界面元数据中包括设计期组件和运行期组件，设计期组件包括预设控制功能。

界面元数据是描述界面对象的一种方式。界面元数据中包括有关界面布局的信息，其中包括界面组件以及业务逻辑等。界面组件可以处在不同的阶段，其中包括设计期和运行期。设计期(又称为设计时)是指界面处在开发设计阶段。运行期(又称为运行时)是指界面处于运行阶段。处于设计期的组件可以称为设计期组件，处于运行期的组件可以称为运行期组件。

运行期组件包括属性集合、事件集合和功能集合。属性集合(又称为参数集合)中包含运行期组件的属性参数，是对外开放的接口。事件集合可以对外响应事件，也是对外开放的接口。功能集合(又称为行为集合)包含运行期组件自身的行为。运行期组件还包括运行期组件渲染方法。调用运行期组件渲染方法，根据输入的属性参数在界面中渲染出运行期组件的外形。

设计期组件包括属性集合，但不包括事件集合和功能集合，仅作设计期展现使用。设计期组件包括设计期组件渲染方法，以及预设控制功能。在一个实施例中，预设设计期功能包括拖动、修改、添加和删除中至少一项。

传统的设计期组件渲染方式为：在获取界面元数据后，调用设计期组件渲染方法，以递归的方式对每个设计期组件进行渲染。在渲染出设计期组件之后，根据预设控制功能进行操作。例如，处理设计期组件的拖动操作、属性编辑等。传统的运行期组件渲染方式为：在获取界面元数据后，调用运行期组件渲染方法，以递归的方式对每个运行期组件进行渲染。在渲染出运行期组件之后，即可处理运行期的相关事件。由于传统的设计期组件渲染方式和传统的运行期组件渲染方式不同，使得渲染出的设计期组件与运行期组件的外形不同，进而导致设计期页面与运行期页面也不同。

步骤304，利用预设控制功能与运行期组件包装得到设计期组件对应的控制组件。

为了统一设计期组件渲染方式和运行期组件渲染方式，可以将每个设计期组件分别包装为对应的控制组件。控制组件可以通过对设计期组件中的预设控制功能与运行期组件包装来得到。

在一个实施例中，运行期组件包括属性集合和功能集合，利用预设控制功能与运行期组件包装得到设计期组件对应的控制组件的步骤包括：获取运行期组件的属性集合和功能集合；利用属性集合和功能集合与预设控制功能进行包装，得到设计期组件对应的控制组件。

利用运行期组件的属性集合和功能集合与设计期组件的预设控制功能进行包装，得到设计期组件对应的控制组件。具体的，可以采用Javascript(一种网络脚本语言)中的Object(对象，一种数据类型)类型包装方法对运行期组件的属性集合和功能集合与设计期组件的预设控制属性进行包装，得到设计期组件对应的控制组件。由此能够使得设计期组件和运行期组件对应的职责能够明确分离开来，并且通过控制组件对设计期组件和运行期组件进行有效融合。

步骤306，通过对运行期组件进行渲染，得到运行期页面。

对运行期组件进行渲染，可以采用传统的运行期组件渲染方式。通过对运行期组件进行渲染，得到运行期页面

步骤308，通过对控制组件进行渲染，得到设计期页面。

由于控制组件是通过设计期组件的预设控制功能与运行期组件包装得到的，因此运行期组件的属性集合和功能集合对于控制组件是透明的，控制组件的相关属性与运行期组件的属性相同。在运行期组件渲染之后，可以利用运行期组件DOM(DocumentObjectModel，文档对象模型)与控制组件DOM的结合对控制组件进行渲染。进而得到与运行期页面几乎一致的设计期页面。从而有效解决了设计期组件和运行期组件渲染方式隔离的问题，提供了所见即所得的功能。所见即所得是指在设计期对界面进行的编辑修改，可以立刻看到编辑效果，而不用等到编辑完且运行之后。

本实施例中，通过对设计期组件的预设控制功能与运行期组件包装得到设计期组件对应的控制组件，继而对运行期组件进行渲染得到运行期页面，对控制组件进行渲染得到设计期页面，使得设计期组件的渲染方式与运行期组件的渲染方式得到统一，由此使得设计期页面和运行期页面几乎一致。从而提供了所见即所得的功能，有效提高了开发效率。同时能够方便开发用户以及业务人员对运行期页面进行个性化修改和设置。

在一个实施例中，在通过对运行期组件进行渲染，得到运行期页面的步骤之前，还包括：在对界面元数据进行渲染时，获取控制组件DOM；对控制组件DOM进行渲染；对控制组件绑定预设控制功能。

本实施例中，在对界面元数据进行渲染时，要对控制组件进行渲染。在对控制组件进行渲染时，获取控制组件DOM，对控制组件DOM进行渲染。在控制组件DOM渲染之后，对控制组件绑定设计期组件的预设控制功能，继而对控制组件绑定预设控制功能对应的事件。

在一个实施例中，控制组件包括父控制组件和子控制组件，在通过对运行期组件进行渲染，得到运行期页面的步骤之后，还包括：获取运行期组件DOM；将运行期组件DOM加入到父控制组件中；通过对子控制组件和父控制组件进行渲染，得到对应的设计期页面。

本实施例中，在对运行期组件进行渲染之后，获取运行组件返回的运行期组件DOM，将运行期组件DOM加入到父控制组件中，与控制组件DOM进行结合。父控制组件可以包括多个子控制组件。例如，“工具栏”为父控制组件，“保存”、“提交”以及“返回”等为对应的子控制组件。以递归的方式多个子控制组件进行渲染，进而对父控制组件进行渲染。由此能够同时支持设计期组件的渲染以及运行期组件的渲染，进而使得设计期页面与运行期页面几乎一致。

在一个实施例中，渲染出设计期页面和运行期页面的流程图，如图4所示。

步骤402，获取界面元数据，对界面元数据进行渲染。

步骤404，对界面元数据进行渲染时，获取控制组件DOM。

步骤406，对控制组件DOM进行渲染。

步骤408，对控制组件绑定预设控制功能。

步骤410，通过对运行期组件进行渲染，得到运行期页面。

步骤412，获取运行期组件DOM。

步骤414，将运行期组件DOM加入到父控制组件中。

步骤416，通过对子控制组件和父控制组件进行渲染，得到对应的设计期页面。

运行期页面如图2所示，设计期页面如图5所示。图5中展示的设计期页面与图2中展示的运行期页面几乎一致。

在一个实施例中，该方法还包括：当处于运行期时，利用运行期组件的渲染方式对界面元数据进行渲染；当处于设计期时，利用控制组件的渲染方式对界面元数据进行渲染。

本实施例中，处于不同阶段的界面元数据可以有不同的渲染方式。当处于运行期时，可以采用运行期组件的渲染方式对界面元数据进行渲染，得到运行期页面。当处于设计期时，可以采用上述实施例中提供的控制组件的渲染方式对界面元数据进行渲染，得到设计期页面。由于运行期组件的渲染方式与控制组件的渲染方式能够得到有效统一，由此使得设计期页面和运行期页面几乎一致，从而提供了所见即所得的功能，有效提高了开发效率。

在一个实施例中，如图6所示，提供了一种组件渲染装置，其该装置包括：获取模块602、包装模块604、设计期渲染模块606和运行期渲染模块608，其中：

获取模块602，用于获取界面元数据，界面元数据中包括设计期组件和运行期组件，设计期组件包括预设控制功能。

包装模块604，用于利用预设控制功能与运行期组件包装得到设计期组件对应的控制组件。

设计期渲染模块606，用于通过对控制组件进行渲染，得到设计期页面。

运行期渲染模块608，用于通过对运行期组件进行渲染，得到运行期页面。

在一个实施例中，运行期组件包括属性集合和功能集合，获取模块602还用于获取运行期组件的属性集合和功能集合；包装模块604还用于利用属性集合和功能集合与预设控制功能进行包装，得到设计期组件对应的控制组件。

在一个实施例中，获取模块602还用于在对界面元数据进行渲染时，获取控制组件DOM；设计期渲染模块还用于对控制组件DOM进行渲染；如图7所示，装置还包括：绑定模块610，用于对控制组件绑定预设控制功能。

在一个实施例中，控制组件包括父控制组件和子控制组件，获取模块602还用于获取运行期组件DOM；设计期渲染模块608还用于将运行期组件DOM加入到父控制组件中；通过对子控制组件和父控制组件进行渲染，得到对应的设计期页面。

在一个实施例中，设计期渲染模块606还用于当处于设计期时，利用控制组件的渲染方式对界面元数据进行渲染；运行期渲染模块608还用于当处于运行期时，利用运行期组件的渲染方式对界面元数据进行渲染。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种组件渲染方法，所述方法包括：

获取界面元数据，所述界面元数据中包括设计期组件和运行期组件，所述设计期组件包括预设控制功能；

利用所述预设控制功能与所述运行期组件包装得到所述设计期组件对应的控制组件；

通过对所述运行期组件进行渲染，得到运行期页面；

通过对所述控制组件进行渲染，得到设计期页面。

2.根据权利要求1所述的方法，其特征在于，所述运行期组件包括属性集合和功能集合，所述利用所述预设控制功能与所述运行期组件包装得到所述设计期组件对应的控制组件的步骤包括：

获取所述运行期组件的属性集合和功能集合；

利用所述属性集合和所述功能集合与所述预设控制功能进行包装，得到所述设计期组件对应的控制组件。

3.根据权利要求1所述的方法，其特征在于，在所述通过对所述运行期组件进行渲染，得到运行期页面的步骤之前，还包括：

在对所述界面元数据进行渲染时，获取控制组件DOM；

对所述控制组件DOM进行渲染；

对所述控制组件绑定所述预设控制功能。

4.根据权利要求3所述的方法，其特征在于，所述控制组件包括父控制组件和子控制组件，在所述通过对所述运行期组件进行渲染，得到运行期页面的步骤之后，还包括：

获取运行期组件DOM；

将所述运行期组件DOM加入到所述父控制组件中；

通过对子控制组件和所述父控制组件进行渲染，得到对应的设计期页面。

5.根据权利要求1-4任一项所述的方法，其特征在于，所述方法还包括：

当处于设计期时，利用控制组件的渲染方式对所述界面元数据进行渲染；

当处于运行期时，利用运行期组件的渲染方式对所述界面元数据进行渲染。

6.一种组件渲染装置，其特征在于，所述装置包括：

获取模块，用于获取界面元数据，所述界面元数据中包括设计期组件和运行期组件，所述设计期组件包括预设控制功能；

包装模块，用于利用所述预设控制功能与所述运行期组件包装得到所述设计期组件对应的控制组件；

设计期渲染模块，用于通过对所述控制组件进行渲染，得到设计期页面；

运行期渲染模块，用于通过对所述运行期组件进行渲染，得到运行期页面。

7.根据权利要求6所述的装置，其特征在于，所述运行期组件包括属性集合和功能集合，所述获取模块还用于获取所述运行期组件的属性集合和功能集合；所述包装模块还用于利用所述属性集合和所述功能集合与所述预设控制功能进行包装，得到所述设计期组件对应的控制组件。

8.根据权利要求6所述的装置，其特征在于，所述获取模块还用于在对所述界面元数据进行渲染时，获取控制组件DOM；所述设计期渲染模块还用于对控制组件DOM进行渲染；

所述装置还包括：

绑定模块，用于对控制组件绑定预设控制功能。

9.根据权利要求8所述的装置，其特征在于，所述控制组件包括父控制组件和子控制组件，所述获取模块还用于获取运行期组件DOM；所述设计期渲染模块还用于将所述运行期组件DOM加入到所述父控制组件中；通过对子控制组件和所述父控制组件进行渲染，得到对应的设计期页面。

10.根据权利要求6-9任一项所述的装置，其特征在于，所述设计期渲染模块还用于当处于设计期时，利用控制组件的渲染方式对所述界面元数据进行渲染；所述运行期渲染模块还用于当处于运行期时，利用运行期组件的渲染方式对所述界面元数据进行渲染。