Dajbych.net


Programování gadgetů

, 11 minut čtení

Ač se může zdát, že Win­dows Si­de­bar je něco no­vého a slo­ži­tého, je to jen starý Active Desktop do­pl­něný o tři nové tagy a API, které se stará o uklá­dání na­sta­vení, hlá­šení změny roz­vr­žení a po­skytování zá­kladních systé­mových in­for­mací. Gad­get je tedy HTML stránka na ploše zob­ra­zená já­drem In­ter­net Ex­plo­reru bě­ží­cím v pro­cesu si­de­bar.exe.

Jak se liší we­bová stránka zob­ra­zená v In­ter­net Ex­plo­reru od té, která je zob­ra­zená jako gad­get? V pří­padě Active Desktop uve­de­ném ve Win­dows 95 byl roz­díl malý. Stránka na ploše měla šedý rá­me­ček místo okna In­ter­net Ex­plo­reru. Win­dows Si­de­bar nám místo rá­mečku zob­razí ně­ko­lik pod­půr­ných tla­čí­tek. Všechny in­stalo­vané gad­gety v po­čítači jsou zob­ra­zeny v gale­rii bez ohledu na to, zda gad­get je či není na ploše. Z této gale­rie se na plo­chu pře­táhne a tím i spustí.

Vzhled

Si­de­bar nám umož­ňuje vyu­žít dvou ve­li­kostí gad­getu. Ve Win­dows Vista se ve­li­kost pře­pí­nala podle toho, zda byl gad­get za­do­ko­ván v po­stran­ním pa­nelu, nebo pla­val na ploše. Ve Win­dows 7 volí mezi ve­li­kostmi uži­va­tel po­mocí po­stran­ního tla­čítka. Tyto po­stranní tla­čítka se zob­ra­zuje side­bar vpravo od gad­getu. Mů­žou tam být až tři – za­vření, změna ve­li­kosti a na­sta­vení gad­getu spolu s mís­tem, za které lze gad­get pře­táh­nout ji­nam. V gale­rii má každý gad­get svůj ob­rá­zek, ob­rá­zek výrobce, číslo verze a ně­jaký ten po­pi­sek. Gad­get se in­staluje pře­ta­že­ním na plo­chu. Bě­hem pře­taho­vání se ve sku­teč­nosti zob­ra­zuje jen ob­rá­zek. Sa­motná HTML stránka je zob­ra­zena až po umís­tění.

Gad­get může mít i své po­stranní okno ozna­čo­vané jako flyout. Nej­čas­těji se po­u­žívá pro zob­ra­zení po­drob­něj­ších in­for­mací. Může ale způ­so­bo­vat ome­zení v pří­padě, po­kud ho vy­vo­láme po klik­nutí na ně­jaký pr­vek. Gad­get lze pře­táh­nout i ta­že­ním za jeho ob­sah vyjma ob­lastí, na kterých za­chytá­váme ja­vascrip­to­vou udá­lost On­Mou­seC­lick.

Jed­no­duché na­sta­vení usnad­ňuje si­de­bar tak, že stačí jen na­sta­vit Sys­tem.Gad­get.set­ting­sUI na HTML stránku ob­sahující for­mulář s na­sta­ve­ním. For­mulá­řová stránka musí po ote­vření ini­ci­a­lizovat prvky na na­sta­vené hod­noty a při uza­vírání, při kte­rém nastane udá­lost Set­tings.Clo­sin­gE­vent, uložit hod­noty for­muláře do na­sta­vení. V sa­mot­ném gad­getu pak také na­stane udá­lost Set­tings.Clo­sin­gE­vent, kte­rou je dobré zpracovat a znovu načíst hod­noty z na­sta­vení.

Struktura

