admin

用户名:admin

注册于:2017-11-09

主题数: 302     回贴数: 373

网站:

介绍:

最后活动于8 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

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; f
«  8 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

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 <co
«  10 天前
回复了主题  › echarts三维图,散点

回复#2 @evyhui :

这个用的web.form , 用的ie11 

用webkit和blink推荐用 http://www.htmlayout.cn/t/214 这个帖子里面的js控件

«  10 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

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<
«  15 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

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%:<
«  15 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

12,  数值输入框

类似winform的spin控件, 输入框的右侧有上下微调按钮,点击可以自加数值

<input type="number" />

type="number"只允许输入

«  16 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

11, 文本框

类似winform的editbox控件

<input type="text" />

上面是最简单的输入框

text有下面这些属性可以设置,达到不同的效果

«  17 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

10, 多选框

  <INPUT type="checkbox" name="cb" value="C++">C++&nbsp;   <INPUT type="checkbox" name="cb" value="Aardio" checked>Aardio&nbsp;    <INPUT type="checkbox" name="cb" value="JavaScript" checked>JavaScript&nbsp;    &l
«  18 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

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
«  18 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

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/>   文件夹选择:<inp
«  19 天前
回复了主题  › 记录下自己零基础学习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  
«  19 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

6, listbox 模拟

最简单的方式

1234
«  20 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

5, 下拉组合框 模拟winform的combobox功能

1234
«  21 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

那么,右键菜单应该怎么做呢? 点击右键才能出现的菜单

看了htmlayout的示例, 

selector函数的参数是指定右键菜单的CSS选择器

  <div style="context-menu:selector(menu#context);">这里要点右键才出现菜单</div>   <menu.context #context>     <li id="i1">First item</li>     <
«  21 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

菜单显示完成了, 那么怎么才能知道我点击了哪个呢?

和上面的button写法一样, 只需要把每个<li>加个id就可以了

<div style="behavior:popup-menu">菜单 <menu .popup>          <li #new>新建</li> <li #open>打开</li> <li #save>保存</li> &l
«  21 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

4, 多级菜单

<div style="behavior:popup-menu">菜单 <menu .popup>          <li>新建</li> <li>打开</li> <li>保存</li> <li>另存为 <menu> <li>保存1</li> <li>保存2</li>
«  21 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

不推荐使用 , 推荐看12楼方法

刚才又到论坛里看了下, 弹出dropdown,官方推荐用 popup-menu ,这个是htmlayout内置的behavior,不需要导入其他库

«  21 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

不推荐使用 , 推荐看12楼方法

上面有一个问题, 弹出来之后, 必须点击弹出区域外才能关闭弹出口, 在里面点击不会关闭

em.... aar官方论坛里有提到了,

«  21 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

不推荐使用 , 推荐看12楼方法

3, 模拟菜单栏的弹出菜单功能

类似winform的菜单, 点击后,下拉出一个列表 ,

<div style="behavior:dropdown">菜单演示 <popup>          <li>新
«  21 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

上面的方法只能简单的提示 , 如果你想要用要给复杂漂亮的提示框, 那么可以指定提示用的titleid,这个titleid指向下面定义的popup的id号即可.

<div #hello1 style="behavior:button" titleid="mytips1">hello aardio1111!</div> <br /> <div #hello2 style="behavior:button" titleid="mytips1">hel
«  21 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

2, 增加提示

上面按键上怎么增加提示功能? 类似winform里的tooltips

第一种最简便的办法, 在div里面增加title属性, 这样htmlayout自动管理提示

<div #hello1 style="behavior:button" ti
«  21 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

其实上写到这里就可以看出, 上面利用onbuttonClick事件和press是不对的, 貌似实现了, 但是会有很多问题, 要实现长按功能, 就应该用类似plus的mouseup和mousedown事件

但是从教程里来看如果html里设置behavior:button定义为button, 那么就不会产生mouseup事件了, 经过测试也确实如此, 

onMouseUp 和onMouseDown 事件是针对普通的节点, 官方论坛里也说过:

«  21 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

我们知道工业上很多时候需要长按按钮来实现一定的功能, 比如数值连续增加, 那么这里应该怎么实现呢?

var i=1; wbLayout.onButtonPress = { hello1 = function (ltTarget,ltOwner,reason,behaviorParams) { console.log(i) i++; } }

增加press功能, 这样鼠标在按钮上长按,就应该会数值自动增加了.

«  21 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

如果按照上面的写法,每次判定if() 把所有的逻辑写在一起总感觉看着不是很合逻辑, 那么aardio里提供了另外一种写法, 类似写函数那样写成表函数的形式

123
«  21 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

上面只是用到了一个button , 如果有两个

<div style="behavior:button">hello aardio1111!</div> <br /> <div style="behavior:button">hello aardio2222!</div>

那么点击任何一个都会弹出窗口, 这显然不是我要的, 

我要知道我点击了谁, 然后弹出不同的窗口.

那么需要在逻辑代码里输出看

«  22 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

界面最重要的就是交互, 那么怎么才能我点击 hello aardio的字时候,弹出这个信息呢?

<div style="behavior:button">hello aardio!</div>

我们看了aardio官方教程知道, 有这么个交互behavior行为, 只需要定义代码块为这个button行为,那么点击它就会产生button的行为了.

于是,我们在main.aardio逻辑代码里添加

«  22 天前
回复了主题  › 记录下自己零基础学习htmlayout的过程

1 , 新建htmlayout工程

首先建立 ui.aardio 的代码文件, 代码框架如下

<html> <head> <style type="text/css"> </style> </head> <body> hello aardio! </body> </html>

那么,修改和添加main.aardio 

«  22 天前
创建了主题  › 记录下自己零基础学习htmlayout的过程

以前说了N多次要学习下htmlayout , 一直各种理由没开始, 这次下定决心开始好好的学一学.

为什么选择htmlayout? 不是过时了吗?

我不这样认为, 适合自己的才是最好的, 最先进的技术并不一定适合我, 我目前的工作和生活中winform这样的拖拖拽拽都可以胜任 , 接触更多的是工业级的软件, 不像web那样的应用层, 工业级的设计讲究的是效率和稳定. 

适不适合还是因人而异.  ,哈


既然名字都包含了html那么需要的就是html的语法了, 我从来没弄过web方面的, 所以真的是白的不能再白

«  22 天前
回复了主题  › 异形按钮的实现方法(例如:斜角按钮,星形按钮)

回复#1 @jacen :

感谢校长提供tabs的方法,非常好用

«  22 天前
创建了主题  › 异形按钮的实现方法(例如:斜角按钮,星形按钮)


2019-10-26更新:

校长在新版里增加了win.region.png库, 另外在updateWindow()函数里增加了第三个参数来保存之前生成的region区域, 这样利用这个库, 代码就可以更简洁了

«  24 天前
登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
Htmlayout皮肤Htmlayout皮肤引擎介绍
黑猫Aar教程网:简码编程
C大Aardio论坛:Aar爱好者论坛
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站