Tworzenie gadżetów

Tworzenie gadżetów

 Krzysztof Urbas
Krzysztof Urbas
00:00
25.09.2008
6 komentarzy
28599 wyświetleń

Jeżeli uważasz, że twojemu systemowi operacyjnemu czegoś brakuje, chciałbyś rozszerzyć jego funkcje, potrzebujesz pewne programy do wyspecjalizowanych zdań - dlaczego nie napiszesz ich sobie sam? Razem z Microsoft Vista odkryjesz jakie to proste. Nie musisz posiadać dużych umiejętności, ani używać specjalnych kompilatorów. Właśnie specjalnie dla Ciebie zostały zaprojektowane gadżety. Gadżety są jedną z gorących nowości Windows Vista i zaraz dowiemy się, jak z nich korzystać. Może tego nie wiesz, ale jeśli lubisz programować, to czekałeś całe swoje życie na Windows Vista.

Krótkie wprowadzenie

Windows Vista wnosi ze sobą wiele nowych rzeczy. Jedną z nich, jak się zaraz okaże całkiem ciekawą i przydatną, jest boczny pasek Windows (ang. the Windows Sidebar), który jest skierowany właśnie do osób bawiących się w programowanie. Jest on miejscem specjalnie zarezerwowanym dla gadżetów, tak samo jak pasek szybkiego uruchamiania (ang. Quick Launch bar) jest miejscem zarezerwowanym dla skrótów. Co to są gadżety? Zaraz się dowiemy.

Gadżety są to mini-aplikacje, które mogą zrobić praktycznie wszystko. Zależy to od programisty. Ale "programista" jest to zbyt duże słowo. Gadżety są bardzo łatwe w tworzeniu i nie potrzeba dużo specjalistycznej wiedzy, aby skonstruować swój pierwszy mini program. Za to możliwości mamy ogromne. Jeżeli brakowało ci kiedyś jakiejś funkcji w twoim systemie operacyjnym, teraz możesz napisać ją sobie sam. Windows Vista zawiera już w sobie kilka gadżetów, np. podstawowy podręczny kalkulator oraz narzędzia do monitorowania danych wejściowych RSS. Jednak w każdej chwili możemy wejść na specjalnie przygotowaną stronę Microsoft Gadget Web site (j. ang.), gdzie znajdziemy wiele gadżetów stworzonych przez innych użytkowników Microsoft Vista. Dopiero tam, przeszukując galerię, uświadomimy sobie jakie możliwości niosą ze sobą, i że to może być naprawdę fajne.

Wiemy już, że gadżety to "nowatorskie" rozwiązanie skierowane do ludzi lubiących programować i chcących poszerzyć samemu możliwości swojego systemu operacyjnego. Ale od której strony się za to wziąć? Jak to działa? Łatwy przepis na gadżet to: weź prostą stronę HTML, dodaj trochę kodu VBScript (zawierający kod WMI), dorzuć odrobinę modelowych obiektów Gadżetów (zostaną omówione w późniejszym czasie) i gotowe.

Nadszedł czas, żebyśmy zobaczyli jak stworzyć nasz pierwszy gadżet. Wszystkie użyte tutaj przykłady oraz screeny pochodzą ze stron TechNet (j. ang.).

Tworzenie pierwszego gadżetu

Gadżety zostały tak zaprojektowane, aby jak najbardziej ułatwić ich tworzenie. Myślę, że nikt, kto ma przynajmniej podstawowe doświadczenie w obsłudze komputera nie powinien mieć z nimi problemów. Aby stworzyć gadżet potrzebne są tylko dwie rzeczy:

  • Plik "manifestacyjny" nazwany gadget.xml. Ten plik zawiera wszystkie cechy naszego gadżetu, wliczając jego nazwę, autora i informacje o prawach autorskich oraz informacje o stronie HTML która tworzy rzeczywisty gadżet.
  • Plik HTML (na przykład, test.htm). Może z zewnątrz to tak nie wygląda, ale gadżet jest tak naprawdę niczym innym, jak plikiem HTML: bez trudu stworzymy plik HTML, dodamy odpowiednie komendy i kody skryptu, i otrzymamy własny program.

