大匠之風: 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 縮短了很多重複建立環境的時間。下一回我會介紹選單內容和標題的修改的教學。

和你分享

大匠之風

網頁

2024/03/04

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