搜索
查看: 7677|回复: 15

[教程] HTMLayout 常见问题收录

  [复制链接]

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
发表于 2014-3-11 23:39:07 | 显示全部楼层 |阅读模式
1、behavior 覆盖问题。
这是最容易范的一个错误,例如在CSS中写 button{ behavior:my-behavior; } 然后就杯具了,button的默认属性 behavior:button 被覆盖掉了,button不再是button, 所以需要改为 button{ behavior:button my-behavior; } ,更好的方法是这样写 button{ behavior:~my-behavior; } 这里的波浪号表示节点已经拥有的hehavior, 所以~my-behavior是追加而不是替换。

回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2014-3-11 23:40:00 | 显示全部楼层

在HTMLayout中select 节点的下拉列表,在HTML中你可以使用 指定选中的项目,不幸的

在HTMLayout中select 节点的下拉列表,在HTML中你可以使用 <option selected>选中节点</option> 指定选中的项目,不幸的是这个属性只在HTML中有效,运行时你需要使用节点的checked属性来代替,一个示例:


  1. import win.ui;
  2. /*DSG{{*/
  3. winform = ..win.form(text="HTMLayout - Select控件";right=599;bottom=399;)
  4. /*}}*/

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

  7. wbLayout.html =/***
  8. <select #s>
  9.         <option selected>测试1</option>
  10.         <option >测试2</option>
  11. </select>
  12. ***/
  13. wbLayout.wait();

  14. //获取当前选中节点
  15. var ltEle = wbLayout.querySelector("#s option:checked")

  16. //修改当前选中节点
  17. wbLayout.querySelectorAll("#s option")[2].state.checked = true;

  18. wbLayout.getEle("s").querySelector("option").parent().createElement("option","新增节点" );

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

复制代码

评分

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

查看全部评分

回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2014-3-11 23:40:40 | 显示全部楼层

HTMLayout中HTML不支持label标记,所以你要为复选框控件之类指定个标题就要写CSSS!脚本,其实解决方法很简单,用button标记嵌入text标记

HTMLayout中HTML不支持label标记,所以你要为复选框控件之类指定个标题就要写CSSS!脚本,其实解决方法很简单,用button标记嵌入text标记即可,示例:

  1. <button type="checkbox">
  2.         <text>这是标题</text>
  3. </button>
复制代码

评分

参与人数 1银币 +50 收起 理由
CP3 + 50 赞一个!

查看全部评分

回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2014-3-11 23:41:37 | 显示全部楼层

HTMLayout作为一个UI引擎,默认的网页中的文字都是不能选中的,当然也没法复制了,解决方法是在HTML中指定 behavior:htmlarea,示例:

HTMLayout作为一个UI引擎,默认的网页中的文字都是不能选中的,当然也没法复制了,解决方法是在HTML中指定 behavior:htmlarea,示例:

  1. import win.ui;
  2. /*DSG{{*/
  3. winform = win.form(text="HTMLayout -  文本选区( htmlarea )";right=599;bottom=399;)
  4. /*}}*/

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

  7. wbLayout.html =/***
  8. <html>
  9.   <head>
  10.     <style>
  11.       div.htmlarea
  12.       {
  13.         behavior:htmlarea;
  14.         context-menu:selector(menu#for-htmlarea);
  15.         cursor:text;
  16.         border:1px dotted;
  17.         padding:5px;
  18.       }
  19.     </style>
  20.     <menu.context #for-htmlarea>
  21.       <li command="htmlarea:copy" style="foreground-image:url(res:edit-copy.png)"  >复制<span class="accesskey">Ctrl+C</span></li>
  22.       <li command="htmlarea:selectall" >全选<span class="accesskey">Ctrl+A</span></li>
  23.     </menu>
  24.   </head>
  25. <body>
  26.   <p>CSS中的behavior:htmlarea属性可使节点支持文本选区:</p>
  27.   <div .htmlarea tabindex=0>
  28. <h3>这是一段测试文本</h3>
  29. 在这里点鼠标右键试试</br>
  30. 在这里按CTRL + A组合键试试
  31.   </div>
  32. </body>
  33. </html>
  34. ***/  

  35. wbLayout.wait()

  36. //全选文本
  37. wbLayout.querySelector("div.htmlarea").xcall("selectAll")

  38. //复制文本
  39. wbLayout.querySelector("div.htmlarea").xcall("copy")

  40. winform.show()
  41. win.loopMessage();  
复制代码

评分

参与人数 1银币 +50 收起 理由
CP3 + 50 辛苦了!

查看全部评分

回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2014-3-11 23:43:02 | 显示全部楼层

HTMLayout 中 img 节点的 src 属性会映射到CSS中的foreground-image属性,也就是等价于指定前景图像,img显示图像的效果可以用