Powyżej wymienione pliki są jedynymi koniecznie wymaganymi elementami. Jednak gdy będziemy chcieli tworzyć bardziej wyrafinowane gadżety, będziemy musieli użyć dodatkowo plików ikon, grafik, czy z ustawieniami i nie tylko. Ale spokojnie, do wszystkiego dojdziemy.

Teraz musimy powyższe dwa pliki odpowiednio umiejscowić, aby system wykrył nowy gadżet. Szybka droga do dostępu do folderu Gadżetów to wpisanie następującej ścieżki w okienku dialogowym Uruchom:

%userprofile%\appdata\microsoft\windows sidebar\gadgets

Wewnątrz tego folderu musimy utworzyć nowy, w którym umieszczamy pliki składające się na tworzony przez nas gadżet. Nazwa nowoutworzonego katalogu jest dowolna, z jednym zastrzeżeniem - musi kończyć się rozszerzeniem .gadget (na przykład, Test.gadget). Oczywiście żeby nie pogubić się w naszych gadżetach lepiej folderowi nadać nazwę związaną z zawartością. Mimo wszystko jednak, system operacyjny używa tego folderu tylko do identyfikacji pliku w środku. Sama nazwa gadżetu wywodzi się z informacji znalezionych w manifeście, nie z nazwy folderu.

I to już wszystko. Nowy gadżet został utworzony. Jak widać nie potrzebujemy do tego żadnych specjalnych kompilatorów. Wystarczy dwa pliki wgrać do odpowiedniego folderu i gotowe. Teraz naciśnijmy na bocznym pasku Windows na guzik + aby sprawić, żeby system znalazł gadżet w komputerze. Nasz gadżet pokaże się w okienku dialogowym Wybieranie Gadżetów (ang. the gadget picker dialog box).

Instalowanie gadżetu

Zakładając, że gadżet naprawdę pokazał się na liście dostępnych gadżetów, możemy łatwo go zainstalować poprzez przeciągnięcie ikony na boczny pasek a potem puszczenie klawisza myszy. Albo po prostu naciśnijmy prawym przyciskiem myszy ikonę gadżetu i naciśnijmy Dodaj. Gadżet zostanie wyświetlony, a my będziemy gotowi, aby zacząć go używać. Jeśli zdecydujemy się go usunąć z bocznego paska, po prostu przytrzymajmy mysz nad nim i kliknijmy w mały X który pokaże się w górnym prawym rogu:

Plik manifestacyjny

Jak już wiemy, do stworzenia gadżetu potrzebujemy tylko dwóch rzeczy: pliku manifestacyjnego i pliku HTML. A co to właściwie jest ten plik manifestacyjny? Jest to coś w stylu pliku .ini - prosty plik tekstowy, który zawiera informacje o gadżecie. Tylko że w naszym przypadku został on napisany w XML-u. Może brzmieć to trochę strasznie, ale jak zaraz się przekonamy, nic w tym trudnego. Przykładowy plik manifestacyjny wygląda tak:

<?xml version="1.0" encoding="utf-8" ?>

<gadget>
    <name>Mój pierwszy gadzet</name>
    <author>The Microsoft Scripting Guys</author>
    <copyright>2006 Microsoft Corporation</copyright>
    <description>Przykładowy gadżet który przywraca nazwę zainstalowanego systemu operacyjnego.</description>
    <icons>
        <icon>icon.png</icon>
    </icons>
    <version value="1.0.0.0" MinPlatformVersion="0.1"></version>
    <sidebar>
        <type>html</type>
        <permissions>full</permissions>
        <code>test.htm</code>
        <website>www.microsoft.com/technet/scriptcenter</website>
     </sidebar>
</gadget>

Możemy po prostu skopiować ten plik i używać go, w niektórych miejscach wprowadzając zmiany. Jednak nie zapominamy, że ten plik musi się nazywać gadget.xml. Komendy, jakie potrzebujemy do zmian, są określone w poniższej tabeli:

