搜索
aardio官方社区 门户 查看主题

web.layout( HTMLayout ) 界面开发 快速入门

发布者: 编程 | 发布时间: 2013-4-26 14:30| 查看数: 76362| 评论数: 148|帖子模式


打开aardio,在【快速访问工具栏】点击第二个按钮【新建对话框】,如下图:
1.png

然后点击【代码视图】,如下图:
2.png

切换到代码视图,找到显示窗体的语句 winform.show();
在这句代码前面插入下面的代码( 注意绿色字体的是注释):
import web.layout; //导入HTMLayout支持库
wbLayout = web.layout( winform ) //创建HTMLayout窗体
wbLayout.html = /**
    在这里写入HTML
**/

经过我们改造后的完整的代码如下:
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( right=599;bottom=399;text="HTMLayout示例")
  4. winform.add(  )
  5. /*}}*/

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

  8. /*
  9. winform窗体对象交给你,
  10. 请帮我改造成可以显示网页的HTMLayout窗体,

  11. 我准备给即将出生的HTMLayout窗体取个名字叫"wbLayout"
  12. 并且使用var语句声明为局部变量,毕竟他还是个孩子,我可不想他满地乱跑变成大众情人
  13. */
  14. var wbLayout = web.layout( winform )


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

  18. winform.show()
  19. win.loopMessage();
复制代码
请将鼠标移动到上面的源代码上面,注意右上角出现的小工具条。
点击工具条上的按钮可以查看、复制移除行号后的原始源代码,如下图:
code.png

复制上面的源代码到aardio编辑器中,然后按【 运行(F5) 】运行上面的代码
3.png


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

  1. <标签名字> 内容 </标签名字>
复制代码
节点里面又可以包含其他节点,例如:

  1. <父节点标签名字>

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

  3. </父节点标签名字>
复制代码
就象一颗树一样,树根上面有很多树枝,而每个树枝上又可以长出很多的小树枝,HTML也类似,所以HTML使用的是树模型( 用个专业点的名词叫DOM模型,节点叫DOM节点 )。


dom-tree.png

你可以点击上图放大查看一下原始图片(帖子里默认显示缩略图)。
html标签是根节点,地面以下的是head节点(即头节点,这部分代码不是用来显示的,通常用来添加一些页面的选项,例如用title节点表示页面的标题 )地面以上的是 body 节点( 即内容节点,这里面的代码是用来显示的、可见的 )

一个完整的HTML文件的结构如下:
dom.jpg

