指令碼中心指南:ActiveX 控制項

ActiveX 控制項

在您的 HTA 新增簡單的工具列

HTML 應用程式的限制 (不幸 HTA 本身也有限制) 有使用上的限制。由於 HTA 相當依賴 HTML 控制項,要新增功能表列或工具列到您的應用程式並非易事。因此一般人只好在畫面上放一堆沒有圖只有標題的按鈕。雖然這樣也能用,但是有點遜(咱們 Scripting Guy 最重視的就是酷)。

幸好還有 ActiveX 控制項可以在 HTA 裡新增功能表列和/或工具列。有些控制項還挺好用的,不過可能有點複雜。老實說,Scripting Guys 覺得無「懶」不成酷。所以要給各位介紹一個簡單的方法,在 Microsoft Office 內安裝命令按鈕 ActiveX 控制項,來建立工具列 (如果您有 Microsoft Office,就有這個控制項。)雖然這不是全世界最炫的工具列,但是總比 HTML 裡面單調的 <button> 標記好多了吧。下面是一個可以輕鬆建立的工具列範例:

工具列


看吧?還不賴,這些可是真的按鈕,而不是光是圖喔?您可以畫一個類似的工具列,然後將圖片載入 HTA,但是在這些圖片上按一下不會有真的按鈕的效果。沒關係,因為它們確確實實還是按鈕,只不過縮小了些,用圖片代替按鈕標題罷了。

使用 Microsoft Office 命令按鈕控制項

咱們來瞧瞧簡化的範例,裡面的工具列只有一個按鈕:


<html>

<head>
    <title>Toolbar Example</title>
</head>

<Script Language="VBScript">
    Sub Window_Onload
        CommandButton1.Width = 32
        CommandButton1.Height = 32
        CommandButton1.Picture = LoadPicture("c:\scripts\network.bmp")
    End Sub
   
    Sub CommandButton1_Click()
        DataArea.InnerHTML = "You clicked button 1."    
    End Sub
</Script>

<body topmargin="0" rightmargin="0" leftmargin="0">

<table width="100%" border="1" width="100%" bordercolorlight="buttonface" 
bordercolordark="buttonface" style="border-collapse:collapse">
   <tr>
        <td width="100%" bgcolor="buttonface">
            <object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton1"></object>
       </td>
    </tr>
<table>

<p>&nbsp;<p>
<blockquote>

<span id=DataArea></span>

</blockquote>
</body>
</html>


這個 HTA 主要由兩個元件構成:一是包含命令按鈕的表格,二是按下按鈕後用來顯示資訊的 <span>。順便一提,HTA 的邊界設定為左邊、右邊、上方各為 0",以確保我們的表格 (也就是工具列) 能剛好放在 HTA 視窗的左上角,而且表格的列能夠延伸到最右方的邊界。

下面的指令碼會產生一個資料表:


<table width="100%" border="1" width="100%" bordercolorlight="buttonface" 
bordercolordark="buttonface" style="border-collapse:collapse">


您不用擔心 HTML 標記,如果有興趣進一步瞭解各個參數,請參閱 HTML 和 DHTML 參考 (英文)。基本上我們建立了一個橫跨整個 HTA 視窗範圍的表格。表格周圍設定了 1 個像素的邊界 (表格由一行一列構成),然後將邊界色彩設定為 buttonface,和表格儲存格的色彩一樣。這麼設定純粹只是美觀,這樣表格就沒有任何邊線。

接著使用者兩行指令碼,建立一個表格資料列和一個表格儲存格 (前面說過,背景色彩為 buttonface)。


<tr>
<td width="100%" bgcolor="buttonface">


現在終於到了有趣的部分:插入命令按鈕。方法是加入 <object> 標記:

<object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton1"></object>

如您所見,物件標記只需要 classidid 這兩個參數。classid 是一種全域唯一識別碼,告訴作業系統要插入哪個 ActiveX 控制項。可是這個 Classid 很複雜,要記住或輸入根本是強人所難。 沒關係,只要插入命令按鈕和 ID (暱稱) 的執行個體即可。這樣要在指令碼中參考按鈕時,只要使用 ID (CommandButton1) 就可以了,不需要使用 classid (D7053240-CE69-11CD-A777-00DD01143C57)。

表格製作完畢。現在要加入一個名為 DataArea 的 <span>,名符其實,這是一個可來寫入資料的位置 (本文中對「資料」一詞的定義相當寬鬆)。現在 HTA 的內容就準備好了,就是這麼簡單。

剩下來的就是兩個副程式。第一個 Windows_Onload 會在 HTA 載入或更新時自動執行,我們可以在這個副程式內設定命令按鈕的屬性值:


CommandButton1.Width = 32
CommandButton1.Height = 32
CommandButton1.Picture = LoadPicture("c:\scripts\network.bmp")


