手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

本文首發于: https://www.htmlayout.cn/t/396

下面代碼編寫中使用了:　aardio程式設計軟體 , editplus文本編輯器

ui界面參考:https://blog.csdn.net/QQ282881515/article/details/51525985

本文目的:　一步一步手寫ｈｔｍｌ和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();

手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

輕按兩下main.html用editplus打開, 輸入基本的代碼如下

<html>
    <body>
    hello aar
    </body>
</html>

此時, 運作工程, 可以看到界面輸出

手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

說明基本架構建立完成.

由于用htmlayout來做界面, 那麼需要把窗體設定為無邊框

手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

設定完成後, 界面不能再被調整大小了, 那麼在mainform.aardio中需要加入

import win.ui.resizeBorder;
win.ui.resizeBorder(mainForm);

那麼, 如果下面修改了html代碼, 每次去啟動下工程也是個麻煩事, 而且不利于實時的看到修改後效果

我這裡在界面裡添加個定時器, 定時去重新整理界面, 這樣就可以模拟實時效果了

mainForm.setInterval(
    1000,function(){
        wb.go("\html\main.html");
    }
);

手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

下面正式開始:

首先把html和css檔案關聯起來, html裡用link語句

<html>
    <link href="main.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css"/>
    <body>
    hello aardio123456
    </body>
</html>

如果記不住那麼長的link語句, 那麼還有另外一種方式,同樣能引用到main.css樣式到檔案中

<style>
      @import "main.css";        
</style>

同時, 把準備好的一些圖檔放入到img目錄裡

手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

我們在css裡設定body節點的屬性

設定整個body鋪滿界面, 外邊距為0
設定body的背景圖檔為預設好的skin.png
```
body{
    margin:0px;
    background-image:url(img/skin.png);
}
           
```
手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

我們看到這個圖檔比界面小, 是以它連續平鋪來鋪滿了整個界面, 但是一般界面上面不會這麼做, 一般都是用九宮格拼圖

那麼需要增加背景模式為九宮格
```
background-repeat:expand stretch-left stretch-middle  stretch-right;
background-position:0 0 0 0;
           
```
手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

可以看到此時一張圖鋪滿了界面, 但是貌似整個圖檔是被拉伸的, 像素改變導緻模糊了,這時候需要改變position屬性裡面的值, 來保證圖檔中的樹芽部分是清晰的

改為(上右下左)
```
background-position:280 2 2 680;
           
```
這裡就需要去了解了九宮格再去看這張圖檔, 我們拉伸了left , middle , right的九宮格部分, 而四個角我們是不變的, 無論你怎麼去調整界面大小, 四個頂點格圖檔不變.如下動态示範

手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

增加界面頭部拖動功能

首先, 在html中添加
```
<div #header>
     
</div>
           
```
以上,增加了id為header的節點, 在css中設定這個節點的屬性
```
#header{
    background-color:red;
    width:100%;
    height:30px;
}
           
```
手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

紅色充滿了界面, 而且調整界面大小也不影響

設定這個節點的behavior行為為windowCommand窗體消息(這個是aardio内置好的)
```
#header{
    background-color:red;
    width:100%;
    height:30px;
    behavior:windowCommand;
}
           
```
在html中定義這個節點的功能
```
<html>
    <link href="main.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css"/>
    <body>
        <div #header command="window-caption">
             
        </div>
    </body>
</html>
           
```
window-caption是aardio内置的htmlayout消息封裝, 直接用即可

此時可以看到界面可以被拖動了

手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

下面在頂部增加窗體的最小化和關閉按鈕

html中增加這三個功能的div
```
<html>
    <link href="main.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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;
}
           
```
手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)
看到上面的小衣服了, 再接再厲, 繼續添加
```
#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;
}
           
```
手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)
成這樣了..... , 看了css的文章知道, div是block(塊) , 會獨占一行, 是以緊接着的都會自動往下走, 那麼就需要設定flow屬性了,在它們的父節點header裡添加橫向浮動
```
#header{
    //background-color:red;
    width:100%;
    height:30px;
    flow:horizontal;
    behavior:windowCommand;
}
           
```
手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

橫過來了, 但是都擠在左邊, 怎麼弄到右邊去?

很遺憾, htmlayout沒有這樣的flow屬性, 那麼怎麼實作這樣的功能?

可以反其道而行之, 我們假設有四個按鍵, 第一個按鍵占比較大的寬度, 這樣就把其他的按鈕給擠到右邊去了.

驗證一下:

html中增加一個空白按鈕space
```
<html>
    <link href="main.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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;
}
           
```
手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)
給按鈕增加滑鼠的各種狀态:
```
#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, 這個圖檔比其他的大了一個像素,減去之後高度才剛剛好.

手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)
依葫蘆畫瓢, 增加其他幾個按鈕的狀态

手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

手把手從零開始教你用htmlayout/sciter寫漂亮ui界面(一)

繼續閱讀

兩種清除浮動的方法

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

如何成為一名.net 工程師?

[轉]如何成長為一名全棧工程師全棧工程師

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

web開發之前後端渲染

EGORefreshTableHeaderView 解讀代碼解讀 ELTableViewController 的使用寫在最後

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

android 主線程的相關問題