建议你安装一个支持emmet的HTML编辑器 (参考:http://www.iteye.com/news/27580 ) ,
例如notepad++安装 emmet插件以后,输入 html:xt 然后按CTRL+E 就会自动生成一个简单的HTML文件了。
当然我们也可以偷懒省略掉html,head,body这些标签( 本教程中省略了这些部分 )。

而最常用的标签就是div,div是英文division( 分区)的缩写,你可以理解为div就是一个盒子,
大盒子里面可以有小盒子,小盒子里面可以有小小盒子,也就是div里面可以套div
box.png

评分

参与人数 11银币 +237 收起 理由
fox + 2 赞一个!
nanyi0509 + 5
nbwbcn + 10 很给力!
aaucn + 60 很给力!
aoqi521 + 10 很给力!
CP3 + 40 很给力!
fen + 20 很给力!
byqwdyhm + 10 真是详细啊!
yyy + 10
air_fans + 30 很给力!
leisurely + 40 很给力!感谢分享!

查看全部评分

最新评论

编程 发表于 2013-4-26 14:31:22

CSS是英文Cascading Style Sheet(级联样式表)的缩写, 用来定义HTML节点的显示外观。 例如DIV节点是一个盒子,那么使用CSS

CSS是英文Cascading Style Sheet(级联样式表)的缩写,
用来定义HTML节点的显示外观。

例如DIV节点是一个盒子,那么使用CSS就可以打扮这个盒子,
或说者用CSS来给HTML化妆。

要知道HTML里面可能有很多节点,父节点里可能有子节点,
节点旁边还可能有很多兄弟节点,那么我们给这些节点化妆,CSS就先要有一种语法来指定自己修饰的是哪个节点 - 这个东西叫CSS选择器 - 用来表示选择哪个节点.

最基本的CSS语法如下:

  1. CSS选择器 {
  2.      外观属性: 设置值;
  3.      外观属性2: 设置值2;
  4. }

复制代码
每一个CSS选择器用来选择一个或多个符合条件的HTML节点,
对节点外观的设定放在一对花括号里,而每一个属性名与属性值用冒号分隔,
多个外观属性之间用分号分隔。

CSS样式表里可以设置很多的外观属性,
当然我们并不需要都记忆下来,有一个CSS手册即可
《标准CSS参考手册》
《HTMLayout CSS选择器语法》

我们这里只提几个最常用的CSS属性,
如果你把div想象成一个盒子,那么:
boder:  
表示盒子的边框外观。

margin:
表示盒子的外边距,也就是与其他盒子之间保持的空白

padding:  
表示盒子的内边距,也就是盒子内部与内容间的填充部分,例如你发快递,盒子里的东西你怕摔坏了,你会在盒子内部四周塞上一些报纸等填充物 - 这个填充物所占的宽度就是内边距。

width:
表示盒子的宽度( 在HTMLayout中表示内容的宽度)

height:
表示盒子的高度( 在HTMLayout中表示内容的高度)

0933232ccxm89omx688obo.jpg

关于盒子模型的详细说明请参考:《CSS盒子模型》

下面我们用一个简单的aardio代码练习一下
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( right=599;bottom=399;text="HTMLayout CSS示例")
  4. winform.add(  )
  5. /*}}*/

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

  8. wbLayout.html = /**
  9.         <div>盒子A</div>
  10.         <div>盒子B</div>
  11. **/

  12. wbLayout.css = /**

  13. div {
  14.         border:1px red solid;/*一个像素边框,红色,solid表示实线*/
  15.         padding:2px 2px 2px 2px;/*内边距上,右,下,左四个部分的大小*/
  16.         margin:2px 2px 2px 2px;/*外边距上,右,下,左四个部分的大小*/
  17.         width:50%%; /*当前可以使用的最大宽度的百分之五十*/
  18. }

  19. **/

  20. winform.show()
  21. win.loopMessage();
复制代码
重点注意是这段CSS代码

  1. div {
  2.         border:1px red solid;/*一个像素边框,红色,solid表示实线*/
  3.         padding:2px 2px 2px 2px;/*内边距上,右,下,左四个部分的大小*/
  4.         margin:2px 2px 2px 2px;/*外边距上,右,下,左四个部分的大小*/
  5.         width:50%%; /*当前可以使用的最大宽度的百分之五十*/
  6. }
复制代码
花括号外面CSS选择器 div 选择了所有的div节点,花括号内部指定了节点的外观。
注意无论内边距还是外边距都可以使用四个数字指定上、右、下、左四个部分的大小,这四个数字总是从顶部(12点方向)开始顺时针转上一圈,如下图:
165123khnz5ri9jli1t1z9.jpg

以内边距(padding)为例,他的参数可以使用以下几种不同的写法:
padding:上 右 下 左;
padding:上 右 下;
padding:上 右;
padding:上;

如果“下”省略他的值与“上”相同,
如果“左”省略他的值与“右”相同,
如果只写一个参数,则上、右、下、左的值相同。
注意HTMLayout里background-positon或forground-postion指定四个值他的顺序与上面相同,但指定两个值时则第一个是横坐标、第二个是纵坐标,与margin、padding省略参数时表示的顺序不一样。

width:50%%;  这里的两个百分号非常有意思,这是HTMLayout扩展的语法,他会自动计算出当前有多少剩余空间可用,然后用百分比计算出大小。

在aardio中按F5快捷键运行上面的代码,运行效果如下图:
4.jpg
编程 发表于 2013-4-26 14:31:29

上面的示例有一个问题,可以看到所有div的外观都是一样的, 如果我们希望某个div显示的外观不一样需要怎么做到? 首先,我们要在HTML中为div指定一

上面的示例有一个问题,可以看到所有div的外观都是一样的,
如果我们希望某个div显示的外观不一样需要怎么做到?

首先,我们要在HTML中为div指定一个id属性来标志这个节点,如下:

  1. <div id="这里写ID"> 内容 </div>
复制代码
id是英文identity的缩写,意思是身份标志号,类似我们的身份证号码的玩意儿。
大家知道,每个人的身份证号码都是唯一的,不同的人不能有相同的身份证号码,id也一样,在HTML里面最好不要让多个节点使用同一个id,使id保持唯一性。

