FastScript 實現多語言設計

 

作者：吳祐賓

 

 

最近我的程式莫名出現了：EOleSysError: 類別未登錄, ProgID: "MSScriptControl.ScriptControl" 的錯誤訊息。一查才知道原來是 Windows 沒有提供 Microsoft Script Control 64 位元版本，但許多程式會用到 JScript。遇到這難題該怎麼處理呢？ 

 

 

 

使用外掛 Tablacus Script Control 64

 

外國網友 Gaku 提供了好用的 OCX 套件：Tablacus Script Control 64。現有的程式幾乎不用修改就可以使用。缺點是必須要另外安裝。截取官方範例如下：

 

var SC = new ActiveXObject("ScriptControl");
SC.Language = "JScript";
SC.AddObject("WScript", WScript);
SC.AddCode('function fnx(a,b,c){ WScript.Echo(a + ":" + b + ":" + c) }');
SC.Run("fnx", 1, "data2", "data3");

 

使用直譯式工具 FastScript

FastScript 是 FastReport 公司旗下的直譯式跨語言開發套件，可在不開啟程式編譯器的場合下做簡易的程式開發。使用起來也相當簡單。缺點就是 JScript 語言支援度比微軟老舊的 JScript 版本更為受限。

 

procedure TForm2.Button1Click(Sender: TObject);
var
  LfsResult: Variant;
begin
  fsScript1.Clear;
  fsScript1.Parent := fsGlobalUnit;
  fsScript1.SyntaxType := 'JScript';
  fsScript1.Lines.Text := 'function jMethod(a, b){return a+b}';
  if fsScript1.Compile then
  begin
    LfsResult := fsScript1.CallFunction('jMethod',VarArrayOf([1, 1]));
    ShowMessage(LfsResult);
  end;
end;

 

總結

 

兩種解決方案各有優缺點，使用者可根據自身需求進行選擇：

 

若需要使用現有的程式，且對相容性要求較高，採用 Tablacus Script Control 64 外掛可以很快進入狀況

 

若需要快速開發簡易的 JScript 程式，或對相容性要求不高，則可以使用 FastScript 直譯式工具

 

其他注意事項

    使用 Tablacus Script Control 64 外掛時，需注意其版本與 Windows 系統的版本是否相符。
    使用 FastScript 直譯式工具時，需注意其對 JScript 語言的支持程度。



本文介紹了兩種解決 Windows 64 位元系統下使用 JScript 的方案，希望能對相關使用者有所幫助。

 

 和你分享

 

See also

 

• FASTSCRIPT脚本实现多国语言
• Microsoft Script Control 64 bit?
• Tablacus Script Control 64
• FastScript 1.9 Scripting library Developer's manual
• 文首圖片來源：攝影師：Gül Işık: https://www.pexels.com/zh-tw/photo/3957616/ 
  

DevExtreme DataGrid 新手必讀！淺入淺出教學系列

 

作者：吳祐賓

 

 DataGrid，DevExtreme 最重要的元件之一，也是 WinForm 界夢幻逸品 cxGrid 的 Web 化元件。若能精通它，所有元件都能百分百理解！

 

對於初學者而言，DataGrid 可能有些陌生，但它的用途非常廣泛。這篇文章將帶你一窺 DataGrid 的神奇之處，從最基礎的 Array 顯示開始，一路探索至增刪改的高階操作！

 

要進入增刪改階段，可能會遇到一些困難，但不用擔心，我們會一步步解決這些難題。

 

首先，讓我們從新增階段開始。在這篇文章中，將重點放在 DataGrid 屬性 dataSource 和 store 上。dataSource 是一個大容器，可以根據需求的大小進行調整。你可以使用平舖的 Array，也可以使用更複雜的 DataSource 類別實作。不管你遇到什麼樣的需求，DataSource 都能應對自如！

 

如果你覺得講得太難，別擔心！這裡也提供了 DevExtreme 官方文件的 Data Layer Overview，讓你更容易理解。留言下方告訴我，你覺得更容易理解的是哪一種方法！

 

 

本章目標：快速建立可以 CRUD 的 DataGrid 頁面

 

使用簡單的 array 就可以成為 DataGrid 的資料來源，官方很貼心的提供展示用的人事資料(連結在此)。將上一章 "WinForm 設計師的 Web 開發秘訣：DevExtreme 教學" 建立的HelloWorld 頁面，顯示內容的地方置換為 DataGrid，並在 import 區域導入上述的人事資料及 DataGrid 依賴的套件檔，完成後的程式碼應如下內容。

import React from 'react';
import './hello.scss';

import { employees } from './emp';
import {
  DataGrid
} from 'devextreme-react/data-grid';

export default () => (
  <React.Fragment>
    <h2 className={'content-block'}>Hello</h2>
    <DataGrid
      className={'dx-card wide-card'}
      dataSource={employees}
      keyExpr="ID">
    </DataGrid>
  </React.Fragment>
);

 

 

