Gox语言中使用Sciter库进行GUI图形界面编程-GX23.1

Sciter是非常优秀的跨平台GUI图形界面编程库，只需附带一个动态链接库文件，就可以实现基于HTML/CSS/TiScript的图形界面，并且已经经过很多公司和商用产品的实际检验，稳定可靠。我们常见的包括TeamViewer，Symantec，Vmware，Evernote，360等公司或产品据说都使用了Sciter来制作界面，可见Sciter相当值得信赖。

Sciter提供多种语言的绑定，Gox语言中，通过Go语言（Golang）的绑定来使用Sciter，具体文档可以参考Go-Sciter。这也是Sciter官方推荐的Go语言绑定库。

在Gox语言的0.998a版本之后，可以用类似下面的代码实现一个图形界面的小计算器程序。

sciter = github_scitersdk_gosciter
window = github_scitersdk_gosciter_window

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>Please enter the expression:</span>
    </div>
    <div style="margin-top: 10px; margin-bottom: 10px;">
        <input id="mainInputID" type=text />
    </div>
    <div>
        <button id="btnCal">Calculate!</button>
        <button id="btnClose">Close</button>
    </div>

    <script type="text/tiscript">
        $(#btnCal).on("click", function() {
            var result = eval($(#mainInputID).value);

            view.prints(String.printf("%v", result));

            $(#mainInputID).value = result;
        });
 
        $(#btnClose).on("click", function() {
            view.close();
        });
 
    </script>
</body>
</html>

`

runtime.LockOSThread()

w, err := window.New(sciter.DefaultWindowCreateFlag, sciter.DefaultRect)

checkError(err)

w.SetOption(sciter.SCITER_SET_SCRIPT_RUNTIME_FEATURES, sciter.ALLOW_EVAL | sciter.ALLOW_SYSINFO)

w.LoadHtml(htmlT, "")

w.SetTitle("Calculator")

w.DefineFunction("prints", func(args) {
    tk.Pl("%v", args[0].String())
    return sciter.NewValue("")
})

w.Show()

w.Run()

程序运行后界面类似下面截图所示：

可以在其中文本框中输入任意算式，然后点击“Calculate!”按钮进行计算，点击“Close”按钮退出程序。下面将代码逐行解释版本放出，可以更好的理解一般Sciter与Gox结合的方式。

// 首先按Gox语言的规则，用短名称引用github.com/scitersdk/go-sciter库和它的window子库
// 如果不使用简称，则可以直接使用github_scitersdk_gosciter这样的全称来引用，也是可以的，这样无需在一开始声明
sciter = github_scitersdk_gosciter
window = github_scitersdk_gosciter_window

// 这是默认准备加载的html文件内容，直接放在字符串里了
// 其中布局很简单，就是一个抬头，一个文本框用于输入算式，和两个按钮分别用于计算和退出程序
// 需要注意的是，Sciter并不支持Javascript来做脚本编程，而是使用自己的TiScript，据说某些方面比Javascript功能更强，相当于结合了JQuery的Javascript加强版吧
// 注意其中绑定两个按钮点击函数的方法，以及TiScript中选择器的用法
// 其中用到的view.prints函数则是绑定的后面注入的Go语言中编写的函数，这演示了如何在Sciter中调用Gox语言编写的函数，Gox语言与Sciter结合，才能发挥最大的威力
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>Please enter the expression:</span>
    </div>
    <div style="margin-top: 10px; margin-bottom: 10px;">
        <input id="mainInputID" type=text />
    </div>
    <div>
        <button id="btnCal">Calculate!</button>
        <button id="btnClose">Close</button>
    </div>

    <script type="text/tiscript">
        $(#btnCal).on("click", function() {
            var result = eval($(#mainInputID).value);

            view.prints(String.printf("%v", result));

            $(#mainInputID).value = result;
        });
 
        $(#btnClose).on("click", function() {
            view.close();
        });
 
    </script>
</body>
</html>

`

// 由于所有GUI编程最好都保证在一个线程中执行界面操作，因此用这句话锁定线程
runtime.LockOSThread()

// 创建一个Sciter窗口
w, err := window.New(sciter.DefaultWindowCreateFlag, sciter.DefaultRect)

// 检查，有错误则直接退出程序执行
checkError(err)

// 设置一些必要的Sciter参数，例如允许eval函数等
w.SetOption(sciter.SCITER_SET_SCRIPT_RUNTIME_FEATURES, sciter.ALLOW_EVAL | sciter.ALLOW_SYSINFO)

// 在窗口中载入HTML文本，第二个参数可以设置基础的URL
w.LoadHtml(htmlT, "")

// 设置窗口标题栏文本
w.SetTitle("Calculator")

// 给Sciter注入prints函数，在TiScript中使用view.prints来调用
w.DefineFunction("prints", func(args) {
    tk.Pl("%v", args[0].String())
    return sciter.NewValue("")
})

// 显示Sciter窗口并执行
w.Show()
w.Run()

Sciter完全支持HTML/HTML 5，完整支持CSS 2.1和部分CSS 3，并且真正支持跨平台，由于Gox语言也是跨平台的，所以上面的程序在Windows、Linux和MacOS中都可以直接执行（注意各个平台都要带上Sciter的动态链接库，Windows下只需要将sciter.dll放在Gox主程序相同的目录下即可，最新的Gox压缩包中已经包含了该dll文件，Linux和MacOS中相对复杂，请参考Go-Sciter的说明文档，仅需依照前两步将动态链接库文件设置好即可）。

在Gox语言中使用Sciter库进行GUI图形界面编程，主要的优点在于：

真正支持跨平台，Windows、Linux和MacOS都是基本完美支持；而Gox中的LCL库目前在Linux和Mac上还无法支持；
支持虚拟机环境，Giu库则在虚拟机和云服务器上由于一般没有OpenGL显卡，所以无法支持；而Sciter则完全没有问题；
Sciter本身自带的TiScript脚本语言，已经可以解决很多小问题了，本例中的计算功能既是由TiScript语言中的eval函数实现的。
Javascript语言不熟的开发者，或者更熟悉Go语言的开发者，可以选择使用Go语言来完成相关的操作而无需通过TiScript，可以通过Gox语言实现基本上所有的DOM操作和其他功能，由于Gox语言与Go语言（Golang）具有特殊的血脉关系，所以也可以发挥Go语言的后台处理的强项优势。

另外，作为功能非常强大的GUI编程库，建议一定要充分阅读参考Sciter官方的文档，才能实现更复杂的GUI图形界面编程。我们也会陆续推出相应的文章进行更详细的介绍和示例。

注意，另外，Ubuntu系统运行Gox语言时需要事先安装GTK3的环境，执行下述命令即可安装：

apt install libgtk-3-dev