EEP2012 WEB教學講義 Andy Kao

課程大綱(一) 進度 課程內容 時間 第一日 上午 EEP慨念 & 設定 Server(Model)設計 70 *下課休息 15 單檔HTML設計 預設與檢驗 60 中午休息 12:00~13:15　 第一日 下午 Wizard 單檔設計 多檔關連設計 欄位類型設計 10 查詢設計 50

課程大綱(二) 進度 課程內容 時間 第二日 上午 自動編號與序號 過帳設計 70 *下課休息 15 Server Method設計 50 中午休息 12:00~13:15 　 第二日 下午 權限管理 多國語言 進階設計 WEB表單整合 80 10 Web系統發佈 啟動專案 40

EEP 基本慨念

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

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

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

jQuery架構與MVC

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

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

EEP 基礎設定

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

EEP資料字典

HTML單檔設計

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

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

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

以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

以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>

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>

開窗編輯的模式 editDialog:'#dlg' ,editMode: 'Continue' 設定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

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

Wizard單檔設計

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

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

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

預設與檢核

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

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

Validate元件處理 設定 JQValidate元件 重複檢查，在dataForm設定: 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; 設定 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

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

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

多檔關連設計

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

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

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

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

欄位組件類型

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

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

DateBox設計 Editor設定為DateBox (WORDERS) 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中

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

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

ColumnMatch設定 Refval設定EditOptions 設定ColumnMatch

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

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

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

查詢設計

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

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

Excel 輸出 datagrid的ToolItems新增一Icon 設定 Icon為icon-excel OnClick為exportGrid

Format設定 日期: yyyy mm dd YYY . - / (yyyy.mm.dd mm/dd/yyyy) 數值: Nn Cn (C2, N3) 邏輯: L,x1,x2 (L,是,否) 字串: ?? X O (?OO???) 其他: Image, File, (Image,Folder=Files,Height=60)

