Ako vytvoriť Sidebar Gadget pre Windows Vista

22. august 2007 · Igor Kulman

V tomto článku si ukážeme, ako vytvárať gadgety pre Windows Vista Sidebar. Tvorba gagdgetov pre Windows Vista Sidebar nie je nič zložité, potrebujete k tomu len základné znalosti HTML, CSS a JavaScriptu

Ako ukážkový gagdet som trošku prepracovanejšiu variáciu na známu tému Hello World, pôjde o gadget, ktorý nám bude ukazovať meniny zo slovenského kalendára.

Všetky užívateľské gagety sú umiestnené v adresári %userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets, kde umiestnime aj ten náš, vytvrote v ňom adresár Meniny.gadget.

Základom každého gadgetu je HTML súbor, ktorý obsahuje vložený CSS štýl a popisuje vizuálnu stránku gagdegut. V našom prípade to bude.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Meniny</title>
<style>
body {
margin: 0px;
background: url("finalBack.png");
color: #000000;
font-family: Verdana,Tahoma,sans-serif;
font-size: 12px;
width: 131px;
height: 116px;
}
#header {
padding:15px; 
}
#meniny {
text-align:center;
font-size:16px;
margin-top:5px;
}
</style>

<script src="meniny.js" type="text/javascript"></script> 
</head>
<body onload="Meniny()">
<div id="header">Meniny má</div> 
<div ID="meniny"></div>
</body>
</html>

Tento súbor nazvite Meniny.html. Ako ste si určite všimli, gadget má rozmery 131x116px a ako pozadie využíva obrázok finalBack.png. Ako obrázok na pozadí je možné použiť výhradne obrázky typu PNG a obsiahnutá priesvitnosť musí byť 100 %.

Gadget ďalej využíva JavaScript meniny.js, z ktorého je funkcia Meniny() volaná ihneď po jeho spustení a zabezpečí vpísanie mena do kontajnera #meniny

Súbor meniny.js pomocou JavaScriptu zistí aktuálny deň a mesiac, z toho vypočíta deň v roku a použije ho ako index do poľa s menami. Meno sa aktualizuje každú hodinu.

function Meniny() {

month = new Date().getMonth()+1;
day = new Date().getDate();
calendar = new Array("Nový rok", "Alexandra", "Daniela", "Drahoslav", "Andrea", "Antónia", "Bohuslava/Róbert", "Severín", "Alexej", "Dáša", "Malvína", "Ernest", "Rastislav", "Radovan", "Dobroslav", "Kristína", "Nataša" ,"Bohdana" ,"Drahomíra" ,"Dalibor" ,"Vincent" ,"Zora" , "Miloš" ,"Timotej" ,"Gejza" ,"Tamara" ,"Bohuš" ,"Alfonz" , "Gašpar" ,"Ema" ,"Emil" , "Tatiana" ,"Erika/Erik" ,"Blažej" ,"Veronika" ,"Agáta" ,"Dorota" , "Vanda" ,"Zoja" ,"Zdenko" ,"Gabriela" ,"Dezider" ,"Perla" , "Arpád" ,"Valentín" ,"Pravoslav" ,"Ida" ,"Miloslava" ,"Jaromír" , "Vlasta" ,"Lívia" ,"Eleonóra" ,"Etela" ,"Roman/Romana" , "Matej" ,"Frederik/Frederika" ,"Viktor" ,"Alexander" , "Zlatica" ,"" , "Albín" ,"Anežka" ,"Bohumil/Bohumila" ,"Kazimír" ,"Fridrich" , "Radoslav/Radoslava" ,"Tomáš/Róbert" ,"Alan/Alana" ,"Františka" , "Branislav/Bruno" ,"Angela/Angelika" ,"Gregor" ,"Vlastimil" , "Matilda" ,"Svetlana" ,"Boleslav" ,"Ľubica" ,"Eduard" ,"Jozef" , "Víťazoslav" ,"Blahoslav" ,"Beňadik" ,"Adrián" ,"Gabriel" , "Marián" ,"Emanuel" ,"Alena" ,"Soňa" ,"Miroslav" ,"Vieroslava" , "Benjamín" , "Hugo" ,"Zita" ,"Richard" ,"Izidor" ,"Miroslava" ,"Irena" , "Zoltán/Róbert" ,"Albert" ,"Milena" ,"Igor" ,"Július" ,"Estera" , "Aleš" ,"Justína" ,"Fedor" ,"Dana/Danica" ,"Rudolf" ,"Valér" , "Jela" ,"Marcel" ,"Ervín" ,"Slavomír" ,"Vojtech" ,"Juraj" , "Marek" ,"Jaroslava" ,"Jaroslav" ,"Jarmila" ,"Lea" , "Anastázia" , "Sviatok práce" ,"Žigmund" ,"Galina" ,"Florián" ,"Lesana/Lesia" ,"Hermína" , "Monika/Róbert" ,"Ingrida" ,"Roland" ,"Viktória" ,"Blažena" , "Pankrác" ,"Servác" ,"Bonifác" ,"Žofia" ,"Svetozár" ,"Gizela" , "Viola" ,"Gertrúda" ,"Bernard" ,"Zina" ,"Júlia/Juliana" , "Želmíra" ,"Ela" ,"Urban" ,"Dušan" ,"Iveta" ,"Viliam" ,"Vilma" , "Ferdinand" ,"Petronela/Petrana" , "Žaneta" ,"Xénia" ,"Karolína" ,"Lenka" ,"Laura" ,"Norbert" , "Róbert" ,"Medard" ,"Stanislava" ,"Margaréta" ,"Dobroslava" , "Zlatko" ,"Anton" ,"Vasil" ,"Vít" ,"Blanka" ,"Adolf" ,"Vratislav" , "Alfréd" ,"Valéria" ,"Alojz" ,"Paulína" ,"Sidónia" ,"Ján" , "Tadeáš" ,"Adriana" ,"Ladislav/Ladislava" ,"Beata" , "Peter/Pavol/Petra" ,"Melánia" , "Diana" ,"Berta" ,"Miloslav" ,"Prokop" ,"" ,"Patrik/Patrícia" , "Oliver" ,"Ivan" ,"Lujza" ,"Amália" ,"Milota" ,"Nina" ,"Margita" , "Kamil" ,"Henrich" ,"Drahomír" ,"Bohuslav" ,"Kamila" ,"Dušana" , "Iľja/Eliáš" ,"Daniel" ,"Magdaléna" ,"Oľga" ,"Vladimír" , "Jakub" ,"Anna/Hana" ,"Božena" ,"Krištof" ,"Marta" ,"Libuša" , "Ignác" , "Božidara" ,"Gustáv" ,"Jerguš" ,"Dominik/Dominika" ,"Hortenzia" , "Jozefína" ,"Štefánia" ,"Oskar" ,"Ľubomíra" ,"Vavrinec" , "Zuzana" ,"Darina" ,"Ľubomír" ,"Mojmír" ,"Marcela" ,"Leonard" , "Milica" ,"Elena/Helena" ,"Lýdia" ,"Anabela" ,"Jana" ,"Tichomír" , "Filip" ,"Bartolomej" ,"Ľudovít" ,"Samuel" ,"Silvia" ,"Augustín" , "Nikola/Nikolaj" ,"Ružena" ,"Nora" , "Drahoslava" ,"Linda" ,"Belo" ,"Rozália" ,"Regína" ,"Alica" , "Marianna" ,"Miriama" ,"Martina" ,"Oleg" ,"Bystrík" , "Mária" ,"Ctibor" ,"Ľudomil" ,"Jolana" ,"Ľudmila" ,"Olympia" , "Eugénia" ,"Konštantín" ,"Ľuboslav/Ľuboslava" ,"Matúš" ,"Móric" , "Zdenka" ,"Ľuboš/Ľubor" ,"Vladislav" ,"Edita" ,"Cyprián" , "Václav" ,"Michal/Michaela" ,"Jarolím" , "Arnold" ,"Levoslav" ,"Stela" ,"František" ,"Viera" ,"Natália" , "Eliška" ,"Brigita" ,"Dionýz" ,"Slavomíra" ,"Valentína" , "Maximilián" ,"Koloman" ,"Boris" ,"Terézia" ,"Vladimíra" , "Hedviga" ,"Lukáš" ,"Kristián" ,"Vendelín" ,"Uršuľa" ,"Sergej" , "Alojzia" ,"Kvetoslava" ,"Aurel" ,"Demeter" ,"Sabína" ,"Dobromila" , "Klára" ,"Šimon/Simona" ,"Aurélia" , "Denis/Denisa" ,"" ,"Hubert" ,"Karol" ,"Imrich" ,"Renáta" , "René" ,"Bohumír" ,"Teodor" ,"Tibor" ,"Martin/Maroš" ,"Svätopluk" , "Stanislav" ,"Irma" ,"Leopold" ,"Agnesa" ,"Klaudia" ,"Eugen" , "Alžbeta" ,"Félix" ,"Elvíra" ,"Cecília" ,"Klement" ,"Emília" , "Katarína" ,"Kornel" ,"Milan" ,"Henrieta" ,"Vratko" , "Ondrej/Andrej" , "Edmund" ,"Bibiána" ,"Oldrich" ,"Barbora" ,"Oto" ,"Mikuláš" , "Ambróz" ,"Marína" ,"Izabela" ,"Radúz" ,"Hilda" ,"Otília" , "Lucia" ,"Branislava/Bronislava" ,"Ivica" ,"Albína" ,"Kornélia" , "Sláva/Slávka" ,"Judita" ,"Dagmara" ,"Bohdan" ,"Adela" ,"Nadežda" , "Adam/Eva" ,"Vianoce" ,"Štefan" ,"Filoména" ,"Ivana/Ivona" ,"Milada" , "Dávid" ,"Silvester");
days = new Array(31,29,31,30,31,30,31,31,30,31,30,31);

index = 0;

for(i=0;i<(month-1);i++) 
index = index + days[i];

index = index + (day-1);
document.all.meniny.innerHTML = calendar[index];

window.setTimeout("Meniny();", 3600000);
}

Aby práve vytvorený gadget správne fungoval, je potrebný ešte XML súbor s jeho definíciou.

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Meniny</name>
<namespace>Igor Kulman</namespace>
<version>1.0.0.0</version>
<author name="Igor Kulman">
<info url="http://www.kulman.sk" />
</author>
<copyright>© 2007</copyright>
<description>Meniny Widget.</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="Meniny.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>

Súbor nazvyte gadget.xml a váš prvý gadget pre Windows Vista Sidebar je hotový.