Szybki Start Informacje o module Opis modułu W tym rozdziale utworzysz pierwsza aplikację Silverlight. Poznasz zasady pracy z Silverlight w środowisku Visual Studio 2010. Zobaczysz jak wygląda proces dystrybucji oraz osadzenia na stronie WWW aplikacji Silverlight. Poznasz sposoby przekazywania parametrów. Cel modułu Celem modułu jest wprowadzenie do budowy i dystrybucji aplikacji Silverlight z użyciem Visual Studio. Uzyskane kompetencje Po zrealizowaniu modułu będziesz: wiedział czym jest aplikacja Silverlight oraz na czym polega oddzielenie interfejsu użytkownika od logiki Twojej aplikacji, potrafił stworzyd i umieścid na własnej stronie obiekt Silverlight, Wymagania wstępne Przed przystąpieniem do pracy z tym modułem powinieneś: znad podstawy języka HTML oraz XML rozumied zasady uruchamiania obiektów zewnętrznych przez przeglądarki pamiętad zasady pracy w środowisku Visual Studio
Przygotowanie teoretyczne Przykładowy problem Decydując się na pracę z nową technologią powinieneś znad nie tylko środowisko programistyczne (w naszym przypadku Visual Studio 2010) ale dodatkowo powinieneś poznad strukturę nowej technologii. W swojej podstawowej postaci Silverlight służy do budowy aplikacji działających po stronie przeglądarki. Dodatkowo Twoje aplikacje mogą posiadad opcje instalowania na komputerze użytkownika. Podstawy teoretyczne Załóżmy, że posiadasz zainstalowane Visual Studio 2010, aby rozpocząd pracę z technologią Silverlight 4 powinieneś zainstalowad Microsoft Silverlight 4 Tools for Visual Studio 2010. Zestaw narzędzi możesz znaleźd pod adresem www.silverlight.net. Pakiet ten zainstaluje między innymi: Środowisko uruchomieniowe, Silverlight 4 SDK, WCF (ang. Windows Communication Foundation) dla Silverlight 4. Poprawne zainstalowanie powyższych narzędzi pozwala rozpocząc przygodę z technologią Silverlight. Przyjrzyjmy się strukturze projektu Silverlight. Rozpoczynając nowy projekt mamy do dyspozycji pięc możliwości: Pusta aplikacja Silverlight podstawowy projekt, Biblioteka Silverlight może zbierad dane potrzebne w Twoich aplikacjach, Szkielet aplikacji Biznesowej, Szkielet aplikacji z wzorcem nawigacyjnym, Szkielet biblioteki obudowującej usługi zewnętrzne. Rys. 1 Zainstalowane rodzaje typów projektów Załóżmy, dla prostoty, że wybierzemy prostą (pustą) aplikację Silverlight. Następnie musimy zdecydowad, czy chcemy używad dołączonego do VStudio serwera IIS z wygenerowanym szkieletem strony w ASP. Odznaczmy tę opcję (czyli zdecydujemy się wyłącznie na szkielet aplikacji Silverlight).
łowo kluczowe partial oznacza że definicja tej klasy moze byd zawarta w wielu plikach Rys. 2 Uruchomienie bez utrzymywania na stronie HTML Po zaakceptowaniu wyboru, Visual Studio wygeneruje namiastkę kodu twojego projektu. Przyjrzyjmy się jego strukturze. Rys. 3 Struktura projektu Okno Solution Explorer poza standardowymi elementami (czyli Properties i References) zawiera dwa dodatkowe elementy: Plik App.xaml wraz ze stowarzyszonym plikiem App.xaml.cs, Plik MainPage.xaml wraz ze stowarzyszonym plikiem MainPage.xaml.cs. Pliki z rozszerzeniem xaml zawierają w szczególności definicje elementów części wizualnej komponentów Twojej aplikacji a pliki z rozszerzeniem cs zawierają odpowiadającą jej cześd logiki stworzoną w języku C#. Analizę struktury aplikacji Silverlight rozpocznijmy od pliku App.xaml. Plik ten powie nied posiadad postad zbliżoną do następującej: <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:class="silverlightapplicatio1.app"> <Application.Resources> </Application.Resources> </Application> Język XAML pozwala w sposób deklaratywny opisad strukturę komponentów, które obudowane zostaną na etapie uruchomieniowym w odpowiednie klasy. Z punktu widzenia tego rozdziału możesz traktowad go jak zwykły XML z semantyką którą będziesz poznawał w kolejnych rozdziałach. Główny znacznik Application odpowiada klasie Application z przestrzeni nazw System.Windows. Klasa aplikacji jest podstawową jednostką uruchomieniową Silverlight i w szczególności zapewnia ona wyświetlanie zaprojektowanej aplikacji w przeglądarce. Środowisko uruchomieniowe Silverlight (dystrybuowane jako np. plugin przeglądarkowy) najpierw zbuduje instancję tej klasy. Klasa aplikacji definiuje w szczególności zdarzenia:
Startup wyzwalane gdy poprawnie zainicjalizowano instancję obiektu, Exit gdy aplikacja przestaje działad (np. zamknięto stronę w przeglądarce), UnhandledException gdy pojawił się niezamaskowany wyjątek na etapie uruchomienia. Bogatsi o tę wiedzę przyjrzyjmy się strukturze pliku App.xaml.cs. Zawiera ona szkielet kodu inicjalizującego Twoją aplikację. Znajduje się tam deklaracja typu App dziedziczącego z bazowego typu Application, mianowicie: public partial class App : Application // Słowo kluczowe partial oznacza że definicja tej klasy może byd zawarta w wielu plikach. Przyjrzyjmy się konstruktorowi klasy App, powinien posiadad postad zbliżoną do następującej: public App() this.startup += this.application_startup; this.exit += this.application_exit; this.unhandledexception += this.application_unhandledexception; InitializeComponent(); Najpierw dodawane są metody obsługujące podstawowe zdarzenia zachodzące w trakcie uruchomienia aplikacji a następnie wywoływana jest metoda inicjalizująca ten komponent. Obsługa zdarzenia Startup jest postaci: private void Application_Startup(object sender, StartupEventArgs e) this.rootvisual = new MainPage(); Czyli poprawnie zainicjalizowana klasa App buduje nową instancję klasy MainPage (opisaną w plikach MainPage.xaml oraz MainPage.xaml.cs) i przypisuje własności RootVisual. Własnośd ta może byd ustawiona tylko raz na etapie działania aplikacji i zawiera główny komponent wizualny aplikacji Silverlight (dokładniej definiuje komponent zarządzający warstwą aplikacji Silverlight). Kolejną ważną metodę poznamy nawigując do definicji metody InitializeComponent(), nie znajduje się ona w pliku App.xaml.cs ale w generowanym automatycznie pliku App.g.i.cs, ma postad: public void InitializeComponent() if (_contentloaded) return; _contentloaded = true; System.Windows.Application.LoadComponent(this, new System.Uri("/SilverlightApplicatio1;component/App.xaml", System.UriKind.Relative));
Metoda LoadComponent klasy Application pozwala załadowad stowarzyszoną zawartośd pliku xaml i zbudowad na jego podstawie obiekt zadanego jako pierwszy argument pliku. Podsumowując instancja aplikacji Silverlight uruchamiana jest następująco: 1. Konstruktor pozwala zainicjalizowad obiekt mapując na niego przekształconą postad opisu zawartego w pliku xaml, 2. Wyzwolenie zdarzenia Startup pozwala dołączyd cześd wizualną projektu (klasa MainPage). Przyjrzyjmy się teraz plikom MainPage.xaml oraz MainPage.xaml.cs. Oba pliki opisują klasę MainPage dziedziczącą z klasy UserControl. Klasa UserControl reprezentuje kontrolkę użytkownika (o maksymalnej dopuszczalnej wielkości) która zbierała będzie elementy interfejsu użytkownika. Pracując z plikiem XAML ekran powinien byd przedzielony na dwie części. Jedna umożliwia rozkładanie komponentów przy pomocy kursora myszy. Druga cześd edycyjna to reprezentacja interfejsu przy pomocy kodu XAML. Gdy upuścimy komponent typu przycisk na płaszczyźnie MainPage, odpowiadający kod XAML może wyglądad tak: <UserControl x:class="silverlightapplicatio1.mainpage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d" d:designheight="300" d:designwidth="400"> <Grid x:name="layoutroot" Background="White"> </Grid> </UserControl> <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="90,104,0,0" Name="button1" VerticalAlignment="Top" Width="75" /> Innymi słowy opis ten nakazuje budowę komponentu UserControl. Bezpośrednio na nim znajduje się komponent Grid na którym z kolei znajduje się kontrolka Button. Więcej na temat samych komponentów dowiesz się w następnym module, teraz odnotujmy deklaratywną naturę języka XAML. Podobnie jak w przypadku klasy App łączenie kodu XAML z kodem C# następuje w metodzie InitializeComponent(). Klasa MainPage stanowi kontrolkę wizualną która nie posiada żadnego wizualnego rodzica (wszak osadzona jest jako RootVisual w klasie App). Jej kontrolki-dzieci (oraz dzieci ich dzieci, itd.) strukturalnie stanowią drzewo komponentów wizualnych (ang. Visual Tree). Uruchomienie tak stworzonej aplikacji zaowocuje uruchomieniem przeglądarki oraz wyświetleniem następującej treści: Rys. 4 Przygoda z przyciskiem
Oczywiście, mimo że jest przycisk jego naciśnięcie nie powoduje dokładnie żadnej reakcji. Niemniej ważna częśd zadania została właśnie wykonana przez kompilator. Mianowicie zostały stworzone wszystkie dodatkowe pliki (podkatalog obj w lokacji którą wybrałeś do zapisania projektu). Projekt został zbudowany i umieszczony w katalogu Bin->Debug. Najważniejsze pliki uruchomieniowe to: SilverLightApplication1.xap pakiet uruchamiany przez środowisko uruchomieniowe Silverlight (plugin). Zawiera kod, opis xaml oraz ewentualnie dodatkowe zasoby (jak ikony, dźwięki, obrazki), SilverlightApplication1TestPage.html automatycznie wygenerowana strona HTML z osadzonym w niej obiektem Silverlight. Zanurzenie samego obiektu Silverlight na stronie HTML okazuje się byd bardzo proste mianowicie: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="silverlightapplicatio1.xap"/> <param name="background" value="white" /> <param name="minruntimeversion" value="4.0.50401.0" /> <a href="http://go.microsoft.com/fwlink/?linkid=149156&v=4.0.50401.0" style="text-decoration:none"> </a> <img src="http://go.microsoft.com/fwlink/?linkid=161376" alt="get Microsoft Silverlight" style="border-style:none"/> </object> Używany jest znacznik object który jak typ aplikacji przewiduje obiekt Silverlight (gdy brak możliwości uruchomienia, zostaje wyświetlony odnośnik do pobrania maszyny uruchomieniowej). Maszyna uruchomieniowa Silverlight uzyskuje zbiór argumentów opisujących nazwę pliku do załadowania, domyślny kolor tła, minimalną wersję itp. Warto zauważyd, że z punktu widzenia maszyny uruchomieniowej lokacja samego źródła aplikacji (pliku z rozszerzeniem xap) to lokacja samej strony. Oznacza to, że zasoby (ładowne np. przy pomocy metody LoadComponent) muszą byd umieszczone albo w pliku xap, albo w xap (ewentualnie w bibliotece również umieszczonej w tej samej lokacji). Aplikacja Silverlight może uzyskad dostęp do niektórych zasobów użytkownika ale tylko wtedy gdy wyrazi on na to zgodę (patrz moduły: Zasoby i wiązanie danych oraz Odtwarzanie audio i wideo). Tworząc aplikację Silverlight zanurzoną w stronie ASP, czyli wybierając: Rys. 5 Automatyczne generowanie strony ASP dla aplikacji Silverlight
Procedura uruchomieniowa aplikacji jest bardzo podobna. Teraz strona uruchomieniowa tworzona jest jawnie w dołączonym projekcie ASP. Procedura uruchamiania aplikacji Silverlight jest niewiele różna od omawianej wcześniej, mianowicie: Visual Studio uruchomi najpierw serwer IIS który przetrzymywał będzie stronę ASP wraz z wszystkim potrzebnymi jej elementami (jak aplikacja w pliku xap), Przeglądarka połączy się z serwerem (czyli np. localhost) pobierze stronę i uruchomi aplikację. Pozostałe rodzaje projektów Silverlight wyjaśnione zostaną w kolejnych modułach. Powyższe rozważania prowadzą do naturalnych pytao: Czy kod który tworzymy może uzyskad dostęp do parametrów uruchomieniowych środowiska? Pozwalałby to sterowad aplikacją przy pomocy wygenerowanych przez serwer parametrów. Czy proces dostępu do danych w pliku xap można obrócid w proces instalacji aplikacji Silverlight na maszynie użytkownika? - Proces lokalnego zapisu aplikacji nie wymaga nawet praw administracyjnych bo strona uruchomieniowa to tylko dane. Kolejne podrozdziały tego modułu stanowią odpowiedź na te pytania. Przekazywanie parametrów aplikacji Silverlight Zdarzenie Startup klasy Application pozwala uzyskad dostęp do wartości typu StartupEventArgs. Typ ten eksponuje własnośd InitParams która umożliwia dostęp do zdefiniowanych w kodzie HTML (względnie wygenerowanych w ASP argumentów). Argumenty takie definiujemy znacznikiem param następująco: <param name= initparams value= Imie=Tomasz,Nazwisko=Gdala /> Innymi słowy z poziomu HTML jest to łaocuch w którym pary Nazwa=Wartośd rozdzielone są średnikami. Własnośd InitParams to słownik w którym tak klucz jak i wartośd są typu string, do zasobów aplikacji można dodad je następująco: foreach (var para in e.initparams) Resources.Add(para.Key, para.value); Wtedy stają się dostępne dla każdego komponentu Twojej aplikacji. Zasoby to nic innego jak słownik. Aby z dowolnego miejsca kodu odwoład się wyłączni do zasobów aplikacji, możemy użyd własności Current klasy Application, np.: void MainPage_Loaded(object sender, RoutedEventArgs e) App a = Application.Current as App; if (a.resources.contains("kolorczarny")) LayoutRoot.Background = new SolidColorBrush(Colors.Black); Kod ten zmieni kolor tła kontrolki Grid na czarny ale tylko tedy gdy przekazano argument o nazwie KolorCzarny.
Aplikacje Silverlight uruchamiane poza przeglądarką Wybierając właściwości projektu aplikacji SIlverlight, mamy możliwośd opcjonalnego zainstalowania aplikacji poza przeglądarką użytkownika, tj.: Rys. 6 Opcje instalacji poza przeglądarką Powinniśmy określid nazwę aplikacji wyświetlaną na pasku okna w chwili uruchomienia. Podstawową szerokośd i wysokośd okna (ewentualnie jego początkowe położenie), Dodatkowo powinna zostad podana nazwa skrótu oraz opis aplikacji. Możemy załadowad cztery wielkości ikon zostanie z nich wybrana najlepiej pasująca do systemu operacyjnego i sposobu prezentowania (skrót w menu, na pulpicie czy wreszcie pasku szybkiego dostępu). Zaznaczenie flagi Show install menu da użytkownikom możliwośd zapisania bezpośredniego odwołania procesu instalacji Twojej aplikacji. Po uruchomieniu aplikacji użytkownik ma możliwośd rozwinięcia menu (prawy przycisk myszy) w którym znajduje się teraz dodatkowa opcja instalacja aplikacji. Rys. 7 Instalacja z punktu widzenia użytkownika Przez proces instalacji prowadzony jest użytkownik który musi podad co najmniej lokację docelową (np. Menu Start). Technicznie rzecz ujmując aplikacja działająca poza przeglądarką posiada dodatkowy plik o nazwie OutOfBrowserSettings.xml. Plik ten przechowywany jest, tak jak manifest Twojego kodu, we własnościach projektu, plik ten może mied następująca postad: <OutOfBrowserSettings ShortName="moja aplikacja" EnableGPUAcceleration="True" ShowInstallMenuItem="True" >
<OutOfBrowserSettings.Blurb> Używaj gdzie tylko chcesz, i kiedy tylko chcesz </OutOfBrowserSettings.Blurb> <OutOfBrowserSettings.WindowSettings> <WindowSettings Title="Moja aplikacja zapisana lokalnie" Height="800" Width="800" /> </OutOfBrowserSettings.WindowSettings> <OutOfBrowserSettings.Icons /> </OutOfBrowserSettings> Niestety w chwili obecnej nie istnieje prosta metoda pozwalająca zachowad argumenty (typu initparams omawianego wcześniej) do wykorzystania ich w aplikacjach poza przeglądarkowych. Przykładowe rozwiązanie Zaprojektujmy prosty zegarek wyświetlający bieżący czas. Najpierw należy rozmieścid potrzebne kontrolki. W celu wyświetlania tekstu wykorzystamy kontrolkę TextBlock, która posiada własnośd Text. Własnośd tę zmieniali będziemy w czasie. Kontrolki rozdzielamy wyświetlając znak dwukropka :, jak pokazano na rysunku: Rys. 8 Rozmieszczenie kontrolek tekstowych Pierwsza kontrolka wyświetlała będzie godziny nadajmy jej więc nazwę godziny, kolejne nazwijmy odpowiednio minuty oraz sekundy. Kontrolki winny wyrównywad wyświetlany tekst do strony prawej. Odpowiadający im opis XAML powinien wyglądad podobnie do następującego: <TextBlock FontSize="40" Name="godziny" TextAlignment="Right" /> <TextBlock FontSize="40" Text=":" /> <TextBlock FontSize="40" Name="minuty" TextAlignment="Right"/> <TextBlock FontSize="40" Text=":" /> <TextBlock FontSize="40" Name="sekundy" TextAlignment="Right" /> Strona wizualna została już przygotowana. Przejdźmy do zaprojektowania mechanizmu który będzie zmieniał stan wyświetlanego czasu. W konstruktorze MainPage należy dodad obsługę zdarzenia Loaded. Jest ono wyzwalane gdy komponent został poprawnie zbudowany. Może to wyglądad np. tak: public MainPage() InitializeComponent(); Loaded += new RoutedEventHandler(MainPage_Loaded);
W celu wyzwalania kodu odczytującego stan zegara w ustalonych momentach czasu wykorzystamy klasę DispatcherTimer. Klasa ta posiada własnośd Interval która reprezentuje odstęp w czasie pomiędzy którym wyzwalany będzie kod oddelegowany jako Tick, np.: void MainPage_Loaded(object sender, RoutedEventArgs e) DispatcherTimer d = new DispatcherTimer(); d.interval = new TimeSpan(0, 0, 0, 1, 0); d.tick += new EventHandler(d_Tick); d.start(); Kod wyzwalany będzie co jedną sekundę. Metoda Start() powoduje uruchomienie procesu wyzwalania kodu. Pozostaje w odpowiedzi na wyzwolenie Tick zaimplementowad metodę d_tick, np.: void d_tick(object sender, EventArgs e) godziny.text = DateTime.Now.Hour.ToString(); minuty.text = DateTime.Now.Minute.ToString(); sekundy.text = DateTime.Now.Second.ToString(); Zauważmy, że nazwy nadane blokom tekstu dostępne są z punktu widzenia kodu w C#. daje nam to możliwośd przepisania bieżącego czasu w odpowiednie miejsca. Porady praktyczne Jeśli chcesz śledzid kod możesz napotkad problem nie prawidłowej współpracy przeglądarki ze środowiskiem programistycznym, upewnij się że zaznaczone jest tryb Debug dla Silverlight 4 w części Web własności projektu. Może się zdarzyd, że zawartośd serwera IIS nie zostanie odświeżona, upewnij się że ustawiono opcję deploy albo zrestartuj serwer. Po instalacji aplikacji może się zdarzyd, że nie będziesz miał dostępu do zasobów które pozostały na serwerze jeśli pracujesz offline. Uwagi dla studenta Jesteś przygotowany do realizacji laboratorium jeśli: Rozumiesz strukturę aplikacji Silverlight, Rozumiesz pojęcie lokalnego zapisu pliku xap, Potrafisz skonfigurowad aplikację Silverlight do lokalnego zapisu, Potrafisz zmienid konfigurację wersje działającej poza przeglądarką na podstawie manifestu, Umiesz wymusid minimalną wersję masyzny uruchomieniowej Silverlight, Potrafisz przekazywad parametry aplikacji Silverlight z poziomu kodu HTML, Potrafisz odczytad i interpretowad parametry inicjalizacyjne, Wiesz jaka jest kolejnośd inicjalizacji składowych Twojej aplikacji. Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.
Dodatkowe informacje Szybki wgląd w możliwości Silverlight (tak wersja Windows jak i Mac) możesz znaleźd tu: http://msdn.microsoft.com/en-us/library/bb404700%28vs.95%29.aspx Informacje o uruchomieniowych różnicach pomiędzy Silverlight w wersji 3 i 4 możesz znaleźd pod adresem: http://msdn.microsoft.com/en-us/library/cc645049%28v=vs.95%29.aspx
Laboratorium podstawowe Zadanie 1 (czas realizacji 20 minut) Stwórz aplikację która odlicza czas do najbliższego sylwestra. Daj użytkownikom możliwośd zainstalowania tej wspaniałej funkcjonalności.
Zadanie 2 (czas realizacji 25 minut) Stwórz aplikację która na podstawie przekazanych doo parametrów (kolorów) wygeneruje taką samą liczbę przycisków (dynamicznie). Po naciśnięciu przycisku tło aplikacji winno się zmienid na zadany kolor.
Laboratorium rozszerzone Zadanie 1 (czas realizacji 40 minut) Zaprojektuj kalkulator w wersji przeglądarkowej. Zadanie 2 (czas realizacji 45 minut) Zaprojektuj prosty edytor pozwalający sklejad zawartośd tekstów o różnych rozmiarach czcionek. Wskazówka. Wykorzystaj w tym celu klasę RichTextBox. Zadanie 3 (czas realizacji 90 minut) Napisz aplikację w Silverlight która wyświetli zawartośd dokumentu HTML Wskazówka. Wykorzystaj komponent WebBrowser. Zadanie 4 (czas realizacji 90 minut) Zaimplementuj grę w kółko i krzyżyk w wersji możliwej do instalacji poza przeglądarką.