# web.layout( HTMLayout ) 使用指南

aardio 的扩展库 web.layout 基于 HTMLayout 组件。

HTMLayout 不支持 JavaScript，只能在 CSS 中使用简单的 [CSS-script( CSSS! ) 脚本](css-script.md)。

## 创建第一个 HTMLayout 窗口

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

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

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

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

```aardio
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
<标签名字> 内容 </标签名字>
```

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

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

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

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

## HTMLayout 调试

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

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

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

```aardio
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 的节点才可以触发对应的事件。

示例：

```aardio
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 代码：

```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 代码：

```css
#my-button{    
  behavior:button command;  
    
}  
```  
 
除了象 button 这样 HTMLayout 引擎内建的 behavior，以及我们自定义的 behavior，  
aardio标准库同样提供了很多behavior。  
  
使用标准库的 behavior 只要导入指定的命名空间即可，  
例如模拟窗口标题栏按钮的 web.layout.behavior.windowCommand;  


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

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

```aardio
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();
```