SlideShare a Scribd company logo
@slodge




  Cross Platform Mobile
C#, Mvvm and DataBinding
          WP7
         Android
         iPhone
           iPad
          Win 8
@slodge



@slodge
@slodge



http://bit.ly/mvvmcross
@slodge



                Coming up…
•   C# Cross Platform
•   An Mvvm Introduction
•   Some Code: TwitterSearch
•   Some Extras
•   Q&A
@slodge




Mobile
 C#
@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…
@slodge



         What you need – WP7:


•   A Windows 7 PC
•   Free Tools or better!
•   AppHub account $99
•   A phone sometimes helps…
@slodge



        What you need - Android:


•   Windows PC or a Mac
•   Free Tools
•   Play account $25
•   A phone really helps…
•   Mono 4 Android $400
@slodge



           What you need - iOS:


•   An Intel-based Mac
•   Account-Linked Tools
•   iOS Account $99
•   A phone often helps…
•   MonoTouch - $400
@slodge



Getting Started Links…
@slodge




MVVM
@slodge



                Mvvm Basics


           get/set
           Properties




                           ViewModel
           call Commands




                            ViewModel




                                                            Model
View




                              ViewModel
                                          Whatever C# you




                                                             Model
 View




                                          like!




                                                              Model
   View




          notify changes
          some messaging
@slodge



         MVVM Technical Details
•   Properties
•   INotifyPropertyChanged
•   INotifyCollectionChanged
•   Data Binding
•   IValueConverter
•   ICommand
•   UI Thread
@slodge



               Mvvm Benefits
• The “normal” reasons:
  – Separation of concerns
  – Designability (Blendability)
  – Testability


• The MvvmCross reason:
  – Cross platform code reuse
@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 messaging




Platform Specific                              Shared
@slodge



Some longer introductions…
@slodge




Twitter
Search
@slodge



         What we want to build…

Home Page:            Result Page:
@slodge



The Model and Service
@slodge



HomeViewModel
@slodge



TwitterViewModel
@slodge



               Navigation
• The HomeViewModel calls:




• Which means the TwitterViewModel gets
  created with:
@slodge




Test it!
@slodge



Some Unit Tests
@slodge




“Win32”
@slodge



A Console App
@slodge




WP7
@slodge



A WP7 App
@slodge



           Inside WP7 App…




• No C#, just XAML with {Binding}
• Binding syntax includes:
        {Binding Path, Converter=Converter,
      ConverterParameter=Parameter, Mode=Mode,
              FallbackValue=Fallback}
@slodge



           Inside WP7 App…
• ViewModel is auto-wired via
 MvxPhonePage<TViewModel> inheritance
@slodge



           Inside WP7 App…
• ValueConverters are used for presenting
  property values
@slodge



           Inside WP7 App…
• Lists…
@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.
@slodge




Android
@slodge



An Android App
@slodge



         Inside Android App…
• No C#, just xml
  with MvxBind
  attributes
• MvxBind syntax is
  JSON based on
  XAML structure.
@slodge



       Binding – Xaml versus Mvx
WP7:
 Text=‚{Binding SearchText,Mode=TwoWay}‛


Android:
         local:MvxBind=‚{‘Text’:
 {‘Path’:’SearchText’,’Mode’:’TwoWay’}}‛
@slodge



       Binding – Xaml versus Mvx
WP7:
              Text=‚{Binding
   Timestamp,Converter={StaticResource
                TimeAgo}}‛

Android:
         local:MvxBind=‚{‘Text’:
{‘Path’:’Timestamp’,Converter’:’TimeAgo’}
                    }‛
@slodge



         Inside Android App…
• ValueConverters are used for presenting
  property values
@slodge



          Inside Android App
• ViewModels are auto-wired using
 MvxBindingActivityView<TViewModel>
 inheritance
@slodge



           Inside Android App…
• Lists…
@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.
@slodge




iPhone
@slodge



iPhone App
@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
@slodge
@slodge



           Inside iPhone App
• ViewModels are auto-wired using inheritance
  and a constructor parameter:
@slodge



           Inside iPhone App
• ValueConverters are used for presenting
  property values
@slodge



           Inside iPhone App
• Lists…
@slodge



           Inside iPhone App
• Navigation is mapped to C# calls.
• Implementation mostly hidden from the View
  and ViewModel
@slodge
@slodge




