一種用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的Web UI框架及方法
【專(zhuān)利摘要】本發(fā)明公開(kāi)了一種用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的Web UI框架，包含：主頁(yè)面，其包含導(dǎo)航菜單以及若干擴(kuò)展功能配置頁(yè)面；若干安裝包，與擴(kuò)展功能配置頁(yè)面一一對(duì)應(yīng)，用于動(dòng)態(tài)創(chuàng)建對(duì)應(yīng)的擴(kuò)展功能配置頁(yè)面，將該擴(kuò)展功能配置頁(yè)面的載入接口添加至主頁(yè)面的導(dǎo)航菜單中，使其顯示在主頁(yè)面上；庫(kù)文件，用于動(dòng)態(tài)創(chuàng)建并修飾導(dǎo)航菜單以及擴(kuò)展功能配置頁(yè)面上的各個(gè)頁(yè)面元素。本發(fā)明還提供一種利用所述的WebUI框架進(jìn)行家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的方法。本發(fā)明只需點(diǎn)擊安裝對(duì)應(yīng)的安裝包即可使新的擴(kuò)展功能配置頁(yè)面無(wú)縫嵌入到已有的主頁(yè)面中，具有良好的可擴(kuò)展性，使家庭網(wǎng)關(guān)設(shè)備不需通過(guò)升級(jí)軟件來(lái)進(jìn)行功能擴(kuò)展，節(jié)省用戶(hù)等待時(shí)間，具有良好的用戶(hù)體驗(yàn)。
【專(zhuān)利說(shuō)明】—種用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的Web Ul框架及方法

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及一種Web UI (網(wǎng)絡(luò)產(chǎn)品界面，Website User Interface)框架及利用該Web Π框架進(jìn)行功能擴(kuò)展的方法，具體是指一種基于MVC (模型-視圖-控制器，Model-View-Controller)的用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的Web UI框架及方法。

【背景技術(shù)】
[0002]現(xiàn)有的家庭網(wǎng)關(guān)設(shè)備的Web UI頁(yè)面結(jié)構(gòu)通常將數(shù)據(jù)、模型與視圖綁定，也就是該家庭網(wǎng)關(guān)設(shè)備的功能是與頁(yè)面綁定的，當(dāng)家庭網(wǎng)關(guān)設(shè)備需要增加一個(gè)新功能時(shí)，就需要增加對(duì)應(yīng)的頁(yè)面，并且這種方式往往是要通過(guò)升級(jí)軟件的方法才能實(shí)現(xiàn)將新的頁(yè)面無(wú)縫添加至主頁(yè)面中，同時(shí)使得相應(yīng)的配置生效。
[0003]隨著智能家庭網(wǎng)絡(luò)發(fā)展的越來(lái)越成熟，其受到越來(lái)越多的關(guān)注，因此家庭網(wǎng)關(guān)設(shè)備已經(jīng)不再僅僅局限于傳統(tǒng)的功能，越來(lái)越多的日益豐富起來(lái)的新功能將被添加至家庭網(wǎng)關(guān)設(shè)備中。如若繼續(xù)使用當(dāng)前Web Π的設(shè)計(jì)方法，會(huì)帶來(lái)兩個(gè)問(wèn)題:首先，隨著功能的增力口，需要增加的頁(yè)面也越來(lái)越多；其次，每次添加功能幾乎都要通過(guò)系統(tǒng)升級(jí)的方試來(lái)擴(kuò)展對(duì)應(yīng)的頁(yè)面。顯然這樣比較浪費(fèi)資源，并且對(duì)于用戶(hù)而言，如果添加相應(yīng)功能都需要通過(guò)軟件升級(jí)的方式來(lái)擴(kuò)展配置對(duì)應(yīng)的頁(yè)面，所需軟件升級(jí)的等待時(shí)間就會(huì)越來(lái)越長(zhǎng)，導(dǎo)致家庭網(wǎng)關(guān)設(shè)備的可擴(kuò)展性不好，用戶(hù)體驗(yàn)較差。


【發(fā)明內(nèi)容】

