aardio配合sciter的tis快捷提交表单

金满斗 · 发表于 2018-4-15 13:10:47

以前用hl的时候，提交表单需要用aardio取数据再判断，现在配合sciter好像更好了。数据先在sciter那边的tis处理好了直接传json数据过来，这边只需要提交和跳转就行了。
提交的地址自己找合适的，我本地搭建自己调试自己的。

//脚本调用本地函数
import win.ui;
/*DSG{{*/
var winform = win.form(text="Sciter 脚本调用本地函数";right=320;bottom=240;border="none";parent=...)
winform.add()
/*}}*/
import web.sciter;
import console;
import web.sciter.behavior.windowCommand;
import web.rest.jsonLiteClient;
http = web.rest.jsonLiteClient();
var wbSciter = web.sciter( winform );
import web.sciter.debug;
wbSciter.attachEventHandler( web.sciter.debug );
//调用本地函数，提交数据
wbSciter.external = {
scriptCallSubmit = function(scOwner,str){
var str = http.post("http://api.jbp.com/admin/login/",str);
console.debug(str);
}
}
wbSciter.html =/***
<!doctype html>
<html>
<head>
<style>
body{height: 100%;width: 100%;margin: 0px;padding: 0px;background:#fff;overflow:hidden;font-size:14px;}
#header{behavior:windowCommand;width: 100%; height: 60px; background-color: #188AE2;}
#header .logo{width: 100%; text-align: center;color:#fff;line-height:60px;font-size:16px;letter-spacing: 20px}
#header .tool{width: 20px;position: absolute;top:0px;right: 0px;}
.tool a[command]{display:inline-block; width:max-intrinsic;height:14px;font-family:"Marlett";font-size:14px;padding:4px;color:#fff;cursor:default;}
.tool a[command]:hover{background:#6ebccf;}
.tool a[command]:active{background:#FF0000;}
.tool a[command="window-restore"]{content:"2";}
#footer{width: 100%; height: 40px; padding: 5px; text-align: center;}
#footer .btn{width: 50%;height: 18px;margin-bottom: 10px;}
#bodyer{flow:" b c";padding: 5px;}
#bodyer .reg{flow:vertical; width: 100px;float: "c";}
#bodyer .from{width: *;height: *;float: "b";}
.reg a{display: block; font-size: 12px; height: 30px; margin: 2px 10px 15px 5px; line-height: 30px;}
.from .username,
.from .password{border: 1px solid #ccc; margin: 2px 5px 15px 5px; width: *;display:block; padding: 0; height: 30px;position: relative;}
.from .username:focus,.from .username:hover,
.from .password:focus,.from .password:hover{border: 1px solid #66afe9;}
.from .username input,
.from .password input{max-width: 150px;vertical-align: top; height: 20px; font-size: 12px; line-height: 30px; padding: 5px; border-radius: 0; border-width: 0; }
.from .username input:empty,
.from .password input:empty{color: #999;}
.from .text{margin: 0px 2px; color: #333; font-size: 12px; width: *;flow: horizontal;}
.from .text label:nth-child(1){margin-right: 50px;}
</style>
<script type="text/tiscript">
$(button#msg).onClick = function()
{
var msg = String.printf("%V", $(form).value ).replace("\t"," ");
view.scriptCallSubmit(msg);
}
</script>
</head>
<body>
<div id="header">
<div class="logo">注册</div>
<div class="tool"><a command="window-close" onclick="closeWindow()">r</a></div>
</div>
<form id="bodyer">
<div class="from">
<div class="username">
<input name="user_name" type="text" class="input" novalue="账号/手机/邮箱" >
</div>
<div class="password">
<input name="password" type="password" class="input" novalue="登录密码">
</div>
<div class="text">
<label><input type="checkbox" name="remember"> 记住密码</label>
<label><input type="checkbox" name="autologin"> 自动登录</label>
</div>
</div>
<div class="reg">
<a href="">注册帐号</a>
<a href="#">忘记密码?</a>
</div>
</form>
<div id="footer">
<button class="btn btn-success" id="msg">登录</button>
</div>
</body>
</html>
***/
winform.show()
win.loopMessage();

复制代码

松江 · 发表于 2018-4-15 15:11:49

感谢分享,不过觉得这个用aardio更方便啊,没啥必要学习tiscript

金满斗 · 发表于 2018-4-15 20:35:17