iPad
@slodge



iPad App
@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
@slodge
@slodge




Windows 8 (WinRT/Metro)
@slodge



Windows 8 Metro App
@slodge



Inside Windows 8 Metro App…
@slodge



Inside Windows 8 Metro App…
@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
@slodge



     Inside Windows 8 Metro App
Warnings:
• 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.
@slodge



   Inside Windows 8 Metro App…
• Beyond the warnings – look at the numbers!
@slodge




Recap
@slodge



        TwitterSearch recap…
• Shared C# Core
  – ViewModels
  – Models
  – Services
  – Converters
  – Tests

• UIs are “mostly XML/JSON”
@slodge




Some
Extras
@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.
@slodge



“Tabs”
@slodge



                 Jump Lists
• Are possible…
• But need separate list
  formats on each
  platform…
• Thinking about how
  best to do this…
• Open to ideas!
@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>()
@slodge



                Native Types
• Sometimes #define is necessary…
• Personally, I try to use interfaces and DI
  wherever possible.
@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
@slodge



               Blendability
• Limited support available right now.
• It’s relatively easy to integrate your own
  design time ViewModelLocator with design
  time data…
@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
@slodge




 That’s
all folks
@slodge



             That’s all folks…
Hopefully we covered:
• C# Cross Platform
• An Mvvm Introduction
• Some Code: TwitterSearch
• Some Extras

There might be time for:
• Q&A
@slodge



@slodge
@slodge



http://bit.ly/mvvmcross
@slodge



Alternatives: http://bit.ly/rrnLDT

More Related Content

What's hot

Developing maintainable Cordova applications
Developing maintainable Cordova applicationsDeveloping maintainable Cordova applications
Developing maintainable Cordova applications
Ivano Malavolta
 
Javascript
JavascriptJavascript
Angular kickstart slideshare
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshare
SaleemMalik52
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instruments
Ivano Malavolta
 
I phone udvikling best brains
I phone udvikling best brainsI phone udvikling best brains
I phone udvikling best brains
Ove larsen
 
Xamarin.Forms Bootcamp
Xamarin.Forms BootcampXamarin.Forms Bootcamp
Xamarin.Forms Bootcamp
Mike Melusky
 
Sergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample SdkSergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample Sdk
Ajax Experience 2009
 
Java script ppt
Java script pptJava script ppt
tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365
Fabio Franzini
 
Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin
Tea Light Techdays 2013 - Cross Platform Apps with .NET and XamarinTea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin
Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin
jonkeda
 

What's hot (10)

Developing maintainable Cordova applications
Developing maintainable Cordova applicationsDeveloping maintainable Cordova applications
Developing maintainable Cordova applications
 
Javascript
JavascriptJavascript
Javascript
 
Angular kickstart slideshare
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshare
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instruments
 
I phone udvikling best brains
I phone udvikling best brainsI phone udvikling best brains
I phone udvikling best brains
 
Xamarin.Forms Bootcamp
Xamarin.Forms BootcampXamarin.Forms Bootcamp
Xamarin.Forms Bootcamp
 
Sergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample SdkSergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample Sdk
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365
 
Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin
Tea Light Techdays 2013 - Cross Platform Apps with .NET and XamarinTea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin
Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin
 

Viewers also liked

Model view view model
Model view view modelModel view view model
Model view view model
Binu Bhasuran
 
XAML Development with Xamarin - Jesse Liberty | FalafelCON 2014
XAML Development with Xamarin  - Jesse Liberty | FalafelCON 2014XAML Development with Xamarin  - Jesse Liberty | FalafelCON 2014
XAML Development with Xamarin - Jesse Liberty | FalafelCON 2014
FalafelSoftware
 
GKAC 2015 Apr. - Xamarin forms, mvvm and testing
GKAC 2015 Apr. - Xamarin forms, mvvm and testingGKAC 2015 Apr. - Xamarin forms, mvvm and testing
GKAC 2015 Apr. - Xamarin forms, mvvm and testing
GDG Korea
 
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVM
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVMRealizzare applicazioni cross-platform con Xamarin e il pattern MVVM
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVM
Codemotion
 
Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding
Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databindingDev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding
Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding
Stuart Lodge
 
Mobile development strategies with MVVM
Mobile development strategies with MVVMMobile development strategies with MVVM
Mobile development strategies with MVVM
James Montemagno
 
