第一章 基本概念第一章 基本概念\1-2 EEP2019 JQuery架構

1-2 EEP2019 JQuery架構

 

EEP的基本理念就是包裝常用的元件,讓開發者以屬性填寫的方式,不必寫程式即可完成工作,但由於使用者介面需求與變化很大,往往元件的方式無法達到100%滿足度,甚至有些用戶只有60%滿足度,此時就必須以Code來協助解決,這當然是合理的,但往往開發者在元件與Hard-Coding間會不知所措,到底應該寫在那個事件或時機才能與元件搭配的好,就成了EEP最大的使用障礙。循規蹈矩或對程式開發不太擅長的開發者倒還好,尋求EEP的客服人員往往可以得到可以接受的答案。但是,如果是開發能力較強或主觀性強的開發者,可能就會格格不入,這也是長期以來,EEP不可避免的困擾之一。

為了解決以上的問題,在EEPJQuery規劃之前,嘗試用新的開發模式來克服此困擾,如圖,為傳統EEP WEB元件的設計概念,中間View的設計頁面是透過元件的包裝,連接上共同的DataSource經過WCF.Net RemotingA/P ServerData Model存取資料。此元件透過屬性設定,在執行階段時來決定Render(產生)相對的JS (JavaScript)HTML語法。這種方式的好處就是不用管JS的開發與如何自動產生HTML,開發者可以得到蠻高的開發效率;缺點就是,在開發頁面上有自行設計的HTML要如何與元件產生的HTML相配合呢?或是如果產生的HTMLJS不能滿足需求,要如何增加功能來彌補呢?

http://www.infolight.com.tw/journal/file/BOOK72.files/A1.jpg

 

因此,在元件化之前,我們可使用傳統的Hard-Coding來開發JQuery如何與EEP整合,從頭寫起,也就是說如果在View頁面設計時,完全不用EEP 的元件下,如何只透過JQueryJQuery組件來存取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.jsJDataObject間的接口,開發者在開發網頁時是以JQuery來呼叫Infolight.js,然後Infolight.js再透過JDataHandle.ashx來執行JDataObject的方法。

Infolight.js:此為EEP JQuery的共用Utility,這裡的JS都是共用的,如提供了寫好的CRUD (Create/Read/Update/Delete)的公用程式,你只要以JQuery的語法呼叫這些程式即可自動反應到後端的A/P Server上,也可選擇是一筆存一次還是一次多筆異動後再一起存檔;為了讓開發者更方便,可以少寫更多的JSInfolight.js也提供了共用的Default(預設)Validate(檢核)方案,並可以直接呼叫網頁Code-BehindC#VB語法。

這樣的好處是,你可以自由的以HTML加上JQuery的語法來設計網頁,完全不必受限於EEP的前端元件,又可以享受EEP A/P Server強大的資料處理與管理功能,可以與成熟的EEP Workflow Foundation整合在一起。後面的文章中,我們會刻意以兩種方案來配合使用EEP JQuery的開發方式,一個使用乾淨的JQuery Mobile來開發介面,另一個使用EasyUIJQuery組件來配合開發,除了前者因為沒有組件所以需要較多的Hard-Coding JQuery之外,後者使用EasyUI幾乎沒有甚麼Code可以寫,都在定義一些參數而已,很多JSCode都可以被歸納到 Infolight.js。總之,用這種方式,就沒有UI限制的問題,過程中EEP沒有封裝與Render,會按開發者原汁(JS)原味(HTML)去呈現,即所謂戲法人人會變,巧妙各有不同,這就得大家各憑本事囉。


 

Top of Page