Komenda Opis
name Nazwa gadżetu, która pojawi się w okienku dialogowym Wybieranie Gadżetów
author Nazwisko i imię osoby, która napisała gadżet. Autor, prawa autorskie i opis, wszystko pojawi się w okienku dialogowym Wybieranie Gadżetów kiedy klikniemy w poszczególny gadżet.
copyright Informacje o prawach autorskich, wliczając nazwę posiadacza praw autorskich oraz datę.
description Krótki opisu gadżetu i co on robi.
icon Nazwa pliku ikony (plik ikony jest wyświetlany graficznie w oknie Wybieranie Gadżetów). Więcej informacji o ikonach znajdziemy w następnej części tego artykułu.
code Najprawdopodobniej najmniej intuicyjna nazwa komendy na świecie, ale to jest nazwa pliku HTML, który udaje gadżet.
website Strona internetowa zajmująca się tym gadżetem.

Abyśmy lepiej to wszystko zrozumieli, na poniższym obrazku przedstawione jest okno dialogowe Wybieranie Gadżetów. Strzałkami zaznaczone są powyżej wymienione elementy pliku manifestacyjnego:

Tworzenie ikony

Ikona gadżetu nie jest prawdziwą ikoną Windows, która musi zostać stworzona w specjalnym programie. Jest to tylko grafika, która staje się "symbolem" gadżetu. Jest ona więc obrazkiem. Może być w formacie .gif, .jpg albo .png. Przykładowe gadżety zawarte w systemie Windows Vista używają grafiki w formacie .png, Pozwala ona na przezroczyste tło, co dodatkowo może uatrakcyjnić ikonę. Ikonę możemy stworzyć samemu w dowolnym programie graficznym, musimy jedynie pamiętać aby zapisać ją w odpowiednim formacie (.gif, .jpg albo .png). Jaki rozmiar powinna mieć ikona? Optymalne wymiary to 64 pikseli na 64 pikseli. Jednak gdy twój obrazek będzie większy lub mniejszy okno dialogowe Wybieranie Gadżetów samo dopasuje rozmiar. Ale uwaga - może to spowodować zniekształcenia grafiki, ponieważ zostanie ona skurczona lub rozciągnięta do dostępnego obszaru. Więc najlepiej od razu samemu dostosować ikonę do wymaganego rozmiaru. Jeśli nie dodajemy ikony (albo nie wyszczególnimy jej w pliku manifestacyjnym) okno dialogowe Wybieranie Gadżetów samo wstawi ci domyślną ikonę, bez twojej ingerencji.

Oto ikona, której użyliśmy w tym artykule:

Plik HTML

Drugą wymaganą rzeczą do stworzenia gadżetu jest plik HTML. Stanowi on główną część gadżetu. Jego zadaniem jest nadać mu odpowiedni wygląd i funkcjonalność. Za wygląd odpowiadają znaczniki HTML (także style CSS), za funkcje - skrypty WMI. Więc jak widać jest to najzwyklejsza strona internetowa, która używa także dynamicznego HTML-a, do której dodajemy w pewnych miejscach kody skryptów, czyli to co dany gadżet ma wykonywać. Teraz zrobimy krótkie szkolenie jak włączyć do gadżetu kod WMI.

Praca z WMI

WMI jest technologią, która pomaga nam zarządzać wszystkim od drukarek, przez stacje dysków, po myszy i monitory. Najlepsze w tym jest to, że WMI jest łatwy w obsłudze. Na przykład, przypuśćmy, że chcielibyśmy dowiedzieć się jaki mamy zainstalowany system operacyjny na lokalnym komputerze. Nie ma problemu. Oto skrypt WMI, który znajdzie dla nas tą informację:

strComputer = "."

Set objWMIService = GetObject("winmgmts:\\" & strComputer & "\root\cimv2")

Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")

For Each objItem in colItems
    Msgbox objItem.Caption
Next

