Imagine Camp Algeria 2014 Build for both session2 mvvm
Upcoming SlideShare
Loading in...5
×
 

Imagine Camp Algeria 2014 Build for both session2 mvvm

on

  • 213 views

 

Statistics

Views

Total Views
213
Views on SlideShare
213
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Commands – express the function that gets called when an event happens in a view
  • INotifyPropertyChanged – just says that it has event structure to normalize the change event when a property is changed
  • Commands – express the function that gets called when an event happens in a view
  • Without data binding, you may end up with overly-large and hard-to-maintain code behind files for your views.The XAML data binding engine performs the work of observing for changes and then synchronizing data between the source and the target.
  • The binding engine, a part of Windows Runtime, is hidden from the developer. The binding object supplies the engine with information about the binding so that it can perform its duties. The engine observes changes in the binding source and target and updates data appropriately. The developer can provide an optional value converter that converts data between the source format and target format (the two boxes in the diagram are the same converter).Note that the binding engine updates data depending on the binding mode – one time, one way, or two way.A data class that is suitable for being a binding source is known as a View Model.
  • The binding statement does not say exactly which data object (binding source) is used to supply the value. It just states that if this element is bound to a data object with a property called Directions, the Text property will be synchronized with that property. The default binding mode is one-way, meaning that changes to the data model will change the view, but not vice versa. This can be done by setting the binding Mode to two-way.You define the actual object to use for data binding by setting the DataContext property. You can set DataContext on an individual element, or on a containing element, in which case it is inherited by all the contained controls. You can simply set DataContext on a Grid or on the whole Page. Note that this is usually done from code when the page is navigated to.
  • The XAML code example shows a TextBlock with the Visibility property bound to IsVisibleBool (presumably defined in the DataContext object). Because the source and target types do not match, a class named BoolToVisibilityConverter is provided as a converter. That class should implement the IValueConverter interface and convert objects between bool and System.Windows.Visibility.We will see an example of a converter in the demo.
  • If you only bind with the OneTimeMode, the source object does not need to implement INotifyPropertyChanged. The WP8 Runtime just queries the property once and does not need to track it afterwards. Do not needlessly use two-way binding when one-way or even one-time binding would work
  • We will see examples of advanced property paths and the StringFormat property in the demo.Extra info aboutStringFormat:The formatting is applied after any convertersEscape special characters with a ‘\’
  • XAML is one end of data binding, and the View Model is the other end. It essentially “presents” your app data to the view.A substantial part of your code should be in the View Model(s).
  • In Windows 8,the [CallerMemberName] attribute is a new feature that lets you obtain the name of the method or property calling a method. It is used above to get the string name of the property being set (“Name” in this case), and can help avoid cluttering your code with constant strings to identify properties.
  • The INotifyPropertyChanged interface lets an object participate as a source in a one-way or two-way data binding.The interface exposes a single event, PropertyChanged. Classes that implement this interface should fire the PropertyChanged event whenever a public setter is called. The name of the property is passed in the PropertyChangedEventArgs.
  • The INotifyPropertyChanged interface lets an object participate as a source in a one-way or two-way data binding.The interface exposes a single event, PropertyChanged. Classes that implement this interface should fire the PropertyChanged event whenever a public setter is called. The name of the property is passed in the PropertyChangedEventArgs.
  • INotifyPropertyChanged – just says that it has event structure to normalize the change event when a property is changed
  • Commands can involve a lot of boilerplate code, but a library can be helpful with this.
  • This is a very barebones implementation to get a command working, but it demonstrates the basic idea. The Command property of the Button is bound to a class that implements the ICommand interface.
  • Commands can involve a lot of boilerplate code, but a library can be helpful with this.
  • Commands can involve a lot of boilerplate code, but a library can be helpful with this.

Imagine Camp Algeria 2014 Build for both session2 mvvm Imagine Camp Algeria 2014 Build for both session2 mvvm Presentation Transcript

  • Model View (XAML) ViewModel Design/Development Separation Code Reuse Multiple Views On the Same Logic View-Logic Testability
  • Model View (XAML) ViewModel Model ViewModel View
  • ViewModel - C# View - XAML View (XAML) ViewModel DataBinding View slide
  • Binding engine gets info from the Binding object: Binding Target (Property) Binding Source (DependecyProperty / INotifyPropertyChanged) Binding Object Data Updates (one-way) Data Updates (two-way) Data Updates (one-way) Data Updates (two-way) View slide
  • A DependencyProperty is a special type of property <TextBlock x:Name="DescriptionTextBlock" Margin="12,0,0,0" Text="{Binding Description} " /> Dependency Property Binding Markup ExtensionDependency Object
  • Converters - bind a target and a source that are different types <TextBlock x:Name="MyTextBlock" Visibility="{Binding IsVisibleBool, Converter={StaticResource BoolToVisibilityConverter}}" />
  • <Image Source="{Binding VisualElement.BackgroundImage, Mode=OneTime}" /> OneTime OneWay TwoWay
  • More advanced property paths Use the StringFormat property to format text <Image Source="{Binding VisualElement.BackgroundImage, Mode=OneTime}" /> <TextBlock Text="{Binding Coupon.ExpirationDate, StringFormat=‘Expiration Date: {0:d}’}‚ />
  • ViewModel acts as a binding source Loosely coupled to a View
  • public class ItemView Model : INotifyPropertyChanged { private string _name; public string Name { get { return _name; } set { if (value != _name) { _name = value; NotifyPropertyChanged("Name"); } } } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (null != handler) { handler(this, new PropertyChangedEventArgs(propertyName)); } } }
  • OneWay or TwoWay binding must implement the INotifyPropertyChanged interface
  • Two ways to bind collections of data:
  • ViewModel - C# ICommand DelegateCommand RelayCommand View XAML Command=“{Binding MyCommand}” View (XAML) ViewModel Commands
  • Expose a method like a property Attach commands to buttons and menu items View notifies the code that some action has occurred Implement the ICommand interface
  • <Button Content="Say Hello" Command="{Binding HelloWorldCommand}"></Button> class HelloWorldCommand : ICommand { public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter) { return true; } public void Execute(object parameter) { MessageBox.Show("Hello world!"); } } class MyView Model { private HelloWorldCommand myCommand = new HelloWorldCommand(); public HelloWorldCommand HelloWorldCommand { get { return myCommand; } } } protected override void OnNavigatedTo(NavigationEventArgs e) { DataContext = _myView Model; }
  • Reusable ICommand class See Implementation At http://aka.ms/B4BDelegate
  • public MyViewModel() { loadSomeDataCommand = new DelegateCommand(LoadDataAction); } private void LoadDataAction(object p) { // Load the data into the ObserverableCollection here } // Command Property private ICommand loadSomeDataCommand; public ICommand LoadDataCommand { get { return this.loadSomeDataCommand; } }
  • Portable Class Libraries Windows 8 Windows Phone 8 Services ViewModels (limited/abstract) Models Commands Interfaces Views (XAML) App Lifecycle Navigation Views (XAML) Converters Shared ViewModels (Add as Link) Storage, Alerts View (XAML) ViewModel Model