HTMLayout 中 img 节点的 src 属性会映射到CSS中的foreground-image属性,也就是等价于指定前景图像,img显示图像的效果可以用CSS中的 foreground-**** 系列属性调整。例如button节点用img指定按钮图标,可添加下面的CSS使图标禁用时自动变灰:

  1. button:disabled img{
  2.          foreground-image-transformation:colorize(graytext);  
  3. }
复制代码

回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2014-3-11 23:47:24 | 显示全部楼层

HTMLayout CSSS! 中并不支持 ele::background = "#FFF" 这种写法, CSSS! 脚本中修改背景必须对单个的背景属性分别

HTMLayout CSSS! 中并不支持 ele::background = "#FFF" 这种写法,
CSSS!  脚本中修改背景必须对单个的背景属性分别赋值,例如:

  1. self::background-color = rgb(34,34,136)
  2. self::background-image = url(images/brick.png);
复制代码

其中 self::background-color 只能使用rgb等函数创建颜色,不能指定数值。
并且rgb的参数只能使用十进制数值。

CSSS!虽然不支持,但是在aardio里修改背景颜色可以直接这样写
ltEle.style["background"] = "#FFF"
在aardio里修改节点的背景图片需要下面这样写:

ltEle.style["background-image"] = "url(" + ltEle.image +")";
也就是说,在aardio里修改CSS属性时使用的是CSS文件里的标准语法。

评分

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

查看全部评分

回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2014-3-12 00:17:27 | 显示全部楼层

在aardio中获取或修改节点的文本 可以使用 ltEle.innerText 属性, 而获取、修改控件的值使用 ltEle.value 属性就行了。

在aardio中获取或修改节点的文本 可以使用  ltEle.innerText  属性,
而获取、修改控件的值使用 ltEle.value 属性就行了。

CSSS!里要特别注意的是对于input等控件,value是一个状态而不是一个属性,示例:

  1. input[type="text"]{
  2.         active-on!:self:value = "这是文本框";
  3. }
复制代码

而对于span,a 等非控件节点,value状态值等价于aardio中的  ltEle.innerText。

一个完整的范例:

  1. import win.ui;
  2. /*DSG{{*/
  3. winform = win.form(text="CSSS中使用value状态值";right=599;bottom=399 )  
  4. /*}}*/

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

  7. wbLayout.html =/***
  8. <div id="my-div" > </div>
  9. <input #my-button type="button" value="请点击这里">
  10. ***/

  11. wbLayout.css = /**
  12. #my-button{
  13.         click!:$1(#my-div):value = "测试";
  14. }

  15. **/

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

复制代码


另外对于span,a,p 等文本节点( 但不支持DIV等布局用节点 ),还可以在CSS中使用content属性修改内部文本,例如:

  1. span#myid{
  2.         content:"测试";
  3. }
复制代码
回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2014-3-12 00:28:21 | 显示全部楼层

HTMLayout中一般指的 click事件指的是按钮的点击事件,也就是aardio中的 onButtonClick 事件。 非按钮节点也可以显式的在beha

HTMLayout中一般指的 click事件指的是按钮的点击事件,也就是aardio中的 onButtonClick 事件。
非按钮节点也可以显式的在behavior中指定clickable以支持该事件,也可以说clickable节点(按钮或显示指定 behavior:~clickable 的节点)才能触发CSSS!中的click事件(也即aardio中 onButtonClick 事件)。

当你用鼠标点击一个非clickable节点时,在aardio中触发的不是onButtonClick 事件,而是 onMouseClick 事件,
非clickable节点在CSSS!中触发的不是click事件而是active-off事件。

下面是一个简单范例,可点击上下两个节点比较其区别:

  1. import win.ui;
  2. /*DSG{{*/
  3. winform = win.form(text="HTMLayout clickable节点";right=599;bottom=399; )
  4. /*}}*/

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

  7. namespace web.layout.behavior.testBehavior{  

  8.         onButtonClick = function (ltTarget,ltEle,reason,behaviorParams) {
  9.                 ltEle.printf("onButtonClick事件被触发")
  10.         }
  11.          
  12.         onMouseClick = function (ltTarget,ltEle,x,y,ltMouseParams) {
  13.                 ltEle.printf("onMouseClick事件被触发")
  14.         }
  15.        
  16.         //所有不是on前缀的函数,都可以在CSS脚本中直接调用
  17.         func = function(ltEle,a,b,c){  
  18.                 ltEle.printf("调用了自定义函数,收到参数 a:%d b:%d c:%d ",a,b,c )
  19.                 return "返回新的值"
  20.         }
  21. }

  22. wbLayout.html =/***
  23. <div id="a">请点击这里 clickable节点</div>
  24. <div id="b">请点击这里 非clickable节点</div>
  25. ***/

  26. wbLayout.css = /**
  27. #a{  
  28.         behavior:testBehavior clickable;
  29. }
  30. #b{  
  31.         behavior:testBehavior;
  32. }
  33. **/

  34. winform.show()
  35. win.loopMessage();
