本文首发于: https://chengxu.xyz/t/396
下面代码编写中使用了: aardio编程软件 , editplus文本编辑器
ui界面参考:Htmlayout早期的一个摸索作品_QQ282881515的博客-CSDN博客
本文目的: 一步一步手写html和css 代码, 通过编写过程来学习和思考htmlayout应该怎么用
这里说下, aardio是一款很不错的国产编程软件, 集成了很多使用的功能, 免费开源, 其中就有htmlayout和sciter的扩展库, 使用这个扩展库可以方便的实现用htmlayout显示漂亮的ui.
这其中, 用到了css和html的一些知识(不要害怕, 非常少的知识点, 懂了下面这些基本就可以写出很多UI界面了)
另外一些htmlayout的csss! 知识和使用方法, 去aardio的官方论坛看一下教程就能熟悉基本操作了, 至于熟练运用就需要大量的实践和码字了, 偷不得懒.
言归正传, 正式开始.
-
新建mainform界面
-
导入htmlayout库
-
工程中添加html目录和img子目录
-
打开工程文件夹, 在html目录里新建main.html和main.css两个文件
-
同步html目录
mainform.aardio代码如下
import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程7";right=959;bottom=591)
mainForm.add()
/*}}*/
import web.layout;
import web.layout.behavior.windowCommand;
var wb = web.layout(mainForm);
wb.go("\html\main.html");
mainForm.show();
return win.loopMessage();
双击main.html用editplus打开, 输入基本的代码如下
<html>
<body>
hello aar
</body>
</html>
此时, 运行工程, 可以看到界面输出
说明基本框架创建完成.
2.
由于用htmlayout来做界面, 那么需要把窗体设置为无边框
设置完成后, 界面不能再被调整大小了, 那么在mainform.aardio中需要加入
import win.ui.resizeBorder;
win.ui.resizeBorder(mainForm);
那么, 如果下面修改了html代码, 每次去启动下工程也是个麻烦事, 而且不利于实时的看到修改后效果
我这里在界面里添加个定时器, 定时去刷新界面, 这样就可以模拟实时效果了
mainForm.setInterval(
1000,function(){
wb.go("\html\main.html");
}
);
下面正式开始:
首先把html和css文件关联起来, html里用link语句
<html>
<link href="main.css" rel="stylesheet" type="text/css"/>
<body>
hello aardio123456
</body>
</html>
如果记不住那么长的link语句, 那么还有另外一种方式,同样能引用到main.css样式到文件中
<style>
@import "main.css";
</style>
同时, 把准备好的一些图片放入到img目录里
我们在css里设置body节点的属性
-
设置整个body铺满界面, 外边距为0
-
设置body的背景图片为预设好的skin.png
body{ margin:0px; background-image:url(img/skin.png); }
我们看到这个图片比界面小, 所以它连续平铺来铺满了整个界面, 但是一般界面上面不会这么做, 一般都是用九宫格拼图
那么需要增加 背景模式为九宫格
background-repeat:expand stretch-left stretch-middle stretch-right; background-position:0 0 0 0;
可以看到此时一张图铺满了界面, 但是貌似整个图片是被拉伸的, 像素改变导致模糊了,这时候需要改变position属性里面的值, 来保证图片中的树芽部分是清晰的
改为(上右下左)
background-position:280 2 2 680;
这里就需要去理解了九宫格再去看这张图片, 我们拉伸了left , middle , right的九宫格部分, 而四个角我们是不变的, 无论你怎么去调整界面大小, 四个顶点格图片不变.如下动态演示
增加界面头部拖动功能
首先, 在html中添加
<div #header> </div>
以上,增加了id为header的节点, 在css中设置这个节点的属性
#header{ background-color:red; width:100%; height:30px; }
红色充满了界面, 而且调整界面大小也不影响
设置这个节点的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消息封装, 直接用即可
此时可以看到界面可以被拖动了
下面在顶部增加窗体的最小化和关闭按钮
html中增加这三个功能的div
<html> <link href="main.css" rel="stylesheet" type="text/css"/> <body> <div #header command="window-caption"> <div #skin /> <div #btn-min /> <div #btn-close /> </div> </body> </html>
主要是在css里定义他们的分布和属性
#skin{ background-image:url(img/btn_Skin_normal.png); width:28px; height:20px; }
看到上面的小衣服了, 再接再厉, 继续添加
#skin{ background-image:url(img/btn_Skin_normal.png); width:28px; height:20px; } #btn-min{ background-image:url(img/btn_mini_normal.png); width:28px; height:19px; } #btn-close{ background-image:url(img/btn_close_normal.png); width:39px; height:19px; }
成这样了..... , 看了css的文章知道, div是block(块) , 会独占一行, 所以紧接着的都会自动往下走, 那么就需要设置flow属性了,在它们的父节点header里添加横向浮动
#header{ //background-color:red; width:100%; height:30px; flow:horizontal; behavior:windowCommand; }
横过来了, 但是都挤在左边, 怎么弄到右边去?
很遗憾, htmlayout没有这样的flow属性, 那么怎么实现这样的功能?
可以反其道而行之, 我们假设有四个按键, 第一个按键占比较大的宽度, 这样就把其他的按钮给挤到右边去了.
验证一下:
html中增加一个空白按钮space
<html> <link href="main.css" rel="stylesheet" type="text/css"/> <body> <div #header command="window-caption"> <div #space /> <div #skin /> <div #btn-min /> <div #btn-close /> </div> </body> </html>
在css中定义它无限宽(占去其他按钮剩下来的所有空间), 这里要用到 %% 功能
#space{ width:100%%; height:20px; }
给按钮增加鼠标的各种状态:
#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); }
上面为什么margin:-1, 这个图片比其他的大了一个像素,减去之后高度才刚刚好.
-
依葫芦画瓢, 增加其他几个按钮的状态