那么我们在CSS选择器里怎么指定HTML的属性呢?很简单,属性放到方括号里就可以,例如:
  1. div[id="这里写ID"] {  
  2.         width:50%%;
  3. }
复制代码
上面的[id="这里写ID"] 还可以更简单的用一个#号代替,如下:
  1. div#这里写ID{  
  2.         width:50%%;
  3. }
复制代码
前面说过id总是唯一的,不应当有第二个节点使用这个id,所以上面的代码可以再次简化,如下:
  1. #这里写ID{  
  2.         width:50%%;
  3. }
复制代码
我们用一个完整的aardio代码演示一下:
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( right=599;bottom=399;text="CSS ID选择器示例")
  4. winform.add(  )
  5. /*}}*/

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

  8. wbLayout.html = /**
  9.         <div id="a">盒子A</div>
  10.         <div id="b">盒子B</div>
  11. **/

  12. wbLayout.css = /**

  13. /*首先指定所有DIV的默认外观*/
  14. div{
  15.         padding:2px 2px 2px 2px;/*内边距上,右,下,左四个部分的大小*/
  16.         margin:2px 2px 2px 2px;/*外边距上,右,下,左四个部分的大小*/

  17. }

  18. /*单独指定id为a节点的外观*/
  19. #a{
  20.         border:1px red solid;/*一个像素边框,红色,solid表示实线*/
  21.         width:50%%; /*当前可以使用的最大宽度的百分之五十*/
  22. }

  23. /*单独指定id为b节点的外观*/
  24. #b{
  25.         border:1px green solid;/*一个像素边框,绿色,solid表示实线*/
  26.         width:80%%; /*当前可以使用的最大宽度的百分之八十*/
  27. }

  28. **/

  29. winform.show()
  30. win.loopMessage();
复制代码
在aardio中按F5运行上面的代码,运行效果如下:
5.png
编程 发表于 2013-4-26 14:31:34

div 指定所有div 的外观 而 div#id 指定某个div的外观 如果我们要指定一组div的外观要怎么做呢? 这就要用到类这个东西了? 什么叫

div 指定所有div 的外观
而 div#id 指定某个div的外观
如果我们要指定一组div的外观要怎么做呢?

这就要用到类这个东西了?
什么叫类?在英文里里就是class,表示一组类似的东西,
例如人是一个类(人类),猪也是一个类, 而黄种人、白种人、或者不黄不白种人都是不同的外观类。

在HTML里面用class属性指定类,如下:
  1. <div class="red">红色</div>
  2. <div class="red">红色</div>
  3. <div class="blue">蓝色</div>
  4. <div class="blue">蓝色</div>
复制代码
而在CSS选择器里用 div[class="类名"] 匹配不同的类,也可以使用  .类名 这种缩写方法表示类。

示例:
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( right=599;bottom=399;text="CSS 类选择器示例")
  4. winform.add(  )
  5. /*}}*/

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

  8. wbLayout.html = /**
  9.         <div class="red">红色</div>
  10.         <div class="blue">蓝色</div>
  11.         <div class="red">红色</div>
  12.         <div class="blue">蓝色</div>
  13. **/

  14. wbLayout.css = /**

  15. div.red{
  16.     background:red; /*背景色为红色*/
  17.     color:#00FFFF;/*字体青色*/
  18. }

  19. div.blue{
  20.     background:blue; /*背景色为蓝色*/
  21.     color:#FFFF00;/*字体黄色*/
  22. }
  23. **/

  24. winform.show()
  25. win.loopMessage();
复制代码

点评

div.red{ 这个css后面的}弄错地方了  发表于 2013-4-29 09:12
编程 发表于 2013-4-26 14:31:39

behavior - 也就是交互行为, 你可以把behavior理解为一个监听器,监听用户的鼠标键盘等交互操作,然后作出各种反应(或者说产生不同的行为) H

behavior - 也就是交互行为,
你可以把behavior理解为一个监听器,监听用户的鼠标键盘等交互操作,然后作出各种反应(或者说产生不同的行为)
HTMLayout中的behavior非常强大,HTMLayout里所有的控件都是通过内置的behavior实现的,也可以使用behavior方便的扩展HTMLayout的功能,而且behavior可以比较好的分离、模块化界面逻辑,非常的方便,可以说用好了behavior也就用好了HTMLayout。 参考链接:HTMLayout内置behavior大全