Ale uwaga. W gadżetach występuje pewne ograniczenie. Wiemy już, że gadżet to nic innego niż strona internetowa. A z powodów bezpieczeństwa, strony internetowe nie mają możliwości używania funkcji GetObject. Więc jeżeli przywykliśmy już do pisania skryptów WMI, i teraz chcielibyśmy wykorzystać jeden z naszych wcześniej napisanych w tworzonym gadżecie, albo nawet wkleimy powyższy przykładowy skrypt, może się to zakończyć wyświetleniem informacji o błędzie:

ActiveX component can't create object: 'GetObject'.

Zamiast funkcji GetObject musimy użyć CreateObject aby stworzyć w tym przypadku obiekt WbemScripting.SWbemLocator, potem użyć metody ConnectServer aby połączyć się z serwisem WMI. Po tych poprawkach nasz skrypt wygląda tak:

strComputer = "."

Set objLocator = CreateObject("WbemScripting.SWbemLocator")
Set objWMIService = objLocator.ConnectServer(strComputer, "root\cimv2")

Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")

For Each objItem in colItems
    Msgbox objItem.Caption
Next

Jedyna różnica pomiędzy pierwszym skryptem (który używa GetObject), a drugim (który używa ConnectServer) jest to że łączymy się z serwisem WMI. W pierwszym skrypcie jest jedna linia kodu:

Set objWMIService = GetObject("winmgmts:\\" & strComputer & "\root\cimv2")

W drugim skrypcie potrzebujemy dwóch linii kodu. Tworzymy obiekt WbemScripting.SWbemLocator, potem używamy metody ConnectServer, aby połączyć się z serwisem WMI. Zauważmy, że przypisujemy ConnectServer dwa parametry: nazwę komputera z którym mamy się połączyć (reprezentowaną przez zmienną strComputer) i adres przestrzeni nazw WMI z którą chcemy się połączyć (w tym przypadku, root\cimv2):

Set objLocator = CreateObject("WbemScripting.SWbemLocator")
Set objWMIService = objLocator.ConnectServer(strComputer, "root\cimv2")

Tworzenie pliku HTML

Jak już wiemy, każdy z elementów używanych do robienia strony HTML, może być także użyty w gadżecie. Większość z gadżetów stworzonych i udostępnianych na stronie internetowej Microsoft Gadget Web site używa JScript albo JavaScript. Możemy także używać kodu VBScript.

Powyżej pokazaliśmy skrypt WMI, który zwraca nazwę systemu operacyjnego zainstalowanego na lokalnym komputerze. Teraz wkleimy go do kodu HTML i tym samym stworzymy gadżet. Będzie się on składał z prostego przycisku, który po przyciśnięciu wyświetli nazwę systemu operacyjnego w okienku dialogowym. Oto kod HTML dla tego gadżetu:

<html>
<head>
    <title>Mój pierwszy gadżet</title>

    <style>
        body{width:120;height:160}
    </style>
</head>

<script language="VBScript">
    Sub RunSub
        strComputer = "."

        Set objLocator = CreateObject("WbemScripting.SwbemLocator")
        Set objWMIService = objLocator.ConnectServer(strComputer, "root\cimv2")
        Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")

        For Each objItem in colItems
            Msgbox objItem.Caption
        Next
    End Sub
</script>

<body>
    <input type="button" value="Run" name="run_button" onClick="RunSub">
</body>
</html>

Sam kod HTML jest bardzo prosty. W sekcji <body> znajduje się tylko polecenie wyświetlania pojedynczego przycisku na stronie. Kiedy go naciśniemy, wykona się podprogram RunSub. Używa ona WMI do określenia nazwy systemu operacyjnego zainstalowanego na komputerze.

Zwróćmy jeszcze uwagę na sekcję <style>. W naszym przykładzie polecenie w niej zawarte konfiguruje domyślną wysokość i szerokość gadżetu:

<style>
    body{width:120;height:160}
</style>

Ta komenda mówi, że chcemy, aby nasz gadżet miał 120 pikseli szerokości (boczny pasek w Windows ma w przybliżeniu 130 pikseli szerokości) na 160 pikseli wysokości. Dla tego gadżetu 160 pikseli może być za dużo więc po prostu zmniejszamy odpowiednią wartość:

