Web應(yīng)用開發(fā)的利器 – WebBuilder 6.5正式版本發(fā)布 

        2012年9月，WebBuilder 6.5 正式版本終于發(fā)布。新版本的 WebBuilder 使用了多項(xiàng)最新的技術(shù)，使開發(fā) Web 應(yīng)用的開發(fā)更快捷和簡單。 

        WebBuilder是一款跨平臺、數(shù)據(jù)庫和瀏覽器的可視化Web應(yīng)用開發(fā)平臺。WebBuilder使用了多項(xiàng)最新的技術(shù)，使Web應(yīng)用的開發(fā)更快捷和簡單。 

        作為一款高效的Web開發(fā)工具，WebBuilder的特色是: 

        .基于瀏覽器的集成開發(fā)環(huán)境. 

        .豐富的組件庫和框架. 

        .開發(fā)應(yīng)用簡單快速. 

        .高效率和高穩(wěn)定性. 

        .跨平臺、數(shù)據(jù)庫和瀏覽器. 

        .服務(wù)器端的腳本支持. 

        .智能的數(shù)據(jù)庫訪問機(jī)制. 

        使用WebBuilder可開發(fā)ERP、OA、CRM、HR、MIS以及電信、銀行、政府、企業(yè)等各行業(yè)的行業(yè)應(yīng)用系統(tǒng)，幫助信息化管理系統(tǒng)的快速構(gòu)建。完善的基礎(chǔ)架構(gòu)，具有應(yīng)用系統(tǒng)必須的完整功能，使系統(tǒng)的開發(fā)僅需致力于業(yè)務(wù)的開發(fā)。使用WebBuilder可快速開發(fā)出功能強(qiáng)大的各種企業(yè)級應(yīng)用系統(tǒng)，也可以基于應(yīng)用系統(tǒng)平臺做深度的二次開發(fā)。 

        您可以到 在線使用或下載到本地使用，軟件開源基于GPL協(xié)議授權(quán)。 

        WebBuilder 教程 

        WebBuilder提供了方便快捷的組件，便于直接使用，只需要通過設(shè)定組件屬性即可完成

        設(shè)置，不需進(jìn)行代碼編寫。同時(shí)對于窗體提供可視化設(shè)計(jì)。 

        主要組件包括: 

        1 常用組件 

        圖表容器 默認(rèn)值 

        圖表內(nèi)容 2 輔助組件 

        下拉樹木 驗(yàn)證器 

        樹列表 異常觸發(fā)器 

        動(dòng)作 雙重列表 

        3 標(biāo)準(zhǔn)組件 

        從左到右邊:文件，內(nèi)置框架，DIV塊，表單，腳本，標(biāo)簽，編輯框，按鈕，圖像，列表，

        flash,鏈接，定時(shí)器 

        對以上組件在詳解中如有沒有描述的 ，請參考Extjs API中組件信息。 

        第一章 Body文檔體 

        Body 文檔體是對整個(gè)應(yīng)用常規(guī)信息的封裝，用于描述整個(gè)應(yīng)用的基本屬性。 

        第二章 ViewPort顯示容器 

        基于瀏覽器對象的顯示容器，顯示區(qū)域?yàn)檎麄€(gè)瀏覽器客戶區(qū)。ViewPort組件是對Ext中的Viewport組件的封裝。 

        組件的使用: 

        該組件僅作為容器使用，通常情況下需要全屏顯示的應(yīng)用，可使用該組件作為頂層容器。 可通過設(shè)置該組件layout屬性來設(shè)置頁面的各種布局。 

        注意 該組件不能嵌套使用，如需嵌套布局，請使用panel組件。 

        第三章 Panel面板 面板是最常用的容器，用于構(gòu)建面向應(yīng)用的用戶界面; 

        組件的使用: 

        面板的作用非常廣泛:可作為組件的容器;可以作為布局容器使用;可以作為裝飾或功能性

        地使用，比如在tbar添加工具條等。 

        第四章 面板布局 

        4.1 布局概述 

        Panel 的另外主要用途是利用其layout屬性進(jìn)行完美布局。 

        所謂布局就是指容器組件中子元素的分布、排列組合方式。所有容器組件都支持布局操作，每一個(gè)容器都會有一個(gè)對應(yīng)的布局，布局負(fù)責(zé)管理容器組件中子元素的排列、組合及渲染方式等。 

        Panel組件包含一個(gè)layout 及l(fā)ayoutConfig 配置屬性，這兩個(gè)屬性用來指定容器使用的布局及布局的詳細(xì)配置信息，如果沒有指定容器組件的layout 則默認(rèn)會使用ContainerLayout 作為布局，該布局只是簡單的把元素放到容器中，有的布局需要layoutConfig 配置，有的則不需要layoutConfig 配置。 

        viewport 是一個(gè)容器組件，我們使用viewport 指定 在viewport創(chuàng)建了兩個(gè)面板Panel，

        該面板使用Column 布局。該面板的子元素是兩個(gè)面板，這兩個(gè)面板都包含了一個(gè)與列布局相關(guān)的配置參數(shù)屬性Width，他們的值都是50%，也就是每一個(gè)面板占一半的寬度。執(zhí)行上面的程序生成如下圖所示的結(jié)果: 

        一些容器組件都已經(jīng)指定所使用的布局，比如TabPanel使用card布局、 FormPanel使用form布局，GridPanel中的表格使用column布局等，我們在使用這些組件的 時(shí)候，不能給這些容器組件再指定另外的布局。 

        常用的布局有border、column、fit、form、card、tabel等布局，下面我們分別對這幾種布局作簡單的介紹。 

        4.2 Border 區(qū)域布局 

        Border 布局由類Ext.layout.BorderLayout定義，布局名稱為border。該布局把容器分成東南西北中五個(gè)區(qū)域，分別由east，south, west，north, cente來表示，在往容器中添加子元素的時(shí)候，我們只需要指定這些子元素所在的位置，Border布局會自動(dòng)把子元素放到布局指定的位置。 

        4.2 Column列布局 

        Column 列布局由Ext.layout.ColumnLayout 類定義，名稱為column。列布局把整個(gè)容器 組件看成一列，然后往里面放入子元素的時(shí)候，可以通過在子元素中指定使用width 來指定子元素所占的列寬度，可以使用百分比的形式指定列寬度，或者使用絕對象素的方式指定列寬度，在實(shí)際應(yīng)用中可以混合使用兩種方式。  

        設(shè)定各組件的屬性:  

        4.3 Fit布局 

        Fit布局由Ext.layout.fitLayout 類定義，名稱為fit。fit布局把整個(gè)容器 組件看成一列，然后往里面放入子元素的時(shí)候，可以通過在子元素中指定使用width 來指定子元素所占的列寬度，可以使用百分比的形式指定列寬度，或者使用絕對象素的方式指定列寬度，在實(shí)際應(yīng)用中可以混合使用兩種方式。  

        4.4 Form布局 

        Form 布局由類Ext.layout.FormLayout 定義，名稱為form，是一種專門用于管理表單中 輸入字段的布局，這種布局主要用于在程序中創(chuàng)建表單字段或表單元素等使用。   

        4.5 Accordion布局 

        Accordion 布局由類Ext.layout.Accordion 定義，名稱為accordion，表示可折疊的布局，也就是說使用該布局的容器組件中的子元素是可折疊的形式。  

        4.6 Table布局及其它布局 

        Table 布局由類Ext.layout.TableLayout 定義，名稱為table，該布局負(fù)責(zé)把容器中的子元素按照類似普通html 標(biāo)簽.  

        上面創(chuàng)建了一個(gè)父容器組件，指定使用Table 布局，layoutConfig 使用columns 指定父容器分成3 列，子元素中使用rowspan 或colspan 來指定子元素所橫跨的單元格數(shù)。

        這些布局主要作為其它布局的基類使用，一般情況下我們不會在應(yīng)用中直接使用。另外，我們也可以繼承10 種布局類的一種，來實(shí)現(xiàn)自定義的布局。 

        第五章 Window窗口 可以移動(dòng)和交互的界面顯示容器。 

        組件的使用: 

        窗口即可以用作對話框，也可以用作顯示的容器。通常窗口以模式對話框使用，系統(tǒng)默認(rèn)的窗口樣式為隱藏的模式對話框。 

        如果要自動(dòng)顯示窗口，設(shè)置autoShow屬性為true;如果設(shè)置為非對話框，設(shè)置dialog為false; 窗口為對話框時(shí)，可編寫onOk事件來表示點(diǎn)擊確定按鈕執(zhí)行的事件。 可以在窗口的onHide事件使用extResetAllControlsValue("window")來重置窗口內(nèi)組件的值。 

        第六章 對話框窗口 

        由于傳統(tǒng)使用alert、confirm 等方法產(chǎn)生的對話框非常古板，不好看。因此，ExtJS 提供了一套非常漂亮的對話框，可以使用這些對話框代替?zhèn)鹘y(tǒng)的alert、confirm 等，實(shí)現(xiàn)華麗的應(yīng)用程序界面。 

        Ext 的對話框都封裝在Ext.MessageBox 類，該類還有一個(gè)簡寫形式即Ext.Msg，可以直 接通過Ext.MessageBox 或Ext.Msg 來直接調(diào)用相應(yīng)的對話框方法來顯示Ext 對話框. 

        以下各對話框的方法的示例可以在 button的onClick事件中運(yùn)行。 

        6.1 alert方法  

        6.2 confirm方法  

        6.3 prompt 方法  

        6.4 show方法 

        Ext.MessageBox.show()方法 功能很強(qiáng)大，采用config配置形式，比前面的方法使用更方便。 參數(shù)很多，在此列舉最常用的配置參數(shù): 

        1.animEl:對話框彈出和關(guān)閉時(shí)的動(dòng)畫效果，比如設(shè)置為“id1”，則從id1處彈出并產(chǎn)生動(dòng)畫，收縮則相反; 

        2.buttons:彈出框按鈕的設(shè)置，主要有以下幾種:  

        6.5 進(jìn)度條的使用 

        Ext.MessageBox.show()中的進(jìn)度條的使用 

        首先必須知道例外兩個(gè)方法 Ext.MessageBox.hide() 和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三個(gè)參數(shù)，看名字就知道意思)， 

        注意value為0-1之間的數(shù)，表示進(jìn)度條的進(jìn)度. 

        第一種:(通過進(jìn)度的大小控制進(jìn)度，滿進(jìn)度為1)  

        第二種:(通過固定時(shí)間控制進(jìn)度加載)  

        1.interval:進(jìn)度的頻率 

        2.duration:執(zhí)行進(jìn)度的持續(xù)時(shí)間，超過這個(gè)時(shí)間后，interval失效，不再產(chǎn)生進(jìn)度效果，但進(jìn)度狂也不會消失。 

        3.fn:duration的時(shí)間到后執(zhí)行的函數(shù)  

        第七章 ExtForm表單 

        帶有默認(rèn)form布局及提交功能的面板容器。 

        組件的使用: 

        通常情況下在WebBuilder內(nèi)對于數(shù)據(jù)的提交可使用Ajax組件，因此使用表單組件提交數(shù)據(jù)不常用。例外情況是提交帶有上傳文件的數(shù)據(jù)必須采用ExtForm表單組件。 上傳文件時(shí)，需要在表單組件下添加text編輯框組件，并設(shè)置text組件的inputType屬性為file;設(shè)置Ajax組件form屬性為ExtForm組件名稱，設(shè)置isUpload為true，設(shè)置Ajax指向的后臺處理模塊body的ExceptionType屬性為mark;然后調(diào)用Ajax控件同名的函數(shù)，如ajax()來提交表單內(nèi)所有的數(shù)據(jù)。 

        屬性和事件: 無個(gè)性屬性和事件 ，不做描述。相關(guān)屬性查看其它組件。  

        第八章 Tab頁 

        分頁顯示內(nèi)容的容器。 

        組件的使用: 

        通過在Tab頁組件下添加panel面板組件，來實(shí)現(xiàn)Tab控件的各頁，每個(gè)panel即為每個(gè)頁。必須設(shè)置panel組件的caption屬性來設(shè)置各頁的標(biāo)題。  

        1 增加tab組件，并在tab下 

        2 設(shè)定panel 的屬性 caption :測試頁面  

        2 動(dòng)態(tài)增加頁面  

        1 增加tab組件， 其他設(shè)置 如實(shí)例1， 2 增加extButton組件  

        第九章 Tree樹 

        用于以條目分層的樹狀結(jié)構(gòu)形式顯示數(shù)據(jù)。 

        組件的使用: 

        根據(jù)樹數(shù)據(jù)源的不同，樹的使用可分為同步和異步兩種: 

        1、同步樹: 

        通過設(shè)置data屬性或query屬性指定樹條目的數(shù)據(jù)源。  

        2、異步樹: 

        通過設(shè)置remoteUrl指定遠(yuǎn)程樹的地址以獲取樹數(shù)據(jù);指定remoteParams以提交參數(shù)，提交參數(shù)還可以通過編寫onBeforeLoad事件， 

        遠(yuǎn)程樹數(shù)據(jù)源的生成方式可使用代碼動(dòng)態(tài)構(gòu)建或使用同步樹的方式生成。同步樹方式的生成可以通過新建模塊，并設(shè)置body的createBody屬性為false，添加同步樹即可生成異步樹所需的數(shù)據(jù)源。  

        設(shè)置tree 組件 width屬性:200 運(yùn)行結(jié)果如左圖 

        第十章 Menu菜單工具條和MenuItem菜單工具條項(xiàng) 一:Menu菜單工具條 

        集菜單和工具條的容器。封裝了菜單及工具條的組件，用于條目的選擇，是菜單項(xiàng)、工具按鈕及其它組件的容器;菜單工具條內(nèi)也可內(nèi)置編輯框、組合框和按鈕等。 

        組件的使用: 

        Menu組件的應(yīng)用比較廣泛，通常有如下4種常見的用法: 

        1、嵌入至panel組件，作為菜單使用: 

        設(shè)置panel的tbar或bbar屬性為menu即可; 

        2、嵌入panel組件的標(biāo)題欄，作為內(nèi)置工具條: 

        設(shè)置menu的innerTool屬性為true，menu組件內(nèi)menuItem的buttonType屬性為指定按鈕類型，panel的tools屬性為menu即可; 

        3、直接使用; 

        設(shè)置autoShow屬性為true即可; 

        4、混合使用: 

        menu內(nèi)可添置任何組件，比如在menu組件內(nèi)添加text組件和按鈕作地址欄等，參照示例webbuilder/application/system/explorer.xwl內(nèi)addressBar組件。 

        在menu內(nèi)添加圖片，請先添加panel組件，然后再在panel組件內(nèi)添加image圖片組件。  

        二:MenuItem菜單工具條項(xiàng) 

        用于條目的選擇，是菜單工具條組件的子項(xiàng)。 

        組件的使用: 

        可在Menu菜單工具條組件容器下添加該組件來實(shí)現(xiàn)菜單項(xiàng)或工具按鈕，子菜單的添加不受層級限制，可任意添加多級子菜單。 

        MenuItem即可作為子菜單也可作為工具條按鈕，如果MenuItem組件內(nèi)又包含MenuItem組件那么作為子菜單使用，否則作為工具條按鈕使用。 

        第十一章 日期時(shí)間組件 

        日期時(shí)間組件 主要包括:Date日期和Time時(shí)間 。 

        一: Date日期 

        提供快速的日期選擇。 

        組件的使用: 

        日期組件僅提供日期的選擇，如果需要選擇日期和時(shí)間，可以設(shè)置timeControl以綁定時(shí)間組件，成為日期時(shí)間組件。綁定時(shí)間組件后，僅通過Ajax組件out屬性指定的提交對象將自動(dòng)包含日期和時(shí)間。  

        二: Time時(shí)間 

        快速的時(shí)間選擇  

        第十二章 數(shù)據(jù)操作組件 

        數(shù)據(jù)操作組件主要是針對數(shù)據(jù)庫操作集成的多個(gè)組件,主要包括: 

        query查詢、store數(shù)據(jù)集 DbUpdater數(shù)據(jù)更新 、DataProvider數(shù)據(jù)生成器、Grid表格、ColumnModel列容器、Column表格列 

        一:Query查詢 

        訪問數(shù)據(jù)庫的組件，提供通過sql語句對數(shù)據(jù)庫表、視圖、存儲過程和函數(shù)等的訪問能力。 

        組件的使用: 

        1、設(shè)置sql屬性為sql語句; 

        2、設(shè)置jndi屬性為數(shù)據(jù)庫連接jndi，如果為空則默認(rèn)取自sys.jndi; 

        3、如果sql語為update類語句，比如insert，則設(shè)置type屬性為update; 

        屬性: 

        sql:指定需要執(zhí)行的sql語句，該sql可以是標(biāo)準(zhǔn)sql，存儲過程或函數(shù)調(diào)用等; 

        在sql語句中既可以使用變量也可以使用jdbc參數(shù)。變量是指以{@name@}引用的名為name的值，參數(shù)是指以{?name?}引用的名為name的值;name指向的值存在于request對象的parameter或attribute中。 

        jndi:指定數(shù)據(jù)源jndi，默認(rèn)采用main.xml中jndi指定的數(shù)據(jù)源; 

        type:sql的類別，可為query,update,call;query表示查詢(select等);update表示更新(delete,insert,update等);call表示存儲過程和函數(shù)等; 

        fastMode:數(shù)據(jù)源生成是否采用快速模式?？焖倌Ｊ綌?shù)據(jù)源只能訪問一次，默認(rèn)為true，如果需要多次訪問設(shè)置為false; 

        loadData:是否自動(dòng)獲取query第一行各字段的值，可通過query.fieldName來讀取值，默認(rèn)為false;比如設(shè)置某個(gè)屬性為{#query.TITLE#}; 

        transaction:指定采用事務(wù)處理的方法，以保護(hù)數(shù)據(jù)的完整性，可為none,start,commit，分別表示不操作事務(wù)，起動(dòng)事務(wù)，提交事務(wù)。默認(rèn)為commit;如果設(shè)置為提交事務(wù)，那么之前的代碼或組件必須已經(jīng)啟動(dòng)事務(wù); 

        isolation:指定事務(wù)隔離的級別。 

        dbType:當(dāng)main.xml中配置的dbType等于此值時(shí)，該Query才運(yùn)行。 

        SQL參數(shù): 

        sql參數(shù)分為輸入?yún)?shù)和輸出參數(shù)。 

        輸入?yún)?shù): 

        輸入?yún)?shù)的格式為:{?name?}或{?type.name?} 

        系統(tǒng)能根據(jù)對象的類型自動(dòng)指定輸入類型，也可以在變量名前加類型的方式顯式地強(qiáng)制指定類型以轉(zhuǎn)換不同類型的數(shù)據(jù)，比如{?integer.textEdit?}表示把前臺傳來的textEdit控件的值轉(zhuǎn)換成整數(shù)，類似地還有: 

        VARCHAR:表示字符串; 

        INTEGER:表示整數(shù); 

        SMALLINT:表示短整數(shù); 

        BIGINT:表示長整數(shù); 

        FLOAT:表示浮點(diǎn)數(shù); 

        DOUBLE:表示雙精度浮點(diǎn)數(shù); 

        TIMESTAMP:表示日期時(shí)間類型的時(shí)間戳; 

        DATE:表示日期; 

        TIME:表示時(shí)間; 

        CHARSTREAM:表示字符串流;超過一定長度的varchar類型，比如text等。 

        輸出參數(shù): 

        輸出參數(shù)的格式為:{[email protected]?}或{[email protected]?}，其中subType為子類型，

        比如長度等。 

        輸出參數(shù)一般使用在存儲過程或函數(shù)的調(diào)用中。 

        輸出參數(shù)的類型必須顯式地指定，輸出類型參數(shù)的設(shè)置等同于jdbc輸出參數(shù)的設(shè)置?？墒?/p>

        用名稱或編號來指定類型。   

        具體的類型和編號對應(yīng)如下(可參考jdbc):  

        二:Store數(shù)據(jù)集 

        用于為組件提供數(shù)據(jù)源，Store提供了對json、xml和數(shù)組數(shù)據(jù)的訪問能力。 

        組件的使用: 

        1、設(shè)置url屬性為生成數(shù)據(jù)源的有效url地址，url指向的數(shù)據(jù)源可以是json、xml或數(shù)組; 

        數(shù)據(jù)源不能包含多余的html或其它標(biāo)記字符?？赏ㄟ^設(shè)置指向數(shù)據(jù)源模塊body的createBody屬性為false來實(shí)現(xiàn)。 

        2、如果數(shù)據(jù)源未包含元數(shù)據(jù)信息，請?jiān)O(shè)置fields屬性，以定義數(shù)據(jù)源的元數(shù)據(jù)信息; 3、如需提交數(shù)據(jù)至后臺，可設(shè)置baseParams屬性; 

        4、可通過代碼的方式動(dòng)態(tài)裝入數(shù)據(jù)集:  

        三:DbUpdater數(shù)據(jù)更新 

        對數(shù)據(jù)庫數(shù)據(jù)進(jìn)行更新的組件。DbUpdater組件提供了對一批數(shù)據(jù)進(jìn)行處理的能力，能方便地對數(shù)據(jù)執(zhí)行插入、刪除或更新操作。 

        四:DataProvider數(shù)據(jù)生成器 

        從數(shù)據(jù)庫中提取數(shù)據(jù)并生成指定格式的數(shù)據(jù)?？蔀橐恍┙M件，比如grid、combo、image等提供數(shù)據(jù)源。  

        dbType:當(dāng)main.xml中配置的dbType等于此值時(shí)，該DataProvider才運(yùn)行。 

        五:Grid表格 

        以表格的形式顯示數(shù)據(jù)。表達(dá)具有豐富的呈現(xiàn)能力，可以自定義各列的輸出以及任意的html輸出。表格中對列的定義需要使用列容器組件。 

        組件的使用: 

        根據(jù)表格中數(shù)據(jù)的來源不同，表格的使用分為同步和異步兩種: 

        1、同步表格: 

        通過設(shè)置data或query屬性指定表格的數(shù)據(jù)源，設(shè)置columnsModel屬性指定表格的列定義，設(shè)置pageSize指定每頁的記錄數(shù); 

        2、異步表格: 

        通過設(shè)置store屬性指定表格的數(shù)據(jù)源，設(shè)置columnsModel屬性指定表格的列定義，設(shè)置pageSize指定每頁的記錄數(shù);  

        可編輯的表格: 

        通過設(shè)置canEdit屬性為true并設(shè)置columnModel的column的editor屬性，即可生成可編輯的表格，具體步驟如下: 

        1、添加所有列編輯關(guān)聯(lián)必須的編輯控件，比如text，comboBox等，并設(shè)置這些組件的autoShow屬性為false; 

        2、添加columnModel組件，并在columnModel組件下添加column組件，設(shè)置column相關(guān)屬性及editor屬性(上述添加的編輯控件，此項(xiàng)必填); 

        3、添加grid組件，設(shè)置canEdit為true，設(shè)置columnModel為上述添加的columnModel組件; 

        4、如果需要提交所有增刪改的值，設(shè)置submitMode為modified即可; 

        值的提交: 

        當(dāng)采用Ajax組件通過設(shè)置out屬性提交該組件的值時(shí)，根據(jù)submitMode屬性的不同，提交到服務(wù)器的值也不同，submitMode的各種模式下的值提交說明如下: 

        select:表示json表達(dá)式描述的所有選擇的行的值; 

        modified:表示json表達(dá)式描述的所有添加、刪除或修改的行的值，此屬性僅適用于可編輯的表格; 

        all:表示json表達(dá)式描述的所有行的值; 

        六:ColumnModel列容器、Column表格列 

        一:ColumnModel列容器 

        定義表格的列的容器。列容器可放置column表格列。 

        組件的使用: 

        列容器僅應(yīng)用于表格的columnsModel屬性，必須添加column表格列以定義各列的信息。   

        二:Column表格列 

        定義表格中的列。 

        組件的使用: 

        設(shè)置fieldName為關(guān)聯(lián)的字段名，設(shè)置caption為顯示的標(biāo)題。如果需要映射，比如1顯示為男，2顯示為女等，可設(shè)置mapKey為SEX，自定義的映射信息請?jiān)跀?shù)據(jù)庫表WB_KEY中配置。 

        如果表格可編輯，那么需要設(shè)置editor屬性為相應(yīng)的編輯組件，比如text,comboBox等，編輯組件必須設(shè)置autoShow為false; 

        如果需要顯示自定義的html輸出，比如指定輸出的顏色等，可在renderer中定義自定義輸出函數(shù)。