在 aardio 中创建behavior很简单,只要在 web.layout.behavior 名字空间下创建名字空间即可。
例如下面的代码创建了一个名字为 command的 behavior.
namespace web.layout.behavior.command{
   
   
//点击按钮时触发该事件
    onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
        
    }
}
点击按钮时会触发onButtonClick 事件,ltOwner总是表示指定了这个behavior的节点,而 ltTarget指的是用户实际点击的节点。其他参数大多时候可以不必管,深入了解可以去看标准库里的源码。

所有的事件都以 on 开头,
所有按钮事件以 onButton 开头,
所有鼠标事件以 onMouse 开头
所有键盘事件以 onKey 开头

可以使用用户库创建behavior,
例如创建web.layout.behavior.behaviorName 这样的用户库,就创建了名为“behaviorName“的behavior.
lib.behavior.jpg

使用aardio编辑器打开库文件源码以后,在编辑器中输入HTMLayout事件时可以自动完成代码。
htmlayout.behavior.jpg
HTMLayout还支持ltEle.postEvent()或ltEle.sendEvent()函数发送的自定义事件,所有自定义事件的参数与onApplicationEvent相同,可以使用onApplicationEvent生成代码以后替换事件名即可。

那么我们如何指定哪些节点拥有这个behavior(交互行为)呢?
我们需要在CSS里为节点指定behavior,例如:

  1. CSS选择器{
  2.       behavior: 交互行为名字;
  3. }
复制代码
下面我们用aardio写一个完整示例:
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( right=599;bottom=399;text="HTMLayout - 自定义behavior";)
  4. winform.add(  )
  5. /*}}*/

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

  8. namespace web.layout.behavior.command {

  9.         onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
  10.             /*
  11.             当用户点击按钮时,
  12.             使用 innerHTML 属性改变节点内部的HTML代码,
  13.             inner是内部的意思,innerHTML就是指的节点内部的HTML代码
  14.             */
  15.             ltOwner.innerHTML = "谢谢!"
  16.         }
  17. }

  18. wbLayout.html = /**
  19.         <button id="my-button">据说在html里可以使用button表示一个按钮</button>
  20. **/

  21. wbLayout.css = /**
  22. #my-button{
  23.         behavior:command;  
  24. }
  25. **/

  26. winform.show()
  27. win.loopMessage();
复制代码
注意上面的CSS代码用#my-button选择了id等于"my-button"的节点,
注意在HTML,CSS中一般用连字符分隔名字中的不同单词,最好不要使用编程语言中常用的驼峰命名法(例如 myButton),HTMLayout在用#号表示id时不支持驼峰命名法,而且在HTML,CSS中使用连字符是一个约定俗成的好习惯,至于为什么?我们不是制定标准的人,就算搞清楚了还是得这样写,所以请先学会遵守交通规则。

在CSS属性中用 behavior:command;  为该节点指定了behavior.
那么用户对该节点的交互操作就会被这个 web.layout.behavior.command 的behavior所监听了,
我们仔细看上面的代码,我们点击按钮时,按钮的文字应当变成“谢谢”

请复制上面的代码到aardio编辑器中,然后按F5运行,再点击按钮,看看你的behavior是否工作?!
请容许我先去休息一下。

评分

参与人数 1银币 +5 收起 理由
wangzexi + 5 很给力!

查看全部评分

编程 发表于 2013-4-26 16:34:54

[size=4]onMouseClick 与 onButtonClick 事件的区别[/size] [hr] 运行上面的代码,点击按钮,什么也没有发生,

onMouseClick 与 onButtonClick 事件的区别


运行上面的代码,点击按钮,什么也没有发生,
behavior并没有工作,这太不可思议了
unbelievable.jpg

请在代码中找到下面的代码
import web.layout;
var wbLayout = web.layout( winform )

然后在后面输入 wbLayout.debug()  - 按回车键完成代码如下:
import web.layout.debug;
wbLayout.attachEventHandler( web.layout.debug );


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

再次运行修改后的代码,看看发生了什么?!
仍然没有显示任何错误信息,这说明我们所有的代码至少在语法上是正确的。