<style>
    body{width:120;height:40}
</style>

Po instalacji tego gadżetu będzie on wyglądał tak:

A oto co się stanie gdy klikniemy na przycisk:

Właśnie stworzyliśmy nasz pierwszy gadżet.

Dalsze możliwości gadżetów

Jak dotąd utworzyliśmy gadżet, który po naciśnięciu przycisku, wyświetla nazwę systemu operacyjnego w okienku dialogowym. Taka forma nie jest zbyt praktyczna. W naszych przyszłych gadżetach może się okazać, że ilość informacji którą chcemy wyświetlić jest za duża na okienko dialogowe. Możemy je wyświetlić także w oknie przeglądarki Windows Explorer, albo po prostu na bocznym pasku. Nie ma też sensu ciągle naciskać na przycisk. Załóżmy, że chcemy napisać gadżet - zegar. Niepraktyczne byłoby rozwiązanie, żeby aktualny czas był wyświetlany po naciśnięciu przycisku.

Innymi słowy, potrzebujemy wiedzy do stworzenia gadżetu, który potrafi:

  • Wyświetlać dane w obszarze gadżetu.
  • Uzyskiwać dane automatycznie, bez ingerencji użytkownika.
  • Okresowo aktualizować informacje.

Na przykład, gadżet monitorujący dostępna pamięć na komputerze (gadżet który wkrótce stworzymy) nie może po prostu wyszukiwać dostępnej pamięci w czasie kiedy jest włączany i potem ciągle wyświetlać tą wartość. Zamiast tego musi okresowo sprawdzać na nowo dostępną pamięć.

Wyświetlanie danych

Zaczniemy od omówienia komendy <span>, łatwej i prostej drogi do wyświetlenia informacji w gadżecie.

Oto poprawiona wersja naszego pliku HTML. W tym nowym gadżecie nadal naciskamy na przycisk, który odwołuje się do podprogramu RunSub. Jednak tym razem nazwa systemu operacyjnego nie jest jak poprzednio wyświetlana w okienku dialogowym, ale zamiast tego została wypisana w obszarze gadżetu:

<html>
<head>
    <title>Mój pierwszy gadżet</title>
    <style>
        body{width:120;height:160}
    </style>
</head>

<script language="VBScript">
    Sub RunSub
        strComputer = "."

        Set objLocator = CreateObject("WbemScripting.SwbemLocator")
        Set objWMIService = objLocator.ConnectServer(strComputer, "root\cimv2")
        Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")

        For Each objItem in colItems
            DataArea.InnerHTML = objItem.Caption
        Next
    End Sub
</script>

<body>
    <input type="button" value="Run" name="run_button" onClick="RunSub"><br>
    <span id="DataArea"></span>
</body>
</html>

Wygląda to tak:

Tworzenie "samo-uruchamiającego się" gadżetu

Mając gadżet wyświetlający informacje wewnątrz swojego obszaru (jako przeciwieństwo do okienka dialogowego) zrobimy następny krok, i ponownie go ulepszymy. Teraz ten gadżet będzie zbierał informacje automatyczne i wyświetlał je w momencie uruchamiania.

Oto gadżet, który automatycznie uzyskuje i wyświetla nazwę zainstalowanego systemu operacyjnego, nie wymagając naciśnięcia przycisku:

<html>
<head>
    <title>Mój pierwszy gadżet</title>
    <style>
        body{width:120;height:160}
    </style>
</head>

<script language="VBScript">
    Sub Window_OnLoad
        RunSub
    End Sub

    Sub RunSub
        strComputer = "."

        Set objLocator = CreateObject("WbemScripting.SwbemLocator")
        Set objWMIService = objLocator.ConnectServer(strComputer, "root\cimv2")
        Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")

        For Each objItem in colItems
            DataArea.InnerHTML = objItem.Caption
        Next
    End Sub
</script>

<body>
    <span id="DataArea"></span>
</body>
</html>

