go语言html界面,[译] sciter: 使用 HTML/CSS 构建 Golang 图形界面程序

作者:Manish Champaneri

sciter.png

Golang 可视化库 sciter

这是来自 sciter 网站的几句话,

sciter 桌面 UI 开发带来了一系列网页技术。网页设计者和开发者可以复用他们

的经验和专长来构建看起来现代的桌面应用。

多种多样的 GUI 框架提供了不同的 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 应用的简单实例

calc.png

使用 Sciter & Golang 构建的简单 GUI 程序

接下来我分享一下 Go 和 HTML 文件的源码(放在相同目录)。

Go 文件

package main

import (

"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 available

var root *sciter.Element

var rootSelectorErr error

var w *window.Window

var windowErr error

// Preapare Scitre For Execution ///

func init() {

// initlzigin window for downloaer

// app with appropriate properties

rect := 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 app

htloadErr := 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 is

root, rootSelectorErr = w.GetRootElement()

if rootSelectorErr != nil {

fmt.Println("Can not select root element")

return

}

// Set title of the appliaction window

w.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 文件

Simple Calc

Input First

Input Second


实际上,我发现的一个问题是,我需要刷新 HTML 元素绑定才能从中获得最新的值。

可能是我什么地方做错了,可能也有别人遇到了这个问题,没办法了。

无论如何总结一下,sciter 是 Go 中用来构建可视化应用最具前途的 GUI 库了。

希望对你有帮助!