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图形界面编程。我们也会陆续推出相应的文章进行更详细的介绍和示例。