PowerPoint 簡報

Download Report

Transcript PowerPoint 簡報 

EEP2012
WEB教學講義
• Andy Kao
課程大綱(一)
進度
第一日
上午
課程內容
EEP慨念 & 設定
Server(Model)設計
70
*下課休息
15
單檔HTML設計
預設與檢驗
60
中午休息
第一日
下午
時間
12:00~13:15
Wizard 單檔設計
預設與檢驗
70
*下課休息
15
多檔關連設計
欄位類型設計
70
*下課休息
10
查詢設計
50
課程大綱(二)
進度
第二日
上午
第二日
下午
課程內容
時間
自動編號與序號
過帳設計
70
*下課休息
15
Server Method設計
50
中午休息
12:00~13:15
權限管理
多國語言
70
*下課休息
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架構
IIS Server
Web Client
EEP
A/P Server
Mobile
Database
Server
aspx
Windows Client
dll
Server Method
Workflow Foundation
dll
jQuery架構與MVC
EEP jQuery特色
架構在標準jQuery之下(v1.7以上)
類似MVC開發模式，分離設計
內建包裝好 EasyUI組件，不用重新開始
提供原生開發模式與元件模式
元件模式可以Wizard快速產生
可自由調用C#與後端的Server Method
支援jQuery Mobile提供行動方案
可整合EEP workflow 引擎
jQuery原生與元件共存
EEP保留開發者的原生開發方式
View設計頁面
Model
(A/P Server)
開發者的JS與
HTML
Workflow Engine
UpdateComp
InfoCommad
Run
jQuery元件
WCF
Remoting
Render
EEP jQuery架構
Runtime網頁
產生相對JS的
Code
產生相對JS的
Code
產生相對的
html
EEP
基礎設定
EEP2012安裝
SETUP EEP2012
initEEP
(InfoRemoteModule,Srvtools)
OPEN Solution1.sln
Export Template
EEPServer.EXE
DB Manager
Create System Table
EEP資料字典
HTML單檔設計
單檔設計
DB Server
A/P Server
IIS Server
DataGrid
select
Database
InfoCommand
dump
Get Columns
Insert/Update/Delete
Binding
UpdateComp
HTML
Infolight.js
Binding
Insert/Update/Delete
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" infolightoptions="field:'CustomerID',condition:'%',dataType:'string'"></td>
</tr><tr><td>客戶名稱:</td>
<td><input type="text" name="id" id="Text1" infolightoptions="field:'CompanyName',condition:'%',dataType:'string'"></td>
</tr><tr><td>連絡人:</td>
<td><input type="text" name="id" id="Text2" infolightoptions="field:'ContactName',condition:'%',dataType:'string'"></td>
</tr><tr><td>訂單日期:</td>
<td><input type="text" name="id" id="Text3" infolightoptions="field:'LastOrderedDate',condition:'>=',dataType:'date'"></td>
<td>至</td>
<td><input type="text" name="id" id="Text4" infolightoptions="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" dataoptions="required:true"></input></td></tr>
<tr><td>公司名稱:</td><td><input class="easyui-validatebox" type="text" infolightoptions="field:'CompanyName',form:'ff'" name="CompanyName"
></input></td></tr>
<tr><td>連絡人:</td><td><input class="easyui-validatebox" type="text" infolightoptions="field:'ContactName',form:'ff'" name="ContactName"></input></td></tr>
<tr><td>職稱:</td><td><input class="easyui-validatebox" type="text" infolightoptions="field:'ContactTitle',form:'ff'" name="ContactTitle"></input></td></tr>
<tr><td>地址:</td><td><input class="easyui-validatebox" type="text" infolightoptions="field:'Address',form:'ff'" name="Address"></input></td></tr>
<tr><td>城市:</td><td><input class="easyui-validatebox" type="text" infolightoptions="field:'City',form:'ff'" name="City"></input></td></tr>
<tr><td>區域:</td><td><input class="easyui-validatebox" type="text" infolightoptions="field:'Region',form:'ff'" name="Region"></input></td></tr>
<tr><td>建檔日期:</td><td><input class="easyui-validatebox" type="text" infolightoptions="field:'LastOrderedDate',form:'ff'"
name="LastOrderedDate"></input></td></tr>
開窗編輯的模式
設定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"
聯絡人:
data-options="required:true"
Wizard單檔設計
Wizard單檔設計一
使用EEP jQuery Wizard
選擇 jQuerySingle1設計產品資料(WPRODUCT)
查詢設計
DataGrid中填入Query欄位
使用QueryAutoColumn功能
Wizard單檔設計二
使用EEP jQuery Wizard
選擇 jQuerySingle2設計員工資料(WEMPLOYEE)
預設與檢核
Default元件處理
<script>
function getaddress() {
return '新北市';
}
</script>
設定 JQDefault元件
到職日(HireDate): _TODAY
國家(Country): 中華民國
地址(Address): DefaultMethod=getaddress (Client)
JS的Debug
在IE中, 按下<F12>
選擇”指令碼”的”檢視原始檔”
設定中斷點, 按下”開始偵錯”
Validate元件處理
設定 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;
}
Remote端Debug
在IE查看WebDevServer的Port No.
在VS執行”偵錯/附加至程序”
選擇 WebDev.WebServer的ASP.NET程序
設定中斷點, 進入Debug模式。
Dialog變換
Switch模式
Expand模式
Continue模式
多檔關連設計
多檔關連設計
IIS Server
dump
Infolight.js
Master
InfoCommand
Insert/Update/
Delete
Binding
DB Server
A/P Server
select
Insert/Update/
Delete
InfoDataSource
UpdateComp
Detail
InfoCommand
Relation
UpdateComp
Master DataGrid
Detail DataGrid
Database
Insert/Update/
Delete
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設計
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原理
DB Server
Database
select
A/P Server
InfoCommand
Active
Insert/Delete/Update
UpdateComp
Update (inc/dec/replace)
Apply
Client
InfoDataSet
Trans Mode:
AutoAppend
Exception
Ignore
AlwaysAppend
Transaction的實例
Orders
DB Server
A/P Server
select
Customers
Insert/Delete/Update
Master
InfoCommand
Client
Active
Master
UpdateComp
Inc OrderedAmout
Replace
LastOrderedDate
Order Details
select
Apply
Detail
InfoCommand
Insert/Delete/Update
Inc UnitsOnOrder
Detail
Replace
UpdateComp
LastOrderedPrice
Master
CDS
Apply
Detail
CDS
Products
Transaction設計
Orders Transaction : Customers
OrderDate Replace LastOrderedDate
Order Details Transaction: Products
UnitPrice Replace LastUnitPrice
Quantity Inc UnitsOnOrder
Server Method
設計
Server Method原理
DB Server
iiS Server
A/P Server
Call
Database
ServiceManager
Aspx Code
select
Server Method1
……
Remote Call
Server Method2
……
Browser
Server Method3
……
InfoCommand
JS Call
Server Method4
…..
Update
Server Method設計
設計Server Method: (SORDERS)
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)
<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";
進階設計
多級選單
改善更改直接選縣市的問題
$(document).ready(function () {
$("#dataFormMaster").form({
onLoadSuccess: function () {
var obj = $("[comboname='Country'].infocombobox", "#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)
<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:\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