Mvvm Pattern in Xamarin - MvvmCross and Xamarin.Forms
Mvvm Pattern in Xamarin - MvvmCross and Xamarin.FormsMvvm Pattern in Xamarin - MvvmCross and Xamarin.Forms
Mvvm Pattern in Xamarin - MvvmCross and Xamarin.Forms
Leaware.com
 
MVVM & Data Binding Library
MVVM & Data Binding Library MVVM & Data Binding Library
MVVM & Data Binding Library
10Clouds
 
Data Binding in Action using MVVM pattern
Data Binding in Action using MVVM patternData Binding in Action using MVVM pattern
Data Binding in Action using MVVM pattern
Fabio Collini
 
Windows Store Development : MVVM and data binding
Windows Store Development : MVVM and data bindingWindows Store Development : MVVM and data binding
Windows Store Development : MVVM and data binding
Remon Kamel
 
C# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCross
C# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCrossC# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCross
C# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCross
Flavius-Radu Demian
 
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...
Svetlin Nakov
 

Viewers also liked (12)

Model view view model
Model view view modelModel view view model
Model view view model
 
XAML Development with Xamarin - Jesse Liberty | FalafelCON 2014
XAML Development with Xamarin  - Jesse Liberty | FalafelCON 2014XAML Development with Xamarin  - Jesse Liberty | FalafelCON 2014
XAML Development with Xamarin - Jesse Liberty | FalafelCON 2014
 
GKAC 2015 Apr. - Xamarin forms, mvvm and testing
GKAC 2015 Apr. - Xamarin forms, mvvm and testingGKAC 2015 Apr. - Xamarin forms, mvvm and testing
GKAC 2015 Apr. - Xamarin forms, mvvm and testing
 
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVM
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVMRealizzare applicazioni cross-platform con Xamarin e il pattern MVVM
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVM
 
Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding
Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databindingDev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding
Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding
 
Mobile development strategies with MVVM
Mobile development strategies with MVVMMobile development strategies with MVVM
Mobile development strategies with MVVM
 
Mvvm Pattern in Xamarin - MvvmCross and Xamarin.Forms
Mvvm Pattern in Xamarin - MvvmCross and Xamarin.FormsMvvm Pattern in Xamarin - MvvmCross and Xamarin.Forms
Mvvm Pattern in Xamarin - MvvmCross and Xamarin.Forms
 
MVVM & Data Binding Library
MVVM & Data Binding Library MVVM & Data Binding Library
MVVM & Data Binding Library
 
Data Binding in Action using MVVM pattern
Data Binding in Action using MVVM patternData Binding in Action using MVVM pattern
Data Binding in Action using MVVM pattern
 
Windows Store Development : MVVM and data binding
Windows Store Development : MVVM and data bindingWindows Store Development : MVVM and data binding
Windows Store Development : MVVM and data binding
 
C# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCross
C# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCrossC# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCross
C# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCross
 
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...
Architectural Patterns and Software Architectures: Client-Server, Multi-Tier,...
 

Similar to Wpug mvvm and data binding

Angular js
Angular jsAngular js
Angular js
Mauro Servienti
 
C# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCross
C# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCrossC# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCross
C# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCross
Flavius-Radu Demian
 
Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupAngularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetup
Goutam Dey
 
Advanced MVVM in Windows 8
Advanced MVVM in Windows 8Advanced MVVM in Windows 8
Advanced MVVM in Windows 8
Gill Cleeren
 
Ember Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with EmberEmber Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with Ember
Alex Blom
 
MvvmCross Introduction
MvvmCross IntroductionMvvmCross Introduction
MvvmCross Introduction
Stuart Lodge
 
MvvmCross Seminar
MvvmCross SeminarMvvmCross Seminar
MvvmCross Seminar
Xamarin
 
Training: MVVM Pattern
Training: MVVM PatternTraining: MVVM Pattern
Training: MVVM Pattern
Betclic Everest Group Tech Team
 
Cross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVMCross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVM
Jim Bennett
 
Angular js
Angular jsAngular js
Angular js
ymtech
 
MVP Mix 2015 Leveraging MVVM on all Platforms
MVP Mix 2015  Leveraging MVVM on all PlatformsMVP Mix 2015  Leveraging MVVM on all Platforms
MVP Mix 2015 Leveraging MVVM on all Platforms
James Montemagno
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMS
Tom Borger
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
Abhishek Sur
 
