基本特性
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设置为禁用状态
Attachments:
SubViewHolderSubViewPreview.PNG (image/png)
IFramePreview.PNG (image/png)