本發(fā)明實(shí)施方式涉及一種B/S模式的信息化系統(tǒng)的界面設(shè)計(jì)工具，尤其是涉及一種業(yè)務(wù)人員能自行開發(fā)使用維護(hù)界面的有配屬數(shù)據(jù)處理功能的界面設(shè)計(jì)工具。

背景技術(shù)：

隨著計(jì)算機(jī)科技的發(fā)展，社會(huì)各方面與軟件越來越緊密結(jié)合，尤其是事企業(yè)單位越來越依賴于信息化系統(tǒng)來處理日常事務(wù)。界面是業(yè)務(wù)人員操作信息化系統(tǒng)的主要方式，是開發(fā)維護(hù)信息化系統(tǒng)的重要組成部分。當(dāng)前的界面設(shè)計(jì)工具幾乎都是面向開發(fā)人員，其中很重要的原因就是使用該界面的數(shù)據(jù)的處理功能需要編程實(shí)現(xiàn)，數(shù)據(jù)的標(biāo)識(shí)不同和使用的多樣性導(dǎo)致同類界面不能一樣，數(shù)據(jù)處理功能更不可能一樣，可復(fù)用性較差，開發(fā)效率不高。常規(guī)的開發(fā)流程使得對(duì)信息化系統(tǒng)的需求滿足需要較長的周期，最終導(dǎo)致開發(fā)維護(hù)開銷較大。

本發(fā)明與自動(dòng)化業(yè)務(wù)設(shè)計(jì)管理系統(tǒng)共用一個(gè)總的發(fā)明思路，引進(jìn)其名為界面控件的概念來解決復(fù)用性問題，本發(fā)明主要針對(duì)HTML平臺(tái)下的界面控件貼。界面控件是已由系統(tǒng)開發(fā)人員完成的控件，屬于客戶端程序，擁有可以調(diào)用已有的數(shù)據(jù)處理功能的數(shù)據(jù)接口和獲取已設(shè)置的界面屬性的數(shù)據(jù)接口，顯示內(nèi)部設(shè)定的界面，如同便利貼紙一樣，供業(yè)務(wù)人員在信息化系統(tǒng)內(nèi)各界面中按需使用。業(yè)務(wù)人員根據(jù)自身業(yè)務(wù)特點(diǎn)和需求采用本發(fā)明實(shí)施方式自行完成信息化系統(tǒng)的界面開發(fā)維護(hù)，最大限度減低開銷費(fèi)用。

當(dāng)前信息化系統(tǒng)界面開發(fā)存在問題總結(jié)如下：

1.技術(shù)上，界面設(shè)計(jì)結(jié)果可復(fù)用性較差，工具使用人員多為開發(fā)人員，要求較高；

2.費(fèi)用上，由開發(fā)人員實(shí)施的開發(fā)流程環(huán)節(jié)較多，開銷較大。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明所要解決的技術(shù)問題是，提出一種B/S模式下的信息化管理系統(tǒng)業(yè)務(wù)人員能自行開發(fā)使用維護(hù)滿足自身業(yè)務(wù)需求的界面的有配屬數(shù)據(jù)處理功能的界面設(shè)計(jì)工具——HTML界面控件貼。具體解決方案是：

HTML界面控件貼，采用可視化操作方式，能自由產(chǎn)生表格、浮動(dòng)或絕對(duì)定位布局中的塊狀區(qū)域組合。塊狀區(qū)域是業(yè)務(wù)要素的容器，可通過復(fù)用已有的界面控件方式關(guān)聯(lián)或拖動(dòng)業(yè)務(wù)要素到選中塊狀區(qū)域方式關(guān)聯(lián)，兩種方式均在塊狀區(qū)域中產(chǎn)生各自的特定的標(biāo)記。塊狀區(qū)域可采用諸如圖片、文本控件等基本控件進(jìn)行說明修飾，也可進(jìn)行諸如邊框、背景色、字體大小等的外觀設(shè)計(jì)。產(chǎn)生的設(shè)計(jì)方案是包含特定標(biāo)記的各HTML元素的組合序列的描述，和生成使用該描述的頁面代碼，并把代碼動(dòng)態(tài)編譯以供業(yè)務(wù)人員工作使用。

本發(fā)明的有益效果是，業(yè)務(wù)人員使用HTML界面控件貼工具，最大限度地復(fù)用業(yè)務(wù)表或業(yè)務(wù)模塊在頁面的顯示及數(shù)據(jù)處理功能，有效規(guī)避了業(yè)務(wù)人員無法進(jìn)行編程的缺點(diǎn)。使用定位架，可以很方便地把設(shè)計(jì)區(qū)域劃分為所需的區(qū)域，可視化操作方便地產(chǎn)生表單或展示頁面的HTML元素序列，所見即所得的效果降低了對(duì)業(yè)務(wù)人員的要求。業(yè)務(wù)人員的操作減少了信息化系統(tǒng)的開發(fā)維護(hù)環(huán)節(jié)，最大限度地節(jié)約了開銷費(fèi)用。

附圖說明

圖1為本發(fā)明界面控件貼設(shè)計(jì)功能示意圖。

具體實(shí)施方式

HTML界面控件貼設(shè)計(jì)工具，是B/S模式的一種自動(dòng)化業(yè)務(wù)設(shè)計(jì)管理系統(tǒng)的一個(gè)頁面設(shè)計(jì)工具。如圖1所示，工具組件包括但不限于定位架設(shè)計(jì)區(qū)、設(shè)計(jì)參數(shù)配置區(qū)、業(yè)務(wù)要素加載區(qū)、界面控件選擇區(qū)、設(shè)計(jì)生成程序。產(chǎn)出的設(shè)計(jì)方案是定位架設(shè)計(jì)區(qū)內(nèi)設(shè)計(jì)的帶業(yè)務(wù)要素的特定的標(biāo)記的各HTML元素的組合序列的描述，和根據(jù)已預(yù)設(shè)的使用設(shè)計(jì)HTML描述的增刪改查統(tǒng)計(jì)功能頁面生成代碼模板，生成并動(dòng)態(tài)編譯為當(dāng)前HTML平臺(tái)技術(shù)的所需功能的使用場景頁面。采用可視化操作實(shí)現(xiàn)所見即所得結(jié)果，方式包括但不限于參數(shù)配置，拖放拉動(dòng)，放大縮小，選中目標(biāo)菜單操作。

