[译] sciter: 使用 HTML/CSS 构建 Golang 图形界面程序

zyfdegh · · 6813 次点击 · · 开始浏览

这是一个创建于的文章，其中的信息可能已经有所发展或是发生改变。

原文：《SCITER : GUI APPLICATION WITH GOLANG USING HTML/CSS》

作者：Manish Champaneri

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 应用的简单实例

使用 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 文件

<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 库了。

希望对你有帮助！

有疑问加站长微信联系（非本文作者）