基本特性

SubViewHolder在Dorado中用于引用一个Dorado的View，使用效果上有些类似HTML中的<IFrame>控件。但是SubViewHolder只可以引用View，不可以引用普通的JSP, HTML。

我们可以通过其提供的subView属性定义所要引入的第三方页面的URL:

运行效果(红线中的内容就是通过SubViewHolder所指向的第三方页面中的内容)：

SubViewHolder自身是Control控件继承下来的，因此具有Control的基本特性和使用方法，详情请参考：Control(DCUG)

其它特性

从基本特性上看SubViewHolder与Dorado中提供的另一个控件IFrame似乎没多大差别。不过这儿要强调的是它们之间的不同点。

如下的一个用IFrame控件的使用界面：

粗粗看来这个页面效果与上面采用SubViewHolder效果是一致的，但是本质上有相当大的差别，我们比较HTTP的Response信息的差别，下面是采用IFrame控件的输出：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">
<script language="javascript" type="text/javascript" charset="UTF-8" src="/sample-center/dorado/client/boot.dpkg?cacheBuster=1350546336257"></script>
<script language="javascript" type="text/javascript">
$import("widget");
</script>
<script language="javascript" type="text/javascript">
dorado.onInit(function(){
AUTO_APPEND_TO_TOPVIEW=false;
var view=new dorado.widget.View({
	"id":"viewMain",
	"name":"com.bstek.dorado.sample.other.IFrame"
});
function f(view){view.set("children",[
	{
		"$type":"Label",
		"height":"50",
		"style":"font-size:32",
		"text":"\u4E3B\u9875\u9762\u4E2D\u6DFB\u52A0IFrame"
	},
	{
		"$type":"IFrame",
		"style":"border:1px solid gray",
		"path":"com.bstek.dorado.sample.Main.d"
	}
]);}
f(view);
AUTO_APPEND_TO_TOPVIEW=true;
var doradoView = document.getElementById("doradoView");
if (doradoView) view.replace(doradoView);
});
$import("widget,common,base-widget,debugger");
</script>
</head>
<body scroll="no" style="margin:0px; overflow:hidden">
	<label id="doradoView" style="display:none" />
</body>
</html>

上面可以看到其中并未包含com.bstek.dorado.sample.Main.d页面中的任何信息，而下面则是采用SubViewHolder控件的responseText信息：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">
<script language="javascript" type="text/javascript" charset="UTF-8" src="/sample-center/dorado/client/boot.dpkg?cacheBuster=1350546336257"></script>
<script language="javascript" type="text/javascript">
$import("widget");
</script>
<script language="javascript" type="text/javascript">
dorado.onInit(function(){
AUTO_APPEND_TO_TOPVIEW=false;
var view=new dorado.widget.View({
	"id":"viewMain",
	"name":"com.bstek.dorado.sample.other.SubViewHolder"
});
function f(view){view.set("children",[
	{
		"$type":"Label",
		"height":"50",
		"style":"font-size:32",
		"text":"\u4E3B\u9875\u9762\u4E2D\u6DFB\u52A0SubViewHolder"
	},
	{
		"$type":"SubViewHolder",
		"style":"border:1px solid gray",
		"subView":(function(){
var view=new dorado.widget.View({
			"layout":{
				"$type":"Anchor"
			},
			"name":"com.bstek.dorado.sample.Main"
		});
function f(view){view.set("children",[
			{
				"$type":"HtmlContainer",
				"children":[
					{
						"$type":"Label",
						"style":"color:#345666;font-style:italic;font-size:13pt;white-space:noWrap;font-weight:bold",
						"text":"Dorado 7 Sample Center",
						"layoutConstraint":{
							"left":"15",
...

上面的response信息中可以看到已经包含了com.bstek.dorado.sample.Main.d页面中的信息。

通过上面的对比应该能看出如果采用SubViewHolder，那么SubViewHolder中的控件与主页面的控件都属于同一个浏览器中的window对象，而采用IFrame则属于不同的window对象，那么访问子页面的控件方式就有很大差别，如IFrame中我们访问子页面的控件需要先获得子页面对应的window对象，参考范例：

var window = iframe.getIFrameWindow();
var button = window.$id("buttonSave").objects[0];//获取子页面中id为buttonSave的按钮
button.set("disabled", true);//将buttonSave设置为禁用状态

但是同样的子页面如果采用SubViewHolder引入，则代码编写的方式就应该如下：

var subView = iframe.get("subView");
var button = subView.id("buttonSave");//获取子页面中id为buttonSave的按钮
button.set("disabled", true);//将buttonSave设置为禁用状态

Dorado 9 : SubViewHolder(DCUG)

基本特性

其它特性

Attachments: