Gox語言例4:圖形化界面(GUI)的登錄對話框

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語言的學習指南和實際應用實例。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章