htmlayout内嵌普通窗体控件
By
admin
at 2018-02-13 • 0人收藏 • 2350人看过
HTMLayout可以非常方便的嵌入普通控件、和窗体，其他浏览器都没有这功能。看范例里有，这算是HTMLayout一大亮点，可以无限扩展功能。
实际上，HTMLayout的子页面不但可以是div，还可以是iframe，用iframe就可以嵌入另外一个网页
看源码，指定url就可以了
例如范例里的代码
<div class="panel" name="panel3">
这是第三个选项页,其中name属性指定选项卡名字
</div>
你可以改为
<iframe class="panel" name="panel3" src="/layout/a.aardio"/>
4 个回复 | 最后更新于 2018-11-20
上面两楼只是总结于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界面上了。
本来是准备利用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();
登录后方可回帖
换成自定义控件，loadForm就可以了
谢谢,daheian