我们实在找不到原因,咒骂开发工具远水救不了近火,
于是我决定使用排除法,首先我跑去运行了一下aardio自带的behavior范例居然一切正常。
我看了一下范例中用的是div而不是button,难道是这个button有什么问题。

于是我修改上面的范例改成使用div
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( right=599;bottom=399;text="HTMLayout - 自定义behavior";)
  4. winform.add(  )
  5. /*}}*/

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

  8. namespace web.layout.behavior.command {

  9.         onMouseClick = function (ltTarget,ltOwner,x,y,ltMouseParams) {
  10.                 ltOwner.innerHTML = "鼠标点击了!"
  11.         }
  12. }

  13. wbLayout.html = /**
  14.         <div id="my-button">点击这里</div>
  15. **/

  16. wbLayout.css = /**
  17. #my-button{
  18.         behavior:command;  
  19. }
  20. **/

  21. winform.show()
  22. win.loopMessage();
复制代码
注意对于div这样的普通节点并没有 onButtonClick 这样的按钮事件,
只有 onMouseClick 这样的鼠标事件. 而按钮没有 onMouseClick 事件(只能使用 onButtonClick )。

运行上面的代码,点击后节点里面的文字变成了 "鼠标点击了!",behavior工作了。
可是为什么改成button就没有反应呢?请试试你能不能找出答案?!

添加 behavior


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

  1. #my-button{  
  2.     behavior:command;   
  3. }
复制代码
在前面我们使用上面的代码给一个button节点指定自定义behavior时,就覆盖并清除了默认拥有的behavior。
也就是说他虽然有button的默认CSS样式外观,却在行为上不再是一个button了,当然鼠标点击的时候也就不再触发 onButtonClick 事件,而是象普通的div等节点一样触发 onMouseClick ,这就是我们在前面失败的原因。

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

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

  1. #my-button{  
  2.     behavior:button command;
  3. }
复制代码
所以我们同时指定多个behavior,或者使用了个 波浪号 都可以解决前面遇到的问题,正确代码如下:
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( right=599;bottom=399;text="HTMLayout - 自定义behavior";)
  4. winform.add(  )
  5. /*}}*/

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

  8. namespace web.layout.behavior.command {

  9.         onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
  10.             /*
  11.             当用户点击按钮时,
  12.             使用 innerHTML 属性改变节点内部的HTML代码,
  13.             inner是内部的意思,innerHTML就是指的节点内部的HTML代码
  14.             */
  15.             ltOwner.innerHTML = "谢谢!"
  16.         }
  17. }

  18. wbLayout.html = /**
  19.         <button id="my-button">据说在html里可以使用button表示一个按钮</button>
  20. **/

  21. wbLayout.css = /**
  22. #my-button{
  23.         behavior:~command; /*用波浪号追加 behavior */
  24. }
  25. **/

  26. winform.show()
  27. win.loopMessage();
复制代码
编程 发表于 2013-4-26 17:01:12

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

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

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

首先我们切换到【窗体设计器】,
在【属性面板】中设置为无边框(也就没有默认的标题栏了)

border.png

然后切换到代码视图,在 import web.layout; 后面添加
import web.layout.behavior.windowCommand; 以导入标准库实现的behavior

然后我们在HTML中添加一个简单的标题栏和关闭按钮
wbLayout.html = /**
    <div #title-bar>
        <a>关闭窗口</a>
    </div>
**/


最后在CSS中为标题栏应用 windowCommand 这个 behavior,CSS代码如下:
wbLayout.css = /**
#title-bar{
    behavior:windowCommand;
}
**/


windowCommand 这个behavior(交互行为)会监听用户的操作,
并且在回调事件中读取节点的 command 属性以决定执行什么样的命令,

所以我们需要为标题栏里的节点指定 command 属性以执行对应的命令。
在标准库中打开web.layout.behavior.windowCommand; 的源代码 可以看到 command 可以指定为以下属性:
command = "window-caption" 表示鼠标左键按住该节点可以拖动窗口
command = "window-close" 关闭窗口
command = "window-min" 最小化窗口
command = "window-max" 最大化窗口
command = "window-restore" 恢复窗口

所以我们修改HTML如下
wbLayout.html = /**
    <div #title-bar command="window-caption">
        <div .ctrl-bar>
            <a command="window-close">r</a>
        </button>
    </div>
**/

