CN108549533A

CN108549533A - 一种epg页面可视化开发中添加自定义控件的方法

Info

Publication number: CN108549533A
Application number: CN201810318433.XA
Authority: CN
Inventors: 鲁豪锋; 邵华
Original assignee: SHANGHAI BESTLINKS INFORMATION TECHNOLOGY Co Ltd
Current assignee: SHANGHAI BESTLINKS INFORMATION TECHNOLOGY Co Ltd
Priority date: 2018-04-11
Filing date: 2018-04-11
Publication date: 2018-09-18

Abstract

本发明公开了一种EPG页面可视化开发中添加自定义控件的方法，包括以下步骤：A、创建控件；B、编辑控件属性：以json格式编辑控件属性，存入数据库添加控件模型对应关系，属性为W3C标准技术HTML中已定义标签的属性和css中已定义的样式Json格式:{属性英文名称:{name:“属性中文名称”}，属性英文名称:{name:“属性中文名称”},...}；C、设置控件属性默认值；D、创建控件数据属性；E、添加控件按钮：在用户页面编辑面板工具栏中添加控件按钮，配置按钮点击事件触发生成控件HTML代码；F、添加控件后设置控件属性默认值；G、实现控件可视化效果。该EPG页面可视化开发中添加自定义控件方法使用时可以自由组合、能够节省工序，而且灵活多变。

Description

一种EPG页面可视化开发中添加自定义控件的方法

技术领域

本发明属于IPTV上EPG页面开发技术领域，具体涉及一种EPG页面可视化开发中添加自定义控件的方法。

背景技术

IPTV即交互式网络电视，是一种利用宽带网，集互联网、多媒体、通讯等技术于一体，向家庭用户提供包括数字电视在内的多种交互式服务的崭新技术。它能够很好地适应当今网络飞速发展的趋势，充分有效地利用网络资源。当今每家每户的网络带宽都已越来越宽，成百上千兆的网络带宽已随处可见，用户通过电视机顶盒来观看网络电视已成为现实。

现有技术存在以下几点不足：(1)现有技术存在项目开发效率较慢的问题；因为传统技术会存在代码重复编辑，花费较多不必要的时间；(2)现有技术的误码率较高；因为所有代码纯手动完成，发生代码错误的可能会很高；(3)现有技术存在开发格式不统一问题；不同的程序员代码风格不一，导致代码维护性难；(4)无法满足用户个性化的设置；(5)选择图片资源时，无法对图片进行预览。IPTV EPG实际上就是IPTV的一个门户系统。EPG系统的界面与Web页面类似，在EPG界面上一般都提供各类菜单、按钮、链接等可供用户选择节目时直接点击的组件，所以我们需要一款新型的EPG页面可视化开发中添加自定义控件方法，具有以下特点(1)本产品采用已封装好的控件进行项目的开发，大大提高项目开发效率；(2)本产品不需要开发人员手动编写代码，不存在代码出错的问题；(3)本产品采用控件进行开发，后台代码风格全部统一，大大提高后期维护的效率；(4)用户可以根据自己的喜好，对已经存的菜单进行自定义设置；(5)设计人员在进行页面设计时，可以对选中的图片进行预览。

发明内容

本发明的目的在于提供一种EPG页面可视化开发中添加自定义控件的方法，以解决上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：一种EPG页面可视化开发中添加自定义控件的方法，包括以下步骤：

A、创建控件：创建控件模型，设置控件编码和名称，存入数据库中；

B、编辑控件属性：以json格式编辑控件属性，存入数据库添加控件模型对应关系，属性为W3C标准技术HTML中已定义标签的属性和css中已定义的样式Json格式:{属性英文名称:{name:“属性中文名称”}，属性英文名称:{name:“属性中文名称”},...}；

C、设置控件属性默认值：设置控件属性默认值，存入数据库添加控件模型对应关系，用户添加控件时自动设置默认值到新创建控件中，使用户操作更简洁；

D、创建控件数据属性：以json格式编辑控件数据属性，存入数据库添加控件模型对应关系,属性为W3C标准技术HTML中已定义标签的数据来源属性(src,href等)；

E、添加控件按钮：在用户页面编辑面板工具栏中添加控件按钮，配置按钮点击事件触发生成控件HTML代码；

F、添加控件后设置控件属性默认值：用户添加控件时，读取控件默认值配置，自动设置到新创建控件对应属性中；

