頁(yè)面編輯器交互裝置和方法
【專利說(shuō)明】頁(yè)面編輯器交互裝置和方法
[0001]
技術(shù)領(lǐng)域
[0002]本發(fā)明涉及計(jì)算機(jī)技術(shù)領(lǐng)域，具體地，涉及一種頁(yè)面編輯器交互裝置和一種頁(yè)面編輯器交互方法。
[0003]
【背景技術(shù)】
[0004]在使用eclipse開(kāi)發(fā)web應(yīng)用時(shí)，很多前端開(kāi)發(fā)會(huì)顯得捉襟見(jiàn)肘，原因就是沒(méi)有一款合適的圖形化編輯界面。傳統(tǒng)的eclipse圖形化編輯的方案就是利用SWT組件以及GEF圖形化編輯框架實(shí)現(xiàn)的，因?yàn)閑clipse就是使用swt開(kāi)發(fā)的，GEF是eclipse的一個(gè)開(kāi)源工具項(xiàng)目，所以優(yōu)點(diǎn)是可以和eclipse實(shí)現(xiàn)完美集成和交互，但是缺點(diǎn)也很明顯，就是開(kāi)發(fā)出來(lái)的頁(yè)面具有太多的eclipse原生特質(zhì)，無(wú)法實(shí)現(xiàn)所見(jiàn)即所得的開(kāi)發(fā)和預(yù)覽，參見(jiàn)圖6。
[0005]然而瀏覽器端的web頁(yè)面編輯器卻有很多，隨著html5和JavaScript技術(shù)的發(fā)展，在瀏覽器端實(shí)現(xiàn)可視化可拖拽的html編輯器變得很容易。如何將這些好用的web頁(yè)面編輯器嵌入eclipse，并實(shí)現(xiàn)和eclipse的交互便成了急需要解決的問(wèn)題。
[0006]要實(shí)現(xiàn)將網(wǎng)頁(yè)版編輯器集成進(jìn)eclipse就需要先實(shí)現(xiàn)瀏覽器的嵌入，然后設(shè)置URL即可在eclipse打開(kāi)網(wǎng)頁(yè)編輯器。目前比較常用的方法是利用SWT的Browser控件嵌入瀏覽器，然后使用COM與IE通信，使用XPCOM與Firefox通信。以Firefox為例，為了使用基于Mozilla的SWT瀏覽器部件，需要在操作系統(tǒng)中預(yù)先安裝和注冊(cè)XulRunner (—個(gè)單獨(dú)的“Mozilla運(yùn)行時(shí)”安裝包)，然后通過(guò)簡(jiǎn)單代碼創(chuàng)建一個(gè)瀏覽器部件，通過(guò)代碼監(jiān)聽(tīng)瀏覽器部件的事件觸發(fā)相應(yīng)方法完成和eclipse的交互。
[0007]但是這種方法提供的交互功能比較單一，在處理頻繁的交互或者eclipse端發(fā)出請(qǐng)求需要?jiǎng)討B(tài)刷新瀏覽器內(nèi)容時(shí)，會(huì)顯得不是那么得心應(yīng)手。XulRunner還會(huì)面臨需要及時(shí)更新版本的問(wèn)題，不然可能會(huì)出現(xiàn)開(kāi)發(fā)的控件不能正常在內(nèi)嵌瀏覽器中使用等。
[0008]因此，需要一種新的頁(yè)面編輯器交互技術(shù)，可以在現(xiàn)有的頁(yè)面編輯器交互方式基礎(chǔ)上，充分利用單對(duì)象類型完成多對(duì)象類型的頁(yè)面編輯器交互，建立多對(duì)象類型參與的面向復(fù)雜類頁(yè)面編輯器交互的通用、統(tǒng)一交互思路。
[0009]

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

