2019/09/10

DevExtreme DataGrid Demo with DataSnap Server 1/2

DataSnap 是 Delphi Enterprise 中極好用的 framework 之一！


使用 Delphi 開發時大多遇到的都是資料庫應用，而其中 3rd party 最常用的就是 DevExpress 的 cxGrid 元件，導致在開發 Web 平台時也需要無痛移轉，使用者就是愛 cxGrid，所以在平台移轉上困難重重。

而 DevExpress 的明日之星【ExpressWeb Framework】卻早已停止開發！ (已哭)

取而代之的是 ASPx 套件和 純 HTML5 的 DevExtreme framework。(喔氣氣氣氣氣氣！)

ASP.NET 套件試用好一陣子，不僅僅要熟悉 Dx 元件，再加上 ASP.NET C# 技術知識，別忘了還有前端的 HTML / CSS / JavaScript 的知識要學習，一個人的工作量也太大了。



在絕望之餘，才發現 Delphi 新版的 DataSnap 已經內建了 JavaScript framework，使用上也不算太困難，就差在前端 HTML 必須自行開發。

所謂的 JavaScript framework，意謂著前端的功能也必須使用 JavaScript 進行開發，當然也是有優缺點：

缺點：要負擔額外的 HTML 開發成本。

就是要學習和 Delphi 無關的知識，但比起連後端都要額外學習 ASP.NET C# / VB，只須領悟前端技術的學習成本相對較低。

優點：可以完美使用網路上各式各樣的 HTML 元件。

除了 jQuery、Bootstrap 外，也包括這篇文章所要講的 DevExpress  DevExtreme framework。


DataSnap REST Web Application 開發 (限定 Enterprise 以上)





話說前頭！DataSnap 是企業版(Enterprise)以上等級才有包含的框架，Professional 和 Community Edition 無法使用，解決方式可參考這篇。



一切都是從這裡開始，接下來的步驟在 XE 以上各版本都大同小異。



本篇不會用到資料庫元件，TComponent 即可滿足測試需要


按到 Finish 後，畫面應該如下所示：



執行專案，按下【Start】》【Open Browser】，就能看到預設的 DataSnap Server 所產生的首頁。
第一個簡易 DataSnap REST Server 完成！

Copy DevExtreme DataGrid CRUD Online Demo to DataSnap Server

DevExtreme 官方網站的範例可說是越來越完整，還很大方的提供給大家學習，網址在此。
從範例中可以知道 DevExpress.data.CustomStore 能夠設定後端的資料源，復刻的首要任務，便是試著搬到 DataSnap Server 上！

復刻 DataGrid CRUD Demo Action

如果按照先前步驟建立好 DataSnap REST Server，則會在 TWebModule 上會發現【ReverseString】的 TPageProducer 和 TWebActionItem 的蹤影，如下圖：
接著我們如法泡製一份。

這裡的【templates\DataGridCRUD.html】也是以 ReverseString.html 為基底修改。

CDN Services: DevExtreme


除了自帶的 JavaScript DataSnap framework 外，我們還需要加入 DevExteme 的 Library，而 DevExpress 也提供內容傳遞網路（英語：Content Delivery Network或Content Distribution Network，縮寫：CDN --取自維基百科），讓開發者能夠輕鬆使用。



上機測試

到目前為止都只是利用 DevExtreme 服務器為後台，只是使用 DataSnap REST Server 作為跳板，究竟 DataSnap REST Server 是否強大到允許這樣的應用呢？
再使用 F12 Debug 工具進行確認。

看到以上畫面，表示 DataSnap REST Server 功能很完整，能夠和 CDN 搭配使用，如此就能更省 Server 資源了！

本篇文章範例下載。

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)