Op 12 april zijn in Las Vegas Visual Studio 2010 en .NET Framework 4 gelanceerd, de software was ook dezelfde dag beschikbaar voor MSDN subscribers. Beide zijn onderdeel van een hele reeks nieuwe softwareprodukten en technologieën die dit jaar beschikbaar komen.
Opvallend detail is het verschil in de release aanduiding tussen de producten en de technologieën; de producten Visual Studio, Office en SharePoint hebben 2010 als rugnummer, terwijl technologieën als WPF, WF, Silverlight, ASP.NET aan rugnummer 4 zijn gekoppeld. Natuurlijk moet er ook een uitzondering zijn op de regel, die eer komt toe aan de Expression producten. De Expression-tools zullen niet een 2010 rugnummer krijgen maar als Expression Web 4 en Expression Blend 4 door het leven gaan. We gaan in dit artikel de nieuwe mogelijkheden van Expression Blend bekijken.
Expression Blend 4 in een notedop
Een belangrijk thema van de Expression Blend 4 release is natuurlijk de ondersteuning voor de meest recente technologie. Expression Blend 4 heeft support voor Silverlight 4 en Windows Presentation Foundation (WPF) 4, maar ook Silverlight 3 en WPF 3.5 met Service Pack 1 (SP1) applicaties kunnen nog onderhouden worden. Belangrijk is natuurlijk ook de samenwerking met Visual Studio, integratie met Visual Studio 2010 is aan deze release toegevoegd.
Een ander belangrijk thema van deze release is ‘do more without code’, nieuwe features in SketchFlow voor het maken van meer
dynamische prototypes en uitgebreide mogelijkheden bij het navigeren door deze prototypes. Expression Blend 4 voegt ook nieuwe krachtige behaviors toe voor alle ondersteunde applicatietypes en maakt deze configureerbaar middels conditional stements.
Als laatste belangrijke thema is het ontwikkelen van Business Applicaties verbeterd. Expression Blend introduceert nieuwe features voor de ondersteuning van het Model-View-ViewModel pattern voor het ontwikkelen van Business Applicaties. De mogelijkheden van dit pattern en de ondersteuning van Expression Blend zijn het onderwerp van andere artikelen in dit magazine. Neiuwe design-time data en resource features vergroten de toolkit bij het ontwikkelen van dergelijke applicaties.
Naast alle features ter ondersteuning van deze thema’s zijn er nog andere toevoegingen. Nieuwe controls zoals de PathListBox, nieuwe pixelshader effecten, transition effecten en andere nuttige tooling maken Expression Blend een release om naar uit te kijken. Expression Blend 4 speelt een rol bij het transformeren van je idee middels SketchFlow in een applicatie op basis van Silverlight of WPF.
Ondersteuning voor Silverlight 4 en WPF 4
Expression Blend 4 ondersteunt het ontwikkelen en onderhouden van Silverlight 4 en WPF 4 projecten. Je kunt tevens je Silverlight 3 projecten upgraden naar Silverlight 4, ook kunnen WPF 3.5 SP1 projecten omgezet worden om WPF 4 als target te hebben. De beschikbare Silverlight-projecttypes zijn: Silverlight Application + Website, Silverlight Application, Silverlight Data-driven Application, Silverlight Control Library en Silverlight SketchFlow Application.
Voor WPF zijn de volgende projecttypes beschikbaar: WPF Application, WPF Data-driven Application, WPF Control Library en WPF SketchFlow Application.
De Data-driven project templates voor Silverlight en WPF ondersteunen het MVVM design pattern, een pattern dat de presentatie en logica van de applicatie gescheiden houdt en zorgt voor een betere onderhoudbaarheid.
Het is nog steeds mogelijk in Expression Blend 4 om Silverlight 3 en WPF 3.5 SP1 applicaties te ontwikkelen en te onderhouden. Expression Blend 4 en Visual Studio 2010 gebruiken beide hetzelfde projectformat en hebben ondersteuning voor Team Foundation Server voor source control. Het gevolg hiervan is dat zodra je een Silverlight 3 of WPF 3.5 SP1 project opent, dat dus is gemaakt met het Visual Studio 2008, je gevraagd wordt de solutionfile en projectfiles te updaten. Vanuit Expression Blend kun je gemakkelijk overschakelen naar Visual Studio middels de ‘Edit in Visual Studio’ optie.
Windows Phone
Silverlight speelt nu ook een belangrijke rol voor het ontwikkelen van Windows Phone applicaties. Windows Phone applicaties zijn in principe Silverlight 3 applicaties met een aantal specifieke phone extensies. Voor een Windows Phone project heb je dus ruwweg dezelfde Blend functionaliteit tot je beschikking zoals beschikbaar in Blend 3. Om Windows Phone applicaties te ontwikkelen met de Expression Blend RC moet je dus enkele additionele bits installeren.
De details zijn te vinden op de download sectie van de Microsoft Expression website (http://expression.microsoft.com/en-us/cc136523.aspx)
SketchFlow verbeteringen
SketchFlow is extreem nuttig om snel en efficiënt je ideeën voor een applicatie te demonstreren. Je kunt gemakkelijk de beoogde scenario’s middels een prototype afstemmen met de gebruiker, en een prototype voor de applicatie in enkele iteraties van een ruw idee omvormen tot een concept dat acceptabel is voor de gebruiker. Deze snelle en effectieve vorm van prototyping maakt het mogelijk om je te concentreren op de belangrijke scenario’s.
De default Style set voor een nieuw SketchFlow project is vanaf nu SketchStyles. Als je bijvoorbeeld een nieuwe Button aan een scherm toevoegt, zal dit de SketchFlow style worden gebruikt in plaats van de ‘klassieke’ Button style. Je kunt natuurlijk op elk moment de default Style aanpassen of een custom Style gebruiken.
Als je nu een nieuw scherm of componentscherm toevoegt aan de SketchFlow map is het defaultgedrag de naam van het nieuwe scherm dat is geselecteerd , wat het makkelijk maakt om een naam aan het nieuwe scherm toe te kennen.
De Export to Word feature in SketchFlow heeft een nieuwe optie. Het is nu namelijk mogelijk de feedback in het genereerde document op te nemen. Als dat is gecontroleerd wordt feedback die is geladen in Blend geëxporteerd in het Word-document samen met de schermen en componenten.
Ontwikkelen van Business Applicaties
Het ontwikkelen van Business Applicaties is zoals al eerder aangegeven een van de topthema’s van deze neiuwe release. Het Model-View-ViewModel (MVVM) pattern speelt hierbij een belangrijke rol. Expression Blend 4 heeft nieuwe voorbeelddata (zie voor meer details het artikel van Willem Meints op pagina 32 van dit magazine), behaviors en project template features om het MVVM pattern te ondersteunen.
Het Model-View-ViewModel pattern definieert een structuur om een Silverlight- of WPF-applicatie te ontwikkelen, zodanig dat UI-objecten zoveel als mogelijk worden losgekoppeld van de data en het gedrag van de applicatie. Dit maakt het mogelijk om design en ontwikkeltaken onafhankelijk van elkaar uit te voeren.
De UI vormt de View. Je kunt objecten in de View aan properties en commands van het ViewModel koppelen en de View kan methods aanroepen in het ViewModel. Als onderdeel van het uitvoeren van de Silverlight Data-driven Application project template zullen de standaard Silverlight Application files aan je nieuwe project worden toegevoegd, de MainViewModel.cs, MainViewModelSampleData.xaml en MainView.xaml worden in dit geval extra toegevoegd.
De class in de MainViewModel.cs definieert een property en
methode voor de MainView, die de data en gedrag voor de View beschikbaar stelt. De MainViewModelSampleData.xaml bevat een voorbeeldinstantie van de MainViewModel class die wordt gebruikt als een design-time resource. MainView.xaml is een UserControl met een DataContext property dat is gekoppeld aan een instantie van de MainViewModel class. De text property van het TextBlock is vervolgens gekoppeld aan een property van de class om de inhoud te kunnen tonen. Door middel van de nieuwe CallMethodAction behavior is de Button gekoppeld aan een methode van de MainViewModel class.
In een Business Applicatie is er natuurlijk een centrale rol voor data. In Expression Blend 4 kan middels de definitie van voorbeelddata hier goed op worden ingespeeld. De design-time DataContext property van de UserControl is gekoppeld aan de
ModelViewModelSampleData.xaml file om voorbeelddata beschikbaar te stellen voor class properties tijdens design-time, waarmee de design ervaring voor dit type data-driven applicaties te vergroten.
Naast de op XML gebaseerde voorbeelddata kun je nu ook voorbeelddata vervaardigen op basis van je eigen CLR types. Zelfs indien een type niet over een public constructor beschikt, of indien het geen properties heeft met public setters, kun je nog beschikken over design-time sample data met de ‘Create Sample Data from Existing Class’ command op het Data panel.
Het Data panel stelt een view beschikbaar van de DataContext van een object, zowel voor design-time en runtime en maakt het mogelijk properties, methoden en Commands te slepen op de
design surface om ze te koppelen aan de UI.
Design-time Resources
Het komt soms voor dat resources alleen beschikbaar zijn tijdens runtime en niet tijdens design-time. Expression Blend 4 heeft nu ook een oplossing voor deze gevallen.
De Add Design-time Resource Dictionary dialog zal zich tonen indien het huidige document resources bevat die niet kunnen worden herleid en de Expression Blend solution minimaal een Resource Dictionary heeft. Deze dictionary zal worden samengevoegd met de Design-time Resources dictionary die je onder de propertiesfolder kunt vinden. De resources zijn vanaf dat moment ook tijdens design-time beschikbaar, ze zijn dat dan niet in runtime en worden ook niet met de applicaties mee gecompileerd. Deze feature is bedoeld voor gebruik tijdens scenario’s waarbij de Resource Dictionaries door middel van code worden geladen tijdens de runtime van de applicatie.
Een voorbeeld van een dergelijk scenario is wanneer een applicatie de gebruiker in staat stelt de look van een applicatie een persoonlijk tintje te geven door een specifiek theme te kiezen. Om dit mogelijk te maken dient de theme, die in de Resource Dictionary is opgeslagen, dynamisch te worden geladen bij het opstarten van de applicatie. In Expression Blend is het nu mogelijk om, zonder ook maar een enkele regel code, designtaken uit te voeren waarbij een van deze custom themes is geselecteerd als een design-time resource.
Nieuwe Controls
Vele control Styles en Templates worden beheerd in Resource Dictionaries los van de instanties van de controls die ze gebruiken. In Expression Blend 4 is de algehele ervaring een stuk rijker, de instantie van de control, de waarden van de properties en de data context, zijn alle beschikbaar voor de Style of Template bij een edit sessie.
Layout States for the ListBoxItem
In Silverlight 4 is het nu mogelijk om het toevoegen of verwijderen van items aan een ListBox te animeren en alle details van dergelijke transities te controleren. Je kunt de transitie-animatie aanpassen door je eigen ItemsContainerStyle te ontwikkelen.
De nieuwe states die inbegrepen zijn:
BeforeLoaded – Zal plaatsvinden voordat de ListBoxItem aan de ListBox wordt toegevoegd.
AfterLoaded – Zal plaatsvinden na de BeforeLoaded state en na het toevoegen van de ListBoxItem aan de ListBox.
BeforeUnloaded – Zal plaatsvinden voordat de ListBoxItem wordt verwijderd van de ListBox.
PathListBox Control en Shape Controls
Expression Blend 4 beschikt nu ook over enkele voorgedefinieerde shapes, zoals Arc en Arrow. Heel nuttig indien je grafische skills niet tot je beste kwaliteiten behoren.
In het Assets panel in Expression Blend 4 tref je een nieuwe Shapes category aan. De Shape controls beschikken over de nodige properties om ze te customizen, inclusief een Sketch style Geometry Effect om ze in SketchFlow prototypes te gebruiken. Deze shapes blijken ook heel nuttig in combinatie met het nieuwe PathListBox control. De PathListBox is een control die een nieuwe en flexibele manier introduceert om de layout van meerdere items te regelen. Het control heeft de selectie en binding features van een traditionele ListBox, de layout van de items wordt echter bepaald door een of meerdere UIElements te definieren als LayoutPaths. Vele properties zijn beschikbaar om de positie en orientatie van de items te beinvloeden langs een dergelijke Layoutpath.
Visual State aware
Indien je nu een template maakt of wijzigt voor een van de WPF 4 common controls, zal het States panel een lijst tonen van States die je nu kan selecteren en designen. Dit is mogelijk, omdat een groot aantal control nu nauw kunnen samenwerken met de Visual State Manager en deze controls hun States ook bekendmaken.
De controls die deze eigenschap bezitten zijn: Button, CalendarButton, CalendarDayButton, CalendarItem, CheckBox, ComboBox, ComboBoxItem, Control, DataGrid, DataGridCell, DataGridColumnHeader,DataGridRow, DataGridRowHeader, DatePicker, DatePickerTextBox, Expander, GridSplitter, GridViewColumnHeader, ListBoxItem, PasswordBox, ProgressBar, RadioButton, RichTextBox, RepeatButton, ScrollBar, Slider, TabControl, TabItem, TextBox, Thumb, ToggleButton, ToolTip, TreeViewItem.
Pixel Shader Effects
Er zijn in Expression Blend 4 negen nieuwe effecten toegevoegd aan het reeds uitgebreide palet van grafische mogelijkheden. Je kunt ze vinden in de Asset Browser, de effecten kunnen door middel van een eenvoudige drag en drop actie op een element worden toegepast. De properties van de effecten kunnen door middel van StoryBoards en code behind animaties bevatten.
More Interactivity and Less Code
De lijst van nieuwe features is nog niet klaar. Expression Blend 4 heeft nu ook Conditional Behaviors. Elke actie kan nu worden gekoppeld aan een set van condities die allen waar moeten zijn om de actie te kunnen uitvoeren. Dit maakt het mogelijk om met Expression Blend 4 logica te definieren voor je prototypes of applicaties zonder maar ook een enkele regel code te schrijven.
Properties van behaviors zijn nu bindable, op dezelfde manier als FrameworkElement properties. Dit geeft behaviors meer dynamiek en op de hoogte van de huidige context. Er zijn ook een aantal nieuwe behaviors toegevoegd met een sterke focus op de interactie met data. Dit alles om het ontwikkelen van Business Applicaties beter te ondersteunen. Enkele van de nieuwe behaviors zijn:
CallMethodAction – Roept een methode aan in een target object. Deze behavior is heel geschikt indien je het MVVM pattern toepast binnen jet applicatie.
DataStateBehavior – Indien een specifieke property wijzigt, wordt er een vergelijking uitgevoerd ten opzichte van de nieuwe waarde van de property, afhankelijk van het resultaat krijgt de state de waarde van de inhoud van de TrueState of de FalseState property.
DataTrigger – Deze behavior heeft dezelfde eigenschappen als de vorige Behavior. Indien een specieke property wijzigt, wordt ere en vergelijking uitgevoerd ten opzichte van de nieuwe waarde, echter ditmaal zal er bij een waar conditie een trigger worden afgevuurd.
DataStoreChangeTrigger – Trigger zal plaatsvinden indien een bepaalde property in de Data Store wijzigt.
FluidMoveBehavior – Deze behavior is uitgebreid, twee belangrijke scenarios waren hierbij het uitgangspunt, namelijk animating list items van een lijst naar een andere en van een master list naar een detail view.
Data Store
De Data Store is een nieuwe feature die een applicatie kan gebruiken om applicatievariabelen te beheren, zoals bijvoorbeeld de rol van de huidige gebruiker. De Data Store is een centrale locatie waarmee verschillende delen van de applicatie met elkaar kunnen communiceren middels deze shared state.
Editor en Tool verbeteringen
Expression Blend 4 genereerd nu minder XAML met betrekking tot animations and animation-related properties. Om de consistentie met Visual Studio te vergroten is het nu ook mogelijk om het ‘Run Project’ command te starten met zowel Ctrl+F5 als ook F5.
Conclusie
Expression Blend 4 is een release die in de traditie van eerdere Blend releases de designer en de ontwikkelaar in staat stelt snel en effectief hun ideeen middels SketchFlow om te zetten in een bruikbare prototype, om deze vervolgens af te ronden in een Sliverlight of WPF applicatie.