概述

dorado5的BRich Client采用了懒装载的方式来处理高复杂程度的界面.对于那些包含TabSet,SubWindow,GroupBox等控件的界面,dorado可以在这些容器真正被激活的时候才执行内部控件的初试化操作.这样, 复杂界面的初次载入速度就将大大的得到提高。本示例展示的页面包含：6个Dataset，每个Dataset包含100个Field和10条记录。3个AutoForm，每个AutoForm内包含100个编辑框,其中每10个编辑框分为一组。 3个DataTable，每个DataTable包含20个Column。

注意: 尽管如此, 考虑到浏览器的承受能力, 我们仍不建议您将单个界面设计到如此复杂的程度!

本示例链接如下：

http://61.151.239.187/dorado5/performance/test-performance1.jsp

准备工作

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

开发步骤

添加ViewModel和DatasetListener

步骤1：添加一Common ViewModel，文件名为TestPerformance1。
步骤2：在该ViemModel的onLoad事件中添加如下代码：

setTimeout("Debugger.show(\"log\", true);", 200);

步骤3：添加一个Simple Class，文件名为TestPerformance_dataset1Listener。该类代码如下：

import org.apache.commons.lang.RandomStringUtils;
import com.bstek.dorado.data.AbstractDatasetListener;
import com.bstek.dorado.data.Dataset;
/**
 * TestPerformance_dataset1Listener
 */
public class TestPerformance1_datasetListener extends AbstractDatasetListener {
    public boolean beforeCreateFields(Dataset dataset) throws Exception {
        for (int i = 0; i < 100; i++) {
            dataset.addField("field" + i);
        }
        return true;
    }
    public void afterLoadData(Dataset dataset) throws Exception {
        for (int i = 0; i < 10; i++) {
            dataset.insertRecord();
            for (int j = 0; j < 100; j++) {
                dataset.setValue(j, RandomStringUtils.randomAlphabetic(8));
            }
        }
        dataset.moveFirst();
    }
}

添加Dataset

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

属性	值
id	dataset1
listener	TestPerformance1_datasetListener

为dataset1添加100个field，field的name为field0至field99，如下图所示：

提示：添加几个field之后，可以选中这几个节点，按Ctrl+C，然后选中Fields节点，按Ctrl+V，这种方式可以快速添加field。

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

属性	值
id	dataset2
listener	TestPerformance1_datasetListener

为dataset2添加100个field，field的name为field0至field99。
步骤3：添加一CustomDataset，属性设置如下：

属性	值
id	dataset3
listener	TestPerformance1_datasetListener

为dataset3添加100个field，field的name为field0至field99。
步骤4：添加一CustomDataset，属性设置如下：

属性	值
id	dataset4
listener	TestPerformance1_datasetListener

为dataset4添加100个field，field的name为field0至field99。
步骤5：添加一CustomDataset，属性设置如下：

属性	值
id	dataset5
listener	TestPerformance1_datasetListener

为dataset5添加100个field，field的name为field0至field99。
步骤6：添加一CustomDataset，属性设置如下：

属性	值
id	dataset6
listener	TestPerformance1_datasetListener

为dataset6添加100个field，field的name为field0至field99。

添加AutoForm

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

属性	值
id	form1
dataset	dataset1

选中form1，点击字段生成按钮，建立多个FormGroup，把100个field放到各个FormGroup中。

提示：只是为了展示dorado的性能。添加多少个FormGroup可以随您自己的需求。若希望FormGroup展开，可以设置其expanded为true。

生成的结果如下图所示：

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

属性	值
id	form2
dataset	dataset2

选中form2，点击字段生成按钮，建立多个FormGroup，把100个field放到各个FormGroup中。
步骤3：添加一AutoForm，属性设置如下：

属性	值
id	form3
dataset	dataset3

选中form3，点击字段生成按钮，建立多个FormGroup，把100个field放到各个FormGroup中。

添加DataTable

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

属性	值
dataset	dataset4
height	100%
id	table1
width	100%

选中table1，点击生成字段按钮。建议保留20个列，删除其余的列。
步骤2：添加一DataTable，属性设置如下：

属性	值
dataset	dataset5
height	100%
id	table2
width	100%

选中table2，点击生成字段按钮。建议保留20个列，删除其余的列。
步骤3：添加一DataTable，属性设置如下：

属性	值
dataset	dataset6
height	100%
id	table3
width	100%

选中table3，点击生成字段按钮。建议保留20个列，删除其余的列。

创建Jsp页面

生成Jsp页面，对进行编辑，最后结果如下：

<%@ page contentType="text/html; charset=UTF-8" %> 
<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %> 
 <html> 
 <head> 
 </head> 
 <body> 
 <d:View config="TestPerformance1"> 
 <d:Layout type="border"> 
 <d:Pane position="center"> 
 <d:TabSet id="tabset"> 
 <d:Tab name="tab1" label="Form 1" padding="8"> 
 <d:AutoForm id="form1" /> 
 </d:Tab> 
 <d:Tab name="tab2" label="Form 2" padding="8"> 
 <d:AutoForm id="form2" /> 
 </d:Tab> 
 <d:Tab name="tab3" label="Form 3" padding="8"> 
 <d:AutoForm id="form3" /> 
 </d:Tab> 
 <d:Tab name="tab4" label="Table 1" padding="8"> 
 <d:DataTable id="table1" /> 
 </d:Tab> 
 <d:Tab name="tab5" label="Table 2" padding="8"> 
 <d:DataTable id="table2" /> 
 </d:Tab> 
 <d:Tab name="tab6" label="Table 3" padding="8"> 
 <d:DataTable id="table3" /> 
 </d:Tab> 
 </d:TabSet> 
 </d:Pane> 
 </d:Layout> 
 </d:View> 
 </body> 
 </html>

查看运行效果

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

知识点

本示例旨在展示dorado的高性能，未涉及新的知识点。不过若需要制作虚假数据，RandomStringUtils.randomAlphabetic方法是个不错的选择。

Dorado 5 : 13.1.复杂界面 (T22)

概述