一种节目组件显示方法及装置与流程

本发明涉及电子教学技术领域，尤其涉及一种节目组件显示方法及装置。

背景技术：

随着互联网的发展和普及，在线教学和在线信息发布也逐渐在学校得到了推广和应用。目前很多学校都使用了信息发布系统来丰富教学工作，因此需要制作各种用于教学、宣传以及通告的节目。节目是由多个节目组件构成，目前节目制作的方式是将每一个组件生成一个html文件，然后将这些html文件打包放在一个目录里，在节目显示时对这些文件进行引用。

但是，由于每一个组件都是一个html文件，会使整个项目十分庞大，会占用较多的系统资源，降低了信息发布系统的性能。

技术实现要素：

鉴于上述问题，本发明提出了一种节目组件显示方法及装置，避免了节目显示过程中产生较大的项目，优化了节目显示的性能，提高了节目显示时的可编辑可管理性。

第一方面，本申请通过一实施例提供如下技术方案：

一种节目组件显示方法，包括：

接收需显示的节目组件的标识信息；

根据所述节目组件的标识信息，在预设的json文件中获取所述节目组件对应的第一属性参数，在预设的html文件中确定与所述节目组件对应的框架组件；其中，所述第一属性参数用于定义所述节目组件显示的属性，所述框架组件用于对所述节目组件进行显示；

将所述第一属性参数添加到预设的第一数组中，获得第二数组；

根据所述第二数组和所述框架组件，在显示页面渲染并显示所述节目组件。

可选的，所述根据所述第二数组和所述框架组件，在显示页面渲染并显示所述节目组件之后，还包括：

在对所述节目组件修改时，获取所述节目组件的修改参数以及所述节目组件的标识信息；

根据所述节目组件的标识信息，在所述第二数组中查找所述第一属性参数；

根据所述修改参数，将所述第二数组中的所述第一属性参数更新为第二属性参数，获得第三数组；

根据所述第三数组和所述框架组件，在显示页面渲染修改后的节目组件，并显示所述修改后的节目组件。

可选的，所述接收需显示的节目组件的标识信息之前，还包括：

定义所述节目组件以及所述节目组件的第一属性参数；

将所述第一属性参数保存至所述预设的json文件中。

可选的，所述在预设的html文件中确定与所述节目组件对应的框架组件，包括：

根据所述节目组件的标识信息在所述预设的html文件中查找，获得与所述标识信息对应的框架组件。

可选的，所述根据所述第二数组和所述框架组件，在显示页面渲染并显示所述节目组件，包括：

读取所述第二数组中的所述第一属性参数；

将所述第一属性参数赋值给所述框架组件；

根据赋值后的所述框架组件，在显示页面渲染并显示所述节目组件。

可选的，所述第一属性参数包括：形状属性、颜色属性以及位置属性中的至少一种。

第二方面，基于同一发明构思，本申请通过一实施例提供如下技术方案：

一种节目组件显示装置，包括：

标识信息获取模块，用于接收需显示的节目组件的标识信息；

第一属性参数与框架组件获取模块，用于根据所述节目组件的标识信息，在预设的json文件中获取所述节目组件对应的第一属性参数，在预设的html文件中确定与所述节目组件对应的框架组件；其中，所述第一属性参数用于定义所述节目组件显示的属性，所述框架组件用于对所述节目组件进行显示；

第二数组获取模块，用于将所述第一属性参数添加到预设的第一数组中，获得第二数组；

显示模块，用于根据所述第二数组和所述框架组件，在显示页面渲染并显示所述节目组件。

可选的，还包括更新模块，用于在所述根据所述第二数组和所述框架组件，在显示页面渲染并显示所述节目组件之后，在对所述节目组件修改时，获取所述节目组件的修改参数以及所述节目组件的标识信息；根据所述节目组件的标识信息，在所述第二数组中查找所述第一属性参数；根据所述修改参数，将所述第二数组中的所述第一属性参数更新为第二属性参数，获得第三数组；根据所述第三数组和所述框架组件，在显示页面渲染修改后的节目组件，并显示所述修改后的节目组件。

第三方面，基于同一发明构思，本申请通过一实施例提供如下技术方案：

一种节目组件显示装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时可以实现如第一方面中任一项所述的方法的步骤。

第四方面，基于同一发明构思，本申请通过一实施例提供如下技术方案：

一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面中任一项所述方法的步骤。

本申请提供的一种节目组件显示方法及装置，通过在需要显示节目组件时，获取节目组件的标识信息，通过标识信息的管理，可避免在节目显示时将节目组件进行全部打包，管理更加灵活。进一步的，根据节目组件的标识信息，在预设的json文件中获取节目组件对应的第一属性参数，在预设的html文件中确定与节目组件对应的框架组件，其中，第一属性参数用于定义节目组件显示的属性，框架组件用于对节目组件进行显示；将节目组件以第一属性参数的形式进行表示，可存放于json文件中，并非直接形成的html文件，利于灵活管理。框架组件可根据第一属性参数的不同来进行节目组件的显示，也即通过框架组件可实现对节目组件的灵活显示，克服了html文件固定化的显示。进一步的，将第一属性参数添加到预设的第一数组中，获得第二数组，最后根据第二数组和框架组件，在显示页面渲染并显示节目组件，节目显示时是将单独的节目组件的第一属性参数保存至第一数组中从而得到第二数组，然后通过对第二数组进行读取并将第一属性参数赋值给html文件中对应的框架组件，实现匹配显示。当将构成节目的多个组件显示后即显示出完整的节目。本实施例中的方法由于节目组件通过标识信息管理，无需打包构成一个html文件来形成完整的节目，可对每个节目组件进行独立的编辑管理，实现了节目制作的灵活编辑、管理。同时，由于节目组件通过第一属性参数在数组存放，并通过框架组件进行显示，有效避免了现有技术中直接通过打包html文件的方法来显示节目，使得节目组件模块化、小型化。显示更加灵活，降低了节目组件显示预览过程中的计算开销和i/o压力，优化了显示性能。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文具体实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出具体实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了本发明第一实施例提供的一种节目组件显示方法的流程示意图；

图2示出了本发明第二实施例提供的一种节目组件显示装置的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

第一实施例

请参见图1，示出了本发明第一实施例提供的一种节目组件显示方法的流程示意图。通过该方法以解决目前现有技术的节目制作中存在的节目体量大，维护管理不够灵活的问题。

具体的，所述方法包括：

步骤s10：接收需显示的节目组件的标识信息。

在步骤s10中，节目组件具备唯一的标识信息。接收的标识信息可为用户输入的，例如，用户可通过电脑键盘、鼠标等输入装置进行输入；用户还可通过选择预设的标识信息实现输入。标识信息可为id(identitydocument，身份标识)，标识信息可对节目组件进行唯一的标识和查询。

一个完整的节目可由多个节目组件构成。举例来讲，在学校中为了通知某些事项，会在教室或教学楼外设置公开的大屏幕，用于作为显示页面以展示学校的风采或通知事项；通过在大屏幕上显示用户指定的多个节目组件即可构成一完整的节目。不同的节目组件相互配合并在显示页面显示，可以形成不同的节目。

步骤s20：根据节目组件的标识信息，在预设的json文件中获取节目组件对应的第一属性参数，在预设的html文件中确定与节目组件对应的框架组件；其中，第一属性参数用于定义节目组件显示的属性，框架组件用于对节目组件进行显示。

在步骤s20中，节目组件及对应的第一属性参数可在步骤s20之前进行定义，并且可定义多个不同的节目组件及对应的第一属性参数。具体的，定义的第一属性参数为json形式。在一具体实施方式中，定义的节目组件及对应的第一属性参数可保存至一文件中；例如，保存至预定义的app.json文件中。需显示的节目组件可从这些预先定义的节目组件中进行选择确定。

具体的，节目组件的第一属性参数可包括形状属性参数、颜色属性参数、位置属性参数、显示时间属性参数以及编号属性参数中的任意一种或多种。同时，也不局限于上述所列举的第一属性参数。例如，形状属性参数可包括长度、宽度等；颜色属性参数可包括纯色、渐变色等；位置属性参数可包括像素点坐标；时间属性参数可包括显示的时长和/或显示的时间点；编号属性参数可为标识信息。

进一步的，在步骤s20之前，可预先定义框架组件。其中，可以用html形式定义框架组件，将定义好的多个框架组件保存在预设的html文件中。如此，在执行步骤s20时，节目组件所对应的框架组件从该预设的html文件中选择即可。

在步骤s20中，对于任一节目组件，在预设的html文件中至少可匹配到一个框架组件，即每个节目组件与至少一个框架组件存在对应关系。

举例来说，若节目组件为圆形，那么与之相匹配的框架组件也为圆形。具体的，可基于标识信息对节目组件与框架组件进行匹配；即，相匹配的节目组件与框架组件之间，存在相同或相匹配的标识信息。本实施例中，确定一节目组件对应的框架组件的具体方式包括：基于节目组件的标识信息在预设的html文件中查找，获得与标识信息对应的框架组件。由于每个节目组件和框架组件都是独立存在，在需要的时候再进行组合使用，可便于独立管理。

