Dajbych.net


Programování gadgetů

, 7 minut čtení

windows 7 logo

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, pokud 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.