EEP2012 WEB 教學講義

1. EEP2012WEB教學講義 • Andy Kao

2. 課程大綱(一)

3. 課程大綱(二)

4. EEP 基本慨念

5. EEP架構 EEP Workflow Foundation EEP2010 / EEP2012 VS2010 / 2012(C#,VB) jQuery ASP.NET WinForm Base Class Library CLR (Common Language Runtime ) Web Windows

6. EEP概念 • 精靈生產—速成/快速 • 極短程式—標準/維護 • 元件化— 80/20法則 • 多介面— 彈性/親和 • N-Tier—擴展/管理

7. IIS Server Web Client EEP A/P Server Internet Mobile Internet Database Server aspx dll Windows Client Server Method Internet Workflow Foundation dll N-Tier與SOA架構

8. jQuery架構與MVC

9. EEP jQuery特色 • 架構在標準jQuery之下(v1.7以上) • 類似MVC開發模式，分離設計 • 內建包裝好 EasyUI組件，不用重新開始 • 提供原生開發模式與元件模式 • 元件模式可以Wizard快速產生 • 可自由調用C#與後端的Server Method • 支援jQuery Mobile提供行動方案 • 可整合EEP workflow 引擎

10. View設計頁面 Runtime網頁 Model (A/P Server) 產生相對JS的Code Workflow Engine 產生相對JS的Code jQuery元件 r UpdateComp Render WCF Remoting 產生相對的html InfoCommad EEP jQuery架構 jQuery原生與元件共存 EEP保留開發者的原生開發方式 Run 開發者的JS與HTML

11. EEP 基礎設定

12. EEP2012安裝 • SETUP EEP2012 • initEEP (InfoRemoteModule,Srvtools) • OPEN Solution1.sln • Export Template • EEPServer.EXE • DB Manager • Create System Table

13. EEP資料字典

14. HTML單檔設計

15. 單檔設計 DB Server A/P Server IIS Server Database DataGrid select InfoCommand dump Insert/Update/Delete Get Columns Binding UpdateComp Infolight.js HTML Insert/Update/Delete Binding

16. Server端開發(Model) 使用EEP Server Wizard (SBASIC.DLL) 選資料表: Customers , Products Employee , Region 掛接在EEP Net Server上

17. Server端元件 InfoCommand CommandText,CommandType KeyFields,SelectPaging SecStyle, SiteControl UpdateComp ExceptJoin, FieldAttr, ServerModify Insert/Delete/Modify/Apply(Before/After)

18. 以HTML設計 jQuery 加入新項目 來自JQSINGLE(命名WCUSTOMERS) 設定datagrid中infolight-options: remoteName:'SBASIC.Customers',tableName:'Customers' 設定thead <th data-options="field:'CustomerID',width:80,editor:'text'">客戶編號</th> <th data-options="field:'CompanyName',width:100,editor:'text'">客戶名稱</th> <th data-options="field:'ContactName',width:80,align:'right',editor:'text'">連絡人</th> <th data-options="field:'ContactTitle',width:80,align:'right',editor:'text'">職稱</th> <th data-options="field:'Address',width:250,editor:'text'">連絡地址</th> <th data-options="field:'City',width:80,align:'center',editor:'text'">城市</th> <th data-options="field:'Region',width:80,align:'center',editor:'text'">區域</th> <th data-options="field:'LastOrderedDate',width:80,editor:'text'">訂單日期</th> 設定EEPManager

19. 以HTML設計查詢 查詢欄位設定, 在query div中的<table>插入: <tr><td>客戶編號:</td> <td><input type="text" name="id" id="txt" infolight-options="field:'CustomerID',condition:'%',dataType:'string'"></td> </tr><tr><td>客戶名稱:</td> <td><input type="text" name="id" id="Text1" infolight-options="field:'CompanyName',condition:'%',dataType:'string'"></td> </tr><tr><td>連絡人:</td> <td><input type="text" name="id" id="Text2" infolight-options="field:'ContactName',condition:'%',dataType:'string'"></td> </tr><tr><td>訂單日期:</td> <td><input type="text" name="id" id="Text3" infolight-options="field:'LastOrderedDate',condition:'>=',dataType:'date'"></td> <td>至</td> <td><input type="text" name="id" id="Text4" infolight-options="field:'LastOrderedDate',condition:'<=',dataType:'date'"></td> </tr>

20. editDialog (開窗編輯) 設定div dlg<table>中插入: <tr><td>客戶編號:</td><td><input class="easyui-validatebox" type="text" width="100" infolight-options="field:'CustomerID',form:'ff'" name="CustomerID" data-options="required:true"></input></td></tr> <tr><td>公司名稱:</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'CompanyName',form:'ff'" name="CompanyName" ></input></td></tr> <tr><td>連絡人:</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'ContactName',form:'ff'" name="ContactName"></input></td></tr> <tr><td>職稱:</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'ContactTitle',form:'ff'" name="ContactTitle"></input></td></tr> <tr><td>地址:</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'Address',form:'ff'" name="Address"></input></td></tr> <tr><td>城市:</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'City',form:'ff'" name="City"></input></td></tr> <tr><td>區域:</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'Region',form:'ff'" name="Region"></input></td></tr> <tr><td>建檔日期:</td><td><input class="easyui-validatebox" type="text" infolight-options="field:'LastOrderedDate',form:'ff'" name="LastOrderedDate"></input></td></tr>

21. 開窗編輯的模式 • 設定dlg中infolight-options: • remoteName:'SBASIC.Customers',tableName:'Customers' • display:normal • (Dialog方式)設定datagrid的infolight-options加入: • editDialog:'#dlg' ,editMode:'Dialog' • (Expand方式): • editDialog:'#dlg' ,editMode:'Expand' • (Continue方式): • editDialog:'#dlg' ,editMode: 'Continue' • class="easyui-dialog"拿掉 • (Switch方式): • editDialog:'#dlg' ,editMode:'Switch' • 設定 display:none

22. 欄位預設的功能 • 加在dlg的easyui-validatebox infolight-options中: • 公司名稱: • defaultValue:'股份有限公司' • 建檔日期: • defaultValue:'remote[_today]‘ • 加在dlg的easyui-validatebox的 data-options中: • 客戶編號: • data-options="required:true" • 聯絡人: • data-options="required:true"

23. Wizard單檔設計

24. Wizard單檔設計一 • 使用EEP jQuery Wizard • 選擇 jQuerySingle1設計產品資料(WPRODUCT)

25. 查詢設計 DataGrid中填入Query欄位 使用QueryAutoColumn功能

26. Wizard單檔設計二 使用EEP jQuery Wizard 選擇 jQuerySingle2設計員工資料(WEMPLOYEE)

27. 預設與檢核

28. Default元件處理 <script> function getaddress() { return '新北市'; } </script> 設定 JQDefault元件 到職日(HireDate): _TODAY 國家(Country): 中華民國 地址(Address): DefaultMethod=getaddress (Client)

29. JS的Debug 在IE中, 按下<F12> 選擇”指令碼”的”檢視原始檔” 設定中斷點, 按下”開始偵錯”

30. Validate元件處理 public bool validatecity(string value) { string str = value.Substring(0,3); if (str == "台北市" || value == "新北市") return true; else return false; } function CheckPostal(value) { if (value[0] >= '0' && value[0] <= '9') { return true; } else return false; } • 設定 JQValidate元件 • 員工編號 (EmployeeID): CheckNull=True • 員工性名 (LastName): CheckNull=True • 城市(City): CheckNull=True, • RangeFrom: A, RangeTo: Z • 地址(Address): CheckNull=True, • CallMethod=validatecity (Remote) • 郵遞區號(PostalCode): CheckNull=True, • CallMethod=CheckPostal (Client) • 重複檢查，在dataForm設定: • duplicateCheck:true

31. Remote端Debug 在IE查看WebDevServer的Port No. 在VS執行”偵錯/附加至程序” 選擇 WebDev.WebServer的ASP.NET程序 設定中斷點, 進入Debug模式。

32. Dialog變換 Switch模式 Expand模式 Continue模式

33. 多檔關連設計

34. 多檔關連設計 DB Server A/P Server IIS Server Database select Master InfoCommand dump Insert/Update/Delete InfoDataSource Infolight.js UpdateComp Insert/Update/ Delete Insert/Update/Delete Binding Detail InfoCommand Relation UpdateComp Master DataGrid Detail DataGrid

35. Server端多檔開發(Model) 使用EEP Server Wizard (SORDERS.DLL) UpdateComp定ServerModifyGetMax=True SORDER掛接在EEP Net Server上

36. Wizard多檔設計 使用EEP jQuery Wizard 選擇 jQueryMasterDetail1設計訂單管理(WORDERS)

37. 關連的顯示設定 設定datagrid中的Columns 以infoCombobox來做為關聯設定,設定EditorOptions: RemoteName,ValueMember, DisplayMember

38. 欄位組件類型

39. 欄位的Control Type TextBox ValidateBox NumberBox CheckBox DateBox PassWord ComboBox ComboGrid RefVal FileUpload

40. CheckBox設計 Editor設定為CheckBox (WPRODUCT) EditorOptions設定:on:1,off:0 支援欄位: Bit(True/False), int(1/0), Char (Y/N) 顯示設定: Format: L,是,否

41. DateBox設計 if ($.fn.datebox){ … $.fn.datebox.defaults.formatter = function (date) { var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); return y + '.' + (m < 10 ? ('0' + m) : m) + '.' + (d < 10 ? ('0' + d) : d); }; Editor設定為DateBox (WORDERS) 支援欄位: DateTime, Date, Varchar(8), Varchar(10) 顯示設定: Format: yyyy.mm.dd, mm/dd/yyyy, YYY.mm.dd DateBox格式設定: js\local\easyui-lang-zh_TW.js中

42. Combox設計 Editor設定為CheckBox(WEMPLOYEE/區域) 設定Items即可(固定值) 設定EditorOptions: RemoteName,ValueMember, DisplayMember

43. Refval設計 設定dataform中的Columns (WORDERS) 以infoRefVal來做為關聯設定

44. ColumnMatch設定 Refval設定EditOptions 設定ColumnMatch

45. ComboGrid設定 設定dataform中的Columns (WORDERS) 以infoComboGrid來做為關聯設定

46. Image的上傳 Columns Editor設定為infoFileUpload (WEMPLOYEE) 設定Filter=jpg|png及UploadFolder=Folder:Files/Photos

47. Image的顯示 設定Format為Image,Folder:Files/Photos,Height:60 貼入JQImageContainer 設定Height,Width,AutoSize

48. 查詢設計

49. 查詢設計 使用EEP jQuery Wizard 選擇 jQueryQuery1訂單查詢(WORDERQRY) 使用NewLine與DefaultValue

50. 加總與其他功能 Total設定(sum/count/max/min/average) Format: N2(小數兩位+’,’) Frozen: True (凍結欄位) Sortable: True(排序)