步骤s30：将第一属性参数添加到预设的第一数组中，获得第二数组。

步骤s30中的第一属性参数为节目组件的参数。第一数组为预先定义好的，并且第一数组为一空数组。第二数组为存放第一属性参数后的数组。若某一节目包含多个节目组件，则第二数组可存放这些节目组件各自的第一属性参数。最终，节目组件的显示效果取决于第二数组中存放的各自的第一属性参数。

步骤s40：根据第二数组和框架组件，在显示页面渲染并显示节目组件。

在步骤s40中，具体包括：读取第二数组中的第一属性参数；将第一属性参数赋值给框架组件；根据赋值后的框架组件，在显示页面渲染并显示节目组件。在本实施例中，可对第一数组进行监测，并判断第一数组是否发生变化。在第一数组由空数组变化为填充有第一属性参数的第二数组时，表示发生变化。当第一数组变化为第二数组时，对第二数据进行读取并赋值给框架组件以实现节目组件的显示。其中，读取表示对第二数组中保存的每一个参数进行遍历。

进一步的，当用户确定多个节目组件以构成一个完整的节目时，在第二数组中可存放这些节目组件的第一属性参数。从而可将这些节目组件的第一属性参数赋值到各节目组件对应的框架组件中，并在显示页面渲染并显示形成完整的节目。

在节目生成的过程中，采用节目组件与框架组件进行匹配，然后进行渲染显示。避免了制作过程中形成单个大体量的html文件形式的节目，优化了制作和显示过程中的系统性能。并且，由于节目由多个节目组件构成，可便于进行局部维护、管理。

以一具体示例对本发明方法进行继续说明，如下：

预定义的app.json文件用于存放节目组件的属性参数，其格式可参考如下例子：

预设的html文件格式如下：

<div

class＝"hdss-element-item-drap"//如果传入的类型对应的标识信息是‘9-1’则显示此组件

:class＝"{show:type＝＝＝'9-1',hide:type！＝＝'9-1'}"

:style＝"{

width:chartwidth+'px'//组件的宽度

height:chartheight+'px'//组件的高度

}"

></div>

对于上述伪代码可进行如下理解，预先定义了多个节目组件及对应的第一属性参数并保存在app.json文件。定义了数组b，数组b即为第一数组。定义了预设的html文件。当选中一个节目组件为圆形组件时，会传一个标识信息(identitydocument，id)为9-1的索引值。解析app.json文件，找到id为9-1对应的节目组件的类型chart-circle。然后，通过chart-circle在app.json文件中找到圆形组件对应的第一属性参数。将圆形组件对应的第一属性参数添加到数组b中，得到数组c，数组c即为第二数组。此时，数组c中就有一个圆形组件的第一属性参数，选中其他组件亦是如此。在显示页面显示节目组件时会遍历数组c中的所有第一属性参数，并读取相应的第一属性参数。然后，在预设的html文件中找到匹配的框架组件并进行赋值，渲染后将圆形组件显示在显示页面中。

在本实施例中，还可对已经渲染的节目进行调整和修改。具体的，当第二数组发生变化时，显示页面的节目组件可跟随第二数组的更新而重新渲染，从而改变位置、大小、颜色等。具体步骤如下：

步骤s61：在对节目组件修改时，获取节目组件的修改参数以及节目组件的标识信息。

在步骤s61中，修改参数用于对第二数组中的第一属性参数进行修改。例如，当对已显示的节目组件进行移动时，修改参数可以是基于鼠标的拖动事件所获得的参数。此外，修改参数也可由用户进行设置。

步骤s62：根据节目组件的标识信息，在第二数组中查找第一属性参数。

步骤s63：根据修改参数，将第二数组中的第一属性参数更新为第二属性参数，获得第三数组。

在步骤s62-s63中，在第二数组中修改第一属性参数可实现节目组件的修改和编辑，避免了重新制作节目组件。并且，不会对之前预定义的节目组件产生影响。已经定义的节目组件可以进行反复的使用，采用不同的属性参数可产生不同的显示效果。

步骤s64：根据第三数组和所述框架组件，在显示页面渲染修改后的节目组件，并显示修改后的节目组件。

在步骤s64中，具体阐述可参考步骤s40，不再赘述。

通过步骤s61-s64，实现了对节目中各个节目组件的灵活编辑和管理，易于维护。

本实施例中的方法至少具备如下的两个应用场景：

1、当本申请中的第一数组保存在服务器时，服务器可向连接服务器的不同终端发送第二数组中的第一属性参数或第三数组中的第二属性参数，以使终端进行渲染和显示。可在服务器端实现对终端的节目显示进行统一的控制。

