Silverlight 3.0 : Microsoft Expression Blend 3

Microsoft Expression Blend 3 je flexibilné a produktívne grafické vývojové prostredie. Pomáha pri tvorbe moderných a vizuálne prepracovaných aplikácií s interaktívnou podporou 3D zobrazovania a prehrávania multimédií. Umožňuje vytvorenie a úpravy prezentačnej vrstvy webových aplikácií. Využíva nový druh značkovacieho jazyka XAML.

Poznámka: Táto verzia umožňuje otvárať aj projekty pre Silverlight 2.0, ktoré automaticky inovuje na verziu 3.0. Spätný krok nie je možný, preto je potrebné otvárať Silverlight 2.0 projekty v staršej verzii.

Microsoft Expression Blend 3 umožňuje vytvorenie a úpravy prezentačnej vrstvy webových aplikácií aj Windows WPF aplikácií s plnou podporou Silverlight 3.0. Dialóg pre vytvorenie nového projektu obsahuje šablóny pre:

• Silverlight 3 Application + Website,
• WPF Application,
• Silverlight 3 SketchFlow Application,
• WPF SketchFlow Application.

Dialóg pre vytvorenie nového projektu v prostredí Microsoft Expression Blend 3

Silverlight 3 podporuje programovanie aplikačnej logiky v .NET jazykoch. Implicitne sú v prostredí Expression Blend 3 k dispozícii programovacie jazyky:

• Visual C#,
• Visual Basic.

Azda najrýchlejšie bude zoznámiť sa s vývojovým prostredím Microsoft Expression Blend 3 „za behu“ na praktickom príklade. Vytvorte novú aplikáciu typu Silverlight 3 a vhodne ju pomenujte. Aplikáciu umiestnite do príslušného priečinka v ktorom plánujete vytvárať projekty tohto typu.

Pracovná plocha v prostredí Expression Blend 3 pre vývoj Silverlight 3.0 aplikácie

V strede pracovnej plochy návrhového prostredia je situovaná oblasť „Art Board“. Umožňuje zobraziť grafické návrhové zobrazenie, prípadne návrh reprezentovaný v XAML jazyku, alebo v režime „Split“ obidva režimy. Režim zobrazenia sa prepína pomocou ikoniek v pravej hornej časti stredného okna. V ľavej časti je v záložke „Projects“ zobrazený zoznam súborov z ktorých pozostáva projekt. Grafický návrh prezentačnej vrstvy aplikácie, ktorá obsahuje napríklad definície vizuálnych prvkov, pozadia a podobne je uložený v súbore MainControl.xaml. V novom projekte obsahuje tento súbor definíciu prázdnej pracovnej plochy kde je prvok <Grid>:

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SL3app.MainPage"
	Width="640" Height="480">

	<Grid x:Name="LayoutRoot" Background="White"/>
</UserControl>

Návrh prezentačnej vrstvy

Úplne vľavo pri ľavom okraji okna aplikácie Expression Blend 3 je úzka lišta s ikonami nástrojov pre vizuálny návrh prezentačnej vrstvy. Pomocou nich môžete na pracovnej ploche vytvárať prvky vektorovej grafiky a ovládacie prvky. Posledná ikona v tvare dvojitej šípky sprístupňuje knižnicu prvkov Asset Library.

Knižnica prvkov

Možnosti pri návrhu budú ukázané na najjednoduchšom dvojrozmernom prvku Rectangle, teda obdĺžniku. V prvom kroku metódou „drag and drop“ umiestnite obdĺžnik na požadované miesto pracovnej plochy a upravte jeho rozmery.

Vizuálny návrh grafického prvku (obdĺžnika)

V XAML kóde sa pridanie obdĺžnika prejaví takto:

<Grid x:Name="LayoutRoot" Background="White">
	<Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" Height="91" 
	HorizontalAlignment="Left" Margin="101,44,0,0" VerticalAlignment="Top" 	Width="149"/>
</Grid>

Všimnite si záložku Properties v pravom bočnom okne. V nej môžete nastavovať parametre prvku, ktorý je vybraný a vyznačený v grafickom návrhovom okne. K dispozícii je široká paleta možností, napríklad pre návrh farebného dizajnu. Ak napríklad chcete zobraziť obdĺžnik vyplnený farebným gradientom, vytvoríte ho pomocou príslušných návrhových prvkov v tejto záložke. V príklade sme zmenili farbu výplne na svetlo modrú:

<Rectangle Fill="#FF1C73F0" Stroke="#FF000000" Height="91" HorizontalAlignment="Left" Margin="101,44,0,0" VerticalAlignment="Top" Width="149" OpacityMask="#FF000000"/>

Transformácia

Pri podrobnejšom skúmaní záložky Properties zistíte, že je rozdelená na niekoľko podzložiek. Predchádzajúce zmeny farebného návrhu sa vykonávali v záložke Brushes. Ak je potrebná geometrická transformácia objektu, napríklad pootočenie, alebo skosenie využijete záložku Transform. Objekt môžete pootočiť aj priamo uchopením za vrchol a následným pootočením.

Geometrická transformácia grafického prvku

<Rectangle Fill="#FF1C73F0" Stroke="#FF000000" Height="91" HorizontalAlignment="Left" Margin="101,44,0,0" VerticalAlignment="Top" Width="149" OpacityMask="#FF000000" RenderTransformOrigin="0.5,0.5">
	<Rectangle.RenderTransform>
		<TransformGroup>
			<ScaleTransform/>
			<SkewTransform/>
			<RotateTransform Angle="30"/>
			<TranslateTransform/>
		</TransformGroup>
	</Rectangle.RenderTransform>
</Rectangle>

Projekt môžete zostaviť a spustiť pomocou menu Project- Run Project.

Spustenie projektu

Všimnite si v kontextovom menu, že projekt môžete otvoriť aj vo vývojovom prostredí Visual Studio 2008, samozrejme len v prípade ak je toto prostredie nainštalované a doplnené o Silverlight 3 a pokračovať vo vývoji v tomto prostredí. V nasledujúcej kapitole je popísané vytvorenie projektu v prostredí Visual Studio 2008. Ak ste robili nejaký cvičný projekt v prostredí Expression Blend 3, môžete ho pomocou položky v kontextovom menu otvoriť v prostredí Visual Studio a zoznámiť sa s možnosťami vývoja aplikačného kódu v tomto prostredí.

Sketch Flow

Aktuálne dostupná verzia Expression Blend 3 je doplnená aj o funkcionalitu Sketch Flow. Umožňuje vytvárať a modelovať prototypy stránok a postupnosť navigácie po jednotlivých stránkach aplikácie. Ide o modelovací nástroj na pretavenie vízie o dizajne a fungovaní aplikácie do konkrétneho projektu.

Vytvorte si cvičný projekt typu Silverlight 3 SketchFlow Application a vymyslite si nejaký námet. V spodnej časti sa v rámci konceptuálneho a logického modelovania vytvára diagram stránok a navigačných prvkov, ktoré budú tvoriť aplikáciu a prepojenia medzi nimi. Napríklad začnete hlavnou stránkou alebo prihlasovacou stránkou a následne v grafickej forme rozvíjate štruktúru aplikácie. Všimnite si ikonky pod okienkami diagramu, z nich môžete metódou „drag and drop“ vytvárať nadväzné stránky. Zároveň s vytvorením prvku diagramu predstavujúceho stránku sa vytvorí aj stránka samotná.

V hornej časti je možné najskôr naskicovať dizajn a následne ho dotvárať reálnymi grafickými prvkami. Pre náčrty sú k dispozícii špeciálne graficky stvárnené prvky, ktoré sú v priečinku SketchStyles (viď obrázok). Dizajn týchto prvkov simuluje náčrt voľnou rukou.

Dizajn celého projektu je možné vyexportovať do textového editora Word. Všetky stránky budú prehľadne uložené v jednom dokumente. Možno si pri neskoršej údržbe starších projektov lámete hlavu nad tým, ako to bolo urobené a ľutujete, že ste si nerobili aspoň poznámky, ak už nie dokumentáciu. Sketch Flow vám nielen pomôže pri dizajne a návrhu, ale za vás vytvorí aj dokumentáciu.

Projekt typu Sketch Flow

Po spustení aplikácie môžu členovia návrhárskeho tímu návrh pripomienkovať – ako inak, graficky. Pre možnosť dokresľovania feedbacku je pred spustením aplikácie potrebné na úrovni modulu Silverlight Plugin povoliť parameter Enable Application Storage. Konfigurácia sa nastavuje pomocou programu Silverlight.Configuration.exe, ktorý je pri implicitnej inštalácii umiestnený v priečinku c:\Program Files\Microsoft Silverlight\..cislo verzie.. Feedback je možné uložiť.

Spustenie a test projektu typu Sketch Flow

Späť na obsah