然后我们简单的改进一下CSS外观
wbLayout.css = /**
html{
    background:#999;/*网页背景色*/
    border-radius:4px; /*8像素大小的圆角*/
}

#title-bar{
    behavior:windowCommand;  
    width:100%; /*宽度撑满窗口*/
    height:22px; /*指定高度*/
    background:#CCCCCC; /*背景色*/
   
}

/*CSS选择器中,空格表示节点间的父子包含关系*/
#title-bar .ctrl-bar{
    position:absolute;//标题栏按钮容器绝对定位到窗口右上角
    top:0px;//顶坐标1像素
    right:8px;//右坐标5像素
}

#title-bar a[command]{
    display:block; //显示为块节点
    float:left;//块节点左浮动,如果有多个按钮可以从左向右排
    height:16px;
    font-family:"Marlett";/*这个字体把小写r显示为关闭符号*/  
    padding:4px;
   
}

#title-bar a[command]:hover{
    background:#999;
}
**/
使用 border-radius:8px; 指定了网页使用圆角,我们运行程序以后,发现网页虽然圆角了,
但是winform窗体并没有圆角而是显示不协议的黑色背景,这里我们要请出标准库里的 win.util.round 把窗体也改造成圆角。
import win.util.round;
win.util.round( winform );

你可能注意到了关闭按钮是这样写的 <a>关闭窗口</a>
a标签是一个超链接,超链接类似普通文本、span标签是一个内联节点(区别是超链接可以使用href属性指定点击打开的网址),所谓内联节点主要是指其不能向块节点(例如div节点)那样指定与高度有关的样式、内联节点会自左向右流动布局(类似文本那样水平流动)。关于内联节点与块节点的区别可参考教程《HTML - DIV,CSS 布局基础》

所以我们需要在CSS中指定 display:block;  将超链接转换为块模式(可以指定大小),
并且在CSS中用 float:left; 指定了向左浮动( 块默认是自上向下布局的,左浮动可以水平排放块节点 )关于块节点、左浮动等知识请参考《DIV,CSS布局快速入门》

那么您可能会问:“为什么不直接用button标签来表示关闭按钮呢?” - 这是 web.layout.behavior.windowCommand 里的一个特殊设定 - 将button预留给了可能出现在标题栏内的导航按钮( 例如仿360界面 )。

<div .ctrl-bar> </div> 这个DIV容器准备用来放所有的标题栏按钮(虽然目前只有一个关闭按钮)
在HTML里可以用div对节点分组、划分空间,例如这里的.ctrl-bar 可以绝对定位到窗口的右上角 - 如果有多个按钮(例如最大化、最小化等)就不用一个个的去调整到右上角了。在CSS中指定position:absolute;以使用绝对定位方式。


最终代码如下:
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=399;text="HTMLayout - 无边框窗口";border="none";right=599 )
  4. winform.add(  )
  5. /*}}*/

  6. import win.util.round;
  7. win.util.round(winform,,,6,6); //窗体改成圆角,最后两个参数指定圆角半径

  8. import web.layout;
  9. import web.layout.behavior.windowCommand;

  10. var wbLayout = web.layout( winform )

  11. wbLayout.html = /**
  12.         <div #title-bar command="window-caption">
  13.                 <div .ctrl-bar>
  14.                         <a command="window-close">r</a>
  15.                 </button>
  16.         </div>
  17. **/

  18. wbLayout.css = /**
  19. html{
  20.         background:#999;/*网页背景色*/
  21.         border-radius:4px; /*8像素大小的圆角*/
  22. }

  23. #title-bar{
  24.         behavior:windowCommand;  
  25.         width:100%; /*宽度撑满窗口*/
  26.         height:22px; /*指定高度*/
  27.         background:#CCCCCC; /*背景色*/
  28.        
  29. }

  30. /*CSS选择器中,空格表示节点间的父子包含关系*/
  31. #title-bar .ctrl-bar{
  32.         position:absolute;//标题栏按钮容器绝对定位到窗口右上
  33.         top:0px;//顶坐标1像素
  34.         right:8px;//右坐标5像素
  35. }

  36. /*CSS选择器中,方括号指定节点拥有的属性*/
  37. #title-bar a[command]{
  38.         display:block; //显示为块节点
  39.         float:left;//块节点左浮动,如果有多个按钮可以从左向右排
  40.         height:16px;
  41.         font-family:"Marlett";/*这个字体把小写r显示为关闭符号*/  
  42.         padding:4px;
  43.        
  44. }

  45. #title-bar a[command]:hover{
  46.     background:#999;
  47. }
  48. **/

  49. winform.show()
  50. win.loopMessage();