[0004]本發(fā)明的目的在于提供一種用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的Web Π框架及方法，只需點(diǎn)擊安裝對(duì)應(yīng)的安裝包即可使新的擴(kuò)展功能配置頁(yè)面無(wú)縫嵌入到已有的主頁(yè)面中，具有良好的可擴(kuò)展性，使家庭網(wǎng)關(guān)設(shè)備不需要通過(guò)升級(jí)軟件的方法來(lái)進(jìn)行功能擴(kuò)展，節(jié)省用戶(hù)的等待時(shí)間，具有良好的用戶(hù)體驗(yàn)。
[0005]為了達(dá)到上述目的，本發(fā)明提供一種用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的Web UI框架，包含:
主頁(yè)面，其用于顯示家庭網(wǎng)關(guān)設(shè)備的操作頁(yè)面，該主頁(yè)面包含導(dǎo)航菜單，以及若干擴(kuò)展功能配置頁(yè)面；
若干安裝包，其分別與所述的主頁(yè)面相連接，且與所述的擴(kuò)展功能配置頁(yè)面一一對(duì)應(yīng)；
庫(kù)文件，其分別與所述的導(dǎo)航菜單以及擴(kuò)展功能配置頁(yè)面相連接，用于動(dòng)態(tài)創(chuàng)建并修飾導(dǎo)航菜單以及擴(kuò)展功能配置頁(yè)面上的各個(gè)頁(yè)面元素。
[0006]所述的安裝包包含:控制接入模塊，其與所述的導(dǎo)航菜單相連接，將擴(kuò)展功能配置頁(yè)面的載入接口添加至主頁(yè)面的導(dǎo)航菜單中；模型模塊，其與所述的擴(kuò)展功能配置頁(yè)面相連接，包含擴(kuò)展功能配置頁(yè)面中的全部配置項(xiàng)元素，用于動(dòng)態(tài)創(chuàng)建該擴(kuò)展功能配置頁(yè)面；配置數(shù)據(jù)文件模塊，其與所述的擴(kuò)展功能配置頁(yè)面相連接，用于存儲(chǔ)擴(kuò)展功能配置頁(yè)面上的全部數(shù)據(jù)值，將所述的數(shù)據(jù)值加載至擴(kuò)展功能配置頁(yè)面上并與家庭網(wǎng)關(guān)設(shè)備進(jìn)行交互，使擴(kuò)展的功能生效。
[0007]所述的控制接入模塊用于決定擴(kuò)展功能配置頁(yè)面的載入接口在主頁(yè)面的導(dǎo)航菜單中的層級(jí)位置。
[0008]所述的配置數(shù)據(jù)文件模塊中存儲(chǔ)的擴(kuò)展功能配置頁(yè)面上的全部數(shù)據(jù)值包含家庭網(wǎng)關(guān)設(shè)備的默認(rèn)數(shù)據(jù)值和用戶(hù)設(shè)置的數(shù)據(jù)值。
[0009]所述的庫(kù)文件包含JavaScript庫(kù)文件,其包含與所述的導(dǎo)航菜單相連接的接口JavaScript庫(kù)文件以及與所述的擴(kuò)展功能配置頁(yè)面相連接的配置頁(yè)面JavaScript庫(kù)文件；該接口 JavaScript庫(kù)文件用于動(dòng)態(tài)創(chuàng)建導(dǎo)航菜單上的載入接口的頁(yè)面元素,該配置頁(yè)面JavaScript庫(kù)文件用于動(dòng)態(tài)創(chuàng)建擴(kuò)展功能配置頁(yè)面上的頁(yè)面元素；CSS樣式庫(kù)文件，其包含與所述的導(dǎo)航菜單相連接的接口 CSS樣式庫(kù)文件以及與所述的擴(kuò)展功能配置頁(yè)面相連接的配置頁(yè)面CSS樣式庫(kù)文件；該接口 CSS樣式庫(kù)文件用于修飾導(dǎo)航菜單上的載入接口的頁(yè)面元素的樣式，該配置頁(yè)面CSS樣式庫(kù)文件用于修飾擴(kuò)展功能配置頁(yè)面上的頁(yè)面元素的樣式。
[0010]本發(fā)明還提供一種利用所述的Web Π框架進(jìn)行家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的方法，包含以下步驟:
51、當(dāng)用戶(hù)需要擴(kuò)展家庭網(wǎng)關(guān)設(shè)備的功能時(shí)，選擇并點(diǎn)擊與該功能相對(duì)應(yīng)的安裝包，將該安裝包安裝至家庭網(wǎng)關(guān)設(shè)備中；
52、安裝包中的控制接入模塊在主頁(yè)面的導(dǎo)航菜單中添加將要?jiǎng)?chuàng)建的擴(kuò)展功能配置頁(yè)面的載入接口；
53、安裝包中的模型模塊動(dòng)態(tài)創(chuàng)建該擴(kuò)展功能配置頁(yè)面；
54、安裝包中的配置數(shù)據(jù)文件模塊將其所存儲(chǔ)的擴(kuò)展功能配置頁(yè)面上的全部數(shù)據(jù)值加載至該擴(kuò)展功能配置頁(yè)面上，并與家庭網(wǎng)關(guān)設(shè)備進(jìn)行交互，使擴(kuò)展的功能生效。
[0011]所述的步驟S2具體包含:
521、點(diǎn)擊主頁(yè)面；
522、控制接入模塊在主頁(yè)面的導(dǎo)航菜單中動(dòng)態(tài)創(chuàng)建擴(kuò)展功能配置頁(yè)面的載入接口，該控制接入模塊決定所述的載入接口在導(dǎo)航菜單中的層級(jí)位置；
523、庫(kù)文件中的JavaScript庫(kù)文件中的接口JavaScript庫(kù)文件動(dòng)態(tài)創(chuàng)建導(dǎo)航菜單上的載入接口的頁(yè)面元素；
524、庫(kù)文件中的CSS樣式庫(kù)文件中的接口CSS樣式庫(kù)文件修飾導(dǎo)航菜單上的載入接口的頁(yè)面元素的樣式。
[0012]所述的步驟S3具體包含:
531、點(diǎn)擊導(dǎo)航菜單上的載入接口；
532、利用模型模塊中所包含的擴(kuò)展功能配置頁(yè)面中的全部配置項(xiàng)元素來(lái)動(dòng)態(tài)創(chuàng)建該擴(kuò)展功能配置頁(yè)面；
533、庫(kù)文件中的JavaScript庫(kù)文件中的配置頁(yè)面JavaScript庫(kù)文件動(dòng)態(tài)創(chuàng)建擴(kuò)展功能配置頁(yè)面上的頁(yè)面元素；
534、庫(kù)文件中的CSS樣式庫(kù)文件中的配置頁(yè)面CSS樣式庫(kù)文件修飾擴(kuò)展功能配置頁(yè)面上的頁(yè)面元素的樣式。
[0013]所述的步驟S4具體包含: 541、判斷擴(kuò)展功能配置頁(yè)面是否創(chuàng)建完畢，若是則繼續(xù)執(zhí)行步驟S42，若否則返回步驟
S32 ；
542、通過(guò)AJAX方式向配置數(shù)據(jù)文件模塊請(qǐng)求加載數(shù)據(jù)；
543、擴(kuò)展功能配置頁(yè)面進(jìn)行頁(yè)面解析，配置數(shù)據(jù)文件模塊將其所存儲(chǔ)的擴(kuò)展功能配置頁(yè)面上的全部數(shù)據(jù)值加載至該擴(kuò)展功能配置頁(yè)面上，并與家庭網(wǎng)關(guān)設(shè)備進(jìn)行交互，使擴(kuò)展的功能生效。
[0014]所述的步驟S43中，安裝包在安裝時(shí)第一次請(qǐng)求配置數(shù)據(jù)文件模塊加載的數(shù)據(jù)值是家庭網(wǎng)關(guān)設(shè)備的默認(rèn)數(shù)據(jù)值，之后再請(qǐng)求配置數(shù)據(jù)文件模塊加載的數(shù)據(jù)值是用戶(hù)設(shè)置的數(shù)據(jù)值。
[0015]綜上所述，本發(fā)明所提供的用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的Web UI框架及方法，具有以下有益效果:1、添加家庭網(wǎng)關(guān)設(shè)備的功能時(shí)，用戶(hù)不需要修改任何已有的文件，只需安裝對(duì)應(yīng)的安裝包即可動(dòng)態(tài)創(chuàng)建并添加擴(kuò)展功能配置頁(yè)面，使新的擴(kuò)展功能配置頁(yè)面能夠無(wú)縫嵌入到已有的主頁(yè)面中，具有良好的可擴(kuò)展性。2、將視圖、模型與控制相分離，允許更改視圖層而不用重新編譯模型和控制器代碼，降低了家庭網(wǎng)關(guān)設(shè)備的主頁(yè)面與功能的耦合性，使其不需要通過(guò)升級(jí)軟件的方法來(lái)進(jìn)行功能擴(kuò)展，節(jié)省用戶(hù)的等待時(shí)間，具有良好的用戶(hù)體驗(yàn)。3、本發(fā)明不僅僅局限于應(yīng)用在家庭網(wǎng)關(guān)設(shè)備上，同時(shí)也可適用于各類(lèi)其他網(wǎng)站及網(wǎng)絡(luò)軟件，應(yīng)用范圍廣。

