15.使用命令控件与后台交互资料库

DORADO展现中间件深入浅出（下）BSTEK2009年5月

使用命令控件与后台交互Dataset数据集对象在浏览器端可以进行各种操作。如，对数据的增删改，都可以在浏览器中批量操作。不过我们刷新页面之后就会发现，所有的操作都会恢复，之前的所做步骤全部失效。原来，dorado在客户端所有的对数据的操作都是缓存方式存在，除非我们把它提交到后台数据库中进行持久化。每次刷新都是从后台数据库中重新读取表中的数据加载至Dataset数据集对象，而在浏览器中修改的临时处理全部被丢弃而重新加载了。从dorado的原理图中我们可以看到所有的展现都是从后台往前台单向加载的，而所有的数据都是双向交互，可以加载并提交的。本章主要通过一个综合例子讲解如何通过dorado中的命令控件与后台进行交互。其中会涉及到页面跳转等操作。AJAX远程访问后台准备工作在sample项目的src目录下新建ViewModel，命名commandRegist。新建FormDataset命名datasetRegist，在datasetRegist下新建3个Field对象并设置其label属性。namelabeldataTypedefaultValueuserName登陆用户stringpassword登录密码stringcmntstring请输入登录用户名，如果没有登录用户名请先注册。表15-01图15-01 在【Controls】节点下新建AutoForm控件，绑定datasetRegist。图15-02删除formRegist中元素类型为TextEditor的cmnt，新建DataLabel控件命名cmnt。步骤：【formRegist】—>【FormGroup】—>【Insert】—>【LabelElement】。图15-03 设置新建的cmnt绑定datasetRegist，然后设置其他属性值。namevalue50%2注册信息bottomfalse表15-02图15-04新建RPCCommand控件在【Controls】下新建RPCCommand命令控件。步骤：【Controls】—>【Insert】—>【Commands】—>【RPCCommand】。图15-05 设置RPCCommand的id为cmdRegist。图15-06 点击cmdRegist中method属性的超链接。图15-07由于RPCCommand是调用ViewModel的实现类中的方法进行后台调用的处理，点击method属性时的提示则是因为没有找到实现类。因此我们需要新建commandRegist的实现类。步骤：【veiw】—>【Openimplementation】。图15-08 通常，dorado会自动生成一个实现类名CommandRegistViewModel。一般情况下，我们只需要使用默认类名就可以了。图15-09新建实现类CommandRegistViewModel.java之后，我们就可以设置cmdRegist的method属性值了。在commandRegist中点击cmdRegist的method属性的超链接。在【Addcommandmethod】窗口输入方法名regist。图15-10点击【OK】完成配置之后，regist命名的方法会自动在实现类中被添加。publicvoidregist(ParameterSetinParams,ParameterSetoutParams) throwsException{ }图15-11前台验证触发事件在执行后台调用之前，通常数据需要首先在客户端被验证。因此我们首先在客户端编写JavaScript脚本代码进行客户端验证。本例采用静默后台验证的方式，因此最恰当的做法是在datasetRegist的afterChange()事件中编写代码。实现当数据输入完成后调用处理代码。图15-12 双击afterChange()事件，进入事件编辑器编写JavaScript代码。switch(field.getName()){case"userName":if(dataset.getCurrent()){ varusername=record.getValue("userName"); if(username!=""&&username!=null){ cmdRegist.parameters().setValue("userName",username); cmdRegist.execute(); } }break;}图15-13编写后台验证代码 客户端验证编码完成之后，我们接下来需要完成执行了cmdRegist.execute()方法之后调用的后台实现类中的regist方法执行部分的Java代码。publicvoidregist(ParameterSetinParams,ParameterSetoutParams) throwsException{ StringuserName=inParams.getString("userName"); Stringmessage=null; if(StringHelper.isNotEmpty(userName)){ if(userName.equals("BSTEK")){ message="该用户名存在，请输入密码。"; }else{ message="该用户名不存在，请注册用户。"; }lue("message",message); }}图15-14前台接受验证后信息 完成后台编码之后，我们还需要在客户端接收服务器端处理完成之后的反馈信息并进行提示。提示信息应该是在执行后台验证结束之后，因此这部分实现我们在cmdRegist执行完成之后会触发的OnSuccess()事件中完成。 进入在commandRegist中cmdRegist控件的OnSuccess()事件编辑器。图15-15 双击打开OnSuccess()事件编辑器，编写处理成功之后需要执行的JavaScript脚本代码。varmessage=command.outParameters().getValue("message");datasetRegist.setValue("cmnt",message);datasetRegist.postRecord();图15-16生成页面测试功能打开commandRegist，调整formRegist中的cmnt控件的顺序，将cmnt拖动至userName和password之间。图15-17保存全部修改，重新编译sample项目。新建commandRegist相关的JSP页面，通过【Browse】查看页面效果。图15-18 分别输入“BSTEK”、“dorado”，查看执行结果：（登陆用户为BSTEK）图15-19（登陆用户为dorado）图15-20 本例中，在服务器端的验证处理中，我们假设已经存在“BSTEK”用户，因此该用户登录信息提示已经存在，而“dorado”用户提示未被注册。Parameters和outParameters在RPCCommand命令控件中，不论是客户端控件还是在实现类中调用的远程处理方法参数，都有Parameters和outParameters两个对象。Parameters参数集对象主要的作用是客户端发起AJAX机制的请求时，客户端设置的parameter参数值对象会被传递至服务器端接受并处理。由于AJAX的处理机制，处理完成后需要返回一些信息至客户端，那么我们就可以把在服务器端处理结束后的一些自定义信息封装在outParameters参数集中一并返回，实现服务器端数据返回客户端，并在RPCCommand命令控件的onSuccess事件或onFailure事件中处理。Parameters和outParameters原理说明图在ViewModel中的RPCCommand发起客户端请求，调用由method属性中指定方法名的对应在该ViewModel实现类中编写的同名处理方法（图①）。请求提交至服务器端时，客户端设置的RPCCommand命令控件的parameter参数值对象也同时被提交至服务器端处理处理（图②）。服务器端处理完成后，可以将一些自定义的信息封装至实现类中的远程调用方法中提供的outParameters参数集对象中，并被一起返回至客户端的RPCCommand命令控件的outParameters对象中，然后可以取出封装的值进行客户端的处理（图③）。客户端使用Parameters时，可以写成RPCCommand.parameters().setValue(key,value)的方式，在实现类的远程方法中以函数的参数方式存在，通过直接使用parameter.getValue(key)即可取出。服务器端封装自定义信息时可以写成outParameters.setValue(key,value)的方式，返回至客户端后，可以在onSuccess事件或onFailure事件中直接使用RPCCommand.outParameters().getValue(key)即可以取出值进行数据处理。特别地，不论哪种情况，其中的客户端设置的key和服务器端处理的key必须保持一致，反之亦然。开发步骤RPCCommand远程访问命令控件主要是通过由客户端发起的页面无刷新的AJAX机制的请求，达到调用服务器端指定的Java类（通常是Servlet，在dorado中是ViewModel的实现类）接受请求并处理的目的。开发步骤第一步：准备工作。第二步：新建RPCCommand命令控件。第三步：新建ViewModel的实现类。第四步：编写Dataset的afterChange事件代码。第五步：配置RPCCommand的method属性关联实现类中的方法实现。第六步：在RPCCommand控件的OnSuccess事件中编写代码。详细步骤图使用请求命令跳转页面准备工作仍然使用我们在学习RPCCommand命令控件时所用的到示例，打开sample项目的src下的commandRegist，在【Controls】下新建Button控件。图15-21 设置新建的Button的id属性值为btnForword，value属性值为“登陆跳转”。图15-22新建RequestCommand控件在【Controls】下新建RequestCommand请求命令控件。步骤：【Controls】—>【Insert】—>【Commands】—>【RequestCommand】。图15-23 设置新建RequestCommand控件绑定datasetRegist，并且属性id的值为cmdRequest。图15-24 设置按钮控件btnForword的command属性值为cmdRequest，绑定RequestCommand控件。图15-25 在formRegist中的【FormGroup】下新建【CustomElement】。步骤：【formRegist】—>【FromGroup】—>【Insert】—>【CustomElement】。图15-26 设置新建【element1】的controlId属性值为btnForword。图15-27 保存全部修改，刷新cmmand_regist.jsp页面查看效果。图15-28新建视图模型在sample项目的src下新建ViewModel，命名commandExecute。新建AutoSqlDataset关联表EMPLOYEE，命名datasetEmployee，设置其中的label属性。图15-29 在【Controls】下新建DataTable和DataPilot控件，二者都绑定datasetEmployee。图15-30配置接收查询匹配条件在新建的commandExecute视图模型中，配置datasetEmployee的MatchRules查询匹配条件。步骤：【datasetEmployee】—>【Insert】—>【Modify…】。图15-31完成配置后，设置【MatchRules】下EMPLOYEE_ID的escapeEnable属性值为true。图15-32 新建commandExecute的相关JSP页面command_execute.jsp。通过【Browse】查看。图15-33配置path属性在commandRegist中，配置cmdRequest控件的path属性值为command_execute.jsp。图15-34 保存修改，刷新command_regist.jsp页面。在“登陆用户”文本框中输入ANLIN后点击【登陆跳转】。图15-35 从页面展现上看，并没有特别之处，但是地址栏中的URL信息告诉我们，这个页面是被跳转过来的。://localhost:8080/sample/command_execute.jsp?userName=ANLIN&password=null&cmnt=%E8%AF%A5%E7%94%A8%E6%88%B7%E5%90%8D%E4%B8%8D%E5%AD%98%E5%9C%A8%EF%BC%8C%E8%AF%B7%E6%B3%A8%E5%86%8C%E7%94%A8%E6%88%B7%E3%80%82& 在URL中，我们可以清楚地看到其中的“username=ANLIN&”是从command_regist.jsp页面中输入的值传递过来的。parameterFields和method属性从被传递的参数值中可以了解到它们都是由于RequestCommand绑定了Dataset的缘故。并非每次我们都需要传递绑定的Dataset中所有Field的值。例如在本例中，我们只需要传递userName的值即可。设置cmdRegist的parameterFields属性值为userName。图15-36 保存修改后刷新command_regist.jsp页面，在“登陆用户”中输入ANLIN，点击【登陆跳转】查看被跳转的command_execute.jsp页面的URL信息。://localhost:8080/sample/command_execute.jsp?userName=ANLIN& 和我们预期的一样，URL信息中只含有“username=ANLIN&”。因此parameterFields属性可以设置需要传递的参数值对的数量。 很多情况下，我们传递的信息值并不需要在URL中显示。RequestCommand执行的页面跳转类似标准DHTML中的<form></form>元素中的inputtype=submit。可以选择是get或post方法提交。 设置cmdRegist的method属性值为post（默认值为get）。图15-37保存修改后刷新command_regist.jsp页面，在“登陆用户”中输入ANLIN，点击【登陆跳转】查看被跳转的command_execute.jsp页面的URL信息。接收传递的参数值，页面接收并用于datasetEmployee数据集对象的过滤查询。在datasetEmployee的Parameters节点下新建Parameter对象。步骤：【datasetEmployee】—>【Parameters】—>【Parameter】。图15-38 设置新建Parameter对象的name属性值为EMPLOYEE_ID，dataType属性值为string，value值为${Request.userName}。图15-39保存修改后刷新command_regist.jsp页面，在“登陆用户”中输入ANLIN，点击【登陆跳转】查看被跳转页面信息。图15-40开发步骤RequestCommand命令控件通过配置path属性可以实现默认的get方式请求跳转页面，可将绑定的Dataset中指定Field的值作为参数传递至被请求页面。开发步骤第一步：在已经存在的ViewModel中新建Button。第二步：新建RequestCommand并绑定Dataset。第三步：设置Button绑定RequestCommand跳转命令控件。第四步：新建接收跳转的ViewModel并设置其中Dataset的MatchRules。第五步：设置RequestCommand控件的path属性路径值用于跳转。第六步：在接收跳转的ViewModel中的Dataset中新建Parameter对象接收传递的参数。第七步：配置RequestCommand控件的parameterFields属性，然后配置接收的Dataset中Parameter的参数值与parameterFields属性进行匹配。详细步骤图处理提交的Dataset对象新建UpdateCommand控件在commandExecute的【Controls】下新建UpdateCommand。步骤：【Controls】—>【Insert】—>【Commands】—>【UpdateCommand】。图15-41 设置新建UpdateCommand控件命名为cmdUpdate。图15-42绑定数据集对象在cmdUpdate的【DatasetInfos】下新建DatasetInfo。步骤：【Controls】—>【cmdUpdate】—>【DatasetInfos】—>【Insert】—>【DatasetInfo】。图15-43 设置新建的DatasetInfo绑定datasetEmployee。图15-44绑定Button按钮新建Button控件命名btnUpdate，设置value值为“提交保存”，设置command属性值为cmdUpdate，实现绑定UpdateCommand控件。图15-45的标签代码。保存修改后，刷新页面查看效果。图15-46 由于本例中设置了Parameter对象，过滤查询仍然存在。删除commandExecute中datasetEmployee的Parameter对象，保存之后重新刷新页面。新建视图模型的实现类新建commandExecute的实现类，重写doUpdateData方法。（参考<Dataset查询开发：使用自定义SQL>章节）publicclassCommandExecuteViewModelextendsDefaultViewModel{ @Override protectedvoiddoUpdateData(ParameterSetarg0,ParameterSetarg1) throwsException{ //TODOAuto-generatedmethodstub super.doUpdateData(arg0,arg1); }}图15-47 在实现类中编写Java代码，处理提交的Dataset中的数据。publicclassCommandExecuteViewModelextendsDefaultViewModel{ @Override protectedvoiddoUpdateData(ParameterSetarg0,ParameterSetarg1) throwsException{ //TODOAuto-generatedmethodstub DatasetdatasetEmployee=this.getDataset("datasetEmployee");//获取由UpdateCommand提交的Dataset RecordIteratorri=datasetEmployee.recordIterator();//返回记录迭代器对象 ri.setVisibility(Dataset.FILTER_CHANGED);//设置迭代器的可见性为Dataset中被改变状态的记录集 while(ri.hasNext()){ Recordrecord=ri.nextRecord(); intstate=record.getState(); switch(state){ caseRecord.STATE_NEW: System.out.println("===STATE_NEW新增记录"+record.getString("EMPLOYEE_NAME")); break; caseRecord.STATE_MODIFIED: System.out.println("===STATE_MODIFIED修改记录"+record.getString("EMPLOYEE_NAME")); break; caseRecord.STATE_DELETED: System.out.println("===STATE_DELETED删除记录"+record.getString("EMPLOYEE_NAME")); break; caseRecord.STATE_NONE: System.out.println("===STATE_NONE无状态记录"+record.getString("EMPLOYEE_NAME")); break; } } super.doUpdateData(arg0,arg1); }}图15-48执行UpdateCommand命令控件在实现类中，我们预先编写了测试语句，用于在控制台中显示当提交被不同动作处理的记录对象时的日志信息。新增记录点击DataPilot控件的【添加】按钮，新增记录对象。图15-49修改记录修改第1条记录对象的值。图15-50删除记录选中第2条“员工姓名”为“白小波”记录对象，点击DataPilot控件的【删除】按钮。图15-51 点击【确定】，删除记录。图15-52 全部操作完成后，点击【提交保存】按钮，执行UpdateCommand命令控件。执行完成后查看控制台日志信息。图15-53UpdateCommand更新原理图submitScope属性在UpdateCommand命令控件下的DatasetInfo中，每个DatasetInfo绑定一个需要被提交处理的Dataset数据集对象。这意味着在一个ViewModel中，每个UpdateCommand控件可以提交多个Dataset数据集对象到服务器端处理。数据的上传需要消耗网络资源，每次提交数据至服务器端处理时，并非总是提交Dataset中的所有数据。默认情况下，客户端的记录对象中的状态值被改变的才会被提交。DatasetInfo中的submitScope属性值指定了Dataset数据集对象被提交的方式。all全部记录。该属性意味着客户端Dataset中所有的记录对象都会被提交至服务器端处理。all-visible全部可见记录。该属性意味着客户端Dataset中所有的可见记录对象（即不提交已删除的记录和被onFilterRecord事件过滤掉的记录）都会被提交至服务器端处理。all-change全部被修改的记录。该属性意味着客户端中当前Dataset中所有被改动过的记录对象（包含新增、已删除但还没有提交以及被修改过的记录）都会被提交至服务器端处理。该属性为默认属性。current当前记录。该属性意味着客户端Dataset中的当前记录对象（Dataset记录指针所在的位置，在DataTable中以高亮方式提示。）都会被提交至服务器端处理。selected被选中的记录。该属性意味着客户端Dataset中的select字段值为true的记录对象都会被提交至服务器端处理。select字段的使用在commandExecute中的datasetEmployee下新建DummyField对象。步骤：【datasetEmployee】—>【Fields】—>【Insert】—>【DummyField】。图15-55 设置新建的DummyField字段的name值为select，dataType属性值为boolean。图15-56 设置完成后，在tableEmployee中自动生成select列。步骤：【tableEmployee】—>【Autocreatecolumns】。图15-57 将生成的select列移动位置，拖动至tableEmployee的第1列显示。图15-58 然后设置cmdUpdate控件下DatasetInfo的submitScope属性值为selected。图15-59 保存全部修改，刷新页面查看select列效果。之后勾选几条记录，以备测试使用。图15-60 点击【提交保存】按钮，执行完成后查看控制台日志信息。图15-61 另外，在DatasetInfo的属性中还有专门为selected方式提交之后处理的。例如，clearSelectionOnSuccess属性值设置为true时，表示执行成功之后清除所有的勾选状态（清除√符号）；而deleteSelectionOnSuccess属性值设置为true时则表示执行成功后删除所有被勾选中的记录对象。另外，在AutoSqlDataset中新建DummyField的select字段并不会被用于更新数据的处理，亦不会被处理与POJO对象的类型转换。开发步骤UpdateCommand命令控件可以将绑定的客户端Dataset提交至服务器端处理，支持一次提交多个Dataset，并支持多种提交方式。开发步骤第一步：准备工作。第二步：新建UpdateCommand更新命令控件。第三步：设置UpdateCommand的DatasetInfo属性绑定Dataset。第四步：新建Button绑定UpdateCommand更新命令控件。详细步骤图将Dataset导出至Excel新建Export2ExcelCommand命令控件在commandExecute的【Controls】节点下新建Export2ExcelCommand控件。步骤：【Controls】—>【Insert】—>【Commands】—>【Export2ExcelCommand】。图15-62 设置新建Export2ExcelCommand控件命名cmd2Excel，绑定datasetEmployee，设置导出模板属性templateTable的值为tableEmployee。同时，设置dataMode的属性值为client-visible，设置exportMode的属性值为output。图15-63 新建Button按钮命名btnExcel，设置绑定cmd2Excel控件，设置value值为“导出到Excel”。添加btnExcel按钮至command_execute.jsp中，刷新页面查看效果。图15-64 点击【导出到Excel】按钮，查看数据导出到Excel中的效果。图15-65dataMode和exportMode在Export2ExcelCommand命令控件中有一些属性控制数据导出至Excel时的不同模式，这里主要介绍dataMode数据模式和exportMode导出模式。dataMode该属性主要设置导出的数据范围。主要属性值有server-all、server-current、client-visible、client-selected四种。server-all绑定的Dataset数据集对象中来自服务器端的全部数据。即忽略当前客户端的Dataset是否是分页数据而重新从服务器端获取全部的未分页的数据。（大数据量时慎用）server-current绑定的Dataset数据集对象中来自服务器端的当前页数据。即忽略当前客户端的Dataset中被删除或者被过滤的记录对象，重新从服务器端加载当前页记录集导出至Excel。client-visible绑定的Dataset数据集对象中客户端的所有可见记录。即排除已经被删除及被过滤的其他所有记录对象。client-selected绑定的Dataset数据集对象中客户端的所有被勾选的记录对象。即select字段的值为true的所有记录对象。exportMode该属性主要设置导出到Excel中的导出模式。主要属性值有output、download两种。output该属性值意味着导出至Excel后直接在当前浏览器中打开查看。download该属性值意味着导出至Excel后需要按照文件下载的方式下载到客户端生成后缀名为.xls的文件打开查看。开发步骤Export2ExcelCommand支持将Dataset数据集导出至Excel中展现，通过指定dataMode和exportMode属性，可以实现多种模式的导出。开发步骤第一步：准备工作。第二步：新建Export2ExcelCommand绑定Dataset并设置dataMode和exportMode属性。第三步：设置Export2ExcelCommand控件的templateTable属性为DataTable。第四步：新建Button绑定Export2ExcelCommand命令控件。详细步骤图小测试关于RPCCommand命令控件，下面说法正确的是（）【多选】RPCCommand可以在ViewModel中新建多个。RPCCommand可以提交Dataset数据集对象至服务器端处理。RPCCommand无法提交Dataset数据集对象至服务器端处理。RPCCommand可以通过method属性指定调用需要处理的方法。关于UpdateCommand命令控件，下面说法错误的是（）【单选】UpdateCommand可以提交多个Dataset数据集对象至服务器端处理。一个ViewModel中只能有一个UpdateCommand控件用于提交Dataset。UpdateCommand是通过创建多个DatasetInfo对象绑定Dataset实现一次执行多个数据集对象的提交。UpdateCommand控件可以创建多个，并通过方法分派实现不同的执行调用不同的处理方法。关于Parameters和outParameters，下面说法正确的是（）【多选】所有的Command命令控件都拥有Parameters和outParameters对象。Parameters和outParameters总是成对出现，使用时缺一不可。Parameters对象可以在客户端创建赋值并被提交至服务器端取出处理。outParameters对象可以在服务器端赋值并被返回至客户端中取出处理。关于RequestCommand请求命令，下面说法正确的是（）【多选】RequestCommand可以提交Dataset数据集对象至服务器端处理。RequestCommand主要用于请求一个新的页面。默认情况下，RequestCommand请求一个新的页面是使用get方法。默认情况下，RequestCommand请求一个新的页面是使用post方法。关于RequestCommand中的parameterFields属性，下面说法错误的是（）【单选】RequestCommand中的parameterFields属性可设可不设，并不要求。如果需要设置parameterFields时，必须同时设置RequestCommand的dataset属性。parameterFields属性可以设置多个，采用分号“;”分隔。如果设置了parameterFields和dataset属性，则执行RequestCommand命令请求一个新的页面时，同时会传递以指定parameterFields属性设置的值为参数名name，而参数值则来自dataset属性中指定的Dataset数据集中的同名列的当前记录值，传递至被请求的新页面中。submitScope属性中的取值主要有（）【多选】seletedall、currentall-change、all-serverall-change、all-visible将数据集导出至Excel中，下面说法正确的是（）【多选】只有AutoSqlDataset中的数据才能被导出至Excel中。导出至Excel中的数据对于数据集对象的类型并不要求。配置dataMode属性可以选择多种不同的数据模式导出。导出至Excel文件中的方式只能采用下载的方式单独打开一个Excel文件查看数据。小结本章主要讲解如何使用命令控件与后台进行交互。首先通过登录验证的示例讲解了如何使用RPCCommand在客户端发起AJAX请求传递参数至服务器端处理，结束后再将处理后的参数返回并弹出提示，并同时介绍了Parameters和outParameters的原理概念和使用方法。在RequestCommand的章节，通过设置绑定Dataset数据集并设置parametersFields和method属性，实现了提交跳转页面时将指定的参数值通过get或post方式传递。登录验证通过后，点击按钮触发页面跳转请求，在被跳转的页面中，接受传递的参数值并用来作为查询条件值匹配执行数据集的查询操作。在介绍UpdateCommand更新命令的章节，通过执行新增、删除、修改数据并提交处理的方式，在ViewModel的实现类中编写接受处理的测试代码，验证设置不同的scope值时的处理情况。并介绍了select字段的使用方法。 最后介绍了如何将Dataset中的数据导出至Excel中，并解释了不同的导出数据范围模式和导出模式的用法。另外，QueryCommand查询命令控件在<HelloWorld4查询>已经做了讲解说明，此处不再赘言。学会页面布局 在dorado中提供许多供页面布局用的控件，多以dorado的自定义标签方式在dorado的JSP页面中进行配置。常用的布局管理器 dorado提供Border、HFlow、VFlow三种布局管理器实现页面布局。本节中采用不同颜色的div标签区分，并在其中放置Button按钮控件，演示不同的布局展现效果。Border布局VerticalFlow布局HorizontalFlow布局混合布局 在sample项目的src下新建ViewModel命名layoutControl。新建5个Button按钮控件，设置其中的id属性值依次为top、left、center、right、bottom。图16-01 新建layoutControl相关的JSP页面layout_control.jsp，在页面中添加布局标签代码。Border布局添加Border布局标签代码。步骤：【DoradoX-Insert窗口】—》【TagDoradoLayout】—》【Layout(Border)】。图16-02 双击【Layout(Border)】，添加Border布局标签代码。<d:Viewconfig="layoutControl"><d:Layouttype="border"><d:Paneposition="top"></d:Pane><d:Paneposition="left"></d:Pane><d:Paneposition="center"></d:Pane><d:Paneposition="right"></d:Pane><d:Paneposition="bottom"></d:Pane></d:Layout> <d:Buttonid="top"/> <d:Buttonid="left"/> <d:Buttonid="center"/> <d:Buttonid="right"/> <d:Buttonid="bottom"/> </d:View> 在JSP页面中调整布局管理器标签代码。<d:Viewconfig="layoutControl">Border布局:<d:Layouttype="border"border="1"borderColor="gray"width="300"height="200"padding="8px"><d:Paneposition="top"style="background-color:#CCFFFF"><d:Buttonid="top"/></d:Pane><d:Paneposition="left"style="background-color:#FFDDFF"> <d:Buttonid="left"/></d:Pane><d:Paneposition="center"style="background-color:#F0F0F0" <d:Buttonid="center"/></d:Pane><d:Paneposition="right"style="background-color:#FFFFB3"> <d:Buttonid="right"/></d:Pane><d:Paneposition="bottom"style="background-color:#D7D7FF"> <d:Buttonid="bottom"/></d:Pane></d:Layout></d:View>图16-03 保存全部修改，刷新页面查看border布局。图16-04HFlow布局在LayoutControl中添加5个Button按钮，设置id分别为horizontal1、horizontal2、horizontal3、horizontal4、horizontal5。图16-05添加HFlow布局标签代码。步骤：【DoradoX-Insert窗口】—>【TagDoradoLayout】—>【Layout(HFlow)】。图16-06双击【Layout(HFlow)】添加HFlow布局代码。<d:Layouttype="Hflow"><d:Pane></d:Pane><d:Pane></d:Pane><d:Pane></d:Pane></d:Layout> 在JSP页面中调整HFlow布局管理器标签代码。<br>horziontal布局：<d:Layouttype="Hflow"border="1"borderColor="gray"height="60"padding="8px"><d:Panestyle="background-color:#CCFFFF"><d:Buttonid="horizontal1"/></d:Pane><d:Panestyle="background-color:#FFDDFF"><d:Buttonid="horizontal2"/></d:Pane><d:Panestyle="background-color:#F0F0F0"<d:Buttonid="horizontal3"/></d:Pane><d:Panestyle="background-color:#FFFFB3"><d:Buttonid="horizontal4"/></d:Pane><d:Panestyle="background-color:#D7D7FF"><d:Buttonid="horizontal5"/></d:Pane></d:Layout>图16-07 保存全部修改，查看HFlow布局效果。图16-08VFlow布局在LayoutControl中添加5个Button按钮，设置id分别为vertical1、vertical2、vertical3、vertical4、vertical5。图16-09添加hflow布局标签代码。步骤：【DoradoX-Insert窗口】—>【TagDoradoLayout】—>【Layout(VFlow)】。图16-10双击【Layout(VFlow)】添加VFlow布局代码。<d:Layouttype="vflow"><d:Pane></d:Pane><d:Pane></d:Pane><d:Pane></d:Pane></d:Layout> 在JSP页面中调整VFlow布局管理器标签代码。<br>vertical布局：<d:Layouttype="vflow"border="1"borderColor="gray"width="60"padding="8px"><d:Panestyle="background-color:#CCFFFF"><d:Buttonid="vertical1"/></d:Pane><d:Panestyle="background-color:#FFDDFF"><d:Buttonid="vertical2"/></d:Pane><d:Panestyle="background-color:#F0F0F0"<d:Buttonid="vertical3"/></d:Pane><d:Panestyle="background-color:#FFFFB3"><d:Buttonid="vertical4"/></d:Pane><d:Panestyle="background-color:#D7D7FF"><d:Buttonid="vertical5"/></d:Pane></d:Layout>图16-11 全部保存之后，刷新页面查看VFlow布局。图16-12混合布局混合布局是指将Border布局、HFlow布局、VFlow布局三种混合在一起构成一种包含三者的复杂布局展现。调整layout.jsp页面中的布局代码，分三步实现混合布局。第一步，将HFlow布局代码剪切至Border布局代码中的top部分。即替换top按钮标签代码。<d:Paneposition="top"style="background-color:#CCFFFF">horziontal布局： <d:Layouttype="Hflow"border="1"borderColor="gray"height="60"padding="8px"> <d:Panestyle="background-color:#CCFFFF"> <d:Buttonid="horizontal1"/> </d:Pane> <d:Panestyle="background-color:#FFDDFF"> <d:Buttonid="horizontal2"/> </d:Pane> <d:Panestyle="background-color:#F0F0F0" <d:Buttonid="horizontal3"/> </d:Pane> <d:Panestyle="background-color:#FFFFB3"> <d:Buttonid="horizontal4"/> </d:Pane> <d:Panestyle="background-color:#D7D7FF"> <d:Buttonid="horizontal5"/> </d:Pane> </d:Layout></d:Pane>第二步，将VFlow布局代码剪切至Border布局代码中的left部分。即替换left按钮标签代码。<d:Paneposition="left"style="background-color:#FFDDFF"> vertical布局： <d:Layouttype="vflow"border="1"borderColor="gray"width="60"padding="8px"> <d:Panestyle="background-color:#CCFFFF"> <d:Buttonid="vertical1"/> </d:Pane> <d:Panestyle="background-color:#FFDDFF"> <d:Buttonid="vertical2"/> </d:Pane> <d:Panestyle="background-color:#F0F0F0" <d:Buttonid="vertical3"/> </d:Pane> <d:Panestyle="background-color:#FFFFB3"> <d:Buttonid="vertical4"/> </d:Pane> <d:Panestyle="background-color:#D7D7FF"> <d:Buttonid="vertical5"/> </d:Pane> </d:Layout></d:Pane>第三步，删除Border布局中的right和bottom部分，调整页面布局代码。<d:Viewconfig="layoutControl">Border布局:<d:Layouttype="border"border="1"borderColor="gray"width="300"height="200"padding="8px"> <d:Paneposition="top"style="background-color:#CCFFFF"> horziontal布局： <d:Layouttype="Hflow"border="1"borderColor="gray"height="60"padding="8px"> <d:Panestyle="background-color:#CCFFFF"> <d:Buttonid="horizontal1"/> </d:Pane> <d:Panestyle="background-color:#FFDDFF"> <d:Buttonid="horizontal2"/> </d:Pane> <d:Panestyle="background-color:#F0F0F0" <d:Buttonid="horizontal3"/> </d:Pane> <d:Panestyle="background-color:#FFFFB3"> <d:Buttonid="horizontal4"/> </d:Pane> <d:Panestyle="background-color:#D7D7FF"> <d:Buttonid="horizontal5"/> </d:Pane> </d:Layout> </d:Pane> <d:Paneposition="left"style="background-color:#FFDDFF"> vertical布局： <d:Layouttype="vflow"border="1"borderColor="gray"width="60"padding="8px"> <d:Panestyle="background-color:#CCFFFF"> <d:Buttonid="vertical1"/> </d:Pane> <d:Panestyle="background-color:#FFDDFF"> <d:Buttonid="vertical2"/> </d:Pane> <d:Panestyle="background-color:#F0F0F0" <d:Buttonid="vertical3"/> </d:Pane> <d:Panestyle="background-color:#FFFFB3"> <d:Buttonid="vertical4"/> </d:Pane> <d:Panestyle="background-color:#D7D7FF"> <d:Buttonid="vertical5"/> </d:Pane> </d:Layout> </d:Pane><d:Paneposition="center"style="background-color:#F0F0F0" <d:Buttonid="center"/></d:Pane></d:Layout></d:View> 保存全部修改，刷新页面查看混合布局展现效果。图16-13别致的抽屉式布局 抽屉式布局其实是OutlookBar菜单的样式，只是其中放置的并非菜单项而是控件，它在JSP页面中添加了OutlookBarGroup标签而被用作布局的一种。抽屉式布局 在sample项目的src下新建ViewModel命名outlookGroup。新建OutlookBar控件。步骤：【Controls】—>【Insert】—>【Others】—>【OutlookBar】。图16-14 然后再新建4个Button按钮控件。图16-15 保存之后新建outlookGroup相关的JSP页面outlook_group.jsp，通过【DoradoX-Insert】在JSP页面中添加OutlookGroup标签，调整页面标签代码。<d:Viewconfig="outlookGroup"><d:OutlookBarid="outlookbar1"><d:OutlookBarGroupname="group1"label="第一个组"><d:Buttonid="button1"/></d:OutlookBarGroup><d:OutlookBarGroupname="group2"label="第二个组"padding="12"> <d:Buttonid="button2"/></d:OutlookBarGroup><d:OutlookBarGroupname="group3"label="第三个组"padding="12"><d:Buttonid="button3"/></d:OutlookBarGroup><d:OutlookBarGroupname="group4"label="第四个组"><d:Buttonid="button4"/></d:OutlookBarGroup></d:OutlookBar></d:View>图16-16 全部保存之后，打开outlook_group.jsp页面查看抽屉式布局效果。图16-17用于分割页面的分割布局器 页面分隔布局在dorado中是通过SplitterPanel和Splitter组合实现。使用页面分割布局器可以将页面分割成不同的区域，并且可以在最终页面中调整分割栏的位置。页面的分割既可以支持横向分割也支持纵向分割。分割布局器在sample项目的src中新建ViewModel命名splitter。新建4个Button按钮。图16-18 新建splitter的相关JSP页面splitter.jsp，通过【DoradoX-Insert】添加SplitPanel标签。步骤：【DoradoX-Insert】—>【TagDoradoControl】—>【SplitPanel】。图16-19双击【SplitPanel】在页面添加页面分隔布局代码。<d:SplitPanelid=""orientation="vertical"position=""width=""height=""showButtons="true"><d:Splitter/></d:SplitPanel>第1级水平方向分割 调整新增的布局代码，并设置其中的属性值。属性值备注idsplitpanel1SplitPanel的id值orientationverticalSplitPanel的方向属性。此处设置值为vertical，表示垂直的方向布局。position150SplitPanel的方位属性。它的值表示分割条距离左边框或者上边框的距离，单位是pixel。showButtonstrue设置是否显示分隔条中的三角箭头按钮（三角箭头按钮可控制箭头方向的展开和缩起）表16-01 除了设置必须的属性值外，还需要添加一些div标签用来标识空白区域（其他的Button按钮标签你可以删除它们，后面我们会依次添加进来）。<bodystyle="margin:0;overflow:hidden"><d:Viewconfig="splitter"><d:SplitPanelid="splitpanel1"orientation="horizontal"width="100%"height="100%"position="150"showButtons="true"><divstyle="width:100%;height:100%;background-color:#CCFFFF"><d:Buttonid="button1"/></div><d:Splitter/><divstyle="width:100%;height:100%;background-color:#FFFFFF"></div></d:SplitPanel></d:View></body>图16-20保存全部修改，刷新页面查看第1级水平分割布局。图16-21第2级垂直方向分割调整页面中的布局代码，在第1级水平分割之后的空白区域添加垂直分割布局。<bodystyle="margin:0;overflow:hidden"><d:Viewconfig="splitter"><d:SplitPanelid="splitpanel1"orientation="horizontal"width="100%"height="100%"position="150"showButtons="true"><divstyle="width:100%;height:100%;background-color:#CCFFFF"><d:Buttonid="button1"/></div><d:Splitter/> <d:SplitPanelid="splitpanel2"orientation="vertical"width="100%"height="100%"position="150"showButtons="true"><divstyle="width:100%;height:100%;background-color:#FFDDFF"><d:Buttonid="button2"/></div><d:Splitter/><divstyle="width:100%;height:100%;background-color:#FFFFFF"></div></d:SplitPanel></d:SplitPanel></d:View></body>图16-22 保存修改之后刷新页面，查看第2级垂直分割布局。图16-23第3级水平方向分割调整页面中的布局代码，在第2级垂直分割之后的空白区域添加水平分割布局。<bodystyle="margin:0;overflow:hidden"><d:Viewconfig="splitter"><d:SplitPanelid="splitpanel1"orientation="horizontal"width="100%"height="100%"position="150"showButtons="true"><divstyle="width:100%;height:100%;background-color:#CCFFFF"><d:Buttonid="button1"/></div><d:Splitter/> <d:SplitPanelid="splitpanel2"orientation="vertical"width="100%"height="100%"position="150"showButtons="true"><divstyle="width:100%;height:100%;background-color:#FFDDFF"><d:Buttonid="button2"/></div><d:Splitter/><d:SplitPanelid="splitpanel3"orientation="horizontal"width="100%"height="100%"position="150"showButtons="false"><divstyle="width:100%;height:100%;background-color:#FFFFB3"><d:Buttonid="button3"/></div><d:Splitter/><divstyle="width:100%;height:100%;background-color:#FFFFFF"><d:Buttonid="button4"/></div></d:SplitPanel></d:SplitPanel></d:SplitPanel></d:View></body>图16-24 保存全部修改之后刷新页面，查看第3级水平分割布局。图16-25类似门户的子窗体布局SubWindow子窗体属于页面控件的一个容器，可以动态的调整大小，也可以在JSP页面中任意拖动位置。放置其中的子元素控件也随之一起移动。SubWindow式布局在sample项目的src下新建ViewModel命名subwindow。新建AutoSqlDataset关联表EMPLOYEE命名datasetEmployee。新建DataTable绑定datasetEmployee。图16-26 新建SubWindow控件。步骤：【Control】—>【Insert】—>【Others】—>【SubWindow】。图16-27 设置新建的subwindow1中title属性值为“subwindow1”，width和height属性值均为“50%”。新建两个Button按钮btnHiden和btnShow，分别设置其value属性值为“隐藏”、“显示”图16-28 编写btnHide按钮的OnClick事件代码，实现隐藏subwindow1。subwindow1.hide();图16-29 编写btnShow按钮的OnClick事件代码，实现显示subwindow1。subwindow1.show();图16-30 新建subwindow相关的JSP页面，查看页面标签代码。<bodyscroll="no"><d:Viewconfig="subwindow"><d:DataTableid="tableEmployee"/><d:Buttonid="btnHide"/><d:Buttonid="btnShow"/></d:View></body> 在页面中通过【DoradoX-Insert】添加SubWindow标签代码并调整。<bodyscroll="no"><d:Viewconfig="subwindow"> <d:SubWindowid="subwindow1"title="subwindow布局示例"> <d:DataTableid="tableEmployee"/> </d:SubWindow><d:Buttonid="btnHide"/><d:Buttonid="btnShow"/></d:View></body>图16-31 通过【Browse】打开页面查看效果。图16-32 单击【隐藏】按钮查看隐藏的效果。图16-33 单击【显示】按钮之后，subwindow窗口又会像刚打开页面时效果一样显示出来。整洁的标签式布局标签式布局经常被应用于Web项目中，具有简洁、清晰的优点。在dorado中标签式布局分为普通标签页Tab和框架标签页FrameTab。标签式布局 在sample项目下新建ViewModel命名tabset，新建4个Button按钮。图16-34 在tabset中新建TabSet标签控件对象。步骤：【Control】—>【Insert】—>【Others】—>【TabSet】。图16-35普通标签页Tab在新建的tabset1标签对象中新建Tab对象。步骤：【tabset1】—>【Insert】—>【Tab】。图16-36 同样的步骤再新建3个Tab标签页对象。图16-37 新建tabset的相关JSP页面，通过【Browse】打开页面查看效果。图16-38 打开tabset.jsp页面，调整其中的标签代码。<bodyscroll="no"><d:Viewconfig="tabset"><d:TabSetid="tabset1"><d:Tabname="tab1"label=""><d:Buttonid="tab1"/></d:Tab><d:Tabname="tab2"label=""><d:Buttonid="tab2"/></d:Tab><d:Tabname="tab3"label=""><d:Buttonid="tab3"/></d:Tab><d:Tabname="tab4"label=""><d:Buttonid="tab4"/></d:Tab></d:TabSet></d:View></body>图16-39 保存全部修改，刷新页面查看标签页布局。图16-40框架标签FrameTab在tabset的tabset1标签对象中新建FrameTab框架标签页。步骤：【tabset1】—>【Insert—>【FrameTab】。图16-41 设置新建的FrameTab的path属性值为。图16-42 保存全部修改，刷新页面查看效果。图16-43小测验关于布局管理器，下面说法正确的是（）【多选】布局管理器中的Border布局可以将控件以上下左右中的方式进行空间位置的摆放。HFlow布局不可以和VFlow布局进行混合方式布局。HFlow布局可以和VFlow布局进行混合方式布局。可以使用Border、HFlow、VFlow同时进行复合布局。关于抽屉式布局，下面说法错误的是（）【单选】抽屉式布局的风格类似于OutlookBar菜单风格。抽屉式布局可以直接在ViewModel中配置实现。抽屉式布局必须要在JSP页面中进行相关配置方可实现。实现抽屉式布局离不开OutlookBarGroup标签的使用。下面关于子窗体布局的说法正确的是（）【多选】子窗体布局主要是通过SubWindow子窗体控件实现。默认情况下，SubWindow支持双击最大化。可以通过事件编码方式实现动态的SubWindow隐藏和显示。一个dorado的JSP页面中可以存在任意多个SubWindow控件。标签式布局的用法中，哪些是不能实现的（）【多选】在TabSet控件中，可以新建任意多个tab标签页。标签页可以分为普通的tab标签页和FrameTab框架标签页。默认情况下，可以通过双击标签页头实现关闭该标签。可以任意拖动标签页的