概述

Dorado 5提供了分页标签来进行页面的布局，本示例即用来演示此功能。本示例链接如下：

http://61.151.239.187/dorado5/skills/layout/tabset.jsp

准备工作

新建一工程tabset，无需配置数据源和数据库。

开发步骤

添加DataSet和DataTable

步骤1：添加一Common ViewModel，文件名为TabSet。
步骤2：添加一CustomDataset，id设置为datasetTab，并且添加两个字段，字段设置如下图所示：

Name	Label
name	名字
label	标签页

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

属性	值
id	tableTab
dataset	datasetTab
readOnly	true
showHScrollBar	false
width	150px

步骤4：选中DataTable，点击字段生成按钮，然后删除掉tableTab 的name字段。

添加TabSet

步骤1：添加一TabSet，id设置为tabset1。
tabset1添加5个Tab，属性设置如下图所示：

Name	Label
tab1	动态标签页
tab2	隐藏按钮的标签页
tab3	标签3
tab4	标签4
tab5	标签5

tabset1添加4个FrameTab，属性设置如下：

Name	Label	Path
tab6	Google	http://www.google.com
tab7	Baidu	http://www.baidu.com
tab8	锐道网站	http://www.bstek.com
tab9	dorado控制台	/dorado/console.d

在View的function出定义如下代码：

var dirty=false; 
var num=1; 
function initDatasetTab(){ 
	datasetTab.disableControls(); 
	var count=tabset3.getTabCount(); 
	for(var i=0;i<count;i++){ 
		var tab=tabset3.getTab; 
		datasetTab.insertRecord(); 
		datasetTab.setValue("name",tab.getName()); 
		datasetTab.setValue("label",tab.getLabel()); 
	} 
	datasetTab.enableControls(); 
	tableTab.refresh(); 
	dirty=true; 
}

在tabset1的afterTabChange的事件中添加如下代码：

if(tab.getName()=="tab2"&&!dirty){ 
	 initDatasetTab(); 
}

步骤2：添加一TabSet，id设置为tabset2，tabPlacement设置为bottom。
步骤3：添加一TabSet，id设置为tabset3。
为tabset3添加5个Tab，属性设置如下图所示：

Name	Label	Visible
tab1	标签1	false
tab2	标签2	false
tab3	标签3	false
tab4	标签4	false
tab5	标签5	false

为datasetTab的afterScroll事件写入如下代码：

tabset3.setCurrentTab(dataset.getString("name"));

添加Button

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

属性	值
Id	buttonAddTab
Value	添加标签

为buttonAddTab的onClick事件写入如下代码：

var tab=new Tab("tab"+num,"tab"+num); 
num++; 
tabset2.addTab(tab); 
tabset2.setCurrentTab(tab);

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

属性	值
id	buttonRemoveCurrent
value	移除当前标签

为buttonRemoveCurrent的onClick事件写入如下代码：

var tab=tabset2.getCurrentTab(); 
if(tab) 
tabset2.removeTab(tab);

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

属性	值
id	buttonDisableCurrent
value	禁用当前标签

为buttonDisableCurrent的onClick事件写入如下代码：

var tab=tabset2.getCurrentTab(); 
if(tab) 
tab.setDisabled(true);

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

属性	值
Id	buttonRemoveAll
value	移除所有标签

为buttonRemoveAll的onClick事件写入如下代码：

tabset2.removeAllTabs();

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

属性	值
id	buttonHideTabs
down	true
allowPushDown	true
value	隐藏标签按钮

为buttonHideTabs的onClick事件写入如下代码：

var visible = !button.isDown(); 
var count = tabset3.getTabCount(); 
for (var i = count - 1; i >= 0; i--) { 
	 var tab = tabset3.getTab; 
	 tab.setVisible(visible); 
}

创建Jsp页面

生成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="TabSet"> 
 <d:TabSet id="tabset1"> 
 <d:Tab name="tab1"> 
 <d:Layout type="vflow" height="100%"> 
 <d:Pane height="1"> 
 <d:Button id="buttonAddTab" />  
 <d:Button id="buttonDisableCurrent" />  
 <d:Button id="buttonRemoveCurrent" />  
 <d:Button id="buttonRemoveAll" /> 
 </d:Pane> 
 <d:Pane> 
 <d:TabSet id="tabset2" /> 
 </d:Pane> 
 </d:Layout> 
 </d:Tab> 
 <d:Tab name="tab2"> 
 <d:Layout type="vflow" height="100%"> 
 <d:Pane height="1"> 
 <d:Button id="buttonHideTabs" /> 
 </d:Pane> 
 <d:Pane> 
 <d:Layout type="Hflow"> 
 <d:Pane> 
 <d:TabSet id="tabset3"> 
 <d:Tab name="tab1"> 
 <p style="margin: 20"> 
 标签1中的文字 
 </p> 
 </d:Tab> 
 <d:Tab name="tab2"> 
 <p style="margin: 20"> 
 标签2中的文字 
 </p> 
 </d:Tab> 
 <d:Tab name="tab3"> 
 <p style="margin: 20"> 
 标签3中的文字 
 </p> 
 </d:Tab> 
 <d:Tab name="tab4"> 
 <p style="margin: 20"> 
 标签4中的文字 
 </p> 
 </d:Tab> 
 <d:Tab name="tab5"> 
 <p style="margin: 20"> 
 标签5中的文字 
 </p> 
 </d:Tab> 
 </d:TabSet> 
 </d:Pane> 
 <d:Pane valign="top"> 
 <d:DataTable id="tableTab" /> 
 </d:Pane> 
 </d:Layout> 
 </d:Pane> 
 </d:Layout> 
 </d:Tab> 
 <d:Tab name="tab3"> 
 <div style="width: 100%; height: 100%; background-color: #FFDDFF"></div> 
 </d:Tab> 
 <d:Tab name="tab4"> 
 <div style="width: 100%; height: 100%; background-color: #FFFFB3"></div> 
 </d:Tab> 
 <d:Tab name="tab5"> 
 <div style="width: 100%; height: 100%; background-color: #CCFFFF"></div> 
 </d:Tab> 
 </d:TabSet> 
 </d:View> 
 </body> 
 </html>

查看运行效果

启动服务器后，浏览效果如下：

页面上已经有了一定的提示，可以容易的进行操作。

知识点

本节的知识点主要是TabSet以及CustomDataset。关于TabSet可以参考《dorado 5 组件详解 1.1》的第二部分C部分的第6节。关于CustomDataset可以参考《dorado 5用户指南 1.1》的5.6节。

Dorado 5 : 9.3.多页标签 (T22)

概述