layui做界面在aardio中使用交互学习

By admin at 2019-08-11 • 0人收藏 • 378人看过

winform的控件一般能满足日常的需求, 但是有些时候需要更漂亮的界面,那么就不太适合了

layui作为一个成熟的web控件, 提供的控件应该可以满足大部分需求了.

下面是本人从零开始学习layui在aardio中怎么使用, 记录下来供以后忘掉的时候查阅


1, 去layui官方下载最新的组件

https://res.layui.com/static/download/layui/layui-v2.5.4.zip

2, 在aardio中创建一个空的工程

3, 工程树中添加一个名字为layui的虚拟目录

4, 将下载到的layui压缩包里的layui文件夹里面的东西都解压到上面的目录中

5, 右键同步目录

6, 在工程树的layui文件夹下新建一个index.aardio代码文件

7, 去layui官方文档里查看初步使用方法 https://www.layui.com/doc/

可以看到官方提供了一个简单的提示框示例, 那么, 就把这个代码全盘复制到index.aardio文件里去

8, 打开aardio工程的主文件, main.aardio 在里面添加web功能代码

import web.blink.form;
import wsock.tcp.simpleHttpServer;

var wb = web.blink.form(mainForm);
wb.go(wsock.tcp.simpleHttpServer.startUrl("/layui/index.aardio"))

上面为什么要把html文件写入到aardio后缀里面?

这样做可以在aardio中直接打开修改, 不用外部编辑器了

image.png

7 个回复 | 最后更新于 4 天前
2019-08-12   #1

为了方便以后在aar中手写layui的html代码, 我写了一个针对layui中用到的类名的智能提示库

后面会慢慢更新这个库, 方便以后的书写,

//layui CSS库
namespace layui;
/**intellisense(_layui)
.body = @<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="utf-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">\n  <title>开始使用layui</title>\n  <link rel="stylesheet" href="../layui/css/layui.css">\n  <script src="../layui/layui.js"></script>\n</head>\n<body>\n__\n</body>\n</html>
.onmousedown = @onmousedown="javascript: external.__;" 
.onmouseup = @onmouseup="javascript: external.__;"
.onclick = @onclick="javascript: external.__;"
.div = @<div class="_layui__">\n</div>
.ul = @<ul class="_layui__">\n</ul>
.li = @<li class="_layui__">\n</li>
.dl = @<dl class="_layui__">\n</dl>
.dd = @<dd class="_layui__">\n</dd>
.label = @<label class="layui-form-label">__</label>
.inputText = @<input type="text" class="layui-input" name="__" required  lay-verify="required" placeholder="请输入标题">
.inputPassWord = @<input type="password" class="layui-input" name="__" required  lay-verify="required" placeholder="请输入密码">
.inputSelect = @<div class="layui-input-block">\n	<select name="city" lay-verify="required">\n		<option value=""></option>\n		<option value="0">北京</option>\n	</select>\n</div>
.href = @<a href="javascript:__">你的内容</a>
.container = @layui-container /*固定容器宽度*/
.fluid = @layui-fluid /*不固定容器宽度*/
.row = @layui-row /*定义行*/
.bg = 背景色
.col = 列属性
.icon = @layui-icon /*定义图标*/
.style = @style="font-size: 30px; color: #1E9FFF;" /*单独定义类型*/
.icon = 图标库
.form = 表单元素
end intellisense**/

/**intellisense(_layui.bg)
.red = @layui-bg-red /*红色*/
.orange = @layui-bg-orange /*橙色*/
.green = @layui-bg-green /*绿色*/
.cyan = @layui-bg-cyan /*青色*/
.blue = @layui-bg-blue /*蓝色*/
.black = @layui-bg-black /*黑色*/
.gray = @layui-bg-gray /*灰色*/
end intellisense**/

/**intellisense(_layui.col)
.xs = 超小屏幕,如手机
.sm = 小屏幕,如平板
.md = 桌面中等屏幕
.lg = 桌面大型屏幕
.space = 列间距
.offset = 列偏移
end intellisense**/

/**intellisense(_layui.col.xs)
.one = @layui-col-xs1
.two = @layui-col-xs2
.three = @layui-col-xs3
.four = @layui-col-xs4
.five = @layui-col-xs5
.six = @layui-col-xs6
.seven = @layui-col-xs7
.eight = @layui-col-xs8
.nine = @layui-col-xs9
.ten = @layui-col-xs10
.eleven = @layui-col-xs11
.twelve = @layui-col-xs12
end intellisense**/

/**intellisense(_layui.col.sm)
.one = @layui-col-sm1
.two = @layui-col-sm2
.three = @layui-col-sm3
.four = @layui-col-sm4
.five = @layui-col-sm5
.six = @layui-col-sm6
.seven = @layui-col-sm7
.eight = @layui-col-sm8
.nine = @layui-col-sm9
.ten = @layui-col-sm10
.eleven = @layui-col-sm11
.twelve = @layui-col-sm12
end intellisense**/

/**intellisense(_layui.col.md)
.one = @layui-col-md1
.two = @layui-col-md2
.three = @layui-col-md3
.four = @layui-col-md4
.five = @layui-col-md5
.six = @layui-col-md6
.seven = @layui-col-md7
.eight = @layui-col-md8
.nine = @layui-col-md9
.ten = @layui-col-md10
.eleven = @layui-col-md11
.twelve = @layui-col-md12
end intellisense**/

