htmlayout内嵌普通窗体控件

By admin at 2018-02-13 • 0人收藏 • 640人看过

HTMLayout可以非常方便的嵌入普通控件、和窗体,其他浏览器都没有这功能。看范例里有,这算是HTMLayout一大亮点,可以无限扩展功能。

实际上,HTMLayout的子页面不但可以是div,还可以是iframe,用iframe就可以嵌入另外一个网页

 看源码,指定url就可以了



IMG_2390.PNG

例如范例里的代码

<div class="panel" name="panel3"> 

这是第三个选项页,其中name属性指定选项卡名字   

</div>  

你可以改为

<iframe class="panel" name="panel3" src="/layout/a.aardio"/> 

4 个回复 | 最后更新于 2018-11-20
2018-03-04   #1

blob.png

换成自定义控件,loadForm就可以了

blob.png

谢谢,daheian

2018-09-09   #2

上面两楼只是总结于aar群聊。没有经过实际使用。

今天偶然需要这样用一下,从新整理了并自己码了下代码,熟悉了很多。

import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程15";right=959;bottom=591)
mainForm.add()
/*}}*/

import web.layout;
var wbLayout = web.layout( mainForm );

//自定义一个准备执行的behavior行为,如mycustomE
namespace web.layout.behavior.mycustomE { 
    //节点被创建的时候执行以下操作 
	onElementControlCreated = function (ltTarget,ltOwner,reason,behaviorParams) {
		//取得这个节点是谁的控件(示例取得的是mainform.custom)
		var ltCtrl = ltOwner.getCtrl(); 
		//动态取得css里面自定义的一个名字叫formPath的静态变量值
		var homepage = ltOwner.getCustomAttribute("formPath");
		if( homepage ) 
		//下面的就相当于mainform.custom.loadform()了
		ltCtrl.loadForm(homepage);
	} 
}

//要想内嵌winfrom里面的控件,就必须写cls属性,这个属性就是内嵌控件的类名,
//还要定义html这个节点的名字,比如下面的mycustom,以便后面css属性里指定
wbLayout.html =/*** 
<body>
<widget cls="custom" #mycustom style="width:100%%;height:100%%;"></widget> 
</body>
***/

//css里面指定节点和需要的执行行为behavior,如上面定义的mycustomE
wbLayout.css = /**
body{ 
	margin:20px;
	height:100%%;
	font:system;
} 
#mycustom {
	behavior:"mycustomE"; 
	-formPath:'/res/aaa.aardio';
}
**/

mainForm.show();
return win.loopMessage();

以上,我准备在htmlayout界面上展示一个custom控件,这个控件加载的是aaa.aardio这个窗体。

所以,

1, 首先先自定义了一个mycustomE的行为behavior。这个里面当节点被创建的时候,执行相应的动作,这个动作即loadform一个窗体

2, 创建了一个html界面,界面里有一个widget元素(注意,最好是用这个元素创建),里面定义了css的类名和样式。

3, 编写css样式,并指定css类名和它要执行的行为behavior


这样当界面打开的时候,就会加载一个custom在htmlayout界面上了。

image.png


2018-09-09   #3

本来是准备利用htmlayout的手风琴效果来做一个闭合的界面。

但是修改了几次感觉总不是自己想要的效果。

代码先放到下面,以后在看

把预览示例里面的复制过来改了一点点

import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程15";right=959;bottom=591)
mainForm.add()
/*}}*/

import web.layout;
import web.layout.behavior.tabs;
import web.layout.behavior.shellIcon;
import web.layout.behavior.lightBoxDialog;
import web.layout.behavior.collapsibleByIcon;
import web.layout.behavior.grid;
import web.layout.behavior.sortableGrid;
import web.layout.behavior.scroller;
import web.layout.behavior.dropdown; 
import web.layout.behavior.popup;
import web.layout.behavior.expandableList;
import web.layout.behavior.collapsibleList;
import web.layout.behavior.sizer;
import web.layout.behavior.gripper;
import web.layout.behavior.splitter;
var wbLayout = web.layout( mainForm );

//自定义一个准备执行的behavior行为,如mycustomE
namespace web.layout.behavior.mycustomE { 
    //节点被创建的时候执行以下操作 
	onElementControlCreated = function (ltTarget,ltOwner,reason,behaviorParams) {
		//取得这个节点是谁的控件(示例取得的是mainform.custom)
		var ltCtrl = ltOwner.getCtrl(); 
		//动态取得css里面自定义的一个名字叫formPath的静态变量值
		var homepage = ltOwner.getCustomAttribute("formPath");
		if( homepage ) 
		//下面的就相当于mainform.custom.loadform()了
		ltCtrl.loadForm(homepage);
	} 
}

