Transcript EEP雲與端體驗班 - 訊光科技系統股份有限公司

EEP 雲與端
體驗課程
訊光科技 / Andy Kao
www.infolight.com.tw
課程大綱
進度
上午
下午
www.infolight.com
課程內容
時間
EEP雲與端開發工具概念
30
啟動帳號/jQuery Web表
單設計
40
*下課休息
10
Mobile表單設計
預設檢核與控制項
60
中午休息
60
jQuery Web多檔設計
Web/Mobile其他設計
60
*下課休息
10
查詢與報表設計
系統發佈
系統文件印表
60
*下課休息
10
Code下載與實體EEP開發
工作流程設計
60
雲與端的時代
雲端時代來臨，我們跟上了嗎？
全球的IT巨擘紛紛搶進，群起『造雲』
林百里說：「我不去藍海，我上雲
端。」(2009)
施崇棠: 全面擁抱雲端 (2012)
www.infolight.com
新興的雲端產業
www.infolight.co
何謂PaaS
Plotform as a Service 平台即服務
介於軟件即服務與基礎設施即服務間
管理雲端基礎設施對客戶端的佈署與維護。
透過工具或程式語言將軟體提供給用戶端。
用戶無需管理與控制雲基礎設施(包含網絡、
服務器、操作系統或存儲)
PaaS 也是 SaaS 模式的一種應用。
www.infolight.com
SaaS的優勢
不用安裝，可立即佈署
方便於適用與租賃
更低的使用與維護成本
維運與行動化更為便利
可隨意擴充，按量計費
避免侵權與盜版
www.infolight.com
SaaS的瓶頸
現有系統無法轉換
服務供應商少發展慢
企業的信任程度
網路的速度
企業IT觀念(技術與投資)
www.infolight.com
EEPCloud功能示意圖
Developer
www.infolight.com
Users
EEPCloud架構圖
www.infolight.com
EEPCloud特色
隨時隨處：SaaS模式，不必安裝，只需要網路
快速的開發：透過Wizard自動化，數分鐘即可完成
所見即所得：以拖拉點選方式來設計頁面
減少溝通：以SA為開發對象，大幅降低溝通成本
80/20法則：80%快速開發，餘20%程式開發擴充
不必編譯：立即設計立即執行，並供多人協同開發
多種體驗：分別提拱Web網頁與Mobile網頁
簡單編程：具有JS與C#簡單程式工具，弭補不足
內建資料庫：提供雲端資料庫，並供轉入轉出功能
系統文件：Table、服務、WEB/Mobile頁面、報表等
虛實共存：虛擬雲端可以實體EEP相互轉換共存
www.infolight.com
EEPCloud & EEP雙向平台
Cloud
Database
DD
Table
System Data
Service
Web Page
Mobile
Local
Database
Developer
www.infolight.com
Report
EEP jQuery/Mobile架構圖
www.infolight.com
EEPCloud
啟動帳號
www.infolight.com.tw
EEPCloud帳號申請/啟動
http://eepcloud.infolight.com
請輸入公司名稱
www.infolight.com
建立資料庫/方案
建立資料庫: TEST
建立方案: SL1,方案1
www.infolight.com
導入資料與D.D.
Import From File
Import From File
www.infolight.com
EEPCloud
Web 頁面設計
www.infolight.com.tw
新增Service (Model)
1.
2.
3.
www.infolight.com
使用Wizard
設定模組名稱(sBASIC)
增加Table進來
新增Web Page
1.
2.
3.
4.
使用Wizard
設定模組名稱與
Template(使用Single2)
選擇Service名稱
選擇View/Master欄位
www.infolight.com
頁面元件與Preview
Preview 預覽成果
表單設計器/元件/屬性
www.infolight.co
頁面/欄位更改
1.
2.
3.
4.
1.
2.
3.
DataGrid拖入欄位
DataForm拖入藍位
用Edit Column來編輯
www.infolight.co
選擇Country
設定Editor為InfoComboBox
設定EditorOptions
設定Items
查詢設計
1.
www.infolight.com
設定DataGrid的
QueryColumns
1.
設定DataGrid的
QueryAutoColumn=True
輸出格式Format設定
1.
2.
聯絡人format : '?OO?????‘
訂單金額Format: C3(含$),
N2(一般)
www.infolight.co
1.
2.
3.
訂單日格式: mm/dd/yyyy,
yyyy-mm-dd
民國年: YYY.mm.dd 或
YY/mm/dd
DataForm編輯模式
Switch模式
Expand模式
Continue模式
www.infolight.co
EEPCloud
Mobile 頁面設計
www.infolight.com.tw
新增Mobile Page
1.
2.
3.
4.
使用Wizard
設定模組名稱Template(使
用MobileSingle2)
選擇Service名稱
選擇View/Master欄位
www.infolight.com
多螢與跨設備
PC & NoteBook & Pad & Phone
Windows & iOS & Andriod
www.infolight.com
Default元件處理
function getcity(){
return '新北市';
}
1.
2.
www.infolight.co
DefaultMaster中Editor Columns
新增 Country=台灣, City=台北市,
HireDate=_TODAY
Validate元件處理
public bool CheckPhone(string
value)
{
if (value[0] >= '0' && value[0]
<= '9') return true;
else return false;
}
1.
2.
3.
www.infolight.co
ValidateMaster中Editor Columns
新增 EmployeeID,FirstName,LastName,設
定CheckNull=True
新增 City,設定Range:A~Z
Mobile欄位元件
Select (Country)
Date (HireDay)
FlipSwitch (FlowFlag)
Refval (Country)
RadioButton (Region)
CheckBox (Region)
Slider (PostCode)
www.infolight.com
EEPCloud
多檔頁面設計
www.infolight.com.tw
新增多檔Server(Model)
1.
2.
3.
4.
www.infolight.co
使用Wizard
設定模組名稱(sORDERS)
增加Table進來
設定Relations
多檔的Web Page
1.
2.
3.
4.
使用Wizard
設定模組名稱與
Template(使用MasterDetail1)
選擇Service(Command)名稱
選擇View/Master/Detail欄
位
www.infolight.co
關連的顯示設定
1.
2.
www.infolight.co
DataGrid.Column中以InfoRefavl來做為
關聯設定對象.
設定RemoteName/DisplayMember/
ValueMember
RefVal設定
1.
2.
www.infolight.co
DataForm.Column中以InfoRefavl來做為
關聯設定對象.
設定RemoteName/DisplayMember/
ValueMember
ColumnMatch設定
1.
2.
www.infolight.co
Refval中設定ColumnMatch
設定多組的SourceFieldName與
TargetFieldName
ComboGrid設定
1.
2.
www.infolight.co
DataForm.Column中以InfoComboGrid
來做為關聯設定對象.
設定RemoteName/DisplayMember/
ValueMember
Master/Detail 多檔處理
1.
2.
3.
4.
www.infolight.co
使用Wizard
設定模組名稱(mORDERS)
增加Table進來
設定Relations
EEPCloud
Web/Mobile其他設計
www.infolight.com.tw
Mobile檔案上傳/圖檔顯示
1.
2.
3.
4.
www.infolight.co
Columns Editor設定為infoFileUpload
設定Filter為jpg|png及UploadFolder為
Files/Photos
設定Format為
Image,Folder:Files/Photos,Height:60
設定Format為 Download,Folder:Files/Photos
GoogleMap整合
System Config/LocalScript要設為False
DataForm.Columns中設定Editor為Map
www.infolight.co
Mobile QRCode顯示
DataGrid.Columns中設定Format為
QRCODE,Size:60
www.infolight.co
EEPCloud
查詢設計
www.infolight.com.tw
查詢設計
1.使用Wizard, Template為Query1
2. 欄位設定客戶/員工/日期
www.infolight.com
加總與其他功能
Total設定(sum/count/max/min/average)
Format: N2(小數兩位+’,’)
Frozen: True (凍結欄位)
Sortable: True(排序)
www.infolight.com
FormatScript的處理
設定 dataGrid的Columns.FormatScript
function colorValue(val, row) {
為colorValue
ret = getFormatValue(val, "N2");
if (val > 100) {
return "<div style=\"color:Red\">" + ret + "</div>";
}
return ret;
}
www.infolight.com
Excel 輸出
1.
2.
3.
www.infolight.com
datagrid的ToolItems新增一Icon
設定 Icon為icon-excel
OnClick為exportGrid
EEPCloud
報表設計
www.infolight.com.tw
Report Wizard
設定Report Name與RemoteName
選擇所要印表的欄位
www.infolight.co
Report 設計器
Header/Detail/Footer 區域
全拖拉報表介面
設定加總值與Format
設定Group群組
www.infolight.co
RDLC 預覽
可輸出到 Excle/ PDF / Word DOC
www.infolight.co
EEPCloud
系統發佈
www.infolight.com.tw
Users/Groups/Menus
使用者
部門/群組
功能權限
www.infolight.co
Web/Mobile的發佈
Menu設定好之後, Run Web或Run Mobile
www.infolight.com
不同方案/資料庫的發佈
Copy或更新對方結構, 可以勾
選是否包含資料
www.infolight.com
Copy或更新對方的Module或Page
系統文件
印表與下載
www.infolight.com.tw
系統文件印表與下載
1.
2.
3.
4.
www.infolight.com
Table Schema
Service (Model)
Web Page
Mobile Page
轉出到VS
實體開發平台
www.infolight.com.tw
轉出到VS實體開發平台
1.
2.
3.
1.
2.
www.infolight.com
Server端Export To VS
WebPage Export To VS
Mobile Export To VS
在VS中加入Project
在WebSite中加入Page與CS
新增Web Page(Wizard)
1.
2.
3.
4.
使用Wizard
設定模組名稱與
Template(使用jQuerySingle2)
選擇Service名稱
選擇View/Master欄位
www.infolight.com
Image的上傳
1.
2.
www.infolight.com
Columns Editor設定為infoFileUpload
設定Filter=jpg|png及
UploadFolder=Files/Photos
Image的顯示
設定Format為
Image,Folder:Files/Photos,Height:80
www.infolight.com
Workflow
應用設計
www.infolight.com.tw
EEP .net WF 架構圖
FLDesignerCore
EEP
Win/Web
Flow
Client
EEPNetServer
WF File (XOML)
EEP WF Activity
(FLTools)
EEP Core
(FLCore)
EEP2006 WF engine
(FLRunTime)
WF runtime engine
EEP
WF
Designer
WF
Designer
Microsoft .net 3.0 / 3.x
www.infolight.com
待辦/經辦/通知/逾時事項
www.infolight.com
企業組織
總經理：
001(Andy)
業務經理：
005(Acer)
行政經理：
002(Jin)
業務：
003(Sara)
006(Sunway)
www.infolight.com
職級/組織別/代理人
不同流程
可以不同
代理人
www.infolight.com
設計一個WF表單
1.
2.
www.infolight.com
在DataForm中設定:IsShowFlowIcon(顯示流程按鈕)
FLOWFILENAME=FL%5cORDERS&NAVMODE=Insert&
FLNAVMODE=Submit
設計一個簡單流程
www.infolight.com
會簽(平行簽核)
貼入
ParallelActivity
貼入
平行處理的活動
www.infolight.com
Q&A
敬請指教
您的支持，我們的動力
www.infolight.com