Drugi Samouczek Silverlight – Część 1
W przepastnych zasobach Internetu odnalazłem inny ciekawy samouczek Silverlight. Oparty na wersji 2 ale spróbujemy go przejść korzystając z aktualnej wersji 4. Autorem jest VP MS ? pan Scott Guthrie.
Tym razem budujemy wyszukiwarkę innego serwisu internetowego digg.com, będziemy używać innych mechanizmów komunikacji z serwisem oraz zastosujemy prezentacje danych w formie ogóły/szczegóły (master/detail).
Będziemy używać tych samych narzędzi co w pierwszym Samouczku (tam odsyłam po informacje o szczegółach środowiska programistycznego, co zainstalować, skąd pobrać).
Uwaga. Samouczek kończy się w środku części 3 z uwagi na zmiany w działaniu API serwisu digg.com ? podane w samouczku metody nie działają. Pozostawiam niedokończony samouczek dla ciekawskich.
Zaczynamy od stworzenia projektu i prostego wprowadzenia w prace z Silverlight.
File->New Project
Nazwa projektu (name) to Diggarka.
Gdy klikniemy OK mamy dodatkowe opcje do wyboru. W naszym przypadku skorzystamy z nich i stworzymy dodatkowo aplikacje ASP.NET Web, nazwiemy ją Diggarka_WebServer. Powstają w ten sposób wszystkie pliki niezbędne do uruchomienia aplikacji.
Powstały projekt:
Kiedy będziemy uruchamiać aplikacje w VS Express, skompilowany kod będzie automatycznie przenoszony do do części ?webowej? projektu, tam korzystając ze standardowo powstałej strony domowej będziemy mogli uruchomić i testować naszą aplikacje.
Notka: Aplikacje Silverlight mogą być uruchamiane na dowolnym serwerze webowym (wliczając Apache na Linuksie), korzystając ze statycznego HTML-u lub dowolnego języka pracującego po stronie serwera i generującego strony HTML (wliczając PHP, Java, Python, Ruby, itp.). W naszym samouczku nie będziemy pisać kodu działającego po stronie serwera, użyjemy możliwości skorzystania z API serwisu Digg, dzięki funkcjonalności Silverlight zwanej cross-domain networking. Wybraliśmy ASP.NET Web projekt aby wykorzystać wbudowane możliwości testowania tej funkcjonalności.
Struktura aplikacji Silverlight
Nowo utworzona aplikacja Silverlight zawiera pliki MainPage.xaml i App.xaml, razem z kodem klas (napisanym w języku VB, C#, Ruby lub Python). W naszym projekcie wybraliśmy C#:
Pliki XAML to tekstowe pliki XML używane do specyfikacji interfejsu użytkownika (UI) aplikacji Silverlight.
App.xaml jest zazwyczaj używany do deklarowania zasobów, takich jak style, które są współdzielone przez różne elementy aplikacji. Plik zawierający kod (App.xaml.cs) może być do obsługi zdarzeń na poziomie aplikacji, takich jak – Application_Startup, Application_Exit i Application_UnhandledException.
Plik MainPage.xaml z definicji inicjalizuje interfejs użytkownika (UI). Kod pliku MainPage.xaml.cs obsługuje zdarzenia kontrolek UI.
Kiedy tworzymy nasz projekt Diggarka, VS Express kompiluje kod i znaczniki XAML do standardowego pliku .NET, następnie pakuje to razem z używanymi statycznymi zasobami (jak obrazki) do końcowej postaci Diggarka.xap, która znajdziemy w katalogu projektu (ClientBin):
Pliki .xap używają algorytmu kompresji ?zip? aby zmniejszyć rozmiar pobieranego pliku. Aplikacja Silverlight ?Witaj Świecie? (Hello World) ma rozmiar około 4KB.
Aby udostępnić i uruchomić aplikacje Silverlight, możesz dodać tak <object> na dowolnej statycznej stronie HTML (nie jest wymagany JavaScript), który wskazuje na plik .xap, inicjalizuje go i udostępnia na tej właśnie stronie HTML w przeglądarce. Działa to w dowolnej przeglądarce (Safari, FireFox, IE itp.) i dowolnej platformie (Windows, Mac i Linuks).
Możesz bardzo prosto zacząć testowanie naszej nowo stworzonej aplikacji, wszelkie niezbędne strony HTML i plik .xap zostały utworzone ? naciśnij tylko klawisz F5 (Debug->Start Debugging).
Jak dodać kontrolkę i obsługiwać zdarzenia
Teraz nasza aplikacja nic nie robi i po uruchomieniu pojawia się pusta strona.
Zmienimy to poprzez edycje pliku MainPage.xaml i dodaniu przycisku:
Nadaliśmy mu nazwę ?MojPrzycisk? co pozwoli odnieść sie do niego w obsłudze zdarzeń związanych z tą kontrolką. Dodaliśmy także parametry Content, Widht i Height. Wszystkie zmiany można wprowadzić w kodzie xaml (jak widać powyżej) lub używając właściwości kontrolki:
Gdy teraz uruchomimy aplikacje (F5) zobaczymy przycisk z napisem ?Kliknij na mnie?:
Aby dodać do przycisku zdarzenie uruchamiane po kliknięciu, tworzymy obsługę zdarzenia ?Click?. Możemy to zrobić w widoku xaml wpisując nazwę zdarzenia:
Następnie zostanie nam zasugerowane kodowanie zdarzenia:
Visual Studio automatycznie utworzy szkielet funkcji obsługującej zdarzenie. Użyjemy go do zmiany napisu na przycisku:
Gdy teraz uruchomimy aplikacje i klikniemy na przycisk, napis zmienia się na ?Wcisniety?:
W następnej części (część 2) stworzymy główną strukturę interfejsu użytkownika naszej aplikacji, dodamy więcej kontrolek.