web.layout( HTMLayout ) 使用指南

aardio 的扩展库 web.layout 基于 HTMLayout 组件。而 aardio 扩展库 web.sciter 基于 Sciter JS 组件。

因为 Sciter JS 起源于 HTMLayout，基础的东西有很多相似的地方。 aardio 中的 web.layout 与 web.sciter 扩展库的基本用法是一样的，很多接口函数都是相同的。 web.layout 教程一般也适用 web.sciter，只要将示例代码中的 web.layout 简单替换为 web.sciter 即可。

但是 web.sciter（Sciter JS）支持 JavaScript，而 HTMLayout 只能在 CSS 中使用简单的 CSS-script( CSSS! ) 脚本。

HTMLayout 与 Sciter JS 最主要的区别是：

web.sciter（Sciter JS）不支持 CSS-script( CSSS! ) 脚本。
web.layout( HTMLayout ) 不支持 JavaScript 脚本。

基础的 HTML,CSS 功能则 HTMLayout 与 Sciter JS 大同小异，HTMLayout 已经不再更新，而 Sciter JS 更新很快。

创建第一个 HTMLayout 窗口

在 aardio 开发环境新建 winform 窗体，点击【代码视图】按钮切换到代码视图，

找到显示窗体的代码 winform.show(); 并在前面插入下面的代码：

 import web.layout; //导入HTMLayout支持库  
 wbLayout = web.layout( winform ) //创建HTMLayout窗体  
 wbLayout.html = /**  
     在这里写入HTML  
 **/

经过我们改造后的完整的代码如下：

import win.ui; 
var winform = win.form(text="HTMLayout示例";right=599;bottom=399)
winform.add() 

// web.layout 这里很需要你  
import web.layout;  

/*  
winform窗体对象交给你，  
请帮我改造成可以显示网页的 HTMLayout 窗体，  
我准备给即将出生的 HTMLayout 窗体取个名字叫"wbLayout"  
并且使用 var 语句声明为局部变量，毕竟他还是个孩子，我可不想他满地乱跑变成大众情人  
*/  
var wbLayout = web.layout( winform )   

wbLayout.html = /**  
<div>
据说在 HTML 里这样就可以表示一个节点？  
</div>  
**/  

winform.show();   
win.loopMessage();

当然，我们也不必要把 HTML，CSS 都写在一个文件里。
可以创建一个aardio工程文件，css可以写到单独的 *.css 文件里, html 可以写到单独的 *.html 范例里，
然后调用 wb.go( "/res/my.html" ) 打开 html 即可，html,css 都可以方便的加入内嵌资源生成独立绿色的 EXE 文件。

注意HTML里面所有的节点都用一对放在尖括号里的标签表示，例如：

<标签名字> 内容 </标签名字>

节点里面又可以包含其他节点，例如：

<父节点标签名字> 
   <子节点标签名字> 内容 </子节点标签名字> 
</父节点标签名字>

就象一颗树一样，树根上面有很多树枝，而每个树枝上又可以长出很多的小树枝。
HTML 使用的是树模型( 用个专业点的名词叫 DOM 模型，节点叫DOM节点 )。

HTML 常用的标签就是 div ，div 是英文division（分区）的缩写，你可以理解为div就是一个盒子，
大盒子里面可以有小盒子，小盒子里面可以有小小盒子，也就是 div 里面可以套 div。

HTMLayout 调试

请在 HTMLayot 示你代码中找到下面的代码

import web.layout;
var wbLayout = web.layout( winform )

然后在后面输入 wbLayout.debug() - 按回车键自动生成以下代码：

import web.layout.debug;  
wbLayout.attachEventHandler( web.layout.debug );

上面的代码用于输出 HTMLayout 引擎内置的调试信息到控制台，
并且添加一个全局函数 debug() 用于在 CSS-script 脚本中向控制台输出内容。
添加了这两行代码以后，如果我们的 HTML,CSS 书写有错误会自动打开控制台并显示错误信息.

使用 behavior

在 aardio 中的 web.layout.behavior 名字空间下添加名字空间就可以创建 behavior。也可以导入 web.layout.behavior 名字空间下面的库来创建 behavior。

HTMLayout 可以在 CSS 中指定 HTML 节点的 behaivor，例如指定 behaivor:"button.command" ，这里的 behavior "button.command" 就对应于 aardio 中的 web.layout.behavior.button.command 名字空间。

CSS 的 behaivor 属性中的名字空间如果包含多级名字空间(也即包含圆点符号)则必须置于引号内部。

所有 HTMLayout 窗体可用的事件( 函数名前缀为 on.... ) 在 behavior 中都可以使用当然, 仅在CSS样式中指定了 behavior 的节点才可以触发对应的事件。

示例：

import win.ui; 
winform = win.form(text="HTMLayout behavior用法演示";right=599;bottom=399) 

