專利名稱：用于實(shí)現(xiàn)html頁(yè)面的可視化設(shè)計(jì)的系統(tǒng)和方法
技術(shù)領(lǐng)域：
本發(fā)明涉及頁(yè)面設(shè)計(jì)技術(shù)領(lǐng)域，具體而言，涉及一種用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的系統(tǒng)和一種用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的方法。
背景技術(shù)：
HTML技術(shù)是互聯(lián)網(wǎng)中最重要的技術(shù)之一，HTML新一代規(guī)范HTML5移動(dòng)互聯(lián)網(wǎng)的發(fā)展得到了迅速的普及和推廣。如今的HTML應(yīng)用不再只是應(yīng)用于WEB開發(fā)中，它在本地原生應(yīng)用的開發(fā)也開始普及，并具有一些成功的案例。但HTML由于其靈活性，一直以來都欠缺好的可視化設(shè)計(jì)器。著名的可視化設(shè)計(jì)器DreamWeaver對(duì)靜態(tài)的頁(yè)面具有良好的設(shè)計(jì)效果,但是對(duì)利用JavaScript/CSS等技術(shù)進(jìn)行動(dòng)態(tài)渲染的頁(yè)面，可視化設(shè)計(jì)效果一直不夠理想?，F(xiàn)在存在一些支持個(gè)別控件框架的HTML 可視化設(shè)計(jì)器如Maqetta,它支持完全基于WEB的可視化設(shè)計(jì),主要是支持do jo的UI框架，但由于只能在WEB中使用，與傳統(tǒng)的開發(fā)工具集成性差，可用性不強(qiáng)，而且Maqetta的整個(gè)邏輯都用JavaScript編寫,性能、穩(wěn)定性都不夠好。因此，需要一種新的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的技術(shù)，可以很好地適應(yīng)各種UI框架，具有良好的擴(kuò)展性，并且能夠通過與本地的開發(fā)工具集成，實(shí)現(xiàn)一個(gè)支持各種功能的集成開發(fā)環(huán)境。

