WIN7\Vista 邊欄小工具的制作 HelloWorld

      如果你在使用的作業系統是WIN7或者Windows Vista版本，那一定會使用到邊欄小工具。

有一天，有朋友問我這個邊欄小工具是怎麼制作的，我查了一下，這個東西其實分為兩種小工具類型，一種就稱之為“邊欄小工具Sidebar”，還有一個稱之為“SideShow”，而且使用的開發技術也不相同，前者你隻要會一點網頁開發技術即可，後者則需要一定的C++程式設計基礎的。

這裡我們先說說Sidebar的制作過程。

 第一小節，我們說說配置

     在整個邊欄小工具項目的檔案中，必須要一個基本的配置檔案，稱之為“gadget.xml”的檔案，這個檔案決定了程式啟動的方式和程式的屬性内容。下面使用中文的地方我們可以進行修改，當然如果非常熟悉了，就無所謂了。

<?xml version="1.0" encoding="utf-8" ?> 

<gadget> 

  <name>這是程式的名字</name> 

  <namespace>windows.sdk</namespace> 

  <version>程式的版本控制資訊</version> 

  <author name="作者的名字"> 

    <info url="http://作者的通路網站" /> 

    <logo src="作者的Logo.png" /> 

  </author> 

  <copyright>© 作者的版權.</copyright> 

  <description>程式的基本描述</description> 

  <icons> 

    <icon height="48" width="48" src="程式的圖示.png" /> 

  </icons> 

  <hosts> 

    <host name="sidebar"> 

      <base type="HTML" apiVersion="1.0.0" src="程式的入口網頁.html" /> 

      <permissions>Full</permissions> 

      <platform minPlatformVersion="1.0" /> 

      <defaultImage src="預設的程式圖示.png" /> 

    </host> 

  </hosts> 

</gadget> 

讓我們看看這些配置在小工具中是如何顯示的，這是官方的說明圖檔：

<a target="_blank" href="http://blog.51cto.com/attachment/201101/153630281.png"></a>

在這裡我要說明一個關鍵的地方，在編寫的所有文本檔案都必須是以UTF-8的方式進行存儲，切記。

 第二小節，我們開始學習有關Sidebar的标簽

    在Sidebar中有三個基本的标簽，分别是：

    &lt;g:background id="" src=""&gt; : 該标簽表示小工具顯示的背景方式，src是引用的資源，id是辨別符，可以被CSS和JavaScript所控制

  &lt;g:text id=""&gt;&lt;/g:text&gt; : 該标簽表示文本的輸出，可以被CSS和JavaScript所控制

  &lt;g:image id="" src=""&gt;&lt;/g:image&gt; : 該标簽表示圖檔的輸出，相當于&lt;img/&gt;标簽，可以被CSS和JavaScript所控制。

 第三小節，我們開始學習有關Sidebar的腳本代碼（在JavaScript中執行）

    在Sidebar中有關小工具的類稱之為System.Gadget，該類為根類。我們介紹常用的基本類：

    System.Gadget 

    主要方法：

     -settingsUI : 設定顯示“小工具設定”功能的檔案位址

    System.Gadget.Flyout : 該類表示“移出視窗”類，

    主要的屬性有

      -file ： 表示“移出視窗”的資源檔案的位址

     -show： 表示“移出視窗”是否顯示，預設為false

    主要事件有：

     -onHide ： 在隐藏時的事件處理

     -onShow：在顯示時的事件處理

    System.Gadget.Settings : 該類是一個鍵值對的容器，當被初始化時以Session的方式存在。

    主要方法：

     -write(key,value) : 儲存鍵值，這個值應該是一個資料類型，比如boolean的true或false或者int類型

     -read(key) : 傳回鍵值所儲存的值

    -writeString(key,value) : 儲存鍵值，該值是一個字元串

    -readString(key) : 傳回鍵值

 第四小節，我們開始寫一個HelloWorld

   我們看看這個檔案夾的内容結構：  

<a target="_blank" href="http://blog.51cto.com/attachment/201101/171709764.jpg"></a>

編寫之前再次提醒，所有的檔案必須以UTF-8的形式儲存！

第一步：編寫配置部署檔案，gadget.xml

