Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding

10,591 views

Published on

Talk at DevEvening about MonoTouch, MonoDroid, WP7 and WinRT development - especally using mvvmcross

Published in: Technology
  • Be the first to comment

Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding

  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 “core” code
  20. 20. @slodgeThe Model and Service
  21. 21. @slodgeHomeViewModel
  22. 22. @slodgeTwitterViewModel
  23. 23. @slodge Navigation• The HomeViewModel calls:• Which means the TwitterViewModel gets created with:
  24. 24. @slodgeThe clients
  25. 25. @slodgeSome Unit Tests
  26. 26. @slodgeA Console App
  27. 27. @slodgeA WP7 App
  28. 28. @slodgeAn Android App
  29. 29. @slodgeiPhone App
  30. 30. @slodgeiPad App
  31. 31. @slodgeWindows 8 Metro App
  32. 32. @slodgeInside…
  33. 33. @slodge Inside WP7 App…• No C#, just XAML with {Binding}• Binding syntax includes: {Binding Path, Converter=Converter, ConverterParameter=Parameter, Mode=Mode, FallbackValue=Fallback}
  34. 34. @slodge Inside Android App…• No C#, just xml with MvxBind attributes• MvxBind syntax is JSON based on XAML structure.
  35. 35. @slodge Binding – Xaml versus MvxWP7: Text=‚{Binding SearchText,Mode=TwoWay}‛Android: local:MvxBind=‚{‘Text’: {‘Path’:’SearchText’,’Mode’:’TwoWay’}}‛
  36. 36. @slodge Binding – Xaml versus MvxWP7: Text=‚{Binding Timestamp,Converter={StaticResource TimeAgo}}‛Android: local:MvxBind=‚{‘Text’:{‘Path’:’Timestamp’,Converter’:’TimeAgo’} }‛
  37. 37. @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
  38. 38. @slodge
  39. 39. @slodge Inside iPad App• The iPad App is actually the iPhone App – “Universal”• But the UI is different – take advantage of the larger screen.• Achieved in code: IMvxTouchViewPresenter
  40. 40. @slodgeInside Windows 8 Metro App…
  41. 41. @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
  42. 42. @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.
  43. 43. @slodge Inside Windows 8 Metro App…• Beyond the warnings – look at the numbers!
  44. 44. @slodgeRecap
  45. 45. @slodge TwitterSearch recap…• Shared C# Core – ViewModels – Models – Services – Converters – Tests• UIs are “mostly XML/JSON”
  46. 46. @slodgeSomeExtras
  47. 47. @slodge
  48. 48. @slodge Panoramas, Pivots and Tabs• Tabbed navigation is another common metaphor across phones and across ipads too.• Generally speaking think of each “tab” as a sub- ViewModel.
  49. 49. @slodge Jump Lists• Use grouped list on each viewmodel…• Each platform then works out its own format
  50. 50. @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>()
  51. 51. @slodge Native Types• Sometimes #define is necessary…• Personally, I try to use interfaces and DI wherever possible.
  52. 52. @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
  53. 53. @slodge Blendability• Limited support available right now.• It’s relatively easy to integrate your own design time ViewModelLocator with design time data…
  54. 54. @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
  55. 55. @slodge That’sall folks
  56. 56. @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
  57. 57. @slodge@slodge
  58. 58. @slodgehttp://bit.ly/mvvmcross
  59. 59. @slodgeAlternatives: http://bit.ly/rrnLDT

×