CN104331303A - 一种用于家庭网关设备功能扩展的Web UI框架及方法 - Google Patents

Abstract

本发明公开了一种用于家庭网关设备功能扩展的Web UI框架，包含：主页面，其包含导航菜单以及若干扩展功能配置页面；若干安装包，与扩展功能配置页面一一对应，用于动态创建对应的扩展功能配置页面，将该扩展功能配置页面的载入接口添加至主页面的导航菜单中，使其显示在主页面上；库文件，用于动态创建并修饰导航菜单以及扩展功能配置页面上的各个页面元素。本发明还提供一种利用所述的WebUI框架进行家庭网关设备功能扩展的方法。本发明只需点击安装对应的安装包即可使新的扩展功能配置页面无缝嵌入到已有的主页面中，具有良好的可扩展性，使家庭网关设备不需通过升级软件来进行功能扩展，节省用户等待时间，具有良好的用户体验。

Description

一种用于家庭网关设备功能扩展的Web UI框架及方法

技术领域

本发明涉及一种Web UI（网络产品界面，Website User Interface）框架及利用该Web UI框架进行功能扩展的方法，具体是指一种基于MVC（模型-视图-控制器，Model-View-Controller）的用于家庭网关设备功能扩展的Web UI框架及方法。

背景技术

现有的家庭网关设备的Web UI页面结构通常将数据、模型与视图绑定，也就是该家庭网关设备的功能是与页面绑定的，当家庭网关设备需要增加一个新功能时，就需要增加对应的页面，并且这种方式往往是要通过升级软件的方法才能实现将新的页面无缝添加至主页面中，同时使得相应的配置生效。

随着智能家庭网络发展的越来越成熟，其受到越来越多的关注，因此家庭网关设备已经不再仅仅局限于传统的功能，越来越多的日益丰富起来的新功能将被添加至家庭网关设备中。如若继续使用当前Web UI的设计方法，会带来两个问题：首先，随着功能的增加，需要增加的页面也越来越多；其次，每次添加功能几乎都要通过系统升级的方试来扩展对应的页面。显然这样比较浪费资源，并且对于用户而言，如果添加相应功能都需要通过软件升级的方式来扩展配置对应的页面，所需软件升级的等待时间就会越来越长，导致家庭网关设备的可扩展性不好，用户体验较差。

发明内容

本发明的目的在于提供一种用于家庭网关设备功能扩展的Web UI框架及方法，只需点击安装对应的安装包即可使新的扩展功能配置页面无缝嵌入到已有的主页面中，具有良好的可扩展性，使家庭网关设备不需要通过升级软件的方法来进行功能扩展，节省用户的等待时间，具有良好的用户体验。

为了达到上述目的，本发明提供一种用于家庭网关设备功能扩展的Web UI框架，包含：

主页面，其用于显示家庭网关设备的操作页面，该主页面包含导航菜单，以及若干扩展功能配置页面；

若干安装包，其分别与所述的主页面相连接，且与所述的扩展功能配置页面一一对应；

库文件，其分别与所述的导航菜单以及扩展功能配置页面相连接，用于动态创建并修饰导航菜单以及扩展功能配置页面上的各个页面元素。

所述的安装包包含：控制接入模块，其与所述的导航菜单相连接，将扩展功能配置页面的载入接口添加至主页面的导航菜单中；模型模块，其与所述的扩展功能配置页面相连接，包含扩展功能配置页面中的全部配置项元素，用于动态创建该扩展功能配置页面；配置数据文件模块，其与所述的扩展功能配置页面相连接，用于存储扩展功能配置页面上的全部数据值，将所述的数据值加载至扩展功能配置页面上并与家庭网关设备进行交互，使扩展的功能生效。

所述的控制接入模块用于决定扩展功能配置页面的载入接口在主页面的导航菜单中的层级位置。

所述的配置数据文件模块中存储的扩展功能配置页面上的全部数据值包含家庭网关设备的默认数据值和用户设置的数据值。

所述的库文件包含：JavaScript库文件，其包含与所述的导航菜单相连接的接口JavaScript库文件以及与所述的扩展功能配置页面相连接的配置页面JavaScript库文件；该接口JavaScript库文件用于动态创建导航菜单上的载入接口的页面元素，该配置页面JavaScript库文件用于动态创建扩展功能配置页面上的页面元素；CSS样式库文件，其包含与所述的导航菜单相连接的接口CSS样式库文件以及与所述的扩展功能配置页面相连接的配置页面CSS样式库文件；该接口CSS样式库文件用于修饰导航菜单上的载入接口的页面元素的样式，该配置页面CSS样式库文件用于修饰扩展功能配置页面上的页面元素的样式。

本发明还提供一种利用所述的Web UI框架进行家庭网关设备功能扩展的方法，包含以下步骤：

S1、当用户需要扩展家庭网关设备的功能时，选择并点击与该功能相对应的安装包，将该安装包安装至家庭网关设备中；

S2、安装包中的控制接入模块在主页面的导航菜单中添加将要创建的扩展功能配置页面的载入接口；

S3、安装包中的模型模块动态创建该扩展功能配置页面；

S4、安装包中的配置数据文件模块将其所存储的扩展功能配置页面上的全部数据值加载至该扩展功能配置页面上，并与家庭网关设备进行交互，使扩展的功能生效。

所述的步骤S2具体包含：

S21、点击主页面；

S22、控制接入模块在主页面的导航菜单中动态创建扩展功能配置页面的载入接口，该控制接入模块决定所述的载入接口在导航菜单中的层级位置；

S23、库文件中的JavaScript库文件中的接口JavaScript库文件动态创建导航菜单上的载入接口的页面元素；

S24、库文件中的CSS样式库文件中的接口CSS样式库文件修饰导航菜单上的载入接口的页面元素的样式。

所述的步骤S3具体包含：

S31、点击导航菜单上的载入接口；

S32、利用模型模块中所包含的扩展功能配置页面中的全部配置项元素来动态创建该扩展功能配置页面；

S33、库文件中的JavaScript库文件中的配置页面JavaScript库文件动态创建扩展功能配置页面上的页面元素；

S34、库文件中的CSS样式库文件中的配置页面CSS样式库文件修饰扩展功能配置页面上的页面元素的样式。

所述的步骤S4具体包含：

S41、判断扩展功能配置页面是否创建完毕，若是则继续执行步骤S42，若否则返回步骤S32；

S42、通过AJAX方式向配置数据文件模块请求加载数据；

S43、扩展功能配置页面进行页面解析，配置数据文件模块将其所存储的扩展功能配置页面上的全部数据值加载至该扩展功能配置页面上，并与家庭网关设备进行交互，使扩展的功能生效。

所述的步骤S43中，安装包在安装时第一次请求配置数据文件模块加载的数据值是家庭网关设备的默认数据值，之后再请求配置数据文件模块加载的数据值是用户设置的数据值。

综上所述，本发明所提供的用于家庭网关设备功能扩展的Web UI框架及方法，具有以下有益效果：1、添加家庭网关设备的功能时，用户不需要修改任何已有的文件，只需安装对应的安装包即可动态创建并添加扩展功能配置页面，使新的扩展功能配置页面能够无缝嵌入到已有的主页面中，具有良好的可扩展性。2、将视图、模型与控制相分离，允许更改视图层而不用重新编译模型和控制器代码，降低了家庭网关设备的主页面与功能的耦合性，使其不需要通过升级软件的方法来进行功能扩展，节省用户的等待时间，具有良好的用户体验。3、本发明不仅仅局限于应用在家庭网关设备上，同时也可适用于各类其他网站及网络软件，应用范围广。

附图说明

图1为本发明提供的用于家庭网关设备功能扩展的Web UI框架的结构示意图；

图2为本发明提供的利用Web UI框架进行家庭网关设备功能扩展的方法流程图；

图3为本发明中的创建扩展功能配置页面的载入接口的方法流程图；

图4为本发明中的创建扩展功能配置页面以及加载数据值至该扩展功能配置页面的方法流程图。

具体实施方式

以下结合图1～图4，通过详细说明一个较佳的具体实施例，对本发明做进一步阐述。