[0010]本發(fā)明正是基于上述問(wèn)題，提出了一種新的頁(yè)面編輯器交互技術(shù)，可以在現(xiàn)有的頁(yè)面編輯器交互方式基礎(chǔ)上，充分利用單對(duì)象類型完成多對(duì)象類型的頁(yè)面編輯器交互，建立多對(duì)象類型參與的面向復(fù)雜類頁(yè)面編輯器交互的通用、統(tǒng)一交互思路。
[0011]有鑒于此，本發(fā)明提出了一種頁(yè)面編輯器交互裝置，包括:環(huán)境準(zhǔn)備單元，用于創(chuàng)建頁(yè)面編輯器交互所需控件，擴(kuò)展頁(yè)面編輯器交互所需工具箱視圖，創(chuàng)建用于跟蹤頁(yè)面編輯器交互過(guò)程的監(jiān)聽(tīng)器；編輯器和java交互單元，用于基于創(chuàng)建的控件、擴(kuò)展的視圖和新建的監(jiān)聽(tīng)器，實(shí)現(xiàn)java與編輯器之交的信息交互。在該技術(shù)方案中，可以使用ActiveX控件(OCX)作為中介連接編輯器和eclipse環(huán)境，并根據(jù)OCX控件特性，實(shí)現(xiàn)eclipse和編輯器的相互通信，在響應(yīng)速度和版本穩(wěn)定性均有很大的提升。
[0012]在上述技術(shù)方案中，優(yōu)選地，該頁(yè)面編輯器交互裝置，還包括:頁(yè)面處理單元，用于基于java與編輯器之交的信息交互，實(shí)現(xiàn)實(shí)現(xiàn)頁(yè)面元素拖拽、頁(yè)面元素屬性修改和頁(yè)面保存，并呈現(xiàn)在瀏覽器頁(yè)面。在該技術(shù)方案中，可以有效地通過(guò)代碼調(diào)用控件中的函數(shù)，達(dá)到和瀏覽器交互的目的。
[0013]在上述技術(shù)方案中，優(yōu)選地，所述頁(yè)面處理單元，具體包括:頁(yè)面元素拖拽模塊，用于通過(guò)監(jiān)聽(tīng)鼠標(biāo)事件mouseDown，將json對(duì)象轉(zhuǎn)化成字符串寫(xiě)入JS的對(duì)象，并通過(guò)OCX控件的execScript，將對(duì)象傳入編輯器腳本；再結(jié)合編輯器腳本中的拖拽方法，將對(duì)象解析后進(jìn)行頁(yè)面渲染，編輯器中即出現(xiàn)相應(yīng)的頁(yè)面元素；頁(yè)面元素屬性修改模塊，用于點(diǎn)擊編輯器中的頁(yè)面元素，觸發(fā)編輯器的onSelected事件，編輯器中獲得頁(yè)面元素的屬性并將屬性以及需要調(diào)用java的方法名轉(zhuǎn)化成json字符串，并寫(xiě)入事件；修改監(jiān)聽(tīng)器eclipse屬性欄中的屬性，將修改后的屬性值寫(xiě)入JS對(duì)象，調(diào)用OCX控件execScript方法，在編輯器JS腳本中實(shí)現(xiàn)JS對(duì)象中的方法，完成對(duì)頁(yè)面屬性的修改；頁(yè)面保存模塊，用于觸發(fā)編輯器的doSave事件，保存時(shí)需將sess1n中的頁(yè)面模型取出，序列化后保存在本地，然后在經(jīng)過(guò)渲染最終呈現(xiàn)在瀏覽器頁(yè)面。在該技術(shù)方案中，可以基于java與編輯器的交互，實(shí)時(shí)更新頁(yè)面信息，人性化和通信直觀性大大提高。
[0014]在上述技術(shù)方案中，優(yōu)選地，所述環(huán)境準(zhǔn)備單元，具體包括:控件生成模塊，用于創(chuàng)建頁(yè)面編輯器交互所需對(duì)象類別擴(kuò)充組件控件，嵌入編輯器；視圖擴(kuò)展模塊，用于擴(kuò)展頁(yè)面編輯器交互所需工具箱視圖工具箱視圖，將組成頁(yè)面的布局和控件作為樹(shù)節(jié)點(diǎn)顯示在工具箱視圖中，對(duì)象數(shù)據(jù)以輕量級(jí)的數(shù)據(jù)交換格式保存在節(jié)點(diǎn)數(shù)據(jù)；擴(kuò)展頁(yè)面編輯器交互所需屬性視圖和大綱視圖，以接收編輯器中的對(duì)象屬性和dom樹(shù)結(jié)構(gòu)，并予以顯示；監(jiān)聽(tīng)器創(chuàng)建模塊，用于在java中將相應(yīng)的JS方法傳入OCX控件中；新建監(jiān)聽(tīng)器監(jiān)聽(tīng)編輯器的動(dòng)作，在編輯器頁(yè)面的js腳本中定義相應(yīng)動(dòng)作的事件，并將頁(yè)面編輯器交互所需需參數(shù)加入事件主題中。在該技術(shù)方案中，可以編寫(xiě)ActiveX控件(0CX)，以在和瀏覽器的交互中可靠實(shí)現(xiàn)相應(yīng)信息的調(diào)用和交互，相應(yīng)速率和可靠性均大大提高。
[0015]在上述技術(shù)方案中，優(yōu)選地，所述編輯器和java交互單元，具體包括:從java到編輯器的通信模塊，用于通過(guò)eclipse插件工程包含的內(nèi)容，調(diào)用自定義OCX控件的execScript方法，控制編輯器的修改，在對(duì)應(yīng)的方法體中將需要編輯器執(zhí)行的JS方法作為字符串傳入；從編輯器到j(luò)ava的通信模塊，用于對(duì)編輯器端得操作進(jìn)行監(jiān)聽(tīng)，當(dāng)監(jiān)聽(tīng)到的編輯器操作時(shí)，對(duì)獲得的event進(jìn)行處理，通過(guò)解碼獲得需要執(zhí)行的方法和參數(shù)，通過(guò)反射調(diào)用java方法使eclipse的相關(guān)視圖對(duì)編輯器的操作做出反應(yīng)。在該技術(shù)方案中，可以基于預(yù)先創(chuàng)建的OCX控件，綁定瀏覽器的URL，在eclipse中調(diào)用OCX控件的方式，可以有效的通過(guò)代碼調(diào)用控件中的函數(shù)，達(dá)到和瀏覽器交互的目的，通信可靠性大大提高。
[0016]根據(jù)本發(fā)明的又一個(gè)方面，還提出了一種頁(yè)面編輯器交互方法，包括:步驟202:創(chuàng)建頁(yè)面編輯器交互所需控件，擴(kuò)展頁(yè)面編輯器交互所需工具箱視圖，創(chuàng)建用于跟蹤頁(yè)面編輯器交互過(guò)程的監(jiān)聽(tīng)器；步驟204:基于創(chuàng)建的控件、擴(kuò)展的視圖和新建的監(jiān)聽(tīng)器，實(shí)現(xiàn)java與編輯器之交的信息交互。在該技術(shù)方案中，可以使用ActiveX控件(OCX)作為中介連接編輯器和eclipse環(huán)境，并根據(jù)OCX控件特性，實(shí)現(xiàn)eclipse和編輯器的相互通信，在響應(yīng)速度和版本穩(wěn)定性均有很大的提升。
[0017]在上述技術(shù)方案中，優(yōu)選地，該頁(yè)面編輯器交互方法，還包括:步驟206:基于java與編輯器之交的信息交互，實(shí)現(xiàn)實(shí)現(xiàn)頁(yè)面元素拖拽、頁(yè)面元素屬性修改和頁(yè)面保存，并呈現(xiàn)在瀏覽器頁(yè)面。在該技術(shù)方案中，可以有效地通過(guò)代碼調(diào)用控件中的函數(shù)，達(dá)到和瀏覽器交互的目的。
[0018]在上述技術(shù)方案中，優(yōu)選地，所述步驟206，具體包括:步驟502:通過(guò)監(jiān)聽(tīng)鼠標(biāo)事件mouseDown，將json對(duì)象轉(zhuǎn)化成字符串寫(xiě)入JS的對(duì)象，并通過(guò)OCX控件的execScript，將對(duì)象傳入編輯器腳本；再結(jié)合編輯器腳本中的拖拽方法，將對(duì)象解析后進(jìn)行頁(yè)面渲染，編輯器中即出現(xiàn)相應(yīng)的頁(yè)面元素；步驟504:點(diǎn)擊編輯器中的頁(yè)面元素，觸發(fā)編輯器的onSelected事件，編輯器中獲得頁(yè)面元素的屬性并將屬性以及需要調(diào)用java的方法名轉(zhuǎn)化成json字符串，并寫(xiě)入事件；修改監(jiān)聽(tīng)器eclipse屬性欄中的屬性，將修改后的屬性值寫(xiě)入JS對(duì)象，調(diào)用OCX控件execScript方法，在編輯器JS腳本中實(shí)現(xiàn)JS對(duì)象中的方法，完成對(duì)頁(yè)面屬性的修改；步驟506:觸發(fā)編輯器的doSave事件，保存時(shí)需將sess1n中的頁(yè)面模型取出，序列化后保存在本地，然后在經(jīng)過(guò)渲染最終呈現(xiàn)在瀏覽器頁(yè)面。在該技術(shù)方案中，可以基于java與編輯器的交互，實(shí)時(shí)更新頁(yè)面信息，人性化和通信直觀性大大提高。
[0019]在上述技術(shù)方案中，優(yōu)選地，所述步驟202，具體包括:步驟302:創(chuàng)建頁(yè)面編輯器交互所需對(duì)象類別擴(kuò)充組件控件，嵌入編輯器；步驟304:擴(kuò)展頁(yè)面編輯器交互所需工具箱視圖工具箱視圖，將組成頁(yè)面的布局和控件作為樹(shù)節(jié)點(diǎn)顯示在工具箱視圖中，對(duì)象數(shù)據(jù)以輕量級(jí)的數(shù)據(jù)交換格式保存在節(jié)點(diǎn)數(shù)據(jù)；擴(kuò)展頁(yè)面編輯器交互所需屬性視圖和大綱視圖，以接收編輯器中的對(duì)象屬性和dom樹(shù)結(jié)構(gòu)，并予以顯示；步驟306:在java中將相應(yīng)的JS方法傳入OCX控件中；新建監(jiān)聽(tīng)器監(jiān)聽(tīng)編輯器的動(dòng)作，在編輯器頁(yè)面的js腳本中定義相應(yīng)動(dòng)作的事件，并將頁(yè)面編輯器交互所需需參數(shù)加入事件主題中。在該技術(shù)方案中，