aardio构建界面有四种方式
HTMLayout的功能特别强大,它相当于使用了HTML和CSS,但是干掉了JS(JS使用aardio语法实现),
相比于使用Webview或Chrome加载页面,HTMLayout占用的内存会少的多。
注意样式的语法和CSS的语法是不太一样的。
官方文档:https://bbs.aardio.com/forum.php?mod=forumdisplay&fid=128
import win.ui;
/*DSG{{*/
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 = /**
<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>
**/
wbLayout.onButtonClick = {
mybtn = function (ltTarget,ltEle,reason,behaviorParams) {
wbLayout.getEle("inputtxt").value="123";
}
}
winform.show()
win.loopMessage();
项目中新建html文件夹
其中添加main.html
<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>
代码中就可以这样写了
import win.ui;
/*DSG{{*/
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();
开发的过程中,为了修改代码后能够及时看到效果,可以用如下方式
winform.setInterval(
1000,function(){
wbLayout.go("\html\main.html");
}
);
import win.ui;
/*DSG{{*/
var winform = win.form(bgcolor=16777214;text="HTMLayout";right=599;bottom=399;border="none";exmode="none";parent=...)
/*}}*/
winform.transparent(,16777214)
注意这种方式是把某个颜色彻底剔除掉从而变成透明,所以色值要注意两点
页面中一定要设置html的背景,否则会为白色。
html {
background-color: transparent;
/*网页背景透明*/
}
HTMLLayout是不支持overflow: hidden;
的,所以如果两个区域重叠时,内部的也要设置圆角。
#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;
}
示例代码:
import win.region.bitmap;
var rgnBitmap = win.region.bitmap("\ui.bmp");
rgnBitmap.updateWindow(winform.hwnd)
参数说明:
win.region.bitmap( 位图,透明色,容差 )
位图: 该参数可以是位图文件路径、或位图句柄。 透明色:可选参数默认为0也就是黑色, 容差:可选参数,默认为 0x010101,按Blue,Green,Red 的顺序分三组指定透明色容差。
参数一也可以指定一个窗体对象,该窗体应当是无边框窗口
并指定了背景图
。
win.region.bitmap()
可获取背景图并根据透明色
创建对应的绘图区域,
示例代码:
import win.region.bitmap;
win.region.bitmap(winform).updateWindow()
设置这个节点的behavior行为为windowCommand窗体消息(这个是aardio内置好的)
#header{
background-color:red;
width:100%;
height:30px;
behavior:windowCommand;
}
在html中定义这个节点的功能
<html>
<link href="main.css" rel="stylesheet" type="text/css"/>
<body>
<div #header command="window-caption"> </div>
</body>
</html>
window-caption是aardio内置的htmlayout消息封装, 直接用即可
注意要引用
import web.layout.behavior.windowCommand;
禁止拖动的地方
-command:disabled;
窗口按钮自定义时要注意把窗口外观
中的边框
设置为none
import win.ui;
/*DSG{{*/
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
<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
#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);
}
htmllayout是不支持flex布局的,但是他有一套类似Flex布局的机制。
https://bbs.aardio.com/forum.php?mod=viewthread&tid=7159
如果我们要实现列表数据就必须要使用模板语法
import win.ui;
/*DSG{{*/
var winform = win.form( text="HTMLayout 使用模板语法" )
/*}}*/
import web.layout;
var wbLayout = web.layout(winform)
wbLayout.html = /**
<!doctype html>
<html><head></head><body>
<? for(i=1;100;1){ ?>
<div>
循环次数 <? = i ?> 次 <? = time() ?>
</div>
<? } ?>
</body>
</html>
**/
winform.show()
win.loopMessage();
页面中直接使用这样的模板语法是生效的,但是如果是加载的html文件就不生效了。
我们只需要把文件后缀改为aardio即可 这样语法高亮和代码提示就失效了,我们可以把aardio的代码提示设置为html即可。
示例
import win.ui;
/*DSG{{*/
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();
加载页面时传值
wbLayout.go("\html\main.aardio",{
a="hello";
b=123;
});
模板中取值
<?= request.get["a"] ?>
二维码示例
首先在aardio工程中添加一个模板文件,例如 /images/qrcode.aardio
,代码如下:
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) );//输出图像
页面中引用传值
wbLayout.html = /**
<img src="\images\qrcode.aardio?data=www.aardio.com&level=2&width=300" style="margin:0 auto;">
**/