记录下自己零基础学习htmlayout的过程
以前说了N多次要学习下htmlayout , 一直各种理由没开始, 这次下定决心开始好好的学一学.
为什么选择htmlayout? 不是过时了吗?
我不这样认为, 适合自己的才是最好的, 最先进的技术并不一定适合我, 我目前的工作和生活中winform这样的拖拖拽拽都可以胜任 , 接触更多的是工业级的软件, 不像web那样的应用层, 工业级的设计讲究的是效率和稳定.
适不适合还是因人而异. ,哈
既然名字都包含了html那么需要的就是html的语法了, 我从来没弄过web方面的, 所以真的是白的不能再白了,.
开此贴就是为了督促自己, 希望能认认真真的执行下去.
界面最重要的就是交互, 那么怎么才能我点击 hello aardio的字时候,弹出这个信息呢?
<div style="behavior:button">hello aardio!</div>
我们看了aardio官方教程知道, 有这么个交互behavior行为, 只需要定义代码块为这个button行为,那么点击它就会产生button的行为了.
于是,我们在main.aardio逻辑代码里添加
wbLayout.onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
mainForm.msgbox("hello!");
}上面的代码是自动生成的, 只需要输入.on之后就会有这个代码提示,回车自动完成. 不需要特意去记
上面意思: 检测到有点击就弹出hello
上面只是用到了一个button , 如果有两个
<div style="behavior:button">hello aardio1111!</div> <br /> <div style="behavior:button">hello aardio2222!</div>
那么点击任何一个都会弹出窗口, 这显然不是我要的,
我要知道我点击了谁, 然后弹出不同的窗口.
那么需要在逻辑代码里输出看下触发的id是谁
wbLayout.onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
console.dumpJson(ltTarget.id)
//mainForm.msgbox("hello!");
}上面的ltTarget.id 也许你不知道这从哪里来的, 不用管它, 当你在ltTarget后输入.的时候会自动提示, 里面有这个id, 提示你是节点id
此时点击后,发现都输出的null
(⊙o⊙)… , 我看了aar官方教程, 知道这时候需要区分他们就要指定个id名称给他们,
<div #hello1 style="behavior:button">hello aardio1111!</div> <br /> <div #hello2 style="behavior:button">hello aardio2222!</div>
我添加了#hello1 和#hello2 , 这里#就是代码后面的字母是id,
此时再次点击
ok了, 我们可以区分了, 然后把逻辑修改下
wbLayout.onButtonClick = function (ltTarget,ltOwner,reason,behaviorParams) {
if(ltTarget.id == "hello1"){
mainForm.msgbox("hello11")
}
if(ltTarget.id == "hello2"){
mainForm.msgbox("hello22")
}
}
如果按照上面的写法,每次判定if() 把所有的逻辑写在一起总感觉看着不是很合逻辑, 那么aardio里提供了另外一种写法, 类似写函数那样写成表函数的形式
1 2 3 4 5 6 7 8 | wbLayout.onButtonClick = { hello1 = function (ltTarget,ltOwner,reason,behaviorParams) { mainForm.msgbox("hello11") } hello2 = function (ltTarget,ltOwner,reason,behaviorParams) { mainForm.msgbox("hello22") } } |
可以看出, 上面的hello1和hello2就是节点的id名, 这样以节点名命名的函数,可以实现统一的写法,看起来更和谐
我们知道工业上很多时候需要长按按钮来实现一定的功能, 比如数值连续增加, 那么这里应该怎么实现呢?
var i=1;
wbLayout.onButtonPress = {
hello1 = function (ltTarget,ltOwner,reason,behaviorParams) {
console.log(i)
i++;
}
}增加press功能, 这样鼠标在按钮上长按,就应该会数值自动增加了.
上面确实数值也有增加, 但是同样也触发了click点击事件, 这不是我想要的,
其实, 在winform的button事件里也是这么个情况, 那么还是老办法, 延时200ms检测下是不是放开了, 如果放开了,那么就触发click , 如果没放开那么就默认触发长按事件
这样就需要加个事件变量来判定了.
var clickFlag = false;
var pressFlag = false;
wbLayout.onButtonClick = {
hello1 = function (ltTarget,ltOwner,reason,behaviorParams) {
if(pressFlag==true){
pressFlag = false;
}else {
clickFlag = true;
pressFlag = false;
mainForm.msgbox("hello11")
}
}
}
wbLayout.onButtonPress = {
hello1 = function (ltTarget,ltOwner,reason,behaviorParams) {
if(pressFlag!=true){
clickFlag = false;
pressFlag = false;
win.delay(200)
//此期间被外部改变了
if(clickFlag == true){
//console.log("单击了一下")
}else {
pressFlag = true;
console.log("长按功能")
}
}
}
}
其实上写到这里就可以看出, 上面利用onbuttonClick事件和press是不对的, 貌似实现了, 但是会有很多问题, 要实现长按功能, 就应该用类似plus的mouseup和mousedown事件
但是从教程里来看如果html里设置behavior:button定义为button, 那么就不会产生mouseup事件了, 经过测试也确实如此,
onMouseUp 和onMouseDown 事件是针对普通的节点, 官方论坛里也说过:
注意对于div这样的普通节点并没有 onButtonClick 这样的按钮事件，
只有 onMouseClick 这样的鼠标事件. 而按钮没有 onMouseClick 事件（只能使用 onButtonClick ）。
如果要想使用mouse事件, 那么这个节点必须是普通节点, 这样我们可以删除html代码里面的behavior指定,
那么问题就又来了, 如果删除了behavior:button指定, 我们aar里就没办法监控到事件了,
看来, 不能使用htmlayout中定义过的behavior行为, 我们只能自定义一个了.
namespace web.layout.behavior.mycommand {
onMouseUp= function (ltTarget,ltOwner,x,y,ltMouseParams) {
..console.dumpJson(ltOwner.id)
};
}
//注意: namespace必须放到前面去
wbLayout.go("\layout\ui.aardio");我们在behavior名字空间下定义了一个mycommand的行为,在html里修改
<div #hello1 style="behavior:mycommand">hello aardio1111!</div> <br /> <div #hello2 style="behavior:mycommand">hello aardio2222!</div>
这样我们执行的时候, 就会显示出我们点击到的节点id了
为什么这次是ltOwner.id?
貌似这种普通节点点击事件, 返回的只有被当前点击到的节点, 所以用Owner , 反正我试了Target返回的是null
那么就可以在mouse的两个事件里进行操作了.
上面的方法只能简单的提示 , 如果你想要用要给复杂漂亮的提示框, 那么可以指定提示用的titleid,这个titleid指向下面定义的popup的id号即可.
<div #hello1 style="behavior:button" titleid="mytips1">hello aardio1111!</div> <br /> <div #hello2 style="behavior:button" titleid="mytips1">hello aardio2222!</div> <popup id="mytips1"> 这是一个示范:<br/> 可以使用html的工具提示tooltip </popup>
上面两个按钮都使用了同一个提示, 当然, 也可以使用不同的提示id
<div #hello1 style="behavior:button" titleid="mytips1">hello aardio1111!</div> <popup id="mytips1"> 这是第一个提示:<br/> 提示1,提示1,提示1,提示1,提示1 </popup> <br /> <div #hello2 style="behavior:button" titleid="mytips2">hello aardio2222!</div> <popup id="mytips2"> 这是第二个提示:<br/> 提示2,提示2,提示2,提示2,提示2 </popup>
注意: 上面的提示popup最好和要提示的内容紧挨着, 要不然后面不好维护...
那么怎么分别定义popup的样式呢?
看到<popup id="mytips"> 这个id了吧, 只需要在css里面定义它的样式就可以了.
<head>
<style type="text/css">
#mytips1{
border:0;
font: 15pt;
}
</style>
</head>上面把tips1的字体变大了.
至于怎么美化这个东西, 后面再慢慢学.
不推荐使用 , 推荐看12楼方法
3, 模拟菜单栏的弹出菜单功能
类似winform的菜单, 点击后,下拉出一个列表 ,
<div style="behavior:dropdown">菜单演示 <popup> <li>新建</li> <li>打开</li> <li>保存</li> <li>另存为</li> <hr /> <li>打印预览</li> <li>打印设置</li> <hr /> <li>退出</li> </popup> </div>
这里用dropdown , 可以联想下winfrom的dropdown , 这个是需要点击下之后,下拉出菜单
注意, 这个dropdown需要在逻辑程序里调用dropdown库
import web.layout.behavior.dropdown;
不推荐使用 , 推荐看12楼方法
上面有一个问题, 弹出来之后, 必须点击弹出区域外才能关闭弹出口, 在里面点击不会关闭
em.... aar官方论坛里有提到了,
如果希望在popup自身上点击也隐藏popup，那就要在popup上添加behavoir:popup，
同样的popup也是标准库实现的behavior( HTMLayout并没有名字是popup的内部behavior - 虽然他确实有一个叫popup的HTML标记 ），所以首先要调用 import web.layout.behavior.popup;
于是, 在html里添加popup行为, 并且在逻辑代码里添加import
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div style="behavior:dropdown">菜单 <popup style="behavior:popup"> <li>新建</li> <li>打开</li> <li>保存</li> <li>另存为</li> <hr /> <li>打印预览</li> <li>打印设置</li> <hr /> <li>退出</li> </popup> </div> |
1 | import web.layout.behavior.popup; |
这样点击弹出框也可以自动关闭了.
不推荐使用 , 推荐看12楼方法
刚才又到论坛里看了下, 弹出dropdown,官方推荐用 popup-menu ,这个是htmlayout内置的behavior,不需要导入其他库
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div style="behavior:popup-menu">菜单 <popup style="behavior:menu"> <li>新建</li> <li>打开</li> <li>保存</li> <li>另存为</li> <hr /> <li>打印预览</li> <li>打印设置</li> <hr /> <li>退出</li> </popup> </div> |
逻辑代码那里不需要导入任何库
4, 多级菜单
<div style="behavior:popup-menu">菜单 <menu .popup> <li>新建</li> <li>打开</li> <li>保存</li> <li>另存为 <menu> <li>保存1</li> <li>保存2</li> <li>保存3</li> </menu> </li> <li>打印预览</li> <li>打印设置</li> <hr /> <li>退出</li> </menu> </div>
popup-menu这个是内置的behavior , 不需要其他的操作
总结: 从这里可以看出, 显然用这种多级菜单的形式相比dropdown模式更简洁,以后用到这种点击弹出的菜单形式, 推荐用这种形式!
我们可以看到这时候,默认的弹出菜单框会有黑色的阴影, 那么如果我们不想要这个阴影怎么做呢?
<div style="behavior:popup-menu;">菜单 <menu .popup style="background-color:transparent;"> <li #new>新建</li> <li #open>打开</li> <li #save>保存</li> <li>另存为 <menu> <li #save1>保存1</li> <li #save2>保存2</li> <li #save3>保存3</li> </menu> </li> <li #print>打印预览</li> <li #printset>打印设置</li> <hr /> <li #close>退出</li> </menu> </div>
看上面代码, 我们只需要在popup节点里增加
style="background-color:transparent;"
这样来清除背景色, 之后设置背景色为单像素白色图片即可.
有黑色阴影和没有阴影的对比如下图:
现在设计软件都是扁平风格, 显然第二个会更好点
菜单显示完成了, 那么怎么才能知道我点击了哪个呢?
和上面的button写法一样, 只需要把每个<li>加个id就可以了
<div style="behavior:popup-menu">菜单 <menu .popup> <li #new>新建</li> <li #open>打开</li> <li #save>保存</li> <li>另存为 <menu> <li #save1>保存1</li> <li #save2>保存2</li> <li #save3>保存3</li> </menu> </li> <li #print>打印预览</li> <li #printset>打印设置</li> <hr /> <li #close>退出</li> </menu> </div>
然后, 在逻辑代码里, 调用菜单被点击事件,简单的写法如下:
wbLayout.onMenuItemClick = {
new = function (ltTarget,ltOwner,reason,behaviorParams) {
mainForm.msgbox("new")
}
open = function (ltTarget,ltOwner,reason,behaviorParams) {
mainForm.msgbox("open")
}
save = function (ltTarget,ltOwner,reason,behaviorParams) {
mainForm.msgbox("save")
}
save1 = function (ltTarget,ltOwner,reason,behaviorParams) {
mainForm.msgbox("save1")
}
save2 = function (ltTarget,ltOwner,reason,behaviorParams) {
mainForm.msgbox("save2")
}
save3 = function (ltTarget,ltOwner,reason,behaviorParams) {
mainForm.msgbox("save3")
}
close = function (ltTarget,ltOwner,reason,behaviorParams) {
mainForm.msgbox("close")
}
print = function (ltTarget,ltOwner,reason,behaviorParams) {
mainForm.msgbox("print")
}
}
那么,右键菜单应该怎么做呢? 点击右键才能出现的菜单
看了htmlayout的示例,
selector函数的参数是指定右键菜单的CSS选择器
<div style="context-menu:selector(menu#context);">这里要点右键才出现菜单</div> <menu.context #context> <li id="i1">First item</li> <li id="i2">Second item</li> <li id="i3">Third item</li> <li id="i4">Fourth item</li> <li>Sub menu <menu> <li id="i5">5 item</li> <li id="i6">6 item</li> </menu> </li> </menu>
5, 下拉组合框 模拟winform的combobox功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <select #font_size"> <option value="6">6</OPTION> <option value="8">8</OPTION> <option value="9">9</OPTION> <option value="10">10</OPTION> <option value="11">11</OPTION> <option value="12" selected>12</OPTION> <option value="14">14</OPTION> <option value="16">16</OPTION> <option value="18">18</OPTION> <option value="20">20</OPTION> <option value="22">22</OPTION> <option value="24">24</OPTION> <option value="28">28</OPTION> </select> |
aardio里要获取选择值的话,
1 2 3 4 5 6 7 8 | //下拉组合框 wbLayout.onSelectSelectionChanged = function (ltTarget,ltOwner,reason,behaviorParams) { //第一种方式 var ltOption = ..web.layout.element( behaviorParams.he ) console.dumpJson(ltOption.value) //推荐第二种方式 console.dumpJson(ltTarget.value) } |
如果需要把下拉框变宽,可以直接指定节点的宽度
1 | <select #font_size style="width:100"> |
如果有多个下拉框, 那么可以用id来区分
1 2 3 4 5 6 7 8 9 10 11 12 | //下拉组合框 wbLayout.onSelectSelectionChanged = { demo = function (ltTarget,ltOwner,reason,behaviorParams) { console.log("demo") console.dumpJson(ltTarget.value) } font_size = function (ltTarget,ltOwner,reason,behaviorParams) { console.log("font_size") console.dumpJson(ltTarget.value) } } |
延伸:
我们知道在winform中下拉框有个模式是可以直接在输入框中输入数值的.
那么htmlayout中应该怎么做呢?
答案: 很简单, 只需要在select 属性里 添加 editable 即可.
<select #demo style="width:100" editable> <option value="6">6</OPTION> <option value="8">8</OPTION> <option value="9">9</OPTION> <option value="10">10</OPTION> <option value="11">11</OPTION> <option value="12" selected>12</OPTION> </select>
加了这个关键词属性后, 可以直接在输入框中输入值
而且也会自动添上文本的右键菜单
6, listbox 模拟
最简单的方式
1 2 3 4 5 6 7 8 | <widget type="select" #demo2> <OPTION VALUE=0 SELECTED>列表项1</OPTION> <OPTION VALUE=1 >列表项2</OPTION> <OPTION VALUE=1 >列表项3</OPTION> <OPTION VALUE=1 >列表项4</OPTION> <OPTION VALUE=1 >列表项5</OPTION> <OPTION VALUE=1 >列表项6</OPTION> </widget> |
因为这个类型也是select, 所以同样和combobox一样,获取事件
1 2 3 4 5 6 7 | wbLayout.onSelectSelectionChanged = { demo2 = function (ltTarget,ltOwner,reason,behaviorParams) { //第一种方式 var ltOption = ..web.layout.element( behaviorParams.he ) console.dumpJson(ltOption.value) } } |
延伸:
怎么在listbox中添加复选框? 让它能够多选呢?
答案:
在widget节点里添加 multiple="checks" 属性即可. htmlayout会自动在前面增加复选框, 另外 option 属性里面的 selected 属性指定选中的复选框
<widget type="select" #demo2 style="height:120px;width:100px" multiple="checks"> <OPTION VALUE=0 SELECTED>列表项1</OPTION> <OPTION VALUE=1 >列表项2</OPTION> <OPTION VALUE=1 SELECTED>列表项3</OPTION> <OPTION VALUE=1 selected>列表项4</OPTION> <OPTION VALUE=1 >列表项5</OPTION> <OPTION VALUE=1 >列表项6</OPTION> </widget>
提醒:
不知道你从上面的代码发现了什么没有.....?
注意看 上面的 selected 和SELECTED 大小写是不同的, 但是效果是一样的, 这说明htmlayout对大小写不敏感....
aar官方教程里也提醒了: htmlayout的节点名不要用大小写驼峰命名法, 推荐用连接符连接法,
7, ICON图标的显示
这个是内置的behavior:shell-icon实现的, 不需要import任何库,编写html即可.
<select size="6" style="height:500px"> <option><img style="behavior: shell-icon;" filename=".png" /> *.png icon</option> <option><img style="behavior: shell-icon;" filename=".jpg" /> *.jpg icon</option> <option><img style="behavior: shell-icon;" filename=".doc" /> *.doc icon</option> <option><img style="behavior: shell-icon;" filename=".html" /> *.html icon</option> <option><img style="behavior: shell-icon;" filename=".cpp" /> *.cpp icon</option> <option><img style="behavior: shell-icon;" filename=".zip" /> *.zip icon</option> <option><img style="behavior: shell-icon;" filename=".js" /> *.js icon</option> <option><img style="behavior: shell-icon;" filename=".exe" /> *.exe icon</option> </select>
嗯.....上面看着很不舒服,
原因是没设置css样式定义间距和外形, 那么就需要在style里添加下样式即可
下面添加图片icon的上右下左编辑margin外边距
<select size="6" style="height:500px"> <option><img style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".png" /> *.png icon</option> <option><img style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".jpg" /> *.jpg icon</option> <option><img style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".doc" /> *.doc icon</option> <option><img style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".html" /> *.html icon</option> <option><img style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".cpp" /> *.cpp icon</option> <option><img style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".zip" /> *.zip icon</option> <option><img style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".js" /> *.js icon</option> <option><img style="behavior: shell-icon;margin:10px 20px 10px 5px;" filename=".exe" /> *.exe icon</option> </select>
运行后:
是不是看着舒服多了, 哈
看到这里, 不知道你心里有没有产生一个疑问?
这个icon是不是必须放置到select节点里面啊???
是不是必须按照上面的写法才能显示啊????
答案当然是NO
官方也只是提供了个演示而已, 实际起作用的是behavior:shell-icon
所以, so , 你写到div节点里也是可以的
<div style="behavior: shell-icon; margin:50 30 10 30;" filename=".jpg" > </div> <div style="behavior: shell-icon; margin:50 30 10 30;" filename=".zip" > </div>
那么能写到div里就可以写到任何你想要展示 的地方了.
继续:详细的icon属性如下;
behavior: file-icon;文件图标显示行为.
如果没有指定大小. 此行为会提取最符合显示区域大小的图标显示.
属性:
filename="test.exe" - 获取指定可执行文件的图标 filename=".doc" - 获取指定扩展名的系统图标 filename="." - 文件夹图标 filename=".." - 驱动器图标 filename="\\" - 我的电脑图标 icon-size="small" - 图标大小. 可取值: "small", ”large”. 默认为 "small".
8, 文件选择器 和文件夹选择器
类似aardio里winform里面的fsys.dlg.openxxx , 弹出一个窗口让你选择要上传的文件或文件夹功能
文件选择器:<input type="file-path" filter="HTML files:*.htm,*.html;Text files:*.txt;All files:*.*" novalue="(select file)" value="" /> <br/> 文件夹选择:<input type="folder-path">
看代码是不是和aardio里实现这个功能的代码基本一样?!
用熟悉aardio的话, 这个功能应该一下子就记住了,哈
上面还会自动带上图标, 不错.
9 , 单选按钮
类似winform 的radio按钮功能, 在htmlayout中使用很简单
<INPUT type="radio" name="color" value="blue">蓝色 <INPUT type="radio" name="color" value="red" checked>红色 <INPUT type="radio" name="color" value="green">绿色 <INPUT type="radio" name="color" value="NoDefine">未定义
如上, name定义分组, value定义该选项的值, checked定义当前选中项
参考radio的属性即可
name="group" - 用于区分单选框组(必须) value="0" - 对应选项的值
思考:
怎样在aardio中获取到是哪个颜色被选中了???
答案:
radio没有专门的事件获取这个值, 那么只能利用属性选择器来选择
var ltCurrent = wbLayout.querySelector("INPUT[name='color']:checked");
console.log( ltCurrent.getAttribute("value") )我们把这个代码放到一个button按钮里去, 上面的意思是, 首先查找INPUT节点,再次找到属性是name="color"的节点,从这些节点里找到被checked 了的节点.
然后从这个节点里获取value属性值
延伸:
有没有发现上面的单选按钮很难点到, 必须点击到圆圈里才行??
那么,怎样才能点击文字也触发单选功能呢?
答案:
将INPUT 改为button , 单选本来就是单选按钮
<button type="radio" name="color1" value="blue">蓝色</button> <button type="radio" name="color1" value="red" checked>红色 </button>
这样文字就是一体的.
10, 多选框
<INPUT type="checkbox" name="cb" value="C++">C++ <INPUT type="checkbox" name="cb" value="Aardio" checked>Aardio <INPUT type="checkbox" name="cb" value="JavaScript" checked>JavaScript <INPUT type="checkbox" name="cb" value="TIScript">TIScript
同楼上的方式,改为button,让文字也可以点击
<button type="checkbox" name="cb" value="C++">C++ </button> <button type="checkbox" name="cb" value="Aardio" checked>Aardio </button> <button type="checkbox" name="cb" value="JavaScript" checked>JavaScript </button> <button type="checkbox" name="cb" value="TIScript">TIScript </button>
那么,如何获取到多选框的值呢?
//获取所有的符合条件的节点
var ltCurrent = wbLayout.querySelectorAll("INPUT[name='cb']:checked");
for(i=1;#ltCurrent;1){
//输出值
console.log( ltCurrent[i].getAttribute("value") )
}因为是多选框, 那么说明选中的选项有可能不止一个, 那么就要使用querySelectorAll来获取了.
11, 文本框
类似winform的editbox控件
<input type="text" />
上面是最简单的输入框
text有下面这些属性可以设置,达到不同的效果
value=“text” - 初始文本 .size="20" - 元素的初始宽度 .maxlength="12" - 最大文本长度 .filter=“0~9” - 限制可输入的字符内容. 支持单个字符或字符范围. o ”.@0~9a~zA~Z” - 允许输入所有字母和数字以及 . 和 @ 字符(email). o “^.,-” - 允许输入除 . , - 之外的任意字符. ^ 作为排斥标记使用 .novalue=“please input” - 如果文本框为空, 则显示此属性指定的文本 .o 你可以通过 :empty 伪类来修改这个提示文本的样式.
有如下几个状态
:hover - 悬停 :focus - 获得焦点 :disabled - 被禁用 :empty - 内容为空
那么, 怎么使用呢?
<input type="text" size="50" novalue="默认提示文字..." />
下面代码增加个鼠标经过text文本框时候的样式
<style>
input[type="text"]:hover{
outline:4px glow #3070ff 1px;
}
</style>效果如下:
当然上面的hover可以改为focus或者empty , 这样可以表达不同的状态
延伸:
如果需要输入密码, 那么怎么办?
答案:
将type改为password即可, 属性和text一样, 增加了一个扩展属性
password-char=“#” - 指定密码提示字符为 #.
这里可以指定密码提示符号
<html>
<head>
<style>
input[type="password"]:hover{
outline:4px glow #3070ff 1px;
}
</style>
</head>
<body>
<input type="password" size="30" novalue="请输入密码..." />
</body>
</html>那么, 怎么去获取这个输入的密码呢?
答案:
var ltEle = wbLayout.querySelector("input[type='password']");
console.log( ltEle.value)
12, 数值输入框
类似winform的spin控件, 输入框的右侧有上下微调按钮,点击可以自加数值
<input type="number" />
type="number"只允许输入正整数,不允许输入 负号和小数点
所有用number会有很多局限, 如果要是需要输入负号和小数点 ,
那么推荐使用type="decimal"
input:<input type="decimal" step=5 format="negative-sign:true;leading-zero:false;"/>
注意, 属性里如果设置了step 那么就会自动添加上下箭头.
另外这个控件还有很多自有属性(备注:number和decimal的相同)
value=float - 初始值 size=integer - 控件宽度 min - 最小值 max - 最大值 step - 滚动选框步进值，指定了此属性会显示滚动选框 format - 数值显示格式，支持下面的字段，使用 ';'分隔多个字段: grouping - number, ‘千位’分隔符间隔数 fdigits - number, 小数位置 leading-zero - true/false, 是否显示前导0 decimal-sep - 小数分隔符 grouping-sep - 千位分隔符 negative-sign - true/false, true - 是否显示负号
如果要输入的是货币, 那么可以使用 type="currency", 那么输入的数字会自动按照千百个进行划分 , 方便观察.
以上: 无论是number / decimal / currency 都有以下两个自带属性
invalid - 当前输入了无效的值 negative - 负数
这两个属性可以在css中指定动态效果, 类似hover 这样的.
<html>
<head>
<style>
input[type="decimal"][negative] { color:blue; }
</style>
</head>
<body>
input:<input type="decimal" step=5 />
</body>
</html>
看上面的css样式, [negative]指定输入值为负数时候, 显示颜色为蓝色
提问:
怎么获取文本框内的值呢?
答案:
var ltEle = wbLayout.querySelector("input[type='decimal']");
console.log( ltEle.value )
13, 进度条
和winform一样的功能progress控件
最简单的进度条:
<p> 0%:<progress name="p1" maxvalue="100" value="0"/> 25%:<progress name="p2" maxvalue="100" value="25"/> 50%:<progress name="p3" maxvalue="100" value="50"/> 75%:<progress name="p4" maxvalue="100" value="75"/> 100%:<progress name="p5" maxvalue="100" value="100"/> </p>
这个控件根据当前显示值和最大值的比值, 来调整前景图, 达到动态效果
那么, 我们如果要在aardio里控制这个动态显示,应该怎么做呢?
假如有个名字是demo的进度条, 当前值是30
<progress name="demo" maxvalue="100" value="30"/>
我们可以用css选择器来改变这个值,达到调整进度的目的
mainForm.button.oncommand = function(id,event){
var ltEle = wbLayout.$1("progress[name='demo']");
//输出之前的进度
console.dump( ltEle.value )
//随机分配进度
ltEle.value = math.random(1,100);
}我们可以看到进度条随机在变化了.
思考: 我们如果要弄个漂亮的进度条应该怎么自定义?
14, 跟踪条
类似winform里的trackbar
htmlayout里分水平和垂直跟踪条 , 类型分别是
hslider 水平跟踪条
vslider 垂直跟踪条
<input type="hslider" name="demo1" min="0" max="100" value="0" step="10" buddy="demo1-buddy"/>水平当前值: <b id="demo1-buddy">x</b> <br /> <input type="vslider" name="demo2" min="0" max="100" value="0" step="10" buddy="demo2-buddy"/>垂直当前值: <b id="demo2-buddy">x</b>
同样的写法和winform也很类似, 只需要指定buddy即可取得当前跟踪值.
如果, 垂直跟踪条想要从下到上拖动数值变小, 那么只需要把min=最大值, max=最小值即可
15, 树形视图 tree
类似winform里面的treeView控件
<widget type="tree" #demo treelines style="height:100%%;width:100%%;font-size:20px"> <option expanded>Metals <option expanded>Alkaline Metals <option>Lithium <code>Li</code></option> <option>Sodium <code>Na</code></option> <option>Potassium <code>K</code></option> </option> <option expanded>Transition Metals <option>Scandium <code>Sc</code></option> <option>Titanium <code>Ti</code></option> <option>Vanadium <code>V</code></option> </option> </option> <option expanded>Halogens <option>Fluorine <code>F</code></option> <option>Chlorine <code>Cl</code></option> <option>Bromine <code>Br</code></option> </option> </widget>
请注意第一行里面的 treelines 属性, 这个属性加进去那么视图里就又节点之间的连接线, 如果你不加这个关键词, 那么节点之间是光秃秃的.
如果你还想加入复选框, 那么你还需要一个 checkmarks 关键词
获取点选的值:
wbLayout.onSelectSelectionChanged = function (ltTarget,ltOwner,reason,behaviorParams) {
var ltOption = ..web.layout.element( behaviorParams.he )
console.log(ltOption.value)
}
16 ,列表视图控件Grid
类似winform的listview控件
<html>
<head>
<style>
table[name="reportview"]
{
width:500px; /* natural width */
height:100%%;
overflow:auto;
behavior:grid;
background: url(theme:edit-normal) stretch;
padding:1px;
font:system;
line-height:1.4em;
}
table[name="reportview"] th
{
background-image: url(theme:column-header-normal);
background-repeat: stretch;
}
table[name="reportview"] th:hover
{
background-image: url(theme:column-header-hover);
}
table[name="reportview"] th:active
{
background-image: url(theme:column-header-pressed);
}
table[name="reportview"] td /* all cells */
{
padding:0 4px;
border-bottom:1px solid silver;
}
table[name="reportview"] tr:current td /* all rows */
{
background-color: highlight;
color: highlighttext;
}
</style>
</head>
<body>
<table name="reportview" width="100%" cellspacing=-1px fixedrows=1>
<tr><th>#</th><th>Country</th></tr>
<tr><td VALUE=1 >1 </td><td>Afghanistan </td></tr>
<tr><td VALUE=2 >2 </td><td>Albania </td></tr>
<tr><td VALUE=3 >3 </td><td>Algeria </td></tr>
<tr><td VALUE=4 >4 </td><td>American Samoa </td></tr>
<tr><td VALUE=5 >5 </td><td>Andorra </td></tr>
<tr><td VALUE=6 >6 </td><td>Angola </td></tr>
<tr><td VALUE=7 >7 </td><td>Anguilla </td></tr>
<tr><td VALUE=8 >8 </td><td>Antarctica </td></tr>
<tr><td VALUE=9 >9 </td><td>Antigua And Barbuda </td></tr>
<tr><td VALUE=10 >10 </td><td>Argentina </td></tr>
<tr><td VALUE=11 >11 </td><td>Armenia </td></tr>
<tr><td VALUE=12 >12 </td><td>Aruba </td></tr>
<tr><td VALUE=13 >13 </td><td>Australia </td></tr>
<tr><td VALUE=14 >14 </td><td>Austria </td></tr>
<tr><td VALUE=15 >15 </td><td>Azerbaijan </td></tr>
<tr><td VALUE=16 >16 </td><td>Bahamas </td></tr>
<tr><td VALUE=17 >17 </td><td>Bahrain </td></tr>
<tr><td VALUE=18 >18 </td><td>Bangladesh </td></tr>
<tr><td VALUE=19 >19 </td><td>Barbados </td></tr>
<tr><td VALUE=20 >20 </td><td>Belarus </td></tr>
<tr><td VALUE=21 >21 </td><td>Belgium </td></tr>
<tr><td VALUE=22 >22 </td><td>Belize </td></tr>
<tr><td VALUE=23 >23 </td><td>Benin </td></tr>
<tr><td VALUE=24 >24 </td><td>Bermuda </td></tr>
<tr><td VALUE=25 >25 </td><td>Bhutan </td></tr>
<tr><td VALUE=26 >26 </td><td>Bolivia </td></tr>
<tr><td VALUE=27 >27 </td><td>Bosnia and Herzegovina </td></tr>
<tr><td VALUE=28 >28 </td><td>Botswana </td></tr>
<tr><td VALUE=29 >29 </td><td>Bouvet Island </td></tr>
<tr><td VALUE=30 >30 </td><td>Brazil </td></tr>
<tr><td VALUE=31 >31 </td><td>British Indian Ocean Territory </td></tr>
<tr><td VALUE=32 >32 </td><td>Brunei Darussalam </td></tr>
<tr><td VALUE=33 >33 </td><td>Bulgaria </td></tr>
<tr><td VALUE=34 >34 </td><td>Burkina Faso </td></tr>
<tr><td VALUE=35 >35 </td><td>Burundi </td></tr>
</table>
</body>
</html>需要在主界面中导入grid库
import web.layout.behavior.grid;
那么如果要是多选应该怎么办呢?
table中增加关键词 multiple 即可
<table name="reportview" width="100%" cellspacing="0" fixedrows="1" multiple>
当然,此时你按住ctrl 然后点选是看不出效果的, 那么我们可以增加选中后的css样式
table tr:checked /* checked row */
{
background-color: highlight;
color: highlighttext;
}这时候, 点选和shift多选会高亮显示出来了
完整代码:
<html>
<head>
<style>
table[name="reportview"]
{
width:500px; /* natural width */
height:100%%;
overflow:auto;
behavior:grid;
background: url(theme:edit-normal) stretch;
padding:1px;
font:system;
line-height:1.4em;
}
table[name="reportview"] th
{
background-image: url(theme:column-header-normal);
background-repeat: stretch;
}
table[name="reportview"] th:hover
{
background-image: url(theme:column-header-hover);
}
table[name="reportview"] th:active
{
background-image: url(theme:column-header-pressed);
}
table[name="reportview"] td /* all cells */
{
padding:0 4px;
border-bottom:1px solid silver;
}
table[name="reportview"] tr:current td /* all rows */
{
background-color: highlight;
color: highlighttext;
}
table tr:checked /* checked row */
{
background-color: highlight;
color: highlighttext;
}
</style>
</head>
<body>
<table name="reportview" width="100%" cellspacing="0" fixedrows="1" multiple>
<tr><th>#</th><th>Country</th></tr>
<tr><td VALUE=1 >1 </td><td>Afghanistan </td></tr>
<tr><td VALUE=2 >2 </td><td>Albania </td></tr>
<tr><td VALUE=3 >3 </td><td>Algeria </td></tr>
<tr><td VALUE=4 >4 </td><td>American Samoa </td></tr>
<tr><td VALUE=5 >5 </td><td>Andorra </td></tr>
<tr><td VALUE=6 >6 </td><td>Angola </td></tr>
<tr><td VALUE=7 >7 </td><td>Anguilla </td></tr>
<tr><td VALUE=8 >8 </td><td>Antarctica </td></tr>
<tr><td VALUE=9 >9 </td><td>Antigua And Barbuda </td></tr>
<tr><td VALUE=10 >10 </td><td>Argentina </td></tr>
<tr><td VALUE=11 >11 </td><td>Armenia </td></tr>
<tr><td VALUE=12 >12 </td><td>Aruba </td></tr>
<tr><td VALUE=13 >13 </td><td>Australia </td></tr>
<tr><td VALUE=14 >14 </td><td>Austria </td></tr>
<tr><td VALUE=15 >15 </td><td>Azerbaijan </td></tr>
<tr><td VALUE=16 >16 </td><td>Bahamas </td></tr>
<tr><td VALUE=17 >17 </td><td>Bahrain </td></tr>
<tr><td VALUE=18 >18 </td><td>Bangladesh </td></tr>
<tr><td VALUE=19 >19 </td><td>Barbados </td></tr>
<tr><td VALUE=20 >20 </td><td>Belarus </td></tr>
<tr><td VALUE=21 >21 </td><td>Belgium </td></tr>
<tr><td VALUE=22 >22 </td><td>Belize </td></tr>
<tr><td VALUE=23 >23 </td><td>Benin </td></tr>
<tr><td VALUE=24 >24 </td><td>Bermuda </td></tr>
<tr><td VALUE=25 >25 </td><td>Bhutan </td></tr>
<tr><td VALUE=26 >26 </td><td>Bolivia </td></tr>
<tr><td VALUE=27 >27 </td><td>Bosnia and Herzegovina </td></tr>
<tr><td VALUE=28 >28 </td><td>Botswana </td></tr>
<tr><td VALUE=29 >29 </td><td>Bouvet Island </td></tr>
<tr><td VALUE=30 >30 </td><td>Brazil </td></tr>
<tr><td VALUE=31 >31 </td><td>British Indian Ocean Territory </td></tr>
<tr><td VALUE=32 >32 </td><td>Brunei Darussalam </td></tr>
<tr><td VALUE=33 >33 </td><td>Bulgaria </td></tr>
<tr><td VALUE=34 >34 </td><td>Burkina Faso </td></tr>
<tr><td VALUE=35 >35 </td><td>Burundi </td></tr>
</table>
</body>
</html>如果想要给grid排序, 那么可以使用behavior:sortableGrid
相应的需要在aar中导入
import web.layout.behavior.sortableGrid
之后, 双击列标题就可以排序了
半透明窗体
import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程19";right=492;bottom=401;border="none")
mainForm.add()
/*}}*/
import web.layout;
import web.layout.behavior.windowCommand;
import web.layout.behavior.windowSizer;
var wbLayout = web.layout( mainForm )
wbLayout.html = /**
<html>
<body>
<div #demo >这里演示下半透明窗体,文字不透明</div>
</body>
</html>
**/
wbLayout.css = /**
html { margin: 0; padding: 0; background: none; }
body{ margin:0; padding:0; background:rgba(20,179,131,0.7); }
#demo{ color:#FFF; }
**/
mainForm.onMouseDown = function(wParam,lParam){
mainForm.hitCaption()
}
//必须窗体全透
mainForm.transparent(true);
mainForm.show();
return win.loopMessage();
登录后方可回帖
1 , 新建htmlayout工程
首先建立 ui.aardio 的代码文件, 代码框架如下
那么,修改和添加main.aardio
import web.layout; var wbLayout = web.layout( mainForm ); wbLayout.go("\layout\ui.aardio");运行结果
看到hello aardio 就说明基本的框架成功了, 以后的实验就在ui.aardio里面更改了