定位架通過塊狀區(qū)域來劃分頁面，定位方式包括表格定位、浮動(dòng)定位和絕對(duì)定位，其中，表格定位在定位架設(shè)計(jì)區(qū)內(nèi)建一個(gè)HTML簡單表格，并定義一組表格操作函數(shù)對(duì)該簡單表格進(jìn)行可視化操作，最終得到所需要的表格，表格的各組成部分就表示為塊狀區(qū)域；浮動(dòng)定位和絕對(duì)定位需要在定位架設(shè)計(jì)區(qū)使用畫圖基本控件，該控件的畫布大小是需進(jìn)行設(shè)計(jì)的區(qū)域，即最終生成的頁面顯示區(qū)域尺寸，通過可視化操作方式產(chǎn)生多個(gè)互不交疊的矩形，通過轉(zhuǎn)換算法，把矩形圖形在畫布的定位信息轉(zhuǎn)化成頁面顯示區(qū)域的表示為塊狀區(qū)域的HTML元素的位置屬性，把頁面顯示區(qū)域分隔成多個(gè)互不交疊的塊狀區(qū)域，塊狀區(qū)域可無限地再次調(diào)用定位架定位方式繼續(xù)細(xì)分，這時(shí)使用的畫圖基本控件的畫布就是塊狀區(qū)域大小，絕對(duì)定位取相對(duì)于畫布原點(diǎn)的定位信息，也就是最終頁面顯示區(qū)域左上角的原點(diǎn)位置；定位架設(shè)計(jì)區(qū)域可對(duì)表示為塊狀區(qū)域的HTML元素進(jìn)行諸如背景色、字體大小等外觀設(shè)定。

浮動(dòng)定位的轉(zhuǎn)換算法在功能上是畫布的矩形組合和頁面塊狀區(qū)域組合的互轉(zhuǎn)換，其中，矩形組合轉(zhuǎn)塊狀區(qū)域組合：把整個(gè)畫布看作一個(gè)檢測區(qū)域，當(dāng)檢測區(qū)域只有一個(gè)矩形，即可根據(jù)HTML浮動(dòng)規(guī)則和檢測區(qū)域與矩形的圖形關(guān)系，產(chǎn)生一個(gè)塊狀區(qū)域，該塊狀區(qū)域在HTML模型中用一種元素表示，該元素體現(xiàn)了占空間大小為檢測區(qū)域但可放置區(qū)域?yàn)榫匦未笮〉膲K狀區(qū)域，該元素可以為div或其他偏好的塊級(jí)元素，當(dāng)檢測區(qū)域內(nèi)有多個(gè)矩形，可優(yōu)先按水平方向解析，即是在垂直方向依照不能分割矩形和必須包含矩形的原則進(jìn)行極大數(shù)分段，形成水平向檢測區(qū)域，對(duì)每一個(gè)水平向檢測區(qū)域進(jìn)行水平方向的不能分割矩形和必須包含矩形原則的極大數(shù)分段，形成水平向水平段檢測區(qū)域，對(duì)每一個(gè)水平向水平段檢測區(qū)域進(jìn)行檢測，如果內(nèi)只有一個(gè)矩形，即可產(chǎn)生塊狀區(qū)域，如果有多個(gè)矩形，就把該水平向水平段檢測區(qū)域生成一個(gè)額外塊狀區(qū)域，該額外塊狀區(qū)域可以為div或其他偏好的塊級(jí)元素，并對(duì)該水平向水平段檢測區(qū)域在垂直方向以不可分割矩形和必須包含矩形原則作極大數(shù)分子段，形成水平向水平段垂直子段檢測區(qū)域，對(duì)每一個(gè)水平向水平段垂直子段檢測區(qū)域進(jìn)行檢測，如果內(nèi)只有一個(gè)矩形，就可生成對(duì)應(yīng)塊狀區(qū)域，如果有多個(gè)矩形，就繼續(xù)分水平孫段再檢測，這樣水平和垂直交替分段并在進(jìn)行垂直分段時(shí)，把該檢測區(qū)域轉(zhuǎn)成一個(gè)額外塊狀區(qū)域的遞歸檢測，最終使每一個(gè)檢測區(qū)域內(nèi)都只有一個(gè)矩形，轉(zhuǎn)換規(guī)則上增加考慮與額外塊狀區(qū)域在HTML模型的位置關(guān)系，最終轉(zhuǎn)換成所需的塊狀區(qū)域組合，也可在水平向檢測區(qū)域時(shí)先垂直分段再水平分段，也可先按垂直方向解析，即是在水平方向按不可分割矩形和必須包含矩形原則進(jìn)行極大數(shù)分段，形成垂直向檢測區(qū)域，如果形成多于一個(gè)垂直向檢測區(qū)域，那么每一個(gè)垂直向檢測區(qū)域都要生成一個(gè)額外塊狀區(qū)域，對(duì)每一個(gè)垂直向檢測區(qū)域進(jìn)行檢測，如果只有一個(gè)矩形，即可生成塊狀區(qū)域，如果有多個(gè)矩形，那么就進(jìn)行垂直與水平交替分段并在進(jìn)行垂直分段時(shí)，把該檢測區(qū)域轉(zhuǎn)成一個(gè)額外塊狀區(qū)域的遞歸檢測，逐步分解，最終轉(zhuǎn)換成所需的塊狀區(qū)域組合；塊狀區(qū)域組合轉(zhuǎn)矩形組合是逆運(yùn)算，供維護(hù)修改使用，對(duì)塊狀區(qū)域?qū)?yīng)的HTML模型的元素的位置屬性進(jìn)行計(jì)算，獲取可放置區(qū)域相對(duì)于頁面顯示區(qū)域左上角原點(diǎn)，也就是畫布原點(diǎn)的位置信息，根據(jù)這些位置信息在畫布中生成矩形組合。

絕對(duì)定位的轉(zhuǎn)換算法在功能上是畫布的矩形組合和塊狀區(qū)域組合在HTML絕對(duì)布局方式的互轉(zhuǎn)換，其中，矩形組合轉(zhuǎn)塊狀區(qū)域組合：第一次使用定位架絕對(duì)定位是第一層畫布，即是全畫布，在它上面所產(chǎn)生的矩形按照相對(duì)于全畫布原點(diǎn)的位置信息轉(zhuǎn)換成頁面可顯示區(qū)域的原點(diǎn)與塊狀區(qū)域的位置屬性，該塊狀區(qū)域在HTML中用一種元素表示，該元素體現(xiàn)了占空間大小和可放置區(qū)域均為矩形大小的塊狀區(qū)域，該元素可以是div元素或其他偏好的塊級(jí)元素，在塊狀區(qū)域上遞歸調(diào)用定位架絕對(duì)定位所產(chǎn)生的第二層以上的畫布，即是局部畫布，它所產(chǎn)生的矩形的位置信息相對(duì)于局部畫布原點(diǎn)，應(yīng)按照HTML模型規(guī)則，或補(bǔ)足相對(duì)于全畫布原點(diǎn)的位置信息，或在第二層起采用相對(duì)位置方式，最終轉(zhuǎn)換成所需的塊狀區(qū)域；塊狀區(qū)域組合轉(zhuǎn)矩形組合是逆運(yùn)算，對(duì)塊狀區(qū)域HTML元素的位置屬性進(jìn)行計(jì)算，獲取相對(duì)于頁面左上角原點(diǎn)的位置信息，根據(jù)這些位置信息在畫布中生成矩形組合。

設(shè)計(jì)參數(shù)配置區(qū)作為工具基本操作的操作區(qū)域使用，支持操作有加載草稿、保存草稿、提交設(shè)計(jì)。設(shè)計(jì)參數(shù)配置區(qū)作為可視化操作參數(shù)配置的操作區(qū)域使用，對(duì)其他組件提供操作支持。對(duì)定位架設(shè)計(jì)區(qū)中各定位方式提供操作支持：固定通用的操作包括但不限于恢復(fù)上一步操作、重做下一步操作、定位方式選擇、提交設(shè)計(jì)、保存草稿，對(duì)于提交設(shè)計(jì)操作，嵌套調(diào)用定位架打開的新設(shè)計(jì)工具產(chǎn)生的設(shè)計(jì)HTML對(duì)象經(jīng)過調(diào)整后加入上一層定位架的相關(guān)塊狀區(qū)域中；根據(jù)選擇的定位方式不同，顯示不同的定位方式內(nèi)容，對(duì)于表格定位，有表格的各基本特征參數(shù)設(shè)定表單和創(chuàng)建表格按鈕，各基本特征參數(shù)包括但不限于表格寬度、行列數(shù)、是否使用標(biāo)題、是否使用表頭、是否使用表腳，調(diào)整這些參數(shù)可反映到定位架設(shè)計(jì)區(qū)的表格上，對(duì)于浮動(dòng)定位，有浮動(dòng)方式選擇浮向左或右，對(duì)于絕對(duì)定位，有當(dāng)前定位架用絕對(duì)計(jì)算或相對(duì)計(jì)算選擇。對(duì)設(shè)計(jì)生成程序，有生成場景頁面的數(shù)據(jù)處理種類的選擇，及頁面基本信息設(shè)定，包括但不限于頁面名、標(biāo)題，數(shù)據(jù)處理種類包括增刪改查統(tǒng)計(jì)，還可選擇是否在頁面中根據(jù)處理種類額外生成一個(gè)提交按鈕。

業(yè)務(wù)要素控件在功能上是把業(yè)務(wù)要素與定位架產(chǎn)生的塊狀區(qū)域相關(guān)聯(lián)，關(guān)聯(lián)的業(yè)務(wù)要素信息至少應(yīng)包括業(yè)務(wù)要素名稱和業(yè)務(wù)要素?cái)?shù)據(jù)兩種，業(yè)務(wù)要素與所在的業(yè)務(wù)表或多表聯(lián)合的業(yè)務(wù)模塊的字段對(duì)應(yīng)，業(yè)務(wù)要素名稱與字段中文名稱對(duì)應(yīng)，業(yè)務(wù)要素?cái)?shù)據(jù)與字段標(biāo)識(shí)（字段名）對(duì)應(yīng)，體現(xiàn)數(shù)據(jù)內(nèi)容，通過加載業(yè)務(wù)表或業(yè)務(wù)模塊的字段信息獲取所有的業(yè)務(wù)要素，有一組表單對(duì)各業(yè)務(wù)要素?cái)?shù)據(jù)在該設(shè)計(jì)方案下所需功能使用場景頁面的界面屬性選擇，體現(xiàn)該業(yè)務(wù)要素?cái)?shù)據(jù)在所需功能頁面的外觀，諸如一個(gè)查功能頁面該業(yè)務(wù)要素是否用一個(gè)范圍獲取值或是獲取一個(gè)模糊值等等，可視化操作拖動(dòng)當(dāng)前設(shè)計(jì)所需業(yè)務(wù)要素信息到定位架的塊狀區(qū)域形成特定的標(biāo)記。

界面控件選擇區(qū)在功能上是把系統(tǒng)所能支持的界面控件羅列出來，讓用戶進(jìn)行選擇，由于在自動(dòng)化業(yè)務(wù)設(shè)計(jì)管理系統(tǒng)中，用戶定義業(yè)務(wù)表或業(yè)務(wù)模塊時(shí)，對(duì)該業(yè)務(wù)的各業(yè)務(wù)要素在增刪改查統(tǒng)計(jì)方面都作了界面屬性設(shè)定，這些設(shè)定都落實(shí)在使用它們的界面控件中，因此，當(dāng)復(fù)用界面控件時(shí)，可以使用這些界面屬性信息，也可根據(jù)原有界面屬性集合，對(duì)本設(shè)計(jì)方案作新的設(shè)定。根據(jù)加載業(yè)務(wù)表或業(yè)務(wù)模塊確定使用該界面控件的業(yè)務(wù)，并有一組表單讓用戶選擇當(dāng)前需求下該界面控件各組成部分的顯示或隱藏，也有一組表單讓用戶選擇該業(yè)務(wù)的各業(yè)務(wù)要素在當(dāng)前設(shè)計(jì)下該界面控件中顯示或隱藏，通過可視化操作拖動(dòng)到定位架的塊狀區(qū)域，形成特定的標(biāo)記。