复制代码
在aardio编辑器中粘帖上面的代码,按F5快捷键运行效果如下:
w.jpg

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

在aardio工程向导中已经有一个类似上面的HTMLayout UI工程示范。
在aardio主菜单中点击:新建工程 -> 新建 web 应用程序
web project.png

在弹出的新建工程对话框中选择【HTMLayout UI】
htmlayout ui.png
最后点击创建工程按钮即可。

课后作业题
请修改课程中无边框窗口的源代码,要求如下:
1、 增加最大化、最小化等按钮,不得使用图片
2、 使窗体边框可以拖动调整大小

作业提示:
1、 Marlett 字体里的数字 0,1,2 分别是什么图案?
2、 在aardio里新建 HTMLayout UI 工程,里面用到了一个behavior: web.layout.behavior.windowSizer
3、  HTMLayout扩展的CSS语法中有一个 content 属性可以用来改变节点内容,例如:

  1. div#my-id{ content:"文本"; })
复制代码
答案在下面:

  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form(text="HTMLayout 无边框窗体";right=599;bottom=399;border="none";parent=...)
  4. winform.add()
  5. /*}}*/

  6. import web.layout;
  7. import web.layout.behavior.windowCommand;
  8. import web.layout.behavior.windowSizer;

  9. //创建网页浏览器
  10. var wbLayout = web.layout( winform )

  11. wbLayout.html = /**  
  12. <html>
  13. <body>
  14.         <!-- 下面是标题栏,凡在CSS中指定 behavior:windowCommand 的节点(含子节点) 可用 command 属性指明命令类型 -->
  15.         <div #title-bar command="window-caption"> <span .title> 我 的 软 件 </span>
  16.                 <div .ctrl-bar>
  17.                
  18.                         <!-- 弹出菜单,类似这种包含弹出节点的最好用div或button,
  19.                                 div主要用作布局容器 - 可更好的支持弹出子节点或浮动子节点,
  20.                                 而a,li等节点存在的主要目的不是用来做其他节点的容器 -->
  21.                         <div .window-menu>u
  22.                            <menu .popup> <!-- .popup是内置的弹出菜单样式 -->
  23.                                     <li>在线帮助</li>
  24.                                     <li>子菜单
  25.                                       <menu >
  26.                                         <li>这是子菜单</li>
  27.                                       </menu>
  28.                                     </li>
  29.                                     <li #exit>退出</li>
  30.                                   </menu>
  31.                         </div>
  32.                        
  33.                         <!-- 下面是标题栏按钮,必须使用a标记表示,command属性指示该按钮执行的命令 -->
  34.                         <a command="window-min">0</a>
  35.                 <a command="window-max">1</a>
  36.                 <a command="window-close">r</a>
  37.                 </div>
  38.         </div>

  39.         <!--下面这句用来支持可拖动的边框,必须在aardio中调用 import web.layout.behavior.windowSizer -->
  40.         <div style="behavior:windowSizer"/>
  41. </body>
  42. </html>
  43. **/

  44. wbLayout.css = /**

  45. body{
  46.         margin:0;
  47.         background:#fff;/*网页背景色*/
  48. }

  49. #title-bar{
  50.         behavior:windowCommand;  /*必须在aardio中 import web.layout.behavior.windowCommand */
  51.         width:100%; /*宽度撑满窗口*/
  52.         height:28px; /*指定高度*/
  53.         background:#5a5a5a; /*背景色*/  
  54. }

  55. /*最大化后body会自动添加maximize属性*/
  56. body[maximize]{
  57.         border-radius:0;/*最大化去掉圆角*/
  58. }

  59. body[maximize] #title-bar{
  60.         border-radius:0;/*最大化去掉圆角*/
  61. }

  62. #title-bar span.title{
  63.         font:system;
  64.         margin:6px 0 0 10px;
  65.         color:#CCCCCC;
  66. }

  67. /*CSS选择器中,空格表示节点间的父子包含关系*/
  68. #title-bar .ctrl-bar{
  69.         position:absolute;//标题栏按钮容器绝对定位到窗口右上角
  70.         top:1px;//顶坐标
  71.         right:8px;//右坐标
  72.         width:95px
  73. }

  74. /*CSS选择器中,方括号指定节点拥有的属性*/
  75. #title-bar .ctrl-bar a{
  76.         display:block; //显示为块节点
  77.         float:left;//块节点左浮动( 从左向右排 )
  78.         height:14px;
  79.         font-family:"Marlett";/*该字体显示按钮符号*/  
  80.         font-size:14px;
  81.         padding:4px;
  82.         color:#fff;
  83. }

  84. #title-bar a[command]:hover{
  85.     background:#6ebccf;
  86. }

  87. #title-bar a[command]:active{
  88.     background:#FF0000;
  89. }

  90. #title-bar a[command="window-restore"]{
  91.     content:"2";/*改变文本,Marlett字体为还原符号*/
  92. }

  93. #title-bar .window-menu{
  94.         behavior:popup-menu;
  95.         float:left;
  96.         height:14px;
  97.         font-family:"Marlett";/*该字体显示按钮符号*/  
  98.         font-size:14px;
  99.         padding:4px;
  100.         color:#fff;
  101. }
  102. #title-bar .window-menu:hover{
  103.         background:#6ebccf;
  104. }
  105. #title-bar .window-menu:owns-popup /*菜单已弹出*/
  106. {
  107.     background-color: #FF0000;
  108.     color: #FFFFFF;
  109. }
  110. **/

  111. // 响应菜单点击事件
  112. wbLayout.onMenuItemClick =  {

  113.         // 事件可以是一个函数或列表,如果是列表键名匹配节点的id或name属性
  114.         exit = function (ltTarget,ltOwner,reason,behaviorParams) {
  115.                 winform.close();
  116.         }
  117.        
  118.         // 在这里没有匹配不到id的节点会触发default函数*/
  119.         default = function (ltTarget,ltOwner,reason,behaviorParams) {
  120.                 var ltPopupOwner = web.layout.element( behaviorParams.he );//这是弹出菜单的按钮节点
  121.                 winform.msgbox( ltTarget.innerText )
  122.         }
  123. }

  124. import win.ui.shadow;
  125. win.ui.shadow(winform); //添加阴影边框

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

