Google Desktop(桌面)gadget 的基本架構、安裝

這個小範例,讓我們瞭解到 Google Desktop gadget 的基本架構、安裝。

以下資料,都來自官方網站 -- http://code.google.com/intl/de-DE/apis/desktop/docs/Tutorials/ModifyHelloWorld/index.html

若有疑義或個人解釋錯誤,應以官方文件為準
 

 

1.  先下載 Google Desktop(桌面),並且安裝  http://desktop.google.com/

      (以下範例,均來自Google Desktop的 SDK,由此下載)

       

      必須先安裝了Google Desktop之後,我們才能安裝這些小工具(名為 gadget。 大約是唸作「ㄍㄟ居特」)

      這些 gadgets是大家寫好分享出來的。  Yahoo 與 Windows VISTA(預設安裝完成就會有)都有在推這東西

 

 

2.  在您解壓縮之後, SDK的目錄下  api/samples/gadgets/HelloWorld 目錄裡面,可以找到原始檔

      先瞭解幾個重要的檔案,各有什麼功能之後,就會進入狀況了 

File NameTypeDescription
en/strings.xmlXML fileDefines strings used by the default, English version of this gadget. To define the "Hello World!" string that this gadget displays, en/strings.xml uses the following code:

<HELLO_WORLD>Hello World!</HELLO_WORLD>
.

  註解:各國語言包,也是一個XML File. 放在 en目錄下表示這是英文。

background.pngimageThe background of the gadget. Using a PNG image lets this gadget be transparent — whatever's underneath the gadget onscreen is visible through the gadget's corners and shadow.
gadget.gmanifestGoogle Desktop manifest fileSpecifies the gadget's metadata, such as its ID, version, minimum Google Desktop version, name, and description.  註解:安裝程式,也是一個XML File.
icon_large.gifimageA 32x32-pixel icon associated with the gadget.
icon_small.pngimageA 24x24 version of the gadget's icon, with transparency.
main.jsJavaScript source fileImplements a click-handling function.  註解:搭配主程式的JavaScript程式
main.xmlXML fileDefines the gadget's appearance and specifies which function handles clicks.   註解:主程式

 

main.xml 內容如下:

      各位可以稍微留意一下, main.xml裡面很類似html的表單元件(<form> / DOM),但又不太一樣。

      這一點要請各位留意(我在文章的最後,會補上)。

1 <view width="250" height="150">
2   <script src="main.js" />
3  
4   <img src="background.png" />
5   <label x="0" y="60" align="center" width="250" size="15" enabled="true"
6     onclick="onTextClick();">&HELLO_WORLD;</label>
7 </view>

不過,這裡有一點要特別提醒大家。

因為 gadget的主程式 main.xml是一個 .xml檔案。

      所以請不要在這裡寫註解、也不要把 JavaScript寫在這個 .xml檔案裡面。

套句 .NET的話來說:不要再把程式跟<tag>混寫在同一個檔案內啦!   Inline Code落伍啦

      請愛用「畫面與程式」分成兩個獨立檔案的Code Behind(後置程式碼)的方式,來進行開發~~

 

 

 

      各位可以發現,主程式 main.xml有一個「後置程式碼」(Code Behind)......Sorry! 小弟受到微軟ASP.NET的毒害太深

      名為 main.js,這是一個典型的 JavaScript  內容如下:

1 function onTextClick() {
2   view.alert(HELLO_WORLD);
3 }

       JavaScript程式裡面,一開始的 view,就是主程式(main.xml) 最外圍的那個 <view>

 

 

完成了,就是這麼簡單。

接下來,用滑鼠雙擊 gadget.gmanifest檔案,就會把這個 HelloWorld小程式,安裝到 Google Desktop上面了

安裝時,會出現下面的視窗,簡單地提醒您 ----

     

 

 

安裝完成後,我們的 Google Desktop就會出現 HelloWorld這個gadget(如下圖)

     

 

你用滑鼠點選上面的 Hello World,

      就會觸發 OnTextClick() 這個小程式,出現一個Pop-up視窗。

 

................................................................................................................................................................ 

接下來,把這個 HelloWorld小程式,連同 HelloWorld目錄一起壓縮成一個 .zip檔案

然後把副檔名 .zip 修改成 .gg 副檔名

以後,我們在網路上公佈這個 HelloWorld.gg檔案,大家只要用滑鼠雙擊它,就能完成安裝。

 

講完了......

      是不是很簡單呢?

            這個小範例,讓我們瞭解到 Google Desktop gadget 的基本架構、安裝......等等。

=====================================================================

 

補充說明:

You can define the following basicElement descendants:

  • button: Specific properties let you set various images for the button and its various states.
  • checkbox: Specific properties let you set various images for the checkbox and its various states, as well as determining if the box is checked or not. An event fires when the box's checked value changes.
  • object: An embedded windowless ActiveX control. Used primarily for Windows Media Player embedding.
  • contentarea: Contains a collection of contentItems.
  • div: Used to set element background colors or images.
  • edit: Specific properties let you control its text content's appearance and set or retrieve its text content. An event fires when the content changes.
  • img: Specific properties let you set the image to display and get its original dimensions. It also has an image resizing method.
  • label: Specific properties let you control the label text's appearance and position/alignment.
  • a: A link object with specific properties that let you control the link's appearance and its URL.
  • progressBar: Specific properties control the appearance of the progress bar and its components, as well as an event that fires when the value changes.

      這些東西,跟傳統html的 <form>表單與DOM很類似

      幸好以前寫asp與php有接觸過,不用重頭來一次......我們可以透過開發工具來作,請看下一篇文章(Google Desktop gadget的開發工具

 

 

 

 

 

 

 

今日值班正妹: 南韓女星,宋慧喬

           

 

 

 

 

 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學,遠距教學 (Web Form 約 51hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學,遠距教學 (ASP.NET MVC 約 135hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

 

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.tw  或  school (at) mis2000lab.net

 (1) 第一天 ASP.NET MVC5 完整影片(5.5小時 / .NET 4.x版)免費試聽。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片(3小時 / .NET Core 6.0~8.0)免費試聽。影片 https://youtu.be/TSmwpT-Bx4I 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


ASP.NET遠距教學、線上課程(Web Form + MVC)。 第一天課程, "完整" 試聽。 

.........   facebook社團   https://www.facebook.com/mis2000lab   ......................

.........  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 無法下載,請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)。

...................................................................................................................................................... 

ASP.NET MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講   事先錄好的影片,並非上課側錄!   觀看時,有如「一對一」面對面講課