如图1所示，为本发明所提供的用于家庭网关设备功能扩展的Web UI框架，包含：主页面1，其用于显示家庭网关设备的操作页面，该主页面1包含导航菜单11，以及若干扩展功能配置页面12；若干安装包2，其分别与所述的主页面1相连接，且与所述的扩展功能配置页面12一一对应，用于动态创建对应的扩展功能配置页面12，将该扩展功能配置页面12的载入接口添加至主页面1的导航菜单11中，使得该扩展功能配置页面12显示在主页面1上，以扩展家庭网关设备的相应功能；库文件3，其分别与所述的导航菜单11以及扩展功能配置页面12相连接，用于动态创建并修饰导航菜单11以及扩展功能配置页面12上的各个页面元素。

所述的安装包2包含：控制接入模块21，其与所述的导航菜单11相连接，用于对扩展功能配置页面12进行接入控制，将该扩展功能配置页面12的载入接口添加至主页面1的导航菜单11中；模型模块22，其与所述的扩展功能配置页面12相连接，包含扩展功能配置页面12中的全部配置项元素，是扩展功能配置页面12的模型，用于动态创建该扩展功能配置页面12；配置数据文件模块23，其与所述的扩展功能配置页面12相连接，用于存储扩展功能配置页面12上的全部数据值，将所述的数据值加载至扩展功能配置页面12上并与家庭网关设备进行交互，使扩展的功能生效，从而实现扩展功能配置页面12的无缝添加。

所述的控制接入模块21用于决定扩展功能配置页面12的载入接口在主页面1的导航菜单11中的层级位置。

所述的配置数据文件模块23中存储的扩展功能配置页面12上的全部数据值为JSON（JavaScript Object Notation，JavaScript对象符号）格式，包含家庭网关设备的默认数据值和用户设置的数据值。

所述的库文件3包含：JavaScript库文件31，其分别与所述的导航菜单11以及扩展功能配置页面12相连接，用于动态创建导航菜单11的载入接口以及扩展功能配置页面12上的各个页面元素；CSS（Cascading Style Sheets，层叠样式表）样式库文件32，其分别与所述的导航菜单11以及扩展功能配置页面12相连接，用于修饰导航菜单11的载入接口以及扩展功能配置页面12上的各个页面元素的样式。

进一步，所述的JavaScript库文件31包含：与所述的导航菜单11相连接的接口JavaScript库文件，以及与所述的扩展功能配置页面12相连接的配置页面JavaScript库文件；所述的接口JavaScript库文件用于动态创建导航菜单11上的载入接口的页面元素，而所述的配置页面JavaScript库文件用于动态创建扩展功能配置页面12上的页面元素。

所述的CSS样式库文件32则包含：与所述的导航菜单11相连接的接口CSS样式库文件，以及与所述的扩展功能配置页面12相连接的配置页面CSS样式库文件；所述的接口CSS样式库文件用于修饰导航菜单11上的载入接口的页面元素的样式，而所述的配置页面CSS样式库文件用于修饰扩展功能配置页面12上的页面元素的样式。

如图2所示，本发明还提供一种利用所述的Web UI框架进行家庭网关设备功能扩展的方法，包含以下步骤：

S1、当用户需要扩展家庭网关设备的功能时，选择并点击与该功能相对应的安装包2，将该安装包2安装至家庭网关设备中；

S2、安装包2中的控制接入模块21在主页面1的导航菜单11中添加将要创建的扩展功能配置页面12的载入接口；

S3、安装包2中的模型模块22动态创建该扩展功能配置页面12；

S4、安装包2中的配置数据文件模块23将其所存储的扩展功能配置页面12上的全部数据值加载至该扩展功能配置页面12上，并与家庭网关设备进行交互，使扩展的功能生效。

如图3所示，所述的步骤S2具体包含：

S21、点击主页面1上的请求安装按钮；

S22、控制接入模块21在主页面1的导航菜单11中动态创建扩展功能配置页面12的载入接口，该控制接入模块21决定所述的载入接口在导航菜单11中的层级位置；

S23、库文件3中的JavaScript库文件31中的接口JavaScript库文件动态创建导航菜单11上的载入接口的页面元素；

S24、库文件3中的CSS样式库文件32中的接口CSS样式库文件修饰导航菜单11上的载入接口的页面元素的样式。

如图4所示，所述的步骤S3具体包含：

S31、点击导航菜单11上的载入接口；

S32、利用模型模块22中所包含的扩展功能配置页面12中的全部配置项元素来动态创建该扩展功能配置页面12；

