Person Vehicle Calendar People Vehicles Tax Orders Shipping Schedules Presentation logic Not...
-
Upload
jaylen-halliwill -
Category
Documents
-
view
214 -
download
0
Transcript of Person Vehicle Calendar People Vehicles Tax Orders Shipping Schedules Presentation logic Not...
Building In Browser Experiences with Silverlight 5Steve Lasker
Lead Program ManagerMicrosoft Corporation
Services Models
Person VehicleCalenda
rPeople Vehicles Tax
Orders ShippingSchedul
es
Layers Of Our Applications
UI (XAML)
Code Behind (XAML.cs/vb)
Data
Presentation logic
Not reusable
EF POCO XML
WCF
SQL Server
OracleTelco
Switches
Web Service
s
Media Streams
Web Service
s
UI (XAML)
OrdersCode Behind
(XAML.cs/vb)
UI (XAML)
PeopleCode Behind
(XAML.cs/vb)
How to test?How to reuse?How can the designer update the UIHow to provide different views
Laptop/DesktopTablet/Slate w/TouchPhone
REST JSON RIA
Appointments
Laptop/DesktopAppointmentsCode Behind
(XAML.cs/vb)
Services Models
Person VehicleCalenda
rPeople Vehicles Tax
Orders ShippingSchedul
es
MVVM
Class Libraries
Data
EF POCO XML
WCF
SQL Server
OracleTelco
Switches
Web Service
s
Media Streams
Web Service
s
REST JSON RIA
Test API w/VSTTLeverage logic across UIsDesigner parties on XAMLSkin across varied form factors
Laptop/DesktopTablet/Slate w/TouchPhone
Aggregation of data & services for your presentation logic
Tablet/SlateAppointmentsCode Behind
(XAML.cs/vb)
PhoneAppointmentsCode Behind
(XAML.cs/vb)
Test Framework
Visual Studio
Team Test
ViewModel (VM.cs/vb
MVVM Enhancements
Reduce the need for UI codeHow to reduce code?Enhance DataBinding
Silverlight 5 Binding In Style SettersImplicitDataTemplatesRelativeSource Ancestor BindingsCustom Markup ExtensionsDatabinding DebuggingDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
MVVM Enhancements
Binding In Style SettersImplicitDataTemplatesRelativeSource Ancestor BindingsCustom Markup ExtensionsDatabinding DebuggingDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
Binding Style Setters
How do I change styles without shipping new XAML?Can I set the styles in the database?
demo
Binding Style Setters How It Works
Create a Class to expose your values
Instance the Class in your Resources
Bind the value to the instanced resource<Style TargetType="TextBlock"> <Setter Property="Foreground"
Source={StaticResource MyAppStyles},
Value="{Binding ForegroundColor}"
namespace MyProject.Styles { public class MyAppStyles : INotifyPropertyChanged { public Brush ForegroundColor {
get { return _foregroundColor; }
set { _foregroundColor = value; NotifyPropertyChanged("ForegroundColor");
<ResourceDictionary xmlns:stylesNS="clr-namespace:MyProject.Styles">
<stylesNS:MyAppStyles x:Key=“MyAppStyles"/>
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
Implicit Data Templates<ListBox ItemsSource="{Binding States}“ ItemTemplate="{StaticResource StatesDataTemplate}“/>
Template Based On TypeHeterogeneous Collections
With Inheritance Hierarchy
demo
<Application.Resources><ResourceDictionary>
<DataTemplate x:Key=“StatesDataTemplate"><Grid>
<StackPanel Orientation="Horizontal"><TextBlock Text="{Binding StateCode}"/><TextBlock Text="{Binding StateName}"/>
</StackPanel></Grid>
</DataTemplate></ResourceDictionary>
</Application.Resources>
<ListBox ItemsSource="{Binding Vehicles}“ ItemTemplate="{StaticResource VehicleDataTemplate}"/> <Application.Resources> <ResourceDictionary> <DataTemplatex:Key="vehiclesDataTemplate">
DataType="models:Vehicle"> <Image Source="Vehicle.png"/> </DataTemplate> </ResourceDictionary></Application.Resources>
<ListBox ItemsSource="{Binding States}“ ItemTemplate="{StaticResource StatesDataTemplate}"/> <Application.Resources>
<ResourceDictionary><DataTemplate x:Key="stateDataTemplate">
DataType=“models:State"><Grid>
<StackPanel Orientation="Horizontal"><TextBlock Text="{Binding StateCode}"/><TextBlock Text="{Binding StateName}"/>
</StackPanel></Grid>
</DataTemplate></ResourceDictionary>
</Application.Resources>
<Application.Resources><ResourceDictionary>
<!--Default Vehicle DataTemplate--><DataTemplate DataType="models:Vehicle">
<Image Source="Vehicle.png"/></DataTemplate>
<DataTemplate DataType="models:Car"><Image Source="Car.png"/>
</DataTemplate>
<DataTemplate DataType="models:Truck"><Image Source="Truck.png"/>
</DataTemplate>
<DataTemplate DataType="models:Motorcycle"><Image Source="Motorcycle.png"/>
</DataTemplate></ResourceDictionary>
</Application.Resources>
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
Relative Source Ancestor BindingHow do I bind to data up the visual tree?
<ListBox ItemsSource="{Binding Path=Appointments}"> <ListBox.ItemTemplate><DataTemplate><Grid ...
<TextBlock Text="{Binding Time}" …
<ComboBox ItemsSource="{Binding DataContext.Status, RelativeSource={RelativeSource FindAncestor AncestorType=UserControl,
Mode=FindAncestor}}"
namespace SLInsurance.ViewModels { public class AppointmentsViewModel { public ObservableCollection<Appointments> Appointments{ get; set; }
public ObservableCollection<Status> Status{get; set; }
namespace SLInsurance.Views { public partial class AppointmentView : UserControl {...
this.DataContext = new ViewModels.AppointmentViewModel();
Relative Source Ancestor Binding
Used For Control Hierarchy Binding As Well
<DataTemplate x:Key="StateComboBoxDataTemplate"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding StateCode}" Margin="0,0,5,0"/> <TextBlock Text="{Binding StateName}" Visibility="{Binding IsDropDownOpen, RelativeSource={RelativeSource FindAncestor
AncestorType=ComboBox}, Converter={StaticResource BoolToVisibilityConverter} }"/></StackPanel>
demo
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
DataBinding Debugging
Bound Instance & Type
Values of the Final Source
Pipeline• Initial• AfterValue• AfterStringFormat• AfterTypeConversion• …
XAML BreakpointsBreak when objects are bound,
such as Grid Cycling
Locals:Dig into what’s working, what’s
notFull Debugging Support
((System.Windows.Data.Debugging.BindingDebugState)BindingState).Error != null
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
public partial class Appointments : UserControl {
private void OnAppointmentsListbox_SelectionChanged(object sender, SelectionChangedEventArgs e){this.DataService.GetClaimById(GetClaimsCallback,
((AdjusterAppointment) (this.appointmentsListbox.SelectedItem)).Claim_Id); }
private void GetClaimsCallback(ObservableCollection<Claim> claims) {this.AppoinmentsListBox.Items.Add(claims[0]);
<ListBox x:Name="appointmentsListbox"ItemsSource="{Binding Appointments}"
SelectionChanged="OnAppointmentsListbox_SelectionChanged">UI (XAML)
Code Behind (XAML.cs/vb)
ViewModel (VM.cs/vb
Services Models
Custom Markup Extensions
How do I get my event handler code out of my Code Behind
demo
Data
public void GetClaimById(Action<ObservableCollection<Claim>> callback, string claim_Id) {var query = DataContext.GetClaimByIdQuery(claim_Id);_getClaimCallback = callback;_claimLoadOperation = DataContext.Load<Claim>(query);…
Custom Markup ExtensionHow It Works
public class MethodInvokeExtension : IMarkupExtension<object> {// Properties Exposed in XAML as Intellisense Lovepublic String Method { get; set; }
// Invoked by the XAML Parser @ runtimepublic object ProvideValue(IServiceProvider serviceProvider) {
<UserControl x:Class=“AppointmentsView" xmlns:MyUtils="clr-namespace:SLInsurance;assembly=SLInsurance">
...<StackPanel x:Name="LayoutRoot">
<ComboBox Name=“appointmentsListBox" SelectionChanged="{MyUtils:MethodInvoke Method=OnAppointmentChanged}"
public partial class AppointmentsViewModel {
private void OnAppointmentChanged( ) { this.DataService.GetClaimById(GetClaimsCallback, this.SelectedAppointment.Claim_Id);} private void GetClaimsCallback(ObservableCollection<Claim> claims) {
this.SelectedClaim = claims[0];
public void GetClaimById(Action<ObservableCollection<Claim>> callback, string claim_Id) {var query = DataContext.GetClaimByIdQuery(claim_Id);_getClaimCallback = callback;_claimLoadOperation = DataContext.Load<Claim>(query);…
UI (XAML)
Code Behind (XAML.cs/vb)
ViewModel (VM.cs/vb
Services Models
Custom Markup Extensions
How do I get my event handler code out of my Code Behind
Data
<ListBox x:Name="appointmentsListbox"ItemsSource="{Binding Appointments}"
SelectionChanged="{helpers:MethodInvoke Method=OnAppointmentChanged}”>
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
DataContextChanged Event
It just worksIncrease Memory Efficiency “handle references”
this.DataContextChanged += View_DataContextChanged;…void View_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e) { INotifyPropertyChanged customer; customer = e.OldValue as INotifyPropertyChanged; if (customer != null) customer.PropertyChanged -= customer_PropertyChanged;
customer = e.NewValue as INotifyPropertyChanged; if (customer != null) customer.PropertyChanged += customer_PropertyChanged;}
Coming Soonpost beta
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
UpdateSourceTriggerHow can I get key stroke changes?
private void vinTextBox_TextChanged(object sender, TextChangedEventArgs e) { Helpers.VinCarInfo carInfo = Helpers.VINParser.Parse(vinTextBox.Text); this.vehicleYearsAutoComplete.Text = carInfo.Year.Value.ToString(); this.vehicleMakeAutoComplete.Text = carInfo.Make; this.vehicleModelComboBox.SelectedValue = carInfo.Model;
<TextBox Name="vinTextBox"Text="{Binding SelectedClaim.InsuredVIN, Mode=TwoWay}"
TextChanged="vinTextBox_TextChanged" UI (XAML)
Code Behind (XAML.cs/vb)
ViewModel (VM.cs/vb
Services Models
Data
public void GetVehicleMakes(Action<ObservableCollection<string>> callback, int year) { _getVehicleMakesCallback = callback; this.SearchServiceClient.GetVehicleMakesCompleted += OnGetVehicleMakesCompleted; this.SearchServiceClient.GetVehicleMakesAsync(year); }
Coming Soonpost beta
public void LoadVehicleYears() {this.DataService.GetVehicleYears(GetVehicleYearsCallback);
}public void LoadVehicleMakes(Nullable<int> year) {
if (year.HasValue) {this.DataService.GetVehicleMakes(GetVehicleMakessCallback, year.Value);
…
public void LoadVehicleModels(Nullable<int> year, string make) {if (year.HasValue) {
this.DataService.GetVehicleModels(GetVehicleModelssCallback, year.Value, make);
UpdateSourceTrigger
Silverlight 5 Adds PropertyChangedMoving code to your testable ViewModel
demo
Coming Soonpost beta
UpdateSourceTrigger
Moving code from the UI to the testable ViewModel
<TextBox Name="vinTextBox"Text="{Binding SelectedClaim.InsuredVIN, Mode=TwoWay}"UpdateSourceTrigger=PropertyChanged}"
UI (XAML)
Code Behind (XAML.cs/vb)
ViewModel (VM.cs/vb
Services Models
Data
public void GetVehicleMakes(Action<ObservableCollection<string>> callback, int year) { _getVehicleMakesCallback = callback; this.SearchServiceClient.GetVehicleMakesCompleted += OnGetVehicleMakesCompleted; this.SearchServiceClient.GetVehicleMakesAsync(year);
Coming Soonpost beta
void OnClaimPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) {switch (e.PropertyName) {
case "InsuredVIN":ParseVIN();break;
…
private void ParseVIN() {Helpers.VinCarInfo carInfo = Helpers.VINParser.Parse(this.SelectedClaim.InsuredVIN);
this.SelectedClaim.InsuredYear = carInfo.Year;this.SelectedClaim.InsuredMake = carInfo.Make;this.SelectedClaim.InsuredModel = carInfo.Model;
…
MVVM Enhancements
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
WCF RIA Services for Silverlight 5
Complex Types (SP1)
Custom ClientCode
Gen(SP1)
DateTimeOffset
MVVM Support
EF Code First
(coming soon)
But Wait, There’s More
TextPrintingMedia
Binding In Style SettersImplicit DataTemplatesRelativeSource Ancestor BindingsDatabinding DebuggingCustom Markup ExtensionsDataContextChanged EventUpdateSourceTriggerWCF RIA Services EnhancementsText, Printing & Media
Text Enhancements
Linked Text ContainersFlow Rich Text from one container to anotherDynamically flows on resize
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus enim dolor, molestie at auctor id, auctor ultrices nisi. Curabitur urna lorem, luctus hendrerit dapibus quis, facilisis sed orci. Aliquam nunc massa, placerat id pretium eget, luctus sit amet diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque fermentum neque at nisl bibendum cursus. Aliquam sollicitudin elit eu nunc placerat et pulvinar mauris condimentum. Donec sed sapien elit, vel condimentum justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ut odio nunc. Maecenas vitae quam urna. Nulla a ante imperdiet sem tincidunt porta. Donec est tellus, imperdiet eget ullamcorper eu, laoreet vel lorem. Fusce ornare nislmollis lacus cursus semper suscipit urna ultricies. Phasellus magna justo, commodo sodales auctor nec, euismod vitae purus.
Vivamus dignissim feugiat tristique. Cras aliquet sapien non justo sagittis imperdiet. In a velit mauris, eu sodales magna. Fusce lectus lectus, blandit non semper vitae, cursus ut purus. Vestibulum quis aliquam augue. Morbi id est sed diam imperdiet pretium vitae a turpis. Sed vel sapien arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac diam ut ante imperdiet lacinia. Integer sit amet justo sit amet tortorfacilisis id sit amet augue. Etiam in risus vel erat molestie viverra. Suspendisse pellentesque bibendum sagittis. Etiam convallis leo at dui ornare eget elementum odio dictum. Integer tempus ultricies lectus. Maecenas dictum ipsum id nisl adipiscing eu iaculis tortor suscipit. Etiam sed sapien neque, in ultricies magna. Aliquam in nisl et lectus bibendum vestibulum. Donec suscipit, velit vitae convallis accumsan, tortor magna dignissim purus, sed convallis orci tortor sed sem. Cras quis est id turpis congue porta. Proin pharetra mattis nulla quis vestibulum.
Ut in sapien id mauris egestas rhoncus a eget erat. Vivamus tempor tempus quam facilisis dapibus. Curabitur volutpat ipsum vitae tortor tincidunt sed malesuada urna tincidunt. Quisque porttitor, neque id malesuada faucibus, quam leo auctor nisl, quis aliquet enim ligula ut odio. Etiam vel turpis magna. Cras iaculis est sem. Pellentesque malesuada, libero eu tempor tempor, tellus ipsum dignissim sapien, id facilisis augue ipsum vitae quam. Cras quis imperdiet leo. In orci purus, placerat ac ultricies in, elementum vitae turpis. Nunc lectus sapien, sagittis id luctus ut, hendrerit ut massa. Sed purus sapien, pharetra id faucibus nec, semper id lacus. Phasellus et lectus leo, eget
adipiscing lorem. Donec fermentum lacus dolor. Etiam laoreet tristique nisi, sit amet convallis nunc lacinia et. Integer aliquam, magna ac porttitor congue, est libero consectetur lacus, lobortis porta orci risus nec magna. Integer sapien purus, volutpat sit amet vehicula vitae, accumsan a felis. Sed a nulla vel enim laoreet consequat. Nulla ut neque massa, at semper enim.risus nec magna. Integer sapien purus, volutpat sit amet vehicula vitae, accumsan a felis. Sed a nulla vel enim laoreet consequat. Nulla ut neque massa, at semper enim.
<RichTextBox OverflowContentTarget="{Binding ElementName=overflow1}"><RichTextBoxOverflow x:Name="overflow1" OverflowContentTarget="{Binding ElementName=overflow2}"><RichTextBoxOverflow x:Name="overflow2" OverflowContentTarget="{Binding ElementName=overflow3}">...demo
Vector
Bitmap
Shapes
Text
0 100 200 300 400 500 600 700 800
Spool Time
BitmapVector
(milliseconds)
Vector Printing
Shapes
Text
0 20 40 60 80 100 120 140
File Size Sent to Printer
BitmapVector
(MB)
Coming Soonpost beta
Trick PlayWhere did they joke about…
Speed through videos, search for soundsNew dimension to searchNo “Alvin & The Chipmunks”
demo
Coming Soonpost beta
Silverlight 5 Summary
Adding productivity & robustness withDatabinding Enhancements & Debugging
Better Text & Printing Enabling Next Gen Media Players
Silverlight 5 ships second half 2011
Binding In Style SettersImplicitDataTemplatesRelativeSource Ancestor BindingsCustom Markup ExtensionsDatabinding DebuggingBinding to Custom ObjectsDataContextChanged Event*UpdateSourceTrigger*WCF RIA Services EnhancementsText, Printing* & Media*
*coming post beta
Additional Sessions
WednesdayGraphics & 3D with Silverlight 53:30 PM w/Aaron Oneal Tips for Improving Performance in Silverlight Applications5:00 PM w/Mike Cook
ThursdayAdvanced Features in Silverlight 53:00pm w/Nick Kramer
Questions?
Please provide us feedback on the beta!
http://forums.silverlight.net/[email protected]://Blogs.MSDN.com/SteveLasker
Resources
WCF RIA Services Page: http://silverlight.net/riaservicesSilverlight.net
© 2011 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.