對(duì)于已關(guān)聯(lián)業(yè)務(wù)要素的定位架設(shè)計(jì)區(qū)，可以被看作是一個(gè)適用于當(dāng)前需求的界面控件。對(duì)于塊狀區(qū)域，可以關(guān)聯(lián)一些基本控件，如圖片基本控件或文本基本控件等，它們產(chǎn)生的html描述被直接使用，無需做任何數(shù)據(jù)處理操作。

設(shè)計(jì)生成程序功能上把各設(shè)計(jì)組件的設(shè)計(jì)信息保存到數(shù)據(jù)庫或者文件，供修改維護(hù)使用，并產(chǎn)生設(shè)計(jì)方案。根據(jù)產(chǎn)生時(shí)使用帶特定標(biāo)記的html描述展開的時(shí)機(jī)的不同，有兩種實(shí)現(xiàn)方式：一種是在生成所需功能頁面前端代碼時(shí)展開特定標(biāo)記，該頁面前端代碼具有完整html代碼，不含標(biāo)記，一種是生成簡單前端的頁面，該頁面加載時(shí)獲取帶標(biāo)記的html描述并展開并添加在頁面中。展開特定標(biāo)記是獲取對(duì)應(yīng)的html描述，把其中特定的標(biāo)記在該使用場景下進(jìn)行外觀界面解析，用相應(yīng)的界面控件的正常調(diào)用方式取代標(biāo)記或根據(jù)所需場景用正確基本控件取代標(biāo)記，最終使得業(yè)務(wù)要素信息得以按已設(shè)定的界面屬性進(jìn)行展示。若所需場景是增刪改統(tǒng)計(jì)使用場景且使用了業(yè)務(wù)要素控件進(jìn)行業(yè)務(wù)要素信息標(biāo)記，那么根據(jù)設(shè)計(jì)參數(shù)配置區(qū)用戶根據(jù)所需場景選擇是否生成多一個(gè)提交按鈕，若是，按鈕點(diǎn)擊事件數(shù)據(jù)接口與這個(gè)提交按鈕關(guān)聯(lián)，在該數(shù)據(jù)接口中調(diào)用配屬的數(shù)據(jù)處理功能完成增刪改統(tǒng)計(jì)，所有場景頁面都注冊(cè)有頁面加載事件數(shù)據(jù)接口，加載場景時(shí)對(duì)其中的界面控件進(jìn)行入口函數(shù)調(diào)用，對(duì)刪改查場景頁面中該數(shù)據(jù)接口調(diào)用配屬的查數(shù)據(jù)功能獲取對(duì)應(yīng)數(shù)據(jù)進(jìn)行展示。對(duì)于頁面的后端代碼，由于數(shù)據(jù)處理功能已配屬，所以只需包含但不限于加載時(shí)的登錄狀態(tài)檢測及權(quán)限檢測即可。

舉例說明：

某個(gè)Asp.net平臺(tái)實(shí)施的自動(dòng)化業(yè)務(wù)設(shè)計(jì)管理系統(tǒng)是一個(gè)有配屬數(shù)據(jù)處理功能的信息化管理系統(tǒng)，HTML界面控件貼是它的一個(gè)頁面設(shè)計(jì)工具。在本實(shí)施例中，對(duì)業(yè)務(wù)表或業(yè)務(wù)模塊已有的配屬數(shù)據(jù)處理功能，實(shí)體是業(yè)務(wù)表或模塊的實(shí)體類在增刪改查統(tǒng)計(jì)的功能函數(shù)，已被動(dòng)態(tài)編譯，根據(jù)固定的調(diào)用地址傳遞不同的實(shí)體類標(biāo)識(shí)(業(yè)務(wù)標(biāo)識(shí))和數(shù)據(jù)記錄標(biāo)識(shí)及處理種類，確定調(diào)用那個(gè)業(yè)務(wù)或該業(yè)務(wù)中那條記錄或進(jìn)行那種處理。本例的HTML界面控件貼設(shè)計(jì)工具是一個(gè)分成3列頁面，第一列的上部分是設(shè)計(jì)參數(shù)配置區(qū)域，下部分是界面控件選擇區(qū)域，第二列是設(shè)計(jì)主體定位架設(shè)計(jì)區(qū)域，第三列是業(yè)務(wù)要素控件。

設(shè)計(jì)參數(shù)配置區(qū)域，基本操作有提交設(shè)計(jì)按鈕、保存草稿按鈕、導(dǎo)入草稿按鈕。保存草稿把所有區(qū)域的信息都收集起來作為一個(gè)數(shù)組對(duì)象提交到后臺(tái)進(jìn)行文本加密后傳回前端下載保存，供下次修改維護(hù)使用。導(dǎo)入草稿按鈕是逆運(yùn)算，把加密的文件提交到后臺(tái)進(jìn)行文本解密后傳遞到前端，對(duì)前端各區(qū)域各設(shè)計(jì)參數(shù)進(jìn)行賦值，恢復(fù)現(xiàn)場繼續(xù)設(shè)計(jì)。提交設(shè)計(jì)擁有保存草稿的功能，并且把定位架設(shè)計(jì)區(qū)的html描述保存在數(shù)據(jù)庫的界面控件貼設(shè)計(jì)稿表中，本例的提交設(shè)計(jì)采用使用時(shí)加載html描述才展開，因此，在生成的頁面前端代碼中導(dǎo)入使用的界面控件的js文件及相關(guān)的css文件，注冊(cè)頁面onload事件，事件中調(diào)用獲取界面控件貼設(shè)計(jì)稿表對(duì)應(yīng)的設(shè)計(jì)稿，進(jìn)行展開。HTML界面控件特定標(biāo)記采用自定義HTML標(biāo)簽的方式與界面控件一一配對(duì)，所以獲取的html描述可直接插入頁body中，對(duì)所有的自定義標(biāo)簽進(jìn)行匹配，用界面控件的正常調(diào)用的HTML描述取代界面控件特定標(biāo)記，取代后分別對(duì)每一個(gè)使用的界面控件調(diào)用其入口函數(shù)，界面控件選擇區(qū)域中設(shè)定的業(yè)務(wù)標(biāo)識(shí)及業(yè)務(wù)要素顯示和界面控件組件顯示信息作為參數(shù)傳入，界面控件內(nèi)部根據(jù)這些參數(shù)進(jìn)行顯示控制。業(yè)務(wù)要素?cái)?shù)據(jù)信息使用特定標(biāo)記（標(biāo)記包括對(duì)應(yīng)的字段名），展開時(shí)，對(duì)于刪查統(tǒng)計(jì)場景中的數(shù)據(jù)展示，用字段名為id的label元素取代，并賦值數(shù)據(jù)內(nèi)容，對(duì)于增改場景，若沒有指定的使用其他基本控件的界面屬性，那么默認(rèn)使用單行輸入input元素作為基本控件取代。展開算法實(shí)現(xiàn)函數(shù)放在js文件中在頁頭部加載。有輸入生成頁面的名稱的表單。根據(jù)名稱，生成頁面的后端代碼，是系統(tǒng)頁面通用的登陸超時(shí)和權(quán)限檢查代碼。對(duì)生成的前端代碼，輸出指定名稱的aspx文件在自定義的mydesign目錄，后端代碼動(dòng)態(tài)編譯后生成dll文件放置在bin目錄。