Powyższy kod jest bardzo podobny do poprzedniego. Są tutaj tylko dwie różnice:

  • Usunęliśmy przycisk. To oznacza, że nie trzeba już dłużej niczego naciskać, bo nie ma nawet na co nacisnąć.
  • Dodaliśmy podprogram Window_OnLoad

W przypadku stron internetowych podprogram Window_OnLoad uruchamia się za każdym razem, gdy dana strona jest ładowana lub odświeżana. Dla gadżetów działa to dokładnie tak samo. Podprogram Window_OnLoad zostanie automatycznie uruchomiony po wczytaniu gadżetu. Więc stworzenie samo-uruchamiającego się gadżetu polega na dopisaniu podprogramu Window-OnLoad oraz zawarcia w nim kodu, który ma się wykonać przy ładowaniu gadżetu. Ta część u nas wygląda tak:

Sub Window_OnLoad
RunSub
End Sub

W podprogramie Window-OnLoad wywołujemy drugi podprogram RunSub. Moglibyśmy także umieścić kod mający się wykonać bezpośrednio w Window-OnLoad.

Tak wygląda gadżet bez przycisku:

Tworzenie "samo-odświeżającego się" gadżetu

Bez wątpienia, gadżety będą odgrywać dużą rolę, jako urządzenia monitorujące, które muszą obowiązkowo mieć wszystko na oku - od wolnej powierzchni dysku, przez połączenia sieciowe, po dostępną pamięć. Gadżety są idealne do takich zadań: są małe i dyskretne, mogą być stale wyświetlane i dostarczać informacji tylko przez rzut oka. Co równie ważne, gadżety mogą być zaprogramowane do podjęcia akcji w określonych warunkach. Przez połączenie małych rozmiarów i możliwości graficznych z kodem skryptów możemy stworzyć niewiarygodnie użyteczne narzędzia do monitorowania naszej sieci.

Oczywiście, możliwości robienia tego zależą całkowicie od zdolności gadżetu do stałego uaktualniania informacji. To ważne, aby przy włączeniu gadżet mógł wysłać polecenie ping do serwera i zweryfikować czy serwer jest dostępny. Jakkolwiek jako narzędzie monitorujące twój program jest mało użyteczny, jeśli potrafi tylko wysłać polecenie ping przy uruchamianiu. Zamiast tego gadżet musi odświeżać się okresowo: w regularnych odstępach pozyskiwać uaktualnione informacje. Poniżej prezentujemy kod, który wyświetla wielkość dostępnego miejsca na dysku. Zmieniliśmy funkcje naszego przykładowego gadżetu, ponieważ ciągłe odświeżanie nazwy systemu operacyjnego nie miałoby sensu. Za to ilość dostępnego miejsca na dysku zmienia się podczas pracy z komputerem, więc taki mini program może być całkiem przydatny.

