SlideShare a Scribd company logo
1 of 78
@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 applicationsIvano Malavolta
 
Angular kickstart slideshare
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshareSaleemMalik52
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instrumentsIvano Malavolta
 
I phone udvikling best brains
I phone udvikling best brainsI phone udvikling best brains
I phone udvikling best brainsOve larsen
 
Xamarin.Forms Bootcamp
Xamarin.Forms BootcampXamarin.Forms Bootcamp
Xamarin.Forms BootcampMike Melusky
 
Sergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample SdkSergey Ilinsky Presentation Ample Sdk
Sergey Ilinsky Presentation Ample SdkAjax Experience 2009
 
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 Xamarinjonkeda
 

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 modelBinu 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 2014FalafelSoftware
 
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 testingGDG 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 MVVMCodemotion
 
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 databindingStuart Lodge
 
Mobile development strategies with MVVM
Mobile development strategies with MVVMMobile development strategies with MVVM
Mobile development strategies with MVVMJames 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.FormsLeaware.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 patternFabio 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 bindingRemon 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 MvvmCrossFlavius-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

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 MvvmCrossFlavius-Radu Demian
 
Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupAngularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupGoutam Dey
 
Advanced MVVM in Windows 8
Advanced MVVM in Windows 8Advanced MVVM in Windows 8
Advanced MVVM in Windows 8Gill 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 EmberAlex Blom
 
MvvmCross Introduction
MvvmCross IntroductionMvvmCross Introduction
MvvmCross IntroductionStuart Lodge
 
MvvmCross Seminar
MvvmCross SeminarMvvmCross Seminar
MvvmCross SeminarXamarin
 
Cross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVMCross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVMJim Bennett
 
Angular js
Angular jsAngular js
Angular jsymtech
 
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 PlatformsJames Montemagno
 
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSIntegrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSTom Borger
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to conceptsAbhishek Sur
 
Getting started with Xamarin forms
Getting started with Xamarin formsGetting started with Xamarin forms
Getting started with Xamarin formsSolTech, Inc.
 
Mobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelinesMobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelinesQamar 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.5Ganesh 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 BackboneTroy Miles
 
Building databound JavaScript apps with Knockoutjs
Building databound JavaScript apps with KnockoutjsBuilding databound JavaScript apps with Knockoutjs
Building databound JavaScript apps with KnockoutjsNish Anil
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners WorkshopSathish 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 CrossStuart Lodge
 
Helping the Lions Roar
Helping the Lions RoarHelping the Lions Roar
Helping the Lions RoarStuart Lodge
 
Wpug meeting - wp to win8 experiences
Wpug meeting - wp to win8 experiencesWpug meeting - wp to win8 experiences
Wpug meeting - wp to win8 experiencesStuart 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 ltdStuart Lodge
 
C# Client to Cloud
C# Client to CloudC# Client to Cloud
C# Client to CloudStuart Lodge
 
How to make a pig udf
How to make a pig udfHow to make a pig udf
How to make a pig udfStuart 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 portableStuart Lodge
 
Ui testing for Windows Phone
Ui testing for Windows PhoneUi testing for Windows Phone
Ui testing for Windows PhoneStuart Lodge
 
Ui Testing on Windows Phone
Ui Testing on Windows PhoneUi Testing on Windows Phone
Ui Testing on Windows PhoneStuart Lodge
 
How To use Map Blogs
How To use Map BlogsHow To use Map Blogs
How To use Map BlogsStuart 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 NukeStuart 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 NukeStuart 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 5Stuart 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 cloudsStuart 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

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 

Recently uploaded (20)

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 

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