S33、库文件3中的JavaScript库文件31中的配置页面JavaScript库文件动态创建扩展功能配置页面12上的页面元素；

S34、库文件3中的CSS样式库文件32中的配置页面CSS样式库文件修饰扩展功能配置页面12上的页面元素的样式。

如图4所示，所述的步骤S4具体包含：

S41、判断扩展功能配置页面12是否创建完毕，若是则继续执行步骤S42，若否则返回步骤S32；

S42、通过AJAX（Asynchronous Javascript And XML，异步JavaScript和XML）方式向配置数据文件模块23请求加载数据；

S43、扩展功能配置页面12进行页面解析，配置数据文件模块23将其所存储的扩展功能配置页面12上的全部JSON格式的数据值加载至该扩展功能配置页面12上，并与家庭网关设备进行交互，使扩展的功能生效，从而实现扩展功能配置页面12的无缝添加。

所述的步骤S43中，安装包2在安装时第一次请求配置数据文件模块23加载的数据值是家庭网关设备的默认数据值，之后再请求配置数据文件模块23加载的数据值是用户设置的数据值。

以上是本发明利用Web UI框架进行家庭网关设备功能扩展的整个流程，但是对于用户而言，其在整个安装过程中只需要完成几次点击动作即可，非常方便。首先点击安装对应功能的安装包，然后点击主页面，在导航菜单中动态生成对应的扩展功能配置页面的载入接口，接着点击导航菜单上的载入接口，动态创建扩展功能配置页面，并在扩展功能配置页面创建完成之后自动加载数据值。

综上所述，本发明所提供的用于家庭网关设备功能扩展的Web UI框架及方法，具有以下有益效果：1、添加家庭网关设备的功能时，用户不需要修改任何已有的文件，只需安装对应的安装包即可动态创建并添加扩展功能配置页面，使新的扩展功能配置页面能够无缝嵌入到已有的主页面中，具有良好的可扩展性。2、将视图、模型与控制相分离，允许更改视图层而不用重新编译模型和控制器代码，降低了家庭网关设备的主页面与功能的耦合性，使其不需要通过升级软件的方法来进行功能扩展，节省用户的等待时间，具有良好的用户体验。3、本发明不仅仅局限于应用在家庭网关设备上，同时也可适用于各类其他网站及网络软件，应用范围广。

尽管本发明的内容已经通过上述优选实施例作了详细介绍，但应当认识到上述的描述不应被认为是对本发明的限制。在本领域技术人员阅读了上述内容后，对于本发明的多种修改和替代都将是显而易见的。因此，本发明的保护范围应由所附的权利要求来限定。

Claims (10)

1.一种用于家庭网关设备功能扩展的Web UI框架，其特征在于，包含：

主页面（1），其用于显示家庭网关设备的操作页面，该主页面（1）包含导航菜单（11），以及若干扩展功能配置页面（12）；

若干安装包（2），其分别与所述的主页面（1）相连接，且与所述的扩展功能配置页面（12）一一对应，用于动态创建对应的扩展功能配置页面（12）；

库文件（3），其分别与所述的导航菜单（11）以及扩展功能配置页面（12）相连接，用于动态创建并修饰导航菜单（11）以及扩展功能配置页面（12）上的各个页面元素。

2.如权利要求1所述的用于家庭网关设备功能扩展的Web UI框架，其特征在于，所述的安装包（2）包含：

控制接入模块（21），其与所述的导航菜单（11）相连接，将扩展功能配置页面（12）的载入接口添加至主页面（1）的导航菜单（11）中；

模型模块（22），其与所述的扩展功能配置页面（12）相连接，包含扩展功能配置页面（12）中的全部配置项元素，用于动态创建该扩展功能配置页面（12）；

配置数据文件模块（23），其与所述的扩展功能配置页面（12）相连接，用于存储扩展功能配置页面（12）上的全部数据值，将所述的数据值加载至扩展功能配置页面（12）上并与家庭网关设备进行交互，使扩展的功能生效。

3.如权利要求2所述的用于家庭网关设备功能扩展的Web UI框架，其特征在于，所述的控制接入模块（21）用于决定扩展功能配置页面（12）的载入接口在主页面（1）的导航菜单（11）中的层级位置。

