Viimeisimmissä Windowseissa on mahdollisuus asentaa pieniä vempaimia sivupalkkiin. Pidän pöytätietokoneella vain yhtä vempulaa käytössä. Se on prosessoriytimien aktiivisuudesta kertova mittari. Jonain päivänä liiallisen vapaa-ajan ja kunnianhimon yllyttämänä päätin selvittää mistä noissa widgeteissä oikein on kyse. Sain selville niiden olevan yksinkertaisimmillan pari–kolme tiedostoa, joista yksi sisältää XML:ää ja toinen HTML:ää.
Sivupalkkiin asennettava vempain voi yksinkertaisimmillaan sisältää vain pari tiedostoa. Siinä vaiheessa kun vempain halutaan laittaa asennettavaksi, tiedostot pakataan esimerkiksi WinZipillä. Sen jälkeen tiedostopääte muutetaan muotoon .gadget. Sen jälkeen systeemi on finito, eli kaput, eli käyttökelpoinen. Olen tähän mennessä tehnyt muutamien tuntien edestä testejä gadgeteilla. Olen tutustunut useisiin muiden tahojen luomiin gadgeteihin, kuten YLE:n uutissyötteen tarjoavaan laatikkoon ja eräisiin muihin. Lisäksi netistä löytää ainakin pari sivua sellaista tekstiä, joista on ollut apua.
Tein omaan käyttöön vempaimen, joka hakee eräältä nettisivustolta kolme sillä hetkellä suosituinta pelipalvelinta. Tämän projektin haastavin vaihe oli skreipata sisältöä PHP:n avulla. En viitsi perehdyttää moiseen, vaan käsittelen tässä kirjoituksessa juurikin vempaimin itsensä toteuttamista. Vempain tarvitsee toimiakseen XML-tiedoston, joka sisältää asetukset. Tiedostolle annettakoon nimeksi gadget.xml. Sen jälkeen tiedoston sisälle luodaan vaikkapa seuraavanlaiset koodirivit:
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>DarkestHourServers</name>
<namespace>DHS</namespace>
<version>1.0</version>
<author name="Petri Ikonen">
<info url="www.kuopassa.com" />
<logo src="icon.png" />
</author>
<copyright>© 2011</copyright>
<description>A list of Darkest Hour game servers, which have players.<code></description>
<icons>
<icon height="72" width="72" src="icon.png" />
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="servers.html" />
<platform minPlatformVersion="0.3" />
<permissions>Full</permissions>
<defaultImage src="icon.png"/>
</host>
</hosts>
</gadget>
Tuo koodi on kenen tahansa nettisivuja tehneen henkilön helppo ymmärtää. Ylhäältä alkaen rivillä name asetetaan vempaimen virallinen nimi. Sen alla olevaan kohtaan namespace voidaan syöttää joku lyhennys vempaimen nimestä. Sen jälkeen voidaan kirjoittaa versio, vempaimen tekijän nimi, lisätietojen osoite, logotiedoston nimi, tietoja tekijänoikeuksista, lyhyt kuvaus ja ikonitiedoston nimi. Siellä on myös muita koodirivejä, joista tärkein on kohta base, johon ilmoitetaan HTML-tiedoston nimi. Se HTML-tiedosto on nääs juurikin se tiedosto, johon sisällytetään kaikki vempaimen toiminnallisuudet. Tämä XML-tiedosto on vain asetustiedosto, jonka sisältämiä tietoja näytetään esimerkiksi Windowsissa kun listataan kaikki käyttökelpoiset vempaimet.
Seuraavaksi on vuorossa HTML-tiedosto, jossa vempaimen toiminnallisuudet. Asetan tähän esimerkin vuoksi sen tiedoston, jota käytin omassa Darkest Hour Servers -vempaimessani. Kuten alta näkyy, koodi muistuttaa hyvin, hyvin paljon tavanomaista HTML-merkkausta. Siinä on kuitenkin yksi silmiinpistävä eroavaisuus: se miten taustakuvatiedosto on määritelty.
<html>
<head>
<title>DarkestHourServers</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="loader.js"></script>
</head>
<body>
<g:background id="bg" src="bg.png">
<div id="wrapper">
<ol id="content"></ol>
<button id="refresh" type="button">Update list</button>
</div>
</g:background>
</body>
</html>
Mainittakoon tässä saumassa, että kehittämäni widget hyödyntää Ajax-tekniikkaa sisällön noutamiseen palvelimelta. Asensin nettipalvelimelle PHP-skriptin, joka noutaa serverilistan suosituimmat palvelimet, ja muotoilee ne esitettäväksi ol-listan sisällä. Buttonia klikkaamalla serverille tehdään päivityspyyntö ja luettelo päivittyy. JavaScriptin ja Ajaxin käyttäminen on siis mahdollista.
Oheinen koodiklimppi sisältää tyypillisestä HTML-tiedostosta poiketen kohdan <g:background id="bg" src="bg.png"> ja sen vastinparin </g:background>. Vaikka vempaimen ulkoasua pystytään fonttien ja muiden juttujen kohdalta muotoilemaan CSS:n avulla, on vempaimen varsinainen taustakuva syytä määritellä tällä tavalla suoraan HTML-tiedostossa, sillä muussa tapauksessa taustakuva ei välttämättä ilmesty lainkaan. Tarkkaavainen lukija näkee kuinka olen asettanut taustakuvan tiedostoksi .png-päätteisen tiedoston. Loin taustalle PNG-kuvan, sillä Windowsin sivupalkissa voidaan käyttää alpha channelin läpinäkyvyyttä hyväksi. Halusin oman vempaimeni taustakuvassa olevan pyöristetyt reunat ja voimakkaan varjostuksen. Siksi kuva on PNG-formaatissa.