2、当本申请中的第一数组保存在服务器时，连接服务器的一个终端可以向服务器请求显示一节目，服务器收到请求后将包含第一属性参数的第二数组，或包含第二属性参数的第三数组反馈给终端，以使终端根据属性参数进行预览显示。可实现在终端进行节目显示的操作。

综上所述，本申请提供的一种节目组件显示方法，本申请提供的一种节目组件显示方法通过在需要显示节目组件时，获取节目组件的标识信息，通过标识信息的管理，可避免在节目显示时将节目组件进行全部打包，管理更加灵活。进一步的，根据节目组件的标识信息，在预设的json文件中获取节目组件对应的第一属性参数，在预设的html文件中确定与节目组件对应的框架组件，其中，第一属性参数用于定义节目组件显示的属性，框架组件用于对节目组件进行显示。将节目组件以第一属性参数的形式进行表示，可存放于json文件中，并非直接形成的html文件，利于灵活管理。框架组件可根据第一属性参数的不同来进行节目组件的显示，也即通过框架组件可实现对节目组件的灵活显示，克服了html文件固定化的显示。进一步的，将第一属性参数添加到预设的第一数组中，获得第二数组，最后根据第二数组和框架组件，在显示页面渲染并显示节目组件，节目显示时是将单独的节目组件的第一属性参数保存至第一数组中从而得到第二数组，然后通过对第二数组进行读取并将第一属性参数赋值给html文件中对应的框架组件实现匹配显示。当将构成节目的多个组件显示后即显示出完整的节目。本实施例中的方法由于节目组件通过标识信息管理，无需打包构成一个html文件来形成完整的节目，可对每个节目组件进行独立的编辑管理，实现了节目制作的灵活编辑、管理。同时，由于节目组件通过第一属性参数在数组存放，并通过框架组件进行显示，有效避免了现有技术中直接通过打包html文件的方法来显示节目，使得节目组件模块化、小型化。显示更加灵活，降低了节目组件显示预览过程中的计算开销和i/o压力。

第二实施例

基于同一发明构思，如图2所示，本发明第二实施例提供了一种节目组件显示装置300，包括：

接收模块301，用于接收需显示的节目组件的标识信息；

获取模块302，用于第一属性参数与框架组件获取模块，用于根据所述节目组件的标识信息，在预设的json文件中获取所述节目组件对应的第一属性参数，在预设的html文件中确定与所述节目组件对应的框架组件；其中，所述第一属性参数用于定义所述节目组件显示的属性，所述框架组件用于对所述节目组件进行显示；

添加模块303，用于将所述第一属性参数添加到预设的第一数组中，获得第二数组；

显示模块304，用于根据所述第二数组和所述框架组件，在显示页面渲染并显示所述节目组件。

作为一种可选的实施方式，还包括：

更新模块，用于在所述根据所述第二数组和所述框架组件，在显示页面渲染并显示所述节目组件之后，在对所述节目组件修改时，获取所述节目组件的修改参数以及所述节目组件的标识信息；根据所述节目组件的标识信息，在所述第二数组中查找所述第一属性参数；根据所述修改参数，将所述第二数组中的所述第一属性参数更新为第二属性参数，获得第三数组；根据所述第三数组和所述框架组件，在显示页面渲染修改后的节目组件，并显示所述修改后的节目组件。

作为一种可选的实施方式，还包括：

定义模块，用于在所述在需要显示第一组件时，获取所述第一组件的标识信息之前，定义所述节目组件以及所述节目组件的第一属性参数；将所述第一属性参数保存至所述预设的json文件中。

作为一种可选的实施方式，所述获取模块302，具体用于：

根据所述节目组件的标识信息在所述预设的html文件中查找，获得与所述标识信息对应的框架组件。

作为一种可选的实施方式，所述显示模块304，具体用于：

读取所述第二数组中的所述第一属性参数；将所述第一属性参数赋值给所述框架组件；根据赋值后的所述框架组件，在显示页面渲染并显示所述节目组件。

作为一种可选的实施方式，所述第一属性参数包括：形状属性、颜色属性以及位置属性中的至少一种。

需要说明的是，本发明实施例所提供的节目组件显示装置300，其具体实现及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。

本发明提供的装置集成的功能模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例的方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、u盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(rom，read-onlymemory)、随机存取存储器(ram，randomaccessmemory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

第三实施例

本发明还提供一种节目组件显示装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时可以实现如第一实施例中任一方法的步骤。

需要说明的是，本发明实施例所提供的节目组件显示装置，其具体实现及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(dsp)来实现根据本发明实施例的装置中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。