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框架標簽頁。默認情況下，可以通過雙擊標簽頁頭實現關閉該標簽。可以任意拖動標簽頁的