Titanium Alloy Tutorial
Titanium Alloy TutorialTitanium Alloy Tutorial
Titanium Alloy Tutorial
Fokke Zandbergen
 
Getting started with Xamarin forms
Getting started with Xamarin formsGetting started with Xamarin forms
Getting started with Xamarin forms
SolTech, Inc.
 
Mobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelinesMobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelines
Qamar Abbas
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
Ganesh Kondal
 
Building mobile apps with PhoneGap and Backbone
Building mobile apps with PhoneGap and BackboneBuilding mobile apps with PhoneGap and Backbone
Building mobile apps with PhoneGap and Backbone
Troy Miles
 
Building databound JavaScript apps with Knockoutjs
Building databound JavaScript apps with KnockoutjsBuilding databound JavaScript apps with Knockoutjs
Building databound JavaScript apps with Knockoutjs
Nish Anil
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners Workshop
Sathish VJ
 

Similar to Wpug mvvm and data binding (20)

Angular js
Angular jsAngular js
Angular js
 
C# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCross
C# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCrossC# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCross
C# everywhere - Building Cross-Platform Apps with Xamarin and MvvmCross
 
Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupAngularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetup
 
Advanced MVVM in Windows 8
Advanced MVVM in Windows 8Advanced MVVM in Windows 8
Advanced MVVM in Windows 8
 
Ember Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with EmberEmber Conf 2016: Building Mobile Apps with Ember
Ember Conf 2016: Building Mobile Apps with Ember
 
MvvmCross Introduction
MvvmCross IntroductionMvvmCross Introduction
MvvmCross Introduction
 
MvvmCross Seminar
MvvmCross SeminarMvvmCross Seminar
MvvmCross Seminar
 
Training: MVVM Pattern
Training: MVVM PatternTraining: MVVM Pattern
Training: MVVM Pattern
 
Cross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVMCross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVM
 
Angular js
Angular jsAngular js
Angular js
 
MVP Mix 2015 Leveraging MVVM on all Platforms
MVP Mix 2015  Leveraging MVVM on all PlatformsMVP Mix 2015  Leveraging MVVM on all Platforms
MVP Mix 2015 Leveraging MVVM on all Platforms
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMS
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
Titanium Alloy Tutorial
Titanium Alloy TutorialTitanium Alloy Tutorial
Titanium Alloy Tutorial
 
Getting started with Xamarin forms
Getting started with Xamarin formsGetting started with Xamarin forms
Getting started with Xamarin forms
 
Mobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelinesMobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelines
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
 
Building mobile apps with PhoneGap and Backbone
Building mobile apps with PhoneGap and BackboneBuilding mobile apps with PhoneGap and Backbone
Building mobile apps with PhoneGap and Backbone
 
Building databound JavaScript apps with Knockoutjs
Building databound JavaScript apps with KnockoutjsBuilding databound JavaScript apps with Knockoutjs
Building databound JavaScript apps with Knockoutjs
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners Workshop
 

More from Stuart Lodge

Hot tuna - from Sean Cross
Hot tuna - from Sean CrossHot tuna - from Sean Cross
Hot tuna - from Sean Cross
Stuart Lodge
 
Helping the Lions Roar
Helping the Lions RoarHelping the Lions Roar
Helping the Lions Roar
Stuart Lodge
 
Wpug meeting - wp to win8 experiences
Wpug meeting - wp to win8 experiencesWpug meeting - wp to win8 experiences
Wpug meeting - wp to win8 experiences
Stuart Lodge
 
AlphaLabs - Node Garden with Speech
AlphaLabs - Node Garden with Speech AlphaLabs - Node Garden with Speech
AlphaLabs - Node Garden with Speech
Stuart Lodge
 
About Cirrious ltd
About Cirrious ltdAbout Cirrious ltd
About Cirrious ltd
Stuart Lodge
 
C# Client to Cloud
C# Client to CloudC# Client to Cloud
C# Client to Cloud
Stuart Lodge
 
How to make a pig udf
How to make a pig udfHow to make a pig udf
How to make a pig udf
Stuart Lodge
 
C# - Azure, WP7, MonoTouch and Mono for Android (MonoDroid)
C# - Azure, WP7, MonoTouch and Mono for Android (MonoDroid)C# - Azure, WP7, MonoTouch and Mono for Android (MonoDroid)
C# - Azure, WP7, MonoTouch and Mono for Android (MonoDroid)
Stuart Lodge
 
