前言
aardio构建界面有四种方式
- winform
- web.form
- web.kit/web.blink
- htmlayout
HTMLayout的功能特别强大，它相当于使用了HTML和CSS，但是干掉了JS(JS使用aardio语法实现)，
相比于使用Webview或Chrome加载页面，HTMLayout占用的内存会少的多。
注意样式的语法和CSS的语法是不太一样的。
官方文档：https://bbs.aardio.com/forum.php?mod=forumdisplay&fid=128
简单示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| import win.ui;
var winform = win.form(text="HTMLayout 圆角样式";right=599;bottom=399;bgcolor=16777215;exmode="none";parent=...)
winform.add(
button={cls="button";text="Button";left=28;top=24;right=89;bottom=56;z=1};
myview={cls="custom";text="自定义控件";left=36;top=80;right=546;bottom=232;z=2}
)
import web.layout;
import web.layout.behavior.windowCommand;
var wbLayout = web.layout(winform.myview)
wbLayout.html =
wbLayout.onButtonClick = {
mybtn = function (ltTarget,ltEle,reason,behaviorParams) {
wbLayout.getEle("inputtxt").value="123";
}
}
winform.show()
win.loopMessage();
|
分离HTML文件
项目中新建html文件夹
其中添加main.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <html>
<head>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#inputtxt {
width: 99%;
height: 120px;
border: 1px solid;
border-radius: 2px;
box-sizing: border-box;
}
#img {
width: 12px;
height: 20px;
cursor: pointer;
}
</style>
<head>
<body>
<plaintext type="textarea" #inputtxt></plaintext>
<button #mybtn>修改内容</button>
<div><img #img src="/res/navi_back.png"></div>
</body>
</html>
|
代码中就可以这样写了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| import win.ui;
var winform = win.form(text="HTMLayout 圆角样式";right=599;bottom=399;bgcolor=16777215;exmode="none";parent=...)
winform.add(
button={cls="button";text="Button";left=28;top=24;right=89;bottom=56;z=1};
myview={cls="custom";text="自定义控件";left=36;top=80;right=546;bottom=232;z=2}
)
import web.layout;
import web.layout.behavior.windowCommand;
var wbLayout = web.layout(winform.myview)
wbLayout.go("\html\main.html");
wbLayout.onButtonClick = {
mybtn = function (ltTarget,ltEle,reason,behaviorParams) {
wbLayout.getEle("inputtxt").value="123";
}
}
winform.show()
win.loopMessage();
|
定时刷新
开发的过程中,为了修改代码后能够及时看到效果，可以用如下方式
1
2
3
4
5
| winform.setInterval(
1000,function(){
wbLayout.go("\html\main.html");
}
);
|
窗口圆角透明
方式1
1
2
3
4
5
| import win.ui;
var winform = win.form(bgcolor=16777214;text="HTMLayout";right=599;bottom=399;border="none";exmode="none";parent=...)
winform.transparent(,16777214)
|
注意这种方式是把某个颜色彻底剔除掉从而变成透明，所以色值要注意两点
- 颜色一定要是界面中不会用到的（这里就是使用的白色-1的值）
- 颜色不能与内部窗口的颜色相差太大，因为窗口衔接的地方的颜色会是中间色，导致去不干净。
页面中一定要设置html的背景，否则会为白色。
1
2
3
4
| html {
background-color: transparent;
}
|
HTMLLayout是不支持overflow: hidden;的，所以如果两个区域重叠时，内部的也要设置圆角。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| #outer {
width: 100%;
height: 100%;
background-color: #f3f3f3;
border-radius: 30px;
}
#header {
background-color: #aaaaaa;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
width: 100%;
height: 30px;
flow: horizontal;
behavior: windowCommand;
}
|
方式2
示例代码：
1
2
3
| import win.region.bitmap;
var rgnBitmap = win.region.bitmap("\ui.bmp");
rgnBitmap.updateWindow(winform.hwnd)
|
参数说明：
1
| win.region.bitmap( 位图,透明色,容差 )
|
位图: 该参数可以是位图文件路径、或位图句柄。
透明色：可选参数默认为0也就是黑色，
容差：可选参数，默认为 0x010101，按Blue,Green,Red 的顺序分三组指定透明色容差。
参数一也可以指定一个窗体对象，该窗体应当是无边框窗口并指定了背景图。
win.region.bitmap() 可获取背景图并根据透明色创建对应的绘图区域，
示例代码：
1
2
| import win.region.bitmap;
win.region.bitmap(winform).updateWindow()
|
头部拖动
设置这个节点的behavior行为为windowCommand窗体消息(这个是aardio内置好的)
1
2
3
4
5
6
| #header{
background-color:red;
width:100%;
height:30px;
behavior:windowCommand;
}
|
在html中定义这个节点的功能
1
2
3
4
5
6
| <html>
<link href="main.css" rel="stylesheet" type="text/css"/>
<body>
<div #header command="window-caption"> </div>
</body>
</html>
|
window-caption是aardio内置的htmlayout消息封装, 直接用即可
注意要引用
1
| import web.layout.behavior.windowCommand;
|
禁止拖动的地方
点击事件
窗口按钮自定义时要注意把窗口外观中的边框设置为none
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import win.ui;
var winform = win.form(text="HTMLayout 圆角样式";right=599;bottom=399;bgcolor=16777215;border="none";exmode="none";parent=...)
winform.add(
myview={cls="custom";text="自定义控件";left=0;top=0;right=600;bottom=400;db=1;dl=1;dr=1;dt=1;z=1}
)
import web.layout;
import web.layout.behavior.windowCommand;
var wbLayout = web.layout(winform.myview)
wbLayout.go("\html\main.html");
wbLayout.onButtonClick = {
closewin = function (ltTarget,ltEle,reason,behaviorParams) {
winform.close();
};
}
winform.show()
win.loopMessage();
|
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <html>
<head>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f3f3f3;
}
#header {
background-color: #aaaaaa;
width: 100%;
height: 30px;
flow: horizontal;
behavior: windowCommand;
}
#space {
width: *;
height: 100%;
}
#closewin {
behavior: 'clickable';
cursor: pointer;
height: 100%;
background-color: green;
color: white;
vertical-align: middle;
text-align: center;
width: 80px;
}
#closewin:hover {
background-color: red;
}
</style>
<head>
<body>
<div #header command="window-caption">
<div #space></div>
<div #closewin>
关闭
</div>
</div>
</body>
</html>
|
要想我们的DIV响应事件
添加behavior: 'clickable';即可。
所有事件说明：https://bbs.aardio.com/forum.php?mod=viewthread&tid=7156
悬浮替换图片
1
2
3
4
5
6
7
8
9
10
11
12
| #skin{
background-image:url(/img/btn_Skin_normal.png);
width:28px;
height:20px;
margin:-1px;
}
#skin:hover{
background-image:url(/img/btn_Skin_highlight.png);
}
#skin:active{
background-image:url(/img/btn_Skin_down.png);
}
|
Flex布局
htmllayout是不支持flex布局的，但是他有一套类似Flex布局的机制。
https://bbs.aardio.com/forum.php?mod=viewthread&tid=7159
模板语法
如果我们要实现列表数据就必须要使用模板语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| import win.ui;
var winform = win.form( text="HTMLayout 使用模板语法" )
import web.layout;
var wbLayout = web.layout(winform)
wbLayout.html =
winform.show()
win.loopMessage();
|
页面中直接使用这样的模板语法是生效的，但是如果是加载的html文件就不生效了。
我们只需要把文件后缀改为aardio即可
这样语法高亮和代码提示就失效了，我们可以把aardio的代码提示设置为html即可。
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| import win.ui;
var winform = win.form(text="HTMLayout";right=599;bottom=399;bgcolor=16777214;border="none";exmode="none";parent=...)
winform.add(
myview={cls="custom";text="自定义控件";left=0;top=0;right=600;bottom=400;db=1;dl=1;dr=1;dt=1;z=1}
)
winform.transparent(,16777214)
import web.layout;
import web.layout.behavior.windowCommand;
var wbLayout = web.layout(winform.myview)
wbLayout.go("\html\main.aardio",{
a="hello";
b=123;
});
wbLayout.onButtonClick = {
closewin = function (ltTarget,ltEle,reason,behaviorParams) {
winform.close();
};
}
winform.show()
win.loopMessage();
|
加载页面时传值
1
2
3
4
| wbLayout.go("\html\main.aardio",{
a="hello";
b=123;
});
|
模板中取值
二维码示例
首先在aardio工程中添加一个模板文件，例如 /images/qrcode.aardio，代码如下:
1
2
3
| import qrencode.bitmap;
var qrBmp = qrencode.bitmap(request.get.data,tonumber(request.get.version),tonumber(request.get.level) );
print( qrBmp.copyBitmapString(tonumber(request.get.width) : qrBmp.width,"*.jpg",100) );
|
页面中引用传值