Hey, Scripting Guy!: In Scripts, as in Life, Looks Are Important

發行項
08/17/2016

嗨，Scripting Guy！指令碼世界和現實生活一樣，外觀很重要

Microsoft Scripting Guy

數百年來，其實應該說數千年來，哲學家和聖人們都一直告訴我們，「人不可貌相」(雖說我們不該對他人有成見，但話又說回來，「情人眼裡出西施」，所以還是要看一下吧)。您應該聽過這句話：「真正的美麗發自於內心，而非外觀，所以您所活出的模樣比外貌更重要」。

對於這樣的說法，Scripting Guy 只能加一句：「廢話連篇」。

沒錯，就是廢話連篇。Scripting Guy 應該是第一個承認在完美的世界裡外貌沒有任何影響力的人。但是，我們不是住在一個完美的世界裡。如果是的話，炸薯條和巧克力聖代就會成為兩種主要的食品類別。無論您是否同意，外貌還是很重要。這對於指令碼也是一樣。

Scripting Guy 其實知道有少數人看到 VBScript 指令碼正在命令視窗中執行時，會喜極而泣 (至少 Scripting Guy Dean Tsaltas 就是這樣的人，目前我們名單上只有他)。

另一方面，在當下的數位時代，指令碼撰寫者們的作品已不再限於命令視窗中執行了。由於有了 HTML 應用程式 (HTML Application，HTA)，指令碼撰寫者們可以利用 DHTML 的威力，來建立指令碼的圖形使用者介面 (GUI)。這樣的 HTML 技能還可以用來建立 Windows Vista™ 小工具，如此的彈性甚至可能革新系統管理指令碼的世界。但是，您知道嗎？一旦您開始談論 GUI，所有勸導大家不要以貌取人的美德都將成為廢話。因為在圖形環境中執行的指令碼，外觀與功能和效能一樣重要。

而這是一大問題。再怎麼說，我們也只是指令碼撰寫者，我們哪會知道如何建立圖形使用者介面呢？看來我們是否又陷入困境了？

也許是，也許不是喔。剛剛是不是有人說，「還好有 Scripting Guy！」？

我真的好像有聽到耶。明明就有人說這樣的話，沒有嗎？也許是有人以自言自語的方式說的...

好啦，反正不重要。理當有人會這樣說，因為畢竟 Scripting Guy 就是要為大家提供協助的嘛 (無論您是否想要我們的協助)。

為了讓您初步了解 GUI 世界的美妙，讓我們先看看一個簡單的 HTA (如果您想要建立 HTA 的詳細資訊，請參閱 HTA 開發人員中心)。

[圖 1] 中所顯示的，就是一個花俏的桌面資訊系統。如您所見，我們首先將一個圖形放置在 HTA 視窗中的右上角。目的是要在 HTA 載入時，擷取登入的使用者名稱，然後將他/她的名字和電腦名稱顯示在此影像的上方。稍後我們會在 HTA 中加入各種酷炫的內容，但就像他們說的，凡事不要操之過急，讓我們一步一步來。

圖 1 美美的 HTA 圖形介面的形成

圖 1** 美美的 HTA 圖形介面的形成 **

其實我們也不確定說這些話的「他們」是誰。可能又是一位哲學家。可能是伏爾泰吧。反正聽起來就像是哲學家會說的話嘛。

沒錯，這只是一個小小的應用程式，而且其...美貌...目前可能連 Scripting Guy Dean 都還無法打動。然而，這是一個好用的示範工具，其中的基本概念適用於很多情形。畢竟許多令人嘆為觀止的 Windows Vista 小工具都採用類似的作用原理；他們都只是顯示一個耀眼的圖形 (例如儀表或刻度盤)，然後在該圖形上撰寫文字。如此一來，您看到就好像一個很酷炫的可用磁碟空間儀表，但是事實上只是動態文字重疊顯示於一個圖形上面。

是呀，我們也聽不太懂以上的敘述。但是本專欄後續會進一步說明。

對於顯示圖形然後在圖形上面重疊顯示文字的觀念，只有一個問題：行不通。若改用 HTML 標記，我們會得到如 [圖 2] 所示的結果。跟我們想像的不太一樣。或許當 Nietzsche 說：「人類永遠無法把文字重疊顯示在圖形之上，至少在 HTA 中不可能」時，是對的。

圖 2 首次嘗試重疊顯示文字

圖 2** 首次嘗試重疊顯示文字 **

抑或 Nietzsche 是錯的：我們是不是又聽到有人說...唉，算了。反正我們就是無法使用單純的 HTML 達到想要的效果。當然，理論上我們可以把圖形變成背景圖形，然後使用表格和不分行空格以及各種伎倆，讓文字重疊顯示在圖片上。我們之所以會說「理論上」，是因為除了很陽春的案例以外，這樣的策略是行不通的。

