Windows 7 i gadżety pulpitu – praktyczny przewodnik

by batman on Sierpień 6, 2010

Wraz z nadejściem Windows Vista Microsoft udostępnił użytkownikom swojego systemu operacyjnego gadżety pulpitu. Są to niewielkie aplikacje umieszczone na pasku nazwanym Windows Sidebar. Następca Visty – Windows 7 – usunął pasek, dzięki czemu gadżety stały się czymś więcej niż ładną ikonką po prawe stronie ekranu. Jako przykładowe gadżety można wymienić kalendarz, notatnik, zegar, podręczny czytnik RSS, czy też monitor zasobów komputera. Jak widać zastosowanie tych aplikacji idealnie pasuje do ich nazwy. Niemniej czasami są bardzo pomocne, ponieważ oferują szybki dostęp do konkretnych informacji.

W jakiej technologii tworzone są gadżety?

Jeśli myślicie, że do tworzenia gadżetów będzie wam potrzebne Visual Studio oraz znajomość C#, to jesteście w błędzie. Podstawową technologią w jakiej tworzy się gadżety jest Javascript. Za wygląd odpowiada HTML oraz CSS. Gadżety renderowane są tak samo jak strony internetowe, a do renderowania wykorzystany jest silnik przeglądarki Internet Explorer. Dzięki temu mamy możliwość korzystania z ActiveX, a ponieważ gadżety nie są uruchamiane w kontekście strony internetowej, nie ma zastosowania reguła tej samej domeny podczas korzystania z AJAXa. Co więcej, w gadżetach można korzystać z popularnych bibliotek Javascript (np z jQuery) oraz z Flasha. Niestety nie miałem okazji przetestować Silverlighta. Podobnie jak ma to miejsce w Adobe AIR (dla programistów Javascript), jest tylko jedno środowisko, w którym uruchamiane są gadżety. Jest to o tyle ważne, że nie trzeba martwić się o zgodność z różnymi przeglądarkami.

Struktura gadżetu

W minimalnej wersji gadżet składa się jedynie z dwóch plików – manifestu oraz pliku HTML stanowiącego treść gadżetu. Do tego zestawu można dodać pliki CSS, Javascript, grafiki oraz kolejne pliki HTML. Nic nie stoi na przeszkodzie, aby pliki umieszczać w katalogach. Po zakończeniu prac nad gadżetem należy spakować wszystko jako archiwum zip i zmienić jego rozszeżenie na .gadget. W takiej postaci możemy upublicznić nasz gadżet.

Tworzenie gadżetu

Tworzenie gadżetu rozpoczynamy od stworzenia w folderze

C:\Users\batman\AppData\Local\Microsoft\Windows Sidebar\Gadgets,

gdzie batman będzie waszą nazwą użytkownika, katalogu o nazwie Test.gadget. Ważne jest, aby pamiętać o dodaniu przyrostka (sufiksu) .gadget.

Wewnątrz katalogu tworzymy dwa pliki: gadget.xml oraz Test.html. Plik gadget.xml jest manifestem i zawiera wszystkie niezbędne informacje o naszym gadżecie. Manifest w pełnej wersji wygląda następująco

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
	<name>Test Gadget</name>
	<namespace>my.gadgets</namespace>
	<version>1.0.0.0</version>
	<author name="Maciej batman Wilgucki">
		<info url="wilgucki.pl" text="My site" />
		<logo src="logo.png" />
	</author>
	<copyright>© wilgucki.pl</copyright>
	<description>My Test Gadget</description>
	<icons>
		<icon height="48" width="48" src="icon.png" />
	</icons>
	<hosts>
		<host name="sidebar">
			<base type="HTML" src="Test.html" />
			<permissions>Full</permissions>
			<platform minPlatformVersion="1.0" />
			<defaultImage src="icon2.png" />
			<autoscaleDPI />
		</host>
	</hosts>
</gadget>

