EEP的基本理念就是包裝常用的元件,讓開發者以屬性填寫的方式,不必寫程式即可完成工作,但由於使用者介面需求與變化很大,往往元件的方式無法達到100%滿足度,甚至有些用戶只有60%滿足度,此時就必須以Code來協助解決,這當然是合理的,但往往開發者在元件與Hard-Coding間會不知所措,到底應該寫在那個事件或時機才能與元件搭配的好,就成了EEP最大的使用障礙。循規蹈矩或對程式開發不太擅長的開發者倒還好,尋求EEP的客服人員往往可以得到可以接受的答案。但是,如果是開發能力較強或主觀性強的開發者,可能就會格格不入,這也是長期以來,EEP不可避免的困擾之一。
為了解決以上的問題, 在EEP的jQuery規劃之前,嘗試用新的開發模式來克服此困擾,如圖,為傳統EEP WEB元件的設計概念,中間View的設計頁面是透過元件的包裝,連接上共同的DataSource經過WCF或.Net
Remoting向A/P Server的Data Model存取資料。此元件透過屬性設定,在執行階段時來決定Render(產生)相對的JS
(JavaScript)與HTML語法。這種方式的好處就是不用管JS的開發與如何自動產生HTML,開發者可以得到蠻高的開發效率;缺點就是,在開發頁面上有自行設計的HTML要如何與元件產生的HTML相配合呢?或是如果產生的HTML或JS不能滿足需求,要如何增加功能來彌補呢?
因此,在元件化之前,我們先以傳統的Hard-Coding來開發jQuery如何與EEP整合,從頭寫起,也就是說如果在View頁面設計時,完全不用EEP
的元件下,如何只透過jQuery或jQuery組件來存取EEP後端強大的A/P
Server資源呢?以下,為EEP jQuery的架構圖,說明如下:
JDataObject.cs:這是一個EEP jQuery的底層框架,此用來連結EEP A/P Server的資料存取元件InfoCommand,資料採用無狀態的方式一次取一個Page(以PacketRecord來定義),資料的回寫(Insert/Update/Delete)則連到UpdateComp來處理,為了符合較新的需求,連線通訊協定改採了WCF架構,也提供了A/P
Server上的Server Method(Model端的商業邏輯處理)來讓View可以直接呼叫。
JqDataHandle.ashx:為Infolight.js與JDataObject間的接口,開發者在開發網頁時是以jQuery來呼叫Infolight.js,然後Infolight.js再透過JDataHandle.ashx來執行JDataObject的方法。
Infolight.js:此為EEP jQuery的共用Utility,這裡的JS都是共用的,如提供了寫好的CRUD
(Create/Read/Update/Delete)的公用程式,你只要以jQuery的語法呼叫這些程式即可自動反應到後端的A/P Server上,也可選擇是一筆存一次還是一次多筆異動後再一起存檔;為了讓開發者更方便,可以少寫更多的JS,Infolight.js也提供了共用的Default(預設)與Validate(檢核)方案,並可以直接呼叫網頁Code-Behind的C#或VB語法。
這樣的好處是,你可以自由的以HTML加上jQuery的語法來設計網頁,完全不必受限於EEP的前端元件,又可以享受EEP
A/P Server強大的資料處理與管理功能,可以與成熟的EEP
Workflow Foundation整合在一起。後面的文章中,我們會刻意以兩種方案來配合使用EEP jQuery的開發方式,一個使用乾淨的jQuery Mobile來開發介面,另一個使用EasyUI的jQuery組件來配合開發,除了前者因為沒有組件所以需要較多的Hard-Coding jQuery之外,後者使用EasyUI幾乎沒有甚麼Code可以寫,都在定義一些參數而已,很多JS的Code都可以被歸納到 Infolight.js。總之,用這種方式,就沒有UI限制的問題,過程中EEP沒有封裝與Render,會按開發者原汁(JS)原味(HTML)去呈現,即所謂戲法人人會變,巧妙各有不同,這就得大家各憑本事囉。
Related Topics