Mvvm cross – going portable
Mvvm cross – going portableMvvm cross – going portable
Mvvm cross – going portable
Stuart Lodge
 
Ui testing for Windows Phone
Ui testing for Windows PhoneUi testing for Windows Phone
Ui testing for Windows Phone
Stuart Lodge
 
Ui Testing on Windows Phone
Ui Testing on Windows PhoneUi Testing on Windows Phone
Ui Testing on Windows Phone
Stuart Lodge
 
How To use Map Blogs
How To use Map BlogsHow To use Map Blogs
How To use Map Blogs
Stuart Lodge
 
Uk Nuke Rpx Authentication For Dot Net Nuke
Uk Nuke Rpx Authentication For Dot Net NukeUk Nuke Rpx Authentication For Dot Net Nuke
Uk Nuke Rpx Authentication For Dot Net Nuke
Stuart Lodge
 
Uk Nuke Facebook Connect Authentication For Dot Net Nuke
Uk Nuke Facebook Connect Authentication For Dot Net NukeUk Nuke Facebook Connect Authentication For Dot Net Nuke
Uk Nuke Facebook Connect Authentication For Dot Net Nuke
Stuart Lodge
 
UkNuke Facebook Connect Authentication For DotNetNuke 5
UkNuke Facebook Connect Authentication For DotNetNuke 5UkNuke Facebook Connect Authentication For DotNetNuke 5
UkNuke Facebook Connect Authentication For DotNetNuke 5
Stuart Lodge
 
10 things I’ve learnt In the clouds
10 things I’ve learnt In the clouds10 things I’ve learnt In the clouds
10 things I’ve learnt In the clouds
Stuart Lodge
 

More from Stuart Lodge (16)

Hot tuna - from Sean Cross
Hot tuna - from Sean CrossHot tuna - from Sean Cross
Hot tuna - from Sean Cross
 
Helping the Lions Roar
Helping the Lions RoarHelping the Lions Roar
Helping the Lions Roar
 
Wpug meeting - wp to win8 experiences
Wpug meeting - wp to win8 experiencesWpug meeting - wp to win8 experiences
Wpug meeting - wp to win8 experiences
 
AlphaLabs - Node Garden with Speech
AlphaLabs - Node Garden with Speech AlphaLabs - Node Garden with Speech
AlphaLabs - Node Garden with Speech
 
About Cirrious ltd
About Cirrious ltdAbout Cirrious ltd
About Cirrious ltd
 
C# Client to Cloud
C# Client to CloudC# Client to Cloud
C# Client to Cloud
 
How to make a pig udf
How to make a pig udfHow to make a pig udf
How to make a pig udf
 
C# - Azure, WP7, MonoTouch and Mono for Android (MonoDroid)
C# - Azure, WP7, MonoTouch and Mono for Android (MonoDroid)C# - Azure, WP7, MonoTouch and Mono for Android (MonoDroid)
C# - Azure, WP7, MonoTouch and Mono for Android (MonoDroid)
 
Mvvm cross – going portable
Mvvm cross – going portableMvvm cross – going portable
Mvvm cross – going portable
 
Ui testing for Windows Phone
Ui testing for Windows PhoneUi testing for Windows Phone
Ui testing for Windows Phone
 
Ui Testing on Windows Phone
Ui Testing on Windows PhoneUi Testing on Windows Phone
Ui Testing on Windows Phone
 
How To use Map Blogs
How To use Map BlogsHow To use Map Blogs
How To use Map Blogs
 
Uk Nuke Rpx Authentication For Dot Net Nuke
Uk Nuke Rpx Authentication For Dot Net NukeUk Nuke Rpx Authentication For Dot Net Nuke
Uk Nuke Rpx Authentication For Dot Net Nuke
 
Uk Nuke Facebook Connect Authentication For Dot Net Nuke
Uk Nuke Facebook Connect Authentication For Dot Net NukeUk Nuke Facebook Connect Authentication For Dot Net Nuke
Uk Nuke Facebook Connect Authentication For Dot Net Nuke
 
UkNuke Facebook Connect Authentication For DotNetNuke 5
UkNuke Facebook Connect Authentication For DotNetNuke 5UkNuke Facebook Connect Authentication For DotNetNuke 5
UkNuke Facebook Connect Authentication For DotNetNuke 5
 
