原文：《SCITER : GUI APPLICATION WITH GOLANG USING HTML/CSS》
作者：Manish Champaneri
Golang 可視化庫 sciter
這是來自 sciter 網站的幾句話，
sciter 案頭 UI 開發帶來了一系列網頁技術。網頁設計者和開發人員可以複用他們的經驗和專長來構建看起來現代的案頭應用。
多種多樣的 G使用者介面架構提供了不同的 UI 聲明和格式語言，比如 QML 和 XAML（Microsoft WPF）。不同的是， sciter 使用長期證明的、健壯的、靈活的 HTML 和 CSS 來定義 GUI，並支援 GPU 加速。
在我使用 sciter 之前，我試過了其他幾種選擇，但沒有一個滿足我的要求。比如最開始，我用了andlabs/ui，我寫過一篇關於這個庫的文章，可以去讀這篇《Golang 圖形介面編程》。不過這個庫仍在開發中，不足以支援生產環境下的應用。
另外我用了 Eletron，然而問題是一個簡單的計算機軟體要佔用 150MB，其中 15MB 是 Go 程式，其餘的都是 Electron 本身。
不久前，我找到了另一個替換品，就是 sciter。現在還能免費試用包含商業性的內容（有一定期限）。
我假定你已經閱讀了開頭引用的兩段話，如果你想瞭解更多關於 sciter 的資訊，可以訪問網站https://sciter.com/ 。
下面是 sciter 應用的簡單一實例
使用 Sciter & Golang 構建的簡單 GUI 程式
接下來我分享一下 Go 和 HTML 檔案的源碼（放在相同目錄）。
Go 檔案
package mainimport ("fmt""github.com/fatih/color"sciter "github.com/sciter-sdk/go-sciter""github.com/sciter-sdk/go-sciter/window")// Specifying havily used// Singltons to make them// package wide availablevar root *sciter.Elementvar rootSelectorErr errorvar w *window.Windowvar windowErr error// Preapare Scitre For Execution ///func init() {// initlzigin window for downloaer// app with appropriate propertiesrect := sciter.NewRect(0, 100, 300, 350)w, windowErr = window.New(sciter.SW_TITLEBAR|sciter.SW_CONTROLS|sciter.SW_MAIN|sciter.SW_GLASSY,rect)if windowErr != nil {fmt.Println("Can not create new window")return}// Loading main html file for apphtloadErr := w.LoadFile("./main.html")if htloadErr != nil {fmt.Println("Can not load html in the screen", htloadErr.Error())return}// Initializng Selector at global level as we are going to need// it mostly and as it isroot, rootSelectorErr = w.GetRootElement()if rootSelectorErr != nil {fmt.Println("Can not select root element")return}// Set title of the appliaction windoww.SetTitle("Simple Calc")}// Preaprare Program for execution ///func main() {addbutton, _ := root.SelectById("add")out1, errout1 := root.SelectById("output1")if errout1 != nil {color.Red("failed to bound output 1 ", errout1.Error())}addbutton.OnClick(func() {output := add()out1.SetText(fmt.Sprint(output))})w.Show()w.Run()}///////////////////////////////////////////////////// Function of calc /////////////////////////////////////////////////////func add() int {// Refreshing and fetching inputs()in1, errin1 := root.SelectById("input1")if errin1 != nil {color.Red("failed to bound input 1 ", errin1.Error())}in2, errin2 := root.SelectById("input2")if errin2 != nil {color.Red("failed to bound input 2 ", errin2.Error())}in1val, errv1 := in1.GetValue()color.Green(in1val.String())if errv1 != nil {color.Red(errv1.Error())}in2val, errv2 := in2.GetValue()if errv2 != nil {color.Red(errv2.Error())}color.Green(in2val.String())return in1val.Int() + in2val.Int()}///////////////////////////////////////////////////HTML 檔案
<html><head> <head> <title>Simple Calc</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head></head><body> <label for="">Input First</label> <input type="number" style="width: 250px; margin: 0 auto;" id="input1" > <label for="">Input Second</label> <input type="number" style="width: 250px; margin: 0 auto;" id="input2" > <input type="button" style="width: 125px; margin: 0 auto;" value="Add ( + )" id="add"> <hr> <input type="number" style="width: 250px; margin: 0 auto;" id="output1" disabled> </body></html>實際上，我發現的一個問題是，我需要重新整理 HTML 元素繫結才能從中獲得最新的值。
可能是我什麼地方做錯了，可能也有別人遇到了這個問題，沒辦法了。
無論如何總結一下，sciter 是 Go 中用來構建可視化應用最具前途的 GUI 庫了。
希望對你有協助！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