复制代码


运行效果:
shadow.png
添加下面的代码为无边框窗口添加阴影边框:
import win.ui.shadow;
win.ui.shadow(winform); //添加阴影边框
一些扁平化风格的界面可能在背景上没有边框,使用阴影边框因为其半透明效果比画的边框更自然一些( 边框是必须的,否则同色窗体会相互混淆边界 ),注意使用阴影边框的窗体不要使用圆角、即不好看也容易出现锯齿。
lujjjh 发表于 2013-4-26 17:28:04

有点 Head First 的味道,很不错,支持一下!

有点 Head First 的味道,很不错,支持一下!
carl 发表于 2013-4-26 17:33:14

图文并茂,入门好帮手,对照操作下有收获,谢谢

图文并茂,入门好帮手,对照操作下有收获,谢谢
神彩飞扬 发表于 2013-4-26 17:44:53

教程写的真好 ,支持一下

教程写的真好 ,支持一下
qqmmcc 发表于 2013-4-26 18:54:04

谢谢精彩的教程,学习~~

谢谢精彩的教程,学习~~
look 发表于 2013-4-27 08:48:42

支持!可快速领略HTMLayout魅力!

支持!可快速领略HTMLayout魅力!
僵尸狼族__羊 发表于 2013-4-27 12:03:29

精彩的教程,学习~~

精彩的教程,学习~~
万事发↑新一天 发表于 2013-4-27 15:21:07

多谢,好教程

多谢,好教程
jinwl 发表于 2013-4-27 21:47:26

顶,学习一下

顶,学习一下
jerryku 发表于 2013-4-27 22:38:31

最近正要学习这个,顶一个!

最近正要学习这个,顶一个!
小X 发表于 2013-4-27 22:57:15

感谢分享

感谢分享
夏候仪 发表于 2013-4-28 06:52:54

正需要,感谢分享

正需要,感谢分享
lzj_ykds 发表于 2013-4-28 09:25:13

写的很精彩

写的很精彩

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2017-9-25 19:27 , Processed in 0.078125 second(s), 22 queries , WinCache On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表