調整顯示欄位

由於欄位數量太多，畫面顯得相當擁擠。所以接下來調整要顯示的欄位內容。

使用 Column 建立自定欄位 

這裡限制僅顯示 FirstName, Position, BirthDate, HireDate 四個欄位。簡單指定欄位時只要填入 <Column dataField={FieldName}></Column> 即可，需要指定型別時再加入 dataType 等屬性，如下表程式碼粗體文字內容。DataGrid allowColumnReordering 屬性則是允許使用者自行調整欄位順序。

...
import { DataGrid, Column } from 'devextreme-react/data-grid';
...
<DataGrid
  className={'dx-card wide-card'}
  dataSource={employees}
  keyExpr="ID"
  allowColumnReordering={true}>
    <Column dataField="FirstName"></Column>
    <Column dataField="Position"></Column>
    <Column
        dataField="BirthDate"
        dataType="date">
    </Column>
    <Column
        dataField="HireDate"
        dataType="date">
    </Column>
</DataGrid>

開啟編輯功能

加入 Editing 標籤，並指定顯示方式為 popup 氣泡顯示模式，並加入 allowUpdating, allowDeleting, allowAdding 及設定為 true。如此就完成第一部份「帶有 CRUD 的 DataGrid」的內容。

import { DataGrid, Column, Editing } from 'devextreme-react/data-grid';
...
<DataGrid>
  <Column>...</Column>
  ...
  <Editing
      mode="popup"
      allowUpdating={true}
      allowDeleting={true}
      allowAdding={true}
  />
</DataGrid>

總結

這篇文章說明 DevExtreme DataGrid 是目前商業套件中最強大的表格工具，面對新手或簡單功能的場合下，在設計上依然容易學習及使用

無論你是新手還是有經驗的開發者，這篇文章都會帶給你全新的視角和啟發。DataGrid 這個元件越研究越有意思，讓我們一起持續消化中！

 

喜歡這篇文章的話，記得分享給更多人哦！

 

 

See also

• DevExtreme React - Data Layer
• React DataGrid - Getting Started
• 【翻譯】建立 DevExtreme React 應用程式
• WinForm 設計師的 Web 開發秘訣：DevExtreme 教學

WinForm 設計師的 Web 開發秘訣：DevExtreme 教學

 

作者：吳祐賓

 

許多 WinForm 設計者都被傳統開發方式所制約，要在短時間內寫出符合桌面、平板、手機通用的畫面實在是非常困難。坊間有許多解決方案，以後端 (Back-End) 設計為主的有：ASP.NET 的 Web Form；Delphi 的 IntraWeb、UniGUI 等他們都是以傳統 WinForm 設計概念所發展的框架，佈局和 UI 元件都已經配置好，設計者只要會操作即可。

 

後端設計很好，但前端仍然要碰

 

後端玩過一陣後，還是覺得以後端為主的 Web 應用程式很沉重，不論是設計還是操作上都是。除此之外，前後端混雜交錯的網頁 (MVC 裡的 V 最明顯) 複雜的程度很高，能接手的大多已是專家級，能交付任務的人選並不多。WinForm 轉 Web 的設計師往往是蠟燭兩頭燒，有沒有更好的作法？

 

前端框架學完才發現只有骨架

 

WinForm 設計者已經習慣邏輯設計，全心學習前端後，我的情況是發現：三大框架 Angular、VUE、React 都只有設計框架，佈局、元件還得另學 HTML、CSS。後台要的格式就那樣，每次都要手刻也太辛苦。而且前端 CSS 佈局難度其實比邏輯更加困難，如果有人可以把 UI 調整一致就能讓我專注在邏輯上了。

 

入門？就從 DevExtreme 開始

 

Bootstrap、EasyUI 都有推 Augular, VUE, React 元件，佈局也沒問題，然而 DevExtreme 還提供了命令列工具，新增頁面、調整配色都可以使用 DevExtreme-CLI 命令列工具完成，這種感覺和操作 Visual Studio Code 的 File > New File 快沒什麼兩樣了。但在這之前請先安裝好 DevExtreme-CLI，如果還沒安裝，請先參閱：【翻譯】建立 DevExtreme React 應用程式 

 

以 DevExtreme + React 為例，建立 Web 應用程式專案

 

使用如下的 DevExtreme-CLI 指令建立 my-hello-world 專案，並以預設值：TypeScript、Outer toolbar Layout 作為開始。建立完成後進入該目錄。

 

devextreme new react-app my-hello-world
cd my-hello-world

建立 HelloWorld 分頁

專案剛建立會有幾張頁面，以方便我們參考。在使用 Visual Studio Code 開啟目錄之前，我們先使用 DevExtreme-CLI 建立一張新頁面，使用指令：

 

devextreme add view HelloWorld

 