發(fā)明內(nèi)容
本發(fā)明正是基于上述問題，提出了一種新的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的技術(shù)，可以很好地適應(yīng)各種Π框架，具有良好的擴(kuò)展性，并且能夠通過與本地的開發(fā)工具集成，實(shí)現(xiàn)一個(gè)支持各種功能的集成開發(fā)環(huán)境。有鑒于此，本發(fā)明提出了一種用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的系統(tǒng)，包括工具箱創(chuàng)建單元，用于建立工具箱，所述工具箱中包含基于語義標(biāo)簽定義的UI控件；控件選擇單元，用于從所述工具箱中選擇用于HTML頁(yè)面設(shè)計(jì)的指定Π控件；動(dòng)作執(zhí)行單元，用于對(duì)所述指定Π控件執(zhí)行設(shè)計(jì)動(dòng)作；通知單元，用于在所述設(shè)計(jì)動(dòng)作為可觸發(fā)動(dòng)作的情況下，通知渲染引擎對(duì)所述指定UI控件進(jìn)行渲染。在該技術(shù)方案中，通過使用純粹的語義標(biāo)簽定義Π控件，與現(xiàn)有的使用JavaScript描述的控件相比，更為直觀，并且能夠與已有的可視化設(shè)計(jì)器進(jìn)行集成，具有優(yōu)秀的擴(kuò)展性，將動(dòng)態(tài)化的UI控件轉(zhuǎn)換為靜態(tài)的標(biāo)簽描述，能夠方便地組合，從而形成豐富靈活的界面。在上述技術(shù)方案中，優(yōu)選地,所述動(dòng)作執(zhí)行單元執(zhí)行的所述設(shè)計(jì)動(dòng)作包括將所述UI控件從所述工具箱中拖拽至所述HTML頁(yè)面的設(shè)計(jì)界面、在所述設(shè)計(jì)界面中拖拽所述UI控件、刪除所述UI控件、修改所述UI控件的屬性、保存所述UI控件源代碼。在上述任一技術(shù)方案中，優(yōu)選地，所述通知單元包括標(biāo)簽添加子單元，用于將所述指定UI控件的語義標(biāo)簽添加至所述渲染引擎渲染的D0M(Document Object Model,文檔對(duì)象模型)對(duì)象中。在上述任一技術(shù)方案中，優(yōu)選地，還包括標(biāo)簽樹創(chuàng)建單元，用于根據(jù)所有被添加至所述DOM對(duì)象中的語義標(biāo)簽之間的父子關(guān)系，創(chuàng)建樹形結(jié)構(gòu)的標(biāo)簽樹；以及頁(yè)面處理單元，用于在完成對(duì)所述HTML頁(yè)面的設(shè)計(jì)后進(jìn)行保存時(shí)，保存所述標(biāo)簽樹，并根據(jù)所述標(biāo)簽樹對(duì)所述HTML頁(yè)面進(jìn)行刷新。在上述任一技術(shù)方案中，優(yōu)選地，還包括兼容性設(shè)置單元，用于設(shè)置每個(gè)所述Π控件與其他Π控件的兼容性；以及兼容性判斷單元，用于在所述動(dòng)作執(zhí)行單元對(duì)所述指定UI控件進(jìn)行移動(dòng)時(shí)，若目標(biāo)位置存在其他Π控件，則判斷所述指定Π控件與所述目標(biāo)位置上的UI控件的兼容性，若兼容，則允許移動(dòng)，否則禁止移動(dòng)。根據(jù)本發(fā)明的又一方面，還提出了一種用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的方法，包括步驟202，建立工具箱，所述工具箱中包含基于語義標(biāo)簽定義的Π控件；步驟204，從所述工具箱中選擇用于HTML頁(yè)面設(shè)計(jì)的指定Π控件，并對(duì)所述指定Π控件執(zhí)行設(shè)計(jì)動(dòng)
作，其中，若所述設(shè)計(jì)動(dòng)作為可觸發(fā)動(dòng)作，則通知渲染引擎對(duì)所述指定Π控件進(jìn)行渲染。在該技術(shù)方案中，通過使用純粹的語義標(biāo)簽定義Π控件，與現(xiàn)有的使用JavaScript描述的控件相比，更為直觀，并且能夠與已有的可視化設(shè)計(jì)器進(jìn)行集成，具有優(yōu)秀的擴(kuò)展性，將動(dòng)態(tài)化的UI控件轉(zhuǎn)換為靜態(tài)的標(biāo)簽描述，能夠方便地組合，從而形成豐富靈活的界面。在上述技術(shù)方案中，優(yōu)選地,所述設(shè)計(jì)動(dòng)作包括將所述UI控件從所述工具箱中拖拽至所述HTML頁(yè)面的設(shè)計(jì)界面、在所述設(shè)計(jì)界面中拖拽所述Π控件、刪除所述Π控件、修改所述UI控件的屬性、保存所述UI控件源代碼。在上述任一技術(shù)方案中，優(yōu)選地，所述通知渲染引擎對(duì)所述指定UI控件進(jìn)行渲染的步驟包括將所述指定UI控件的語義標(biāo)簽添加至所述渲染引擎渲染的DOM對(duì)象中。在上述任一技術(shù)方案中，優(yōu)選地，還包括根據(jù)所有被添加至所述DOM對(duì)象中的語義標(biāo)簽之間的父子關(guān)系，創(chuàng)建樹形結(jié)構(gòu)的標(biāo)簽樹；以及在完成對(duì)所述HTML頁(yè)面的設(shè)計(jì)后進(jìn)行保存時(shí)，保存所述標(biāo)簽樹，并根據(jù)所述標(biāo)簽樹對(duì)所述HTML頁(yè)面進(jìn)行刷新。在上述任一技術(shù)方案中，優(yōu)選地，所述步驟204之前，還包括設(shè)置每個(gè)所述Π控件與其他UI控件的兼容性；以及所述步驟204還包括對(duì)所述指定UI控件進(jìn)行移動(dòng)時(shí)，若目標(biāo)位置存在其他UI控件，則判斷所述指定UI控件與所述目標(biāo)位置上的UI控件的兼容性，若兼容，則允許移動(dòng)，否則禁止移動(dòng)。通過以上技術(shù)方案，可以很好地適應(yīng)各種Π框架，具有良好的擴(kuò)展性，并且能夠通過與本地的開發(fā)工具集成，實(shí)現(xiàn)一個(gè)支持各種功能的集成開發(fā)環(huán)境。


