不知道从哪开始写,就分析下aardio新建的htmlayout窗体示例代码吧

By admin at 2017-11-09 • 0人收藏 • 858人看过

第一贴,就分析下aardio自动生成的htmlayout示例界面

代码如下:

界面的html代码

<!doctype html>
<html>
<body>
	<!-- 界面顶栏 -->
    <div id="header"> 
    
    	<!-- 下面是标题栏按钮,必须使用a标记表示,command属性指示该按钮执行的命令,可在窗体设计器中禁用最大化、最小化按钮 --> 
        <div class="titlebox">
            <a command="window-min">0</a><a command="window-max">1</a><a command="window-close" >r</a>
        </div>	
        
       	<!-- 标题栏弹出菜单,需要弹出节点的最好用div或button等元素,不要使用a,li等元素 -->
		<div .window-menu>u
			<menu .popup> <!-- .popup是内置的弹出菜单样式 -->
    			<li>在线帮助</li> 
    			<li>子菜单
      			<menu >
        			<li>这是子菜单</li>
      			</menu>
    			</li>
    			<li #exit>退出</li>
  			</menu>
		</div> 
		
		<!-- 下面是标题栏文本,凡在CSS中指定 behavior:windowCommand 的节点(含子节点) 可用 command 属性指明命令类型 -->
        <div class="title-bar" command="window-caption"> <span class=title> 我 的 软 件 </span></div>
    </div> 
    
    <!-- 界面中部内容栏 -->
    <div id="container"> 
    
    	<!-- 左边栏,固定宽度 -->
    	<div class="lside"> </div> 
    	
    	<!-- 右边栏,自适应宽度 -->
    	<div class="rside"> </div>  
    </div>
    
    <!-- 界面底栏 -->
    <div id="footer">
    	<button id="help">HTMLayout 布局教程</button>
    </div>
</body>
</html>

css样式属性:

html,body{
    margin:0; /*去掉默认的页面边距*/
    height:100%;/*因为HTML元素的高度默认是按需增加的,所有需要显示指定根节点高度*/
    background:#fff;/*网页背景色*/
}

body{
	overflow:hidden;/*避免出现滚动条*/
}

/*最大化后body会自动添加maximize属性,如果是圆角界面可以在这里移除圆角*/
body[maximize]{ 
	border-radius:0;
}

body[maximize] #header{
	border-radius:0;
}

#header{
    height:32px;
    background:rgb(52,152,220);
    cursor:default;
    behavior:windowCommand;
    overflow:hidden;/*清除浮动*/
}

#header .title-bar{
    margin-right:95px;
    padding-left:15px;
    height:28px;
    line-height: 28px;
    font:system;
    color:#fff; 
} 

#header .titlebox{  
    width:max-intrinsic; 
    height:28px; 
    float:right; 
    margin-right:8px; 
    overflow-x:hidden;
}

#header .titlebox a{ 
    display:inline-block; //显示为块节点 
    width:max-intrinsic; 
    height:14px;
    font-family:"Marlett";/*该字体显示按钮符号*/  
    font-size:14px;
    padding:4px;
    color:#fff; 
    cursor:default; 
}

/*CSS选择器中,方括号指定节点拥有的属性*/
#header .titlebox a[command]:hover{ 
    background:#6ebccf; 
}

#header .titlebox a[command]:active{ 
    background:#FF0000; 
} 

#header a[command="window-restore"]{ 
    content:"2";/*Marlett字体为还原按钮符号*/ 
} 

#header .window-menu{ 
	display:block;  
	float:right;
	behavior:popup-menu; 
	width:max-intrinsic; 
	height:14px;
	font-family:"Marlett";/*该字体显示按钮符号*/  
	font-size:14px;
	padding:4px;
	color:#fff;
}

#header .window-menu:hover{
	background:#6ebccf;
}

#header .window-menu:owns-popup /*菜单已弹出*/
{ 
    background-color: #FF0000;
    color: #FFFFFF;
}

#container{
    width:100%; 
    height:100%%; /*撑满剩余可用空间*/
    flow: horizontal; /*将容器内部块元素变为横向布局 - 比具有破坏性的float浮动布局更方便*/
    margin:0 auto; 
    overflow:hidden;  
    background:#ac0;
}

#container .lside{
    height:100%;
    width:150px;  
    background:rgb(110,179,210);
}

#container .rside{
    height:100%; 
    background:#FFF; 
}

#container .lside > *{
    margin:38px 0px;
}

#container .rside > *{
    margin:38px 10px;
    font-size:9pt;
}

#footer {
	background:rgb(239,237,238);
	height:25px;
	text-align:right;
	padding:10px 20px;
}

#footer button{
	padding:4px 13px;
	font-size:12px; 
	background:rgb(27,174,93);
	color:white; 
}