4.如权利要求2所述的用于家庭网关设备功能扩展的Web UI框架，其特征在于，所述的配置数据文件模块（23）中存储的扩展功能配置页面（12）上的全部数据值包含家庭网关设备的默认数据值和用户设置的数据值。

5.如权利要求1所述的用于家庭网关设备功能扩展的Web UI框架，其特征在于，所述的库文件（3）包含：

JavaScript库文件（31），其包含与所述的导航菜单（11）相连接的接口JavaScript库文件以及与所述的扩展功能配置页面（12）相连接的配置页面JavaScript库文件；该接口JavaScript库文件用于动态创建导航菜单（11）上的载入接口的页面元素，该配置页面JavaScript库文件用于动态创建扩展功能配置页面（12）上的页面元素；

CSS样式库文件（32），其包含与所述的导航菜单（11）相连接的接口CSS样式库文件以及与所述的扩展功能配置页面（12）相连接的配置页面CSS样式库文件；该接口CSS样式库文件用于修饰导航菜单（11）上的载入接口的页面元素的样式，该配置页面CSS样式库文件用于修饰扩展功能配置页面（12）上的页面元素的样式。

6.一种利用如权利要求1-5中任一项所述的Web UI框架进行家庭网关设备功能扩展的方法，其特征在于，该方法包含如下步骤：

S1、当用户需要扩展家庭网关设备的功能时，选择并点击与该功能相对应的安装包（2），将该安装包（2）安装至家庭网关设备中；

S2、安装包（2）中的控制接入模块（21）在主页面（1）的导航菜单（11）中添加将要创建的扩展功能配置页面（12）的载入接口；

S3、安装包（2）中的模型模块（22）动态创建该扩展功能配置页面（12）；

S4、安装包（2）中的配置数据文件模块（23）将其所存储的扩展功能配置页面（12）上的全部数据值加载至该扩展功能配置页面（12）上，并与家庭网关设备进行交互，使扩展的功能生效。

7.如权利要求6所述的利用Web UI框架进行家庭网关设备功能扩展的方法，其特征在于，所述的步骤S2具体包含：

S21、点击主页面（1）；

S22、控制接入模块（21）在主页面（1）的导航菜单（11）中动态创建扩展功能配置页面（12）的载入接口，该控制接入模块（21）决定所述的载入接口在导航菜单（11）中的层级位置；

S23、库文件（3）中的JavaScript库文件（31）中的接口JavaScript库文件动态创建导航菜单（11）上的载入接口的页面元素；

S24、库文件（3）中的CSS样式库文件（32）中的接口CSS样式库文件修饰导航菜单（11）上的载入接口的页面元素的样式。

8.如权利要求6所述的利用Web UI框架进行家庭网关设备功能扩展的方法，其特征在于，所述的步骤S3具体包含：

S31、点击导航菜单（11）上的载入接口；

S32、利用模型模块（22）中所包含的扩展功能配置页面（12）中的全部配置项元素来动态创建该扩展功能配置页面（12）；

S33、库文件（3）中的JavaScript库文件（31）中的配置页面JavaScript库文件动态创建扩展功能配置页面（12）上的页面元素；

S34、库文件（3）中的CSS样式库文件（32）中的配置页面CSS样式库文件修饰扩展功能配置页面（12）上的页面元素的样式。

9.如权利要求6所述的利用Web UI框架进行家庭网关设备功能扩展的方法，其特征在于，所述的步骤S4具体包含：

S41、判断扩展功能配置页面（12）是否创建完毕，若是则继续执行步骤S42，若否则返回步骤S32；

S42、通过AJAX方式向配置数据文件模块（23）请求加载数据；

S43、扩展功能配置页面（12）进行页面解析，配置数据文件模块（23）将其所存储的扩展功能配置页面（12）上的全部数据值加载至该扩展功能配置页面（12）上，并与家庭网关设备进行交互，使扩展的功能生效。

10.如权利要求9所述的利用Web UI框架进行家庭网关设备功能扩展的方法，其特征在于，所述的步骤S43中，安装包（2）在安装时第一次请求配置数据文件模块（23）加载的数据值是家庭网关设备的默认数据值，之后再请求配置数据文件模块（23）加载的数据值是用户设置的数据值。