搜索
查看: 2713|回复: 8

[源码分享] aardio配合sciter的tis快捷提交表单

[复制链接]

12

主题

82

帖子

759

积分

培训班

积分
759
QQ
发表于 2018-4-15 13:10:47 | 显示全部楼层 |阅读模式
以前用hl的时候,提交表单需要用aardio取数据再判断,现在配合sciter好像更好了。数据先在sciter那边的tis处理好了直接传json数据过来,这边只需要提交和跳转就行了。
提交的地址自己找合适的,我本地搭建自己调试自己的。
  1. //脚本调用本地函数
  2. import win.ui;
  3. /*DSG{{*/
  4. var winform = win.form(text="Sciter 脚本调用本地函数";right=320;bottom=240;border="none";parent=...)
  5. winform.add()
  6. /*}}*/

  7. import web.sciter;
  8. import console;
  9. import web.sciter.behavior.windowCommand;
  10. import web.rest.jsonLiteClient;
  11.   
  12. http = web.rest.jsonLiteClient();   



  13. var wbSciter = web.sciter( winform );

  14. import web.sciter.debug;
  15. wbSciter.attachEventHandler( web.sciter.debug );



  16. //调用本地函数,提交数据
  17. wbSciter.external = {
  18.     scriptCallSubmit = function(scOwner,str){
  19.             var  str = http.post("http://api.jbp.com/admin/login/",str);
  20.         console.debug(str);
  21.     }
  22. }










  23. wbSciter.html =/***
  24. <!doctype html>
  25. <html>
  26. <head>
  27. <style>
  28. body{height: 100%;width: 100%;margin: 0px;padding: 0px;background:#fff;overflow:hidden;font-size:14px;}
  29. #header{behavior:windowCommand;width: 100%; height: 60px; background-color: #188AE2;}
  30. #header .logo{width: 100%; text-align: center;color:#fff;line-height:60px;font-size:16px;letter-spacing: 20px}
  31. #header .tool{width: 20px;position: absolute;top:0px;right: 0px;}
  32. .tool a[command]{display:inline-block; width:max-intrinsic;height:14px;font-family:"Marlett";font-size:14px;padding:4px;color:#fff;cursor:default;}
  33. .tool a[command]:hover{background:#6ebccf;}
  34. .tool a[command]:active{background:#FF0000;}
  35. .tool a[command="window-restore"]{content:"2";}
  36. #footer{width:  100%; height: 40px; padding: 5px; text-align: center;}
  37. #footer .btn{width: 50%;height: 18px;margin-bottom: 10px;}
  38. #bodyer{flow:" b c";padding: 5px;}
  39. #bodyer .reg{flow:vertical; width: 100px;float: "c";}
  40. #bodyer .from{width: *;height: *;float: "b";}
  41. .reg a{display: block; font-size: 12px; height: 30px; margin: 2px 10px 15px 5px; line-height: 30px;}
  42. .from .username,
  43. .from .password{border: 1px solid #ccc; margin: 2px 5px 15px 5px; width: *;display:block; padding: 0; height: 30px;position: relative;}
  44. .from .username:focus,.from .username:hover,
  45. .from .password:focus,.from .password:hover{border: 1px solid #66afe9;}
  46. .from .username input,
  47. .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; }
  48. .from .username input:empty,
  49. .from .password input:empty{color: #999;}
  50. .from .text{margin: 0px 2px; color: #333; font-size: 12px; width: *;flow: horizontal;}
  51. .from .text label:nth-child(1){margin-right: 50px;}

  52. </style>

  53. <script type="text/tiscript">
  54.          $(button#msg).onClick = function()
  55.       {
  56.         var msg = String.printf("%V", $(form).value ).replace("\t","  ");
  57.                 view.scriptCallSubmit(msg);
  58.         
  59.       }

  60. </script>


  61. </head>
  62. <body>

  63. <div id="header">
  64.                 <div class="logo">注册</div>
  65.                 <div class="tool"><a command="window-close" onclick="closeWindow()">r</a></div>               
  66. </div>
  67.        
  68. <form id="bodyer">
  69.        
  70.         <div class="from">
  71.                 <div class="username">
  72.                          
  73.                         <input name="user_name" type="text" class="input" novalue="账号/手机/邮箱" >
  74.                 </div>
  75.                 <div class="password">
  76.                          
  77.                         <input name="password" type="password" class="input" novalue="登录密码">
  78.                 </div>
  79.                 <div class="text">
  80.                         <label><input type="checkbox" name="remember"> 记住密码</label>
  81.                         <label><input type="checkbox" name="autologin"> 自动登录</label>
  82.         </div>
  83.         </div>
  84.        
  85.         <div class="reg">
  86.                 <a href="">注册帐号</a>
  87.                 <a href="#">忘记密码?</a>
  88.         </div>

  89.        
  90.        
  91. </form>
  92. <div id="footer">
  93.         <button class="btn btn-success" id="msg">登录</button>
  94. </div>

  95. </body>
  96. </html>
  97. ***/



  98. winform.show()
  99. win.loopMessage();
复制代码
回复

使用道具 举报

2

主题

57

帖子

1433

积分

新手入门

积分
1433
发表于 2018-4-15 15:11:49 | 显示全部楼层
感谢分享,不过觉得这个用aardio更方便啊,没啥必要学习tiscript
回复

使用道具 举报

12

主题

82

帖子

759

积分

培训班

积分
759
QQ
 楼主| 发表于 2018-4-15 20:35:17 | 显示全部楼层
松江 发表于 2018-4-15 15:11
感谢分享,不过觉得这个用aardio更方便啊,没啥必要学习tiscript

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

使用道具 举报

2

主题

57

帖子

1433

积分

新手入门

积分
1433
发表于 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);
        }
       
}
回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
发表于 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实现的,代码很短很简洁。
回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
发表于 2018-4-15 21:56:55 | 显示全部楼层
而我们目前在本论坛看到的sciter界面,就只有你这样的
tis.png
这个界面,不知道为什么各种不对劲,
我试了一下,窗口在屏幕上也无法移动,边框阴影也没有,窗口的边界都没了,
似乎你的 tiscript  还没有做到“拿起来就能用”,“用起来省力”?!

其实你这个界面,只要在后面加几句 aardio 代码就实现这些效果了:
winform.bgcolor = 0xE28A18;

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

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

回复

使用道具 举报

3

主题

50

帖子

406

积分

培训班

积分
406
发表于 2018-4-15 22:19:00 | 显示全部楼层
Jacen.He 发表于 2018-4-15 21:56
而我们目前在本论坛看到的sciter界面,就只有你这样的

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

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

使用道具 举报

12

主题

82

帖子

759

积分

培训班

积分
759
QQ
 楼主| 发表于 2018-4-16 02:52:20 | 显示全部楼层
本帖最后由 金满斗 于 2018-4-16 02:56 编辑

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

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

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
发表于 2018-4-16 05:41:44 | 显示全部楼层
金满斗 发表于 2018-4-16 02:52
刚睡醒。
谢谢大家的回复。,
让我学到了很多。aardio本身操作元素就很方便,用sciter里 ...

这个就做的很不错了,非常好。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-10-22 04:35 , Processed in 0.078125 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表