若要在 HTA 或 Windows Vista 小工具中建立耀眼的配置，其實有更好的方法：就是用「階層式樣式表 (Cascading Style Sheets，CSS)」。

CSS 是用來定義字型、邊界、對齊方式、色彩以及其他文件外觀的方法 (這特別適用於網頁，而由於 HTA 和小工具的本質其實就是網頁，所以 CSS 也適用)。發揮 CSS 的可能性不勝枚舉，因此如需完整的詳細資訊，請參閱 MSDN® 上的 Cascading Style Sheets 參考文件。就我們的討論範圍而言，僅需要知道我們可以使用 CSS 來控制 HTA 的配置細節，包括可以重疊顯示一個項目 (我們的文字) 到另一個項目 (我們的圖形) 上。

我們將說明如何完成這一切。但是在我們開始進行說明之前，讓我們先看看一個簡單 HTA 的程式碼，如 [圖 3] 所示。

Figure 3 最後的指令碼結果...

<SCRIPT LANGUAGE=”VBScript”>

Sub Window_OnLoad
 Set objNetwork = CreateObject(“Wscript.Network”)

 strUser = objNetwork.UserDomain & “\” & objNetwork.UserName
 strComputer= objNetwork.ComputerName

 UserData.InnerHTML = “<p align = ‘center’> “ & _
 “<font style=’font-size:18pt;color:white’>” & _
 strUser & “<br>” & strComputer & “</font></p>”
End Sub

</SCRIPT>

<img src=“test2.jpg“ align=“right“>
<span id=UserData style=“position:absolute;left:770px;top:150px“></span>

如您所見，這其實沒什麼。其中有一個 Window_OnLoad 副常式 (顧名思義)，這會在每一次 HTA 重新整理時自動執行。我們稍後會討論這個副常式。此外，我們還有兩個 HTML 項目：我們的圖形項目和一個 Span 項目。相信您一定看得出來，這些標記是用來插入圖形，其中使用 Align 屬性來確保圖片顯示在視窗的右手邊：

<img src=”test2.jpg” align=”right”>

接下來就是 Span 的 HTML 標記：

<span id=UserData style=”position:absolute;
left:770px;top:150px”></span>

是的，我們在此處用了 Span 的標記。Span 標記到底是啥？說穿了，其實 Span 只是 HTA 的一個命名區域；也就是在 HTA 視窗中，一個可以透過程式設計的方式是別的「標記」區段 (因為我們已將 Span 的 ID 命名為 UserData)。設定 Span 之後，就可以撰寫副常式來指定文字或 HTML 程式碼給該 Span。事實上，我們已經在 HTA 中這麼做。

然而，我們還是要稍後再來討論這一點。在此之前，我們需要先看看 Span 標記中所加入的 Style 參數：

style=”position:absolute;left:770px;top:150px”

此參數正是把動態文字重疊顯示在圖形上方的關鍵。我們在此處指定了三個 Style (樣式) 屬性。

Position (位置) 我們告訴 HTA 我們的 Span 位置要採用絕對的配置。這代表我們要 Span 永遠在同一個位置上，即使文字會重疊顯示在另一個項目 (例如圖形) 之上。

Left (左邊界) 這是在指定 Span 的位置與 HTA 視窗之最左邊緣的相對位置。在此案例中，我們希望 Span 的區域是從最左邊緣算起，往右 770 個像素 (770px) 的地方開始。

Top (上邊界) 此設定與 Left 屬性很類似，但這是在定義 Span 的位置與 HTA 視窗之頂端邊緣的相對位置。在此案例中，我們希望 Span 的區域是從頂端邊緣算起，往下 150 個像素 (150px) 的地方開始。

您是否要問，我們是如何知道要將 Span 的左邊設定在 770 個像素，而將頂端設定在 150 個像素？老實說，我們並沒有用什麼秘訣，而是用猜測的；我們只是將圖形放置到頁面上，然後指定 Span 的 Left 和 Top 屬性值。接著我們開啟 HTA 來查看結果。可想而知，一開始我們的設定會有些偏差，於是我們調整設定值，重新整理 HTA，然後再查看一次。調整數次之後，就像《三隻小熊與金髮女孩 (Goldilocks)》的故事一樣，我們反覆實驗就找出了理想的設定值。

注意：您應該知道三隻小熊與金髮女孩的三個床、三個椅子，以及三碗太熱或太冷的麥片等故事吧。其實我們不確定 Goldilocks 這一位金髮女孩是否可稱為知名的哲學家。至少您可以說，這一位女孩會擅自闖入他人的房子、試吃他們的麥片、試坐他們的椅子，以及試睡他們的床鋪，應該有她獨特的生活哲學吧。

