Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android...
Transcript of Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android...
![Page 1: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/1.jpg)
Xamarin.Forms
![Page 2: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/2.jpg)
Introduction to Xamarin
![Page 3: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/3.jpg)
Who is this guy?
![Page 4: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/4.jpg)
Cross platform developer
![Page 5: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/5.jpg)
RedBull Event @ The London Eye
![Page 6: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/6.jpg)
Architecting Mobile Apps
![Page 7: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/7.jpg)
Build Apps Multiple Times
![Page 8: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/8.jpg)
Lowest Common Denominator
![Page 9: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/9.jpg)
Xamarin Standard App Architecture
▪ Business logic, data models and common code shared between all platforms.
▪ All platform-specific UI and API calls are in C# as well.
▪ Retain fine-grain control app user interface
▪ Recommended for sophisticated UX requirements (complicated gestures, animations, design)
Shared App Logic
iOS UI Android UI Windows UI
![Page 10: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/10.jpg)
Native Performance
.IPA .APK
Xamarin.Android takes advantage of Just In Time (JIT) compilation on the Android device.
Xamarin.iOS does full Ahead Of Time (AOT) compilation to produce an ARM binary for Apple’s App Store.
![Page 11: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/11.jpg)
iOS PerformanceiPad Air 2 iPhone 6
https://medium.com/@harrycheung/mobile-app-performance-redux-e512be94f976
![Page 12: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/12.jpg)
Android PerformanceHTC Nexus 9 Moto X(2014)
https://medium.com/@harrycheung/mobile-app-performance-redux-e512be94f976
![Page 13: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/13.jpg)
Windows APIs
![Page 14: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/14.jpg)
iOS APIs | 100% Coverage
![Page 15: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/15.jpg)
Android APIs | 100% Coverage
![Page 16: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/16.jpg)
16
iOS: 33,000+
Android: 40,000+APIs
![Page 17: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/17.jpg)
Traditional Demo
![Page 18: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/18.jpg)
Portable Class Libraries
![Page 19: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/19.jpg)
Considerations
• Not for all types of apps • Is your app very customised? • Great for data driven apps • Utility apps • Also supports maps
Metroon for iOS
![Page 20: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/20.jpg)
Xamarin App Architectures
Shared App Logic
iOS C# UI Android C# UI Windows C# UI
Shared App Logic
Xamarin.Forms
Option for OS – specific UI/UX elements Recommended for: Sophisticated UX (complicated gestures, animations, design)
Option for 100% code share Recommended for: forms-based, apps with a lot of data entry screens
![Page 21: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/21.jpg)
Xamarin.Forms
Quickly and easily build native user interfaces using shared code
Xamarin.Forms elements map to native controls and behaviours
Mix-and-match Xamarin.Forms with native APIs
Shared UI Code
![Page 22: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/22.jpg)
What’s Included▪ 40+ Pages, Layouts, and Controls ▪ Build from code behind or XAML
▪ Two-way Data Binding
▪ Navigation
▪ Animation API
▪ Dependency Service
▪ Messaging Center
Shared UI Code
![Page 23: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/23.jpg)
Microsoft XAML vs Xamarin.Forms• Xamarin.Forms conforms to the XAML 2009 specification; the different
are really in the controls and layout containers you use
Microsoft XAML (WinRT) Xamarin.Forms
![Page 24: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/24.jpg)
Feature Supported in Xamarin.Forms
XAML 2009 compliance YesShapes (Rectangles, Ellipse,
Path, etc.)BoxView
Resources, Styles and Triggers Yes
Data binding Yes
Data templates Yes
Control Templates Custom Renderers
Render Transforms Yes
Animations Code Only
Custom XAML behaviors Yes
Custom markup extensions Yes
Value converters Yes
![Page 25: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/25.jpg)
Pages
Content MasterDetail Navigation Tabbed Carousel
![Page 26: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/26.jpg)
Layouts
Stack Absolute Relative Grid ContentView ScrollView Frame
![Page 27: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/27.jpg)
ControlsActivityIndicator BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picker ProgressBar SearchBar Slider
Stepper TableView TimePicker WebView EntryCell
ImageCell SwitchCell TextCell ViewCell
![Page 28: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/28.jpg)
Demo
![Page 29: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/29.jpg)
Pages
• Single screen of content • ContentPage holds one visual
element
ContentPage
Control
Content property
![Page 30: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/30.jpg)
Layout
• Layouts handle child elements • Layouts come in two types:
managed and unmanaged
ContentPage
Layout
Content property
ControlControl
ControlControl
Children
Layout
![Page 31: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/31.jpg)
Demo
![Page 32: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/32.jpg)
Plugins for Xamarin
Share even more code
Abstracts platform features • Vibrate • Location • Connectivity • Battery status • Device Info • ImageCircles • Settings • Text to speech • External maps • …
![Page 33: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/33.jpg)
var locator = CrossGeolocator.Current; locator.DesiredAccuracy = 50;
var position = await locator.GetPositionAsync (timeout: 10000);
Console.WriteLine ("Position Status: {0}", position.Timestamp); Console.WriteLine ("Position Latitude: {0}", position.Latitude); Console.WriteLine ("Position Longitude: {0}", position.Longitude);
Example location code
![Page 34: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/34.jpg)
Flash Quiz
![Page 35: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/35.jpg)
Flash Quiz
• True
• False
Xamarin.Forms uses native controls on each platform to render a UI
![Page 36: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/36.jpg)
Flash Quiz
• True
• False
Xamarin.Forms uses native controls on each platform to render a UI
![Page 37: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/37.jpg)
Flash Quiz
• True
• False
Tom wants to build an application that has a pixel perfect layout on both iPhone and iPad devices, Xamarin.Forms would be the perfect choice for this application
![Page 38: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/38.jpg)
Flash Quiz
• True
• False
Tom wants to build an application that has a pixel perfect layout on both iPhone and iPad devices, Xamarin.Forms would be the perfect choice for this application
![Page 39: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/39.jpg)
Flash Quiz
• True
• False
Xamarin.Forms is perfect for prototyping and quick data-entry type applications which do not require many custom UI elements
![Page 40: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/40.jpg)
Flash Quiz
• True
• False
Xamarin.Forms is perfect for prototyping and quick data-entry type applications which do not require many custom UI elements
![Page 41: Intro to Forms - gotocon.comgotocon.com/dl/goto-cph-2015/slides/MikeJames... · iOS C# UI Android C# UI Windows C# UI Shared App Logic Xamarin.Forms Option for OS – specific UI/UX](https://reader030.fdocuments.in/reader030/viewer/2022040409/5ec5cf574a29781b3c1abd12/html5/thumbnails/41.jpg)
Thanks! Questions?
Mike James Developer Evangelist, Xamarin
[email protected] http://mikecodes.net @mikeCodesDotNet