Gox語言利用內置的Sciter庫,可以直接編寫圖形界面(GUI),運行時僅需隨gox主程序附帶一個運行庫文件(例如,Windows下是名爲sciter.dll的動態運行庫文件),該文件可以從Gox語言官網下載,或直接運行gox -initgui自動下載。
本例就展示了一個麻雀雖小而又五臟俱全的GUI編程示例,包括瞭如何使用Sciter庫展示一個登錄對話框,然後獲取用戶輸入的信息後又彈出另一個對話框展示出來。下面話不多說直接上代碼,當然其中有詳盡的註釋:
// 本例代碼完整演示了在Gox語言中如何使用Sciter包
// 來顯示一個圖形化(GUI)的登錄對話框
// 並獲得用戶輸入的信息供以後使用
// 主要知識點包括:
// 1、初始化圖形界面環境
// 2、使用HTML+TIScript來構建對話框界面和界面操作
// 3、獲得屏幕大小並使對話框窗口居中的兩種方法
// 4、如何從對話框獲取用戶錄入的信息以便後續使用
// 5. Gox語言和Sciter方式的圖形界面如何互相調用其中的函數
// 並進行參數傳遞
// 設定用到的Sciter包和screenshot包的簡稱
// 使用github.com/kbinani/screenshot包的原因是
// 使用其中的獲取屏幕分辨率的函數
// 這是第一種讓對話框居中的方法中用到的
sciter = github_scitersdk_gosciter
window = github_scitersdk_gosciter_window
screenshot = github_kbinani_screenshot
// Gox語言中使用圖形化界面(GUI)編程能力時
// 均需要調用initGUI()函數來進行初始化
initGUI()
// Sciter的圖形界面編程,可以簡單地理解爲
// 類似Electron等,用一個內置的瀏覽器執行
// HTML+CSS+JavaScript製作的網頁作爲界面
// 只不過Sciter將JavaScript換成了類似的TIScript
// 下面的htmlT就是定義了用HTML+CSS+TIScript製作的
// 登錄對話框界面
// 具備JavaScript的知識的話,TIScript應該很好理解
// TIScript已經將類似JQuery的功能集成在其中了
htmlT := `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Calculator</title>
</head>
<body>
<div style="margin-top: 10px; margin-bottom: 10px;">
<span>請輸入用戶名和密碼登錄……</span>
</div>
<div style="margin-top: 10px; margin-bottom: 10px;">
<label for="userNameID" >用戶名: </label><input id="userNameID" type=text />
</div>
<div style="margin-top: 10px; margin-bottom: 10px;">
<label for="userNameID" >密碼: </label><input id="passwordID" type=password />
</div>
<div>
<button id="btnLoginID">登錄</button>
<button id="btnClose">關閉</button>
</div>
<script type="text/tiscript">
$(#btnLoginID).on("click", function() {
var userNameT = $(#userNameID).value.trim();
var passwordT = $(#passwordID).value.trim();
view.setResult(userNameT, passwordT);
view.close();
});
$(#btnClose).on("click", function() {
view.close();
});
</script>
</body>
</html>
`
// 鎖定圖形界面在當前線程中,以免出現異常
runtime.LockOSThread()
// 獲取當前屏幕(第一塊屏幕)的分辨率及區域
// 返回結果類似 image.Rectangle{Min:image.Point{X:0, Y:0}, Max:image.Point{X:1920, Y:1080}}
// 其中Max中的X、Y可以分別理解爲屏幕的寬和高
bounds := screenshot.GetDisplayBounds(0)
// 計算我們準備展示的登錄框的尺寸和位置
// 對話框寬高分別爲400*300,然後根據屏幕尺寸
// 計算居中時對話框的x,y座標(左上角)
w = 400
h = 300
left = bounds.Max.X/2 - w/2
top = bounds.Max.Y/2 - h/2
// 按計算的結果創建對話框窗口
w, err := window.New(sciter.DefaultWindowCreateFlag, &sciter.Rect{Left: int32(left), Top: int32(top), Right: int32(left + w), Bottom: int32(top + h)})
// 如果創建錯誤則中止代碼執行
checkError(err)
// 加載前面設計的網頁界面
// 第二個參數可以設定一個網頁根路徑,
// 作爲頁面中使用相對路徑的超級鏈接的根路徑
w.LoadHtml(htmlT, "")
// 設置窗口標題
w.SetTitle("登錄窗口")
// 設置用於接收登錄框中用戶輸入信息的變量
userNameT = ""
passwordT = ""
// 定義準備在TIScript調用的Gox語言函數
// setResult將把對話框中用戶輸入的
// 用戶名和密碼傳到變量userNameT和passwordT中
w.DefineFunction("setResult", func(args) {
// args是TIScript中調用setResult函數時傳入的參數
// 可以是多個,Gox中按位置索引進行訪問
userNameT = args[0].String()
passwordT = args[1].String()
// 最後一定要返回一個值,空字符串也可以
return sciter.NewValue("")
})
// 將對話框顯示出來
w.Show()
// 開始運行圖形界面,以便可以接受界面操作
w.Run()
// 此處第一個對話框已經退出,
// 輸出接收到的用戶輸入信息
pln("用戶名:", userNameT, ", 密碼:", passwordT)
// 在新建一個窗口,先使用默認的位置和大小(將在屏幕左上方)
// 然後在對話框加載網頁是通過TIScript的代碼進行位置和大小調整
w, err := window.New(sciter.DefaultWindowCreateFlag, sciter.DefaultRect)
checkError(err)
// 下面是新窗口的網頁內容,其中id爲mainSpanID的SPAN標籤
// 演示瞭如何用插入字符串的方式直接將Gox語言中
// 所需傳遞的信息傳入Sciter界面
htmlT = `
<html>
<head>
</head>
<body>
<div>
<span id="mainSpanID">`+spr("用戶名:%v, 密碼:%v", userNameT, passwordT)+`</span>
</div>
</body>
<script type="text/tiscript">
function moveToCenter() {
var (w, h) = view.screenBox(#frame, #dimension)
view.move((w-480)/2, (h-200)/2, 480, 200);
return String.printf("%v|%v", w, h);
}
function self.ready() {
$(#mainSpanID).value = view.getText();
}
</script>
</html>
`
// 定義了getText函數演示以另一種方式傳入信息到Sciter界面
// 由於self.ready()函數將在Sciter網頁被加載後立即執行
// 因此本對話框中顯示的信息應該是密碼在前的
w.DefineFunction("getText", func(args) {
return sciter.NewValue(spr("密碼:%v, 用戶名:%v", passwordT, userNameT))
})
w.LoadHtml(htmlT, "")
w.SetTitle("結果")
// 在顯示對話框之前先調用TIScript定義的函數
// moveToCenter來將對話框的位置和大小改變
// 這次的大小是480*200
result, _ := w.Call("moveToCenter")
// moveToCenter函數還會返回Sciter中獲取到的
// 屏幕尺寸,我們將其展示出來
listT = strSplit(result.String(), "|")
pl("屏幕寬度:%v,屏幕高度: %v", listT[0], listT[1])
w.Show()
w.Run()
代碼中有詳細的解釋,可以看出,Gox語言製作GUI界面是非常方便的,也具有充足的(圖形界面與Gox語言代碼之間的)交互能力。
代碼運行的效果如下:
點擊登錄按鈕後:
把本段代碼中的screenshot包去掉(因爲僅在Windows下測試正常,也許是因爲遠程X窗口調用的關係),在Linux也可以正常運行,效果如下:
如果需要查閱Sciter的開發文檔,直接去Gox官網下載sciterTools.zip包,用其中的scapp工具查看doc子目錄下的main.html即是入口。包中也有Sciter界面的調試工具inspector。
注意:
Gox語言是脫胎於Go語言(Golang)的開源腳本語言,解釋執行,但相比Go語言更貼近高級語言,語法硬性限制也少一些;是一門偏向快速應用的語言,也可以說是一個集成工具;
-
Gox語言主要優勢有三點:
- 第一,Gox語言本身只有一個可執行文件,綠色免配置,下載即可使用,無需安裝Go語言環境,無需編譯,非常適合快速製作原型以及雲服務器上的遠程開發;
- 第二,Gox中可以直接使用絕大多數Go語言標準庫中的對象和方法函數,也內置了很多常用、優秀的第三方庫,充分發揮Go語言多年積累的資源優勢;
- 第三,與很多其他主流語言不同,Gox語言着力解決了GUI圖形界面編程的問題,內置了基於Sciter的圖形界面編程庫,直接可以進行快捷高效的跨平臺圖形界面開發(Sciter只需下載一個動態鏈接庫文件,執行和分發時附帶上即可,放置在系統路徑中或者與Gox主程序相同目錄下即可),特別適合編寫演示原型系統,也經歷了一些中小型系統的檢驗,尤其是作爲輕量級的微服務後臺。
作爲腳本語言,Gox語言性能肯定不如Go語言這樣的編譯型語言快,但在大多數使用場景下性能也足夠用。並且,由於Gox語言與Go語言的緊密聯繫,Gox語言編寫的腳本可以很容易的改寫成Go語言代碼,編譯執行後就可以發揮Go語言的速度優勢了。因此,Gox語言也比較適合做初期的Go語言調試。
Gox的官網在這裏,也可以在瀏覽器搜索引擎中直接搜索“gox語言”,Github頁面在這裏,在這裏可以看到很多Gox語言的學習指南和實際應用實例。