Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding

10,291 views

Published on

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

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,291
On SlideShare
0
From Embeds
0
Number of Embeds
3,523
Actions
Shares
0
Downloads
84
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

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

×