Prototyp aplikacji w Silverlight 3.0 w kilka minut?

Jedną z nowości która ukazała się przy okazji wydania najnowszej wersji Silverlight 3.0 jest budowa prototypu aplikacji przy pomocy tzw. SketchFlow (w wolnym tłumaczeniu "szkic przepływu"). Taka możliwość pojawiła w dzięki wydaniu nowej wersji programu Expression Blend 3, która to wspiera tworzenie tego typu aplikacji.

W niniejszym artykule spróbuje opisać podstawowe funkcje jakie daj nam to rozwiązanie, zbudujemy prosty prototyp aplikacji oraz wygenerujemy dla niego dokumentację.

Ale o co tu chodzi?

Otóż mamy do dyspozycji narzędzie dzięki któremu jesteśmy w stanie stworzyć prototyp interfejsu aplikacji oraz zobrazować nawigację pomiędzy oknami na czytelnym diagramie.

Potrzebne instalacje

Aby rozpocząć pracę musimy zainstalować pakiet SDK do pracy z Silverlight 3.0, a więc Microsoft® Silverlight™ 3 Tools for Visual Studio 2008 SP1 oraz Expression Blend 3 + SketchFlow RC do tworzenia naszego prototypu.

Budujemy własny prototyp

1. Tworzenie nowego projektu

Uruchamiamy Blenda, wybieramy "New Project" i następnie "Silverlight 3.0 SketchFlow Application".

Powinniśmy zobaczyć typowy dla Blenda widok nowego projektu oraz dodatkowy dolny panel z niebieskim kwadracikiem "Screen 1". Ten niebieski kwadracik reprezentuje widoczne powyżej okno aplikacji, a cały panel nazywa się "SketchFlow Map" i służy właśnie do modelowania nawigacji pomiędzy kwadracikami (czyt. Oknami aplikacji).

2. Dodajemy nowe okno

Zanim dodamy nowe okno i zdefiniujemy połączenie pomiędzy nimi, dodajmy jakiś opis do okna "Screen 1" aby móc je później rozróżnić. W tym celu otwórzmy boczne menu i wybierzmy zakładkę ">>" -> " SketchFlow" -> "Styles". W zakładce znajdziemy dużo zdefiniowanych kontrolek z przypisanymi stylami, dzięki czemu będzie nam łatwiej opisywać tworzony interfejs. Wybierzmy i przeciągnijmy na aplikację np. "TextBox" który nazywa się w tym wypadku "Note-Sketch". Możemy także nadać mu jakiś domyślny tekst.

Teraz kiedy nasze pierwsze okno jest już podpisane, dodajmy nowe. Przechodzimy do zakładki "SketchFlow Map" i najeżdżamy kursorem na niebieski kwadracik "Screen 1". W tym momencie powinno rozwinąć się menu w którym mamy do wyboru cztery opcję.

Idąc od prawej, pierwsza opcja z rozwiniętego menu to zmiana koloru kwadracika. W ten sposób możemy grupować je, zwiększając czytelność całego diagramu.

Drugą opcją od prawej jest dodanie komponentu do okna, a więc zagnieżdżenie innego okna wewnątrz tego. Sprowadza się to do stworzenia elementów w aplikacji które w prosty sposób możemy ponownie używać na wielu ekranach (np. menu, stopka).

Trzecią opcją od prawej, jest połączenie z istniejącym oknem. Kiedy nasz prototyp będzie miał wiele okien, będzie to idealny wybór aby stworzyć dodatkowe połączenia pomiędzy nimi.

Ostatnim przyciskiem od prawej, a pierwszym od lewej jest przycisk dodania nowego okno aplikacji który będzie połączony z obecnym. Właśnie tej opcji musimy użyć.

Najlepiej kliknąć prawym myszki i przeciągnąć nowo utworzony kwadracik obok. Po tej operacji utworzy się nowe puste okno "Screen 2" oraz połączenie pomiędzy nim i poprzednim oknem "Screen 1".

3. Komunikacja pomiędzy oknami