/**intellisense(_layui.col.lg)
.one = @layui-col-lg1
.two = @layui-col-lg2
.three = @layui-col-lg3
.four = @layui-col-lg4
.five = @layui-col-lg5
.six = @layui-col-lg6
.seven = @layui-col-lg7
.eight = @layui-col-lg8
.nine = @layui-col-lg9
.ten = @layui-col-lg10
.eleven = @layui-col-lg11
.twelve = @layui-col-lg12
end intellisense**/

/**intellisense(_layui.col.space)
.s1 = @layui-col-space1
.s3 = @layui-col-space3
.s5 = @layui-col-space5
.s8 = @layui-col-space8
.s10 = @layui-col-space10
.s12 = @layui-col-space12
.s15 = @layui-col-space15
.s18 = @layui-col-space18
.s20 = @layui-col-space20
.s22 = @layui-col-space22
.s28 = @layui-col-space28
.s30 = @layui-col-space30
end intellisense**/

/**intellisense(_layui.col.offset)
.one = @layui-col-offset1
.two = @layui-col-offset2
.three = @layui-col-offset3
.four = @layui-col-offset4
.five = @layui-col-offset5
.six = @layui-col-offset6
.seven = @layui-col-offset7
.eight = @layui-col-offset8
.nine = @layui-col-offset9
.ten = @layui-col-offset10
.eleven = @layui-col-offset11
.twelve = @layui-col-offset12
end intellisense**/

/**intellisense(_layui.icon)
.rate = @layui-icon-rate /*空心五星*/
.rateHalf = @layui-icon-rate-half /*半空心五星*/
.rateSolid = @layui-icon-rate-solid /*实心五星*/
end intellisense**/

/**intellisense(_layui.form)
.item = @layui-form-item /*定义表单项*/
.label = @layui-form-label /*静态文本*/

end intellisense**/

看似很无聊的事情, 但是对我这种html从没研究过的人来说,确实在aar里使用方便了不少

下面的html测试代码都是根据这个库来写的.

2019-08-12   #2

用到html基本上就是用无边框的窗口, 那么首先就是要实现layui模拟拖动标题栏了

首先, 在界面代码里添加交互扩展

wb.external = {
	hitcaption = function(){
		mainForm.hitCaption()
	};	
};

定义完之后, 就可以在html里面利用javascript来调用这个函数了.

下面编写基于layui的html代码文件:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <script src="../layui/layui.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header" onmousedown="javascript: external.hitcaption();">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域(可配合layui已有的水平导航) -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">所有商品</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="javascript:;">列表三</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">解决方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市场</a></li>
        <li class="layui-nav-item"><a href="">发布商品</a></li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">内容主体区域</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});
</script>
</body>
</html>

image.png

7 天前   #3


有个问题,主界面main.aardio中的变量怎么给网页文件传递?

网页文件如何用ajax 给wsock.tcp.simpleHttpServer.startUrl发送数据?
7 天前   #4

回复#3 @dsp2138 :

上面不是说了吗 用wb.external

就如你所问:

你想让网页获取变量,main.aardio里定义

wb.external = {
    get变量a = function(){
        return mainform.edit.text;
    };
}

然后网页里用js获取,用external.get变量a()


想要网页发送数据给aar, 同理

wb.external = {
    网页传过来数据了 = function(a,b,c){
        //把传过来的数据求和
        mainform.edit.text = a+b+c;
    };
}

网页里js同样用external.网页传过来数据了(12,34,56);就可以了啊

至于你想怎么灵活传递数据这个就是你逻辑需要考虑的问题了.


7 天前   #5

回复#3 @dsp2138 :

追加一点提示, 你可以再aar文件里追加网页中的js函数, 然后就想给谁交互就和谁了

image.png



4 天前   #6

还有个问题,是关于doScript的用法问题
假如现在执行wb.doScript(`alert(111`)

那么在网页一加载就会弹出js原生的警告框。

但如果网页中先加载layui,也有函数

    aardio_call=function(){

wb.doScript(`layer.msg('Hello World')`)

    }


网页中调用 external.aardio_call(),而且layer定义时也去掉了 var,变为全局变量。

不管是web.form还是kit运行后都会出错,这是为何。

而我把aardio_call放在一个button里,假如这样

<button type="button" class="layui-btn layui-btn-sm" onclick="javascript:external.aardio_call('javascript:external.hello伪代码中调用')">开始使用</button>


这样被动点击在运行就正常了。

这是怎么回事?

如何让layui的元素主动执行,而不是被动?

4 天前   #7

回复#6 @dsp2138 :

不理解你到底想做啥? 什么叫主动?

你的意思是,网页html里主动调用aar?

网页里如果你不去手动点, 想要它自己主动调用aar, 那么你就在html里加个定时器,或者网页代码里加while , 里面循环判定执行啥啥的.

js是单线程的, 你难道还想要它跑多线程?


推荐你去aar的C大大的社区提问, bbs.aardio.org

登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
Htmlayout皮肤Htmlayout皮肤引擎介绍
黑猫Aar教程网:简码编程
C大Aardio论坛:Aar爱好者论坛
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...