Gad­get tvoří ně­ko­lik sou­borů, které jsou zabaleny v ZIP ar­chivu a pří­po­nou gad­get. Stejný přístup má i for­mát Of­fice Open XML. V ko­ře­no­vém ad­re­sáři je umís­těn sou­bor gad­get.xml, ur­čující který HTML sou­bor se má in­ter­pre­to­vat jako ob­sah okna gad­getu. Dále ob­sahuje verzi gad­getu, po­pis, in­for­mace o au­torovi a verzi API, pro kte­rou je gad­get na­vr­žený. Je možné vy­tvo­řit více ja­zy­ko­vých verzí umís­tě­ním kaž­dého gad­get.xml manifestu do sa­mo­stat­ného ad­re­sáře po­jme­no­va­ného podle přísluš­ného kódu ja­zyka (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 gad­getu se vzá­jemně mění vi­di­tel­nost dvou hlav­ních částí podle uži­va­te­lem zvo­lené ve­li­kosti. Atri­but un­se­lectable vy­píná ozna­čo­vání textu myší. Po­kud se od­ka­zům na­staví atri­but hi­de­fo­cus, ne­zob­razí se jeho teč­ko­vané rá­mo­vání, když mají fo­cus.

API

Win­dows Si­de­bar po­sky­tuje služby, které jsou přístupné přes ob­jekt Sys­tem. Přes tento ob­jekt může gad­get re­a­go­vat na změnu ve­li­kosti, na při­po­jení či od­po­jení od sítě, ulo­žit na­sta­vení a tak po­dobně.

Zajímavé objekty

System.ContactManager

Ob­sahuje ko­lekci kon­taktů apli­kace Win­dows Mail.

System.Machine

Po­sky­tuje údaje o paměti po­čítače a jed­not­li­vých já­drech pro­ce­soru.

System.Machine.PowerStatus

Po­sky­tuje údaje o stavu ba­te­rie.

System.MessageStore

Ob­sahuje ná­zvy slo­žek pošty apli­kace Win­dows Mail. Pro kaž­dou složku po­sky­tuje po­čet zpráv a po­čet ne­pře­čte­ných zpráv.

System.Network.Wireless

Ob­sahuje in­for­mace o SSID, síle sig­nálu a DNS ser­ve­rech bezdrá­to­vého při­po­jení.

System.Shell.RecycleBin

Ob­sahuje údaje o stavu od­pad­ko­vého koše a me­tody k jeho vy­prázd­nění.

Zajímavé vlastnosti

window.navigator.onLine

Vrací true, po­kud je po­čítač při­po­jen k síti, ji­nak false.

System.Gadget.Flyout.document

Vrací DOM po­stran­ního okna gad­getu.

System.Gadget.Flyout.file

Ur­čuje cestu k HTML sou­boru před­sta­vující ob­sah po­stran­ního okna gad­getu.

System.Gadget.Flyout.show

Ur­čuje či vrací, je-li po­stranní okno gad­getu zob­ra­zeno.

System.System.Gadget.settingsUI

Ur­čuje stránku, která před­sta­vuje okno s na­sta­ve­ním.

Zajímavé metody

System.Gadget.Settings.readString

Čte ře­tě­zec ulo­žený v na­sta­vení.

System.Gadget.Settings.writeString

Uloží do na­sta­vení ře­tě­zec pod da­ným klí­čem. Klíč může být dlouhý až 1024 znaků, hod­nota pak až 2048 znaků.

System.Debug.outputString

Vy­píše ře­tě­zec na chy­bový výstup, který si pak mů­žeme pře­číst ve Vi­sual Stu­diu, po­kud ladíme při­po­jeni k pro­cesu sidebar.exe.

System.Diagnostics.EventLog.writeEntry

Za­píše udá­lost do systé­mo­vého logu příslušné úrovně. Jako zdroj je uve­den Win­dows Si­de­bar.

System.Environment. getEnvirenmentVariable

Po­mocí této me­tody lze zjis­tit hod­notu pro­měnné prostředí ope­rač­ního systému.

System.Shell.execute

Spustí apli­kaci či pro­vede skript.

Zajímavé události

document.body.online

Na­stane, po­kud se po­čítač při­pojí k síti.

document.body.offline

Na­stane, po­kus se po­čítač od­pojí od sítě.

System.Settings.ClosingEvent

Na­stane, po­kud uži­va­tel za­vřel okno s na­sta­ve­ním gad­getu. Vhodná chvíle pro pro­je­vení změn.

System.Gadget.Flyout.onHide

Na­stane, po­kud uži­va­tel scho­val po­stranní okno gad­getu.

System.Gadget.Flyout.onShow

Na­stane, po­kud uži­va­tel zob­ra­zil po­stranní okno gad­getu.

System.Machine.PowerStatus.powerLineStatusChanged

Na­stane, po­kud do­jde ke změně způ­sobu na­pá­jení po­čítače.

Rozšiřující tagy

Kromě ja­vascrip­to­vého ob­jektu Sys­tem máme k dis­po­zici i tři roz­ši­řující XHTML tagy. Je­den pro po­zadí, druhý pro ob­rá­zek a třetí pro text. Všechny tagy mají na­ko­lik za­jí­mavých atributů – blur, opa­city a ro­tation ur­čující roz­ma­zání, prů­hled­nost a na­to­čení. Přes JavaScript lze ještě po­mocí me­tod ad­d­Glow a add­Sha­dow na­sta­vit ba­rev­nou zář re­spek­tive stín.

Atri­but g:bac­k­ground g:image g:text Popis
align X za­rov­nání textu
blur X X X záře textu
brigness X X X jas textu
co­lor X barva textu
font X font textu
font­size X ve­li­kost textu
he­i­ght X X výška bloku v pi­xe­lech
left X X od­sa­zení bloku zleva v pi­xe­lech
opa­city X X X prů­hled­nost bloku
ro­tation X X X oto­čení bloku ve stup­ních
sof­tEdge X X zaob­lení rohů
src X X cesta k sou­boru ob­rázku
top X X od­sa­zení bloku zhora v pi­xe­lech
value X zob­ra­zený text
wi­dth X X šířka bloku v pi­xe­lech

g:background

g:bac­k­ground tag se vkládá ihned do ele­mentu body. Přes Ja­vaScript lze na­sta­vit ob­rá­zek přes vlast­nost Sys­tem.Gad­get.bac­k­ground. Pod­po­ro­vány jsou for­máty JPEG, BMP, GIF a PNG. Pouze PNG pod­po­ruje po­lo­prů­hled­nost (al­pha chan­nel transpa­rency).

g:image

g:image před­sta­vuje ob­rá­zek. Měl by být od­sa­zen ale­spoň o je­den pi­xel od okraje gad­getu, ji­nak může na­stat chyba v jeho vy­kres­lení. Atri­but src určuje cestu k ob­rázku. Stejně jako u po­zadí jsou pod­po­ro­vány for­máty JPEG, BMP, GIF a po­lo­prů­hled­nost pod­po­rující PNG.

g:text

g:text je roz­šíře­ním dobře zná­mého tagu p. Text lze obo­ha­tit roz­lič­nými efekty. Od Win­dows 7 je možné ex­pli­citně ur­čit ve­li­kost textu přes ele­ment au­tos­caleDPI v ma­ni­festu.

GIMAGE protokol

Pro efek­tiv­nější na­čítání ob­rázků vyu­ží­vající Win­dows cache slouží pro­to­kol GI­MAGE. Jeho po­u­žití vy­padá ná­sle­dovně:

var src = "gimage:///" + System.Gadget.path + "\\images\\mujobrazek.png"; var img = System.Gadget.background.addImageObject(src 2, 2); img.id = "mujobrazek";

Nej­prve se se­staví cesta k ob­rázku, který je umís­těn v ar­chivu gad­getu. Poté se do ele­mentu g:bac­k­ground vloží nový ele­ment g:image od­sa­zený o 2 pi­xely od okrajů. Me­toda vrátí uka­za­tel na něj. Na­ko­nec se na­staví jeho iden­ti­fi­ká­tor.

Silverlight

Do gad­getu lze vlo­žit také Sil­verlight ob­jekt a vyu­žít veš­keré tamní po­hodlí. Pro­to­kol x-gad­get od­ka­zuje přímo do ko­ře­nové složky ar­chivu.

<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 gad­getu do­po­ru­čuji udr­žo­vat jeho funkč­nost jak v prostředí si­de­baru, tak i v In­ter­net Ex­plo­reru. Vy­tvo­ření ar­chivu, od­stra­nění staré a in­stalace nové verze s ná­sledným při­po­jením k pro­cesu si­de­bar.exe je pro první fázi vý­voje ve­lice zdlouhavé. Tato me­toda je vhodná až pro kon­t­rolní mo­ni­to­ring čin­nosti, avšak pro kla­sický vý­voj slouží lépe Ná­stroje pro vý­vo­jáře do­stupné v IE pod klá­ve­sou F12. Po­kud doje k chybě v Ja­vaScriptu, zvýrazní se řá­dek, na kte­rém chyba na­stala. V pravé části okna pak mů­žeme vi­dět místní hod­noty, zá­sob­ník vo­lání nebo spouš­tět ja­vascrip­tové pří­kazy. Kam­ko­liv do ja­vascrip­to­vého kódu lze umís­tit bre­ak­point.

Ve Vi­sual Stu­diu se po při­po­jení k pro­cesu si­de­bar.exe zob­razí výstup, který gad­get po­sílá po­mocí me­tody Sys­tem.De­bug.out­put­String. Lo­go­vat lze do systé­mo­vého logu přes me­todu Sys­tem.Di­a­gnos­tics.EventLog.wri­te­En­try.