#footer button:hover { 
	background:rgb(33,127,188);
	outline: 1px glow rgb(91,171,230) 1px;
	cursor:pointer;
}

aardio与上面的html交互代码:

import win.ui;
/*DSG{{*/
var winform = win.form(text="HTMLayout 无边框窗体";right=759;bottom=469;border="none";parent=...)
winform.add()
/*}}*/

import web.layout;
import web.layout.behavior.windowCommand;//导入behavior:windowCommand; 
var wbLayout = web.layout( winform );//在窗体上创建HTMLayout对象

//开发环境中启用HTMLayout调试功能
if( _STUDIO_INVOKED ){
	import web.layout.debug;
	wbLayout.attachEventHandler( web.layout.debug );
}

wbLayout.html = htmlStr;
wbLayout.css = cssStr;
// 响应菜单点击事件
wbLayout.onMenuItemClick =  {

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

import process;
wbLayout.onButtonClick = {
	help = function (ltTarget,ltOwner,reason,behaviorParams) {
		process.execute("http://api.aardio.com/v10/pages/htmlayout-introduction");
	}
}

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

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


5 个回复 | 最后更新于 2017-11-11
2017-11-09   #1

对于上面的html代码,要知道

<!doctype html>

这个可以删掉,这里我们做的是桌面,不是网页,于是可以知道

一个界面就是从

<html>...</html>

这里面每一对<>...</>之间就是一对节点.

因此可以知道,body , menu ,div 都是节点.

同时a 超链接其实也是个节点

2017-11-09   #2

随便在哪个页面调用浏览器的调试助手,看看盒子模型

blob.png

这个是body的模型,把css里面margin改成50后

blob.png

我记得应该是上右下左,下面为什么没空白....

看到上面的问号,css可以看作是一行一行执行,所以继续看body的css

height:100%;/*因为HTML元素的高度默认是按需增加的,所有需要显示指定根节点高度*/

这个意思是高度自适应, 如果去掉,那么就看到下边的空白了.

写到这里,发现自己写css的时候有个问题.

margin:50 10 10 10; /*去掉默认的页面边距*/

这里面的边距是用空白格分隔,我犯了个大错误,用逗号分隔了.唉,这个不同的地方一定要注意!

2017-11-11   #3

继续,看到了这句

/*最大化后body会自动添加maximize属性,如果是圆角界面可以在这里移除圆角*/
body[maximize]{ 
	border-radius:0;
}

body[maximize] #header{
	border-radius:0;
}

如果是圆角则在这可以移除圆角???

那么这个只是针对htmlayout的css样式吗? 还是说针对mianform窗体圆角样式也可以呢?

于是, 代码里添加一个圆角样式,试试

//为当前窗口添加圆角样式
import win.region.round;
win.region.round(winform,,,50,50);

设置了圆角为50 50, 然后去css里注释掉maximize属性.

blob.png

最大化后,圆角还是消失了. 

结论: css样式里面取消圆角对winfrom的圆角样式不起作用,

那么,css的圆角样式是怎么做的呢?会有什么效果?

还是原先的代码,我们在header中添加

#header{
    height:32px;
    background:rgb(52,152,220);
    cursor:default;
    behavior:windowCommand;
    overflow:hidden;/*清除浮动*/
    border-radius:10%;
}

加入了border-radius:10% 的圆角

这个介绍可以在

blob.png

中找到,于是我们注释掉maxmize那个最大化消除圆角的属性,再次运行,并最大化,发现

果然圆角还在....

blob.png

2017-11-11   #4

那么再次思考, 如果我们不注释掉最大化移除圆角属性,那么当我们最大化的时候调用移除属性,使窗口没有了圆角, 如果我们点击窗体的还原大小按钮, 还原回来的窗口有没有圆角呢?

经过测试, 圆角属性再次恢复.

这样我们无需多管这个怎么恢复的了..


2017-11-11   #5

这里先了解下htmlayout的弹出菜单写法:

<!-- 标题栏弹出菜单,需要弹出节点的最好用div或button等元素,不要使用a,li等元素 -->
		<div .window-menu>u
			<menu .popup> <!-- .popup是内置的弹出菜单样式 -->
    			<li>在线帮助</li> 
    			<li>子菜单
      			<menu >
        			<li>这是子菜单1</li>
        			<li>这是子菜单2
        			<menu >
        				<li>这是子菜单1</li>
        				<li>这是子菜单2</li>
      				</menu>
        			</li>
      			</menu>
    			</li>
    			<li #exit>退出</li>
  			</menu>
		</div>

blob.png

这里只是内置的菜单,如果要好看的菜单,那要后面再去学习.

而aardio中菜单的响应已经封装好了,只要熟悉下使用就可以.

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

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


登录后方可回帖

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