10 things I’ve learnt In the clouds
10 things I’ve learnt In the clouds10 things I’ve learnt In the clouds
10 things I’ve learnt In the clouds
 

Recently uploaded

20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Zilliz
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 

Recently uploaded (20)

20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 

Wpug mvvm and data binding

  • 1. @slodge Cross Platform Mobile C#, Mvvm and DataBinding WP7 Android iPhone iPad Win 8
  • 4. @slodge Coming up… • C# Cross Platform • An Mvvm Introduction • Some Code: TwitterSearch • Some Extras • Q&A
  • 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. @slodge What you need – WP7: • A Windows 7 PC • Free Tools or better! • AppHub account $99 • A phone sometimes helps…
  • 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. @slodge What you need - iOS: • An Intel-based Mac • Account-Linked Tools • iOS Account $99 • A phone often helps… • MonoTouch - $400
  • 12. @slodge Mvvm Basics get/set Properties ViewModel call Commands ViewModel Model View ViewModel Whatever C# you Model View like! Model View notify changes some messaging
  • 13. @slodge MVVM Technical Details • Properties • INotifyPropertyChanged • INotifyCollectionChanged • Data Binding • IValueConverter • ICommand • UI Thread
  • 14. @slodge Mvvm Benefits • The “normal” reasons: – Separation of concerns – Designability (Blendability) – Testability • The MvvmCross reason: – Cross platform code reuse
  • 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 messaging Platform Specific Shared
  • 18. @slodge What we want to build… Home Page: Result Page:
  • 22. @slodge Navigation • The HomeViewModel calls: • Which means the TwitterViewModel gets created with:
  • 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. @slodge Inside WP7 App… • ViewModel is auto-wired via MvxPhonePage<TViewModel> inheritance
  • 31. @slodge Inside WP7 App… • ValueConverters are used for presenting property values
  • 32. @slodge Inside WP7 App… • Lists…
  • 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.
  • 36. @slodge Inside Android App… • No C#, just xml with MvxBind attributes • MvxBind syntax is JSON based on XAML structure.
  • 37. @slodge Binding – Xaml versus Mvx WP7: Text=‚{Binding SearchText,Mode=TwoWay}‛ Android: local:MvxBind=‚{‘Text’: {‘Path’:’SearchText’,’Mode’:’TwoWay’}}‛
  • 38. @slodge Binding – Xaml versus Mvx WP7: Text=‚{Binding Timestamp,Converter={StaticResource TimeAgo}}‛ Android: local:MvxBind=‚{‘Text’: {‘Path’:’Timestamp’,Converter’:’TimeAgo’} }‛
  • 39. @slodge Inside Android App… • ValueConverters are used for presenting property values
  • 40. @slodge Inside Android App • ViewModels are auto-wired using MvxBindingActivityView<TViewModel> inheritance
  • 41. @slodge Inside Android App… • Lists…
  • 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.
  • 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
  • 47. @slodge Inside iPhone App • ViewModels are auto-wired using inheritance and a constructor parameter:
  • 48. @slodge Inside iPhone App • ValueConverters are used for presenting property values
  • 49. @slodge Inside iPhone App • Lists…
  • 50. @slodge Inside iPhone App • Navigation is mapped to C# calls. • Implementation mostly hidden from the View and ViewModel
  • 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
  • 58. @slodge Inside Windows 8 Metro App…
  • 59. @slodge Inside Windows 8 Metro App…
  • 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. @slodge Inside Windows 8 Metro App Warnings: • 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. @slodge Inside Windows 8 Metro App… • Beyond the warnings – look at the numbers!
  • 64. @slodge TwitterSearch recap… • Shared C# Core – ViewModels – Models – Services – Converters – Tests • UIs are “mostly XML/JSON”
  • 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.
  • 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. @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. @slodge Native Types • Sometimes #define is necessary… • Personally, I try to use interfaces and DI wherever possible.
  • 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. @slodge Blendability • Limited support available right now. • It’s relatively easy to integrate your own design time ViewModelLocator with design time data…
  • 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
  • 75. @slodge That’s all folks… Hopefully we covered: • C# Cross Platform • An Mvvm Introduction • Some Code: TwitterSearch • Some Extras There might be time for: • Q&A