|
web.form 基于系統(tǒng)自帶瀏覽器組件，生成的軟件體積極小。使用網(wǎng)頁(yè)做界面 —— 有很多成熟、美觀的開(kāi)源網(wǎng)頁(yè)組件可以直接拿來(lái)用，先看幾個(gè)范例： aardio 范例 / Web界面 / web.form / jQuery / lightslider :
aardio 范例 / Web界面 / web.form / DataTables / Tabulator：
aardio 范例 / Web界面 / web.form / jQuery / Select2：
aardio 范例 / Web界面 / web.form / jQuery / iCheck：
一起再來(lái)練一遍，打開(kāi) aardio 拖一個(gè) static 控件到界面上 —— 用來(lái)顯示網(wǎng)頁(yè)：
然后切換到代碼視圖，添加以下代碼：
import web.form; var wb = web.form(winform.static);
上面代碼在 winform.static 控件窗口內(nèi)創(chuàng)建瀏覽器對(duì)象 wb。 
使用 wb.html = '<html></html>'
就可以寫(xiě)網(wǎng)頁(yè)了。
使用 可以打開(kāi)指定的網(wǎng)頁(yè)。
使用 可以打開(kāi)資源目錄的網(wǎng)頁(yè)，資源目錄可以嵌入 EXE 生成 獨(dú)立 EXE 文件，放心不用多寫(xiě)一句代碼。
使用 var url = wsock.tcp.simpleHttpServer.startUrl('/res/index.html') wb.go( url ）
可以創(chuàng)建一個(gè)嵌入式 HTTP 服務(wù)器打開(kāi)資源目錄下的網(wǎng)頁(yè)?？梢杂脕?lái)支持一些只能通過(guò) HTTP 服務(wù)器訪問(wèn)的組件。
使用 wb.getEle() wb.queryEles()
可以獲取網(wǎng)頁(yè)節(jié)點(diǎn)。
使用 wb.script 可以直接訪問(wèn) JavaScript 對(duì)象，例如在 aardio 里執(zhí)行 wb.script.alert('測(cè)試')
就是調(diào)用 JavaScript 里的 alert 函數(shù)。
也可以用 wb.external 導(dǎo)出 aardio 函數(shù)給網(wǎng)頁(yè)調(diào)用，例如在 aardio 中這樣寫(xiě)：
wb.external = { add = function(a,b){ return a+b } }
在網(wǎng)頁(yè) JavaScript 里就可以通過(guò) 調(diào)用這個(gè) aardio 函數(shù)了。
aardio 可以直接使用 JavaScript 函數(shù)返回的對(duì)象，JavaScript 也可以直接使用 aardio 函數(shù)返回的對(duì)象，這是系統(tǒng) IE 瀏覽器控件一個(gè)極大的優(yōu)勢(shì)。
有一些表格組件，需要使用純 JavaScript 對(duì)象作為數(shù)據(jù)源，那么我們可以在 aardio 中將對(duì)象轉(zhuǎn)換為 JSON，然后在 JavaScript 中再用 eval 或 JSON.parser 轉(zhuǎn)回去，例如 aardio 中這樣寫(xiě)：
import web.json;wb.external = { getData = function(){ var data = { {id:1, name:'Oli Bob', age:'12', col:'red', dob:'',enabled:true}, {id:2, name:'Mary May', age:'1', col:'blue', dob:'14/05/1982',enabled:true}, }; web.json.stringifyArray(data); } }
對(duì)于數(shù)組，我們建議用 web.json.stringifyArray 而不是 web.json.stringify 函數(shù)生成 JSON。
那么在網(wǎng)頁(yè) JavaScript 可以像下面這樣還原為純 JavaScript 對(duì)象：
JSON.parse( external.getData() )
IE8 就已經(jīng)支持 JSON.parse 了，而 Win7 的 IE控件最低版本是 IE8，如果真要兼容老古董的 XP/IE6 - 可以用 eval 取代 JSON.parse，用 eval 還原 JSON 要注意最好是把 JSON 放到 () 里面以避免 {} 被解析為語(yǔ)句塊。
Tabulator 支持響應(yīng)式數(shù)據(jù)，可以將表格綁定一個(gè) JavaScript 數(shù)據(jù)對(duì)象，修改數(shù)據(jù)時(shí)表格會(huì)自動(dòng)同步顯示最新的數(shù)據(jù)。那么如果我們希望在 aardio 里修改數(shù)據(jù)源，網(wǎng)頁(yè)表格里同步顯示最新的數(shù)據(jù)，就不能用上面說(shuō)的 JSON 傳輸數(shù)據(jù)的辦法了。
下面我們使用一個(gè)更酷的方法，在 aardio 中直接創(chuàng)建一個(gè) JavaScript 數(shù)據(jù)源，源碼如下：
import web.json;wb.external = { getReactiveData = function(event){ if( !owner.jsReactiveData ) { var data = { {id:1, name:'Oli Bob', age:'12', col:'red', dob:'',enabled:true}, {id:2, name:'Mary May', age:'1', col:'blue', dob:'14/05/1982',enabled:true} }; data = web.json.stringifyArray(data); owner.jsReactiveData = wb.script.JSON.parse( data ); } return owner.jsReactiveData; }}
首先我們把 aardio 中的 data 對(duì)象轉(zhuǎn)換為 JSON 文本，然后調(diào)用 JS 函數(shù)
wb.script.JSON.parse( data )
創(chuàng)建一個(gè) JavaScript 對(duì)象，然后把這個(gè) wb.external.jsReactiveData 對(duì)象返回給 Tabulator 表格。
這樣我們就可以在 aardio 中修改 wb.external.jsReactiveData 并實(shí)時(shí)刷新網(wǎng)頁(yè)中的 Tabulator 表格了，aardio 代碼如下：
winform.button.oncommand = function(id,event){ var data = wb.external.getReactiveData(); //修改 JS 數(shù)據(jù)，Tabulator 表格自動(dòng)刷新。 data[1].age = data[1].age + 10;}
在 aardio 范例中可以查看完整代碼：
|