設(shè)計(jì)參數(shù)配置區(qū)域有對(duì)當(dāng)前的定位架定位方式的單選下拉框，選定后出現(xiàn)具體定位方式下的參數(shù)配置表單。對(duì)于表格定位方式，有創(chuàng)建表格按鈕（創(chuàng)建后或加載草稿已有表格情況下隱藏）、表格寬度設(shè)置（數(shù)值）輸入框、表格寬度單位設(shè)置（本例支持px和%）輸入框、行數(shù)輸入框、列數(shù)輸入框、是否使用標(biāo)題多選框、是否使用表頭多選框、是否使用表腳多選框。點(diǎn)擊創(chuàng)建表格按鈕出現(xiàn)一個(gè)對(duì)話框，對(duì)話框表單也有這些表格參數(shù)的值設(shè)定，作為創(chuàng)建表格的初始值提交在定位架設(shè)計(jì)區(qū)生成基本表格，本例的表格采用fixed布局和頁面居中顯示，數(shù)值賦值給設(shè)計(jì)參數(shù)配置區(qū)的對(duì)應(yīng)的表格參數(shù)表單元素。設(shè)計(jì)參數(shù)配置區(qū)的對(duì)應(yīng)的表格參數(shù)表單元素各自綁定onchange事件，對(duì)定位架的表格操作：行（列）數(shù)調(diào)整從最后一行（列）開始增刪；是否使用標(biāo)題多選框調(diào)整標(biāo)題的顯示或隱藏；是否使用表頭多選框調(diào)整表頭的顯示或隱藏；是否使用表腳多選框調(diào)整表腳的顯示或隱藏；表格寬度及寬度單位調(diào)整表格的寬度屬性。對(duì)于浮動(dòng)定位，有選擇浮向左或右的單選下拉框，該控件綁定onchange事件對(duì)定位架內(nèi)所有的作為塊狀區(qū)域使用的div的浮動(dòng)方式進(jìn)行變更，也有頁面居中顯示區(qū)域的寬度設(shè)置輸入框和寬度單位設(shè)置。對(duì)于絕對(duì)定位，有選擇當(dāng)前定位架用的方式是絕對(duì)還是相對(duì)定位的單選下拉框。

設(shè)計(jì)參數(shù)配置區(qū)域有回退操作按鈕和重復(fù)操作按鈕。定位架設(shè)計(jì)區(qū)域有個(gè)固定大?。ū纠秊?0）的隊(duì)列，每個(gè)操作得到的html描述都會(huì)被入隊(duì)列，當(dāng)需要回退時(shí)，取出上一個(gè)html描述覆蓋當(dāng)前設(shè)計(jì)區(qū)達(dá)到恢復(fù)原狀的效果，當(dāng)需要重復(fù)時(shí)，取出下一個(gè)html描述覆蓋當(dāng)前設(shè)計(jì)區(qū)達(dá)到重做的效果。

定位架設(shè)計(jì)區(qū)域是設(shè)計(jì)主體，采用可視化操作的方式進(jìn)行設(shè)計(jì)。