【專(zhuān)利附圖】

【附圖說(shuō)明】
[0016]圖1為本發(fā)明提供的用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的Web UI框架的結(jié)構(gòu)示意圖； 圖2為本發(fā)明提供的利用Web UI框架進(jìn)行家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的方法流程圖；
圖3為本發(fā)明中的創(chuàng)建擴(kuò)展功能配置頁(yè)面的載入接口的方法流程圖；
圖4為本發(fā)明中的創(chuàng)建擴(kuò)展功能配置頁(yè)面以及加載數(shù)據(jù)值至該擴(kuò)展功能配置頁(yè)面的方法流程圖。

【具體實(shí)施方式】
[0017]以下結(jié)合圖1?圖4，通過(guò)詳細(xì)說(shuō)明一個(gè)較佳的具體實(shí)施例，對(duì)本發(fā)明做進(jìn)一步闡述。
[0018]如圖1所示，為本發(fā)明所提供的用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的Web Π框架，包含:主頁(yè)面1，其用于顯示家庭網(wǎng)關(guān)設(shè)備的操作頁(yè)面，該主頁(yè)面I包含導(dǎo)航菜單11，以及若干擴(kuò)展功能配置頁(yè)面12 ;若干安裝包2，其分別與所述的主頁(yè)面I相連接，且與所述的擴(kuò)展功能配置頁(yè)面12--對(duì)應(yīng)，用于動(dòng)態(tài)創(chuàng)建對(duì)應(yīng)的擴(kuò)展功能配置頁(yè)面12，將該擴(kuò)展功能配置頁(yè)面
12的載入接口添加至主頁(yè)面I的導(dǎo)航菜單11中，使得該擴(kuò)展功能配置頁(yè)面12顯示在主頁(yè)面I上，以擴(kuò)展家庭網(wǎng)關(guān)設(shè)備的相應(yīng)功能；庫(kù)文件3，其分別與所述的導(dǎo)航菜單11以及擴(kuò)展功能配置頁(yè)面12相連接，用于動(dòng)態(tài)創(chuàng)建并修飾導(dǎo)航菜單11以及擴(kuò)展功能配置頁(yè)面12上的各個(gè)頁(yè)面元素。
[0019]所述的安裝包2包含:控制接入模塊21，其與所述的導(dǎo)航菜單11相連接，用于對(duì)擴(kuò)展功能配置頁(yè)面12進(jìn)行接入控制，將該擴(kuò)展功能配置頁(yè)面12的載入接口添加至主頁(yè)面I的導(dǎo)航菜單11中；模型模塊22，其與所述的擴(kuò)展功能配置頁(yè)面12相連接，包含擴(kuò)展功能配置頁(yè)面12中的全部配置項(xiàng)元素，是擴(kuò)展功能配置頁(yè)面12的模型，用于動(dòng)態(tài)創(chuàng)建該擴(kuò)展功能配置頁(yè)面12 ;配置數(shù)據(jù)文件模塊23，其與所述的擴(kuò)展功能配置頁(yè)面12相連接，用于存儲(chǔ)擴(kuò)展功能配置頁(yè)面12上的全部數(shù)據(jù)值，將所述的數(shù)據(jù)值加載至擴(kuò)展功能配置頁(yè)面12上并與家庭網(wǎng)關(guān)設(shè)備進(jìn)行交互，使擴(kuò)展的功能生效，從而實(shí)現(xiàn)擴(kuò)展功能配置頁(yè)面12的無(wú)縫添加。
[0020]所述的控制接入模塊21用于決定擴(kuò)展功能配置頁(yè)面12的載入接口在主頁(yè)面I的導(dǎo)航菜單11中的層級(jí)位置。
[0021]所述的配置數(shù)據(jù)文件模塊23中存儲(chǔ)的擴(kuò)展功能配置頁(yè)面12上的全部數(shù)據(jù)值為JSON (JavaScript Object Notat1n, JavaScript對(duì)象符號(hào))格式,包含家庭網(wǎng)關(guān)設(shè)備的默認(rèn)數(shù)據(jù)值和用戶(hù)設(shè)置的數(shù)據(jù)值。
[0022]所述的庫(kù)文件3包含JavaScript庫(kù)文件31,其分別與所述的導(dǎo)航菜單11以及擴(kuò)展功能配置頁(yè)面12相連接，用于動(dòng)態(tài)創(chuàng)建導(dǎo)航菜單11的載入接口以及擴(kuò)展功能配置頁(yè)面12上的各個(gè)頁(yè)面兀素；CSS (Cascading Style Sheets,層疊樣式表)樣式庫(kù)文件32,其分別與所述的導(dǎo)航菜單11以及擴(kuò)展功能配置頁(yè)面12相連接，用于修飾導(dǎo)航菜單11的載入接口以及擴(kuò)展功能配置頁(yè)面12上的各個(gè)頁(yè)面元素的樣式。
[0023]進(jìn)一步,所述的JavaScript庫(kù)文件31包含:與所述的導(dǎo)航菜單11相連接的接口JavaScript庫(kù)文件，以及與所述的擴(kuò)展功能配置頁(yè)面12相連接的配置頁(yè)面JavaScript庫(kù)文件；所述的接口 JavaScript庫(kù)文件用于動(dòng)態(tài)創(chuàng)建導(dǎo)航菜單11上的載入接口的頁(yè)面元素，而所述的配置頁(yè)面JavaScript庫(kù)文件用于動(dòng)態(tài)創(chuàng)建擴(kuò)展功能配置頁(yè)面12上的頁(yè)面元素。
[0024]所述的CSS樣式庫(kù)文件32則包含:與所述的導(dǎo)航菜單11相連接的接口 CSS樣式庫(kù)文件，以及與所述的擴(kuò)展功能配置頁(yè)面12相連接的配置頁(yè)面CSS樣式庫(kù)文件；所述的接口 CSS樣式庫(kù)文件用于修飾導(dǎo)航菜單11上的載入接口的頁(yè)面元素的樣式，而所述的配置頁(yè)面CSS樣式庫(kù)文件用于修飾擴(kuò)展功能配置頁(yè)面12上的頁(yè)面元素的樣式。
[0025]如圖2所示，本發(fā)明還提供一種利用所述的Web Π框架進(jìn)行家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的方法，包含以下步驟:
51、當(dāng)用戶(hù)需要擴(kuò)展家庭網(wǎng)關(guān)設(shè)備的功能時(shí)，選擇并點(diǎn)擊與該功能相對(duì)應(yīng)的安裝包2，將該安裝包2安裝至家庭網(wǎng)關(guān)設(shè)備中；
52、安裝包2中的控制接入模塊21在主頁(yè)面I的導(dǎo)航菜單11中添加將要?jiǎng)?chuàng)建的擴(kuò)展功能配置頁(yè)面12的載入接口 ；
53、安裝包2中的模型模塊22動(dòng)態(tài)創(chuàng)建該擴(kuò)展功能配置頁(yè)面12；
54、安裝包2中的配置數(shù)據(jù)文件模塊23將其所存儲(chǔ)的擴(kuò)展功能配置頁(yè)面12上的全部數(shù)據(jù)值加載至該擴(kuò)展功能配置頁(yè)面12上，并與家庭網(wǎng)關(guān)設(shè)備進(jìn)行交互，使擴(kuò)展的功能生效。
[0026]如圖3所示，所述的步驟S2具體包含:
521、點(diǎn)擊主頁(yè)面I上的請(qǐng)求安裝按鈕；
522、控制接入模塊21在主頁(yè)面I的導(dǎo)航菜單11中動(dòng)態(tài)創(chuàng)建擴(kuò)展功能配置頁(yè)面12的載入接口，該控制接入模塊21決定所述的載入接口在導(dǎo)航菜單11中的層級(jí)位置；
523、庫(kù)文件3中的JavaScript庫(kù)文件31中的接口JavaScript庫(kù)文件動(dòng)態(tài)創(chuàng)建導(dǎo)航菜單11上的載入接口的頁(yè)面元素；
524、庫(kù)文件3中的CSS樣式庫(kù)文件32中的接口CSS樣式庫(kù)文件修飾導(dǎo)航菜單11上的載入接口的頁(yè)面元素的樣式。
[0027]如圖4所示，所述的步驟S3具體包含:
531、點(diǎn)擊導(dǎo)航菜單11上的載入接口；
532、利用模型模塊22中所包含的擴(kuò)展功能配置頁(yè)面12中的全部配置項(xiàng)元素來(lái)動(dòng)態(tài)創(chuàng)建該擴(kuò)展功能配置頁(yè)面12 ；
533、庫(kù)文件3中的JavaScript庫(kù)文件31中的配置頁(yè)面JavaScript庫(kù)文件動(dòng)態(tài)創(chuàng)建擴(kuò)展功能配置頁(yè)面12上的頁(yè)面元素；
534、庫(kù)文件3中的CSS樣式庫(kù)文件32中的配置頁(yè)面CSS樣式庫(kù)文件修飾擴(kuò)展功能配置頁(yè)面12上的頁(yè)面元素的樣式。
[0028]如圖4所示，所述的步驟S4具體包含:
541、判斷擴(kuò)展功能配置頁(yè)面12是否創(chuàng)建完畢，若是則繼續(xù)執(zhí)行步驟S42，若否則返回步驟S32 ；
542、通過(guò)AJAX (Asynchronous Javascript And XML,異步 JavaScript 和 XML)方式向配置數(shù)據(jù)文件模塊23請(qǐng)求加載數(shù)據(jù)；
543、擴(kuò)展功能配置頁(yè)面12進(jìn)行頁(yè)面解析，配置數(shù)據(jù)文件模塊23將其所存儲(chǔ)的擴(kuò)展功能配置頁(yè)面12上的全部JSON格式的數(shù)據(jù)值加載至該擴(kuò)展功能配置頁(yè)面12上，并與家庭網(wǎng)關(guān)設(shè)備進(jìn)行交互，使擴(kuò)展的功能生效，從而實(shí)現(xiàn)擴(kuò)展功能配置頁(yè)面12的無(wú)縫添加。
[0029]所述的步驟S43中，安裝包2在安裝時(shí)第一次請(qǐng)求配置數(shù)據(jù)文件模塊23加載的數(shù)據(jù)值是家庭網(wǎng)關(guān)設(shè)備的默認(rèn)數(shù)據(jù)值，之后再請(qǐng)求配置數(shù)據(jù)文件模塊23加載的數(shù)據(jù)值是用戶(hù)設(shè)置的數(shù)據(jù)值。
[0030]以上是本發(fā)明利用Web Π框架進(jìn)行家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的整個(gè)流程，但是對(duì)于用戶(hù)而言，其在整個(gè)安裝過(guò)程中只需要完成幾次點(diǎn)擊動(dòng)作即可，非常方便。首先點(diǎn)擊安裝對(duì)應(yīng)功能的安裝包，然后點(diǎn)擊主頁(yè)面，在導(dǎo)航菜單中動(dòng)態(tài)生成對(duì)應(yīng)的擴(kuò)展功能配置頁(yè)面的載入接口，接著點(diǎn)擊導(dǎo)航菜單上的載入接口，動(dòng)態(tài)創(chuàng)建擴(kuò)展功能配置頁(yè)面，并在擴(kuò)展功能配置頁(yè)面創(chuàng)建完成之后自動(dòng)加載數(shù)據(jù)值。
[0031]綜上所述，本發(fā)明所提供的用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的Web UI框架及方法，具有以下有益效果:1、添加家庭網(wǎng)關(guān)設(shè)備的功能時(shí)，用戶(hù)不需要修改任何已有的文件，只需安裝對(duì)應(yīng)的安裝包即可動(dòng)態(tài)創(chuàng)建并添加擴(kuò)展功能配置頁(yè)面，使新的擴(kuò)展功能配置頁(yè)面能夠無(wú)縫嵌入到已有的主頁(yè)面中，具有良好的可擴(kuò)展性。2、將視圖、模型與控制相分離，允許更改視圖層而不用重新編譯模型和控制器代碼，降低了家庭網(wǎng)關(guān)設(shè)備的主頁(yè)面與功能的耦合性，使其不需要通過(guò)升級(jí)軟件的方法來(lái)進(jìn)行功能擴(kuò)展，節(jié)省用戶(hù)的等待時(shí)間，具有良好的用戶(hù)體驗(yàn)。3、本發(fā)明不僅僅局限于應(yīng)用在家庭網(wǎng)關(guān)設(shè)備上，同時(shí)也可適用于各類(lèi)其他網(wǎng)站及網(wǎng)絡(luò)軟件，應(yīng)用范圍廣。
[0032]盡管本發(fā)明的內(nèi)容已經(jīng)通過(guò)上述優(yōu)選實(shí)施例作了詳細(xì)介紹，但應(yīng)當(dāng)認(rèn)識(shí)到上述的描述不應(yīng)被認(rèn)為是對(duì)本發(fā)明的限制。在本領(lǐng)域技術(shù)人員閱讀了上述內(nèi)容后，對(duì)于本發(fā)明的多種修改和替代都將是顯而易見(jiàn)的。因此，本發(fā)明的保護(hù)范圍應(yīng)由所附的權(quán)利要求來(lái)限定。
【權(quán)利要求】
1.一種用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的Web Π框架，其特征在于，包含: 主頁(yè)面(1)，其用于顯示家庭網(wǎng)關(guān)設(shè)備的操作頁(yè)面，該主頁(yè)面(I)包含導(dǎo)航菜單(11)，以及若干擴(kuò)展功能配置頁(yè)面(12)； 若干安裝包(2)，其分別與所述的主頁(yè)面(I)相連接，且與所述的擴(kuò)展功能配置頁(yè)面(12) —一對(duì)應(yīng)，用于動(dòng)態(tài)創(chuàng)建對(duì)應(yīng)的擴(kuò)展功能配置頁(yè)面(12)； 庫(kù)文件(3)，其分別與所述的導(dǎo)航菜單(11)以及擴(kuò)展功能配置頁(yè)面(12)相連接，用于動(dòng)態(tài)創(chuàng)建并修飾導(dǎo)航菜單(11)以及擴(kuò)展功能配置頁(yè)面(12)上的各個(gè)頁(yè)面元素。
2.如權(quán)利要求1所述的用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的WebΠ框架，其特征在于，所述的安裝包(2)包含: 控制接入模塊(21 )，其與所述的導(dǎo)航菜單(II)相連接，將擴(kuò)展功能配置頁(yè)面(12)的載入接口添加至主頁(yè)面(I)的導(dǎo)航菜單(11)中； 模型模塊(22)，其與所述的擴(kuò)展功能配置頁(yè)面(12)相連接，包含擴(kuò)展功能配置頁(yè)面(12)中的全部配置項(xiàng)元素，用于動(dòng)態(tài)創(chuàng)建該擴(kuò)展功能配置頁(yè)面(12)； 配置數(shù)據(jù)文件模塊(23)，其與所述的擴(kuò)展功能配置頁(yè)面(12)相連接，用于存儲(chǔ)擴(kuò)展功能配置頁(yè)面(12)上的全部數(shù)據(jù)值，將所述的數(shù)據(jù)值加載至擴(kuò)展功能配置頁(yè)面(12)上并與家庭網(wǎng)關(guān)設(shè)備進(jìn)行交互，使擴(kuò)展的功能生效。
3.如權(quán)利要求2所述的用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的WebΠ框架，其特征在于，所述的控制接入模塊(21)用于決定擴(kuò)展功能配置頁(yè)面(12)的載入接口在主頁(yè)面(I)的導(dǎo)航菜單(11)中的層級(jí)位置。
4.如權(quán)利要求2所述的用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的WebΠ框架，其特征在于，所述的配置數(shù)據(jù)文件模塊(23)中存儲(chǔ)的擴(kuò)展功能配置頁(yè)面(12)上的全部數(shù)據(jù)值包含家庭網(wǎng)關(guān)設(shè)備的默認(rèn)數(shù)據(jù)值和用戶(hù)設(shè)置的數(shù)據(jù)值。
5.如權(quán)利要求1所述的用于家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的WebΠ框架，其特征在于，所述的庫(kù)文件(3)包含: JavaScript庫(kù)文件(31),其包含與所述的導(dǎo)航菜單(11)相連接的接口 JavaScript庫(kù)文件以及與所述的擴(kuò)展功能配置頁(yè)面(12)相連接的配置頁(yè)面JavaScript庫(kù)文件；該接口 JavaScript庫(kù)文件用于動(dòng)態(tài)創(chuàng)建導(dǎo)航菜單(11)上的載入接口的頁(yè)面元素，該配置頁(yè)面JavaScript庫(kù)文件用于動(dòng)態(tài)創(chuàng)建擴(kuò)展功能配置頁(yè)面(12)上的頁(yè)面元素； CSS樣式庫(kù)文件(32 )，其包含與所述的導(dǎo)航菜單(11)相連接的接口 CSS樣式庫(kù)文件以及與所述的擴(kuò)展功能配置頁(yè)面(12)相連接的配置頁(yè)面CSS樣式庫(kù)文件；該接口 CSS樣式庫(kù)文件用于修飾導(dǎo)航菜單(11)上的載入接口的頁(yè)面元素的樣式，該配置頁(yè)面CSS樣式庫(kù)文件用于修飾擴(kuò)展功能配置頁(yè)面(12)上的頁(yè)面元素的樣式。
6.—種利用如權(quán)利要求1-5中任一項(xiàng)所述的Web UI框架進(jìn)行家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的方法，其特征在于，該方法包含如下步驟: 51、當(dāng)用戶(hù)需要擴(kuò)展家庭網(wǎng)關(guān)設(shè)備的功能時(shí)，選擇并點(diǎn)擊與該功能相對(duì)應(yīng)的安裝包(2)，將該安裝包(2)安裝至家庭網(wǎng)關(guān)設(shè)備中； 52、安裝包(2)中的控制接入模塊(21)在主頁(yè)面(I)的導(dǎo)航菜單(11)中添加將要?jiǎng)?chuàng)建的擴(kuò)展功能配置頁(yè)面(12)的載入接口 ； 53、安裝包(2)中的模型模塊(22)動(dòng)態(tài)創(chuàng)建該擴(kuò)展功能配置頁(yè)面(12)； S4、安裝包(2)中的配置數(shù)據(jù)文件模塊(23)將其所存儲(chǔ)的擴(kuò)展功能配置頁(yè)面(12)上的全部數(shù)據(jù)值加載至該擴(kuò)展功能配置頁(yè)面(12)上，并與家庭網(wǎng)關(guān)設(shè)備進(jìn)行交互，使擴(kuò)展的功能生效。
7.如權(quán)利要求6所述的利用WebΠ框架進(jìn)行家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的方法，其特征在于，所述的步驟S2具體包含: 521、點(diǎn)擊主頁(yè)面(I)； 522、控制接入模塊(21)在主頁(yè)面(I)的導(dǎo)航菜單(11)中動(dòng)態(tài)創(chuàng)建擴(kuò)展功能配置頁(yè)面(12)的載入接口，該控制接入模塊(21)決定所述的載入接口在導(dǎo)航菜單(11)中的層級(jí)位置； 523、庫(kù)文件(3)中的JavaScript庫(kù)文件(31)中的接口JavaScript庫(kù)文件動(dòng)態(tài)創(chuàng)建導(dǎo)航菜單(11)上的載入接口的頁(yè)面元素； 524、庫(kù)文件(3)中的CSS樣式庫(kù)文件(32 )中的接口 CSS樣式庫(kù)文件修飾導(dǎo)航菜單(11)上的載入接口的頁(yè)面元素的樣式。
8.如權(quán)利要求6所述的利用WebΠ框架進(jìn)行家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的方法，其特征在于，所述的步驟S3具體包含: 531、點(diǎn)擊導(dǎo)航菜單(11)上的載入接口； 532、利用模型模塊(22)中所包含的擴(kuò)展功能配置頁(yè)面(12)中的全部配置項(xiàng)元素來(lái)動(dòng)態(tài)創(chuàng)建該擴(kuò)展功能配置頁(yè)面(12)； 533、庫(kù)文件(3)中的JavaScript庫(kù)文件(31)中的配置頁(yè)面JavaScript庫(kù)文件動(dòng)態(tài)創(chuàng)建擴(kuò)展功能配置頁(yè)面(12)上的頁(yè)面元素； 534、庫(kù)文件(3)中的CSS樣式庫(kù)文件(32)中的配置頁(yè)面CSS樣式庫(kù)文件修飾擴(kuò)展功能配置頁(yè)面(12)上的頁(yè)面元素的樣式。
9.如權(quán)利要求6所述的利用WebΠ框架進(jìn)行家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的方法，其特征在于，所述的步驟S4具體包含: 541、判斷擴(kuò)展功能配置頁(yè)面(12)是否創(chuàng)建完畢，若是則繼續(xù)執(zhí)行步驟S42，若否則返回步驟S32 ； 542、通過(guò)AJAX方式向配置數(shù)據(jù)文件模塊(23)請(qǐng)求加載數(shù)據(jù)； 543、擴(kuò)展功能配置頁(yè)面(12)進(jìn)行頁(yè)面解析，配置數(shù)據(jù)文件模塊(23)將其所存儲(chǔ)的擴(kuò)展功能配置頁(yè)面(12)上的全部數(shù)據(jù)值加載至該擴(kuò)展功能配置頁(yè)面(12)上，并與家庭網(wǎng)關(guān)設(shè)備進(jìn)行交互，使擴(kuò)展的功能生效。
10.如權(quán)利要求9所述的利用WebΠ框架進(jìn)行家庭網(wǎng)關(guān)設(shè)備功能擴(kuò)展的方法，其特征在于，所述的步驟S43中，安裝包(2 )在安裝時(shí)第一次請(qǐng)求配置數(shù)據(jù)文件模塊(23 )加載的數(shù)據(jù)值是家庭網(wǎng)關(guān)設(shè)備的默認(rèn)數(shù)據(jù)值，之后再請(qǐng)求配置數(shù)據(jù)文件模塊(23)加載的數(shù)據(jù)值是用戶(hù)設(shè)置的數(shù)據(jù)值。
【文檔編號(hào)】H04L29/08GK104331303SQ201410516720
【公開(kāi)日】2015年2月4日 申請(qǐng)日期:2014年9月30日 優(yōu)先權(quán)日:2014年9月30日
【發(fā)明者】靳美麗 申請(qǐng)人:上海斐訊數(shù)據(jù)通信技術(shù)有限公司