<html>
<head>
    <title>Mój gadżet</title>
    <style>
        body{width:120;height:40"}
    </style>
</head>

<script language="VBScript">
    Sub Window_Onload
        GetMemory
        iTimerID = window.SetInterval("GetMemory", 10000)
    End Sub

    Sub GetMemory
        Set objLocator = CreateObject("WbemScripting.SwbemLocator")
        Set objWMIService = objLocator.ConnectServer(".", "root\cimv2")
        Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")
        For Each objItem in colItems
            DataArea.InnerHTML = objItem.FreePhysicalMemory
        Next
    End Sub
</script>

<body>
    <span id="DataArea"></span>
</body>
</html>

Podprogram, który aktualnie określa ilość dostępnej pamięci (podprogram nazwany GetMemory), wygląda tak:

Sub GetMemory
Set objLocator = CreateObject("WbemScripting.SwbemLocator")
Set objWMIService = objLocator.ConnectServer(".", "root\cimv2")
Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")
For Each objItem in colItems
DataArea.InnerHTML = objItem.FreePhysicalMemory
Next
End Sub

Aby gadżet regularnie się odświeżał, w podprogramie Window_OnLoad musimy dodać nową funkcję:

Sub Window_Onload
GetMemory
iTimerID = window.SetInterval("GetMemory", 10000)
End Sub

Jak widać, w podprogramie Window_OnLoad najpierw wywołujemy GetMemory, aby po włączeniu gadżetu od razu posiadał on informacje o wolnej pamięci. Jednak nas interesuje następna linia:

iTimerID = window.SetInterval("GetMemory", 10000)

W tej linii kodu używamy funkcji SetInterval aby stworzyć licznik. Zmusza on gadżet do wywoływania podprogramu GetMemory co 10 sekund (10,000 milisekund). Sprawia to, że co 10 sekund będzie odczytywał aktualną ilość wolnego miejsca na dysku. Jeśli chcemy zmienić okres odświeżania, musimy zmienić wartość drugiego parametru. Pamiętajmy, że czas podawany jest w milisekundach. Tak więc 10 sekund da wartość parametru 10000, ustawienie parametru na 5000 spowoduje uaktualnianie co 5 sekund (bo 5000 milisekund). Zwiększenie czasu spowoduje dłuższe przerwy pomiędzy kolejnymi pomiarami.

Tutaj mamy nasz gadżet w akcji:

Zmiana tła w gadżecie

Wspomnimy teraz krótko o kilku metodach uatrakcyjnienia wyglądu gadżetu. Są one bardzo proste, mogą być znane osobom piszącym strony internetowe w HTML-u ponieważ są praktycznie identyczne.

Przypuśćmy, że posiadamy grafikę która może stworzyć dobre tło dla naszego gadżetu. W takim przypadku, wszystko co musimy zrobić to wpisać background do komendy <body> w pliku HTML gadżetu. Ta linia kodu sprawi że gadżet użyje pliku nazwanego tlo.jpg jako tła:

<body background = "tlo.jpg">

Warunkiem jest tylko to żeby plik tlo.jpg znajdował się w folderze gadżetu.

Ewentualnie, możemy stworzyć gadżet z tłem w jednolitym kolorze przez dodanie parametru bgcolor do komendy <body>. Chcesz mieć gadżet z czerwonym tłem? Czemu nie.

<body bgcolor = "red">

Zamiast słowa angielskiego "red" oznaczającego nazwę koloru możemy wprowadzić też wartość koloru kodem. Wpisując poniższą linijkę do gadżetu otrzymamy tło w kolorze niebieskim:

<body bgcolor = "#0000FF">

Ostatecznie możemy dać gadżetowi gradientowe tło przez użycie jednego z multimedialnych filtrów stron internetowych firmy Microsoft. W tym gadżecie zmodyfikowaliśmy <body> inną drogą niż przez dopisanie do tego znacznika parametru. Tutaj wykorzystujemy style CSS. Wybraliśmy białą czcionkę - 8-punktowy Arial oraz dodaliśmy filtr gradientowy. Oto kod:

<html>
<head>
    <title>Mój Gadżet</title>
    <style>
        body{width:120;height:160;font:8 pt Arial;color:white;
        filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr="#000000",
            EndColorStr="#0000FF")}
    </style>
</head>

<script language="VBScript">
    Sub RunSub
        strComputer = "."
        Set objLocator = CreateObject("WbemScripting.SwbemLocator")
        Set objWMIService = objLocator.ConnectServer(".", "root\cimv2")
        Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")
        For Each objItem in colItems
            DataArea.InnerHTML = objItem.Caption
        Next
    End Sub
</script>

<body>
    <input type="button" value="Run" name="run_button" onClick="RunSub"><P>
    <span id="DataArea"></span>
</body>
</html>

Prawda że teraz wygląda ładniej? Nadal nie jest to dzieło sztuki, ale lepsze to niż posiadanie gładkiego białego okienka umieszczonego na bocznym pasku.

Przegląd nadchodzących atrakcji

Gadżety oferują wiele więcej możliwości niż te, które omówiliśmy w tym artykule. Na zakończenie przedstawiamy trochę bardziej skomplikowaną aplikację, która robi dwie rzeczy: monitoruje dostępną pamięć oraz po naciśnięciu przycisku Informacje wyświetla na stronie internetowej więcej szczegółów o systemie. Pokaże on, że gadżety naprawdę kryją w sobie praktycznie nieograniczone zdolności. Możemy stworzyć idealnie dostosowany do naszych potrzeb. Poniżej znajduje się kod pliku HTML, jednak nie będziemy go tu już omawiać w szczegółach. Powodzenia.

