Dziennik Zdrowej Diety – SketchFlow

SketchFlow to dodatek do aplikacji Microsoft Expression Blend (wersja 3 i 4). Głównym zadaniem tego dodatku jest wspomożenie programisty przy tworzeniu prototypu interfejsu użytkownika.

Używając SketchFlow możesz:
• tworzyć formatki wykorzystując zestaw kontrolek WPF, Silverlight, SketchFlow,
• tworzyć animamacje i przejścia za pomocą zachowań pomiędzy stanami kontrolek,
• nawigować pomiędzy kolejnymi formatkami,
• wykorzystać przykładowe dane do zasymulowania rzeczywistej aplikacji,
• publikować stworzone rozwiązanie na serwer SharePoint.

W wielkim uproszczeniu SkechFlow mogę porównać do takiego napakowanego PowerPoint’a z większymi możliwościami integracji w tworzone rozwiązania.
Na stronie Microsoft Expression znajdziecie Expression Studio 4 Ultimate w wersji Trial pozwalającej na zabawę z całym pakietem przez 60 dni.

W czym ma nam pomoć SketchFlow ? Jest to szybki sposób na pokazanie klientowi końcowemu jak będzie wyglądał produkt końcowy.
Korzystając z uwag klienta, bardzo szybko możemy nanieść zmiany na taki prototyp dzięki czemu zaoszczędzi nam to wiele nieporozumień przy kolejnej prezentacji. (etapy tworzenia oprogramowania).

Poniżej zamieszczam krótki tutorial mający za zadanie wprowadzenie was w Świat SketchFlow.

1) Uruchamiamy Expression Blend 4. Z menu File -> New Project … wybieramy Silverlight SketchFlow Application

2) W wyniku kroku pierwszego otrzymujemy:



Zakładki:
Project – przedstawia nam eksplorator naszej solucji składającej się z 2 projektów. Pojedynczy Szkic (Sketch), na który będziemy tworzyć nasz interfejs, jest kontrolką UserControl w formacie XAML (Screen1.xaml).
SketchStyles.xaml pełni rolę słownika styli zdefiniowanych w aplikacji.
Sketch.Flow to najważniejszy plik naszego projektu zawierający logikę połączeń pomiędzy screen’ami, zachowania kontrolek, etc.

Resources – w zakładce tej znajdują się pliki xaml z definicjami naszych styli. Tak jak w Silverlight / WPF może to być globalny App.xaml, poszczególna formatka, czy też plik odrębny (tak jak w naszym wypadku SketchStyles.xaml)

Data – zakładka w której możemy stworzyć przykładowe dane wykorzystywane do prezentacji na szkicach. Istnieje kilka opcji kreowania takich danych:
• import z XML,
• tworzenie obiektu na podstawie klasy (w formacie xaml),
• tworzenie obiektu od podstaw.

SketchFlowMap – przedstawia mapę naszych szkiców oraz powiązania istniejące pomiędzy nimi.

Objects and Timeline – struktura kontrolek zamieszczonych na szkicu.

Properties – właściwości zaznaczonego obiektu na szkicu.

SketchFlow Animation – zakładka odpowiedzialna za tworzenie animacji na szkicu.

3) Stworzymy teraz prostą mapę naszej aplikacji. W SketchFlowMap z menu kontekstowego wybieramy Create a screen. Dodawanie kolejnych screenów tworzy nowe obiekty xaml w projekcie.


Zielony trójkącik przy screenie oznacza, który screen jest ustawiony jako startowy.

4) Stwórzmy w takim razie stronę startową naszej aplikacji.



5) Zapewne chcielibyśmy wykorzystać powyższe przyciski, logo i miejsce na konteks na pozostałych stronach. W tym celu zaznaczamy interesujące nas kontrolki i wybieramy z menu kontekstowego Make Into Component Screen (tworzy nam to szablon do wykorzystania na innych szkicach – można go porównać do Master.Page z ASP.NET).
6) W SketchFlowMap pojawił się nam nowy element oznaczony na zielono. Łączymy go z każdym szkicem, na którym chcemy z niego korzystać.



a następnie nanosimy na każdy szkic nową kontrolkę (RepeatedMenu).



Teraz wystarczy tylko poustawiać odpowiednio marginesy i kotwice kontrolki by na każdym szkicu szablon wyglądał identycznie.

7) Kolejną rzeczą jaką się zajmiemy będzie ustawienie nawigacji wykorzystując przyciski na szablonie. By tego dokonać, wchodzimy do kontrolki reprezentującej nasz szablon (RepeatedMenu), zaznaczamy przycisk i z menu kontekstowego wybieramy Navigate To, a następnie wskazujemy interesujący nas szkic.




























8) W tym momencie nasze menu powinno działać poprawnie, odwołując do żądanych przez nas stron.
9) Kolejną funkcjonalnością wartą zbadania jest możliwość tworzenia przykładowych danych pozwalających na zasymulowanie produkcyjnej wersji aplikacji.

W celu stworzenia przykładowych danych przechodzimy do zakładki Data, a następnie wybieramy, Create Sample Data -> New Sample Data. Blend zapyta się nas jak mamy nazwać przykładowe źródło danych i gdzie je przetrzymywać: Projekt, otwarty dokument. Proponują tą pierwszą opcję.






































Jak zauważyliśmy na powyższym rysunku, Blend stworzył źródło danych zawierające kolekcję składającą się z dwóch właściwości. Klikając dwukrotnie możemy zmienić nazwę właściwości. Ikonka po prawej stronie właściwości pozwala na zmianę typu danych. Dodanie MySampleDataSource spowodowało dodanie nowych obiektów do projektu (zawartość katalogu SampleData).

10) Po kilku modyfikacjach MySampleDataSource, klikamy w pierwszą ikonkę przy Collection -> Edit Sample Values. Aplikacja automatycznie generuje przykładowe dane na podstawie typu właściwości oraz jej formatowania.



11) Pozostaje nam już tylko zbindowanie stworzonego źródła danych z kontrolką (w naszym wypadku będzie do ListBox).

Bindowanie ListBox.ItemSource z kolekcją przygotowanych danych.



Bindowanie elementów ListBoxa (ItemTemplate.DataTemplate)



12) Efekt końcowy możemy zaobserwować po naciśnięciu F5



13) Warto zauważyć, że SketchFlow udostępnia nam szereg funkcjonalności pozwalających na nanoszenie notatek bezpośrednio przez klienta lub/i podczas prezentacji. Zakładka MY FEEDBACK zamieszczona na powyższym rysunku posiada narzędzia do zaznaczania oraz pozostawiania krótkich notatek wraz z możliwością eksportu do pliku by w późniejszym etapie przedstawić uwagi projektantowi.



14) W celu odtworzenia zapisanych uwag/notatek od klienta, wybieramy menu Windows -> SketchFlow FeedBack. Pojawia się nowa zakładka do której możemy wczytać uwagi (ikonka + po prawej stronie). Efektem takiego zabiegu jest szkic naszej formatki z wszystkimi uwagami naniesionymi podczas prezentacji.



15) SketchFlow posiada jeszcze jedną przydatną funkcję pozwalającą na łatwe dokumentowanie naszej pracy. Jest to eksport do Microsoft Word.
Wybieramy z menu File – Export to Microsoft Word ...



Mam nadzieję, że po krótce udało mi się przedstawić koncepcję SketchFlow, a powyższy tutorial pozwoli wam zrobić pierwsze kroki z tym interesującym narzędziem.