web.form 調用 Select2

只怕想不到 2022-04-03

展開全文

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

Win 10 市場份額 48%，一年增加 10%

Win7 市場份額 34%，一年下降 9%，快要涼了

Win8 市場份額 5%，已經涼涼了

macOS 市場份額 4%

WinXP 市場份額 2% 已經徹底涼了

Linux 市場份額 1%

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

雖然 Win11 已經自帶了誘人的 WebView2 ，并且 WebView2也支持 Win7, Win10。但這東西就像飛機，飛起來是很爽，也沒必要搞一點小東西就開飛機去搞。

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

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

兼容到 Win7 / IE8 也是一個可選項，像jQuery/DataTables 支持到 XP/IE6 - 說實話在目前已經沒有太大意義了。

aardio 中的 web.form 就是對 IE控件的封裝。使用 web.form 非常簡單，來個例子：

import win.ui;/*DSG{{*/var winform = win.form(text='web.form 測試')winform.add(button={cls='button';text='調用網(wǎng)頁對象';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)頁里調用了 aardio 函數(shù)') }}

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

<button onclick='javascript:external.clickButton()' id='button'> 來個按鈕調用 aardio 函數(shù)：external.clickButton()</button>

**/

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

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

上面就是一個完整的程序了，按 F5 運行，運行效果：

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

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

我們來個復雜一點的，找個開源組件來試試，上次演示過 DataTables 了，這次我們換一個強大的下拉搜索框組件 Select2 （支持 Win7 / IE8 內核），先看運行效果：

注意 web.form 可以綁定任何控件窗口，上面的界面中只有左側是網(wǎng)頁，右側是普通 edit 控件。打開新版「 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: '請選擇',         'data': eval( external.getData() ) //調用 aardio 函數(shù)獲取數(shù)據(jù)      });            $('#example').on('change.select2', function (e) {            //響應事件并調用 aardio 函數(shù)        external.onSelect2Change(e.val);    });
  });</script></body>**/
winform.show();win.loopMessage();