Seminar Xamarin.FormsMARTIN PERNICA | @MARTINDEVELOPER

Hello, I’m Martin• Games programmer and creator• Loves rendering and GPGPU programming

• Mobile and website developer monkey

• Crazy games player• Beat me in Titanfall!

• Sometimes CEO• Really, sometimes …

Classic mobile developmentThere are main 3 mobile platforms:• iOS• Small range of resolutions and devices

• Objective-C, C++, Swift

• Only native ARM code, can not execute code on demand

• Android• Soooo many devices

• Java, C++

• JIT (Dalvik), AOT (ART)

• Windows 8 (Phone, universal, …)• Windows Phone

• Windows Store

• C++, .NET with C#, F# …

Classic mobile developmentEvery platform use different programming languages and tools

◦ You will need wide variety of skills

And client need to pay 3 platforms and you will spent 3x more time on development◦ Classic client want high quality applications for lower prices

Classic mobile development

UI code

Platform specific code

Model code

Most programming you will spent at model!

Classic mobile developmentBut you can use full API, native design and native libraries of target platform

◦ And it will be expensive – time and money

Classic mobile development

Is there any solution how to write good applications in lesser time?

And no, HTML5 is not solution. Really …

XamarinXamarin created Mono, MonoTouch (Xamarin.iOS) and Mono for Android (Xamarin.Android)

◦ Mono is open-source implementation of Microsoft .NET (CLI)

◦ MonoTouch and Mono for Android are commercial products which implements/binds native classes to Mono

Mono using Xamarin (.NET BCL) runs on iOS (AOT) and Android (JIT)◦ On Windows Phone it uses the native .NET

XamarinSo you can use C# (F# if you like) as programming language for every platform

◦ You can call native classes

◦ Use native UI

◦ And also you can use wide range of .NET libraries (not every library is compatible)

XamarinBut you need write separate code for views and UI for every platform

◦ That’s good because you can tune UI for every platform

But you know – time is money◦ So Xamarin developed the Xamarin.Forms project

Xamarin.FormsUsing Xamarin.Forms you can write one UI code for every mobile platform!

◦ So you can share model code and UI code, but you can also use native classes

◦ You can write your UI code in C# (F#) or in declarative XAML

Xamarin.Forms◦ 5 types of pages

◦ 7 types of layouts

◦ Many controls (Views) like Button or DatePicker

◦ And also some ListView/TableView cells

◦ Two-way data binding

◦ Dependency service

◦ Navigation system

◦ Unified animation API

◦ Messaging center

◦ …

Xamarin.Forms Pages

Xamarin.Forms Layouts

Xamarin.Forms Structure

Page

Layout

Childrens

Controls LayoutsPage contains layout (in Content property) and layout have childrens which can be controls like Buttons or some others layouts

Demo #1Basic project structure

◦ Shared

◦ PCL

◦ Entry point

First page with magic button

Magic button

Xamarin.Forms MVVM/MVCFor best practice is good to follow some application development patterns like Model-View-ViewModel or Model-View-Controller

Xamarin.Forms MVVMView

◦ UI

ViewModel◦ Connect data from Model to View

◦ DataBinding (two-way)

◦ Contains event handlers and others

Model◦ Business logic

◦ Entities

◦ Facades

◦ Data (Sqlite, XML …)

Xamarin.Forms Two-Way DataBindingTwo-Way data binding is pattern where changes of some property (usually of model entity) are reflected from Binding Source to Binding Target and vice versa

Binding Target

Binding Source

Demo #2Two-way data binding

◦ Set binding on property

◦ Set binding contextLabel

Entry

Dictionary on Android don’t know Swag :/

Demo #3 – Something usefulSimple TODO list

◦ Created fully with data binding and events

◦ View – TodoPage

◦ ViewModel – TodoViewModel

◦ Model – TodoModel

Label

Entry

ListView

Add Button

Clear Button

Xamarin.Forms TODO list – last words◦ For best practice – create Task entity

◦ List of strings sucks

◦ Also ListView source can be ObservableCollection and UI will be updated automatically◦ You can skip two-way data binding and reduce code

Xamarin.Forms AnimationsEvery platform have really different Animations API

For example on iOS is following structure:◦ iOS

◦ Core Animation

◦ Core Graphics

◦ OpenGL ES

◦ GPU hardware

Xamarin.Forms AnimationsXamarin.Forms provides unified animations API for views

There are many prepared animations like ScaleTo, RotateTo, FadeTo or also you can animate view by yourself

Demo #4 - AnimationsAmazing box animations

◦ Scale, rotate and change opacity of BoxView

BoxView

Xamarin.Forms Dependency ServiceSometimes you like to access native objects of platform, for example Text-to-Speech

You can create service class in Android project with Android specific implementation and also you can create same service in iOS project

Both services will implements interface like ITextToSpeech and in shared code you can get Text-to-Speech service using DependencyService

Xamarin.Forms ConclusionXamarin.Forms contains a lot more features like Navigation system, Messaging center and others

◦ Using Xamarin.Forms you can accelerate you development process

◦ And use modern code features like async/await or LINQ

Read more about Xamarin.Forms at http://developer.xamarin.com/guides/cross-platform/xamarin-forms/

Xamarin.FormsDo you like Xamarin? Yes we like it too!

◦ We are looking for Xamarin developers for our parent company PRIA, send email to me pernica@pria.cz or to HR kariera@pria.cz

◦ Or don’t be shy and come to our offices, we have cookies ;)

Q & AIf you have more question, you can contact me on:

◦ Twitter @martindeveloper

◦ Email pernica@soulbound.cz

Thank you for your attention!