//要想内嵌winfrom里面的控件,就必须写cls属性,这个属性就是内嵌控件的类名,
//还要定义html这个节点的名字,比如下面的mycustom,以便后面css属性里指定
wbLayout.html =/*** 
<body>
		<ul id="thebar" name="sliding bar">
			<li default>
			    <div class="caption"><img src="images/4.gif"></div>
			    <div class="content">
			    <widget cls="custom" #mycustom style="width:100%%;height:100%%;"></widget>
				</div>
			</li>
			<li>
			    <div class="caption"><img src="images/2.gif"></div>
			    <div class="content">
			    <widget cls="custom" #mycustom2 style="width:100%%;height:100%%;"></widget>
         		</div>
			</li>
		</ul>
	</body>

***/

//css里面指定节点和需要的执行行为behavior,如上面定义的mycustomE
wbLayout.css = /**
body { 
	  width:100%; height:100%;  
	}
  #mycustom {
    behavior:"mycustomE"; 
    -formPath:'/res/aaa.aardio';
}
  #mycustom2 {
    behavior:"mycustomE"; 
    -formPath:'/res/bbb.aardio';
}
  @const ANIMATION_STEP_MS: 8;

	#thebar 
	{
    style-set: "h-animate-when-current"; // see below
	  width:100%%;	  
	  height:max-intrinsic;
    min-height:100%;
	  margin:0;
    padding:0;    
	  border:0px solid #bdbccc;
	  background-color: #fff;
	  behavior:expandable-list;
	  flow:horizontal;
	  overflow-y:hidden;
	  overflow-x:hidden;
	}
	
	#thebar > li 
	{
	   flow:horizontal;
     display:block;
	   width:min-intrinsic; /* natural width */
     background-color: #F4F3F9;
     height:100%;
	} 

  #thebar > li > .caption
	{
	  width:100px;
	  height:100%%;
	  vertical-align:middle;
	  background-image:url(images/outlook/tab.png);
	  background-repeat:expand stretch-left stretch-right stretch-middle;
	  background-position:3px 3px 3px 3px;
	} 

  #thebar > li:collapsed > .caption:hover
	{
	  transition:blend;
    background-image:url(images/outlook/tab-hover.png);
	} 
  
  #thebar > li:collapsed > .caption:active
	{
    background-image:url(theme:button-pressed);
	} 
  
  #thebar > li:expanded > .caption
	{
	  background-image:none; 
	} 
	
	#thebar > li > .content 
	{
    vertical-align: middle;
    white-space: nowrap;
	  height:100%%; 
	}
	#thebar > li:expanded > .content 
	{
    overflow:hidden;
	  width:100%%; 
	}
  
	@set h-animate-when-current
  {	
		:root > li
		{
			width:min-intrinsic;
		}
		
		:root > li:current
		{
			width:100%%; /* whole idea - it takes all available space */ 	  
		}
		
		:root > li > .content /* normally li > .content inside is collapsed */
		{
		  visibility:collapse;
		  overflow-x:hidden;
		}
   
    :root > li:animating > .content, 
		:root > li:expanded > .content 
		{
		  visibility:visible;
		  width:100%%; 
		}

		:root > li:collapsed
		{
		  assigned!: self.start-animation();
		  animation-start!: self::width = 100%% ;
		  animation-end!:   self::width = null, // reset values used in animation
		                    self.child(2)::visibility = null, 
							          self.child(2)::opacity = null; 
		  animation-step!:  
            self::width > 0%% ? 
            (
               delta = limit( self::width * 0.12, 1%%, 8%% ),
               self::width = self::width - delta, 
               self::width < 15%% ? self.child(2)::visibility = "collapse" #
               self::width < 50%% ? self.child(2)::opacity = float(self::width) / 50.0, 
               return @ANIMATION_STEP_MS
            );
		}

		:root > li:expanded
		{
		  assigned!: self.start-animation();
          animation-start!: self::width = 1%% ;
          animation-end!:   self::width = 100%% ;
          animation-step!:  
            self::width < 100%% ? 
            (
              delta = limit( (100%% - self::width) * 0.12, 1%%, 8%% ),
              self::width = self::width + delta, 
              return @ANIMATION_STEP_MS
            );
		}
   
	}

**/

mainForm.show();
return win.loopMessage();

GIF.gif

2018-11-20   #4

<iframe class="panel" name="panel3" src="/layout/a.aardio"/> 

这个可以用,我使用这种方法,不过遇到麻烦,就想iframe 里面用 web.layout; 用不到。 目的是获取各种元素



登录后方可回帖

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