Poszczególne węzły oznaczają:

  • name (wymagany) – nazwa wyświetlana użytkownikowi
  • namespace (opcjonalny) – w chwili obecnej nie ma żadnego zastosowania. Do wykorzystania w przyszłości
  • version (wymagany) – wersja gadżetu. Powinna składać się z 4 liczb – major.minor.revision.build. Każda z tych liczb może zawierać od 0 do 4 cyfr.
  • author (opcjonalny) – zawiera informacje o autorze. Nazwa autora (imię i nazwisko, nick lub nazwa firmy) powinna znaleźć się w atrybucie name.
    • info (opcjonalny) – któtka informacja o autorze wraz z linkiem do strony autora. W elemencie tym wymagane jest podanie atrybutu url, w którym powinien znaleźć się adres www autora. Jeśli użyty zostanie opcjonalny atrybut text, wówczas zostanie on wyświetlony jako link (brak tego atrybutu spowoduje wyświetlenie adresu).
    • logo (opcjonalny) – po podaniu w wymaganym atrybucie src adresu loga, zostanie ono wyświetlone obok nazwy autora gadżetu
  • copywrite (opcjonalny) – informacja o prawach autorskich
  • description (opcjonalny) – opis gadżetu
  • icons (opcjonalny) – zawiera ikonę wyświetlaną w galerii gadżetów
    • icon (opcjonalny) – konkretna ikona opisana przy pomocy trzech atrybutów – wymaganego src, wskazującego na położenie pliku graficznego oraz opcjonalnych width i height, określających odpowiednio szerokość oraz wysokość ikony.
  • hosts (wymagany) – zawiera informacje o hostach każdego gażdetu
    • host (wymagany) – reprezentuje pojedynczy host. W chwili obecnej hostem dla gadżetów może być tylko sidebar, dlatego też w wymaganym atrybucie name musi się pojawić tekst sidebar.
      • base (wymagany) – definiuje technologię, w jakiej wykonany jest gadżet. Określamy ją w wymaganym atrybucie type. W chwili obecnej można wybrać jedynie HTML. Drugim obowiązkowym atrybutem jest atrybut src, określający położenie głównego pliku HTML gadżetu.
      • permissions (wymagany) – Jedyną możliwą wartością jest Full.
      • platform (wymagany) – określa platformę na jakiej można uruchomić gadżet. Musi zawierać wymagany atrybut minPlatformVersion z wartością “1.0”.
      • defaultImage (opcjonalny) – określa ikonę jaka pojawi się w momencie przeciągania gadżetu na Sidebar
      • autoscaleDPI (opcjonalny) – atrybut dostępny tylko w Windows 7. Dzięki niemu do powiększania elementów zostanie wykorzystana technologia adaptive Zoom.

Jak widać większość elementów odpowiada tylko i wyłącznie za reprezentację gadżetu w galerii. Najlepiej widać to na poniższym obrazku (pochodzi on z serwisu MSDN).

 

Drugim plikiem jaki musimy stworzyć, jest Test.html. W najprostszej postaci będzie wyglądał nastęująco

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
	</head>
	<body>
		<div id="gadgetContent">
		</div>
    </body>
</html>

Wystarczy teraz otworzyć galerię gadżetów (klikamy prawym przyciskiem myszy na pulpicie i wybieramy z menu kontekstowego Gadżety) i dwa razy kliknąć lewym przyciskiem myszy na naszym gadżecie. W ten oto prosty sposób stworzyliśmy i uruchomiliśmy gadżet.

Rozmiar gadżetu

Każdy gadżet może znajdować się w jednym z dwóch stanów – dock oraz undock. W przypadku Windows Vista było to jasne, ponieważ gadżet mógł być przypięty do paska lub nie. W Windows 7 nie ma już paska Sidebar. Pojawiła się za to specjalna ikona umożliwiająca powiększenie gadżetu. Odpowiada ona za przełączanie stanów z dock (normalny) na undock (powiększony) i odwrotnie. Ponieważ Sidebar w Windows Vista miał określoną szerokość, zaleca się, aby szerokość gadżetu w stanie dock wynosiła nie więcej niż 130 pikseli. Takiego ograniczenia nie ma w przypadku stanu undock.