最有趣的要算最後一行 (我們覺得啦):使用 LoadPicture 方法來指定按鈕的圖片,只要呼叫 LoadPicture 並傳給它一個參數,也就是影像檔案的完整路徑就可以了。Width Height 屬性是以點數來設定,每個點約為1/72英吋。按鈕設定為 32,大小剛好,但可能還需要根據使用圖片大小來調整。

附註:想認識更多的命令按鈕屬性嗎?歡迎查閱 Microsoft Forms 說明檔 (FM20.chm)。這個檔案可能在您安裝 Office 時已經複製到 C:\Program Files\Common Files\Microsoft Shared\VBA\VBA6\1033 資料夾了,如果找不到,可以查閱 Office CD。


第二個副程式是使用者按下命令按鈕時執行的指令碼:


Sub CommandButton1_Click()
    DataArea.InnerHTML = "You clicked button 1."    
End Sub


沒什麼特別的技巧,只不過是按下按鈕後即可連到 DataArea 的 InnerHTML 屬性。跟各位分享一下,<object> 標記內不需要指定任何 onclick 屬性。因為只要按下按鈕,HTA 就會依預設自動搜尋以該按鈕命名的 Click 副程式。

單個按鈕的工具列粉墨登場:

工具列


不好意思,拍照請勿用閃光燈。

聰明的讀者,您可能已經知道怎麼建立多個按鈕的工具列了:只要多插入幾個命令按鈕 ActiveX 控制項的執行個體就可以了 (別忘了每個執行個體要有獨特的 ID,還要在 Window_Onload 副程式設定按鈕屬性)。您還需要建立另一個副程式,在按下按鈕後執行。舉例來說,插入第二個按鈕後要加上這個物件標籤:


<object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton2"></object>


接著將這些指令碼插入 Window_Onload 副程式:


CommandButton2.Width = 32
CommandButton2.Height = 32
CommandButton2.Picture = LoadPicture("c:\scripts\cd.bmp")


最後您要建立一個副程式,在 CommandButton 按下後執行:


Sub CommandButton2_Click()
    DataArea.InnerHTML = "You clicked button 2."    
End Sub


輕輕鬆鬆,就是這麼簡單!

如果您想玩一下,但又不想打字,我們已經替您準備好一個指令碼範例可以複製貼上使用,在 HTA 上建立有四個按鈕的工具列。我們在這個指令碼裡面又附贈一項功能:使用 title 標記替每個按鈕加入工具提示。


<object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton1" 
title="Get network connections information."></object>


只要把滑鼠游標放在 CommandButton 按鈕上,就會跳出一個「Get network connections information」工具提示。 這個密技一定會讓您成為程式界的武林高手。

下列為 HTA 程式碼:


<html>

<head>
    <title>Toolbar Example</title>
</head>

<Script Language="VBScript">

Sub Window_Onload
    CommandButton1.Width = 32
    CommandButton1.Height = 32
    CommandButton1.Picture = LoadPicture("c:\scripts\network.bmp")
    CommandButton2.Width = 32
    CommandButton2.Height = 32
    CommandButton2.Picture = LoadPicture("c:\scripts\cd.bmp")
    CommandButton3.Width = 32
    CommandButton3.Height = 32
    CommandButton3.Picture = LoadPicture("c:\scripts\monitor.bmp")
    CommandButton4.Width = 32
    CommandButton4.Height = 32
    CommandButton4.Picture = LoadPicture("c:\scripts\printer.bmp")
End Sub
    

Sub CommandButton1_Click()
    DataArea.InnerHTML = "You clicked button 1."    
End Sub

Sub CommandButton2_Click()
    DataArea.InnerHTML = "You clicked button 2."    
End Sub

Sub CommandButton3_Click()
    DataArea.InnerHTML = "You clicked button 3."    
End Sub

Sub CommandButton4_Click()
    DataArea.InnerHTML = "You clicked button 4."    
End Sub

</Script>
<body topmargin="0" rightmargin="0" leftmargin="0">

<table width="100%" border="1" width="100%" bordercolorlight="buttonface" 
bordercolordark="buttonface" style="border-collapse:collapse">
    <tr>
        <td width="100%" bgcolor="buttonface">
            <object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton1" 
            title="Get network connections information"></object>
            <object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton2" 
            title="Get CD/DVD drive information" ></object>
            <object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton3" 
            title="Get monitor information" ></object>
            <object classid="clsid:D7053240-CE69-11CD-A777-00DD01143C57" id="CommandButton4" 
            title="Get printer information" ></object>
        </td>
    </tr>
<table>
<p>&nbsp;<p>
<blockquote>
<span id=DataArea></span>
</blockquote>
</body>

</html>


顯示: