Building cross platform mobile applications using xamarin

Second part in the Microsoft webcast series i presented: Cross platform mobile development using Xamarin. The second webcast will focus on two different approaches to cross platform development with Xamarin. The first approach will focus on creating a shared code base to maximize code re-use but still use native UI’s. The second approach will go a step further and shares UI between the different platforms.

You watch a recording of the webcast here:
https://info.microsoft.com/WE-VSO-WBNR-FY17-09Sep-28-Webinar-enterprise-app-development-part-2-244438_Registration.html

Transcript

2. Chris Key Senior Consultant Open Circle Solutions www.opencirclesolutions.com
3. Series Part 1: Introduction to Xamarin mobile development September 14 Part 2: Building Cross Platform Mobile Applications using Xamarin Today Part 3: Mobile Dev Ops powered by Xamarin and Microsoft October 12, 2016 – 11:00-12:00 CET
4. • Developing cross platform more efficiently • Xamarin forms • Demo: Xamarin forms • Mvvmcross • Demo: Mvvmcross Agenda
5. Developing cross platform more efficiently
6. Demo app: XamLoc DEMO APP: Xamloc iOS http://tinyurl.com/hxyg5fl DEMO APP: XAMLOC Android http://tinyurl.com/jjcklb5 source for demo app https://github.com/chriskeynl/xamwebcasts
7. Components that make up an app UI Dialogs / notifications Navigation Services Models Configuration files GPS Logic Meta data Localizations Caching Push notifications Storage Business rules Validators Background services Device specific hardware Additional XAMLOC
8. Xamarin plugins UI+APIs UI + APIs UI + APIs Battery GPS Lights Notifications Settings Text To Speech Battery GPS Lights Notifications Settings Text To Speech Battery GPS Lights Notifications Settings Text To Speech
9. Xamarin plugins TextToSpeech Speak(“Hello World”); AVSpeechSynthesizer SpeechSynthesizer
10. Xamarin plugins Common API
11. MVVM pattern View View Model Model The view is responsible for defining the structure, layout, and appearance of what the user sees on the screen with a limited code-behind that does not contain business logic. The view model acts as an intermediary between the view and the model, and is responsible for handling the view logic. The view model acts as an intermediary between the view and the model, and is responsible for handling the view logic.
12. Shared code stats Code Sharing Stats Mac iOS Android Windows iCircuit Touch Draw 86% 14% 72% 28% 70% 30% 61% 39% 88% 12% 76% 24% 90% 10%
13. Xamarin forms
14. Xamarin forms Traditional Xamarin Approach With Xamarin.Forms: More code-sharing, all native iOS C# UI Windows C# UI Android C# UI Shared C# Backend Shared UI Code Shared C# Backend
15. ✓ 40+ Pages, layouts, and controls (Build from code behind or XAML) ✓ Two-way data binding ✓ Navigation ✓ Animation API ✓ Dependency Service ✓ Messaging Center Shared C# Backend Shared UI Code
16. Layouts Pages Stack Absolute Relative Grid ContentView ScrollView Frame Content MasterDetail Navigation Tabbed Carousel
17. ActivityIndicator BoxView Button DatePicker Editor Entry Image Label ListView Map OpenGLView Picker ProgressBar SearchBar Slider Stepper TableView TimePicker WebView EntryCell ImageCell SwitchCell TextCell ViewCell
18. <?xml version="1.0" encoding="UTF-8"?> <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyApp.MainPage"> <TabbedPage.Children> <ContentPage Title="Profile" Icon="Profile.png"> <StackLayout Spacing="20" Padding="20" VerticalOptions="Center"> <Entry Placeholder="Username" Text="{Binding Username}"/> <Entry Placeholder="Password" Text="{Binding Password}" IsPassword="true"/> <Button Text="Login" TextColor="White" BackgroundColor="#77D065" Command="{Binding LoginCommand}"/> </StackLayout> </ContentPage> <ContentPage Title="Settings" Icon="Settings.png"> <!-- Settings --> </ContentPage> </TabbedPage.Children>
22. Xamarin forms recap
23. Mvvmcross
24. Mvvmcross • Native iOS, android and windows UI • Shared code base • mvvm pattern • plugins • Converters
25. MVVM pattern View View Model Model The view is responsible for defining the structure, layout, and appearance of what the user sees on the screen with a limited code-behind that does not contain business logic. The view model acts as an intermediary between the view and the model, and is responsible for handling the view logic. The view model acts as an intermediary between the view and the model, and is responsible for handling the view logic.
26. MVVMCROSS App Start View Models Native application Setup Views Presenter Core APP
27. Plugins Accelerometer Bookmarks Color DownloadCache Email Field Binding File Json JsonLocalization Location Messenger MethodBinding Network PhoneCall PictureChooser ReflectionEx ResourceLoader ResxLocalization SQLite-PCL Share SoundEffects ThreadUtils Visibility ViewCell * Third Party WebBrowser
29. Mvvmcross recap
30. THAT is all for today ANY QUESTIONS? Linked IN: https://www.linkedin.com/in/keychris email: chris.key@opencirclesolutions.nl
31. Slides and source for demo app https://github.com/chriskeynl/xamwebcasts Xamarin resources https://developer.xamarin.com/guides/cross-platform/getting_started DEMO APP: Xamloc iOS http://tinyurl.com/hxyg5fl DEMO APP: XAMLOC Android http://tinyurl.com/jjcklb5