Building your Apps for Cross Platform CompatibilityIntro to MvvmCross and Xamarin.Mobile

Michael CummingsMicrosoft Technical Evangelist@mcummingshttp://geekswithblogs.net/mathoms

Overview

Challenges FrameworksDevelopment Approaches

Development Approaches

The Cross Platform Pyramid• Toolsets / Frameworks• Hybrid Applications• Integrated

HTML5• MS .Net• Xamarin MonoC#/CLR

• Barebones access to low level API’s

C++

Port

ab

ility

Flexibility

Battle Royale Web Standard being

leveraged for mobile Performance hit from

JavaScript execution Development tools are

lacking, esp. Debugging

Desktop paradigm being leveraged for mobile

Native execution model for each platform

1 Stack - Cloud to Device

HTML5/JS/CSS3 C# / CLR

http://xamarin.com

Challenges

Where can you go wrong? User Interface

Use UI patterns to abstract presentation logic from display

Application Logic Use abstractions to hide implementation of device services Storage, Camera, Contacts, GPS, etc

Services WCF is not a reliable cross platform client framework Use WebRequest to send / receive data REST over XML Web Services JSON over XML

Avoidance Patterns Patterns Patterns

MvvmCross and MonoCross Awesome UI and Data Development Unit Testing of code Large applications to have a common architecture

Different platforms can share code

Model-View-ViewModel

ModelViewModelView

Data Binding

Data

Model-View-Controller

ModelController

View

Data Binding

Data

Xamarin.Mobile API

xamarin.com/mobileapi

Xamarin.Mobile API

Contacts Geolocation

Compass + Accelerometer

CameraNotifications

Xamarin.Mobile

Contacts - AndroidContentResolver content= getContentResolver();

Cursor ncursor = null;try { ncursor = content.query (ContactsContract.Data.CONTENT_URI, new String[] { ContactsContract.Data.MIMETYPE, ContactsContract.Contacts.LOOKUP_KEY, ContactsContract.Contacts.DISPLAY_NAME }, ContactsContract.Data.MIMETYPE + "=? AND " + ContactsContract.CommonDataKinds.StructuredName.FAMILY_NAME + "=?", new String[] { ContactsContract.CommonDataKinds.StructuredName.CONTENT_ITEM_TYPE, "Smith" }, null);

while (ncursor.moveToNext()) { print (ncursor.getString(ncursor.getColumnIndex(ContactsContract.Contacts.DISPLAY_NAME)) + lineSep); String lookupKey = ncursor.getString (ncursor.getColumnIndex(ContactsContract.Contacts.LOOKUP_KEY)); Cursor dcursor = null; try { dcursor = content.query (ContactsContract.Data.CONTENT_URI, new String[] { ContactsContract.Data.MIMETYPE, ContactsContract.CommonDataKinds.Phone.NUMBER,ContactsContract.Data.DATA1 }, ContactsContract.Contacts.LOOKUP_KEY + "=?", new String[] { lookupKey }, null); while (dcursor.moveToNext()) { String type = dcursor.getString (ncursor.getColumnIndex(ContactsContract.Data.MIMETYPE));

if (type.equals (ContactsContract.CommonDataKinds.Phone.CONTENT_ITEM_TYPE)) print ("Phone: " + dcursor.getString(dcursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER)) + lineSep); else if (type.equals (ContactsContract.CommonDataKinds.Email.CONTENT_ITEM_TYPE)) print ("Email: " + dcursor.getString(dcursor.getColumnIndex(ContactsContract.CommonDataKinds.Email.DATA1)) + lineSep); } } finally { if (dcursor != null) dcursor.close(); } }} finally { if (ncursor != null) ncursor.close();}

Contacts – iOS

