DevExtreme DataGrid Demo with DataSnap Server 2/2

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

隨著行動平台的使用人數提高，漸漸也就有了跨平台的需求。

商城上架費太貴、各平台開發的眉眉角角太多。

說白了就是想一套產品通吃各平台。

能滿足所有條件的只有 Web 了！

其實 Web 的水更深，箇中奧妙待日後細說。（笑）

上回提到 DataSnap REST Server 可以提取跨網站資料。

這篇有幾個目標：

• 利用 Browser 的 Debug 功能查出前台使用的資料格式
• 將檔案移殖到自機
• DataSnap 和 Demo 的結合

 利用 Browser 的 Debug 功能查出前台使用的資料格式

由上圖可知會從 API：Orders 會下載所有表單的JSON內容，在複製回應內容並整理後取出解析完成的 Demo JSON。

 

將檔案移殖到自機

解析完成後的資料就在 Delphi 裡建立一個新的檔案。

取名為【Orders.js】

DataSnap 和 Demo 的結合

後端：

從 DevExtreme DataGrid Demo 程式碼的內容可以得知程式會取得【data】節點的資料。

接下來，在後端的 DataSnap REST Server 裡增加【Orders】函式模擬 DevExpress 的 API。

TStreamReader 由 TTextReader 繼承而來，從 2010 開始存在，從 .NET 借鏡而生的物件，相當易用。

 寫好後即可使用 Browser 進行測試。

 前端：

DataGrid Demo 在 Load 段的程式

 會用到 sendRequest 取得資料

 可以看到這裡面都用 jQuery.ajax 向後端取得資料。

由於 JavaScript DataSnap framework 把 Ajax 良好地封裝在物件裡，所以只需要小小的修改一下。

再置換成向 DataSnap REST Server 呼叫的 Function 即可。參數是給原來的程式使用，DS不會使用到這些參數。

來看看程式是否順利運作吧！

從紅框處可以看到 JavaScript DataSnap framework：

1. 和 jQuery 搭配得很好。
2. 和後端 DataSnap REST Server 取得資料無障礙。
3. DataSnap將Ajax封裝在物件中，可讓程式碼大幅縮減，學習和應用皆宜。

結論：

從這篇文章中可以知道 JavaScript DataSnap framework 專注的地方在 Ajax 上面，和 DataSnap REST Server 能緊密結合外，更能和現代 JS 框架相容。

如果有設計Web的需求，則 DataSnap 是個值得考慮的後端框架！



本篇文章所用到的程式在此。


See also：

• JSON Editor Online