Windows Vista Sidebar Gadgets på 30 minuter #3


För att se alla postningar om Windows Sidebar Gadgets så klickar du här.


Min första Gadget


I sin enklaste form så består en Gadget av en HTML-fil och en manifest-fil som packeteras i en ZIP-fil. Utan dessa två filer så fungerar inte en Gadget. Exempel på en HTML-fil (test.html) kan vara följande:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Test Gadget</title>

<style type="text/css">

body{

width: 130px;

height: 110px;

margin-top:0;

margin-left:0;

margin-right: 0;

margin-bottom: 0;

}

div.myContent{

width: 120px;

height: 100px;

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#666666', EndColorStr='#000000');

border: double 5px #ffffff;

}

p.myText{

font-family: verdana;

font-size: 24px;

font-weight: bold;

color: #ffffff;

text-align: center;

padding: 3px;

}

</style>

</head>

<body>

<div id=”content” class="myContent">

<p class="myText">Test<br />av<br />André</p>

</div>

</body>

</html>


Manifestfilen (gadget.xml) är en XML-fil som exempelvis kan se ut så här:



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

<gadget>

<name>Test</name>

<namespace>Test.Gadget</namespace>

<version>1.0</version>

<author name="André Henriksson, Microsoft AB">

<info url="andre.henriksson@microsoft.com" />

</author>

<copyright>&#169; 2006</copyright>

<description>My first test gadget</description>

<icons>

</icons>

<hosts>

<host name="sidebar">

<base type="HTML" apiVersion="1.0.0" src="test.html" mce_src="test.html" />

<permissions>full</permissions>

<platform minPlatformVersion="0.3" />

</host>

</hosts>

</gadget>



Jag kommer att återkomma till vad de olika delarna i denna manifestfil innebär, men för de flesta så talar ovanstående XML för sig själv... 🙂

För att kunna testa ovanstående Gadget så går du till din lokala Gadget-katalog, hur du hittar dit kan du läsa här. I denna katalog skapar du en ny katalog som exempelvis heter ”test.gadget” och sparar ovanstående filer (test.html och gadget.xml) i denna katalog. Nu kan du genom att lägga till en Gadget till din Sidebar (klicka på plus-tecknet längst upp i Sidebar) som heter ”Test” se resultatet av ovanstående vilket borde likna det som bilden bredvid visar.

Viktigt att komma ihåg gällande HTML-filen är följande:


  • Gadget har ett ungefärligt minimimått på 25x60 pixels (bxh).
  • En Gadget bör inte vara bredare än 130 pixels. Är den det så klipps den av Sidebar.
  • Body-taggen måste ha bredd och höjd specificerade för att synas. Om inte specificerat så ser Gadgeten konstig ut om man har tur, annars syns den inte alls...

Viktigt att komma ihåg gällande manifest-filen är:


  • Den måste döpas till gadget.xml
  • Ska kodas som ”UTF-8” om du t ex använder Notepad

Har du ingen bra editor att använda utan just sitter med Notepad så kan jag rekommendera Visual Web Developer 2005 Express som är en fri att använda, ladda ner här:

http://msdn.microsoft.com/vstudio/express/vwd/

Comments (7)

  1. Tobias says:

    Hej,

    När jag försöker "installera" mina gadgets händer det ingenting, oavsett om jag sparar mina gadgets i mappen med alla default gadgets eller om jag sparar dom i min personliga gadgetmap. Även om man startar om datorn kan man inte välja min eget skapade gadgets. Jag kör Vista Business, tror du det spelar någon roll eller är mitt operativ buggit?

    Tänkte eftersom det funkar fint för dig 😉

    Mvh

    Tobias

  2. Jag har haft detta problem också, för mig så berodde det på att jag öppnat min manifestfil i Notepad och missat att spara ner den i format UTF-8.

    När du väljer "spara som/save as" i Notepad har du möjlighet att välja, default är "ansi" har jag för mig.

    /A

  3. Tobias says:

    Hej,

    UTF-8 var ett fel jag hade gjort, det andra var att jag hade skapat min gadget i en mapp sedan gjorde jag en zip-fil av hela mappen inte bara innehållet i mappen, och det funkar inte! När man installerade minGadget.gadget fick den namnet minGadget.gadget.~0000 Kan vara bra att veta ifall någon mer har samma problem.

    mvh

  4. Bra tips. Om jag inte missminner mig så gjorde jag samma misstag någon gång tidigare, dvs bara zippade katalogen och vips fungerade ingenting.

  5. Min kollega Dag König påpekade att det kunde vara bra att ha ett inlägg som sammanbinder alla olika postningar

  6. Min kollega Dag König påpekade att det kunde vara bra att ha ett inlägg som sammanbinder alla olika postningar

  7. RSS It All says:

    Min kollega Dag König påpekade att det kunde vara bra att ha ett inlägg som sammanbinder alla olika postningar

Skip to main content