web.form 調(diào)用 Select2

只怕想不到 2022-04-03

展開(kāi)全文

今天先看一下百度統(tǒng)計(jì)公布的最新桌面操作系統(tǒng)市場(chǎng)份額：

Win 10 市場(chǎng)份額 48%，一年增加 10%

Win7 市場(chǎng)份額 34%，一年下降 9%，快要涼了

Win8 市場(chǎng)份額 5%，已經(jīng)涼涼了

macOS 市場(chǎng)份額 4%

WinXP 市場(chǎng)份額 2% 已經(jīng)徹底涼了

Linux 市場(chǎng)份額 1%

市場(chǎng)份額低于 5% 的我們就先不管了，現(xiàn)在開(kāi)發(fā)桌面軟件一般考慮 Win10 以及正在崛起的 Win11 就夠了，Win7 短時(shí)間內(nèi)可以考慮做一下兼容。

雖然 Win11 已經(jīng)自帶了誘人的 WebView2 ，并且 WebView2也支持 Win7, Win10。但這東西就像飛機(jī)，飛起來(lái)是很爽，也沒(méi)必要搞一點(diǎn)小東西就開(kāi)飛機(jī)去搞。

Windows 自帶的 IE 控件也是很不錯(cuò)的，所有系統(tǒng)都自帶，簡(jiǎn)單輕量好用，雖然新的操作系統(tǒng)已經(jīng)移除 IE 瀏覽器，但是微軟已聲明新系統(tǒng)不會(huì)移除 IE 控件。

Win10，Win11 自帶的 IE控件版本都是 IE11，Win7 自帶的 IE 最低是 IE8，但 Win7 會(huì)通過(guò)自動(dòng)更新升級(jí)到 IE11，所以基于 IE控件只要考慮 IE11就可以了。

兼容到 Win7 / IE8 也是一個(gè)可選項(xiàng)，像jQuery/DataTables 支持到 XP/IE6 - 說(shuō)實(shí)話在目前已經(jīng)沒(méi)有太大意義了。

aardio 中的 web.form 就是對(duì) IE控件的封裝。使用 web.form 非常簡(jiǎn)單，來(lái)個(gè)例子：

import win.ui;/*DSG{{*/var winform = win.form(text='web.form 測(cè)試')winform.add(button={cls='button';text='調(diào)用網(wǎng)頁(yè)對(duì)象';left=214;top=227;right=518;bottom=305;z=1})/*}}*/

import web.form;var wb = web.form(winform);

wb.external = { clickButton = function(){ winform.msgbox('在網(wǎng)頁(yè)里調(diào)用了 aardio 函數(shù)') }}

wb.html = /** <head><meta charset='utf-8'> </head><body>

<button onclick='javascript:external.clickButton()' id='button'> 來(lái)個(gè)按鈕調(diào)用 aardio 函數(shù)：external.clickButton()</button>

**/

winform.button.oncommand = function(id,event){ wb.getEle('button').click()}

winform.show();win.loopMessage();

上面就是一個(gè)完整的程序了，按 F5 運(yùn)行，運(yùn)行效果：

aardio 與網(wǎng)頁(yè)的交互非常簡(jiǎn)單，網(wǎng)頁(yè)里可以直接調(diào)用 wb.external 里定義的 aardio 函數(shù)，在 aardio 里也可以直接訪問(wèn)網(wǎng)頁(yè)里的對(duì)象，在 web.form 里網(wǎng)頁(yè)里的對(duì)象就是 COM 對(duì)象 —— 在 aardio 里可以直接使用。

注意 HTML 源碼不是一定要寫在 wb.html 這個(gè)字符串里，也可以用 wb.go('/res/index.html') 這樣的代碼直接打開(kāi)資源目錄下的網(wǎng)頁(yè)，資源目錄在發(fā)布后可以嵌入 EXE， web.form 不用修改任何代碼 —— 直接就可以支持資源目錄下的網(wǎng)頁(yè)。如果要更高級(jí)一些，可以用 wsock.tcp.simpleHttpServer 或 wsock.tcp.asynHttpServer 創(chuàng)建嵌入式 HTTP 服務(wù)端打開(kāi)資源目錄下的網(wǎng)頁(yè)，代碼都非常簡(jiǎn)單，請(qǐng)參考相關(guān)范例。

我們來(lái)個(gè)復(fù)雜一點(diǎn)的，找個(gè)開(kāi)源組件來(lái)試試，上次演示過(guò) DataTables 了，這次我們換一個(gè)強(qiáng)大的下拉搜索框組件 Select2 （支持 Win7 / IE8 內(nèi)核），先看運(yùn)行效果：

注意 web.form 可以綁定任何控件窗口，上面的界面中只有左側(cè)是網(wǎng)頁(yè)，右側(cè)是普通 edit 控件。打開(kāi)新版「 aardio 范例 / Web界面 / web.form /jQuery /Select2 」也可以查看下面的源碼：

import win.ui;/*DSG{{*/var winform = win.form(text='Select2';bgcolor=16777215)winform.add(edit={cls='edit';left=442;top=13;right=739;bottom=453;db=1;dr=1;dt=1;edge=1;multiline=1;z=2};static={cls='static';text='Static';left=6;top=7;right=371;bottom=459;clip=1;db=1;dl=1;dt=1;transparent=1;z=1})/*}}*/
import web.form;var wb = web.form(winform.static);
import web.json;wb.external={  getData = function(){    var data = {        {            'id': 1,            'text': 'aardio',            'selected': true        },        {            'id': 2,            'text': 'Delphi'        },        {            'id': 3,            'text': 'Python',            'disabled': true        }      }          return web.json.stringifyArray(data);   }    onSelect2Change = function(value){    winform.edit.print('選擇了',value);  }  }
wb.html = /**<head>    <meta charset='utf-8'>     <meta http-equiv='X-UA-Compatible' content='IE=edge' />    <script src='http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js'></script>  <script src='http://lib./select2/3.5.3/select2.min.js'></script>  <link href='https://lib./select2/3.5.3/select2.min.css' rel='stylesheet' /> </head><body>      <input type='text' id='example' style='width:100%;' >     <script>   $(document).ready(function() {        $('#example').select2({          placeholder: '請(qǐng)選擇',         'data': eval( external.getData() ) //調(diào)用 aardio 函數(shù)獲取數(shù)據(jù)      });            $('#example').on('change.select2', function (e) {            //響應(yīng)事件并調(diào)用 aardio 函數(shù)        external.onSelect2Change(e.val);    });
  });</script></body>**/
winform.show();win.loopMessage();

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：只怕想不到 > 《aardio》

舉報(bào)/認(rèn)領(lǐng)