Zmiana stanu gadżetu jest możliwa po kliknięciu w ikonę za to odpowiedzialną. Przykładowy kod dokonujący zmiany rozmiaru możecie zobaczyć poniżej (zmodyfikowana wersja skryptu ze stron MSDN)

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
		<style type="text/css">
		body {
			width: 130px;
			height: 108px;
		}
		</style>
		<script type="text/javascript">
		// Gadget width and height.
		var gadgetWidth = 130;
		var gadgetHeight = 108;

		// Amount to scale gadget when docked or undocked.
		var scaleDocked = 1;
		var scaleUndocked = 2;

		// Amount of time desired to perform transition (in seconds).
		var timeTransition = 2;

		// Declare the dock and undock event handlers.
		System.Gadget.onDock = CheckDockState;
		System.Gadget.onUndock = CheckDockState;

		// --------------------------------------------------------------------
		// Check the gadget dock state; set the gadget style.
		// --------------------------------------------------------------------
		function CheckDockState()
		{
			System.Gadget.beginTransition();
			var oBody = document.body.style;
			if (System.Gadget.docked)
			{
				oBody.width = gadgetWidth * scaleDocked;
				oBody.height = gadgetHeight * scaleDocked;
			}
			else
			{
				oBody.width = gadgetWidth * scaleUndocked;
				oBody.height = gadgetHeight * scaleUndocked;  
			}
			System.Gadget.endTransition(System.Gadget.TransitionType.morph, timeTransition);
		}
		</script>
	</head>
	<body>
		<div id="gadgetContent"></div>
    </body>
</html>

Jeśli jakieś elementy kodu są dla was niejasne, nie przejmujcie się. W następnych częściach praktycznego przewodnika dokładnie opiszę najciekawsze elementy. Jeśli już teraz chcielibyście wiedzieć co w trawie piszczy, polecam lekturę Gadget Object Reference.

Ustawienia (settings) i widok szczegółowy (flyout)

Zarówno ustawienia (settings) jak i widok szczegółowy (flyout) stanowią odrębne pliki HTML, niezależne od głównej treści.

Ustawienia są miejscem, w którym użytkownik zyskuje możliwość presonalizacji gadżetu oraz wybrania interesujących go opcji. Zazwyczaj jest to formularz, ewentualnie linki do pomocy/FAQ. Aby skorzystać z widoku ustawień, wystarczy w głównym pliku gadżetu przypisać do właściwości settingsUI obiektu System.Gadget ścieżkę do pliku HTML reprezentującego widok ustawień (o tym również dokładniej napiszę w następnych częściach przewodnika). Oto przykładowe pliki

Test.html

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
		<style type="text/css">
		body {
			width: 130px;
			height: 108px;
		}
		</style>
		<script type="text/javascript">
		System.Gadget.settingsUI = "Settings.html";
		</script>
	</head>
	<body>
		<div id="gadgetContent"></div>
    </body>
</html>

Settings.html

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
		<style type="text/css">
		body {
			width: 200px;
			height: 100px;
		}
		</style>
		<script type="text/javascript">
		</script>
	</head>
	<body>
		<form>
			<label>
				<input type="checkbox" name="someSetting" value="1" />
				Jakaś opcja
			</label>
			<br />
			<label>
				<input type="checkbox" name="anotherSetting" value="1" />
				Inna opcja
			</label>
		</form>
		<a href="#">FAQ</a>
    </body>
</html>

Na podobnej zasadzie działa widok szczegółowy (flyout), z tą róznicą, że to my musimy określić akcję jaka wyświeli oraz ukryje flyout.

Test.html

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
		<style type="text/css">
		body {
			width: 130px;
			height: 108px;
		}
		</style>
		<script type="text/javascript">
		System.Gadget.Flyout.file = "Flyout.html";
		function showFlyout()
		{
			System.Gadget.Flyout.show = true;
		}
		</script>
	</head>
	<body>
		<a href="#" onclick="showFlyout(); return false;">pokaż szczegóły</a>
    </body>
</html>

Flyout.html

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
		<style type="text/css">
		body {
			width: 300px;
			height: 70px;
		}
		</style>
		<script type="text/javascript">
		function hideFlyout()
		{
			System.Gadget.Flyout.show = false;
		}
		</script>
	</head>
	<body>
		<a href="#" onclick="hideFlyout(); return false;">zamknij</a>
    </body>
