最近需要使用go-sciter创建一个桌面应用，以下为学习和记录的笔记，方便自己查阅。
一、环境准备
- 从https://sciter.com/download/地址下载sciter-sdk
- 由于使用到cgo，所以window下需要安装mingw或tdm-gcc(建议安装tdm-gcc)
- cmd进入gopath目录并运行
二、通过html,css编写简单UI
书写标准的HTMLY页面，我就不一一赘述了，大家写个demo跑一下即可。
三、事件处理，函数与方法定义，go与tiscript之间相互调用
sciter处理脚本tiscript，用于处理UI交互中的一些逻辑，跟js很像，但又有点区别，对前端熟悉的人比较容易上手.
以下的方法是调用go定义的方法
<script type="text/tiscript">
//view是一个全局的视图对象，root是加载的根元素
var root = view.root;
//通过self.$()方法选择元素，类似jquery的$
//self.$()这里面参数不要加双引号
//我们调用在go中为btn1定义的方法
$(#btn1).on("click", function() {
//this指向的当前元素
this.test("参数1", "参数2", "参数3");
});
//在go中也可以调用我们在tis中为btn2定义的方法
$(#btn2).test2 = function(a, b, c) {
return String.printf("我是tis中为btn2定义的方法test2 %v %v %v", a, b, c);
};
//我们定义一个函数(注意函数与方法的区别)
//这里的函数并没有指定属于哪个对象
function sum(num1, num2) {
return num1 + num2;
}
//调用go中定义的函数
$(#btn3).on("click", function() {
view.msgbox(#alert, view.dec(5));
});
$(#btn4).on("click", function() {
view.msgbox(#alert, view.inc(5));
});
</script>
四、固定窗口大小
<script type="text/tiscript">
self.ready = function() {
//设置view对象不能改变大小
view.isResizeable = false;
};
</script>
五、加载元素资源
有些时候我们需要动态的给某个UI元素加载内容或数据。
.go代码
package main;
import (
"github.com/sciter-sdk/go-sciter/window"
"github.com/sciter-sdk/go-sciter"
"log"
"fmt"
)
func load(root *sciter.Element) {
frame, _ := root.SelectById("frame");
//load()类似jquery.load()，用于给元素加载指定内容
//加载html内容
frame.Load("http://www.qq.com", sciter.RT_DATA_HTML);
txt, _ := root.SelectById("txt");
//附加元素事件处理
txt.AttachEventHandler(&sciter.EventHandler{
//OnDataArrived 当资源被加载但未使用时调用
//返回true，取消资源使用
//返回false，遵循正常过程
OnDataArrived: func(he *sciter.Element, params *sciter.DataArrivedParams) bool {
//设置元素html
he.SetHtml(string(params.Data()), sciter.SIH_REPLACE_CONTENT);
return false;
},
});
//加载本地原始数据
txt.Load("file:///D:/gopath/src/gui/1.txt", sciter.RT_DATA_RAW);
img, _ := root.SelectById("img");
img.AttachEventHandler(&sciter.EventHandler{
//OnDataArrived 当资源被加载但未使用时调用
OnDataArrived: func(he *sciter.Element, params *sciter.DataArrivedParams) bool {
//设置属性，给img标签设置src
he.SetAttr("src", params.Uri());
return false;
},
});
img.Load("http://mat1.gtimg.com/www/images/qq2012/qqLogoFilter.png", sciter.RT_DATA_IMAGE);
script, _ := root.SelectById("script");
script.AttachEventHandler(&sciter.EventHandler{
//OnDataArrived 当资源被加载但未使用时调用
OnDataArrived: func(he *sciter.Element, params *sciter.DataArrivedParams) bool {
fmt.Println(string(params.Data()));
return false;
},
});
//加载脚本资源
script.Load("http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js", sciter.RT_DATA_SCRIPT);
}
func main() {
w, err := window.New(sciter.DefaultWindowCreateFlag, sciter.DefaultRect);
if err != nil {
log.Fatal(err);
}
//加载文件
w.LoadFile("demo6.html");
//设置标题
w.SetTitle("元素加载内容");
//获取根元素
root, _ := w.GetRootElement();
//元素加载资源
load(root);
w.Show();
w.Run();
}
.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素加载内容</title>
<style>
#frame {
width: 100%;
height: 50%;
}
#txt {
border: 1px solid #ccc;
height: 50px;
color: #000;
}
</style>
</head>
<body>
<iframe id="frame">
</iframe>
<div id="txt"></div>
<img id="img">
<script type="text/javascript" id="script"></script>