Expression Blend - uruchamiamy produkt

W poprzedniej części przedstawiłem sposób instalacji Blenda – jak widać, nie było to bardzo skomplikowane. Tym razem przyjrzyjmy się środowisku pracy. Chciałbym przedstawić, z jakich elementów składa się produkt, co gdzie jest dostępne i jakie ma podstawowe opcje. W następnych częściach będziemy wchodzili w coraz większe szczegóły.

Uruchamiamy program

Blend po standardowej instalacji znajduje się w menu Start -> Microsoft Expression -> Microsoft Expression Blend (rysunek 1). Po jego uruchomieniu dostajemy ekran powitalny (rysunek 2), który podzielony jest na trzy zakładki:

• Projects – lista ostatnich projektów,
• Help – pomoc dla produktu,
• Samples – przykłady gotowych aplikacji.

Opcja Run at startup pozwala na wybranie tego, czy chcemy, aby ten ekran pojawiał się przy starcie programu, czy też nie.

Aby móc zobaczyć, jak wyglądają poszczególne elementy, wybierzmy z przykładów gotowy projekt pt. Grand Piano. Po uruchomieniu zobaczymy taki obraz jak na rysunku 3.

Jak widać, na obrazku zaznaczyłem kilka podstawowych elementów. Zanim jednak zaczniemy je szczegółowo omawiać, kilka słów wstępu. Expression Blend składa się z dwóch głównych środowisk pracy: Design View oraz XAML View. Design View jest widokiem standardowym i służy do projektowania wizualnego naszego rozwiązania. XAML View jest natomiast widokiem na kod aplikacji, a w zasadzie na kod XAML definiujący obraz (na temat XAML-a również pisałem wcześniej).

Całe środowisko pracy nazywa się Workspace i składa się z następujących elementów (wg liter na rysunku):

A – Artboard, czyli przestrzeń do graficznego modelowania aplikacji. To w tym miejscu mamy do dyspozycji ekran projektowy, na który wstawiamy poszczególne elementy i na którym tworzymy widok ogólny.

B – Interaction Panel – jest to element, który zawiera wszystko, co związane z interaktywnością, czyli przede wszystkim listę obiektów i powiązań między nimi (np. jak wygląda hierarchia elementów), listę wyzwalaczy (ang. triggers), czyli co ma się wydarzyć, jeśli nastąpi jakieś zdarzenie, oraz to, co najważniejsze – element o nazwie Timeline, czyli linię czasu. Przynosi ona informacje o tym, co w określonym przedziale czasu ma się wydarzyć z wybranymi obiektami,

C – Toolbox – przybornik narzędzi,

D – Result Panel – czyli informacje systemu na temat naszego projektu (np. błędy kompilacji),

E – Lista elementów związanych z projektem (zasoby, plik źródłowe),

F – Menu główne programu.

Aby dobrze zapoznać się ze środowiskiem pracy, stwórzmy własny projekt.

Tworzymy własny projekt

Uruchamiamy ponownie Expression Blend, lecz tym razem nie wybieramy gotowca. Z głównego menu wybieramy opcję File -> New Project, a następnie rodzaj projektu (rysunek 4):

Jak widać na rysunku, mamy do dyspozycji dwa możliwe projekty. Pierwszy z nich to Standard Application (standardowa aplikacja), drugi zaś – Control Library (kontrolka). Wybierzmy pierwszą opcję – Standard Application. Dodatkowo możemy wybrać język programowania C# lub VB.NET (język programowania jest analogiczny do ActionScriptu dla Flasha). Podajemy nazwę oraz miejsce, gdzie będzie się znajdował projekt.

Zobaczmy teraz, jak wygląda główny ekran. Jak widać na rysunku 5, nasza tablica do rysowania zawiera pustą kartę oraz w lewym górnym roku nazwę akurat edytowanie pliku – charakterystyczne jest to, że jego rozszerzenie to *.xaml. Na rysunku 6 widać natomiast strukturę katalogów i plików w projekcie. Lista ta składa się z dwóch podstawowych części – pierwsza z nich to lista referencji do innych bibliotek, druga natomiast zawiera listę plików. Każdy plik definiujący widok aplikacji (*.xaml) powiązany jest z plikiem o takiej samej nazwie, tyle że z rozszerzeniem *.xaml.cs. W plikach tych znajduje się kod naszej aplikacji.

Bardzo ważnym plikiem jest App.xaml, który zawiera definicję aplikacji oraz główną formatkę, mającą być uruchamianą po starcie aplikacji.

Wszystkie standardowe kontrolki dostępne są w przyborniku (ang. Toolbox) po wciśnięciu przycisku Asset Library, który widoczny jest na rysunku 7. Po wybraniu tej opcji dostajemy pełną listę dostępnych kontrolek.

Wybieramy dowolną z nich, np. przycisk (Button), i umieszczamy ją na formularzu projektowym. Wówczas automatycznie zostanie ona dodana do listy obiektów na odpowiednim poziomie hierarchii. Standardowo wszystkie elementy umieszczane są na siatce o nazwie Layout Root. W tym momencie możemy przełączyć się pomiędzy widokiem XAML a Design, aby zobaczyć definicję naszego obiektu. Wygląda ona mniej więcej tak:

<Window
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="UntitledProject2.Window1"
 x:Name="Window"
 Title="Window1"
 Width="640" Height="480">

 <Grid x:Name="LayoutRoot">
     <Button HorizontalAlignment="Left" Margin="48,64,0,0" VerticalAlignment="Top" 
     Width="224" Height="96" Content="Button"/>
 </Grid>
</Window>

W Design View możemy natomiast zobaczyć (rysunek 8) wielkość naszego przycisku i rozmieszczenie od krawędzi (liczby 48, 64 oraz 300). Dodatkowo widoczny jest mały element na krawędziach, symbolizujący, które krawędzie przycisku powiązane są z naszym formularzem. Jeśli jest połączenie, to dany bok będzie automatycznie skalowany do wielkości okna formularza. Jeżeli nie będzie powiązany, to jego wielkość się nie zmieni.

Zachęcam do przyjrzenia się poszczególnym kontrolkom. W następnej części przedstawię dokładnie wszystkie elementy wchodzące w skład Toolbox.