import web.layout;
wbLayout = web.layout(winform);

namespace web.layout.behavior.button.command {  

    /*
    ltOwner 参数是绑定behavior的节点,
    实际上也就是指定了 behavior:command 的节点对象

    ltTarget 通常指的是实际触发事件的节点,
    或者根据不同的事件,ltTarget的意义有所不同 
    */
    onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) { 
        ltOwner.printf("点击了按钮");
        ltOwner.postEvent("onMyCustomEvent",2);//可以再次触发其他的事件,注意事件应为 web.layout.event.BEHAVIOR 名字空间下的事件或自定义事件
    }

    //自定义事件的参数与onApplicationEvent相同
    onMyCustomEvent = function (ltTarget,ltOwner,reason,behaviorParams) {
        ltOwner.printf("自定义事件onMyCustomEvent被触发,触发参数:%d",reason)
    }

    //CSS脚本中读取 self:value 时触发此回调，第2个返回值返回 value 的值
    onGetValue = function( ltOwner ){
        return true,"Value:onGetValue";
    }

    //CSS脚本中使用 self:value 修改值时触发此回调
    onSetValue = function(  ltOwner,value ){

        return true
    }

    //所有名字不是on前缀的函数,都可以在CSS脚本中直接调用,
    //在CSS-script调用下面的函数时,第一个实参是下面的第二个形参,第一个ltEle参数则是绑定behavior的节点对象
    func = function(ltOwner,a,b,c){  
        ltOwner.printf("调用了自定义函数,收到参数 a:%d b:%d c:%s ",a,b,c )
        return "返回新的值"
    }
}

wbLayout.html =/***
<div id="my-button" 属性="值">请点击这里</div> 
***/

wbLayout.css = /**
#my-button{ 
    /*
    behavior名字前加波浪线表示在原来的behavior列表上追加,而不是替换behavior属性。
    可以指定多个behavior,以空格分格,例如下面的 clickable 是一个内建behavior,表示触发 onButtonClick事件而不是 onMouseClick事件。
    */
    behavior:"button.command clickable";
    active-on!:/*类似behavior中的onMouseDown,也即节点切换到active状态*/
        self.func(1,2,self:value), /*CSS-script脚本以逗号分隔语句*/
    ; /*CSS-script脚本以分号表示语句块结束*//
}
**/

winform.show() 
win.loopMessage();

HTMLayout 有很多内建的 behavior，
例如 button 节点这样的按钮就默认拥有内建 behavior:button 。

例如以下 CSS 代码：

#my-button{     
  behavior:command;      
}

如果给一个 button 节点指定自定义 behavior 时，就覆盖并清除了默认拥有的 behavior。
也就是说他虽然有 button 的默认CSS样式外观，却在行为上不再是一个 button了，当然鼠标点击的时候也就不再触发 onButtonClick 事件，而是象普通的 div 等节点一样触发 onMouseClick 。

我们也可以添加 behavior，就是给节点添加新的 behavior 但是又不覆盖节点已经拥有的 behavior.
在 HTMLayout 中使用波浪号表示添加 behavior，例如： behavior:~command; 波浪号在名字前面表示追加 behavior，波浪号在名字后面表示插入behavior，你可以把 ~ 理解为原来的 behavior 列表。

如果要同时为节点指定多个 behavior，则可以使用空格分格，例如：

例如以下 CSS 代码：

#my-button{    
  behavior:button command;  

}

除了象 button 这样 HTMLayout 引擎内建的 behavior，以及我们自定义的 behavior，
aardio标准库同样提供了很多behavior。

使用标准库的 behavior 只要导入指定的名字空间即可，
例如模拟窗口标题栏按钮的 web.layout.behavior.windowCommand;

在 aardio 中调用 HTMLayout 并使用 CSS 扩展的示例

HTMLayout 自己扩展了一些 CSS 语法，以下是使用示例：

import win.ui;
/*DSG{{*/
var winform = ..win.form( bottom=399;parent=...;right=599;text="aardio Form" )
winform.add(  )
/*}}*/

import web.layout;
var wbLayout = web.layout(winform);

wbLayout.html = /*********
<html>
<head>
  <style>
    div.slave { visibility:collapse; } //指定了slave类的节点默认折叠

    //注意下面的加号,这是一个关系选择符,表示加号前面的节点后面的第一个节点
    widget.master:checked + div.slave { visibility:visible; }
  </style>  
<head>
<body>

  <widget type="checkbox" .master>请点选这里:</widget>
  <div .slave>
    <li>item #1</li>
    <li>item #2</li>
    <li>item #3</li>
  </div>

  <widget type="checkbox" .master>请点选这里试试:</widget>
  <div .slave>
    <li>item #1</li>
    <li>item #2</li>
    <li>item #3</li>
  </div>
</body>
</html>
*********/

winform.show()
win.loopMessage();

Markdown 格式