圖I示出了根據(jù)本發(fā)明的實(shí)施例的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的系統(tǒng)的框圖；圖2示出了根據(jù)本發(fā)明的實(shí)施例的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的方法的流程圖；圖3示出了根據(jù)本發(fā)明的實(shí)施例的可視化設(shè)計(jì)器的結(jié)構(gòu)框圖；圖4是圖3所示的可視化設(shè)計(jì)器的設(shè)計(jì)界面的示意圖5是圖3所示的可視化設(shè)計(jì)器中的一種Π控件的示意圖；圖6是利用圖3所示的可視化設(shè)計(jì)器的進(jìn)行HTML頁(yè)面設(shè)計(jì)的流程圖。
具體實(shí)施例方式為了能夠更清楚地理解本發(fā)明的上述目的、特征和優(yōu)點(diǎn)，下面結(jié)合附圖和具體實(shí)施方式
對(duì)本發(fā)明進(jìn)行進(jìn)一步的詳細(xì)描述。需要說明的是，在不沖突的情況下，本申請(qǐng)的實(shí)施例及實(shí)施例中的特征可以相互組合。在下面的描述中闡述了很多具體細(xì)節(jié)以便于充分理解本發(fā)明，但是，本發(fā)明還可以采用其他不同于在此描述的其他方式來實(shí)施，因此，本發(fā)明的保護(hù)范圍并不受下面公開的具體實(shí)施例的限制。圖I示出了根據(jù)本發(fā)明的實(shí)施例的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的系統(tǒng)的框 圖。如圖I所示，根據(jù)本發(fā)明的實(shí)施例的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的系統(tǒng)100，包括工具箱創(chuàng)建單元102，用于建立工具箱，所述工具箱中包含基于語義標(biāo)簽定義的Π控件；控件選擇單元104，用于從所述工具箱中選擇用于HTML頁(yè)面設(shè)計(jì)的指定UI控件；動(dòng)作執(zhí)行單元106，用于對(duì)所述指定UI控件執(zhí)行設(shè)計(jì)動(dòng)作；通知單元108，用于在所述設(shè)計(jì)動(dòng)作為可觸發(fā)動(dòng)作的情況下，通知渲染引擎對(duì)所述指定UI控件進(jìn)行渲染。在該技術(shù)方案中，通過使用純粹的語義標(biāo)簽定義Π控件，與現(xiàn)有的使用JavaScript描述的控件相比，更為直觀，并且能夠與已有的可視化設(shè)計(jì)器進(jìn)行集成，具有優(yōu)秀的擴(kuò)展性，將動(dòng)態(tài)化的UI控件轉(zhuǎn)換為靜態(tài)的標(biāo)簽描述，能夠方便地組合，從而形成豐富靈活的界面。在上述技術(shù)方案中，優(yōu)選地,所述動(dòng)作執(zhí)行單元106執(zhí)行的所述設(shè)計(jì)動(dòng)作包括將所述UI控件從所述工具箱中拖拽至所述HTML頁(yè)面的設(shè)計(jì)界面、在所述設(shè)計(jì)界面中拖拽所述UI控件、刪除所述UI控件、修改所述UI控件的屬性、保存所述UI控件源代碼。在上述任一技術(shù)方案中，優(yōu)選地,所述通知單元108包括標(biāo)簽添加子單元1080,用于將所述指定UI控件的語義標(biāo)簽添加至所述渲染引擎渲染的DOM (Document ObjectModel，文檔對(duì)象模型)對(duì)象中。在上述任一技術(shù)方案中，優(yōu)選地，還包括標(biāo)簽樹創(chuàng)建單元110，用于根據(jù)所有被添加至所述DOM對(duì)象中的語義標(biāo)簽之間的父子關(guān)系，創(chuàng)建樹形結(jié)構(gòu)的標(biāo)簽樹；以及頁(yè)面處理單元112，用于在完成對(duì)所述HTML頁(yè)面的設(shè)計(jì)后進(jìn)行保存時(shí)，保存所述標(biāo)簽樹，并根據(jù)所述標(biāo)簽樹對(duì)所述HTML頁(yè)面進(jìn)行刷新。在上述任一技術(shù)方案中，優(yōu)選地，還包括兼容性設(shè)置單元114，用于設(shè)置每個(gè)所述UI控件與其他Π控件的兼容性；以及兼容性判斷單元116，用于在所述動(dòng)作執(zhí)行單元對(duì)所述指定Π控件進(jìn)行移動(dòng)時(shí)，若目標(biāo)位置存在其他Π控件，則判斷所述指定Π控件與所述目標(biāo)位置上的UI控件的兼容性，若兼容，則允許移動(dòng)，否則禁止移動(dòng)。圖2示出了根據(jù)本發(fā)明的實(shí)施例的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的方法的流程圖。如圖2所示，根據(jù)本發(fā)明的實(shí)施例的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的方法，包括步驟202，建立工具箱，所述工具箱中包含基于語義標(biāo)簽定義的UI控件；步驟204，從所述工具箱中選擇用于HTML頁(yè)面設(shè)計(jì)的指定Π控件，并對(duì)所述指定Π控件執(zhí)行設(shè)計(jì)動(dòng)作，其中，若所述設(shè)計(jì)動(dòng)作為可觸發(fā)動(dòng)作，則通知渲染引擎對(duì)所述指定Π控件進(jìn)行渲染。在該技術(shù)方案中，通過使用純粹的語義標(biāo)簽定義Π控件，與現(xiàn)有的使用JavaScript描述的控件相比，更為直觀，并且能夠與已有的可視化設(shè)計(jì)器進(jìn)行集成，具有優(yōu)秀的擴(kuò)展性，將動(dòng)態(tài)化的UI控件轉(zhuǎn)換為靜態(tài)的標(biāo)簽描述，能夠方便地組合，從而形成豐富靈活的界面。在上述技術(shù)方案中，優(yōu)選地,所述設(shè)計(jì)動(dòng)作包括將所述UI控件從所述工具箱中拖拽至所述HTML頁(yè)面的設(shè)計(jì)界面、在所述設(shè)計(jì)界面中拖拽所述Π控件、刪除所述Π控件、修改所述UI控件的屬性、保存所述UI控件源代碼。在上述任一技術(shù)方案中，優(yōu)選地，所述通知渲染引擎對(duì)所述指定Π控件進(jìn)行渲染的步驟包括將所述指定UI控件的語義標(biāo)簽添加至所述渲染引擎渲染的DOM對(duì)象中。
在上述任一技術(shù)方案中，優(yōu)選地，還包括根據(jù)所有被添加至所述DOM對(duì)象中的語義標(biāo)簽之間的父子關(guān)系，創(chuàng)建樹形結(jié)構(gòu)的標(biāo)簽樹；以及在完成對(duì)所述HTML頁(yè)面的設(shè)計(jì)后進(jìn)行保存時(shí)，保存所述標(biāo)簽樹，并根據(jù)所述標(biāo)簽樹對(duì)所述HTML頁(yè)面進(jìn)行刷新。在上述任一技術(shù)方案中，優(yōu)選地，所述步驟204之前，還包括設(shè)置每個(gè)所述UI控件與其他UI控件的兼容性；以及所述步驟204還包括對(duì)所述指定UI控件進(jìn)行移動(dòng)時(shí)，若目標(biāo)位置存在其他UI控件，則判斷所述指定UI控件與所述目標(biāo)位置上的UI控件的兼容性，若兼容，則允許移動(dòng)，否則禁止移動(dòng)。圖3示出了根據(jù)本發(fā)明的實(shí)施例的可視化設(shè)計(jì)器的結(jié)構(gòu)框圖。如圖3所示，根據(jù)本發(fā)明的實(shí)施例的可視化設(shè)計(jì)器包括工具箱、設(shè)計(jì)引擎、渲染引擎，其中，采用純粹的基于語義標(biāo)簽的UI (用戶界面)控件，實(shí)現(xiàn)了一個(gè)模板化的工具箱。封裝和定制的渲染引擎可用于可視化展現(xiàn)，而工具箱中的基于語義標(biāo)簽的Π控件，可以通過拖拽的方式，與設(shè)計(jì)引擎交換，為頁(yè)面開發(fā)人員提供了一個(gè)所見即所得的可視化設(shè)計(jì)器。圖4是圖3所示的可視化設(shè)計(jì)器的設(shè)計(jì)界面的示意圖。由于本發(fā)明采用基于語義標(biāo)簽的Π控件，這與大部分的Π框架不同，傳統(tǒng)的Π框架提供的Π控件都以JavaScript的方式提供。而為了適應(yīng)傳統(tǒng)的UI框架，因而提供了一個(gè)基于語義標(biāo)簽的UI控件封裝，例如對(duì)如圖5所示的滾動(dòng)式的日期控件，一般的使用方式是采用JavaScript的方式，例如S(Wi1)-Scrolieri {
preset: 'date', theme: 'default', display: ’modal’， mode: 'scroller、 dateOrder: 'mmD ddy'
')
<div id-i'>這種方式非常靈活，但是不夠直觀，不易于集成到已有的可視化設(shè)計(jì)器中，而本發(fā)明通過基于語義標(biāo)簽的方式重新定義該控件
〈input data-role='scro!lpicker' dal a-preset ='date' data-mode=,scrolier'
data-dateOrder= 'mml) ddy' data-display=’modal' />基于語義標(biāo)簽的方式描述，把動(dòng)態(tài)化的UI控件轉(zhuǎn)化為靜態(tài)的標(biāo)簽描述，屏蔽了JavaScript的復(fù)雜性，它符合靜態(tài)的HTML使用習(xí)慣，是一種聲明式的描述，能夠方便的組合，形成豐富靈活的界面。有了基于語義標(biāo)簽的控件，本發(fā)明使用模板化的工具箱對(duì)所有需要可視化設(shè)計(jì)的控件進(jìn)行了模板化的描述。工具箱由一系列的工具構(gòu)成，工具主要是包裝了語義標(biāo)簽的Π控件，以模板的方式表示。通過選定工具箱中的工具，以拖拽的方式與設(shè)計(jì)引擎交互，實(shí)現(xiàn)Π設(shè)計(jì)的各種動(dòng)作。Π設(shè)計(jì)的動(dòng)作主要包括從工具箱到瀏覽器的拖拽設(shè)計(jì)動(dòng)作、Π控件在瀏覽器內(nèi)部的拖拽移動(dòng)動(dòng)作、刪除UI控件、修改控件屬性、保存源代碼等。這些設(shè)計(jì)動(dòng)作由設(shè)計(jì)引擎負(fù)責(zé)。設(shè)計(jì)引擎采用本地語言編寫，而不是JavaScript,其中的一個(gè)實(shí)現(xiàn),在Eclipse集成開發(fā)環(huán)境中采用Java語言編寫，非常方便的利用了 Eclipse的集成開發(fā)能力，如編輯器、視圖、工具面板、源代碼編輯等等。采用本地語言實(shí)現(xiàn)的設(shè)計(jì)引擎穩(wěn)定性、效率、工程質(zhì)量都得到大幅提高，還充分利用了現(xiàn)有集成開發(fā)環(huán)境的優(yōu)勢(shì)。渲染引擎是瀏覽器功能的核心，渲染引擎渲染設(shè)計(jì)引擎設(shè)計(jì)的頁(yè)面，流行的渲染引擎有 Webkit (chrome 瀏覽器和 Safari 瀏覽器使用)、Gecko (FireFox 使用)、Trident (IE使用)。通過封裝任一渲染引擎，都可以達(dá)到所見即所得的效果。一個(gè)實(shí)現(xiàn)上，本發(fā)明采用了 WebKit作為渲染引擎。渲染引擎一般在瀏覽器對(duì)HTML頁(yè)面的DOM對(duì)象裝載完畢時(shí)，執(zhí) 行JavaScript進(jìn)行控件的動(dòng)態(tài)渲染。設(shè)計(jì)引擎的設(shè)計(jì)動(dòng)作執(zhí)行時(shí)，把工具箱中選定的工具定義的語義標(biāo)簽?zāi)０逄砑拥戒秩疽驿秩镜腄OM對(duì)象中。經(jīng)常發(fā)生的情況是，頁(yè)面中插入了一個(gè)控件，但是由于沒有觸發(fā)控件動(dòng)態(tài)的渲染的javascript腳本，使得語義標(biāo)簽控件在頁(yè)面中沒有產(chǎn)生所需要的渲染效果，從而失去了所見即所得的特性。為了解決這一問題，設(shè)計(jì)引擎和工具箱按照下面的約定工作I.工具箱中的每個(gè)工具包括下面的內(nèi)容P語義標(biāo)簽?zāi)０?，如〈input type=’ submit’ value=’ submitBtn’ />。>工具屬性如type, value,用來通過動(dòng)態(tài)的屬性調(diào)整控制控件的展現(xiàn)內(nèi)容和形態(tài)。>設(shè)計(jì)時(shí)動(dòng)作描述設(shè)計(jì)交互時(shí)，可以觸發(fā)的動(dòng)作，例如通知渲染引擎渲染特定的控件。設(shè)計(jì)時(shí)動(dòng)作，采用動(dòng)態(tài)語言進(jìn)行描述，如采用javascr iPt、ruby ,動(dòng)態(tài)語言的支持,使設(shè)計(jì)器的工具具有良好的可擴(kuò)展性。本發(fā)明的一個(gè)實(shí)現(xiàn)采用了 javascript描述設(shè)計(jì)時(shí)動(dòng) 作，可在拖拽設(shè)計(jì)時(shí)，根據(jù)不同的Π控件和多個(gè)Π控件之間的組合關(guān)系觸發(fā)不同的渲染動(dòng)作。>兼容性設(shè)置描述Π控件之間的兼容性，包括是否原子控件、是否容器型控件，允許放置的控件清單。原子控件不允許在其中放置其他控件，如上述的滾動(dòng)日期控件；容器型控件可支持在其中放置其他控件，但有些容器型控件只支持放置特定類型的Π控件，如工具欄只允許放工具條控件。2.設(shè)計(jì)引擎，在設(shè)計(jì)動(dòng)作發(fā)生時(shí)，檢查當(dāng)前工具關(guān)聯(lián)的設(shè)計(jì)時(shí)動(dòng)作，如果存在與該設(shè)計(jì)動(dòng)作匹配的設(shè)計(jì)時(shí)動(dòng)作，那么會(huì)觸發(fā)執(zhí)行該動(dòng)作。3.設(shè)計(jì)引擎在拖拽Π控件的過程中，對(duì)拖拽的焦點(diǎn)和當(dāng)前工具對(duì)應(yīng)的控件進(jìn)行按照兼容性設(shè)置匹配性選擇，如果當(dāng)前工具對(duì)應(yīng)的控件在焦點(diǎn)所在的控件的允許放置清單中，則允許在其上放置控件，否則就拒絕放置。4.設(shè)計(jì)引擎為每個(gè)渲染之前的標(biāo)簽都會(huì)分配一個(gè)唯一的標(biāo)識(shí)符，設(shè)計(jì)引擎通過該標(biāo)識(shí)識(shí)別標(biāo)簽，并根據(jù)標(biāo)簽的父子關(guān)系建立樹形結(jié)構(gòu)的標(biāo)簽樹。5.設(shè)計(jì)引擎在發(fā)生保存動(dòng)作時(shí)，會(huì)把整個(gè)標(biāo)簽樹保存，并強(qiáng)制刷新整個(gè)頁(yè)面，這樣可以清理前面一些設(shè)計(jì)動(dòng)作遺留下來的資源。下面以拖拽設(shè)計(jì)為例，結(jié)合圖6來描述設(shè)計(jì)引擎、工具箱工具、渲染引擎的工作過程步驟602，頁(yè)面設(shè)計(jì)人員選擇工具箱中的工具(即UI控件)。步驟604，通過拖拽的方式，將工具拖拽到可視化設(shè)計(jì)器。步驟606，可視化設(shè)計(jì)器的設(shè)計(jì)引擎檢測(cè)到該拖拽動(dòng)作，并向渲染引擎發(fā)送消息，請(qǐng)求獲取當(dāng)前鼠標(biāo)焦點(diǎn)所在的HTML標(biāo)簽信息，渲染引擎給設(shè)計(jì)引擎返回焦點(diǎn)所在的UI控件的HTML標(biāo)簽信息。步驟608，設(shè)計(jì)引擎根據(jù)標(biāo)簽信息，對(duì)照已有的設(shè)計(jì)內(nèi)容形成的標(biāo)簽樹結(jié)構(gòu)信息，計(jì)算出合適的拖拽焦點(diǎn)控件。步驟610，判斷是否允許放置當(dāng)前工具，如果焦點(diǎn)所在的Π控件是原子控件就不允許放置；如果是容器型控件，設(shè)計(jì)引擎將取出該控件的允許的控件清單，如果當(dāng)前工具所選擇的控件在清單中，則允許放置。具體地，若允許放置，則進(jìn)入步驟616，否則進(jìn)入步驟612。
步驟612，提示拒絕，則拖拽的工具必須移動(dòng)到其他控件上。步驟614，判斷是否發(fā)生繼續(xù)拖拽，若發(fā)生，則返回步驟606，否則結(jié)束流程。步驟616，提示可以接收該工具。步驟618，判斷是否放置該工具，若是，則進(jìn)入步驟620，否則結(jié)束。步驟620，放置發(fā)生后，設(shè)計(jì)引擎更新設(shè)計(jì)內(nèi)容，形成新的標(biāo)簽樹，并發(fā)送消息給渲染引擎，動(dòng)態(tài)的更新其渲染的DOM樹。步驟622，檢查放置的工具是否具有放置時(shí)的可觸發(fā)動(dòng)作，如果有，則立即觸發(fā)動(dòng)作。步驟624，渲染引擎因此成功地渲染了 UI控件(工具)。以上結(jié)合附圖詳細(xì)說明了本發(fā)明的技術(shù)方案，本發(fā)明提供了一種用于實(shí)現(xiàn)HTML 頁(yè)面的可視化設(shè)計(jì)的系統(tǒng)和一種用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的方法，可以很好地適應(yīng)各種UI框架，具有良好的擴(kuò)展性，并且能夠通過與本地的開發(fā)工具集成，實(shí)現(xiàn)一個(gè)支持各種功能的集成開發(fā)環(huán)境。以上所述僅為本發(fā)明的優(yōu)選實(shí)施例而已，并不用于限制本發(fā)明，對(duì)于本領(lǐng)域的技術(shù)人員來說，本發(fā)明可以有各種更改和變化。凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)。
權(quán)利要求
1.一種用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的系統(tǒng)，其特征在于，包括 工具箱創(chuàng)建單元，用于建立工具箱，所述工具箱中包含基于語義標(biāo)簽定義的UI控件； 控件選擇單元，用于從所述工具箱中選擇用于HTML頁(yè)面設(shè)計(jì)的指定Π控件； 動(dòng)作執(zhí)行單元，用于對(duì)所述指定UI控件執(zhí)行設(shè)計(jì)動(dòng)作； 通知單元，用于在所述設(shè)計(jì)動(dòng)作為可觸發(fā)動(dòng)作的情況下，通知渲染引擎對(duì)所述指定Π控件進(jìn)行渲染。
2.根據(jù)權(quán)利要求I所述的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的系統(tǒng)，其特征在于，所述動(dòng)作執(zhí)行單元執(zhí)行的所述設(shè)計(jì)動(dòng)作包括 將所述UI控件從所述工具箱中拖拽至所述HTML頁(yè)面的設(shè)計(jì)界面、在所述設(shè)計(jì)界面中拖拽所述UI控件、刪除所述UI控件、修改所述UI控件的屬性、保存所述UI控件源代碼。
3.根據(jù)權(quán)利要求I所述的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的系統(tǒng)，其特征在于，所述通知單元包括 標(biāo)簽添加子單元，用于將所述指定UI控件的語義標(biāo)簽添加至所述渲染引擎渲染的DOM對(duì)象中。
4.根據(jù)權(quán)利要求3所述的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的系統(tǒng)，其特征在于，還包括 標(biāo)簽樹創(chuàng)建單元，用于根據(jù)所有被添加至所述DOM對(duì)象中的語義標(biāo)簽之間的父子關(guān)系，創(chuàng)建樹形結(jié)構(gòu)的標(biāo)簽樹；以及 頁(yè)面處理單元，用于在完成對(duì)所述HTML頁(yè)面的設(shè)計(jì)后進(jìn)行保存時(shí)，保存所述標(biāo)簽樹，并根據(jù)所述標(biāo)簽樹對(duì)所述HTML頁(yè)面進(jìn)行刷新。
5.根據(jù)權(quán)利要求I至4中任一項(xiàng)所述的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的系統(tǒng)，其特征在于，還包括 兼容性設(shè)置單元，用于設(shè)置每個(gè)所述UI控件與其他UI控件的兼容性；以及 兼容性判斷單元，用于在所述動(dòng)作執(zhí)行單元對(duì)所述指定Π控件進(jìn)行移動(dòng)時(shí)，若目標(biāo)位置存在其他UI控件，則判斷所述指定UI控件與所述目標(biāo)位置上的UI控件的兼容性，若兼容，則允許移動(dòng)，否則禁止移動(dòng)。
6.一種用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的方法，其特征在于，包括 步驟202，建立工具箱，所述工具箱中包含基于語義標(biāo)簽定義的UI控件； 步驟204，從所述工具箱中選擇用于HTML頁(yè)面設(shè)計(jì)的指定Π控件，并對(duì)所述指定Π控件執(zhí)行設(shè)計(jì)動(dòng)作，其中，若所述設(shè)計(jì)動(dòng)作為可觸發(fā)動(dòng)作，則通知渲染引擎對(duì)所述指定UI控件進(jìn)行渲染。
7.根據(jù)權(quán)利要求6所述的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的方法，其特征在于，所述設(shè)計(jì)動(dòng)作包括 將所述UI控件從所述工具箱中拖拽至所述HTML頁(yè)面的設(shè)計(jì)界面、在所述設(shè)計(jì)界面中拖拽所述UI控件、刪除所述UI控件、修改所述UI控件的屬性、保存所述UI控件源代碼。
8.根據(jù)權(quán)利要求6所述的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的方法，其特征在于，所述通知渲染引擎對(duì)所述指定Π控件進(jìn)行渲染的步驟包括 將所述指定UI控件的語義標(biāo)簽添加至所述渲染引擎渲染的DOM對(duì)象中。
9.根據(jù)權(quán)利要求8所述的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的方法，其特征在于，還包括 根據(jù)所有被添加至所述DOM對(duì)象中的語義標(biāo)簽之間的父子關(guān)系，創(chuàng)建樹形結(jié)構(gòu)的標(biāo)簽樹；以及 在完成對(duì)所述HTML頁(yè)面的設(shè)計(jì)后進(jìn)行保存時(shí)，保存所述標(biāo)簽樹，并根據(jù)所述標(biāo)簽樹對(duì)所述HTML頁(yè)面進(jìn)行刷新。
10.根據(jù)權(quán)利要求6至9中任一項(xiàng)所述的用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的方法，其特征在于，所述步驟204之前，還包括 設(shè)置每個(gè)所述UI控件與其他UI控件的兼容性；以及 所述步驟204還包括 對(duì)所述指定UI控件進(jìn)行移動(dòng)時(shí)，若目標(biāo)位置存在其他UI控件，則判斷所述指定UI控件與所述目標(biāo)位置上的UI控件的兼容性，若兼容，則允許移動(dòng)，否則禁止移動(dòng)。
全文摘要
本發(fā)明提供了一種用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的系統(tǒng)，包括工具箱創(chuàng)建單元，用于建立工具箱，所述工具箱中包含基于語義標(biāo)簽定義的UI控件；控件選擇單元，用于從所述工具箱中選擇用于HTML頁(yè)面設(shè)計(jì)的指定UI控件；動(dòng)作執(zhí)行單元，用于對(duì)所述指定UI控件執(zhí)行設(shè)計(jì)動(dòng)作；通知單元，用于在所述設(shè)計(jì)動(dòng)作為可觸發(fā)動(dòng)作的情況下，通知渲染引擎對(duì)所述指定UI控件進(jìn)行渲染。本發(fā)明還提出了一種用于實(shí)現(xiàn)HTML頁(yè)面的可視化設(shè)計(jì)的方法。通過本發(fā)明的技術(shù)方案，可以很好地適應(yīng)各種UI框架，具有良好的擴(kuò)展性，并且能夠通過與本地的開發(fā)工具集成，實(shí)現(xiàn)一個(gè)支持各種功能的集成開發(fā)環(huán)境。
文檔編號(hào)G06F17/30GK102880708SQ20121037136
公開日2013年1月16日 申請(qǐng)日期2012年9月28日 優(yōu)先權(quán)日2012年9月28日
發(fā)明者何冠宇 申請(qǐng)人:用友軟件股份有限公司