反正 [圖 4] 顯示我們的 HTA 現在的樣貌。雖然這稱不上是藝術品，但是您要知道，連畢卡索也無法以程式設計的方式將文字資訊重疊顯示在圖形的上面呀。

圖 4 樣式定義的威力

圖 4** 樣式定義的威力 **

說到這裡，我們到底是如何以程式設計的方式，讓文字重疊顯示在圖形的上方？您期盼已久的好消息來了：我們終於要討論 Window_OnLoad 副常式了，如 [圖 5] 所示。

Figure 5 Window_OnLoad 副常式

Sub Window_OnLoad
 Set objNetwork = CreateObject(“Wscript.Network”)

 strUser = objNetwork.UserDomain & “\” & objNetwork.UserName
 strComputer= objNetwork.ComputerName

 UserData.InnerHTML = “<p align = ‘center’> “ & _
  “<font style=’font-size:18pt;color:white’>” & _
  strUser & “<br>” & strComputer & “</font></p>”
End Sub

您知道嗎，仔細看一下此副常式之後，我們發現根本沒有什麼需要討論的耶，同意吧？如您所見，我們首先建立了 Wscript.Network 物件的執行個體。然後我們使用下列程式碼，來擷取使用者名稱和網域以及電腦名稱：

strUser = objNetwork.UserDomain & “\” & _
  objNetwork.UserName
strComputer= objNetwork.ComputerName

這些剛好是我們想要寫入 HTA 視窗中的資訊。我們只需要運用少許 HTML 標記結合 strUser 和 strComputer 變數，然後將結果字串指定給 Span 的 InnerHTML 屬性即可：

UserData.InnerHTML = _
  “<p align = ‘center’> “ & _
  “<font style=’font-size:18pt;color:white’>”_
  & strUser & “<br>” & strComputer & _
  “</font></p>”

是的，我們知道這些程式碼看起來好像很複雜。但事實上不然。看似複雜是因為我們要結合數個項目成為單一字串。首先是一個段落開頭標記，以指定我們要在段落中將文字置中對齊。

“<p align = ‘center’> “

接下來是一個字型 (Font) 開頭標記，以指定我們要使用點數為 18 的白色文字：

“<font style=’font-size:18pt;color:white’>”

strUser 是儲存使用者名稱的變數，格式為 Domain\UserName。"<br>" 則會插入換行符號。我們插入換行符號是為了要讓使用者的名字單獨出現在一行上，然後讓電腦名稱出現在第二行。strComputer 則是儲存電腦名稱的變數。最後，我們個別加上字型和段落的結尾標記：

“</font></p>”

當您查看各個部分，不難發現其實程式碼完全沒有像您想像的那麼複雜。

順便提醒您，針對位置的設定，您可以使用任何 HTML 項目進行配置。例如，假設您想要在圖形下方置中對齊一個按鈕。若要這麼做，只需要將下列加入您的 HTA 程式碼：

<input type=”button” value=”Test Button” style=”position:absolute;left:820px;top:300px”>

這將使您的 HTA 變成如 [圖 6] 所示。

圖 6 美美的按鈕

圖 6** 美美的按鈕 **

再次強調，您必須要反覆試驗，才能夠找到最理想的配置設定，但是應該不需要花費太久的時間。事實上，如果您願意做點數學運算，就可以事先判斷正確的位置設定。您只需要知道每一個物件的寬度和高度 (您可以使用 Style 參數來指定)，以及 HTA 視窗的寬度和高度。根據預設 (至少在 Scripting Guy 的測試用電腦上)，HTA 大約是 1020 個像素寬，乘以 685 個像素高 (當然，實際結果可能會有所不同)。您可以先用這些數據做為起點，然後根據實際需求進行調整。

以上僅為 CSS 的「非常簡略」介紹，但應該足以讓您開始呈現美麗耀眼的指令碼。哲學家們或許會潑您冷水，說您不需要這麼努力，因為指令碼的美應該來自內涵而不是外觀。但是請試想一下：目前最偉大的哲學家們有誰？沒錯：就是柏拉圖、蘇格拉底、亞里斯多德等這些傢伙。確認這一點之後，我們想要提問：您是否看過這些哲學家們的照片？您不覺得整天說外觀的美不重要的這些人，連一張照片都沒有留下來，是一件很有趣的事嗎？您不會覺得這有點詭異嗎？這的確值得深思。

Microsoft Scripting Guy 為 Microsoft 做事，也就是受雇於 Microsoft。在比賽、訓練、看棒球賽 (以及其他各種活動) 之餘，他們也負責管理 TechNet Script Center。請造訪他們的網站 www.scriptingguys.com。

其他資源