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 最主要的区别是:
基础的 HTML,CSS 功能则 HTMLayout 与 Sciter JS 大同小异,HTMLayout 已经不再更新,而 Sciter JS 更新很快。
在 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。
请在 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 书写有错误会自动打开控制台并显示错误信息.
在 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;
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();