外接式大腦: Windows Sidebar Gadget 初探

本文以一個簡單的 Hello World 範例，描述如何開發及安裝、顯示一個基本的桌面小工具，原文網址為http://msdn.microsoft.com/en-us/library/bb456468(VS.85).aspx，因為我的英文程度有限，說不上是翻譯，頂多算是我的經驗分享，若有辭不達意的地方，請多多海涵或是前往原文處瀏覽原文。

簡介
文件
步驟
範例

簡介

桌面小工具 ( Gadget ) 是一個基於 HTML 和 Script 的輕量級應用程式，它可從各種來源取得資訊或功能服務，例如本機的應用程式和控制項、或者網站和網路服務。有設計網頁經驗的開發人員將會發現，開發桌面小工具的步驟會是您非常熟悉的。

文件

一個基本的桌面小工具只需包含以下二個文件：

Gadget.xml

name.html

注意：強力建議，所有用於桌面小工具的文字格式檔案都請使用 UTF-8 編碼格式存檔！
事實上，真正具有實際功能的桌面小工具內容並不只有以上二個檔案，這裡僅僅是示範一個最簡單的 Hello World 而已

步驟

一般來說，開發一個桌面小工具的步驟為：

將所有桌面小工具需用到的文件放入一個開發用的資料夾

%USERPROFILE%\AppData\Local\Microsoft\Windows Sidebar\Gadgets\ ( 登入使用者 )
%SYSTEM_ROOT%\Program Files\Windows Sidebar\Gadgets\ ( 所有使用者)

建立 Gadget.xml

  <?xml version="1.0" encoding="utf-8" ?>
 <gadget>
    <name>Hello World</name>
    <version>1.0.0.0</version>
    <hosts>
      <host name="sidebar">
        <base type="HTML" apiVersion="1.0.0" src="HelloWorld.html" />
        <permissions>Full</permissions>
        <platform minPlatformVersion="1.0" />
      </host>
    </hosts>
 </gadget>

建立 name.html ，name 必須和 gadget.xml 中 src 設定的檔名相同，如上例就是 HelloWorld.html

 
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=Unicode" />
  </head>
    
  <body>
    <div id="gadgetContent">
    </div>
    </body>
</html>

如果需要，可以把此桌面小工具先安裝起來

開始

所有程式

桌面小工具庫

測試和修正

範例
以下就是本文的主角，HelloWorld 的範例，您可以使用任何您熟悉的編輯器編輯原始碼，在開發過程中，您可能會遇到被拒絕存取系統資料夾的提示，那麼在執行編輯器時請使用以系統管理員的身份執行此程式選項。

建立 HelloWorld.html

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
  <title>Hello World</title>
  <style type="text/css">
  body
  {
   margin: 0;
   color:#FFF;
   width: 130px;
   height: 75px;
   font-family: verdana;
   font-weight: bold;
   font-size: 20px;
  }
  #gadgetContent
  {
   margin-top: 20px;
   width: 130px;
   vertical-align: middle;
   text-align: center;
   overflow: hidden;
  }
  </style>
  <script type="text/jscript" language="jscript">
   // Initialize the gadget.
   function init()
   {
    var oBackground = document.getElementById("imgBackground");
    oBackground.src = "url(images/background.png)";
   }
  </script>
 </head>
 
 <body onload="init()">
  <g:background id="imgBackground">
   <span id="gadgetContent">Hello World!</span>
        </g:background>
    </body>

新建一個子目錄名稱為 images
製作一張寬至少為 130px X 高 75px 的背景圖，放到 images 目錄內，例：

建立 gadget.xml

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
 <name>SDK Hello World</name>
 <version>1.0.0.0</version>
 <author name="Microsoft">
 <info url="msdn.microsoft.com" />
 </author>
  
 <copyright>© Microsoft Corporation.</copyright>
 <description>"HelloWorld" Sidebar gadget sample.</description>
 <icons>
 <icon height="64" width="64" src="icon.png"/>
 </icons>
 <hosts>
  <host name="sidebar">
   <base type="HTML" apiVersion="1.0.0" src="HelloWorld.html" />
   <permissions>Full</permissions>
   <platform minPlatformVersion="1.0" />
  </host>
 </hosts>
 </gadget>

製作桌面小工具的 Icon

完成後，再開啟桌面小工具庫，就可以看到我們的範例完成了

將它新增，看看效果如何

外接式大腦

2010年12月4日星期六

Windows Sidebar Gadget 初探

簡介

文件

步驟

沒有留言:

張貼留言

2010年12月4日 星期六

Windows Sidebar Gadget 初探

簡介

文件

步驟

沒有留言:

張貼留言

2010年12月4日星期六