Samouczek Silverlight – część 1
Zainteresowałem się technologiami RIA (Rich Internet Aplication) czyli technologiami zaawansowanych aplikacji internetowych. Popatrzyłem sobie na Flex, JavaFX i w końcu na Silverlight. Ta ostatnia technologia wzbudziła moje zainteresowanie, postanowiłem spróbować nauczyć sie używać tej technologii. Okazało się, że dosyć ciężko znaleźć wprowadzenie do tej tematyki. Oficjalna strona wspiera proces nauczania głównie na video prezentacjach, których nie jestem wielkim fanem. Znalazłem jednak ciekawy samouczek (chwała autorowi – pan Tim Heuer), który spróbuje przetłumaczyć na język Polski. Pomoże mi to utrwalić materiał, a także przybliżyć tematykę osobom nie znającym angielskiego 🙂
W samouczku będziemy budować krok po kroku aplikacje, która przeszukuje Twitter według podanych słów oraz wyświetla wyniki automatycznie odświeżając je w ustalonej częstotliwości.
W tej części skupimy sie na narzędziach niezbędnych do pracy z Silverlight oraz na podstawowych zagadnieniach związanych z tą technologią.
Oczywiście, jak w każdym przypadku tworzenia programowania potrzebujemy edytora tekstu i kompilator, lecz tylko szaleniec nie korzysta dzisiaj z dedykowanych środowisk programistycznych. Zaprezentuje zestaw narzędzi pozwalających na proste i szybkie tworzenie aplikacji w technologii Silverlight. Nie wszystkie narzędzia są niezbędne. Nie wszystkie są darmowe. Wszystkie gorąco rekomenduje, szczerze wierząc, że są to najlepsze narzędzia do realizacji tego zadania.
Visual Studio
Tim Heuer poleca płatne Visual Studio ale wspomina także o Visual Web Developer Express, które jest darmowym produktem i sam osobiście wykorzystałem je do pracy z tym samouczkiem. Jeśli chcesz dodatkowo używać bazy danych, autor poleca darmową wersje SQL Server Express.
Silverlight Tools for Visual Studio
Jest to dodatkowy pakiet, który instaluje SDK (środowisko deweloperskie), runtime z debugerem oraz dodatki do Visual Studio (szablony projektów, konfiguracje build, itp.). Pakiet zainstalowany jako dodatek do VS dostarcza wszystkie elementy niezbędne do pracy z Silverlight.
Oba narzędzia można ściągnąć oddzielnie lub używając Web Platform Installer, który zainstaluje/doinstaluje dla Ciebie VS, Silverlight Tolls i SQL Server Express, bez konieczności szukania plików instalacyjnych. Możesz znaleźć Web Platform Installer tutaj:
Expression Blend
Jest to wizualny projektant dla XAML, technologie warstwy prezentacji używaną w aplikacjach Silverlight i Windows Presentation Fundation (WPF). Pozwala na łatwą manipulacje układu aplikacji, animacji, stylów oraz szablonów. Narzędzie nie jest darmowe. Można zainstalować ewaluacyjną wersje Expression Blend. Będziemy używać tego narzędzia w tym samouczku.
Silverlight Toolkit
Zestaw kontrolek, nie będących częścią podstawowego Silverlight Tools. Dodatkowo mamy wykresy, daty i czas i wiele innych. Kod źródłowy tych kontrolek (tak samo jak podstawowych kontrolek) jest dostępny do nauki i rozszerzania ich możliwości. Użyjemy klika z tych kontrolek w tym samouczku.
Jest klika dodatkowych narzędzi i zestawów kontrole, które można by użyć, takie jak .NET RIA Services, które omówimy w części 3. Jednak powyższa lista jest wystarczającym minimum do rozpoczęcia tworzenia aplikacji w Silverlight. Zainstaluj wszystkie zanim będziesz kontynuował czytanie tego samouczka.
Zrozumieć środowisko Deweloperskie
Po instalacji w naszym VS Express możemy otworzyć projekt w Silverlight używając Visual C#:
Widzimy kilka szablonów, Silverlight Application, Silverlight Class Library i Silverlight Navigation Application. Oraz klika innych, w zależności od dodatkowych narzędzi jakie zainstalowaliście.
Dla naszego samouczka wybierzcie szablon Silverlight Navigation Application i nadajcie nazwę aplikacji (Autor nazywa swoją TwitterSearchMonitor, ja nazwałem ją WyszukiwarkaTwitter).
W następnym oknie VS pyta nas czy chcemy aby to był projekt internetowy:
Dla nowych projektów, gorąco rekomenduje stworzenie projektu internetowego, dzięki temu utworzone zostaną wszystkie pliki niezbędne do uruchomienia aplikacji. Jest to pomocne w unikaniu problemów z dostępem do usług internetowych z poziomu lokalnego systemu plików. Natychmiastowa możliwość uruchamiania twojej aplikacji w przeglądarce pozwoli łatwiej rozwiązać lub uniknąć najczęstszych problemów z dostępem do serwisów internetowych. Możesz wybrać ASP.NET Web Application Project, ASP.NET Web Site lub ASP.NET MVC Web Project. Jeśli nie jesteś pewien co wybrać, pozostaw standardowe ustawienia.
Struktura Projektu
Po utworzeniu nowego projektu zobaczysz coś takiego:
Widzimy twoją internetową aplikacje (która będzie zawierała aplikacje Silverlight) razem z przygotowanymi stronami testowymi. Skupmy się na projekcie aplikacji Silverlight:
Jest tu kilka kluczowych plików, które powinieneś poznać, a które będziemy używać w tym samouczku:
- App.xaml – plik z zasobami aplikacji. Tutaj dodasz zasoby (szczegóły poznamy w części o zarządzaniu stylami) lub globalne zdarzenia aktywowane przy starcie aplikacji. Ten plik jest punktem wejściowym do Twojej aplikacji i mówi Silverlight jakie są następne kroki.
- MainPage.xaml – ta strona jest częścią wybranego przez Ciebie szablonu projektu. Nie musi się nazywać MainPage (Strona Główna), po prostu taką nazwę używa ten szablon. Reprezentuje on startową stronę interfejsu użytkownika. Na razie, nie zrażaj sie tymi szczegółami.
- katalogi Assets/Views – zawierają elementy składowe projektu (pliki, obrazki, style itp.) wraz z innymi widokami interfejsu użytkownika Twojej aplikacji
Pliki XAML tworzą interfejs użytkownika Twojej aplikacji. Są to pliki XML ze znacznikami języka XAML. Będziemy je modyfikować w następnych krokach.
Kiedy skompilujesz swój projekt (śmiało możesz to teraz zrobić),
zauważ pojawienie się w katalogu ClientBin nowego pliku z rozszerzeniem XAP.
To jest właśnie Twoja skompilowana aplikacja. Tak właściwie jest to archiwum (aka ZIP) z innym rozszerzeniem pliku. Jeśli zmienisz rozszerzenie na .ZIP możesz podejrzeć zawartość tego pliku dowolnym archiwizerem.
Plik XAP jest dostarczany Twojej przeglądarce. Ten plik przechowywany jest na serwerze internetowym i dostarczany użytkownikom Twojej aplikacji. XAP jest częścią standardowej strony HTML, która zawiera aplikacje Silverlight używając znaczników <object>.
Spostrzeżenie: Silverlight to technologia kliencka i może być udostępniana na jakimkolwiek serwerze internetowym. Dowolny serwer internetowy, który potrafi dostarczać pliki XAP razem z odpowiednim typem ich zawartości MIME (application/x-silverlight-app). Jeśli to potrafi, nie interesuje nas jaki serwer internetowy dostarcza pliki XAP.
Dodawanie elementów interfejsu użytkownika do stron XAML
Wybrany przez nas szablon (Silverlight Navigation Application) zawiera standardowo wbudowane elementy nawigacyjne. Nowinka w technologii Silverlight, która pozwala stworzyć główną stronę aplikacji. Jeśli zerkniesz w katalog Views w strukturze projektu, zobaczysz pliki About.xaml, ErrorWindow.xaml oraz Home.xaml. Skupmy się na Home.xaml ponieważ jest to pierwsza widoczna strona tego szablonu. Otwórz ten plik dwuklikiem i zobaczysz jak XAML obsługiwane jest w Visual Studio.
Widzimy kod XAML definiujący widok używając znacznika GRID oraz innych jak StackPanel i TextBlocks (StackPanel omówimy w części 2 samouczka). Są to bazowe kontrolki dostarczane przez Silverlight. TextBlock pozwala wyświetlić tekst. Jeśli uruchomisz teraz aplikacje (użyj F5 aby uruchomić aplikacje w trybie deweloperskim) powinieneś zobaczyć:
Zauważ, że tekst widoczny w uruchomionej aplikacji odpowiada tekstowi zawartego w pliku XAML i znaczniku TextBlock. Zwróć uwage na przyciski odnośników w prawym górnym rogu. Reprezentują one punkty nawigacyjne do innych widoków. Dodajmy kod XAML aby zobaczyć jak pisze się kod.
W widoku Home.axml, po drugim znaczniku Textblock, dodaj przycisk używając poniższego XAML:
<Button Content="Kliknij tutaj" x:Name="MojPrzycisk" FontSize="18" Width="150" Height="45" />
Spowoduje to wyświetlenie się w widoku, przycisku, tuż pod napisem Home page context. Zwróć uwagę na atrybut x:Name. Jest to unikalny identyfikator elementu widoku, który pomaga odnosić sie do tego elementu w kodzie. A teraz spowodujmy, ze cos będzie się działo po kliknięciu na przycisk. Są dwa proste sposoby dodania zdarzenia dla przycisku (lub innego elementu). W edytorze XAML możemy dodać atrybut Click i od razu VS Intellisense automatycznie zasugeruje nam utworzenie obsługi zdarzenia.
Możemy także połączyć obsługę zdarzenia bezpośrednio w kodzie i nie dodawać tego w XAML, modyfikując plik Home.xaml.cs:
public Home() { InitializeComponent(); MojPrzycisk.Click += new RoutedEventHandler(MojPrzycisk_Click); }
Oba sposoby mają ten sam rezultat. Ja użyje teraz metody XAML. W funkcji MojPrzycisk_Click możemy zawrzeć kod manipulujący interfejsem użytkownika lub innymi funkcjami. Tym razem zmieńmy tekst HeaderText Textblock (HeaderText to wartość atrybutu x:Name, także możemy łatwo odnieść się do niej w kodzie) na tekst Witaj Świecie. Aby to zrobić, napiszemy kod funkcji:
private void MojPrzycisk_Click(object sender, RoutedEventArgs e) { HeaderText.Text = "Witaj Świecie!"; }
Po wpisaniu kodu i uruchomieniu aplikacji (F5) zobaczymy nasz przycisk, a kiedy na niego klikniemy zmieni sie tekst nagłówka strony:
Następne kroki
Stworzyliśmy naszą pierwszą Hello World aplikację w technologii Silverlight. Jest jeszcze wiele do zrobienia w naszej aplikacji WyszukiwarkaTwitter. W części 2 zmienimy wygląd naszej aplikacji. Aby znaleźć więcej podstawowych informacji o środowisku Silverlight polecam strony:
Czas na część 2!