本文首发于: https://www.aardio.com.cn/t/396 

下面代码编写中使用了:　aardio编程软件 , editplus文本编辑器

ui界面参考:Htmlayout早期的一个摸索作品_QQ282881515的博客-CSDN博客

本文目的:　一步一步手写ｈｔｍｌ和css 代码, 通过编写过程来学习和思考htmlayout应该怎么用

这里说下, aardio是一款很不错的国产编程软件, 集成了很多使用的功能, 免费开源, 其中就有htmlayout和sciter的扩展库, 使用这个扩展库可以方便的实现用htmlayout显示漂亮的ui.

这其中, 用到了css和html的一些知识(不要害怕, 非常少的知识点, 懂了下面这些基本就可以写出很多UI界面了)

另外一些htmlayout的csss! 知识和使用方法, 去aardio的官方论坛看一下教程就能熟悉基本操作了, 至于熟练运用就需要大量的实践和码字了, 偷不得懒.

言归正传, 正式开始.

  1. 新建mainform界面

  2. 导入htmlayout库

  3. 工程中添加html目录和img子目录

  4. 打开工程文件夹, 在html目录里新建main.html和main.css两个文件

  5. 同步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节点的属性

  1. 设置整个body铺满界面, 外边距为0

  2. 设置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, 这个图片比其他的大了一个像素,减去之后高度才刚刚好.

  3.  

    依葫芦画瓢, 增加其他几个按钮的状态

     

# ui # css # html
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/

avatar GitCode 开源社区
cover

用C++实现4种YOLO目标检测（内附完整代码）

avatar GitCode 开源社区
cover

静态时序分析：SDC约束命令create_generated_clock详解（上）

avatar GitCode 开源社区