程式的 UI 一直是我的弱項，長期一直在 Linux 上工作，用的都是命令模式介面，很少要自己去寫 GUI 的東西。Windows 上反而是少寫命令模式的程式，至少會用 QT 或 Excel Form 去拉個簡單的東西出來，改善使用者介面。
讓客戶麻煩，終究會得到報應
最近接了一個案子，是在 Linux 下的一些作業。果不期然，要完成指定的功能，又是要敲一堆指令。本來打算叫案主小心一點照文件打就好了，後來發現連自己都記不住這麼多命令了。
叫客戶下這麼多命令，我想到時還是搞死自己，三不五時來找我說又不能跑了，或命令下錯搞爛整個系統…
就用 WEB 當介面吧
突然靈光一閃，就用 WEB 來當做 UI 吧。在 WWW 剛起來的那幾年，人人都要架個烘培雞，HTML在怎麼樣多少會寫一點。Button, Submit, Hyperlink, Input, Frameset 就可以構成一個堪用的 UI 了。雖然相當的陽春簡陋，但有總是沒有好，而且開發也是相當快速。
WEB UI 畫面
為了往後快速套用，就寫下這篇文章，並留下這個 HTML+CGI (Shelll script) 的框架，以利往後快速套用了。下載檔案請參考文末連結。
|
1 2 3 |
sudo apt-get install busybox tar zvfx ~/web_ui_framework.tar.gz sudo busybox httpd -h public_html/ |
透過上面命令，在Ubuntu內安裝 busybox ，並以busybox使用內建的 web server，就可以來執行起這套框架了。
檔案 / 程式簡易說明
index.html
index.html 利用了過時的 frameset 框架，將畫面分為左邊的 “left” 與右邊的 “mainWindow” 視窗。left 主要是來顯示選單與button，而mainWindow是來顯示結果的。
left 會載入 cgi-bin/mgmt 程式，並且會將 buttons.html 的內容顯示出來。由於left是執行 cgi-bin/mgmt，所於其根目錄是位於 cgi-bin 下面的，這點要注意。
buttons.html
本頁主要是用來呈現畫面左側的選單畫面，裡面包含了
- 一個submit form
- 以Link執行CGI
- 下載文字檔
- 顯示文字檔
- 上傳檔案
- 忙碌動畫
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="zh-tw" http-equiv="Content-Language"> </head> <body> <script type="text/javascript" src=../util.js></script> <!-- 動畫區塊 --> <div id="divLoading" style="color:red;position:absolute;top:400px;left:10px;width:350px;height:50px;z-order=0"> <img src="../wait.gif" style="vertical-align:middle;padding:6px"/> 作業進行中，請稍候！！ </div> <!-- 以form執行CGI --> <table border="1"> <form action="mgmt" method="post"> <input name="extract" type="hidden" value="extract"> <input type="submit" value="以表單按鈕執行CGI"> </form><br> </table><br> <!-- 以URL執行CGI --> <a href=urlcgi target=mainWindow>以URL執行CGI</a> <br> <!-- 下載文字檔而非檢視 --> <a href=../test.txt target=mainWindow download>下載文字檔而非直接顯示</a></font><br> <!-- 檢視文字檔 --> <a href=../test.txt target=mainWindow>檢視文字檔</a> <br> <form action="upload.cgi" enctype="multipart/form-data" method="post" target=mainWindow> 上傳檔案 <input type="file" name="datafile" size="40"> <input type="submit" value="Send"> </form> </body> |
忙碌動畫主要是在 div 區塊內顯示一個動畫，再以另一個 javascript 檔案來控制其顯示與否。這個動畫功能目前測試只能在 Firefox 上執行，Chrome 似忽沒有效果，這就待以後再研究了。
mgmt
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#!/bin/sh print_alert() { echo "<script> alert('$1'); </script>" } read POST_STRING cat "../buttons.html" case "$POST_STRING" in *"extract"*) echo " Do Extrat job" print_alert "This is from form CGI" ;; esac |
mgmt 本質上是一個 shell script的CGI程式，是左側功能選單的主程式，也處理來自 form submit 的要求。而html的程式碼則是，透過 cat ../buttons.html 來達成模組化的檔案區分。
upload.cgi
檔案上傳的處理程式
urlcgi
|
1 2 3 4 5 |
#!/bin/sh echo "Content-type: text/plain;charset=utf-8" echo "" echo "List /bin" ls /bin |
簡易的 shell script CGI 範例，以 hyperlink 的方式來執行。
結語
透過WEB來提供Linux程式簡單的UI，算是一個快速又有彈性的做法，缺點當然就是畫面醜了點。不過以一個工程範例或簡易案子，也算是足夠了 (沒魚蝦也好)。
附件
以 WEB+CGI (Shell Script) 為主體的程式UI框架
Latest Comments