Upload
jon
View
276
Download
5
Embed Size (px)
DESCRIPTION
EEP2012 WEB 教學講義. Andy Kao. 課程大綱 ( 一 ). 課程大綱 ( 二 ). 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 概念. 精靈生產 — 速成 / 快速 極短程式 — 標準 / 維護 - PowerPoint PPT Presentation
Citation preview
課程大綱課程大綱 (( 一一 ))
進度進度 課程內容課程內容 時間時間
第一日上午
EEP 慨念 & 設定Server(Model) 設計 70
* 下課休息 15
單檔 HTML 設計預設與檢驗 60
中午休息12:00~13:1
5
第一日下午
Wizard 單檔設計預設與檢驗 70
* 下課休息 15
多檔關連設計欄位類型設計 70
* 下課休息 10
查詢設計 50
課程大綱課程大綱 (( 二二 ))
進度進度 課程內容課程內容 時間時間
第二日上午
自動編號與序號過帳設計 70
* 下課休息 15
Server Method 設計 50
中午休息12:00~13:15
第二日下午
權限管理多國語言 70
* 下課休息 15
進階設計WEB 表單整合 80
* 下課休息 10
Web 系統發佈啟動專案 40
Windows
CLR (Common Language Runtime )
VS2010 / 2012(C#,VB)
EEP2010 / EEP2012
Base Class Library
Web
EEP Workflow Foundation
ASP.NET WinFormjQuery
EEPEEP 架構架構
精靈生產精靈生產——速成速成 // 快速快速極短程式極短程式——標準標準 // 維護維護元件化元件化— — 80/2080/20 法則法則多介面多介面— — 彈性彈性 // 親和親和N-Tier—N-Tier— 擴展擴展 // 管理管理
EEPEEP 概念概念
Windows ClientWindows Client
InternetInternet
IIS ServerIIS Server
InternetInternet
EEP EEP A/P ServerA/P Server
Database Database ServerServer
Server MethodServer MethodWorkflow Foundation
dlldll
dlldll
aspxaspx
Web ClientWeb Client
InternetInternetMobile
N-TierN-Tier 與與 SOASOA 架構架構
EEP jQueryEEP jQuery 特色特色架構在標準架構在標準 jQueryjQuery 之下之下 (v1.7(v1.7 以上以上 ))
類似類似 MVCMVC 開發模式,分離設計開發模式,分離設計內建包裝好 內建包裝好 EasyUIEasyUI 組件,不用重新開始組件,不用重新開始提供原生開發模式與元件模式提供原生開發模式與元件模式元件模式可以元件模式可以 WizardWizard 快速產生快速產生可自由調用可自由調用 C#C# 與後端的與後端的 Server MethodServer Method
支援支援 jQuery MobilejQuery Mobile 提供行動方案提供行動方案可整合可整合 EEP workflow EEP workflow 引擎引擎
jQueryjQuery 原生與元件共存原生與元件共存EEP保留開發者的原生開發方式
View 設計頁面View 設計頁面 Runtime 網頁Runtime 網頁
rr產生相對 JS
的 Code產生相對 JS
的 Code
產生相對的html
產生相對的html
Model(A/P Server)
Model(A/P Server)
WCF Remoting
InfoCommadInfoCommad
UpdateCompUpdateComp
Workflow Engine Workflow Engine
EEP jQuery 架構EEP jQuery 架構
產生相對 JS的 Code
產生相對 JS的 Code
RenderjQuery 元件jQuery 元件
開發者的 JS 與HTML
開發者的 JS 與HTML
Run
EEP2012EEP2012 安裝安裝SETUP EEP2012SETUP EEP2012
initEEP initEEP (InfoRemoteModule,Srvtools)(InfoRemoteModule,Srvtools)
OPEN Solution1.slnOPEN Solution1.sln
Export TemplateExport Template
EEPServer.EXE EEPServer.EXE
DB ManagerDB Manager
Create System TableCreate System Table
單檔設計單檔設計
InfoCommandInfoCommand
Infolight.jsInfolight.jsUpdateCompUpdateComp
DatabaseDatabaseselect
dump
Insert/Update/Delete
Insert/Update/DeleteGet Columns
A/P ServerA/P ServerDB ServerDB Server
IIS ServerIIS Server
DataGrid
HTML
Binding
Binding
ServerServer 端開發端開發 (Model)(Model)
使用 EEP Server Wizard
(SBASIC.DLL)
選資料表 : Customers , Products
Employee , Region
掛接在 EEP Net Server 上
ServerServer 端元件端元件
InfoCommand
CommandText,CommandType
KeyFields,SelectPaging
SecStyle, SiteControl
UpdateComp
ExceptJoin, FieldAttr, ServerModify
Insert/Delete/Modify/Apply(Before/After)
以以 HTMLHTML 設計設計 jQueryjQuery
加入新項目 來自加入新項目 來自 JQSINGLE(JQSINGLE( 命名命名WCUSTOMERS)WCUSTOMERS)
設定設定 datagriddatagrid 中中 infolight-options:infolight-options: remoteName:'SBASIC.Customers',tableName:'Customers'
設定設定 theadthead<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>
設定設定 EEPManagerEEPManager
以以 HTMLHTML 設計查詢設計查詢查詢欄位設定查詢欄位設定 , , 在在 query divquery div 中的中的 <table><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 (editDialog ( 開窗編輯開窗編輯 ))
設定設定 div dlg<table>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>
開窗編輯的模式開窗編輯的模式設定設定 dlgdlg 中中 infolight-options:infolight-options:
remoteName:'SBASIC.Customers',tableName:'Customers' display:normal
(Dialog(Dialog 方式方式 )) 設定設定 datagriddatagrid 的的 infolight-optionsinfolight-options 加入加入 :: editDialog:'#dlg' ,editMode:'Dialog'
(Expand(Expand 方式方式 ):): editDialog:'#dlg' ,editMode:'Expand'
(Continue(Continue 方式方式 ):):
editDialog:'#dlg' ,editMode: 'Continue' class="easyui-dialog" 拿掉
(Switch(Switch 方式方式 ):): editDialog:'#dlg' ,editMode:'Switch' 設定 display:none
欄位預設的功能欄位預設的功能
加在加在 dlgdlg 的的 easyui-validatebox infolight-optionseasyui-validatebox infolight-options 中中 ::公司名稱 :
defaultValue:' 股份有限公司 '
建檔日期 :
defaultValue:'remote[_today]‘
加在加在 dlgdlg 的的 easyui-validateboxeasyui-validatebox 的的 data-optionsdata-options 中中 ::客戶編號 :
data-options="required:true"
聯絡人 :
data-options="required:true"
DefaultDefault 元件處理元件處理
設定 JQDefault 元件到職日 (HireDate): _TODAY國家 (Country): 中華民國地址 (Address): DefaultMethod=getaddress (Client)
<script>
function getaddress() {
return ' 新北市 ';
}
</script>
ValidateValidate 元件處理元件處理
設定 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
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; }
RemoteRemote 端端 DebugDebug
在 IE 查看 WebDevServer 的 Port No.
在 VS 執行”偵錯 / 附加至程序”選擇 WebDev.WebServer 的 ASP.NET 程序設定中斷點 , 進入 Debug 模式。
多檔關連設計多檔關連設計
MasterMasterInfoCommandInfoCommand
Infolight.jsInfolight.js UpdateCompUpdateComp
DatabaseDatabase
DetailDetailInfoCommandInfoCommand
UpdateCompUpdateComp
InfoDataSourceInfoDataSource
select
dump
Insert/Update/Delete
Insert/Update/Delete
Insert/Update/Delete
A/P ServerA/P ServerDB ServerDB Server
Binding
IIS ServerIIS Server
Master DataGrid
Detail DataGrid
Relation
ServerServer 端多檔開發端多檔開發 (Model)(Model)
使用 EEP Server Wizard (SORDERS.DLL)
UpdateComp 定 ServerModifyGetMax=True
SORDER 掛接在 EEP Net Server 上
關連的顯示設定關連的顯示設定
設定 datagrid 中的 Columns
以 infoCombobox 來做為關聯設定 , 設定EditorOptions: RemoteName,ValueMember, DisplayMember
欄位的欄位的 Control TypeControl Type
TextBox
ValidateBox
NumberBox
CheckBox
DateBox
PassWord
ComboBox
ComboGrid
RefVal
FileUpload
CheckBoxCheckBox 設計設計
Editor 設定為 CheckBox (WPRODUCT)
EditorOptions 設定 :on:1,off:0
支援欄位 : Bit(True/False), int(1/0), Char (Y/N)
顯示設定 : Format: L, 是 , 否
DateBoxDateBox 設計設計
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 中
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);};
ComboxCombox 設計設計
Editor 設定為 CheckBox (WEMPLOYEE/ 區域 )
設定 Items 即可 ( 固定值 )
設定 EditorOptions: RemoteName,ValueMember,
DisplayMember
ImageImage 的上傳的上傳
Columns Editor 設定為 infoFileUpload (WEMPLOYEE)
設定 Filter=jpg|png 及 UploadFolder=Folder:Files/Photos
ImageImage 的顯示的顯示
設定 Format 為 Image,Folder:Files/Photos,Height:60
貼入 JQImageContainer
設定 Height,Width,AutoSize
加總與其他功能加總與其他功能
Total 設定 (sum/count/max/min/average)
Format: N2( 小數兩位 +’,’)
Frozen: True ( 凍結欄位 )
Sortable: True( 排序 )
FormatFormat 設定設定
日期日期 : yyyy mm dd YYY . - /: yyyy mm dd YYY . - /
(yyyy.mm.dd mm/dd/yyyy)(yyyy.mm.dd mm/dd/yyyy)
數值數值 : Nn Cn: Nn Cn (C2, N3)(C2, N3)
邏輯邏輯 : L,x1,x2 (L,: L,x1,x2 (L, 是是 ,, 否否 ))
字串字串 : ?? X O (?OO???): ?? X O (?OO???)
其他其他 : Image, File, : Image, File,
(Image,Folder=Files,Height=60)(Image,Folder=Files,Height=60)
FormatScriptFormatScript 的處理的處理
設定 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>
IdentityIdentity 處理處理
Server 端 InfoCommand 設定ServerModifyGetMax=True
(SORDERS)
DataForm 的 ShowApplyButton=True (WORDERS)
DetailDetail 的的 AutoSeqAutoSeq
貼入 JQAutoSeq (WORDERS)
設定 BindingObjectID 為 dataGridDetail
設定 FieldName 為 Owner,NumDig 為 3
AutoNumberAutoNumber 元件元件
EEP Server Wizard (SPURCHASE.DLL)EEP Server Wizard (SPURCHASE.DLL)
貼入貼入 AutoNumber, AutoNumber, 設定設定 AutoID, UpdateComp, AutoID, UpdateComp, TargetColumn, GetFixed, NumDig, StartValue, StepTargetColumn, GetFixed, NumDig, StartValue, Step
EEP jQuery Wizard, Master/Details (WPURCHASE)EEP jQuery Wizard, Master/Details (WPURCHASE)
TransactionTransaction 原理原理
Trans Mode:AutoAppendExceptionIgnoreAlwaysAppend
InfoCommandInfoCommand
A/P ServerA/P Server
ClientClient
DatabaseDatabase
DB ServerDB Server
InfoDataSetInfoDataSet
select
Active UpdateCompUpdateComp
Apply
Insert/Delete/Update
Update (inc/dec/replace)
TransactionTransaction 的實例的實例
Master Master InfoCommandInfoCommand
A/P ServerA/P Server
ClientClient
DB ServerDB Server
MasterMasterCDSCDS
select
ActiveMasterMaster
UpdateCompUpdateComp
Apply
OrdersOrders
CustomersCustomers
Inc OrderedAmoutInc OrderedAmoutReplace Replace LastOrderedDateLastOrderedDate
Insert/Delete/Update
Order DetailsOrder Details
DetailDetailInfoCommandInfoCommand
select
DetailDetailCDSCDS
DetailDetailUpdateCompUpdateComp
Apply
Insert/Delete/Update
ProductsProductsInc UnitsOnOrderInc UnitsOnOrderReplace Replace LastOrderedPriceLastOrderedPrice
TransactionTransaction 設計設計
Orders Transaction : CustomersOrders Transaction : Customers
OrderDate Replace LastOrderedDate OrderDate Replace LastOrderedDate
Order Details Transaction: ProductsOrder Details Transaction: Products
UnitPrice Replace LastUnitPriceUnitPrice Replace LastUnitPrice
Quantity Inc UnitsOnOrderQuantity Inc UnitsOnOrder
Server Method1……
Server Method2……
Server Method3……
Server Method4…..
Server MethodServer Method 原理原理
InfoCommandInfoCommand
A/P ServerA/P Server
BrowserBrowser
DatabaseDatabase
DB ServerDB Server
select
Call ServiceManagerServiceManager
Update
iiS ServeriiS Server
Aspx CodeAspx Code
Remote Call
JS Call
Server MethodServer Method 設計設計設計設計 Server Method: (SORDERS)Server Method: (SORDERS)
public object CallTest(object[] objParam)public object CallTest(object[] objParam) { string str = objParam[0].ToString();{ string str = objParam[0].ToString(); string sql= "select avg(UnitPrice) as AvgPrice from [Order Details] Where string sql= "select avg(UnitPrice) as AvgPrice from [Order Details] Where
ProductID=";ProductID="; sql = sql + str;sql = sql + str; DataSet Tmp = ExecuteSql("View_Orders", sql, "ERPS", true);DataSet Tmp = ExecuteSql("View_Orders", sql, "ERPS", true); string retval=Tmp.Tables[0].Rows[0]["AvgPrice"].ToString();string retval=Tmp.Tables[0].Rows[0]["AvgPrice"].ToString(); object ret;object ret; ret = new object[] { 0, retval};ret = new object[] { 0, retval}; return ret; return ret; }}
定義定義 ServiceManagerServiceManager 設定 設定 ServiceName(ServiceName( 服務名稱服務名稱 ) , DelegateName() , DelegateName( 實際名稱實際名稱 ))
ClientClient 調用設計調用設計
貼入貼入 HTML Button (WORDERS)HTML Button (WORDERS) <input id="Button1" type="button" value="Call Method" onclick="serverMethod()"/><input id="Button1" type="button" value="Call Method" onclick="serverMethod()"/>
DataGridDataGrid 中設定中設定 ToolItemsToolItems增加一個增加一個 Icon, OnClick="serverMethod" Text="Average Price"Icon, OnClick="serverMethod" Text="Average Price"
ClientClient 調用設計調用設計Client script: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" + "¶meters=" + row.ProductID, cache: false, async: true, success: function (data) { alert(data); } }); } </script>
權限級別權限級別Login (Users/AD)
Menus (By Users/Groups)
JQSecurity
JQSecurityColumn
InfoCommand.SecStyle
動態權限
JQSecurityJQSecurity 設計設計
貼入 JQSecurity (WORDERS)
設定 Alias, MenuID
執行” Export”, “Add All” 存檔即可以 EEPManager 來設定
( 工程師 , 主檔次檔都無法新增 / 更改 )
JQSecurityColumnJQSecurityColumn 設設計計
貼入 JQSecurityColumn (WORDERS)
設定 BindingObjectID,Columns (Master/Detail各貼一個 , 設定 Ship 開頭的欄位 )
重新設定 JQSecurity, 並執行” Export”
以 EEPManager 來設定 ( 工程師 , 無法顯示及更改 )
RowRow 權限設計權限設計
設定 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)
國家 Combo 設定 OnSelect 設定 FilterCountry function FilterCountry(val) { var obj = $("[comboname='City'].info-combogrid", "#dataFormMaster"); obj.combogrid('setWhere', "Country = '" + val.Country + "'"); }
改善更改直接選縣市的問題$(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 +
"'"); } }); });
多頁簽設計多頁簽設計
貼入 easyui-tabs 的語法 (WORDERS) <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
自定自定 DataFormDataForm
貼入 JQDialog (WORDERS)
設定 DataGrid(Details) 的 EditDailogID
貼入 JQDataForm
設定 JQDataForm 的 RemoteName,TableName
執行 Refresh Schema
設定 Columns ( 補充 ProductID 的 Refval)
設定 ParentObjectID,RelationColumns
設定 JQDailog 的 BindingObjectID,EditMode
WEBWEB 單檔設計單檔設計
加入 EEPWebClient 網站EEP Web Client Wizard (WSingle3) (WCUSTOMERS2)
調整 UpdatePanel 的內容設定 EEPManager
在在 jQueryjQuery 執行執行WEBWEB 表表單單
設定 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:\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