對(duì)于表格定位，表格的標(biāo)題區(qū)域和表頭表體表腳單元格注冊(cè)鼠標(biāo)右鍵菜單功能。標(biāo)題的右鍵菜單項(xiàng)有自由調(diào)整高度、嵌套設(shè)計(jì)、清空標(biāo)題、界面控件。自由調(diào)整高度是把標(biāo)題區(qū)所在的塊狀區(qū)域轉(zhuǎn)換頁面遮罩層中用拉斐爾插件以遮罩層為畫布的該塊狀區(qū)域位置大小的矩形圖形，轉(zhuǎn)換關(guān)系利用標(biāo)題相對(duì)于頁面左上角的left和top屬性計(jì)算以遮罩層大小為畫布的矩形位置關(guān)系，畫布與矩形的產(chǎn)生使用拉斐爾畫圖js工具，在矩形的下底邊中間有一個(gè)調(diào)整小矩形，上下拖動(dòng)矩形的高的drag事件中調(diào)整標(biāo)題的height屬性，確定用鍵盤的Enter鍵銷毀畫布和遮罩層，并把結(jié)果入操作隊(duì)列，取消用鍵盤的Esc鍵通過獲取操作隊(duì)列的回退操作恢復(fù)原來的高，達(dá)到隨意操控表格標(biāo)題區(qū)域的效果。嵌套設(shè)計(jì)是在新頁面打開新的HTML界面控件貼，在頁面地址get方式傳遞新的定位架設(shè)計(jì)區(qū)域的width和height數(shù)值，局限為標(biāo)題區(qū)域大小，新html界面控件貼的所有設(shè)計(jì)寬度的設(shè)定均隱藏不可設(shè)置，且提交代碼按鈕的功能是向父頁面opener的指定塊狀區(qū)域（實(shí)現(xiàn)上可以在選擇嵌套設(shè)計(jì)菜單時(shí)保存事件源元素）插入新頁面產(chǎn)生的html元素組合，與原界面控件貼功能不一致的功能通過判斷是否具有width和height的get方式參數(shù)進(jìn)行分支，分別實(shí)現(xiàn)。清空標(biāo)題就是把標(biāo)題區(qū)域的html元素組合全部刪除。界面控件是對(duì)標(biāo)題區(qū)內(nèi)部的界面控件進(jìn)行設(shè)置，預(yù)置了各支持的界面控件的各組件顯示和隱藏操作項(xiàng)。單元格的右鍵菜單項(xiàng)有行單元格合并、列單元格合并、上添加行、下添加行、左添加單元格、右添加單元格、刪除選中行、刪除選中單元格、清空單元格內(nèi)容、自由變換行距、自由變換列寬、背景色設(shè)置、文本顏色設(shè)置、對(duì)齊方式設(shè)置、嵌套設(shè)計(jì)、界面控件。表格的單元格支持鼠標(biāo)左鍵點(diǎn)擊拖動(dòng)選中，選中的狀態(tài)通過一個(gè)特定的背景色#3BB5FF表示，，再次點(diǎn)擊清除上次選中的單元格（背景色恢復(fù)#FFF）進(jìn)入新一輪拖動(dòng)選中，而且每次只能選中表頭表體表腳中的一種單元格。菜單項(xiàng)操作函數(shù)若涉及設(shè)計(jì)參數(shù)配置區(qū)域中表格的參數(shù)，需要根據(jù)操作結(jié)果更新參數(shù)值。行單元格合并，按行對(duì)單元格進(jìn)行檢測，若行中有單元格選中，那么第一個(gè)選中單元格的rowspan和colspan數(shù)值為基數(shù)（屬性未定義設(shè)為1），該行的其他選中單元格必須與第一個(gè)選中單元格連續(xù)，否則報(bào)不連續(xù)錯(cuò)誤無法合并，該行的其他選中單元格的rowspan屬性必須與第一個(gè)選中的單元格的rowspan相同，否則報(bào)rowspan基數(shù)不一致錯(cuò)誤無法合并，對(duì)該行的其他選中單元格的colspan數(shù)值匯總，加上colspan基數(shù)就是合并后的單元格colspan數(shù)值，把該行的其他選中單元格刪除。上添加行，在選中的單元格的第一個(gè)所在行前根據(jù)設(shè)計(jì)參數(shù)配置區(qū)域表格的列數(shù)添加一行。下添加行，在選中的單元格的最后一行后根據(jù)設(shè)計(jì)參數(shù)配置區(qū)域表格的列數(shù)添加一行。左添加單元格，在選中的單元格的左邊添加單元格。右添加單元格，在選中的單元格的右邊添加單元格。刪除選中行，檢查選中單元格的個(gè)數(shù)，若選中單元格個(gè)數(shù)大于1個(gè)，報(bào)不支持錯(cuò)誤，只支持1個(gè)單元格選中，獲取其rowspan值和colspan值，獲取選中單元格的所在位置因colspan原因的真正排列列數(shù)，若選中單元格的rowspan值大于0，那么需要對(duì)以下因rowspan涉及的行進(jìn)行補(bǔ)償，首先根據(jù)colspan值確定對(duì)刪除該選中單元格以下行要補(bǔ)償?shù)牧袛?shù)，找到相等于所選單元格真正排列列數(shù)的單元格，在之前插入補(bǔ)償?shù)牧?，補(bǔ)償完所有的行，刪除選中單元格所在的行，若選中單元格的rowspan值未設(shè)置，直接刪除選中單元格所在的行。刪除選中單元格，對(duì)每一行進(jìn)行檢測，統(tǒng)計(jì)該行選中的單元格數(shù)，如果小于該行的總單元格數(shù)，直接刪除選中的單元格，不需考慮rowspan和colspan，如果等于該行的總單元格數(shù)，報(bào)不能刪除整行的錯(cuò)誤。清空單元格內(nèi)容，刪除單元格內(nèi)的所有元素。自由變換行距，獲取選中單元格所在行相對(duì)與頁面左上角的top和left屬性，建立一個(gè)遮罩層，覆蓋全頁面，使用拉斐爾畫圖插件，把遮罩層建立畫布，在所在行的位置建立一個(gè)和所在行一樣位置大小的矩形，并在下底邊中心建立一個(gè)調(diào)整矩形，注冊(cè)拖動(dòng)事件，把矩形的位置信息轉(zhuǎn)換為行矩形的高度變化，注冊(cè)按鍵事件，回車鍵刪除畫布及遮罩層，esc鍵調(diào)用操作隊(duì)列回退操作，回復(fù)原行高度，刪除遮罩層。自由變換列寬，只支持表頭單元格，建立一個(gè)遮罩層，覆蓋全頁面，使用拉斐爾畫圖插件，把全頁面建立畫布，在所在表頭單元格的位置建立一個(gè)和所在表頭單元格一樣大小的矩形，并在左右邊中心各建立一個(gè)調(diào)整矩形，注冊(cè)拖動(dòng)事件，把矩形的位置信息轉(zhuǎn)換為表頭單元格的寬度變化，注冊(cè)按鍵事件，回車鍵刪除畫布及遮罩層，esc鍵調(diào)用操作隊(duì)列回退操作，回復(fù)原單元格寬度，刪除遮罩層。背景色設(shè)置、文本顏色設(shè)置、對(duì)齊方式設(shè)置對(duì)單元格等進(jìn)行css操作。嵌套設(shè)計(jì)，對(duì)選中的單元格塊狀區(qū)域進(jìn)行嵌套設(shè)計(jì)，獲取選中塊狀區(qū)域的寬高，作為參數(shù)打開新HTML界面控件貼設(shè)計(jì)工具頁面。界面控件是對(duì)單元格內(nèi)部的界面控件進(jìn)行設(shè)置，預(yù)置了各支持的界面控件的各組件顯示和隱藏操作項(xiàng)。

對(duì)于浮動(dòng)定位和絕對(duì)定位，需要用到畫圖基本控件，畫圖基本控件使用拉斐爾插件，浮動(dòng)定位的畫布大小是頁面居中顯示區(qū)域大小在定位架設(shè)計(jì)區(qū)的居中同大小的區(qū)域，絕對(duì)定位的畫布大小是定位架設(shè)計(jì)區(qū)大小的區(qū)域，畫圖基本控件使用鼠標(biāo)左鍵拖動(dòng)方式產(chǎn)生矩形，單擊可選中矩形，選中后可拖動(dòng)放置在畫布任何地方，但不可與其他矩形交疊，判斷不交疊的算法是本矩形的四個(gè)頂點(diǎn)都不在其他矩形中及其他矩形的四個(gè)頂點(diǎn)都不在本矩形內(nèi)。對(duì)于嵌套設(shè)計(jì)的畫圖基本控件的畫布是相應(yīng)的寬高參數(shù)的區(qū)域。

