Wpug mvvm and data binding

2,381 views

Published on

Presentation at @wpug covering lots of mvvm goodness across all of: iOS, Android, WP7 and WinRT - using the Microsoft and Xamarin tools - vs2010, vs2011, MonoTouch and MonoDroid - and using mvvmCross library for Mvvm and DataBinding

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,381
On SlideShare
0
From Embeds
0
Number of Embeds
546
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Wpug mvvm and data binding

  1. 1. @slodge Cross Platform MobileC#, Mvvm and DataBinding WP7 Android iPhone iPad Win 8
  2. 2. @slodge@slodge
  3. 3. @slodgehttp://bit.ly/mvvmcross
  4. 4. @slodge Coming up…• C# Cross Platform• An Mvvm Introduction• Some Code: TwitterSearch• Some Extras• Q&A
  5. 5. @slodgeMobile C#
  6. 6. @slodge Why C#?• You already have: – skills – tools – code• “low level” – compiles – testable – quick• Enables native look and feel on all platforms• Generics, Linq, Async and the future…
  7. 7. @slodge What you need – WP7:• A Windows 7 PC• Free Tools or better!• AppHub account $99• A phone sometimes helps…
  8. 8. @slodge What you need - Android:• Windows PC or a Mac• Free Tools• Play account $25• A phone really helps…• Mono 4 Android $400
  9. 9. @slodge What you need - iOS:• An Intel-based Mac• Account-Linked Tools• iOS Account $99• A phone often helps…• MonoTouch - $400
  10. 10. @slodgeGetting Started Links…
  11. 11. @slodgeMVVM
  12. 12. @slodge Mvvm Basics get/set Properties ViewModel call Commands ViewModel ModelView ViewModel Whatever C# you Model View like! Model View notify changes some messaging
  13. 13. @slodge MVVM Technical Details• Properties• INotifyPropertyChanged• INotifyCollectionChanged• Data Binding• IValueConverter• ICommand• UI Thread
  14. 14. @slodge Mvvm Benefits• The “normal” reasons: – Separation of concerns – Designability (Blendability) – Testability• The MvvmCross reason: – Cross platform code reuse
  15. 15. @slodge Mvvm Cross Platform get/set Properties ViewModel call Commands ViewModel Model View ViewModel Whatever C# you Model View like! Model View notify changes some messagingPlatform Specific Shared
  16. 16. @slodgeSome longer introductions…
  17. 17. @slodgeTwitterSearch
  18. 18. @slodge What we want to build…Home Page: Result Page:
  19. 19. @slodgeThe Model and Service
  20. 20. @slodgeHomeViewModel
  21. 21. @slodgeTwitterViewModel
  22. 22. @slodge Navigation• The HomeViewModel calls:• Which means the TwitterViewModel gets created with:
  23. 23. @slodgeTest it!
  24. 24. @slodgeSome Unit Tests
  25. 25. @slodge“Win32”
  26. 26. @slodgeA Console App
  27. 27. @slodgeWP7
  28. 28. @slodgeA WP7 App
  29. 29. @slodge Inside WP7 App…• No C#, just XAML with {Binding}• Binding syntax includes: {Binding Path, Converter=Converter, ConverterParameter=Parameter, Mode=Mode, FallbackValue=Fallback}
  30. 30. @slodge Inside WP7 App…• ViewModel is auto-wired via MvxPhonePage<TViewModel> inheritance
  31. 31. @slodge Inside WP7 App…• ValueConverters are used for presenting property values
  32. 32. @slodge Inside WP7 App…• Lists…
  33. 33. @slodge Inside WP7 App…• Navigation is mapped to XAML Uri’s – with parameters put in a JSON object in the path.• Implementation hidden from the View and ViewModel.
  34. 34. @slodgeAndroid
  35. 35. @slodgeAn Android App
  36. 36. @slodge Inside Android App…• No C#, just xml with MvxBind attributes• MvxBind syntax is JSON based on XAML structure.
  37. 37. @slodge Binding – Xaml versus MvxWP7: Text=‚{Binding SearchText,Mode=TwoWay}‛Android: local:MvxBind=‚{‘Text’: {‘Path’:’SearchText’,’Mode’:’TwoWay’}}‛
  38. 38. @slodge Binding – Xaml versus MvxWP7: Text=‚{Binding Timestamp,Converter={StaticResource TimeAgo}}‛Android: local:MvxBind=‚{‘Text’:{‘Path’:’Timestamp’,Converter’:’TimeAgo’} }‛
  39. 39. @slodge Inside Android App…• ValueConverters are used for presenting property values
  40. 40. @slodge Inside Android App• ViewModels are auto-wired using MvxBindingActivityView<TViewModel> inheritance
  41. 41. @slodge Inside Android App…• Lists…
  42. 42. @slodge Inside Android App…• Navigation is mapped to Intent’s– with parameters put in a JSON object in the Extras.• Implementation hidden from the View and ViewModel.
  43. 43. @slodgeiPhone
  44. 44. @slodgeiPhone App
  45. 45. @slodge Inside iPhone App• UI is drawn in XML using Xcode• XIB is linked to C# classes using MonoTouch• Binding is declared in C# using JSON
  46. 46. @slodge
  47. 47. @slodge Inside iPhone App• ViewModels are auto-wired using inheritance and a constructor parameter:
  48. 48. @slodge Inside iPhone App• ValueConverters are used for presenting property values
  49. 49. @slodge Inside iPhone App• Lists…
  50. 50. @slodge Inside iPhone App• Navigation is mapped to C# calls.• Implementation mostly hidden from the View and ViewModel
  51. 51. @slodge
  52. 52. @slodgeiPad
  53. 53. @slodgeiPad App
  54. 54. @slodge Inside iPad App• The iPad App is actually the iPhone App.• But the UI is different – take advantage of the larger screen.• Achieved in code: IMvxTouchViewPresenter
  55. 55. @slodge
  56. 56. @slodgeWindows 8 (WinRT/Metro)
  57. 57. @slodgeWindows 8 Metro App
  58. 58. @slodgeInside Windows 8 Metro App…
  59. 59. @slodgeInside Windows 8 Metro App…
  60. 60. @slodge Inside Windows 8 Metro App…It’s like WP7….• No C#, just XAML with {Binding}• ValueConverters are used in Bindings• Lists are filled using ItemsSource• BUT: Navigation is achieved through code – not Xaml Uri’s
  61. 61. @slodge Inside Windows 8 Metro AppWarnings:• MvvmCross WinRT implementation is “first cut” – e.g. differences in ViewModel lifecycle• Under-the-hood Win8 implementation is native code – there are big differences. – differences in XAML – differences in .Net/C#• Everything is async.
  62. 62. @slodge Inside Windows 8 Metro App…• Beyond the warnings – look at the numbers!
  63. 63. @slodgeRecap
  64. 64. @slodge TwitterSearch recap…• Shared C# Core – ViewModels – Models – Services – Converters – Tests• UIs are “mostly XML/JSON”
  65. 65. @slodgeSomeExtras
  66. 66. @slodge Panoramas, Pivots and Tabs• Tabbed navigation is another common metaphor across phones and across ipads too.• Generally speaking think of each “tab” as its own ViewModel.• Binding is then available in each platform.
  67. 67. @slodge“Tabs”
  68. 68. @slodge Jump Lists• Are possible…• But need separate list formats on each platform…• Thinking about how best to do this…• Open to ideas!
  69. 69. @slodge Dependency Injection• Useful for testing• Essential for injecting platform specific services – e.g: – Camera capture – GPS services – NFC• MvvmCross wraps OpenNetCF DI – adds some extension methods: – RegisterServiceInstance<TService>(instance) – RegisterServiceType<TService, TServiceType>() – GetService<TService>()
  70. 70. @slodge Native Types• Sometimes #define is necessary…• Personally, I try to use interfaces and DI wherever possible.
  71. 71. @slodge i18n• Choices: – Each platform has their own localisation format available. – Xamarin are supporting .resx files… – MvvmCross provides a .json file mechanism – Or write your own
  72. 72. @slodge Blendability• Limited support available right now.• It’s relatively easy to integrate your own design time ViewModelLocator with design time data…
  73. 73. @slodge Problems?• WinRT – issues…• Xcode designer - OMG• iOS development and debugging is most painful• Some compiler differences – JIT• Multiple “core” project files annoying – and breaks refactoring• MvvmCross still changing
  74. 74. @slodge That’sall folks
  75. 75. @slodge That’s all folks…Hopefully we covered:• C# Cross Platform• An Mvvm Introduction• Some Code: TwitterSearch• Some ExtrasThere might be time for:• Q&A
  76. 76. @slodge@slodge
  77. 77. @slodgehttp://bit.ly/mvvmcross
  78. 78. @slodgeAlternatives: http://bit.ly/rrnLDT

×