go语言使用go-sciter创建桌面应用(六) Element元素操作和Event事件响应

详细的文档请看下面两个链接：

https://sciter.com/docs/content/sciter/Element.htm

https://sciter.com/docs/content/sciter/Event.htm

demo8.html代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>tiscript脚本学习</title>

    <style>

        #mouse {

            border: 1px solid #ccc;

            width: 500px;

            height: 500px;

        }

    </style>

</head>

<body>

<div id="box">

    <ul>

        <li>1111</li>

        <li>2222</li>

        <li>3333</li>

    </ul>

</div>

<div id="form">

    ID: <input type="text" name="id" value="001"><br>

    姓名：<input type="text" name="name"><br>

    性别：<input type="radio" name="sex" value="0">男

    <input type="radio" name="sex" value="1">女

    <button id="btn1">按钮</button>

    <button id="btn2">定时</button>

</div>

<div id="event">

    <input type="text" id="ipt"><br>

    <input type="text" id="ipt2"><br>

    <button id="btn3">单击</button>

    <br>

    <button id="btn4">双击</button>

    <br>

    <select id="sel">

        <option value="11">11</option>

        <option value="22">22</option>

        <option value="33">33</option>

    </select>

    <div id="mouse"></div>

</div>

<script type="text/tiscript">

    //类似jquery的ready();

    self.ready = function() {

        testDom();

        testEvent();

    };

    //测试Dom操作

    function testDom() {

        //选择元素，不要加引号

        var box = self.$(#box);

        //效果同上，注意要加引号

        var box2 = self.select("#box");

        //选择多个元素

        var lis = self.$$(#box > ul > li);

        stdout.println(lis.length);

        //同上

        var lis2 = self.selectAll("#box > ul > li");

        stdout.println(lis2.length);

        //first表示元素的第一个子元素

        stdout.println(lis.first.text);

        //last表示元素的最后一个子元素

        stdout.println(lis.last.text);

        var li = self.$(#box > ul > li:nth-child(1));

        //next表示下一个兄弟元素

        stdout.println(li.next.text);

        //访问元素的属性

        stdout.println(box.attributes["id"]);

        //设置元素的属性

        box.attributes["status"] = "open";

        //设置元素的样式

        li.style["background"] = "#f00";

        //判断元素是否可见

        var li2 = self.$(#box > ul > li:nth-child(2));

        li2.style["display"] = "none";

        if(!li2.isVisible) {

            stdout.println("li2不可见");

        }

        //遍历元素

        for(var child in lis) {

            stdout.println(child.text);

        }

        //动态创建元素

        var li4 = new Element("li");

        //将li元素追加到ul元素内部

        $(#box > ul).append(li4);

        //设置元素的文本

        //注意这里需先将元素添加到dom树上，然后再设置元素文本

        li4.text = "444";

        //这里直接追加html内容，不要加引号

        $(#box > ul).$append(<li>555</li>);

        $(#box > ul).$prepend(<li>000</li>);

        //外部追加

        $(#box).$after(<div>after</div>);

        $(#box).$before(<div>before</div>);

        //删除元素

        $(#box > ul > li:nth-child(4)).remove();

        //设置元素的状态

        //设置只读

        $(input[name='id']).setState(Element.STATE_READONLY);

        //设置焦点

        $(input[name='name']).setState(Element.STATE_FOCUS);

        //设置选中

        $(input[name='sex'][value='1']).setState(Element.STATE_CHECKED);

        //设置禁用

        $(#btn1).setState(Element.STATE_DISABLED);

        //定时器

        var cnt = 5;

        $(#btn2).timer(1000, function() {

            if(cnt == 0) {

                //返回false则停止定时器

                return false;

            }

            this.text = "第" + cnt + "次";

            cnt--;

            return true;

        });

    }

    //测试元素事件

    function testEvent() {

        //单击事件

        $(#btn3).onClick = function() {

            stdout.println("btn3被点击了");

        };

        //双击事件

        $(#btn4).on("dblclick", function() {

            stdout.println("btn4被双击了");

        });

        //按键弹起

        $(#ipt).on("keyup", function() {

            stdout.println(this.value);

        });

        //value值改变时

        $(#sel).on("change", function() {

            stdout.println(this.value);

        });

        //移除事件函数

        $(#btn4).off("dblclick");

        //或者如下

        $(#btn4).unsubscribe("dblclick");

        //判断事件类型和按键码值

        $(#ipt2).on("keyup", function(evt) {

            //evt.type表示事件类型

            //evt.keyCode表示键码值

            if(evt.type == Event.KEY_UP && evt.keyCode == Event.VK_RETURN) {

                stdout.println("你回车了");

            }

        });

        //鼠标移动事件

        $(#mouse).on("mousemove", function(evt) {

            var str = "";

            str += "相对于div本身的 x:" + evt.x + " y:" + evt.y + "<br>";

            str += "相对于根元素html本身的 x:" + evt.xRoot + " y:" + evt.yRoot + "<br>";

            str += "相对于window窗口本身的 x:" + evt.xView + " y:" + evt.yView + "<br>";

            this.html = str;

        });

    }

</script>

</body>

</html>

由于html中使用了tiscript，所以如果要调试，只能使用sciter-sdk中自带的调试工具，进行调试。

在sciter-sdk下找到bin\64\sciter.exe和inspector.exe这两个文件，拷贝到你指定的位置，注意这两个文件要放在一起。

双击打开sciter.exe文件

注意只能调试静态页面，go中定义的方法和函数，没法调用显示。

了解了上面的的Element操作和Event事件处理，我们简单写个小例子：

demo7.html代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>tiscript脚本学习</title>

</head>

<body>

<form action="">

    <table>

        <tr>

            <td>用户名：</td>

            <td>

                <input type="text" name="name">

            </td>

        </tr>

        <tr>

            <td>密码：</td>

            <td>

                <input type="password" name="pwd">

            </td>

        </tr>

        <tr>

            <td>爱好：</td>

            <td>

                <input type="checkbox" name="love" value="0">看书

                <input type="checkbox" name="love" value="1">打球

                <input type="checkbox" name="love" value="2">旅游

            </td>

        </tr>

        <tr>

            <td>性别：</td>

            <td>

                <select name="sex">

                    <option value="-1">请选择</option>

                    <option value="0">男</option>

                    <option value="1">女</option>

                </select>

            </td>

        </tr>

        <tr>

            <td>简介：</td>

            <td>

                <textarea name="desc" cols="30" rows="5"></textarea>

            </td>

        </tr>

    </table>

</form>

<button id="btn1">注册</button>

<script type="text/tiscript">

    $(#btn1).on("click", function() {

        //获取文本框中的值

        var name = $(input[name='name']).value.trim();

        if(name.length == 0) {

            //弹出警告框

            view.msgbox(#warning, "用户名不能为空");

            return false;

        }

        //获取文本框中的值

        var pwd = $(input[name='pwd']).value.trim();

        if(pwd.length == 0) {

            //弹出警告框

            view.msgbox(#warning, "密码不能为空");

            return false;

        }

        //这里使用$$返回所有，$只是返回第一个满足选择器的元素

        var ipt = $$(input[name='love']);

        var love = [];

        for(var child in ipt) {

            //获取元素的状态，判断是否选中

            if(child.getState(Element.STATE_CHECKED)) {

                love.push(child.value);

            }

        }

        //获取select下option，先选取select，然后再$$找查它的子元素

        var opt = $(select[name='sex']).$$(option);

        var sex = 0;

        for(var child in opt) {

            //判断元素是否选中

            if(child.getState(Element.STATE_CHECKED)) {

                sex = child.value;

            }

        }

        //获取简介

        var desc = $(textarea[name='desc']).value.trim();

        //表单数据

        var formData = {

            "name": name,

            "pwd": pwd,

            "love": love,

            "sex": sex,

            "desc": desc

        };

        //我们把从表单中的数据获取，并转成json字符串

        //调用go中定义的函数reg，这样go中就可以获取到ui中的数据了。

        view.reg(JSON.stringify(formData));

    });

</script>

</body>

</html>

demo7.go代码如下：

package main;

import (

	"github.com/sciter-sdk/go-sciter/window"

	"github.com/sciter-sdk/go-sciter"

	"log"

	"fmt"

)

func defFunc(w *window.Window) {

	//注册dump函数方便在tis脚本中打印数据

	w.DefineFunction("dump", func(args ...*sciter.Value) *sciter.Value {

		for _, v := range args {

			fmt.Print(v.String() + " ");

		}

		fmt.Println();

		return sciter.NullValue();

	});

	//注册reg函数，用于处理注册逻辑，这里只是简单的把数据打印出来

	w.DefineFunction("reg", func(args ...*sciter.Value) *sciter.Value {

		for _, v := range args {

			fmt.Print(v.String() + " ");

		}

		fmt.Println();

		return sciter.NullValue();

	});

}

func main() {

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

	if err != nil {

		log.Fatal(err);

	}

	w.LoadFile("demo7.html");

	w.SetTitle("tiscript脚本学习");

	defFunc(w);

	w.Show();

	w.Run();

}

运行结果如下：

拿到了前端UI传入的json数据，后端go就可以通过解析该json，来进行相应处理，比如存入mysql数据库等等。

go语言使用go-sciter创建桌面应用(六) Element元素操作和Event事件响应的更多相关文章

go语言使用go-sciter创建桌面应用(二) ui元素查找，增加，删除，修改
我们可以通过go-sciter给我们提供的方法,方便的对html,css编写的UI界面进行增删改查. demo3.go代码如下: package main; import ( "github ...
go语言使用go-sciter创建桌面应用(三) 事件处理，函数与方法定义，go与tiscript之间相互调用
sciter处理脚本tiscript,用于处理UI交互中的一些逻辑,跟js很像,但又有点区别,对前端熟悉的人应该能很快上手. tiscrip脚本文档 https://sciter.com/develo ...
go语言使用go-sciter创建桌面应用(七) view对象常用方法，文件选择，窗口弹出，请求
view对象的详细文档请看: https://sciter.com/docs/content/sciter/View.htm demo9.html代码如下: <!DOCTYPE html> ...
Ubuntu创建桌面快捷方式
默认情况下，ubuntu会将自动安装的软件快捷方式保存在/usr/share/applications目录下，如果我们要创建桌面快捷方式，只需要右键-复制-桌面就Ok，如图：上面的方法是通过系统自 ...
Windows中创建桌面快捷方式
Windows中创建桌面快捷方式 -------------- -------------- -------------- --------------
robot创建桌面图标（转载）
桌面ride图标,安装之后会自动创建(偶尔也会创建失败),创建桌面图标方法如下: 1. 新建快捷方式在桌面右击鼠标,弹出的菜单选择新建-快捷方式 ,然后在"请键入对象"的位置输 ...
Qt之创建桌面和开始菜单快捷方式
将安装好的酷狗拷贝到C:\data目录中 1.创建桌面快捷方式 QFile::link("C:/data/KuGou.exe", QStandardPaths::writableL ...
Swift3.0语言教程使用编码创建和初始化字符串
Swift3.0语言教程使用编码创建和初始化字符串使用编码创建和初始化字符串创建和初始化字符串除了可以使用上文中提到的方法外,还可以使用init(coder:)方法,此方法一般不常使用,其语法形式 ...
Swift3.0语言教程使用指针创建和初始化字符串
Swift3.0语言教程使用指针创建和初始化字符串 Swift3.0语言教程使用指针创建和初始化字符串苹果的Swift团队花了不少功夫来支持C的一些基础特性.C语言中为我们提供了指针,Swift也不例 ...

随机推荐

PostgresQL 中有没有rownum这样的，显示结果集的序号
select * from (select row_number() over() as rownum,tablename from pg_tables) t where rownum<10;
[cocos2d-x]移动平台游戏开发(图)
FreeMind的.mm文件下载: http://yunpan.cn/cfL3QrrQVkVTd (提取码:a125)
Swift的UILabel的一些属性
let label = UILabel(frame: CGRectMake(,,,)) label.backgroundColor = UIColor.redColor() label.text = ...
Oracle Error
1. TNS:listener does not currently know of service requested in connect descriptor 数据库连接出错
SSM综合练习
CRM系统 CRM项目外观 1. 开发环境 IDE: Eclipse Neon Release (4.6.0) Jdk: 1.8 数据库: MySQL 2. 创建数据库创建crm数据库,这里使用的是 ...
PPT的感想
①double:使用double类型的数值进行计算, 其结果是不精确的.因为double类型的数值占用64个二进制数,除去最高位表示正负符号的位,在最低位上一定会与实际数据存在误差. 这个涉及到二进制 ...
JVM致命错误日志(hs_err_pid.log)分析
当jvm出现致命错误时,会生成一个错误文件 hs_err_pid<pid>.log,其中包括了导致jvm crash的重要信息,可以通过分析该文件定位到导致crash的根源,从而改善以保证 ...
opencv 学习笔记
Opencv 笔记路径问题: 路径输入:Opencv载Qt中不能出现汉字,路径也不能出现汉字在vs中可以出现. (”D:/QTopencv/.1jpg”)=(”D:\\QTopencv\\.1jpg ...
03_java基础（八）之static关键字与代码块
20\21.static关键字 /** * static关键字 * 1.用static修饰后的方法,称为静态方法. * 2.静态的方法特点,可以使用类名.方法名称调用方法 * 3.静态方法只能调用 ...
metasploit framework（二）：记一次入侵
msfconsole use 其中一个 exploit前台执行注入后台执行shell 加-j 通过sessions查看后台执行的shell,可以看到这个会话的id号为2 进入会话,sessions ...

go语言使用go-sciter创建桌面应用(六) Element元素操作和Event事件响应

go语言使用go-sciter创建桌面应用(六) Element元素操作和Event事件响应的更多相关文章

随机推荐

热门专题