&lt;?xml version="1.0" encoding="utf-8"?&gt; 

    &lt;name&gt;Hello World&lt;/name&gt; 

    &lt;namespace&gt;microsoft.windows&lt;/namespace&gt; 

    &lt;version&gt;1.0.0.0&lt;/version&gt; 

    &lt;author name="Sunspot/博遠緻靜"&gt; 

    &lt;info url="http://sunspot.blog.51cto.com" text="通路我的部落格"/&gt; 

    &lt;/author&gt; 

    &lt;copyright&gt;© 2010&lt;/copyright&gt; 

    &lt;description&gt;一個Sidebar的示範&lt;/description&gt; 

    &lt;icons&gt; 

        &lt;icon height="48" width="48" src="icon.png"/&gt; 

    &lt;/icons&gt; 

    &lt;hosts&gt; 

        &lt;host name="sidebar"&gt; 

          &lt;base type="HTML" apiVersion="1.0.0" src="HelloWorld.html"/&gt; 

          &lt;permissions&gt;Full&lt;/permissions&gt; 

          &lt;platform minPlatformVersion="1.0"/&gt; 

          &lt;defaultImage src="icon.png"/&gt; 

        &lt;/host&gt; 

    &lt;/hosts&gt; 

第二步：編寫HelloWorld.html

&lt;html&gt; 

    &lt;head&gt; 

        &lt;title&gt;HelloWorld&lt;/title&gt; 

        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; 

        &lt;style type="text/css"&gt; 

          body{  

            /*設定主體顯示框的大小，這個需要設定，需注意*/  

            margin:0px;  

            width: 150px;  

            height: 180px;  

          }  

        &lt;/style&gt; 

    &lt;/head&gt; 

    &lt;body&gt; 

        &lt;g:background src="bg.png"&gt; 

            &lt;center&gt; 

                &lt;br/&gt; 

                &lt;g:text&gt;HelloWorld&lt;/g:text&gt;&lt;br/&gt; 

                &lt;g:text&gt;你的使用者名：&lt;/g:text&gt;&lt;br/&gt; 

                &lt;input type="text" name="username" style="width:60px;" id="username"/&gt;&lt;br/&gt; 

                &lt;input type="button" value="Open" onclick="doOpenAction()"/&gt; 

            &lt;/center&gt; 

        &lt;/g:background&gt; 

        &lt;script language="javascript" type="text/javascript" src="gadget.js"&gt;&lt;/script&gt; 

    &lt;/body&gt; 

&lt;/html&gt; 

第三步：編寫gadget.js代碼：

//初始化  

var initHelloWorld = function() {  

    //設定“移出視窗”的檔案  

    System.Gadget.Flyout.file="Flyout.html";  

    //設定“設定視窗”的檔案  

    System.Gadget.settingsUI="SettingsUI.html";  

}  

//執行open按鈕的點選方法  

var doOpenAction = function () {  

    var username = document.getElementById("username");  

    //session中設定使用者名  

    System.Gadget.Settings.writeString("username",username.value);  

    //打開Flyout  

    System.Gadget.Flyout.show=true;  

//執行初始化  

initHelloWorld();  

第四步：編寫Flyout.html

            /*設定移動顯示框的大小，這個需要設定，需注意*/  

            font-size:20px;  

            font-weight:bold;  

    &lt;body&gt;        

        &lt;center&gt; 

            &lt;br/&gt; 

            展開Flyout，使用者名：&lt;br/&gt; 

            &lt;script language="javascript"&gt; 

                document.write(System.Gadget.Settings.readString("username"));  

            &lt;/script&gt; 

        &lt;/center&gt; 

第五步：編寫SettingsUI.html

            /*設定設定顯示框的大小，這個需要設定，需注意*/  

            width: 200px;  

            height: 200px;  

            這是一個設定的顯示視窗。  

第六步：打包

将上述圖檔中的檔案使用WinZip 、7-ZIP 或 WinRAR壓縮為ZIP格式檔案，之後将ZIP檔案的字尾名改為gadget即可。

<a target="_blank" href="http://blog.51cto.com/attachment/201101/170150485.jpg"></a>

第七步：執行程式

輕按兩下HelloWorld.gadget檔案

選擇安裝，之後的小工具顯示為：

《點選Open後出現Flyout的效果》

《點選設定出現的效果》

小工具中的資訊： 

<a href="http://down.51cto.com/data/2357398" target="_blank">附件：http://down.51cto.com/data/2357398</a>

本文轉自 sundunjam 51CTO部落格，原文連結：http://blog.51cto.com/sunspot/473217，如需轉載請自行聯系原作者