www.romver.ru / Полный список статей / Microsoft Expression Blend

Poavlenie azika opisania pol'zovatel'skix interfeysov XAML (proiznositsa – zámmel') i novoy sredi razrabotki Expression Blend pozvolaet zametno uskorit' i obleg4it' proektirovanie i postroenie pol'zovatel'skix interfeysov kak dla veb-, tak i dla nastol'nix prilojeniy.

Danniy azik pozvolaet opisivat' vne6niy vid i povedenie interfeysnix elementov, ustanavlivat' vzaimodeystvie etix elementov s razli4nimi dannimi i sobitiami. Dopuskaet pramoe podklu4enie k Common Language Runtime (CLR), 4to obespe4ivaet bol'6uu gibkost' pri proektirovanii PO.

Funkcional'nost', vzaimodeystvie XAML i procedurnogo koda

XAML – eto skriptoviy azik, baziruu6iysa na XML, on imeet nabor pravil, kotorie ustanavlivaut vzaimodeystvie mejdu ob&ektami i klassami, atributami i svoystvami ili sobitiami i prostranstvami imen XML i CLR. Dla opisania elementov, paneley, svoystv teksta, vektornoy grafiki i t.p. ispol'zuutsa tegi.

<Button VerticalAlignment="Top" Width="Auto" Height="Auto" Content="Button"/>

Kajdiy teg v XAML imeet sootvetstvuu6iy klass v WPF, kotoriy imeet nabor instrukciy, kak vipolnit' etot teg. XAML vklu4aet v seba: paneli, elementi upravlenia, elementi upravlenia dokumentami i elementi vektornoy grafiki.

Pri sozdanii proekta v Expression Blend kajdiy fayl na XAML imeet fayl-soratnik (code-behind) na C# ili VB.

XAML vzaimodeystvuet s kodom na C# ili VB posredstvom obrabot4ika sobitiy, kotoriy propisivaetsa vnutri tega ob&ekta.

<Button Content="Button" Click="Button_Click"/>

private void Button_Click(object sender, System.Windows.RoutedEventArgs e)

{

MessageWindow MessageWindow = new MessageWindow();

MessageWindow.ShowDialog();

Microsoft Expression Blend

Est' neskol'ko vizual'nix redaktorov pozvolau6ix sozdavat' i redaktirovat' XAML: Microsoft XamlPad, Microsoft Visual Studio 2005, 2008, Microsoft Expression Blend, Mobiform Avrora, XamlHack.

Podrobno xo4u ostanovit'sa na osnovnom prilojenii dla raboti s XAML – Microsoft Expression Blend, dalee prosto Blend.

Blend predstavlaet soboy sovremennoe sredstvo vizual'nogo proektirovania interfeysov, osna6ennoe vstroennim redaktorom XAML, 4to pozvolaet, s odnoy storoni proektirovat' interfeysi ne obra6aa vnimania na isxodniy kod, a s drugoy storoni, pozvolaet bolee «tonko» nastraivat' sozdavaemiy interfeys.

Tak kak svoystva ob&ektov v Blend nerazrivno svazani s vozmojnostami XAML, dal'ney6ee opisanie elementov provoditsa 4erez predstavlenie etix ob&ektov v Blend, kak grafi4eskix, tak i interaktivnix, t.e. tak kak vidit eto dizayner.

Interfeys Blend

Blend imeet sovremenniy interfeys, privi4niy kak dizayneram grafikam, tak i veb-dizayneram.

Rabo4ee prostranstvo razdeleno na tri osnovnie 4asti.

Rabo4ee prostranstvo Microsoft Expression Blend: panel' instrumentov (podkra6ena krasnim), paneli Interaction i Objects and Timeline (purpurnim) sleva, osnovnoe rabo4ee prostranstvo s panel'u instrumentov i vkladkami pereklu4enia vida Design, XAML ili Split poseredine i panel' Results v centre snizu (podkra6eno zelenim) i paneli Project, Properties, Resourses i Data sprava (sinie).

Vse paneli pozvolaut pereklu4at'sa v «plavau6iy» rejim ili is4ezat' s ekrana pri pomo6i «gora4ix» klavi6. V menu Tools/Options/Workspace est' vozmojnost' nastroyki razmerov paneley. Blend ispol'zuet bol'6oe koli4estvo «gora4ix» klavi6, spasibo razrabot4ikam o zabote, bol'6instvo so4etaniy xoro6o izvestni vsem dizayneram, rabotau6im s grafi4eskimi programmami ot Adobe.

Panel' instrumentov imeet prakti4eski standartniy vid dla programm redaktorov vektornoy grafiki i vklu4aet v seba osnovnie instrumenti sozdania i redaktirovania grafiki plus specifi4nie dla Blend instrumenti i biblioteki standartnix i pol'zovatel'skix elementov.

Po umol4aniu v Blend vklu4eni dve biblioteki interfeysnix elementov System Controls – standartnie elementi i Simple Styles – biblioteka-primer postroenia pol'zovatel'skix interfeysnix elementov, raskrivau6aa vozmojnosti XAML.

Instrumenti risovania

Vektorniy redaktor Blend obladaet vsemi vozmojnostami sovremennogo vektornogo redaktora plus obladaet nekotorimi unikal'nimi svoystvami.

Instrumenti dla postroenia i redaktirovania vektornoy grafiki tipi4ni dla mnogix vektornix redaktorov i vklu4aut v seba redaktor krivix, predstavlenniy instrumentami: Pero (Pen), Karanda6 (Pencil), instrument videlenia (Selection) i instrument neposredstvennogo videlenia (Direct Selection), a takje instrumentami dla postroenia prostix geometri4eskix form: Pramougol'nik (Rectangle), Oval (Ellipse) i Linia (Line).

Blend pozvolaet:

• sozdavat' sostavnie vektornie ob&ekti (Compound paths).
• sozdavat' vektornie ob&ekti posredstvom logi4eskix operaciy (vi4itanie, slojenie i t.d.) (Combining paths).
• perevodit' 6rift v vektorniy ob&ekt (Convert to Path)
• kadrirovat' kak rastrovoe, tak i vektornoe izobrajenie (Clipping paths)
• sozdavat' maski prozra4nosti (Opacity masks)

Nastroyka svoystv grafi4eskix elementov, imeet rad osobennostey delau6ix rabotu dizaynera bolee udobnoy i pozvolaet dostignut' bol'6ey gibkosti v postroenii interfeysa po sravneniu s obi4nimi (klassi4eskimi) sposobami.

Ostanovimsa podrobnee na nekotorix iz nix:

• Vozmojnost' razdel'no zadavat' tol6inu liniy obrazuu6ix storoni ob&ektov tipa Granica (Border) i Pramougol'nik (Rectangle).
• Vozmojnost' razdel'no zadavat' radius skruglenia dla vsex uglov v ob&ekte Granica (Border).

Primer postroenia pol'zovatel'skogo elementa s kodom na XAML

<Border Height="22" BorderThickness="1,0,1,3" BorderBrush="#FFFF0000"
 CornerRadius="0,0,2,2" Width="100"/>

Nastroyka vne6nego vida ob&ektov

Vne6niy vid ob&ektov zavisit ot svoystv, kotorie zadautsa kak pri pomo6i pramix nastroek, tak i pri pomo6i kistey (Brushes):

• Prozra4nost' (Opacity)
• Vidimost' (Visibility)
• Zalivka (Fill)
• 6trix (Stroke)
• Fon (Background)
• Peredniy plan (Foreground)
• BorderBrush (Granica)
• Maska prozra4nosti (Opacity masks)

Kisti ispol'zuutsa dla zadania vne6nego vida ob&ektov i mogut bit' sleduu6ix tipov:

• Odnocvetnaa kist' (Solid color brush)
• Lineyniy gradient (Linear gradient brush)
• Radial'niy gradient (Radial gradient brush)
• Kist' rastrovoe izobrajenie (Image brush)
• Kist' vektornoe izobrajenie (Drawing brush)
• Kist' vizual'nix effektov (Visual brush)

Kisti mojno konvertirovat' v resursi i mnogokratno primenat' k razli4nim ob&ektam.

Blend imeet standartniy redaktor cvetov pozvolau6iy operirovat' 4etir'ma cvetovimi modelami: RGB, HLS, HSB i CMYK, a tak je special'niy instrument dla nastroyki gradientov (Brush transform tool) i instrumenti dla perenosa svoystv ob&ektov (Eyedropper i Paint Bucket).

Osobo bi xotelos' otmetit' nali4ie v Blend special'nix rastrovix effektov (Bitmap effects):

• Razmitie (Blur)
• Vne6nee sve4enie (Outer glow)
• Ten' (Drop shadow)
• Faska (Bevel)
• Rel'ef (Emboss)

Vse fil'tri rabotaut v real'nom mas6tabe vremeni i mogut primenatsa ko vsem bez isklu4enia interfeysnim elementam, v tom 4isle i generiruemim «na letu»

Rabota s tekstom

Blend avlaetsa specializirovannim instrumentom dla postroenia pol'zovatel'skix interfeysov i imeet neskol'ko tipov tekstovix ob&ektov:

• Tekstovoe pole (TextBox)
• Tekstovoe pole s ras6irennimi vozmojnostami (RichTextBox)
• Tekstoviy blok (TextBlock)
• Pole parola (PasswordBox)
• Metka (Label)
• Tekstoviy blok s ras6irennim soderjimim i polosoy prokrutki (FlowDocumentScrollViewer)

Nastroyki teksta zavisat ot tipa ob&ekta i ego funkcional'nosti.

Biblioteka interfeysnix elementov

Biblioteka interfeysnix elementov soderjit vse tipi standartnix interfeysnix elementov, specifi4eskie elementi Blend i elementi, soderja6iesa v stile SimpleStyles.

Spisok interfeysnix elementov dostupnix iz vstroennoy biblioteki

Elementi podrazdelautsa na sleduu6ie kategorii:

• Paneli razmetki (Layout Panels), ispol'zuutsa kak konteyneri, dla drugix elementov opredelaa ix mestopolojenie otnositel'no drug druga.
• Interfeysnie elementi (Controls)

Postroenie interfeysa v ob6em slu4ae svoditsa k perenosu interfeysnix elementov iz biblioteki na rabo4ee prostranstvo s posleduu6ey ix komponovkoy.

Sozdanie interfeysov v Expression Blend

Blend obladaet razvetvlennimi vozmojnostami dla postroenia ka4estvennix interfeysov i glavnoy vozmojnost'u, na moy vzglad, avlaetsa sozdanie pol'zovatel'skix bibliotek-stiley, soderja6ix interfeysnie elementi s zaranee zadannim vne6nim vidom i povedeniem.

Stili i 6abloni

Stili i 6abloni unikal'naa vozmojnost' XAML, pozvolau6aa so4etat' v sebe mo6nost' stiley CSS i gibkost' 6ablonov grafi4eskix programm.

Stili opisivautsa soderjimim zaklu4ennim v teg <Style> i mogut soderjat' sleduu6ie elementi:

• Kisti vsex tipov (Brush)
• Geometri4eskie svoystva elementov (Visota, 6irina, skruglenie uglov, tol6ina liniy i t.d.)
• Special'nie effekti (BitmapEffects i Visual brush)
• Interfeysnie elementi
• Vektornie grafi4eskie ob&ekti.

Kak vidno iz spiska elementov, stil' mojet soderjat' v sebe polnoe opisanie vsex interfeysnix elementov i ix sostavlau6ix i pozvolaet gibko upravlat' vne6nim vidom interfeysa.

Stil' mojet soderjatsa kak v samom fayle proekta, tak i v otdel'nom fayle, soderja6em tol'ko stili. Vtoroy variant predpo4titel'ney, t.k. pozvolaet imet' stol'ko stiley dla prilojenia, skol'ko mojet pozvolit' va6e voobrajenie i v etom glavnoe preimu6estvo novoy texnologii: kod na procedurnom azike, a interfeys na skriptovom azike, 4to pozvolaet ulu46it' ili zamenit' interfeys bez bol'6ix resursoemkix i vremennix izderjek.

Sozdanie pol'zovatel'skix interfeysnix elementov

Est' dva puti dla sozdania elementov: mojno viu4it' sintaksis XAML i «pisat'» elementi kodom ili je mojno vospol'zovat'sa Blend. Vtoroy sposob pro6e, nagladnee i bistree.

Dla sozdania pol'zovatel'skogo vida interfeysnogo elementa v Blend imeetsa vozmojnost' kak redaktirovania su6estvuu6ego, tak i sozdania novogo elementa. Dla togo 4tobi otredaktirovat' element dostato4no «6elknut'» po nemu pravoy knopkoy mi6i i vibrat' Edit Control Parts (Template). Poavitsa «na4inka» elementa i vi mojete izmenit' vne6niy vid – s pomo6'u grafi4eskogo redaktora Blend ili izmenit' povedenie elementa, redaktirua pereklu4ateli sobitiy (Event Triggers) ili zadat' animaciu, ispol'zua Timeline.

Razmetka

Razmetka dokumenta osu6estvlaetsa special'nimi panelami (Layout Panels), kotorie mogut vklu4at' v seba kak sami paneli, tak i interfeysnie elementi. Dostup k panelam osu6estvlaetsa na paneli instrumentov i 4to samoe neojidannoe, kak funkcia Gruppirovki (Group), nakonec to gruppirovka perestala bit' abstraktnoy su6nost'u!

Paneli razmetki mogut bit' sleduu6ix tipov:

• Xolst (Canvas panel)
• Stikovo4naa panel' (Dock panel), soderjimoe paneli mojet pristikovivat'sa k zadannim storonam paneli
• Tablica (Grid panel), soderjimoe naxoditsa vnutri a4eek tablici
• Stopka (Stack panel), soderjimoe gruppiruetsa v posledovatel'nom poradke po gorizontali ili vertikali
• Panel' s vozmojnost'u skritia soderjimogo (Wrap panel) – esli soderjimoe ne pome6aetsa vnutri paneli, naprimer, pri izmenenii razmera paneli, soderjimoe skrivaetsa opredelennim obrazom.

Raspolojenie ob&ektov, privazki i viravnivanie

Kak izvestno, vne6niy vid esteti4nogo interfeysa opredelaetsa mestoraspolojeniem formiruu6ix ego elementov, a takje nali4iem pustogo prostranstva (otstupov) i proporcional'nim stroem ego sostavlau6ix, t.e. to, 4to zovetsa kompoziciey. Blend obladaet radom gibkix instrumentov, pomogau6ix dizayneru to4no raspolagat' i komponovat' elementi interfeysa.

Vizual'naa privazka

Instrument vizual'noy privazki (Snap) imeet unikal'noe svoystvo, a imenno predopredelaemoe svoystvo pokazivat' zadanniy razmer granici mejdu elementami (Default margin i Default padding). Eta funkcia zdorovo uskoraet raspolojenie elementov v forme: dostato4no prosto vibrosit' element na ploskost' i Blend sam pokajet nujnie dla nego otstupi.

Vizual'naa privazka pozvolaet to4no pozicionirovat' elementi otnositel'no drug druga, sobludaa zadannie razmeri granic mejdu elementami i pokazivaet, kak eti granici, tak i mestopolojenie elementov otnositel'no drug druga i bazovuu liniu teksta (dla elementov, soderja6ix tekst).

Funkcia viravnivania (Align) rabotaet ne sovsem obi4no: viravnivanie elementov proisxodit ne otnositel'no drug druga, kak eto obi4no praktikuetsa v grafi4eskix programmax, a otnositel'no Paneli razmetki (Layout Panels) v kotoroy naxodatsa elementi, 4to o4en' udobno, no neprivi4no. Esli elementi naxodatsa vnutri Tablici (Grid Panel), to poavlaetsa vozmojnost' upravlat' povedeniem elementov pri izmenenii razmerov okna prilojenia, imeetsa 3 vida povedenia:

• Auto – pri izmenenii razmerov tablici izmenaetsa razmer zaklu4ennix v nee elementov.
• Pixel – stroka ili stolbec tablici imeut fiksirovannoe zna4enie v pikselax.
• Star – izmenaet razmeri elementov analogi4no izmeneniu razmerov v procentax v HTML.

Dannie svoystva ustanavlivautsa, kak na stroki, tak i stolbci tablici i mogut primenat'sa v luboy kombinacii.

Plusi i minusi Expression Blend

Kak mi vidim, Blend avlaetsa mo6nim prilojeniem dla sozdania pol'zovatel'skix interfeysov i, podvoda itogi, xotelos' bi ukazat' na plusi i minusi dannogo instrumenta s to4ki zrenia dizaynera interfeysov:

Blend i klassi4eskie sposobi sozdania prototipov interfeysov

Po bol'6omu s4etu, sravnenie klassi4eskix texnologiy prototipirovania interfeysov i novoy texnologii WPF – predstavitelem kotoroy avlaetsa Blend, avlaetsa ne sovsem korrektnim.

Klassi4eskoe prototipirovanie eto v pervuu o4ered', proektirovanie vzaimodeystvia, sozdanie vne6nego vida prilojenia uje vtori4no, xota i nemalovajno.

Blend programma dla sozdania uje gotovix interfeysov, t.e. dizayner vidaet programmistam gotoviy interfeys, ne trebuu6iy ix vme6atel'stva v grafi4eskoe re6enie. Programmist tol'ko podklu4aet interfeys k procedurnomu kodu. Dannaa koncepcia avlaetsa dostato4no novatorskoy, kak dla dizaynerov interfeysov, tak i dla programmistov. S to4ki zrenia dizaynera interfeysov, Blend avlaetsa dopolnitel'nim instrumentom pri proektirovanii interfeysov, tak kak proektirovanie interfeysov eto ne tol'ko i daje ne sovsem vne6niy vid, a v pervuu o4ered' vzaimodeystvie programmi i 4eloveka, a instrumenti, pozvolau6ie eto delat' v Blend, malorazviti ili otsutstvuut sovsem.

4to neset nam novaa texnologia?

Prejde vsego, gibkost' pri sozdanii prilojeniy, kotoraa obespe4ivaetsa nali4iem sovremennix sredstv vizualizacii i novix texnologiy:

• Vektornaa grafika: teper' interfeys sostoit polnost'u iz vektornix ob&ektov (interfeysnie elementi, grafika, piktogrammi).
• Novie ekrannie 6rifti.
• Novaa texnologia popiksel'nogo pozicionirovania izobrajenia na ekrane.
• Odna programma mojet soderjat' neskol'ko interfeysov (raznie razre6enia, veb i nastol'nie prilojenia i t.d.).
• Dizayner i programmist mogut odnovremenno rabotat' nad odnim proektom, kajdiy vipolnaa svou funkciu, 4to obespe4ivaet, kak gibkost' pri sozdanii prilojeniy, tak i uveli4ivaet skorost' raboti.

Spisok literaturi

XAML Overview

C. Sells and I. Griffits, Programming WPF, O'Reilly Media, Inc.; 2 edition, 2007

G., Leete and M., Leete, Microsoft Expression Blend Bible, Wiley Publishing, Inc., Indianapolis, Indiana, 2007.

Sergey 6vecov usethics.ru/lib/ms_blend.html