基于玻璃板技術(shù)實現(xiàn)遺留Web UI端的快速移植的方法
【技術(shù)領域】
[0001]本發(fā)明涉及一種基于玻璃板技術(shù)實現(xiàn)遺留Web UI端的快速移植的方法。
【背景技術(shù)】
[0002]最新的Web UI軟件架構(gòu)方法是將WEB UI的結(jié)構(gòu)，風格，動態(tài)代碼放在三種類型的文件之中。結(jié)構(gòu)放在html文件之中，風格放在css文件中，代碼放在javascript文件之中。這樣的軟件在后期維護時修改非常方便。所有的UI元素都集中放在html文件之中，如果是UI結(jié)構(gòu)的問題，比如需要增加一個div，那只需要關注html文件就可以了 ；如果是顯示效果，比如顏色、透明、高亮，只需要關注css文件就可以了 ；如果是邏輯問題，只需要看javascript文件就可以了。
[0003]但是老的Web Π軟件或者是那些設計拙劣的代碼沒用使用這種方法。它們是將javascript代碼嵌在了 html之中，在javascript代碼中又反過來嵌入了許多html代碼。最終的結(jié)果是代碼非常混亂，Π元素散落到了 javascript代碼之中。如果你只想簡單地修改下布局，也必須首先讀懂javascript，無法像前面所說只是簡單修改html元素就可以了。
[0004]老的Web Π軟件結(jié)構(gòu)使得我們無法只將注意力放在一個方面，對維護帶來了很多時間上的浪費。
[0005]有一種需求是要將一種網(wǎng)關上Web Π軟件移植到另一種網(wǎng)關之上，其中兩種網(wǎng)關功能類似，頁面布局類似，但是在Π外觀上完全不同。并且原始的軟件采用的是老的架構(gòu)方式，非?；靵y。傳統(tǒng)的移植方法如最初所說，是Π和代碼緊耦合，姑且稱為UI代碼緊耦合方法。因為UI元素散落在javascript代碼之中，所以它的過程包括:
1.讀懂整個軟件的javascript代碼邏輯。
[0006]2.修改javascript代碼，同時調(diào)試避免新代碼產(chǎn)生問題。
[0007]這種緊耦合方法會花很長時間，至少I個月。因為軟件的架構(gòu)通常比較復雜，尤其當程序員面對的又是拙劣的代碼時，熱情很容易就被打擊。

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

