Transcript Windows Sidebar & Gadgets
Slide 1
Vývoj Windows Sidebar Gadgets
Jaroslav Klíma, MFF UK
12.4.2007
Slide 2
Vývoj Windows Sidebar Gadgets
•
•
•
•
•
•
•
•
•
Co jsou to Microsoft Gadgets?
Sidebar gadget overview
Nástroje pro vývoj
Hello World
Lokalizace
Manifest
Windows Sidebar API
Instalace
COM interop
Slide 3
Co jsou to Microsoft Gadgets?
• Jednoduché jednoúčelové „miniaplikace“
• Na desktopu, na webu, na jiném zařízení
• V budoucnu:
– Univerzální gadgety
• Nyní:
– Windows SideShow gadgets
– Web gadgets
– Windows Sidebar gadgets
Slide 4
Device gadgets
• Windows SideShow (přídavný display na
telefonu, na dálkovém ovládání a podobně)
Slide 5
Web gadgets
• někdy též Live Gadgets
• Windows Live Spaces – Live.com
Slide 6
Desktop gadgets
• Windows Sidebar
Slide 7
Sidebar gadget - přehled
• Postranní panel
– Umístění vlevo/vpravo, na konkrétní monitor
– Matoucí „On top of other windows“
– Galerie gadgetů
– Inteligentní umístění gadgetů
Slide 8
Instalace gadgetů
• Distribuce ve formě souboru *.gadget
– Jde o *.zip nebo *.cab archiv s novou koncovkou
– Po double kliknutí se automaticky nainstaluje
• Umístění souborů gadgetu
C:\Program Files\Windows Sidebar\Gadgets\
nebo
C:\Users\{profile}\AppData\Local\Microsoft\Windows Sidebar\Gadgets\
Slide 9
Přidání gadgetu do postranního panelu
• Galerie gadgetů
– Systémové i uživatelské gadgety
– Preview image
– Detaily výrobce
– Double-click / drag & drop
Slide 10
Stavy gadgetu
• Docked/undocked
– V postranním panelu, nebo volně
• Flyout
– Po kliknutí může gadget „expandovat“
• Settings
– Panel nastavení gadgetu
• Více instancí
– Každá má vlastní nastavení
Slide 11
Gadget z pohledu programátora
• DHTML soubor se styly a manifestem
– Obsah v HTML
– Skripty v JavaScriptu nebo VBscriptu
– Styly CSS
• Popis gadgetu v manifestu – gadget.xml
– Jméno, verze, autor, popis
– HTML soubor s obsahem gadgetu
Slide 12
Nástroje pro vývoj
• Notepad, PSPad...
• Microsoft Visual Studio + IE
– Syntax highlighting
– IntelliSense (*)
– Validace (*)
– Debugging (*)
Slide 13
Hello world!
• Manifest
– Jméno
– Verze
– Jméno souboru s obsahem
– Platorma
• Obsah
– HTML soubor
Slide 14
Lokalizace
• Jazyk podle jazykového balíčku OS :-/
• Podadresáře v kořenovém adresáři
– Všechny soubory s relativní cestou se hledají v
pořadí:
1) \cs-CZ\path\file.ext
2) \cs\path\file.ext
3) \en-US\path\file.ext
4) \en\path\file.ext
5) \path\file.ext
Slide 15
Manifest
• Povinné elementy
– Kódování souboru a verze XML
- Jméno gadgetu
- Verze gadgetu
- Hostitelská aplikace
- Jméno a verze
- Typ a umístění souboru s obsahem
- Požadované oprávnění
Slide 16
• Nepovinné elementy:
– Údaje o autorovi, www, logo
–
–
–
–
Copyright
Popis gadgetu
Ikony
Náhled
(48x48)
Slide 17
Obsah gadgetu
• Používáme HTML, CSS a JavaScript
• Na renderování se použije Internet Explorer
• Rozdíly proti web stránce:
– Gadget API
– Nefunkční alert()
• Debugging
– debugger;
Slide 18
• Gadget je interaktivní
– Vznikají události - events
– Specifikujeme skripty které se pustí při vzniku
událostí, například:
onMouseEnter=“MouseEnterHandler()”
onMouseLeave=“MouseLeaveHandler()”
onClick=“ClickHandler()”
>
Slide 19
Windows Sidebar API
• System.Debug
– Metoda outputString(string)
• System.Diagnostics
– Metoda EventLog.writeEntry(string [, type])
type 0 = Success
1 = Error
2 = Warning
3 = Information
• System.Environment
– Metoda getEnvironmentVariable(varName)
Slide 20
• System.Machine
– Properties:
availableMemory, processorArchitecture, totalMemory
– Kolekce CPUs – informace o procesorech
jde o kolekci, nikoliv o pole – používáme .item(i) namísto indexeru
vlastnosti “name” a “usagePercentage”
– PowerStatus.* properties
batteryCapacityRemaining
batteryCapacityTotal
batteryPercentRemaining
batteryStatus
enumBatteryStatus
isBatteryCharging
isPowerLineConnected
– Událost PowerStatus.powerLineStatusChanged
Slide 21
• System.Network.Wireless
– Properties:
address
ipv6Address
primaryDNSAddress
secureConnection
signalStrength
ssid
– Events:
connectionChanged
signalStrengthChanged
Slide 22
• System.Shell
– Metody:
chooseFile(…), chooseFolder(…) - vrací System.Shell.Item
drive(driveLetter) - vrací System.ShellDrive
execute(...) - jako ShellExecute z Win API
itemFromPath(path) – vrací System.Shell.Item
knownFolder(path) – vrací System.Shell.Folder
knownFolderPath(name) – vrací System.Shell.Folder
refreshDesktop() – znovu načte ikony na desktop
saveFileDialog(...) – vrací string, vybranou cestu
Slide 23
• System.Shell
– metoda itemFromFileDrop(…) – podpora Drag & Drop:
ondrop="fileDragDropped">
function fileDragDropped(event)
{
var sFile;
var i=0;
try
{
while(System.Shell.itemFromFileDrop(event.dataTransfer, i).path)
{
sFile =
System.Shell.itemFromFileDrop(event.dataTransfer, i).path;
i++;
}
} catch(err) {}
}
Slide 24
• System.Shell.Folder
– metody:
copyHere(…)
moveHere(…)
newFolder(…)
parse(path)
– properties:
Self – vrací System.Shell.Folder
Parent – vrací string s cestou
Slide 25
• System.Shell.Item
– metody:
invokeVerb(verb) – „open“, „edit“...
metadata() – např. pro obrázky rozměry, dpi...
– properties:
isFile
isFileSystem
isFolder
isLink
link
modifyDate
name
path
SHFolder
size
type
Slide 26
• Ostatní objekty Windows Sidebar API:
– System.ContactManager
– System.MessageStore
– System.Shell.RecycleBin – event i metody
– System.Sound – beep() a playSound()
– System.Time – getLocalTime(), timeZones
– System.Gadget...
Slide 27
Gadget API – System.Gadget
• události:
– onDock, onUndock
– onShowSettings, onSettingsClosing,
onSettingsClosed
– visibilityChanged
Slide 28
• metody:
– beginTransition()
endTransition(transitionType, seconds)
transitionType =
System.Gadget.TransitionType.morph
System.Gadget.TransitionType.none
– close()
Slide 29
• properties:
– background – cesta k obrázku s pozadím
docked - dock state (true nebo false)
name – jméno gadgetu z manifestu
opacity – průhlednost v procentech
path – cesta k HTML s obsahem gadgetu
platformVersion - verze OS
settingsUI – cesta k HTML nastavení gadgetu
version – verze gadgetu z manifestu
visible – viditelnost gadgetu (true nebo false)
Slide 30
System.Gadget.Sidebar
• událost onDockSideChanged
• property dockSide
Slide 31
System.Gadget.Flyout
• události onHide a onShow
• properties:
file – cesta k HTML s obsahem flyoutu
document – vrací objekt HTML document
show – indikuje jestli je flyout zobrazen
Slide 32
System.Gadget.Settings
• metody pro čtení a zápis persistentních
nastavení
• nastavení jsou specifická pro každou instanci
gadgetu
• write(name), writeString(name)
• read(name), readString(name)
Slide 33
• System.Gadget.Settings.closingEvent
– při ošetření události onSettingsClosing:
System.Gadget.onSettingsClosing =
HandleSettingsClosing;
function HandleSettingsClosing(e)
{
...
}
Slide 34
• System.Gadget.Settings.closingEvent
– properties:
e.closeAction
System.Gadget.Settings.closeAction.commit
System.Gadget.Settings.closeAction.cancel
e.action - .commit nebo .cancel
e.cancel – nastavíme na true nebo false
e.cancellable – můžeme nastavit cancel na true?
Slide 35
Grafické objekty
• podobně jako v ASP.NET, existují nové objekty
kterých vlastnosti můžeme nastavovat jak v
skriptu, tak deklarativně
• nové elementy html:
– = objekt gbackground
– = objekt gimage
– objekt gText (?)
Slide 36
Grafické objekty - pozadí
•
– document.body.g.background – nefunguje
– musíme přiřadit ID a pak najít podle něj
– properties:
attributes: src, rotation, opacity
blur, brightness, softEdge
left, top, height, width
– metody:
addGlow, addShadow
addImageObject, addTextObject, removeObjects
move
Slide 37
Grafické objekty – obrázky
•
– var image = document.getElementById(id);
– properties: jako gbackground
– metody:
addGlow(color, radius, alpha)
addShadow(color, radius, alpha, deltaX, deltaY)
addImageObject(path, offsetX, offsetY)
addTextObject(text, font, size, color, offsetX, offsetY)
removeObjects() – všechny objekty a efekty
move(offsetX, offsetY)
Slide 38
Tipy
• Nastavit padding a margin u na 0px
• Automatický refresh
– var timer = window.setInterval(method, interval);
• Knihovna Math
– zaokrouhlování a podobně
Slide 39
COM interop
• můžeme použít zaregistrované objekty
ActiveX
• var axObject =
new ActiveXObject(„Namespace.Class");
axObject.DoSomething()
Slide 40
Zdroje
• Galerie gadgetů:
– http://microsoftgadgets.com/
– http://gallery.live.com/
• Windows Sidebar Reference
– http://msdn2.microsoft.com/en-us/library/aa965850.aspx
• Články pro začátečníky i pokročilé
– http://www.codeproject.com/gadgets
Vývoj Windows Sidebar Gadgets
Jaroslav Klíma, MFF UK
12.4.2007
Slide 2
Vývoj Windows Sidebar Gadgets
•
•
•
•
•
•
•
•
•
Co jsou to Microsoft Gadgets?
Sidebar gadget overview
Nástroje pro vývoj
Hello World
Lokalizace
Manifest
Windows Sidebar API
Instalace
COM interop
Slide 3
Co jsou to Microsoft Gadgets?
• Jednoduché jednoúčelové „miniaplikace“
• Na desktopu, na webu, na jiném zařízení
• V budoucnu:
– Univerzální gadgety
• Nyní:
– Windows SideShow gadgets
– Web gadgets
– Windows Sidebar gadgets
Slide 4
Device gadgets
• Windows SideShow (přídavný display na
telefonu, na dálkovém ovládání a podobně)
Slide 5
Web gadgets
• někdy též Live Gadgets
• Windows Live Spaces – Live.com
Slide 6
Desktop gadgets
• Windows Sidebar
Slide 7
Sidebar gadget - přehled
• Postranní panel
– Umístění vlevo/vpravo, na konkrétní monitor
– Matoucí „On top of other windows“
– Galerie gadgetů
– Inteligentní umístění gadgetů
Slide 8
Instalace gadgetů
• Distribuce ve formě souboru *.gadget
– Jde o *.zip nebo *.cab archiv s novou koncovkou
– Po double kliknutí se automaticky nainstaluje
• Umístění souborů gadgetu
C:\Program Files\Windows Sidebar\Gadgets\
nebo
C:\Users\{profile}\AppData\Local\Microsoft\Windows Sidebar\Gadgets\
Slide 9
Přidání gadgetu do postranního panelu
• Galerie gadgetů
– Systémové i uživatelské gadgety
– Preview image
– Detaily výrobce
– Double-click / drag & drop
Slide 10
Stavy gadgetu
• Docked/undocked
– V postranním panelu, nebo volně
• Flyout
– Po kliknutí může gadget „expandovat“
• Settings
– Panel nastavení gadgetu
• Více instancí
– Každá má vlastní nastavení
Slide 11
Gadget z pohledu programátora
• DHTML soubor se styly a manifestem
– Obsah v HTML
– Skripty v JavaScriptu nebo VBscriptu
– Styly CSS
• Popis gadgetu v manifestu – gadget.xml
– Jméno, verze, autor, popis
– HTML soubor s obsahem gadgetu
Slide 12
Nástroje pro vývoj
• Notepad, PSPad...
• Microsoft Visual Studio + IE
– Syntax highlighting
– IntelliSense (*)
– Validace (*)
– Debugging (*)
Slide 13
Hello world!
• Manifest
– Jméno
– Verze
– Jméno souboru s obsahem
– Platorma
• Obsah
– HTML soubor
Slide 14
Lokalizace
• Jazyk podle jazykového balíčku OS :-/
• Podadresáře v kořenovém adresáři
– Všechny soubory s relativní cestou se hledají v
pořadí:
1) \cs-CZ\path\file.ext
2) \cs\path\file.ext
3) \en-US\path\file.ext
4) \en\path\file.ext
5) \path\file.ext
Slide 15
Manifest
• Povinné elementy
– Kódování souboru a verze XML
- Jméno gadgetu
- Verze gadgetu
- Hostitelská aplikace
- Jméno a verze
- Typ a umístění souboru s obsahem
- Požadované oprávnění
Slide 16
• Nepovinné elementy:
– Údaje o autorovi, www, logo
–
–
–
–
Copyright
Popis gadgetu
Ikony
Náhled
(48x48)
Slide 17
Obsah gadgetu
• Používáme HTML, CSS a JavaScript
• Na renderování se použije Internet Explorer
• Rozdíly proti web stránce:
– Gadget API
– Nefunkční alert()
• Debugging
– debugger;
Slide 18
• Gadget je interaktivní
– Vznikají události - events
– Specifikujeme skripty které se pustí při vzniku
událostí, například:
onMouseEnter=“MouseEnterHandler()”
onMouseLeave=“MouseLeaveHandler()”
onClick=“ClickHandler()”
>
Slide 19
Windows Sidebar API
• System.Debug
– Metoda outputString(string)
• System.Diagnostics
– Metoda EventLog.writeEntry(string [, type])
type 0 = Success
1 = Error
2 = Warning
3 = Information
• System.Environment
– Metoda getEnvironmentVariable(varName)
Slide 20
• System.Machine
– Properties:
availableMemory, processorArchitecture, totalMemory
– Kolekce CPUs – informace o procesorech
jde o kolekci, nikoliv o pole – používáme .item(i) namísto indexeru
vlastnosti “name” a “usagePercentage”
– PowerStatus.* properties
batteryCapacityRemaining
batteryCapacityTotal
batteryPercentRemaining
batteryStatus
enumBatteryStatus
isBatteryCharging
isPowerLineConnected
– Událost PowerStatus.powerLineStatusChanged
Slide 21
• System.Network.Wireless
– Properties:
address
ipv6Address
primaryDNSAddress
secureConnection
signalStrength
ssid
– Events:
connectionChanged
signalStrengthChanged
Slide 22
• System.Shell
– Metody:
chooseFile(…), chooseFolder(…) - vrací System.Shell.Item
drive(driveLetter) - vrací System.ShellDrive
execute(...) - jako ShellExecute z Win API
itemFromPath(path) – vrací System.Shell.Item
knownFolder(path) – vrací System.Shell.Folder
knownFolderPath(name) – vrací System.Shell.Folder
refreshDesktop() – znovu načte ikony na desktop
saveFileDialog(...) – vrací string, vybranou cestu
Slide 23
• System.Shell
– metoda itemFromFileDrop(…) – podpora Drag & Drop:
ondrop="fileDragDropped">
function fileDragDropped(event)
{
var sFile;
var i=0;
try
{
while(System.Shell.itemFromFileDrop(event.dataTransfer, i).path)
{
sFile =
System.Shell.itemFromFileDrop(event.dataTransfer, i).path;
i++;
}
} catch(err) {}
}
Slide 24
• System.Shell.Folder
– metody:
copyHere(…)
moveHere(…)
newFolder(…)
parse(path)
– properties:
Self – vrací System.Shell.Folder
Parent – vrací string s cestou
Slide 25
• System.Shell.Item
– metody:
invokeVerb(verb) – „open“, „edit“...
metadata() – např. pro obrázky rozměry, dpi...
– properties:
isFile
isFileSystem
isFolder
isLink
link
modifyDate
name
path
SHFolder
size
type
Slide 26
• Ostatní objekty Windows Sidebar API:
– System.ContactManager
– System.MessageStore
– System.Shell.RecycleBin – event i metody
– System.Sound – beep() a playSound()
– System.Time – getLocalTime(), timeZones
– System.Gadget...
Slide 27
Gadget API – System.Gadget
• události:
– onDock, onUndock
– onShowSettings, onSettingsClosing,
onSettingsClosed
– visibilityChanged
Slide 28
• metody:
– beginTransition()
endTransition(transitionType, seconds)
transitionType =
System.Gadget.TransitionType.morph
System.Gadget.TransitionType.none
– close()
Slide 29
• properties:
– background – cesta k obrázku s pozadím
docked - dock state (true nebo false)
name – jméno gadgetu z manifestu
opacity – průhlednost v procentech
path – cesta k HTML s obsahem gadgetu
platformVersion - verze OS
settingsUI – cesta k HTML nastavení gadgetu
version – verze gadgetu z manifestu
visible – viditelnost gadgetu (true nebo false)
Slide 30
System.Gadget.Sidebar
• událost onDockSideChanged
• property dockSide
Slide 31
System.Gadget.Flyout
• události onHide a onShow
• properties:
file – cesta k HTML s obsahem flyoutu
document – vrací objekt HTML document
show – indikuje jestli je flyout zobrazen
Slide 32
System.Gadget.Settings
• metody pro čtení a zápis persistentních
nastavení
• nastavení jsou specifická pro každou instanci
gadgetu
• write(name), writeString(name)
• read(name), readString(name)
Slide 33
• System.Gadget.Settings.closingEvent
– při ošetření události onSettingsClosing:
System.Gadget.onSettingsClosing =
HandleSettingsClosing;
function HandleSettingsClosing(e)
{
...
}
Slide 34
• System.Gadget.Settings.closingEvent
– properties:
e.closeAction
System.Gadget.Settings.closeAction.commit
System.Gadget.Settings.closeAction.cancel
e.action - .commit nebo .cancel
e.cancel – nastavíme na true nebo false
e.cancellable – můžeme nastavit cancel na true?
Slide 35
Grafické objekty
• podobně jako v ASP.NET, existují nové objekty
kterých vlastnosti můžeme nastavovat jak v
skriptu, tak deklarativně
• nové elementy html:
–
–
– objekt gText (?)
Slide 36
Grafické objekty - pozadí
•
– document.body.g.background – nefunguje
– musíme přiřadit ID a pak najít podle něj
– properties:
attributes: src, rotation, opacity
blur, brightness, softEdge
left, top, height, width
– metody:
addGlow, addShadow
addImageObject, addTextObject, removeObjects
move
Slide 37
Grafické objekty – obrázky
•
– var image = document.getElementById(id);
– properties: jako gbackground
– metody:
addGlow(color, radius, alpha)
addShadow(color, radius, alpha, deltaX, deltaY)
addImageObject(path, offsetX, offsetY)
addTextObject(text, font, size, color, offsetX, offsetY)
removeObjects() – všechny objekty a efekty
move(offsetX, offsetY)
Slide 38
Tipy
• Nastavit padding a margin u na 0px
• Automatický refresh
– var timer = window.setInterval(method, interval);
• Knihovna Math
– zaokrouhlování a podobně
Slide 39
COM interop
• můžeme použít zaregistrované objekty
ActiveX
• var axObject =
new ActiveXObject(„Namespace.Class");
axObject.DoSomething()
Slide 40
Zdroje
• Galerie gadgetů:
– http://microsoftgadgets.com/
– http://gallery.live.com/
• Windows Sidebar Reference
– http://msdn2.microsoft.com/en-us/library/aa965850.aspx
• Články pro začátečníky i pokročilé
– http://www.codeproject.com/gadgets