复制代码
回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2014-3-12 00:29:00 | 显示全部楼层

HTMLayout中有一些内建的 behavior,不需要导入可直接使用,内建behavior以及官网文档: [quote][url=http://www.t

HTMLayout中有一些内建的 behavior,不需要导入可直接使用,内建behavior以及官网文档:
file-icon 这个behavior用来显示文件的图标,但是这个behavior只能用于option节点、并且只能显示small,large两个尺寸的图标,而标准库中的shellIcon与这个behavior用法类似,但支持更多的尺寸,icon-size或CSS中的 -icon-size属性支持 large,small,extralarge,syssmall,jumbo等值,其中jumbo为win7超大图标(在XP上该值自动切换为extralarge)

如果需要创建自定义的名字空间,则需要在aardio中的web.layout.behavior名字空间下创建子名字空间。下面是一个示例:
import win.ui;
/*DSG{{*/
winform = win.form(text=
"HTMLayout behavior用法演示";right=599;bottom=399 )
/*}}*/

import web.layout;
var wbLayout = web.layout(winform);
  
namespace web.layout.behavior.myBehavior {
    onMouseClick =
function (ltTarget,ltEle,x,y,ltMouseParams) {
        ltEle.printf(
"点击了节点,坐标 x:%d y:%d",x,y)
    }
}

wbLayout.html =
/***
<div style="behavior:myBehavior;">请点击这里</div>
***/


winform.show()
win.loopMessage();


粗体字部分是关键代码,CSS样式里的 behavior:myBehavior 指示HTMLayout导入aardio中的名字空web.layout.behavior.myBehavior 在该名字空间中可以接收、变更节点的交互行为。

你也可以在aardio工程里创建 web.layout.behavior.myBehavior 这个用户库。然后在 aardio中使用 import web.layout.behavior.myBehavior导入behavior. 实际上在标准库中已经提供了很多可用的 behavior。
behavior.jpg ;
这些behavior的源码大家可以看看,使用的时候用 import 语句在加载网页前导入就可以了。

另外要注意,如果你在aardio中定义了 web.layout.behavior.button.command 这样的名字空间( 如果你的程序中有太多behavior,用这样的名字空间归类可以更好的组织代码、改进可维护性 )那么在HTMLayout中的behavior名字就是 button.command,但是你不可以在CSS中写 behavior:button.command,这是错的,正确的写法是 behavior:url( button.command )

回复

使用道具 举报

10

主题

79

帖子

634

积分

三级会员

Rank: 4

积分
634
发表于 2014-3-12 09:05:32 | 显示全部楼层

感谢!

感谢!
回复

使用道具 举报

2

主题

12

帖子

210

积分

二级会员

Rank: 3Rank: 3

积分
210
发表于 2014-3-12 09:29:27 | 显示全部楼层

原来如此 谢谢

原来如此 谢谢
回复

使用道具 举报

33

主题

543

帖子

3304

积分

荣誉会员

Rank: 8Rank: 8

积分
3304
发表于 2014-3-12 14:02:19 | 显示全部楼层

[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=64984&ptid=11716][c

编程 发表于 2014-3-11 23:40
HTMLayout中HTML不支持label标记,所以你要为复选框控件之类指定个标题就要写CSSS!脚本,其实解决方法很简 ...


HTMLayout 是支持 label 的。

  1. <input type="checkbox" #my-checkbox />
  2. <label for="my-checkbox">Click me</label>
复制代码


或者

  1. <label>
  2.         <input type="checkbox" />
  3.         Click me
  4. </label>
复制代码

问题可能是出在了 id 简写上。HTMLayout 里使用 # 简写 id 属性,会自动把 id 转化为小写,比如 #myCheckbox 相当于 id="mycheckbox" 而不是 id="myCheckbox"。

点评

感谢指正,试了一下确实可以,以前可能是大写了  发表于 2014-3-12 15:22
回复

使用道具 举报

2

主题

48

帖子

1192

积分

四级会员

Rank: 6Rank: 6

积分
1192
QQ
发表于 2014-3-12 21:09:22 | 显示全部楼层

感谢编程! 写了那么多layout的教程,又专门为大家解答问题还收集整理,辛苦了...

感谢编程!
写了那么多layout的教程,又专门为大家解答问题还收集整理,辛苦了...
一曲且为梦中人..
回复

使用道具 举报

1

主题

2

帖子

46

积分

新手入门

Rank: 1

积分
46
发表于 2014-3-13 09:56:14 | 显示全部楼层

必须赞一个~

必须赞一个~
回复

使用道具 举报

9

主题

54

帖子

309

积分

二级会员

Rank: 3Rank: 3

积分
309
发表于 2016-11-19 03:03:25 来自手机 | 显示全部楼层
马克
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2018-6-25 04:24 , Processed in 0.093750 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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