</html>

Co dalej?

I to by było na tyle, jeśli chodzi o podstawy tworzenia gadżetów dla Windows 7. Jeśli zainteresowała was ta tematyka oraz nie możecie się doczekać kolejnych części przewodnika, polecam zapoznać się z opisem znajdującym się na stronach MSDN.

W następnych częściach dokładnie opiszę każdy z wymienionych dzisiaj elementów oraz zaprezentuję praktyczne zastosowanie niektórych obiektów znajdujących się w dokumentacji. Pokażę również w jaki sposób korzystać ze zdalnych zasobów oraz co dzięki temu możemy zyskać. Na koniec opiszę krok po kroku proces tworzenia praktycznego gadżetu.

Na zakończenie dodam jeszcze, że kod HTML, CSS oraz Javascript znajdujące się w dzisiejszych przykładach, został maksymalnie uproszczony, dlatego też daleko mu do standardów.

7 comments

Widzę, że i Tobie temat gadżetów stał się bliższy. Bardzo dobre rozwiązanie na mini-programiki. Ostatnio bawiłem się w sprawdzanie dostępności serwera (zielona ikonka – on, czerwona – off).

BTW. Jakby ktoś chciał żywy przykład, a nie mógł się doczekać, aż Ty napiszesz kolejną część, to zapraszam do siebie:
http://blog.vokiel.com/the-small-calendar-windows-gadget

by Vokiel on 6 sierpnia 2010 at 22:18. #

Wiedziałem, że gdzieś widziałem polski przykład ;)

Tematyka gadżetów stała mi się bliska, jak zapragnąłem mieć na pulpicie kilka informacji takich jak powiadomienia o mailach i rss-ach. Ani Adobe AIR ani tym bardziej aplikacja napisana w C# nie pasowały do tego problemu. Poszukałem więc i znalazłem gadżety. Fajnie się je tworzy i w zupełności wystarczają do moich potrzeb.

by batman on 6 sierpnia 2010 at 22:25. #

Sam trochę walczyłem z gadżetami, zrobiłem kilka sztuk dla interia.pl ;) Ciekaw jestem czy poprawili już Vistowy błąd polegający na tym, że gdy tekst nachodził na przezroczysty fragment tła w png to dookoła robiła się różowa poświata ;> ?

by sokzzuka on 6 sierpnia 2010 at 22:29. #

To o czym piszesz prawdopodobnie wynika z faktu, iż gadżety na Viście korzystały z silnika IE7. Windows 7 używany jest silnik IE8 (musiałbym się upewnić).

by batman on 6 sierpnia 2010 at 22:38. #

Pytanie 1.
w czym to jest lepsze od AIR ?

pytanie 2.
czy bazowanie na ie nie stwarza zagrożenia ataku przez gadget ?

by Anonymous on 7 sierpnia 2010 at 10:04. #

A wystarczyłoby użyć rainmeter i wszystko byłoby fajniejsze i prostsze : )

by Anonymous on 7 sierpnia 2010 at 21:21. #

~Anonimowy 11:04
1. Gadżety są na pewno lepsze pod względem dostępności, ponieważ nie wymagają środowiska uruchomieniowego. Należy jednak pamiętać, że wszystko ma swoje zastosowanie i używanie czegoś tylko dla samego faktu użycia, mija się z celem. Gadżety dają możliwość stworzenia w miarę szybko proste "bajerki" na pulpit. AIR z kolei pozwala na tworzenie rozbudowanych bogatych aplikacji, będących desktopowym frontendem usługi sieciowej.

2. Zagrożenie jest takie samo jak w przypadku każdej innej aplikacji. Jeżeli pochodzi ona z niezaufanego źródła, to istnieje potencjalne ryzyko zainfekowania systemu jakimś syfem.

~Anonimowy 22:21
Większość funkcjonalności oferowanych przez rainmeter jest już dostępna. Resztę można bardzo szybko dopisać.

by batman on 8 sierpnia 2010 at 17:19. #

Leave your comment

Required.

Required. Not published.

If you have one.


Subscribe without commenting