[發(fā)明專利]用于實(shí)現(xiàn)HTML頁面的可視化設(shè)計(jì)的系統(tǒng)和方法

有效

• 申請(qǐng)?zhí)枺?/td>: 201210371361.8
• 申請(qǐng)日: 2012-09-28
• 公開（公告）號(hào): CN102880708A
• 公開（公告）日: 2013-01-16
• 發(fā)明（設(shè)計(jì)）人: 何冠宇
• 申請(qǐng)（專利權(quán)）人: 用友軟件股份有限公司
• 主分類號(hào): G06F17/30
• 分類號(hào): G06F17/30
• 代理公司: 北京友聯(lián)知識(shí)產(chǎn)權(quán)代理事務(wù)所(普通合伙) 11343
• 代理人: 尚志峰;汪海屏

技術(shù)領(lǐng)域

本發(fā)明涉及頁面設(shè)計(jì)技術(shù)領(lǐng)域，具體而言，涉及一種用于實(shí)現(xiàn)HTML頁面的可視化設(shè)計(jì)的系統(tǒng)和一種用于實(shí)現(xiàn)HTML頁面的可視化設(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)的頁面具有良好的設(shè)計(jì)效果，但是對(duì)利用JavaScript/CSS等技術(shù)進(jìn)行動(dòng)態(tài)渲染的頁面，可視化設(shè)計(jì)效果一直不夠理想。現(xiàn)在存在一些支持個(gè)別控件框架的HTML可視化設(shè)計(jì)器如Maqetta，它支持完全基于WEB的可視化設(shè)計(jì)，主要是支持dojo的UI框架，但由于只能在WEB中使用，與傳統(tǒng)的開發(fā)工具集成性差，可用性不強(qiáng)，而且Maqetta的整個(gè)邏輯都用JavaScript編寫，性能、穩(wěn)定性都不夠好。

因此，需要一種新的用于實(shí)現(xiàn)HTML頁面的可視化設(shè)計(jì)的技術(shù)，可以很好地適應(yīng)各種UI框架，具有良好的擴(kuò)展性，并且能夠通過與本地的開發(fā)工具集成，實(shí)現(xiàn)一個(gè)支持各種功能的集成開發(fā)環(huán)境。

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

本發(fā)明正是基于上述問題，提出了一種新的用于實(shí)現(xiàn)HTML頁面的可視化設(shè)計(jì)的技術(shù)，可以很好地適應(yīng)各種UI框架，具有良好的擴(kuò)展性，并且能夠通過與本地的開發(fā)工具集成，實(shí)現(xiàn)一個(gè)支持各種功能的集成開發(fā)環(huán)境。

有鑒于此，本發(fā)明提出了一種用于實(shí)現(xiàn)HTML頁面的可視化設(shè)計(jì)的系統(tǒng)，包括：工具箱創(chuàng)建單元，用于建立工具箱，所述工具箱中包含基于語義標(biāo)簽定義的UI控件；控件選擇單元，用于從所述工具箱中選擇用于HTML頁面設(shè)計(jì)的指定UI控件；動(dòng)作執(zhí)行單元，用于對(duì)所述指定UI控件執(zhí)行設(shè)計(jì)動(dòng)作；通知單元，用于在所述設(shè)計(jì)動(dòng)作為可觸發(fā)動(dòng)作的情況下，通知渲染引擎對(duì)所述指定UI控件進(jìn)行渲染。

在該技術(shù)方案中，通過使用純粹的語義標(biāo)簽定義UI控件，與現(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頁面的設(shè)計(jì)界面、在所述設(shè)計(jì)界面中拖拽所述UI控件、刪除所述UI控件、修改所述UI控件的屬性、保存所述UI控件源代碼。

在上述任一技術(shù)方案中，優(yōu)選地，所述通知單元包括：標(biāo)簽添加子單元，用于將所述指定UI控件的語義標(biāo)簽添加至所述渲染引擎渲染的DOM（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)簽樹；以及頁面處理單元，用于在完成對(duì)所述HTML頁面的設(shè)計(jì)后進(jìn)行保存時(shí)，保存所述標(biāo)簽樹，并根據(jù)所述標(biāo)簽樹對(duì)所述HTML頁面進(jìn)行刷新。

在上述任一技術(shù)方案中，優(yōu)選地，還包括：兼容性設(shè)置單元，用于設(shè)置每個(gè)所述UI控件與其他UI控件的兼容性；以及兼容性判斷單元，用于在所述動(dòng)作執(zhí)行單元對(duì)所述指定UI控件進(jìn)行移動(dòng)時(shí)，若目標(biāo)位置存在其他UI控件，則判斷所述指定UI控件與所述目標(biāo)位置上的UI控件的兼容性，若兼容，則允許移動(dòng)，否則禁止移動(dòng)。

根據(jù)本發(fā)明的又一方面，還提出了一種用于實(shí)現(xiàn)HTML頁面的可視化設(shè)計(jì)的方法，包括：步驟202，建立工具箱，所述工具箱中包含基于語義標(biāo)簽定義的UI控件；步驟204，從所述工具箱中選擇用于HTML頁面設(shè)計(jì)的指定UI控件，并對(duì)所述指定UI控件執(zhí)行設(shè)計(jì)動(dòng)作，其中，若所述設(shè)計(jì)動(dòng)作為可觸發(fā)動(dòng)作，則通知渲染引擎對(duì)所述指定UI控件進(jìn)行渲染。

在該技術(shù)方案中，通過使用純粹的語義標(biāo)簽定義UI控件，與現(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頁面的設(shè)計(jì)界面、在所述設(shè)計(jì)界面中拖拽所述UI控件、刪除所述UI控件、修改所述UI控件的屬性、保存所述UI控件源代碼。