htmlayout内嵌普通窗体控件

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

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; 用不到。 目的是获取各种元素



登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...