G、实现控件可视化效果：根据W3C标准技术HTML和CSS设置新控件的属性和样式，使用户添加控件设置控件属性和数据后控件可视化。

2、实现用户自定义菜单功能的技术方案：实现目标：把想要进行自定义的菜单进行分组，同一分组中的菜单可以相互交换位置，可以在分组内部对菜单进行删除操作；可以对已删除的菜单进行添加回来。

技术方案：在设计时，把用户想进行自定义的菜单元素进行分组设置，该分组就是设置操作范围，只有在同一分组中的元素才可以进行相互之间的操作。然后对该分组中的所有元素进行一个位置号的设置，即表示初始时该菜单元素所在的位置。当用户要对菜单元素进行自定义时，首先设置一个进入自定义菜单的按钮，用户点击之后即进入编辑模式，可以进行菜单元素的自定义操作。当需要移动一个元素的时候，用户选中该元素，进行上下左右的操作，移动到目标位置后点击确定就完成菜单元素位置的自定义调整。如果需要删除菜单元素，选中目标菜单元素之后会有一个删除提示，点击确定就把该元素删除了。对于菜单元素的添加操作，在进入编辑模式时，已删除的元素会在所有菜单元素的最后面进行显示，用户可以选择某一已删除的元素进行添加，其中已删除的元素还处于删除状态时不能进行删除操作。

3、设计人员图片预览的技术方案：实现目标：设计人员在使用EPG平台进行页面设计时，需要对图片或图片链接作图片的填充，在选择图片时，会有一个图片的列表，原有的实现是该列表只显示图片资源的名称和资源上传时间，设计人员可能不知道哪个名字代表哪张图片，所以图片预览的实现目标是点击一个图片，在列表旁边对该图片进行显示，可以让设计人员进行一个预览。

技术方案：首先设置一个图片选中时的事件监听，当某一个图片被选中时，触发该事件，此时去获取该图片的访问地址，然后创建一个div，将该图片进行一个现实，至于具体的图片显示位置，可以根据需求进行调整。

本发明的技术效果和优点：该EPG页面可视化开发中添加自定义控件方法可以自由组合、工序节省、灵活多变、满足用户更为个性化的设置和具有较高的友好性。

附图说明

图1为本发明的原理图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明提供了如图1所示的一种EPG页面可视化开发中添加自定义控件的方法，包括以下步骤：

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

Claims

1.一种EPG页面可视化开发中添加自定义控件的方法，其特征在于：包括以下步骤：

2.实现用户自定义菜单功能的技术方案：实现目标：把想要进行自定义的菜单进行分组，同一分组中的菜单可以相互交换位置，可以在分组内部对菜单进行删除操作；可以对已删除的菜单进行添加回来。

3.技术方案：在设计时，把用户想进行自定义的菜单元素进行分组设置，该分组就是设置操作范围，只有在同一分组中的元素才可以进行相互之间的操作。

4.然后对该分组中的所有元素进行一个位置号的设置，即表示初始时该菜单元素所在的位置。

5.当用户要对菜单元素进行自定义时，首先设置一个进入自定义菜单的按钮，用户点击之后即进入编辑模式，可以进行菜单元素的自定义操作。

6.当需要移动一个元素的时候，用户选中该元素，进行上下左右的操作，移动到目标位置后点击确定就完成菜单元素位置的自定义调整。

7.如果需要删除菜单元素，选中目标菜单元素之后会有一个删除提示，点击确定就把该元素删除了。

8.对于菜单元素的添加操作，在进入编辑模式时，已删除的元素会在所有菜单元素的最后面进行显示，用户可以选择某一已删除的元素进行添加，其中已删除的元素还处于删除状态时不能进行删除操作。

9.设计人员图片预览的技术方案：实现目标：设计人员在使用EPG平台进行页面设计时，需要对图片或图片链接作图片的填充，在选择图片时，会有一个图片的列表，原有的实现是该列表只显示图片资源的名称和资源上传时间，设计人员可能不知道哪个名字代表哪张图片，所以图片预览的实现目标是点击一个图片，在列表旁边对该图片进行显示，可以让设计人员进行一个预览。

10.技术方案：首先设置一个图片选中时的事件监听，当某一个图片被选中时，触发该事件，此时去获取该图片的访问地址，然后创建一个div，将该图片进行一个现实，至于具体的图片显示位置，可以根据需求进行调整。