Zanim stworzymy komunikację pomiędzy oknami, dodajmy tak jak poprzednio, jakiś opis do okna "Screen 2" w celu odróżnienia go (wystarczy textbox) i wróćmy do okna "Screen 1" (np. klikając w kwadracik "Screen 1"). Na tym ekranie dodajmy przycisk który przeniesie nas do okna "Screen 2".

Aby zrealizować komunikację pomiędzy oknami, najłatwiej kliknąć prawym klawiszem myszki na przycisku, wybrać opcję "Navigate to" oraz okno do którego chcemy stworzyć połączenie.

W tym momencie uruchommy nasz prototyp i zobaczmy co otrzymaliśmy (klawisz F5).

Powinniśmy zobaczyć pierwsze okno powitalne.

Oraz drugiego okno do którego zostaliśmy przekierowani po wciśnięciu przycisku "Take me to Screen 2".

4. Modyfikacja prototypu

Na pewno wszyscy z Was zdążyli zauważyć że oprócz stworzonej aplikacji mamy także dodatkowe menu "SKETCHFLOW PLAYER". Służy ono do zaznaczania uwag do aplikacji. Do dyspozycji mamy pole tekstowe do wpisywania komentarzy do okien jak i zestaw "mazaków" do malowania bezpośrednio po interfejsie. Jeśli poruszanie się po interfejsie nie będzie dość wygodne, zawsze można użyć mapy ekranów "Map" i bezpośrednio przejść do wybranego widoku.

Co więcej, jeśli będziemy działać na raz skompilowanej wersji aplikacji (czyt. nieuruchamianej z Visual Studio), pozostawione zmiany i uwagi zostaną zapisane w przestrzeni Isolated Storage i będą widoczne gdy następny raz uruchomimy aplikację na tym samym komputerze.

Jeżeli chcemy dokonywać zmian na odległość, np. wysłać prototyp klientowi aby wprowadził na nim swoje uwagi, wystarczy że prześlemy mu aplikację, a on za pomocą opcji exportu, stworzy plik z rozszerzeniem feedback który później możemy zaimportować do Expression Blenda (przez import rozumiem tutaj dodanie pliku do projektu - "Add Existing Item.." ).

Aby wygenerować wersję aplikacji którą możemy przekazać klientowi, najłatwiej wybrać opcję "File" w menu w Expression Blend 3 i kliknąć "Package SketchFlow Project..". Stworzony projekt jest gotowy do uruchomienia (TestPage.html).

Demo: link

Source Code: link

Dokumentacja papierowa

Jeśli mimo wszystko łatwiej jest nam pracować na "papierowej wersji aplikacji", czyli po prostu print screeny z aplikacji, powinniśmy zwrócić uwagę na opcję "Export to Microsoft Word..". Opcja ta pozwala na wygenerowanie pełnej dokumentacji okien prototypu. Powstały Word zawiera spis treści, spis obrazków oraz mapkę połączeń pomiędzy ekranami (SketchFlow Map). Co więcej możemy także zastosować wordowy template który ma być użyty do wygenerowania dokumentacji.

Jeszcze kilka miesięcy temu pamiętam jak robiłem print screeny okien i mapę nawigacji aby przenieść je do Worda, wydrukować i później w grupie znajomych nanosić ręcznie sugerowane poprawki do aplikacji. Teraz wiem że już nie będę musiał tego robić ręcznie. :)

Przykład takiego dokumentu znajdziecie tutaj: link

Podsumowanie

Jak widzicie, mając tak doskonałe narzędzie jesteśmy w stanie tworzyć prototyp aplikacji oraz zmieniać go bez większego nakładu pracy. Ustalanie zawartości jak i wyglądu interfejsu nigdy nie było tak łatwe, a mnogość opcji jakie daje nam nowy Expression Blend 3 wspiera nas na każdym kroku.

Oczywiście SketchFlow dostarcza o wiele więcej innych opcji, jak chociażby animację pomiędzy oknami, czy też tworzenie i zagnieżdżanie własnych "kompozycji" elementów w innych oknach, z którymi także polecam się zapoznać.

References

• Install Microsoft Expression Blend 3 + SketchFlow RC
  

• Download Silverlight 3 Tools (SDK)