對(duì)于浮動(dòng)定位和絕對(duì)定位，產(chǎn)生的塊狀區(qū)域div的右鍵菜單項(xiàng)有背景色設(shè)置、文本顏色設(shè)置、對(duì)齊方式設(shè)置、作為圖片容器、作為文本容器、嵌套設(shè)計(jì)、界面控件。背景色設(shè)置、文本顏色設(shè)置、對(duì)齊方式設(shè)置、嵌套設(shè)計(jì)、界面控件同表格定位方式。作為圖片容器，調(diào)用上傳圖片控件，產(chǎn)生img元素，它的source就是上傳圖片后圖片的地址。作為文本容器，彈出一個(gè)對(duì)話框?qū)樱瑑?nèi)有輸入表單，獲取文字信息，對(duì)話框的確定按鈕點(diǎn)擊產(chǎn)生一個(gè)label元素，它的text就是設(shè)置的文本。

對(duì)塊狀區(qū)域div、表格標(biāo)題、各單元格注冊(cè)拖放事件，對(duì)拖動(dòng)類型是label元素的，添加一個(gè)自定義屬性xrjfactor，屬性值為name，產(chǎn)生label元素的html描述，對(duì)拖動(dòng)類型為input元素的，添加一個(gè)自定義屬性xrjfactor，屬性值為data，產(chǎn)生input元素的html描述的特定標(biāo)記，對(duì)拖動(dòng)類型為li元素的，添加一個(gè)自定義屬性interface，屬性值為界面控件名，另一個(gè)自定義屬性xrjcrudid，屬性值為業(yè)務(wù)表或模塊的標(biāo)識(shí)id，產(chǎn)生一個(gè)同li元素屬性的自定義屬性xx的html描述的特定標(biāo)記。

業(yè)務(wù)要素控件區(qū)域，有一個(gè)加載業(yè)務(wù)表或模塊的加載按鈕，點(diǎn)擊后彈出對(duì)話框，對(duì)話框有一個(gè)選擇業(yè)務(wù)表和模塊的選擇列表，確定后提交，后臺(tái)根據(jù)所選的業(yè)務(wù)表或模塊的id，獲取相應(yīng)的業(yè)務(wù)要素信息，本例只獲取必要的業(yè)務(wù)要素中文名稱和業(yè)務(wù)要素?cái)?shù)據(jù)信息（業(yè)務(wù)要素對(duì)應(yīng)表字段的名稱，英文），業(yè)務(wù)表或模塊的標(biāo)識(shí)id用一個(gè)隱藏input裝載，業(yè)務(wù)表或模塊的名稱用一個(gè)文本控件展示，業(yè)務(wù)要素中文名稱和業(yè)務(wù)要素?cái)?shù)據(jù)信息用一個(gè)列表ul展示，每一項(xiàng)li用包括label元素的中文名文本和id為字段英文名的input元素。兩種元素均注冊(cè)拖動(dòng)事件，支持拖動(dòng)。注冊(cè)input元素點(diǎn)擊事件，可以彈出一對(duì)話框，對(duì)該業(yè)務(wù)要素在本設(shè)計(jì)中的界面屬性進(jìn)行設(shè)置。

業(yè)務(wù)要素控件在增場景需求中，在業(yè)務(wù)要素控件的業(yè)務(wù)要素在本設(shè)計(jì)中的界面屬性備選項(xiàng)有屬于驗(yàn)證屬性的是否必填、是否是郵件、是否為網(wǎng)絡(luò)地址、是否為數(shù)值、是否為整數(shù)、內(nèi)容與指定控件同（有1個(gè)附屬參數(shù)，收錄指定控件的id）、擴(kuò)展名限定（有1個(gè)附屬參數(shù)，收錄用|分割的擴(kuò)展名）、最大長度（有1個(gè)附屬參數(shù)，收錄字符串最大長度）、最小長度（有1個(gè)附屬參數(shù)，收錄字符串最小長度）、長度范圍（有2個(gè)附屬參數(shù)，收錄字符串最小和最大長度）、數(shù)值范圍（有2個(gè)附屬參數(shù)，收錄數(shù)字最小和最大值）、最大數(shù)值（有1個(gè)附屬參數(shù)，收錄數(shù)字最大值）、最小數(shù)值（有1個(gè)附屬參數(shù)，收錄數(shù)字最小值），驗(yàn)證工具使用jquery的validate控件，因此在把業(yè)務(wù)要素取代特定標(biāo)記時(shí)在輸入基本控件中有相關(guān)的屬性：是否必填（required）、是否是郵件（email=”true”）、是否為網(wǎng)絡(luò)地址（url=”true”）、 是否為數(shù)值（number=”true”）、是否為整數(shù)（digits=”true”）、內(nèi)容與指定控件同（equalTo=” 收錄指定控件的id”）、擴(kuò)展名限定（extension=”收錄用|分割的擴(kuò)展名”）、最大長度（maxlength=”字符串最大長度”）、 最小長度（minlength=”字符串最小長度”）、長度范圍（rangelength=”[字符串最小長度, 字符串最大長度]”）、數(shù)值范圍（range=”[數(shù)字最小值, 數(shù)字最大值]”）、最大數(shù)值（max=”數(shù)字最大值”）、最小數(shù)值（min=”收錄數(shù)字最小值”）。備選項(xiàng)有屬于數(shù)據(jù)屬性的圖片上傳（本字段存放圖片的地址，多圖片用分號(hào)分割）、附件上傳（本字段存放附件的地址，多附件用分號(hào)分割）、視頻上傳（本字段存放視頻的地址，多視頻用分號(hào)分割）、Textarea編寫（用textarea元素取代默認(rèn)的單行input元素）、日期（采用日期控件進(jìn)行賦值）、日期時(shí)間（采用日期時(shí)間控件進(jìn)行賦值），用戶根據(jù)需求選擇界面屬性，對(duì)有附屬參數(shù)的，根據(jù)實(shí)際情況錄入，完成表單后，提交保存在界面控件貼業(yè)務(wù)要素界面屬性關(guān)系表中；刪場景本例沒有界面屬性關(guān)聯(lián)，對(duì)于刪場景中的業(yè)務(wù)要素信息的展示數(shù)據(jù)與界面屬性獲取接口同查場景功能一樣，但業(yè)務(wù)數(shù)據(jù)標(biāo)識(shí)本例設(shè)定從地址的get方式獲取參數(shù)id，另外可選地提供多一個(gè)刪除提交按鈕，用于調(diào)用該業(yè)務(wù)的指定數(shù)據(jù)記錄標(biāo)識(shí)的刪除處理；改場景的界面屬性使用增場景的界面屬性；查場景在本例中沒有界面屬性關(guān)聯(lián)，通過從地址的get方式獲取參數(shù)id作為業(yè)務(wù)數(shù)據(jù)記錄標(biāo)識(shí)，調(diào)用數(shù)據(jù)獲取接口得到數(shù)據(jù)，對(duì)各業(yè)務(wù)要素的數(shù)據(jù)容器label元素賦值，進(jìn)行展示；統(tǒng)計(jì)場景在本例的實(shí)現(xiàn)中需要使用grid界面控件的查詢組件，界面控件的備選項(xiàng)有數(shù)據(jù)屬性的最大值、最小值、求和、計(jì)數(shù)，在制作統(tǒng)計(jì)場景界面時(shí)，使用grid界面控件，可選屏蔽表格組件、按鈕區(qū)、分頁區(qū)，所需的業(yè)務(wù)要素的數(shù)據(jù)容器使用label元素，可選使用統(tǒng)計(jì)提交按鈕，該按鈕提交grid界面控件的查詢組件form中的表單內(nèi)容，經(jīng)過統(tǒng)計(jì)處理返回的統(tǒng)計(jì)數(shù)值賦值給對(duì)應(yīng)的label元素。

