概述

本例演示了如何实现动态的数据绑定、跨越浏览器框架的数据绑定。本示例链接如下：

http://61.151.239.187/dorado5/skills/other/dyna-binding/dyna-binding.jsp

准备工作

新建一工程dynabinding，并且配置好数据库，具体步骤参考3.1.2节。

开发步骤

添加DynaBinding

步骤1：添加一Common ViewModel，文件名为DynaBinding。
为DynaBinding的function中定义如下函数：

function establishBinding(dataset) { 
	datapilot.setDataset(dataset); 
}

步骤2：添加一DataPolit，id设置为datapilot。
步骤3：添加一TabSet，添加3个FrameTab，FrameTab的设置如下：

Name	Label	Path
tab1	员工信息维护	dyna-binding-frame1.jsp
tab2	部门信息维护	dyna-binding-frame2.jsp
tab3	分公司信息维护	dyna-binding-frame3.jsp

为TabSet的afterTabChange事件添加如下代码：

var frame = tab.getFrame(); 
if (typeof(frame.contentWindow.registerMe) == "function") { 
	frame.contentWindow.registerMe(); 
}

添加DynaBindingFrame1

步骤1：添加一View，名为DynaBindingFrame1
步骤2：添加一AutoSqlDataset，选择Employee表，选择所有列，属性设置如下：

属性	值
id	datasetEmployee
originTable	EMPLOYEE

步骤3：添加一DataTable，属性设置如下：

属性	值
id	tableEmployee
dataset	datasetEmployee
width	100%
height	100%

步骤4：添加一RequestCommand，属性设置如下：

属性	值
id	commandOpenDialog
path	dyna-binding-frame1-dialog.jsp

设置commandOpenDialog的Frame属性如下：

属性	值
target	_modeless_dialog
resizable	true
width	400
height	400

步骤5：添加一Button，属性设置如下：

属性	值
id	buttonOpenDialog
value	打开绑定此数据集的新框架

为Button的onClick事件添加代码如下：

commandOpenDialog.execute(window);

步骤6：为DynaBindingFrame1的function添加如下代码：

function registerMe(){ 
	 window.parent.establishBinding(datasetEmployee); 
}

为DynaBindingFrame1的onDatasetsPrepared事件添加如下代码：

registerMe();

添加DynaBindingFrame1Dialog

步骤1：添加一View，名为DynaBindingFrame1Dialog
步骤2：添加一DataPolit，属性设置如下：

属性	值
id	datapilotEmployee
dataset	datasetEmployee

步骤3：添加一AutoForm，属性设置如下：

属性	值
id	formEmployee
dataset	datasetEmployee

步骤4：为DynaBindingFrame1Dialog的function中添加如下代码：

var datasetEmployee = window.dialogArguments.datasetEmployee; 
registerDataset(datasetEmployee);

添加DynaBindingFrame2

步骤1：添加一View，名为DynaBindingFrame2。
步骤2：添加一AutoSqlDataset，选择Dept表，选择所有字段，属性设置如下：

属性	值
id	datasetDept
originTable	DEPT

步骤3：添加一DataTable，属性设置如下：

属性	值
id	tableDept
dataset	datasetDept
showHScrollBar	false
height	100%
width	100%

步骤4：为DynaBindingFrame2的function添加如下代码：

function registerMe(){ 
	window.parent.establishBinding(datasetDept); 
}

为DynaBindingFrame2的onDatasetsPrepared事件添加如下代码：

registerMe();

添加DynaBindingFrame3

步骤1：添加一View，名为DynaBindingFrame3
步骤2：添加一AutoSqlDataset，选择Branch表，选择所有字段，属性设置如下：

属性	值
id	datasetBranch
originTable	BRANCH

步骤3：添加一DataTable，属性设置如下：

属性	值
id	tableBranch
dataset	datasetBranch
width	100%
height	100%
showHScrollBar	false

步骤4：为DynaBindingFrame3的function添加如下代码：

function registerMe(){ 
	window.parent.establishBinding(datasetBranch); 
}

为DynaBindingFrame3的onDatasetsPrepared事件添加如下代码：

registerMe();

创建Jsp页面

新建了5个View，则会创建五个页面，下面分别是五个页面的内容：
dyna-binding.jsp：

<%@ page contentType="text/html; charset=UTF-8" %> 
<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %> 
 <html> 
 <head> 
 <title></title> 
 </head> 
 <body> 
 <d:View config="DynaBinding"> 
 <d:DataPilot id="datapilot" /> 
 <d:TabSet id="tabset" /> 
 </d:View> 
 </body> 
 </html>

dyna-binding-frame1.jsp：

<%@ page contentType="text/html; charset=UTF-8" %> 
<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %> 
 <html> 
 <head> 
 <title></title> 
 </head> 
 <body> 
 <d:View config="DynaBindingFrame1"> 
 <d:DataTable id="tableEmployee" /> 
 <d:Button id="buttonOpenDialog" /> 
 </d:View> 
 </body> 
 </html>

dyna-binding-frame1-dialog.jsp

<%@ page contentType="text/html; charset=UTF-8" %> 
<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %> 
 <html> 
 <head> 
 <title></title> 
 </head> 
 <body> 
 <d:View config="DynaBindingFrame1Dialog"> 
 <d:DataPilot id="datapilotEmployee" /> 
 <d:AutoForm id="formEmployee" /> 
 </d:View> 
 </body> 
 </html>

dyna-binding-frame2.jsp：

<%@ page contentType="text/html; charset=UTF-8" %> 
<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %> 
 <html> 
 <head> 
 <title></title> 
 </head> 
 <body> 
 <d:View config="DynaBindingFrame2"> 
 <d:DataTable id="tableDept" /> 
 </d:View> 
 </body> 
 </html>

dyna-binding-frame3.jsp：

<%@ page contentType="text/html; charset=UTF-8" %> 
<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %> 
 <html> 
 <head> 
 <title></title> 
 </head> 
 <body> 
 <d:View config="DynaBindingFrame3"> 
 <d:DataTable id="tableBranch" /> 
 </d:View> 
 </body> 
 </html>

查看运行效果

启动服务器后，浏览dyna-binding.jsp，效果如下：

切换不同的标签页，可以使用同一个PagePolit进行数据控制。

知识点

本示例是在客户端控制Dorado中组件的灵活应用，无新知识点。

Dorado 5 : 10.6.动态及跨框架的数据绑定 (T22)

概述

准备工作

开发步骤

添加DynaBinding

添加DynaBindingFrame1

添加DynaBindingFrame1Dialog

添加DynaBindingFrame2

添加DynaBindingFrame3

创建Jsp页面

查看运行效果

知识点

Attachments: