Ač se může zdát, že Windows Sidebar je něco nového a složitého, je to jen starý Active Desktop doplněný o tři nové tagy a API, které se stará o ukládání nastavení, hlášení změny rozvržení a poskytování základních systémových informací. Gadget je tedy HTML stránka na ploše zobrazená jádrem Internet Exploreru běžícím v procesu sidebar.exe.
Jak se liší webová stránka zobrazená v Internet Exploreru od té, která je zobrazená jako gadget? V případě Active Desktop uvedeném ve Windows 95 byl rozdíl malý. Stránka na ploše měla šedý rámeček místo okna Internet Exploreru. Windows Sidebar nám místo rámečku zobrazí několik podpůrných tlačítek. Všechny instalované gadgety v počítači jsou zobrazeny v galerii bez ohledu na to, zda gadget je či není na ploše. Z této galerie se na plochu přetáhne a tím i spustí.
Vzhled
Sidebar nám umožňuje využít dvou velikostí gadgetu. Ve Windows Vista se velikost přepínala podle toho, zda byl gadget zadokován v postranním panelu, nebo plaval na ploše. Ve Windows 7 volí mezi velikostmi uživatel pomocí postranního tlačítka. Tyto postranní tlačítka se zobrazuje sidebar vpravo od gadgetu. Můžou tam být až tři – zavření, změna velikosti a nastavení gadgetu spolu s místem, za které lze gadget přetáhnout jinam. V galerii má každý gadget svůj obrázek, obrázek výrobce, číslo verze a nějaký ten popisek. Gadget se instaluje přetažením na plochu. Během přetahování se ve skutečnosti zobrazuje jen obrázek. Samotná HTML stránka je zobrazena až po umístění.
Gadget může mít i své postranní okno označované jako flyout. Nejčastěji se používá pro zobrazení podrobnějších informací. Může ale způsobovat omezení v případě, pokud ho vyvoláme po kliknutí na nějaký prvek. Gadget lze přetáhnout i tažením za jeho obsah vyjma oblastí, na kterých zachytáváme javascriptovou událost OnMouseClick.
Jednoduché nastavení usnadňuje sidebar tak, že stačí jen nastavit System.Gadget.settingsUI na HTML stránku obsahující formulář s nastavením. Formulářová stránka musí po otevření inicializovat prvky na nastavené hodnoty a při uzavírání, při kterém nastane událost Settings.ClosingEvent, uložit hodnoty formuláře do nastavení. V samotném gadgetu pak také nastane událost Settings.ClosingEvent, kterou je dobré zpracovat a znovu načíst hodnoty z nastavení.
Struktura
Gadget tvoří několik souborů, které jsou zabaleny v ZIP archivu a příponou gadget. Stejný přístup má i formát Office Open XML. V kořenovém adresáři je umístěn soubor gadget.xml, určující který HTML soubor se má interpretovat jako obsah okna gadgetu. Dále obsahuje verzi gadgetu, popis, informace o autorovi a verzi API, pro kterou je gadget navržený. Je možné vytvořit více jazykových verzí umístěním každého gadget.xml manifestu do samostatného adresáře pojmenovaného podle příslušného kódu jazyka (cs-CZ, en-US, …).
<html>
<head>
<title>Můj gadget</title>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body scroll="no" unselectable="on" id="body" onload="init();">
<g:background id="imgBackground">
<div id="DockedModeDisplayArea"></div>
<div id="UnDockedModeDisplayArea"></div>
</g:background>
</body>
</html>
V hlavní části gadgetu se vzájemně mění viditelnost dvou hlavních částí podle uživatelem zvolené velikosti. Atribut unselectable vypíná označování textu myší. Pokud se odkazům nastaví atribut hidefocus, nezobrazí se jeho tečkované rámování, když mají focus.
API
Windows Sidebar poskytuje služby, které jsou přístupné přes objekt System. Přes tento objekt může gadget reagovat na změnu velikosti, na připojení či odpojení od sítě, uložit nastavení a tak podobně.
Zajímavé objekty
System.ContactManager
Obsahuje kolekci kontaktů aplikace Windows Mail.
System.Machine
Poskytuje údaje o paměti počítače a jednotlivých jádrech procesoru.
System.Machine.PowerStatus
Poskytuje údaje o stavu baterie.
System.MessageStore
Obsahuje názvy složek pošty aplikace Windows Mail. Pro každou složku poskytuje počet zpráv a počet nepřečtených zpráv.
System.Network.Wireless
Obsahuje informace o SSID, síle signálu a DNS serverech bezdrátového připojení.
System.Shell.RecycleBin
Obsahuje údaje o stavu odpadkového koše a metody k jeho vyprázdnění.
Zajímavé vlastnosti
window.navigator.onLine
Vrací true, pokud je počítač připojen k síti, jinak false.
System.Gadget.Flyout.document
Vrací DOM postranního okna gadgetu.
System.Gadget.Flyout.file
Určuje cestu k HTML souboru představující obsah postranního okna gadgetu.
System.Gadget.Flyout.show
Určuje či vrací, je-li postranní okno gadgetu zobrazeno.
System.System.Gadget.settingsUI
Určuje stránku, která představuje okno s nastavením.
Zajímavé metody
System.Gadget.Settings.readString
Čte řetězec uložený v nastavení.
System.Gadget.Settings.writeString
Uloží do nastavení řetězec pod daným klíčem. Klíč může být dlouhý až 1024 znaků, hodnota pak až 2048 znaků.
System.Debug.outputString
Vypíše řetězec na chybový výstup, který si pak můžeme přečíst ve Visual Studiu, pokud ladíme připojeni k procesu sidebar.exe.
System.Diagnostics.EventLog.writeEntry
Zapíše událost do systémového logu příslušné úrovně. Jako zdroj je uveden Windows Sidebar.
System.Environment. getEnvirenmentVariable
Pomocí této metody lze zjistit hodnotu proměnné prostředí operačního systému.
System.Shell.execute
Spustí aplikaci či provede skript.
Zajímavé události
document.body.online
Nastane, pokud se počítač připojí k síti.
document.body.offline
Nastane, pokus se počítač odpojí od sítě.
System.Settings.ClosingEvent
Nastane, pokud uživatel zavřel okno s nastavením gadgetu. Vhodná chvíle pro projevení změn.
System.Gadget.Flyout.onHide
Nastane, pokud uživatel schoval postranní okno gadgetu.
System.Gadget.Flyout.onShow
Nastane, pokud uživatel zobrazil postranní okno gadgetu.
System.Machine.PowerStatus.powerLineStatusChanged
Nastane, pokud dojde ke změně způsobu napájení počítače.
Rozšiřující tagy
Kromě javascriptového objektu System máme k dispozici i tři rozšiřující XHTML tagy. Jeden pro pozadí, druhý pro obrázek a třetí pro text. Všechny tagy mají nakolik zajímavých atributů – blur, opacity a rotation určující rozmazání, průhlednost a natočení. Přes JavaScript lze ještě pomocí metod addGlow a addShadow nastavit barevnou zář respektive stín.
| Atribut | g:background | g:image | g:text | Popis |
|---|---|---|---|---|
| align | X | zarovnání textu | ||
| blur | X | X | X | záře textu |
| brigness | X | X | X | jas textu |
| color | X | barva textu | ||
| font | X | font textu | ||
| fontsize | X | velikost textu | ||
| height | X | X | výška bloku v pixelech | |
| left | X | X | odsazení bloku zleva v pixelech | |
| opacity | X | X | X | průhlednost bloku |
| rotation | X | X | X | otočení bloku ve stupních |
| softEdge | X | X | zaoblení rohů | |
| src | X | X | cesta k souboru obrázku | |
| top | X | X | odsazení bloku zhora v pixelech | |
| value | X | zobrazený text | ||
| width | X | X | šířka bloku v pixelech |
g:background
g:background tag se vkládá ihned do elementu body. Přes JavaScript lze nastavit obrázek přes vlastnost System.Gadget.background. Podporovány jsou formáty JPEG, BMP, GIF a PNG. Pouze PNG podporuje poloprůhlednost (alpha channel transparency).
g:image
g:image představuje obrázek. Měl by být odsazen alespoň o jeden pixel od okraje gadgetu, jinak může nastat chyba v jeho vykreslení. Atribut src určuje cestu k obrázku. Stejně jako u pozadí jsou podporovány formáty JPEG, BMP, GIF a poloprůhlednost podporující PNG.
g:text
g:text je rozšířením dobře známého tagu p. Text lze obohatit rozličnými efekty. Od Windows 7 je možné explicitně určit velikost textu přes element autoscaleDPI v manifestu.
GIMAGE protokol
Pro efektivnější načítání obrázků využívající Windows cache slouží protokol GIMAGE. Jeho použití vypadá následovně:
var src = "gimage:///" + System.Gadget.path + "\\images\\mujobrazek.png";
var img = System.Gadget.background.addImageObject(src 2, 2);
img.id = "mujobrazek";
Nejprve se sestaví cesta k obrázku, který je umístěn v archivu gadgetu. Poté se do elementu g:background vloží nový element g:image odsazený o 2 pixely od okrajů. Metoda vrátí ukazatel na něj. Nakonec se nastaví jeho identifikátor.
Silverlight
Do gadgetu lze vložit také Silverlight objekt a využít veškeré tamní pohodlí. Protokol x-gadget odkazuje přímo do kořenové složky archivu.
<object width="100%" height="100%" data="data:application/x-silverlight-2," type="application/x-silverlight-2">
<param name="source" value="x-gadget:///ClientBin/SilverlightGadget.xap" />
</object>
Ladění
Během vývoje gadgetu doporučuji udržovat jeho funkčnost jak v prostředí sidebaru, tak i v Internet Exploreru. Vytvoření archivu, odstranění staré a instalace nové verze s následným připojením k procesu sidebar.exe je pro první fázi vývoje velice zdlouhavé. Tato metoda je vhodná až pro kontrolní monitoring činnosti, avšak pro klasický vývoj slouží lépe Nástroje pro vývojáře dostupné v IE pod klávesou F12. Pokud doje k chybě v JavaScriptu, zvýrazní se řádek, na kterém chyba nastala. V pravé části okna pak můžeme vidět místní hodnoty, zásobník volání nebo spouštět javascriptové příkazy. Kamkoliv do javascriptového kódu lze umístit breakpoint.
Ve Visual Studiu se po připojení k procesu sidebar.exe zobrazí výstup, který gadget posílá pomocí metody System.Debug.outputString. Logovat lze do systémového logu přes metodu System.Diagnostics.EventLog.writeEntry.