2

Silverlight 2 for Developers

Jonas FollesøSenior ConsultantCapgemini

Session Code: WEB304

3

4

Agenda

Blend 2.5CRUDDesignersPatternsTestingQ&A

5

Dive Log App

6

Outside data

PublicPublicInternetInternetmashup APIsmashup APIs

ExistingExistingIntranetIntranetservicesservices

New servicesNew servicesyou buildyou build

RSS/AtomRSS/AtomFeedsFeeds

ImagesImagesSoundsSoundsVideosVideos

7

A bit of history: Silverlight 1

PublicPublicInternetInternetmashup APIsmashup APIs

ExistingExistingIntranetIntranetservicesservices

New servicesNew servicesyou buildyou build

RSS/AtomRSS/AtomFeedsFeeds

ImagesImagesSoundsSoundsVideosVideos

JavaScript

HTML

?AJAX (XmlHttpRequest)

1.0<XAML/>

8

Today: Silverlight 2

2

Managed Code (C#/VB)

PublicPublicIntInteernetrnetmashup APIsmashup APIs

ExistingExistingIntrIntraanetnetservicesservices

New servicesNew servicesyou buildyou build

RSS/AtomRSS/AtomFeedsFeeds

ImagesImagesSoundsSoundsVideosVideos

HTML

9

Services that describe themselves

SOAPSOAPservices in the services in the enterpriseenterprise

Services for Services for your Silverlightyour Silverlightprojectproject

ADO.NET ADO.NET Data ServicesData Services

SOAP SOAP servicesserviceson the Interneton the Internet

Computer-ReadableMetadata

(e.g. WSDL)

AutomaticProxy

Generation

WCF

10

Securing Silverlight ServicesSilverlight will use auth. info in the browser

HTML

E.g.: ASP.NET Login

User:Password:

DiveLog.comDiveLog.com…/Login.aspx…/Login.aspx../MyApp.aspx../MyApp.aspx../MyService.svc../MyService.svc

Credentials

Auth info (e.g. cookie)

Service calls + Auth info

Silverlight code does not normallydeal with credentials…

11

HTTP Requests in Silverlight

HttpWebRequestHttpWebRequest

High-level components and User CodeHigh-level components and User Code

Browser Plugin APIsBrowser Plugin APIs

Web Browser- Cookies- Authenticated sessions- Caching- Proxy server to use

Web Browser- Cookies- Authenticated sessions- Caching- Proxy server to use

Windows/MacNetworking LayerWindows/MacNetworking Layer

Restrictions

Restrictions

12

Blend – The dark is not that scary…

13

Dive Log UI and Data

14

Everything in code behind…is probably not a good idea

15

A team of sad coders and designers

17

Different people reading about MVC in different places take different ideas from it and describe these as “MVC”.

Martin Fowler, GUI Architectures Essay

18Separated Presentation Patterns

19

Data & Domain Data & Domain LogicLogic(Model)(Model)

UIUI(View)(View)

Interaction Interaction (Controller/Presenter)(Controller/Presenter)

20

Represent the state and behavior of the presentation independently of the GUI controls used in the interface.

Martin Fowler, Presentation Model Essay

21

Makes your app easier to design…makes the designers like you

22

Everything in code-behind

Data ModelData Model

ViewView

XAMLXAML

Code-BehindCode-BehindEvent HandlersEvent Handlers

23

Presentation Model

Data ModelData Model

ViewView

XAMLXAML

Code-BehindCode-Behind

Presentation ModelPresentation Model

State + State + OperationsOperations

Change notification

Data-binding and commands

24

Dive Log Presentation Model

Dive Log ServiceDive Log Service

Dive LogDive Log

XAMLXAML

Code-BehindCode-Behind

Dive Log View Dive Log View ModelModelState + State +

OperationsOperations

Change notification

Data-binding and commands

25

Data BindingImplement INotifyPropertyChanged and use ObservableCollection<T> for collections

ViewView <ListBox ItemsSource="{Binding Path=Dives}" SelectedItem="{Binding Path=SelectedDive, Mode=TwoWay}" />

Presentation ModelPresentation Model

State + OperationsState + Operations

26

Data BindingImplement INotifyPropertyChanged and use ObservableCollection<T> for collections

ViewView

XAML

Code-BehindCode-Behind

Presentation ModelPresentation Modelpublic class PageViewModel : INotifyPropertyChanged{ public event PropertyChangedEventHandler PropertyChanged; public ObservableCollection<Dive> Dives { ... } public Dive SelectedDive { ... }}

27

IValueConverter

Converts data bound valuesE.g. Bind temperature to color

public object Convert(object, value, Type targetType, object parameter, CultureInfo culture){ int temp = System.Convert.ToInt32(value); Color color = Colors.Black; if(temp < 5) color = Colors.Blue; else if(temp < 20) color = Colors.Yellow; else color = Colors.Red;

return new SolidColorBrush(color);}

ViewView<UserControl.Resources> <demo:ColorConverter x:Key="colorConverter" /></UserControl.Resources>

<TextBox Text="{Binding Temperature, Mode=TwoWay}" Background="{Binding Temperature, Converter={StaticResource colorConverter}}"/>

28

Building a Presentation Model

29

User Interaction

But what about Word?

ViewViewprivate void btnSave_Clicked(object sender, ExecutedEventArgs e){ ((PageViewModel)DataContext).Save();}

30

Objects are used to represent actions. A command object encapsulates an action and its parameters.

This allows a decoupling of the invoker of the command and the handlers of the command.

31

Commands in SilverlightViewView

<Button Content="Save Dives" input:CommandService.Command="SaveDives" />

Presentation ModelPresentation Modelpublic PageViewModel(){ Commands.SaveDives.Executed += new EventHandler<ExecutedEventArgs>(SaveDives);}

private void SaveDives(object sender, ExecutedEventArgs e){ // code to save dives..}

32

The strategy pattern is a software design pattern, whereby algorithms can be selected at runtime.

Presentation ModelPresentation Modelpublic PageViewModel(){ if(HtmlPage.IsEnabled) { client = new DiveLogServiceClient(); } else { client = new ServiceStub(); }}

33

34

35

Dealing with dependencies

The Presentation Model is coupled with both the stub service and the real service.

Makes code less flexible for changeMakes code harder to test

Object should not be responsible for creating their own dependencies – Inversion of Control

36

Dependency Injection (DI)

One form of Inversion of Control (IoC) Create dependencies outside the object and, inject them into it

But who creates the dependency?

Presentation ModelPresentation Modelpublic PageViewModel(IDiveLogServiceClient proxy){ this.proxy = proxy}

37

Dependency Injection by hand

Should the page be responsible for creating dependencies?

ViewViewpublic Page(){ InitializeComponent(); if (HtmlPage.IsEnabled) this.DataContext = new PageViewModel(new DiveLogServiceClient()); else this.DataContext = new PageViewModel(new ServiceStub());}

38

IoC Containers

Presentation ModelPresentation Model[Inject]public PageViewModel(IDiveLogServiceClient proxy){ this.proxy = proxy}

ViewViewpublic Page(){ InitializeComponent(); IKernel iocContainer = new StandardKernel(); this.DataContext = iocContainer.Get<PageViewModel>();}

39

IoC ContainersWhat about design time support in Blend?

ViewView<UserControl.DataContext> <dive:PageViewModel /></UserControl.DataContext>

Need to find a way to use IoC and set DataContext declaratively…

40

Using DI on the ViewModel

41

Testing is important!

42

Testing Silverlight Code

The standard solutions do not applyThe Silverlight CLR is a subsetAll networking is asynchronous

But it’s still familiar…[TestClass], [TestMethod], [Asynchronous]

43

Asynchronous TestsHow do we “wait” before doing assertions?

44

Unit Testing in Silverlight

45

46

Resources

www.microsoft.com/teched Tech·Talks Tech·Ed BloggersLive Simulcasts Virtual Labs

http://microsoft.com/technet

Evaluation licenses, pre-released products, and MORE!

http://microsoft.com/msdn

Developer’s Kit, Licenses, and MORE!

Related Content

Code and lots of good resources on http://jonas.follesoe.noCode and lots of good resources on http://jonas.follesoe.no

WEB311 Designing Compelling Silverlight User Experiences with Expression Studio 2WEB311 Designing Compelling Silverlight User Experiences with Expression Studio 2Wednesday, 3-9-2008 14:20 - 15:35, NZ Room 4, SkyCityWednesday, 3-9-2008 14:20 - 15:35, NZ Room 4, SkyCity

Hands-on Labs (session codes and titles)Hands-on Labs (session codes and titles)

Track ResourcesWEB311 Designing Compelling Silverlight User Experiences with Expression Studio 2WEB311 Designing Compelling Silverlight User Experiences with Expression Studio 2Wednesday, 3-9-2008 14:20 - 15:35, NZ Room 4, SkyCityWednesday, 3-9-2008 14:20 - 15:35, NZ Room 4, SkyCity

49

Please Please complete ancomplete anevaluationevaluation

50

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS,

IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

51

Photo Copyright Notices

All diving photos taken by Hege Røkenes and licensed under the creative commons license. http://flickr.com/photos/hegerokenes/

Photos of Martin Fowler taken by Dave Thomas and licensed under the creative commons license.http://flickr.com/photos/pragdave/