界面控件選擇區(qū)，是一個(gè)列表，li列表項(xiàng)是界面控件的名字文本，li元素注冊(cè)拖動(dòng)事件，支持拖動(dòng)。界面控件有g(shù)rid界面控件（名：grid）、新增界面控件（名：add）。Grid界面控件組成部件有查詢條件區(qū)（search）、按鈕區(qū)（button）、表格數(shù)據(jù)展示區(qū)（show）、分頁區(qū)（page），在各塊狀區(qū)域的右鍵菜單的界面控件菜單中有這4個(gè)部件的隱藏及顯示操作項(xiàng)，隱藏操作為xx自定義元素增加一個(gè)自定義屬性hiddenzone，屬性值為各區(qū)的名字，多選用,分隔，顯示操作為xx自定義元素刪除自定義屬性hiddenzone的對(duì)應(yīng)屬性值。li元素注冊(cè)點(diǎn)擊事件，事件中根據(jù)業(yè)務(wù)要素控件加載的業(yè)務(wù)id獲取所有業(yè)務(wù)要素，在一個(gè)彈出對(duì)話框中對(duì)各業(yè)務(wù)要素進(jìn)行顯示或隱藏決定，結(jié)果保存在界面控件和設(shè)計(jì)方案及業(yè)務(wù)要素配對(duì)表中。本例使用界面控件的已設(shè)界面屬性。

設(shè)計(jì)生成程序功能在本例中采用生成簡單前端的頁面，該頁面加載時(shí)獲取帶標(biāo)記的html描述并展開并添加在頁body中。展開特定標(biāo)記是獲取保存在數(shù)據(jù)庫中的html描述，插入到頁面body，對(duì)于xx自定義元素的界面控件，獲取其自定義屬性，得到業(yè)務(wù)id、所用那個(gè)界面控件、那個(gè)屬性需要隱藏，這些是調(diào)用界面控件的所需參數(shù)，把xx元素刪除，把正常使用界面控件的html描述添加到該塊狀區(qū)域中。對(duì)于grid界面控件就是<div id=’crud業(yè)務(wù)id值’></div>，注冊(cè)頁面的onload事件，在該事件處理代碼上添加$(‘# crud業(yè)務(wù)id值’).grid(業(yè)務(wù)id值，是否隱藏查詢區(qū)，是否隱藏按鈕區(qū)，是否隱藏?cái)?shù)據(jù)展示區(qū)，是否隱藏分頁區(qū))，那么在加載完頁面就會(huì)調(diào)用界面控件的入口函數(shù)了。對(duì)于刪改查場景，onload事件中要獲取頁面的get方式參數(shù)id，該參數(shù)若存在，是對(duì)應(yīng)業(yè)務(wù)的記錄id，異步調(diào)用數(shù)據(jù)處理功能地址，調(diào)用功能種類（查）和業(yè)務(wù)id作為get方式參數(shù)傳入，記錄id以post方式傳遞，獲取該記錄的數(shù)據(jù)，在頁面中顯示。根據(jù)設(shè)計(jì)參數(shù)配置區(qū)用戶根據(jù)所需場景選擇是否生成多一個(gè)提交按鈕，如果是，那么本例對(duì)于增刪改的展開的html還要外套一個(gè)form表單，在onload處理事件中代碼添加jquery.valid插件的使用代碼（使用form表單id），統(tǒng)計(jì)場景使用了grid的查詢條件區(qū)form。還有注冊(cè)提交按鈕的點(diǎn)擊事件代碼，事件代碼用jquery異步ajax調(diào)用所需的場景功能地址，調(diào)用功能種類和業(yè)務(wù)id作為get方式參數(shù)傳入，對(duì)于刪改功能，記錄id值作為post方式傳入，對(duì)于統(tǒng)計(jì)功能，統(tǒng)計(jì)條件作為post參數(shù)傳入。后端的cs文件中，代碼是通用的檢查登陸超時(shí)，權(quán)限檢查代碼。后端代碼動(dòng)態(tài)編譯成dll文件，放在bin目錄。前端代碼放在約定的位置。

按照所用的自動(dòng)化業(yè)務(wù)設(shè)計(jì)管理系統(tǒng)實(shí)現(xiàn)的菜單權(quán)限方式配置新設(shè)計(jì)的頁面給用戶，該用戶在菜單中點(diǎn)擊，就可以按設(shè)計(jì)流程加載頁面，使用設(shè)定的增刪改查統(tǒng)計(jì)功能。

以上所述，僅為本發(fā)明的較佳實(shí)施例而已，并非用于限定本發(fā)明的保護(hù)范圍。