Silverlight - Pierwsze kroki

W poprzednim artykule opisaliśmy technologię Silverlight. Teraz Przyjrzymy się dwóm popularnym środowiskom programistycznemu i stworzymy pierwszą aplikację z wykorzystaniem "Flasha od Microsoftu".

Co będzie potrzebne?

Zintegrowane środowisko programistyczne wykorzystywane do pracy z Silverlightm to najczęściej Visual Studio Microsoftu. Powód jest prosty – SL obsługuje języki wchodzące w skład platformy .NET, a Microsoft wspiera własne produkty, a nie te należące do zewnętrznych firm. Mimo to możliwe jest skorzystanie np. z Eclipse.

Darmową wersję Visual Studio 2008, również do zastosowań komercyjnych, pobierzemy ze strony Microsoftu (http://www.microsoft.com/expre...). Potrzebne jest jeszcze środowisko uruchomieniowe (runtime) Silverlighta i SDK (http://silverlight.net/getstar...). Na tej samej stronie znajdują się również dokładne instrukcje instalacji dla innych platform.

Po kliknięciu strona przekieruje do środowiska uruchomieniowego odpowiedniego dla platformy (również Linux).

Kolejna aplikacja, która jest bardzo pomocna, ale nie niezbędna, to Expression Blend + SketchFlow. 60-dniową wersję testową można pobrać za darmo ( http://www.microsoft.com/downl...), a wersja pełna kosztuje 599 dolarów. Pakiet służy do prostego tworzenia i edycji aplikacji. Praca w tym środowisku przypomina działanie z edytorem Adobe Flash, więc osoby znające tę technologię będą miały ułatwione zadanie.

Expression Blend - odpowiednik Adobe Flash CS 4.

Visual Studio – dla programistów

Aplikacje możemy tworzyć na dwa sposoby: "tekstowo" w Visual Studio oraz graficznie, jak animacje Flasha, w Expression Blend. Visual daje dużo większe możliwości, zwłaszcza przy części odpowiedzialnej za zachowanie aplikacji, ale jego obsługa jest trudniejsza dla początkujących. Oczywiście osoby, które już korzystały z tego środowiska powinny od razu spróbować swoich sił w tym programie. Tak jak w przypadku programów pisanych w C#, C++ albo VB otrzymają zestaw kontrolek itd., chociaż domyślny wygląd okna będzie nieco inny – główną jego część zajmie aplikacja, a kod będzie wyświetlany równolegle w mniejszej karcie.

Visual Studio - programiści poczują się prawie jak w domu.

Po utworzeniu nowego projektu, VS samo utworzy potrzebne pliki i strukturę projektu. Główne pliki domyślnie nazywają się Page.xaml i App.xaml. Page.xml zawiera informacje o znajdujących się w aplikacji kontrolkach i tworzy się automatycznie po dodaniu nowego elementu z Toolboksa (zbioru dostępnych kontrolek). Po zapoznaniu się z jego składnią zauważymy, że to zwykły plik XML, więc jego edycja nie powinna sprawić najmniejszych problemów. Oczywiście można to robić ręcznie i nie trzeba posługiwać się wspomaganiem Visuala. Jeśli chcemy stworzyć kolejną stronę klikamy po prostu w Project->Add Page.... Strona zostanie dołączona do projektu.

W pliku App.xaml znajdują się informacje o tym, jaka strona ma być domyślnie uruchomiona, z jakich zasobów będzie korzystać aplikacja itp. Do wszystkich plików XAML dołączony jest plik pozwalający na rozszerzenie funkcjonalności strony poprzez oprogramowanie jej zachowania – w Silverlight 3 możemy wykorzystać do tego różne języki programowania (np. C#) i skryptowe (np. Ruby).

Uruchomienie aplikacji

Po dodaniu wybranych stron, ich składników i zachowania możemy zbudować i uruchomić projekt. Najprościej zrobić to poprzez wybranie z menu Build opcji Build Solution. Gotowa aplikacja pojawi się w folderze bin/Release w katalogu projektu. Aby ją uruchomić niezbędne jest posiadanie przeglądarki z pluginem Silverlighta. Należy pamiętać, że najlepiej wspierany jest Windows z Internet Explorerem lub Firefoksem, Chrome aktualnie nie obsługuje aplikacji Silverlighta, a pod Linuksem niezbędny jest otwarty odpowiedni SL, Moonlight.

Uruchamianie aplikacji przez przeglądarkę może chwilę trwać

Visual Studio spodoba się programistom, ale dla pozostałych osób może być zbyt skomplikowany. Drugie narzędzie, Expression Blend, będzie lepsze dla tych, którzy mieli do czynienia z Flashem lub nie potrafią programować.

Zobacz przykład:

Expression Blend - jak we Flashu!

Również w tym programie należy rozpocząć od utworzenia nowego projektu. Środowisko utworzy plik App.xaml o działaniu takim jak w Visual Studio i MainPage.xaml, który jest odpowiednikiem Page.xaml.

W domyślnym układzie po lewej stronie, podobnie jak we Flashu, znajduje się pasek narzędzi takich haj pióro, wypełnienie czy tekst. Tuż. obok umieszczono menu z dostępnymi obiektami, efektami i akcjami.

Pod nimi znajduje się wykaz wykorzystanych elementów i znany z Flasha Timeline. W każdej kratce znajduje się stan elementu w danej sekundzie. Umożliwia to stworzenie animacji za pomocą kilku kliknięć: w klatce początkowej zaznaczamy stan elementu, przechodzimy do klatki końcowej i ustalamy jak ma się zmienić element. Możemy go np. przeciągnąć lub zmienić jego przeźroczystość. Program sam zajmie się wygenerowaniem stanów pośrednich.

Podobnie jak w Visual Studio istnieje możliwość edycji wygenerowanego kodu XAML – odbywa się to poprzez kliknięcie prawym przyciskiem myszy na nazwie elementu i wybraniu opcji "Show XAML". W takim widoku skojarzenia z Flashem będą już jednoznaczne. Czy to źle? Chyba nie, bo podobnie wyglądający produkt ułatwi przejście z jednej technologii na drugą. Warto dodać, że Expression Blend pozwala na import plików Photoshopa i Ilustratora.

Kilka kliknięć i Expression Blend wygląda jak Flash.

Tak jak w poprzednim przypadku dodajemy wybrane elementy, ustalamy jak mają się zachowywać, po czym z menu Project wybieramy Build Project i Run Project. Działający plik Default.html znajduje się w folderze [nazwa]Site w katalogu projektu, gdzie [nazwa] to nazwa projektu.

Zobacz przykład:

Visual czy Expression Blend?

Visual Studio ze środowiskiem uruchomieniowym Silverlight oraz Expression Blend + SketchFlow to dwa najczęściej wykorzystywane programy do tworzenia i edycji aplikacji wykorzystujących technologię Silverlight. Visual sprawdzi się lepiej w przypadku aplikacji o rozbudowanym zachowaniu. Spodoba się również programistom przyzwyczajonym do tego – skądinąd bardzo dobrego – środowiska.

Expression Blend w obsłudze bardzo przypomina Adobe Flasha. Ułatwi to przejście z jednej technologii na drugą, bo mimo że technicznie działają inaczej, to tworzenie projektów wygląda bardzo podobnie. Niestety program jest dość drogi.

Niezależnie od tego który program wybierzemy, stworzenie prostej aplikacji w Silverligtcie to kwestia kilku kliknięć. Warto więc zainteresować się tą technologią, zwłaszcza dopóki konkurencja jest mała.