ABAddressBookRef ab = ABAddressBookCreate(); CFStringRef name = CFSTR ("Smith"); CFArrayRef smiths = ABAddressBookCopyPeopleWithName(ab, name); CFRelease (name); int count = CFArrayGetCount(smiths); for (int i = 0; i < count; ++i) { ABRecordRef person = (ABRecordRef)CFArrayGetValueAtIndex(smiths, (CFIndex)i); if (ABRecordGetRecordType(person) != kABPersonType) continue; NSString *name = (NSString*)ABRecordCopyCompositeName(person); NSLog ("%@\n", name); [name release]; ABMultiValueRef phoneNumberProp = ABRecordCopyValue(person, kABPersonPhoneProperty); NSArray* numbers = (NSArray*)ABMultiValueCopyArrayOfAllValues(phoneNumberProp); CFRelease(phoneNumberProp); for (NSString *pvalue in numbers) NSLog ("Phone: %@\n", pvalue);

[numbers release]; ABMultiValueRef emailProp = ABRecordCopyValue(person, kABPersonEmailProperty); NSArray* emails = (NSArray*)ABMultiValueCopyArrayOfAllValues(emailProp); CFRelease(emailProp); for (NSString *evalue in emails) NSLog ("Email: %@\n"); [emails release]; } CFRelease (ab); CFRelease (smiths);

ABAddressBookRef ab = ABAddressBookCreate(); CFStringRef name = CFSTR ("Smith"); CFArrayRef smiths = ABAddressBookCopyPeopleWithName(ab, name); CFRelease (name); int count = CFArrayGetCount(smiths); for (int i = 0; i < count; ++i) { ABRecordRef person = (ABRecordRef)CFArrayGetValueAtIndex(smiths, (CFIndex)i); if (ABRecordGetRecordType(person) != kABPersonType) continue; NSString *name = (NSString*)ABRecordCopyCompositeName(person); NSLog ("%@\n", name); [name release]; ABMultiValueRef phoneNumberProp = ABRecordCopyValue(person, kABPersonPhoneProperty); NSArray* numbers = (NSArray*)ABMultiValueCopyArrayOfAllValues(phoneNumberProp); CFRelease(phoneNumberProp); for (NSString *pvalue in numbers) NSLog ("Phone: %@\n", pvalue);

[numbers release]; ABMultiValueRef emailProp = ABRecordCopyValue(person, kABPersonEmailProperty); NSArray* emails = (NSArray*)ABMultiValueCopyArrayOfAllValues(emailProp); CFRelease(emailProp); for (NSString *evalue in emails) NSLog ("Email: %@\n"); [emails release]; } CFRelease (ab); CFRelease (smiths);

var book = new AddressBook () { PreferContactAggregation = true} ;

foreach (Contact c in book.Where (c => c.LastName == "Smith")) { Console.WriteLine (c.DisplayName);

foreach (Phone p in c.Phones) Console.WriteLine ("Phone: " + p.Number);

foreach (Email e in c.Emails) Console.WriteLine ("Email: " + e.Address);}

Xamarin.Mobile Contacts

MvvmCross & Xamarin.Mobile

Contacts ListDemo

Frameworks

HTML5/JS developersGameMaker - family of products that caters to entry-level developers and seasoned game development professionals to create cross platform games

HTML5/JS developersGameSalad – create cross platform games rapidly with no code

HTML5/JS developersConstruct2 - cross platform game development for beginners

• Free open source cross platform framework for apps on mobile devices

• Renders UI using HTML5 and CSS; Web browser encased in a native app for each platform

• Build for Windows Phone and Port to Windows 8

HTML5/JS developers

C# developersMonoGame – cross platform implementation of the XNA 4.0 framework

C++ developersEpic Games Unreal Engine 3 (UDK ) – a complete professional framework that provides tools for creating high-quality games and apps, movies and advanced 3D visualizations and simulations

http://www.unrealengine.com/udk/

IN THE SPOTLIGHTTHE WWE APP IS READY TO RUMBLE!● Kevin Mills and Xudong He from UI Centric brought this

app to life. ● App features: easy-to-explore bios, stunning designs, and

unique interactions so that fans feel like they're a part of themain event.

● Mills and He’s top tip: "Get familiar with the PlayerFramework. Think Lean. Load time and content caching are important." READY TO BUILD THE NEXT BIG APP? JOIN GENERATION APP FOR:

● Tips and tricks on Windows 8 and Windows Phone app development. ● 1:1 on-the-phone access to a Windows 8 and Windows Phone expert*. ● An exclusive Windows UI style design consultation*.● An opportunity to test your app with qualified experts an App Lab.

Sign Up at www.generationapp.com

*See Ts&Cs on www.generationapp.com

Where can I find out more?

Detailed Technical Topics on HTML5, XAML, Games and more!

http://aka.ms/bostonmeetup

Workshops

Ready to Submit? Having a nasty problem? Use our machines to test or our experts to help solve your app issues!

http://aka.ms/bostonmeetup

Office Hours