aardio中使用HTMLayout构建页面

发表于 | 分类于
aardio中使用HTMLayout构建页面

前言

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;
/*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文件

项目中新建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;
/*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();

定时刷新

开发的过程中,为了修改代码后能够及时看到效果，可以用如下方式

1
2
3
4
5
winform.setInterval(
    1000,function(){
        wbLayout.go("\html\main.html");
    }
);

窗口圆角透明

方式1

1
2
3
4
5
import win.ui;
/*DSG{{*/
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;

禁止拖动的地方

1
-command:disabled;

点击事件

窗口按钮自定义时要注意把窗口外观中的边框设置为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;
/*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

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;
/*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即可。

示例

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;
/*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();

加载页面时传值

1
2
3
4
wbLayout.go("\html\main.aardio",{
  a="hello";
  b=123;
});

模板中取值

1
<?= request.get["a"] ?>

二维码示例

首先在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)  );//输出图像

页面中引用传值

1
2
3
wbLayout.html = /**
<img src="\images\qrcode.aardio?data=www.aardio.com&level=2&width=300" style="margin:0 auto;"> 
**/