一種用于家庭網關設備功能擴展的Web UI框架及方法
【專利摘要】本發明公開了一種用于家庭網關設備功能擴展的Web UI框架，包含：主頁面，其包含導航菜單以及若干擴展功能配置頁面；若干安裝包，與擴展功能配置頁面一一對應，用于動態創建對應的擴展功能配置頁面，將該擴展功能配置頁面的載入接口添加至主頁面的導航菜單中，使其顯示在主頁面上；庫文件，用于動態創建并修飾導航菜單以及擴展功能配置頁面上的各個頁面元素。本發明還提供一種利用所述的WebUI框架進行家庭網關設備功能擴展的方法。本發明只需點擊安裝對應的安裝包即可使新的擴展功能配置頁面無縫嵌入到已有的主頁面中，具有良好的可擴展性，使家庭網關設備不需通過升級軟件來進行功能擴展，節省用戶等待時間，具有良好的用戶體驗。
【專利說明】—種用于家庭網關設備功能擴展的Web Ul框架及方法
【技術領域】
[0001]本發明涉及一種Web UI (網絡產品界面，Website User Interface)框架及利用該Web Π框架進行功能擴展的方法，具體是指一種基于MVC (模型-視圖-控制器，Model-View-Controller)的用于家庭網關設備功能擴展的Web UI框架及方法。
【背景技術】
[0002]現有的家庭網關設備的Web UI頁面結構通常將數據、模型與視圖綁定，也就是該家庭網關設備的功能是與頁面綁定的，當家庭網關設備需要增加一個新功能時，就需要增加對應的頁面，并且這種方式往往是要通過升級軟件的方法才能實現將新的頁面無縫添加至主頁面中，同時使得相應的配置生效。
[0003]隨著智能家庭網絡發展的越來越成熟，其受到越來越多的關注，因此家庭網關設備已經不再僅僅局限于傳統的功能，越來越多的日益豐富起來的新功能將被添加至家庭網關設備中。如若繼續使用當前Web Π的設計方法，會帶來兩個問題:首先，隨著功能的增力口，需要增加的頁面也越來越多；其次，每次添加功能幾乎都要通過系統升級的方試來擴展對應的頁面。顯然這樣比較浪費資源，并且對于用戶而言，如果添加相應功能都需要通過軟件升級的方式來擴展配置對應的頁面，所需軟件升級的等待時間就會越來越長，導致家庭網關設備的可擴展性不好，用戶體驗較差。
【發明內容】
[0004]本發明的目的在于提供一種用于家庭網關設備功能擴展的Web Π框架及方法，只需點擊安裝對應的安裝包即可使新的擴展功能配置頁面無縫嵌入到已有的主頁面中，具有良好的可擴展性，使家庭網關設備不需要通過升級軟件的方法來進行功能擴展，節省用戶的等待時間，具有良好的用戶體驗。
[0005]為了達到上述目的，本發明提供一種用于家庭網關設備功能擴展的Web UI框架，包含:
主頁面，其用于顯示家庭網關設備的操作頁面，該主頁面包含導航菜單，以及若干擴展功能配置頁面；
若干安裝包，其分別與所述的主頁面相連接，且與所述的擴展功能配置頁面一一對應；
庫文件，其分別與所述的導航菜單以及擴展功能配置頁面相連接，用于動態創建并修飾導航菜單以及擴展功能配置頁面上的各個頁面元素。
[0006]所述的安裝包包含:控制接入模塊，其與所述的導航菜單相連接，將擴展功能配置頁面的載入接口添加至主頁面的導航菜單中；模型模塊，其與所述的擴展功能配置頁面相連接，包含擴展功能配置頁面中的全部配置項元素，用于動態創建該擴展功能配置頁面；配置數據文件模塊，其與所述的擴展功能配置頁面相連接，用于存儲擴展功能配置頁面上的全部數據值，將所述的數據值加載至擴展功能配置頁面上并與家庭網關設備進行交互，使擴展的功能生效。
[0007]所述的控制接入模塊用于決定擴展功能配置頁面的載入接口在主頁面的導航菜單中的層級位置。
[0008]所述的配置數據文件模塊中存儲的擴展功能配置頁面上的全部數據值包含家庭網關設備的默認數據值和用戶設置的數據值。
[0009]所述的庫文件包含JavaScript庫文件,其包含與所述的導航菜單相連接的接口JavaScript庫文件以及與所述的擴展功能配置頁面相連接的配置頁面JavaScript庫文件；該接口 JavaScript庫文件用于動態創建導航菜單上的載入接口的頁面元素,該配置頁面JavaScript庫文件用于動態創建擴展功能配置頁面上的頁面元素；CSS樣式庫文件，其包含與所述的導航菜單相連接的接口 CSS樣式庫文件以及與所述的擴展功能配置頁面相連接的配置頁面CSS樣式庫文件；該接口 CSS樣式庫文件用于修飾導航菜單上的載入接口的頁面元素的樣式，該配置頁面CSS樣式庫文件用于修飾擴展功能配置頁面上的頁面元素的樣式。
[0010]本發明還提供一種利用所述的Web Π框架進行家庭網關設備功能擴展的方法，包含以下步驟:
51、當用戶需要擴展家庭網關設備的功能時，選擇并點擊與該功能相對應的安裝包，將該安裝包安裝至家庭網關設備中；
52、安裝包中的控制接入模塊在主頁面的導航菜單中添加將要創建的擴展功能配置頁面的載入接口；
53、安裝包中的模型模塊動態創建該擴展功能配置頁面；
54、安裝包中的配置數據文件模塊將其所存儲的擴展功能配置頁面上的全部數據值加載至該擴展功能配置頁面上，并與家庭網關設備進行交互，使擴展的功能生效。
[0011]所述的步驟S2具體包含:
521、點擊主頁面；
522、控制接入模塊在主頁面的導航菜單中動態創建擴展功能配置頁面的載入接口，該控制接入模塊決定所述的載入接口在導航菜單中的層級位置；
523、庫文件中的JavaScript庫文件中的接口JavaScript庫文件動態創建導航菜單上的載入接口的頁面元素；
524、庫文件中的CSS樣式庫文件中的接口CSS樣式庫文件修飾導航菜單上的載入接口的頁面元素的樣式。
[0012]所述的步驟S3具體包含:
531、點擊導航菜單上的載入接口；
532、利用模型模塊中所包含的擴展功能配置頁面中的全部配置項元素來動態創建該擴展功能配置頁面；
533、庫文件中的JavaScript庫文件中的配置頁面JavaScript庫文件動態創建擴展功能配置頁面上的頁面元素；
534、庫文件中的CSS樣式庫文件中的配置頁面CSS樣式庫文件修飾擴展功能配置頁面上的頁面元素的樣式。
[0013]所述的步驟S4具體包含: 541、判斷擴展功能配置頁面是否創建完畢，若是則繼續執行步驟S42，若否則返回步驟
S32 ；
542、通過AJAX方式向配置數據文件模塊請求加載數據；
543、擴展功能配置頁面進行頁面解析，配置數據文件模塊將其所存儲的擴展功能配置頁面上的全部數據值加載至該擴展功能配置頁面上，并與家庭網關設備進行交互，使擴展的功能生效。
[0014]所述的步驟S43中，安裝包在安裝時第一次請求配置數據文件模塊加載的數據值是家庭網關設備的默認數據值，之后再請求配置數據文件模塊加載的數據值是用戶設置的數據值。
[0015]綜上所述，本發明所提供的用于家庭網關設備功能擴展的Web UI框架及方法，具有以下有益效果:1、添加家庭網關設備的功能時，用戶不需要修改任何已有的文件，只需安裝對應的安裝包即可動態創建并添加擴展功能配置頁面，使新的擴展功能配置頁面能夠無縫嵌入到已有的主頁面中，具有良好的可擴展性。2、將視圖、模型與控制相分離，允許更改視圖層而不用重新編譯模型和控制器代碼，降低了家庭網關設備的主頁面與功能的耦合性，使其不需要通過升級軟件的方法來進行功能擴展，節省用戶的等待時間，具有良好的用戶體驗。3、本發明不僅僅局限于應用在家庭網關設備上，同時也可適用于各類其他網站及網絡軟件，應用范圍廣。
【專利附圖】
【附圖說明】
[0016]圖1為本發明提供的用于家庭網關設備功能擴展的Web UI框架的結構示意圖； 圖2為本發明提供的利用Web UI框架進行家庭網關設備功能擴展的方法流程圖；
圖3為本發明中的創建擴展功能配置頁面的載入接口的方法流程圖；
圖4為本發明中的創建擴展功能配置頁面以及加載數據值至該擴展功能配置頁面的方法流程圖。
【具體實施方式】
[0017]以下結合圖1?圖4，通過詳細說明一個較佳的具體實施例，對本發明做進一步闡述。
[0018]如圖1所示，為本發明所提供的用于家庭網關設備功能擴展的Web Π框架，包含:主頁面1，其用于顯示家庭網關設備的操作頁面，該主頁面I包含導航菜單11，以及若干擴展功能配置頁面12 ;若干安裝包2，其分別與所述的主頁面I相連接，且與所述的擴展功能配置頁面12--對應，用于動態創建對應的擴展功能配置頁面12，將該擴展功能配置頁面
12的載入接口添加至主頁面I的導航菜單11中，使得該擴展功能配置頁面12顯示在主頁面I上，以擴展家庭網關設備的相應功能；庫文件3，其分別與所述的導航菜單11以及擴展功能配置頁面12相連接，用于動態創建并修飾導航菜單11以及擴展功能配置頁面12上的各個頁面元素。
[0019]所述的安裝包2包含:控制接入模塊21，其與所述的導航菜單11相連接，用于對擴展功能配置頁面12進行接入控制，將該擴展功能配置頁面12的載入接口添加至主頁面I的導航菜單11中；模型模塊22，其與所述的擴展功能配置頁面12相連接，包含擴展功能配置頁面12中的全部配置項元素，是擴展功能配置頁面12的模型，用于動態創建該擴展功能配置頁面12 ;配置數據文件模塊23，其與所述的擴展功能配置頁面12相連接，用于存儲擴展功能配置頁面12上的全部數據值，將所述的數據值加載至擴展功能配置頁面12上并與家庭網關設備進行交互，使擴展的功能生效，從而實現擴展功能配置頁面12的無縫添加。
[0020]所述的控制接入模塊21用于決定擴展功能配置頁面12的載入接口在主頁面I的導航菜單11中的層級位置。
[0021]所述的配置數據文件模塊23中存儲的擴展功能配置頁面12上的全部數據值為JSON (JavaScript Object Notat1n, JavaScript對象符號)格式,包含家庭網關設備的默認數據值和用戶設置的數據值。
[0022]所述的庫文件3包含JavaScript庫文件31,其分別與所述的導航菜單11以及擴展功能配置頁面12相連接，用于動態創建導航菜單11的載入接口以及擴展功能配置頁面12上的各個頁面兀素；CSS (Cascading Style Sheets,層疊樣式表)樣式庫文件32,其分別與所述的導航菜單11以及擴展功能配置頁面12相連接，用于修飾導航菜單11的載入接口以及擴展功能配置頁面12上的各個頁面元素的樣式。
[0023]進一步,所述的JavaScript庫文件31包含:與所述的導航菜單11相連接的接口JavaScript庫文件，以及與所述的擴展功能配置頁面12相連接的配置頁面JavaScript庫文件；所述的接口 JavaScript庫文件用于動態創建導航菜單11上的載入接口的頁面元素，而所述的配置頁面JavaScript庫文件用于動態創建擴展功能配置頁面12上的頁面元素。
[0024]所述的CSS樣式庫文件32則包含:與所述的導航菜單11相連接的接口 CSS樣式庫文件，以及與所述的擴展功能配置頁面12相連接的配置頁面CSS樣式庫文件；所述的接口 CSS樣式庫文件用于修飾導航菜單11上的載入接口的頁面元素的樣式，而所述的配置頁面CSS樣式庫文件用于修飾擴展功能配置頁面12上的頁面元素的樣式。
[0025]如圖2所示，本發明還提供一種利用所述的Web Π框架進行家庭網關設備功能擴展的方法，包含以下步驟:
51、當用戶需要擴展家庭網關設備的功能時，選擇并點擊與該功能相對應的安裝包2，將該安裝包2安裝至家庭網關設備中；
52、安裝包2中的控制接入模塊21在主頁面I的導航菜單11中添加將要創建的擴展功能配置頁面12的載入接口 ；
53、安裝包2中的模型模塊22動態創建該擴展功能配置頁面12；
54、安裝包2中的配置數據文件模塊23將其所存儲的擴展功能配置頁面12上的全部數據值加載至該擴展功能配置頁面12上，并與家庭網關設備進行交互，使擴展的功能生效。
[0026]如圖3所示，所述的步驟S2具體包含:
521、點擊主頁面I上的請求安裝按鈕；
522、控制接入模塊21在主頁面I的導航菜單11中動態創建擴展功能配置頁面12的載入接口，該控制接入模塊21決定所述的載入接口在導航菜單11中的層級位置；
523、庫文件3中的JavaScript庫文件31中的接口JavaScript庫文件動態創建導航菜單11上的載入接口的頁面元素；
524、庫文件3中的CSS樣式庫文件32中的接口CSS樣式庫文件修飾導航菜單11上的載入接口的頁面元素的樣式。
[0027]如圖4所示，所述的步驟S3具體包含:
531、點擊導航菜單11上的載入接口；
532、利用模型模塊22中所包含的擴展功能配置頁面12中的全部配置項元素來動態創建該擴展功能配置頁面12 ；
533、庫文件3中的JavaScript庫文件31中的配置頁面JavaScript庫文件動態創建擴展功能配置頁面12上的頁面元素；
534、庫文件3中的CSS樣式庫文件32中的配置頁面CSS樣式庫文件修飾擴展功能配置頁面12上的頁面元素的樣式。
[0028]如圖4所示，所述的步驟S4具體包含:
541、判斷擴展功能配置頁面12是否創建完畢，若是則繼續執行步驟S42，若否則返回步驟S32 ；
542、通過AJAX (Asynchronous Javascript And XML,異步 JavaScript 和 XML)方式向配置數據文件模塊23請求加載數據；
543、擴展功能配置頁面12進行頁面解析，配置數據文件模塊23將其所存儲的擴展功能配置頁面12上的全部JSON格式的數據值加載至該擴展功能配置頁面12上，并與家庭網關設備進行交互，使擴展的功能生效，從而實現擴展功能配置頁面12的無縫添加。
[0029]所述的步驟S43中，安裝包2在安裝時第一次請求配置數據文件模塊23加載的數據值是家庭網關設備的默認數據值，之后再請求配置數據文件模塊23加載的數據值是用戶設置的數據值。
[0030]以上是本發明利用Web Π框架進行家庭網關設備功能擴展的整個流程，但是對于用戶而言，其在整個安裝過程中只需要完成幾次點擊動作即可，非常方便。首先點擊安裝對應功能的安裝包，然后點擊主頁面，在導航菜單中動態生成對應的擴展功能配置頁面的載入接口，接著點擊導航菜單上的載入接口，動態創建擴展功能配置頁面，并在擴展功能配置頁面創建完成之后自動加載數據值。
[0031]綜上所述，本發明所提供的用于家庭網關設備功能擴展的Web UI框架及方法，具有以下有益效果:1、添加家庭網關設備的功能時，用戶不需要修改任何已有的文件，只需安裝對應的安裝包即可動態創建并添加擴展功能配置頁面，使新的擴展功能配置頁面能夠無縫嵌入到已有的主頁面中，具有良好的可擴展性。2、將視圖、模型與控制相分離，允許更改視圖層而不用重新編譯模型和控制器代碼，降低了家庭網關設備的主頁面與功能的耦合性，使其不需要通過升級軟件的方法來進行功能擴展，節省用戶的等待時間，具有良好的用戶體驗。3、本發明不僅僅局限于應用在家庭網關設備上，同時也可適用于各類其他網站及網絡軟件，應用范圍廣。
[0032]盡管本發明的內容已經通過上述優選實施例作了詳細介紹，但應當認識到上述的描述不應被認為是對本發明的限制。在本領域技術人員閱讀了上述內容后，對于本發明的多種修改和替代都將是顯而易見的。因此，本發明的保護范圍應由所附的權利要求來限定。
【權利要求】
1.一種用于家庭網關設備功能擴展的Web Π框架，其特征在于，包含: 主頁面(1)，其用于顯示家庭網關設備的操作頁面，該主頁面(I)包含導航菜單(11)，以及若干擴展功能配置頁面(12)； 若干安裝包(2)，其分別與所述的主頁面(I)相連接，且與所述的擴展功能配置頁面(12) —一對應，用于動態創建對應的擴展功能配置頁面(12)； 庫文件(3)，其分別與所述的導航菜單(11)以及擴展功能配置頁面(12)相連接，用于動態創建并修飾導航菜單(11)以及擴展功能配置頁面(12)上的各個頁面元素。
2.如權利要求1所述的用于家庭網關設備功能擴展的WebΠ框架，其特征在于，所述的安裝包(2)包含: 控制接入模塊(21 )，其與所述的導航菜單(II)相連接，將擴展功能配置頁面(12)的載入接口添加至主頁面(I)的導航菜單(11)中； 模型模塊(22)，其與所述的擴展功能配置頁面(12)相連接，包含擴展功能配置頁面(12)中的全部配置項元素，用于動態創建該擴展功能配置頁面(12)； 配置數據文件模塊(23)，其與所述的擴展功能配置頁面(12)相連接，用于存儲擴展功能配置頁面(12)上的全部數據值，將所述的數據值加載至擴展功能配置頁面(12)上并與家庭網關設備進行交互，使擴展的功能生效。
3.如權利要求2所述的用于家庭網關設備功能擴展的WebΠ框架，其特征在于，所述的控制接入模塊(21)用于決定擴展功能配置頁面(12)的載入接口在主頁面(I)的導航菜單(11)中的層級位置。
4.如權利要求2所述的用于家庭網關設備功能擴展的WebΠ框架，其特征在于，所述的配置數據文件模塊(23)中存儲的擴展功能配置頁面(12)上的全部數據值包含家庭網關設備的默認數據值和用戶設置的數據值。
5.如權利要求1所述的用于家庭網關設備功能擴展的WebΠ框架，其特征在于，所述的庫文件(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框架進行家庭網關設備功能擴展的方法，其特征在于，該方法包含如下步驟: 51、當用戶需要擴展家庭網關設備的功能時，選擇并點擊與該功能相對應的安裝包(2)，將該安裝包(2)安裝至家庭網關設備中； 52、安裝包(2)中的控制接入模塊(21)在主頁面(I)的導航菜單(11)中添加將要創建的擴展功能配置頁面(12)的載入接口 ； 53、安裝包(2)中的模型模塊(22)動態創建該擴展功能配置頁面(12)； S4、安裝包(2)中的配置數據文件模塊(23)將其所存儲的擴展功能配置頁面(12)上的全部數據值加載至該擴展功能配置頁面(12)上，并與家庭網關設備進行交互，使擴展的功能生效。
7.如權利要求6所述的利用WebΠ框架進行家庭網關設備功能擴展的方法，其特征在于，所述的步驟S2具體包含: 521、點擊主頁面(I)； 522、控制接入模塊(21)在主頁面(I)的導航菜單(11)中動態創建擴展功能配置頁面(12)的載入接口，該控制接入模塊(21)決定所述的載入接口在導航菜單(11)中的層級位置； 523、庫文件(3)中的JavaScript庫文件(31)中的接口JavaScript庫文件動態創建導航菜單(11)上的載入接口的頁面元素； 524、庫文件(3)中的CSS樣式庫文件(32 )中的接口 CSS樣式庫文件修飾導航菜單(11)上的載入接口的頁面元素的樣式。
8.如權利要求6所述的利用WebΠ框架進行家庭網關設備功能擴展的方法，其特征在于，所述的步驟S3具體包含: 531、點擊導航菜單(11)上的載入接口； 532、利用模型模塊(22)中所包含的擴展功能配置頁面(12)中的全部配置項元素來動態創建該擴展功能配置頁面(12)； 533、庫文件(3)中的JavaScript庫文件(31)中的配置頁面JavaScript庫文件動態創建擴展功能配置頁面(12)上的頁面元素； 534、庫文件(3)中的CSS樣式庫文件(32)中的配置頁面CSS樣式庫文件修飾擴展功能配置頁面(12)上的頁面元素的樣式。
9.如權利要求6所述的利用WebΠ框架進行家庭網關設備功能擴展的方法，其特征在于，所述的步驟S4具體包含: 541、判斷擴展功能配置頁面(12)是否創建完畢，若是則繼續執行步驟S42，若否則返回步驟S32 ； 542、通過AJAX方式向配置數據文件模塊(23)請求加載數據； 543、擴展功能配置頁面(12)進行頁面解析，配置數據文件模塊(23)將其所存儲的擴展功能配置頁面(12)上的全部數據值加載至該擴展功能配置頁面(12)上，并與家庭網關設備進行交互，使擴展的功能生效。
10.如權利要求9所述的利用WebΠ框架進行家庭網關設備功能擴展的方法，其特征在于，所述的步驟S43中，安裝包(2 )在安裝時第一次請求配置數據文件模塊(23 )加載的數據值是家庭網關設備的默認數據值，之后再請求配置數據文件模塊(23)加載的數據值是用戶設置的數據值。
【文檔編號】H04L29/08GK104331303SQ201410516720
【公開日】2015年2月4日 申請日期:2014年9月30日 優先權日:2014年9月30日
【發明者】靳美麗 申請人:上海斐訊數據通信技術有限公司