<html>
<head>
    <title>Mój gadżet</title>
    <style>
        body{width:120;height:80}
    </style>
</head>

<script language="VBScript">
    Sub Window_Onload
        GetMemory
        iTimerID = window.SetInterval("GetMemory", 10000)
    End Sub

    Sub GetMemory
        Set objLocator = CreateObject("WbemScripting.SwbemLocator")
        Set objWMIService = objLocator.ConnectServer(".", "root\cimv2")
        Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")
        For Each objItem in colItems
            DataArea.InnerHTML = objItem.FreePhysicalMemory
        Next
    End Sub

    Sub RunSub

        Set objLocator = CreateObject("WbemScripting.SwbemLocator")
        Set objWMIService = objLocator.ConnectServer(".", "root\cimv2")

        Set colItems = objWMIService.ExecQuery("Select * From Win32_ComputerSystem")
        For Each objItem in colItems
            strHTML = "Computer Name: " & objItem.Name & "&lt;br&gt;"
            strHTML = strHTML & "User Name: " & objItem.UserName & "&lt;br&gt;&lt;br&gt;"
        Next

        Set colItems = objWMIService.ExecQuery("Select * From Win32_OperatingSystem")
        For Each objItem in colItems
            strHTML = strHTML & "Operating System: " & objItem.Caption & "&lt;br&gt;"
            strHTML = strHTML & "Service Pack: " & objItem.ServicePackMajorVersion & "&lt;br&gt;&lt;br&gt;"
        Next

        Set colItems = objWMIService.ExecQuery("Select * From Win32_Processor")
        For Each objItem in colItems
            strHTML = strHTML & "Processor: " & objItem.Caption & "&lt;br&gt;&lt;br&gt;"
        Next

        Set colItems = objWMIService.ExecQuery _
            ("Select * From Win32_NetworkAdapterConfiguration Where IPEnabled = True")
        For Each objItem in colItems
            strHTML = strHTML & objItem.Caption & "&lt;br&gt;"
            For Each strAddress in objItem.IPAddress
                strHTML = strHTML & "IP Address: " & strAddress & "&lt;br&gt;"
            Next
        Next

        Set objIE = CreateObject("InternetExplorer.Application")
        objIE.Navigate("about:blank")
        objIE.Toolbar = 0
        objIE.StatusBar = 0
        Set objDoc = objIE.Document.Body
        objDoc.InnerHTML = strHTML
        objIE.Visible = True
    End Sub
</script>

<body>
    <span id="DataArea"></span><p>
    <input type="button" value="Informacje" name="run_button" onClick="RunSub">
</body>
</html>

Spodobał Ci się ten artykuł? Podziel się z innymi!

Źródło:

Polecamy również w kategorii Zasoby dla profesjonalistów IT

Komentarze

  • Mystenes 14:36 26.09.2008

    <p>wreszcie coś przydatnego ludziom. moja pierwsza 5 dla artykułów.</p>

  • Nitszu 13:18 06.11.2008

    <p>ładny plagiat ze stron microsoftu:</p> <p>http://www.microsoft.com/poland/technet/bazawiedzy/centrumrozwiazan/cr040.mspx</p>

  • Daniel K. 01:25 12.11.2008

    <p>To nie plagiat, umieszczony na łamach Technetu art jest autorstwa jednego z redaktorów CXP.</p> <p> </p> <p>Pozdrawiam ;-)</p>

  • kotlin 20:32 15.12.2009

    Witam. Czy można prosić o krótki poradnik jak zmodyfikować taki gadżet aby na bieżąco wyświetlał dane z podanej strony internetowej??

  • lol 22:55 22.05.2010

    mozesz uzycz iframe np

  • p 18:44 27.07.2015

    nie działa

Skomentuj

Autor