[0008]本發(fā)明的目的在于克服現(xiàn)有技術(shù)的不足，提供一種極大縮短開發(fā)時間、提高開發(fā)效率、將新π界面從老軟件完全分離出來的基于玻璃板技術(shù)實現(xiàn)遺留Web UI端的快速移植的方法。
[0009]本發(fā)明的目的是通過以下技術(shù)方案來實現(xiàn)的:基于玻璃板技術(shù)實現(xiàn)遺留Web UI端的快速移植的方法，它包括以下步驟:
51:使用absolute布局方式創(chuàng)建上下兩個層，其中底層是新的UI層，頂層是老的UI
層；
52:將頂層的背景圖片和背景顏色全部刪除，只保留文字，呈現(xiàn)玻璃的透明效果，使得底層的圖案顯現(xiàn)出來； 53:利用firebug的動態(tài)調(diào)試特性，快速獲取頂層元素的修正參數(shù)，將頂層的文字與底層的區(qū)域?qū)R；
54:當頂層發(fā)生事件，因html事件冒泡的特性，所有事件均會傳遞到底層的body Π元素之中。
[0010]所述的元素的修正參數(shù)包括寬度width、高度height、外邊距屬性margin和內(nèi)邊距屬性padding。
[0011]所述的步驟S3包括以下子步驟:
531:利用firebug的動態(tài)調(diào)試特性，快速獲取頂層元素的修正參數(shù)；
532:記錄修正參數(shù)，同時畫下來整個html的樹形結(jié)構(gòu)，將改變標注在對應的地方；
533:按照記錄的參數(shù)，對頂層進行修改，使得頂層的文字與底層的區(qū)域?qū)R。
[0012]本發(fā)明的有益效果是:(I)通過玻璃板技術(shù)，將新Π界面從老軟件中完全分離出來，或者這樣說，可以將新的Π界面交給完全不知道老軟件的美工人員單獨開發(fā)。(2)通過html事件冒泡的特性即步驟S4，將新Π界面上動態(tài)效果的處理代碼從老軟件中完全分離出來。(3)本發(fā)明拋開了老軟件的代碼邏輯，無需掌握老軟件的軟件框架和它的復雜混亂的邏輯，極大的縮減了開發(fā)時間，提高了開發(fā)效率，如果使用傳統(tǒng)方法至少需要一個月，而使用本發(fā)明，4天時間就可以了。(4)新的UI及它對應的代碼模塊化，放在了獨立的文件中，極大方便了后期維護。
【附圖說明】
[0013]圖1為本發(fā)明結(jié)構(gòu)方框圖；
圖2為兩個UI層示意圖。
【具體實施方式】
[0014]下面結(jié)合附圖進一步詳細描述本發(fā)明的技術(shù)方案:如圖1所示，基于玻璃板技術(shù)實現(xiàn)遺留Web UI端的快速移植的方法，它包括以下步驟:
51:如圖2所示，使用absolute布局方式創(chuàng)建上下兩個層，其中底層New UI base是新的UI層，頂層glass panel是老的UI層；由于頂層是一個單獨的div，所以可以完全拋開老軟件的UI和代碼邏輯繪制；
52:將頂層的背景圖片和背景顏色全部刪除，只保留文字，呈現(xiàn)玻璃的透明效果，使得底層的圖案顯現(xiàn)出來；這樣設置以后，便將新的UI界面放到底層所在div中，與老軟件的代碼和邏輯完全分離出來。
[0015]S3:利用firebug的動態(tài)調(diào)試特性，快速獲取頂層元素的修正參數(shù)，將頂層的文字與底層的區(qū)域?qū)R；
S4:當頂層發(fā)生事件，因html事件冒泡的特性，所有事件均會傳遞到底層的body Π元素之中。這樣可以在底層里獨立捕獲所有老Web Π事件，并對底層新外觀做相應改變，比如設置高亮效果，展開子級菜單。通過這種方法，可以將新Π界面的動態(tài)效果完全從老軟件中分離出來。
[0016]所述的元素的修正參數(shù)包括寬度width、高度height、外邊距屬性margin和內(nèi)邊距屬性padding。
[0017]所述的步驟S3包括以下子步驟:
531:利用firebug的動態(tài)調(diào)試特性，快速獲取頂層元素的修正參數(shù)；
532:拿出一鉛筆和一張空白的大紙，將修正參數(shù)記錄下來。要將整個html的樹形結(jié)構(gòu)也同時畫下來，將改變標注在對應的地方，方便以后在老的web Ui軟件中定位代碼；
533:按照記錄在大紙上的參數(shù)，對頂層進行修改，使得頂層的文字與底層的區(qū)域?qū)R。
【主權(quán)項】
1.基于玻璃板技術(shù)實現(xiàn)遺留WebΠ端的快速移植的方法，其特征在于:它包括以下步驟: 51:使用absolute布局方式創(chuàng)建上下兩個層，其中底層是新的UI層，頂層是老的UI層； 52:將頂層的背景圖片和背景顏色全部刪除，只保留文字，呈現(xiàn)玻璃的透明效果，使得底層的圖案顯現(xiàn)出來； 53:利用firebug的動態(tài)調(diào)試特性，快速獲取頂層元素的修正參數(shù)，將頂層的文字與底層的區(qū)域?qū)R； 54:當頂層發(fā)生事件，因html事件冒泡的特性，所有事件均會傳遞到底層的body Π元素之中。
2.根據(jù)權(quán)利要求1所述的基于玻璃板技術(shù)實現(xiàn)遺留WebUI端的快速移植的方法，其特征在于:所述的元素的修正參數(shù)包括寬度width、高度height、外邊距屬性margin和內(nèi)邊距屬性 padding。
3.根據(jù)權(quán)利要求1所述的基于玻璃板技術(shù)實現(xiàn)遺留WebUI端的快速移植的方法，其特征在于:所述的步驟S3包括以下子步驟: 531:利用firebug的動態(tài)調(diào)試特性，快速獲取頂層元素的修正參數(shù)； 532:記錄修正參數(shù)，同時畫下來整個html的樹形結(jié)構(gòu)，將改變標注在對應的地方； 533:按照記錄的參數(shù)，對頂層進行修改，使得頂層的文字與底層的區(qū)域?qū)R。
【專利摘要】本發(fā)明公開了一種基于玻璃板技術(shù)實現(xiàn)遺留Web UI端的快速移植的方法，它包括以下步驟：S1：使用absolute布局方式創(chuàng)建上下兩個層，其中底層是新的UI層，頂層是老的UI層；S2：將頂層的背景圖片和背景顏色全部刪除，只保留文字，呈現(xiàn)玻璃的透明效果，使得底層的圖案顯現(xiàn)出來；S3：利用firebug的動態(tài)調(diào)試特性，快速獲取頂層元素的修正參數(shù)，將頂層的文字與底層的區(qū)域?qū)R；S4：當頂層發(fā)生事件，利用html事件冒泡的特性，采用body函數(shù)捕獲所述的事件，并對底層外觀做相應改變。本發(fā)明將新UI界面及其動態(tài)效果的處理代碼從老軟件中完全分離出來，可以將新的UI界面交給完全不知道老軟件的美工人員單獨開發(fā)，極大縮短了開發(fā)時間，提高了開發(fā)效率。
【IPC分類】G06F9-44
【公開號】CN104793962
【申請?zhí)枴緾N201510235305
【發(fā)明人】李俊畫, 馬劍, 唐興剛, 邱東
【申請人】四川天邑康和通信股份有限公司
【公開日】2015年7月22日
【申請日】2015年5月11日