FormatScript的處理 設定 dataGrid的Columns.FormatScript為colorValue 設計一個colorValue的JS程式: <script type="text/javascript"> function colorValue(val, row) { if (val > 100) { return "<div style=\"color:Red\">" + val + "</div>"; } return val; </script>

自動編號與序號

Identity處理 Server端InfoCommand設定ServerModifyGetMax=True (SORDERS) DataForm的ShowApplyButton=True (WORDERS)

Detail的AutoSeq 貼入JQAutoSeq (WORDERS) 設定BindingObjectID為dataGridDetail 設定FieldName為Owner,NumDig為3

AutoNumber元件 EEP Server Wizard (SPURCHASE.DLL) 貼入AutoNumber, 設定AutoID, UpdateComp, TargetColumn, GetFixed, NumDig, StartValue, Step EEP jQuery Wizard, Master/Details (WPURCHASE)

Transaction設計

Transaction原理 Database select InfoCommand Insert/Delete/Update Active DB Server Database select A/P Server InfoCommand Insert/Delete/Update Active UpdateComp Update (inc/dec/replace) Apply Trans Mode: AutoAppend Exception Ignore AlwaysAppend Client InfoDataSet

Transaction的實例 Orders Customers Order Details Products select Master DB Server A/P Server select Customers Insert/Delete/Update Master InfoCommand Inc OrderedAmout Replace LastOrderedDate Client Order Details Master UpdateComp Active select Detail InfoCommand Apply Insert/Delete/Update Products Master CDS Inc UnitsOnOrder Replace LastOrderedPrice Detail UpdateComp Apply Detail CDS

Transaction設計 Orders Transaction : Customers OrderDate Replace LastOrderedDate Order Details Transaction: Products UnitPrice Replace LastUnitPrice Quantity Inc UnitsOnOrder

Server Method 設計

Server Method原理 DB Server A/P Server iiS Server Call Database ServiceManager select Aspx Code Server Method1 …… Server Method2 Server Method3 Server Method4 ….. Update Remote Call Browser InfoCommand JS Call

Server Method設計 設計Server Method: (SORDERS) 定義ServiceManager public object CallTest(object[] objParam) { string str = objParam[0].ToString(); string sql= "select avg(UnitPrice) as AvgPrice from [Order Details] Where ProductID="; sql = sql + str; DataSet Tmp = ExecuteSql("View_Orders", sql, "ERPS", true); string retval=Tmp.Tables[0].Rows[0]["AvgPrice"].ToString(); object ret; ret = new object[] { 0, retval}; return ret; } 定義ServiceManager 設定 ServiceName(服務名稱) , DelegateName(實際名稱)

Client調用設計 貼入HTML Button (WORDERS) DataGrid中設定ToolItems <input id="Button1" type="button" value="Call Method" onclick="serverMethod()"/> DataGrid中設定ToolItems 增加一個Icon, OnClick="serverMethod" Text="Average Price"

Client調用設計 Client script: <script> function serverMethod() { var row = $('#dataGridDetail').datagrid('getSelected'); $.ajax({ type: "POST", url: '../handler/jqDataHandle.ashx?RemoteName=SORDERS.Orders', data: "mode=method&method=" + "CallTest" + "&parameters=" + row.ProductID, cache: false, async: true, success: function (data) { alert(data); } }); } </script>

Server端Debug 在VS執行”偵錯/附加至程序” 選擇 EEP NetServer.EXE程序 設定中斷點, 進入Debug模式。

權限管理

權限級別 Login (Users/AD) Menus (By Users/Groups) JQSecurity JQSecurityColumn InfoCommand.SecStyle 動態權限

JQSecurity設計 貼入JQSecurity (WORDERS) 設定Alias, MenuID 執行”Export”, “Add All” 存檔即可 以EEPManager來設定 (工程師, 主檔次檔都無法新增/更改)

JQSecurityColumn設計 貼入JQSecurityColumn (WORDERS) 設定BindingObjectID,Columns (Master/Detail各貼一個, 設定Ship開頭的欄位) 重新設定JQSecurity, 並執行”Export” 以EEPManager來設定 (工程師, 無法顯示及更改)

Row權限設計 設定Server端 InfoCommand.SecStyle (SBASIC.Customers) SecStyle: User,Group,Role,Org,OrgShare 設定SecFieldName (ServiceRole) 重Build Server端DLL

動態權限控管 <script> function CheckOrderStatus(rowData) { if (rowData.OrderStatus == 'Y' || rowData.OrderStatus == '') { return false; } return true; } </script>

多國語言

多國語言設計 貼入JQMultiLanguage (WEMPLOYEE) 設定Active,Alias,GroupIndex 執行Edit, 將語言訊息存入XML中 (訊息可存於XML語DB當中) 貼入Button, Click中: protected void Button1_Click(object sender, EventArgs e) { JQMultiLanguage1.GroupIndex = JQClientTools.LanguageGroups.English; JQMultiLanguage1.SetLanguage(false); JQScriptManager1.Locale = "en"; }

進階設計

多級選單 WEMPLOYEE的國家(Combo)過濾城市(ComboGrid) 改善更改直接選縣市的問題 $(document).ready(function () { $("#dataFormMaster").form({ onLoadSuccess: function () { var obj = $("[comboname='Country'].info-combobox", "#dataFormMaster"); var val = obj.combobox('getValue'); obj = $("[comboname='City'].info-combogrid", "#dataFormMaster"); obj.combogrid('setWhere', "Country = '" + val + "'"); } }); WEMPLOYEE的國家(Combo)過濾城市(ComboGrid) 國家Combo設定OnSelect設定FilterCountry function FilterCountry(val) { var obj = $("[comboname='City'].info-combogrid", "#dataFormMaster"); obj.combogrid('setWhere', "Country = '" + val.Country + "'"); }

多頁簽設計 貼入 easyui-tabs 的語法 (WORDERS) 貼入DataGrid或DataForm <div id="Div1" class="easyui-tabs" style="width: 700px; height: 360px;"> <div style="padding: 20px; " title="明細資料">Tab1</div> <div style="overflow: auto; padding: 20px; " title="單筆編輯">Tab2</div> </div> 貼入DataGrid或DataForm

自定DataForm 貼入 JQDialog (WORDERS) 設定 DataGrid(Details)的EditDailogID 貼入 JQDataForm 設定 JQDataForm的RemoteName,TableName 執行 Refresh Schema 設定 Columns (補充ProductID的Refval) 設定 ParentObjectID,RelationColumns 設定 JQDailog的BindingObjectID,EditMode

整合Web ASP .Net表單

WEB單檔設計 加入EEPWebClient網站 EEP Web Client Wizard (WSingle3) (WCUSTOMERS2) 調整UpdatePanel的內容 設定EEPManager

在jQuery執行WEB表單 設定EEPWebClient網站Web.Config/ <system.web> <webServices> <protocols> <add name="HttpGet"/> <add name="HttpPost"/> </protocols> </webServices> 設定JQWebClient網站Web.Config/ <appSettings> <appSettings> <add key="EEPWebClient" value="http://localhost:1552/EEPWebClient"/> </appSettings> 注意InitEEP中WebClient Directory 的設定

WEB 系統發佈

Web 系統發佈 安裝 IIS 7.0與ASP.NET 4.0 IIS後安裝時請執行: 建立一個發佈目錄 (如 C:\EEPTEST) C:\Windows\Microsoft.NET\Framework\v4.0.30319> aspnet_regiis -i 建立一個發佈目錄 (如 C:\EEPTEST) 打開IIS檢查”應用程式集”內ASP.NET的版本 改變IIS上ISAPI與CGI的ASP.NET 4.0設定為允許 在”站台”中新增”應用程式”, 設定到虛擬目錄上 在VS上執行Publish WebSite 重新設定InitEEP的WebClient Directory

啟動專案

產生新方案 執行Wizard Create Solution 設定Solution Name,選擇 JQuery

Q & A