Windows 7 i gadżety pulpitu – praktyczny przewodnik cz.2
sie 30 2010 w Artykuly, Systemy operacyjne przez Maciej Wilgucki | Wyświetleń: 2 919 | 
(3 głosów, średnia: 4,67 / 5)
W poprzedniej części przewodnika opisałem najważniejsze zagadnienia związane z gadżetami pulpitu dostępnymi w systemach operacyjnych Windows Vista oraz Windows 7. W dzisiejszym oraz kilku następnych wpisach skupię się na poszczególnych elementach tej technologii. Zacznę od okien Settings oraz Flyouts.
Autor: Maciej Wilgucki
Struktura aplikacji
Zanim przejdziemy dalej, należy wspomnieć nieco o strukturze aplikacji. Nie różni sie ona zbytno od struktury aplikacji internetowej. Mamy dokument główny, dokumenty dodatkowe oraz zasoby (CSS, Javascript oraz obrazki). Proponowany przeze mnie układ katalogów wygląda następująco.
Katalogi raczej nie wymagają wyjaśnienia – są przeznaczone do przechowywania obrazków, skryptów Javascript oraz plików CSS. Z kolei pliki to manifest (gadget.xml), główny dokument gadżetu (Main.html – nazwa definiowana w manifeście) oraz pozostałe dokumenty .W tym przypadku jest to tylko Settings.html, ale nic nie stoi na przeszkodzie, aby tych dokumentów było więcej. W dalszej części dzisiejszego przewodnika dojdzie jeszcze jeden plik – Flyout.html W przykładach wykorzystałem bibliotekę jQuery, dzięki której wiele czynności zostało uproszczonych, przez co kod jest bardziej czytelny. Nie jest to wymóg. Jeśli nie znacie/nie lubicie jQuery możecie skorzystać z innej biblioteki lub nie korzystać wcale.
Settings
Settings to nic innego jak okno ustawień. Jest ono reprezentowane przez osobny dokukent HTML, w którym powinny znaleźć się elementy formularza (pola tekstowe, checkboxy, radiobuttony itp). Nie ma konieczności stosowania przycisków, ponieważ są one dodawane automatycznie.
Jeśli chcemy wykorzystać okno ustawień wystarczy, że do właściwości settingsUI obiektu System.Gadget przypisana zostanie ścieska wskazująca na plik HTML. Ścieżka może być relatywna lub bezwzględna. Przypisanie powinno nastąpić w głównym dokumencie.
System.Gadget.settingsUI = "/Settings.html";
Dodanie powyższego kodu do gadżetu spowoduje pojawienie się ikonki klucza (wyróżniona na czerwono),
kliknięcie której spowoduje otwarcie dokumentu wskazanego we właściwości settingsUI. Dokument ten zostanie zamieszczony w specjalnym oknie, zawierającym nagłówek oraz niezbędne przyciski.
W prawym górnym roku tego okna pojawi się podgląd gadżetu. Ponieważ dzisiejszy wpis poświęcony jest jedynie oknom Settings oraz Flyout, gadżet nie będzie zawierał żadnych elementów graficznych. Stąd ten biały pionowy pasek na powyższym screenie.
Jak już wspomniałem, okno ustawień to nic innego jak najzwyklejszy formularz HTML. W naszym przykładzie formularz będzie zawierał jedynie jedno pole.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="/styles/reset.css" />
<link type="text/css" rel="stylesheet" href="/styles/global.css" />
<script type="text/javascript" src="/scripts/jquery-1.4.2.min.js"></script>
</head>
<body class="settings">
<label>Your name:</label>
<input type="text" name="your-name" id="your-name" />
</body>
</html>
Samo dodanie formularza oraz wskazanie go jako okno ustawień na nic się zda, jeśli chcemy przechowywać i odczytywać wprowadzone przez użytkownika dane. Na szzęście mamy do dyspozycji obiekt System.Gadget.Settings, który pozwala na zapisywanie i odczytywanie ustawień. Służą do tego cztery metody, przez ten obiekt udostępnione. Są to:
- write
- writeString
- read
- readString
Metody z przyrostkiem String służą odpowiednio do zapisania i odczytania danych tekstowych. Pozostałe typy danych powinny być zapisywane i odczytywane przez metody write oraz read. Jest to podyktowane względami wydajnościowymi. Warto mieć również na uwadze limity, które ograniczają ilość przechowywanych w ten sposób informacji. Klucze mogą mieć jedynie 1024 znaki, a przypisane im wartości 2048 znaki. W przypadku przekroczenia tych limitów, dane zostaną skrócone do maksymalnych wartości.
Dane zapisywane w oknie ustawień można przechwycić w zdarzeniu onSettingsClosing obiektu System.Gadget. Przechwycenie tego zdarzenie musi nastąpić w pliku okna ustawień. W przeciwnym razie dane nie będą dostępne.
// przechwycenie zdarzenia zamykania okna ustawień
System.Gadget.onSettingsClosing = SettingsClosing;
// obsługa zdarzenia
function SettingsClosing(event)
{
// czy zamknięcie nastąpiło na skutek kliknięcia w przycisk "OK"
if(event.closeAction == event.Action.commit) {
// zapisanie wprowadzonych danych
System.Gadget.Settings.writeString("name", $("#your-name").val());
}
}
Jeśli chcemy od razu po zamknięciu okna ustawień mieć dostęp do danych, musimy obsłużyć kolejne zdarzenie związane z ustawieniami – onSettingsClosed. Przy czym należy pamiętać, że obsługa tego zdarzenia musi – w przeciwieństwie do zdarzenia onSettingsClosing – odbyć się w głównym oknie gadżetu.
// przechwycenie zdarzenia zamknięcia okna ostawień
System.Gadget.onSettingsClosed = SettingsClosed;
// obsługa zdarzenia
function SettingsClosed(event)
{
// odczytanie wprowadzonych danych
var name = System.Gadget.Settings.readString("name");
$("#entered-name").text(name);
}
Flyout Flyout jest specjalnym typem okna, które stosuje się do zaprezentowania dodatkowych informacji. Podobnie jak w przypadku okna ustawień, Flyout ma swój własny dokument HTML. Flyout jest wyświetlany w momencie ustawienia właściwości show obiektu System.Gadget.Flyout na true, a ukrywany po ustawieniu jej wartości na false.
// wskazanie pliku Flyout
System.Gadget.Flyout.file = "/Flyout.html";
$(document).ready(function() {
$("#show-flyout a").click(function() {
// wyświetlenie Flyout
System.Gadget.Flyout.show = true;
return false;
});
});
Zamknięcie flyout odbywa się na tej samej zasadzie, przy czym kod odpowiedzialny za zamknięcie musi się znaleźć w pliku z flyout.
$(document).ready(function() {
$("#hide-flyout a").click(function() {
// ukrycie Flyout
System.Gadget.Flyout.show = false;
return false;
});
});
Zarówno Settings jak i Flyout nie muszą ograniczać się do pojedynczego dokumentu HTML. W zależności od potrzeb można stworzyć kilka dokumentów i poprzez podmianę odpowiedniej właściwości zmieniać zawartość okna ustawień i flyout.
Gotowy gadżet może pobrać stąd. Jeśli chcecie podejrzeć jego źródło, wystarczy, że zmienicie rozszerzenie .gadget na .zip i wypakujecie archiwum.