接下來啟動 Visual Studio Code， 開啟 my-hello-world 目錄，可以在 Pages 路徑看到剛才建立的 HelloWorld 資料夾，裡面有 HelloWorld.css 和 HelloWorld.tsx 檔案，副檔名 tsx 表示為 支援 TypeScript 的設計檔案。畫面應如下顯示：

 

主菜 -- 建立 Button

 

接在 import 區的最末句，輸入：

import { Button } from 'devextreme-react';

 

把 "Put your content here" 內容置換為 Button 標籤，並設定按下後會跳出 Hello World 的提示訊息：

 

<Button text='Eden Button' onClick={()=>alert("Hello World!")}></Button>

 

此時程式畫面應如下所示：

 

啟動 Hello World 服務，來看成果吧！

 

開啟 Visual Studio Code 的終端機頁面，輸入：

 

npm run start

 

啟動網站後等它一段時間，系統會自動開啟瀏覽器，並開啟我們的 my-hello-world 網站。接下來點擊選單中的 HelloWorld 項目就會看到剛剛我們所建立的頁面，裡面會看到一個按鈕，按下後就會看到 Hello World 的提示訊息。此時畫面效果應該如下所示：

總結

 

習慣 WinForm 體貼的 IDE 工具開發者在切換到指令模式可能剛開始還不習慣。把上述的指令多敲幾次後就會習慣使用 DevExtreme-CLI 的開發模式。

和完全從無到有的鍵盤輸入，DevExtreme-CLI 縮短了很多重複建立環境的時間。下一回我會介紹選單內容和標題的修改的教學。

 

和你分享

 

See also

 

• 【翻譯】建立 DevExtreme React 應用程式
• 文首圖片來源：Pexels 上由 Maria Tyutina 拍攝的相片: https://www.pexels.com/zh-tw/photo/hello-hello-moulding-clay-954599/

SharpDevelop 使用 NuGet 套件管理器，以 Newtonsoft.Json 為例

 

作者：吳祐賓

 

 

在 Delphi 裡寫了轉 Json 超好用的 TDBXJSONToolsHelper 單元後，在 C# 開發工具裡 SharpDevelop 卻沒看到類似的 Json 分析工具，覺得很奇怪，一查才知道 C# 裡的 Json 分析有兩款套件：

 

• Newtonsoft.Json (Dot Net 2 - 4.5.2)
• System.Text.Json (Dot Net 4.7.2 以上)

 

使用 SharpDevelop 有幾個困難，首先是它只支援到 Dot Net 4.5.2，所以只能使用 Newtonsoft.Json。Newtonsoft.Json 也很好，但它卻沒有內建在 Dot Net 4.5 中。所以必須自己另外安裝其套件。最後是 SharpDevelop 並沒有設置 NuGet 套件管理工具，再來是 SharpDevelop 要如何導入這些套件。底下會一步一步帶你做完所有流程。

 

NuGet 套件管理器安裝

 

雖然 SharpDevelop 並沒有像 Visual Studio 內建 NuGet 套件管理器，不過微軟有主動對開發生態系有釋出 NuGet 獨立執行檔，讓任何 Dot Net 工程師都可以享受 NuGet 套件的便利。你可以到 https://www.nuget.org 的下載頁面取得獨立執行檔 -- nuget.exe。

 

 

Newtonsoft.Json 套件使用 NuGet 下載

 

使用 "命令提示字元" 進入 NuGet 檔案目錄，並使用以下指令進行安裝。預設會安裝最新版本。安裝後可以在 NuGet 所在路徑看到 Newtonsoft.Json 目錄出現。

nuget install Newtonsoft.Json

 

 

  

SharpDevelop 導入 Newtonsoft.Json 方法

 

使用 SharpDevelop 開啟你的專案，在 Project 管理視窗點擊滑鼠右鍵，路徑 Add Reference > .NET Assembly Browser > Browse... > Newtonsoft.Json lib 目錄 > Newtonsoft.Json.dll。之後就可以在你的專案使用。

 

 

 

範例程式碼

 

使用一個簡單的 Json 字串並使用 Newtonsoft.Json 套件載入，最後顯示屬性內容 "hello"

 

    void Button1Click(object sender, EventArgs e)
    {
      string json = @"{""name"":""hello""}";
      
      var obj = JsonConvert.DeserializeObject<dynamic>(json);
      var name = obj["name"];
      
      MessageBox.Show("Hello, " + name);
    }

 

總結

微軟為了 Dot NET 生態圈所打造的 NuGet 套件管理器著實好用，就算是 SharpDevelop 也能享受到它的福利，使 Dot NET 開發者不用再為套件一個一個去拜訪其官網，只需要一個 NuGet 就可以整合在一起，這真的太好用！

 

和你分享

 

See also

 

• How to use Nuget in SharpDevelop?
• NuGet.org
• Newtonsoft.com/json
• 文首圖片來源攝影師：Alberta Studios: https://www.pexels.com/zh-tw/photo/9943846/