松江发表于 2018-4-15 15:11
感谢分享,不过觉得这个用aardio更方便啊,没啥必要学习tiscript

感觉tiscript语法和js差不多吧，基本能直接拿来就用。还有就是一些快捷方法本来就封装好了吧。因此就比aardio再处理一道省力点。

松江 · 发表于 2018-4-15 20:56:43

金满斗发表于 2018-4-15 20:35
感觉tiscript语法和js差不多吧，基本能直接拿来就用。还有就是一些快捷方法本来就封装好了吧。因此就比aa ...

以你的示例来说,就是添加事件,然后获取表单数据而已,post等都是利用aardio完成的,那么为什么不直接用呢?
比如:
wbSciter.onButtonClick = {
msg = function (scTarget,scOwner,reason,behaviorParams) {
var data = web.json.stringify(wbSciter.$1('form').value)
console.log(data)
//var str = http.post("http://api.jbp.com/admin/login/",str);
}

}

JacenHe · 发表于 2018-4-15 21:39:44

金满斗发表于 2018-4-15 20:35
感觉tiscript语法和js差不多吧，基本能直接拿来就用。还有就是一些快捷方法本来就封装好了吧。因此就比aa ...

tiscript 跟 javascript 还是有不少区别的，拿过来就能用这个是不容易的。
别人就不说，我封装了web.sciter扩展库，也仔细的看了一遍文档和范例，也写了一些简单的例子，但是我也不敢说拿起来就能用。当然我也并不认为tiscript就没有必要，体积至少比chrome内核的浏览器要小的多。

另外，我也并不认为作为一个界面引擎，用 aardio 处理一下就不省力了。
tiscript 毕竟只是用来做界面的，即使是用传统的javascript做界面，我们最终都是需要用aardio来操作、控制界面的，如果用aardio处理一下就不省力了，那这个界面引擎对 aardio 就是没有用的。

我举个例子HTMLayout就完全没有脚本语言，界面基本是完全用aardio在处理，例如 cad写的这个界面

又或者斌哥用HTMLayout做的界面

再或者dsp2138 用javascript,webkit写的界面
5aca2cac7c272[1].jpg

再或者popdes 用 plus 做的界面

界面都很漂亮，尤其是popdes的界面是纯aardio实现的，代码很短很简洁。

JacenHe · 发表于 2018-4-15 21:56:55

而我们目前在本论坛看到的sciter界面，就只有你这样的

这个界面，不知道为什么各种不对劲，
我试了一下，窗口在屏幕上也无法移动，边框阴影也没有，窗口的边界都没了，
似乎你的 tiscript 还没有做到“拿起来就能用”，“用起来省力”？！

其实你这个界面，只要在后面加几句 aardio 代码就实现这些效果了：

winform.bgcolor = 0xE28A18;

import win.ui.simpleWindow2;
win.ui.simpleWindow2(winform)

import win.ui.shadow;
win.ui.shadow(winform);

nlysh007 · 发表于 2018-4-15 22:19:00

Jacen.He 发表于 2018-4-15 21:56
而我们目前在本论坛看到的sciter界面，就只有你这样的

这个界面，不知道为什么各种不对劲，

好像就只写了一个关闭窗口

金满斗 · 发表于 2018-4-16 02:52:20

本帖最后由金满斗于 2018-4-16 02:56 编辑

刚睡醒。

谢谢大家的回复。

，
让我学到了很多。aardio本身操作元素就很方便，用sciter里的tis只是多了一种选择而已，主要是我基础差，有些没理解透。谢谢大家。
至于拿起来就用之类的话，也是说话不严谨啦。意思是语法差不多。大家的回复让我明白了很多，也知道如何取舍了。再次感谢啦。
至于说我发的不美观的，因为我这个是在我正在做的东西里分离出来的，发例子发的比较随意，本身css在另一边，发例子随便整合在一起的。因此很不好看，以后注意。
其实整体还好，上两张图。

前段时间刚把服务器端搞的七七八八。现在才开始写桌面端。
美工不好，都是用的别人的。

JacenHe · 发表于 2018-4-16 05:41:44

金满斗发表于 2018-4-16 02:52
刚睡醒。
谢谢大家的回复。，
让我学到了很多。aardio本身操作元素就很方便，用sciter里 ...

这个就做的很不错了，非常好。

		自动登录	找回密码
密码			注册会员