tea light techdays 2013 - cross platform apps with .net and xamarin

156

Upload: jonkeda

Post on 07-May-2015

725 views

Category:

Technology


7 download

DESCRIPTION

This is a presentation on a TeaLight a framework to create cross mobile applications using .NET and Xamarin

TRANSCRIPT

Page 1: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin
Page 2: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Cross Platform Mobile Application Development met Xamarin en T4

Jermaine JongDaan JonkersMatthijs van der Veer

Page 3: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin
Page 4: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin
Page 5: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin
Page 6: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Objective-C

Prototyping

Performance

DesignAnimations

Page 7: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

TeaLight

Page 8: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

A framework to quickly start, generate code and still be flexibel.

Page 9: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

A framework to quickly start, generate code and still be flexibel.

Page 10: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

A framework to quickly start, generate code and still be flexibel.

Page 11: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

A framework to quickly start, generate code and still be flexibel.

Page 12: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

80 %

Page 13: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

MvvmCross

Page 14: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Base

Shared

MvvmCross

TeaLight

Page 15: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Base Designs

Shared

MvvmCross

TeaLight

Domain

UX

Style

Page 16: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Base DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities

Page 17: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

Base DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Page 18: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 19: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 20: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 21: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

WinRT

Windows Phone

Silverlight

iOS

Android

Page 22: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

WinRT

Windows Phone

Silverlight

iOS

Android

Silverlight 4

Silverlight 5

Windows Phone 7

Windows Phone 7.5

Windows Phone 8

Page 23: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

WinRTWindows Phone 7

Windows Phone 7.5

Silverlight 4

Windows Phone 8

iOSSilverlight

5Android

Page 24: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

WinRTWindows Phone 7

Windows Phone 7.5

Silverlight 4

Windows Phone 8

iOSSilverlight

5Android

WinRT.Core

Page 25: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

WinRTWindows Phone 7

Windows Phone 7.5

Silverlight 4

Windows Phone 8

iOSSilverlight

5Android

WinRT.CorePhone7.Cor

e

Page 26: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

WinRTWindows Phone 7

Windows Phone 7.5

Silverlight 4

Windows Phone 8

iOSSilverlight

5Android

WinRT.CorePhone7.Cor

ePhone75.Co

rePhone8.Cor

e

SL4.Core SL5.Core iOS.CoreAndroid.Cor

e

Page 27: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

WinRTWindows Phone 7

Windows Phone 7.5

Silverlight 4

Windows Phone 8

iOSSilverlight

5Android

Core

Page 28: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Portable Class Library

Page 29: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Portable Class Library• 1 Project voor meerdere

platformen• Bouwt een DLL per platform• References naar andere PCL’s• Subset van .NET

Page 30: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Portable Class Library• iOS en Android ondersteuning*• Xamarin biedt binnenkort iOS en

Android ondersteuning• MS klein begonnen• Verwachting: meer SDK’s als

PCL’s

Page 31: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

#IF• Conditional compilation• Wordt gebruikt in MvvmCross• Kleine verschillen

Page 32: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

#IFpublic void PlatformSpecific() {

#if NETFX_CORE // code for Windows 8

#else // code for other platforms

#endif

}

Page 33: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

#IF: onze ervaring• Niet veel gebruiken• Rommelige code

Page 34: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Project Linker

Page 35: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Project Linker• Oorspronkelijk voor

WPF/Silverlight• Last resort

Page 36: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Project 1

Class1

Class2

Class3

Project Linker

Page 37: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Project 1

Class1

Class2

Class3

Project 2

Project Linker

Page 38: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Project 1

Class1

Class2

Class3

Project 2

Project Linker

Page 39: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Project 1

Class1

Class2

Class3

Project 2

Class1*

Class2*

Class3*

Project Linker

Page 40: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Project 1

Class1

Class2

Class3

Project 2

Class1*

Class2*

Class3*

Project Linker

Class4

Page 41: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Project 1

Class1

Class2

Class3

Project 2

Class1*

Class2*

Class3*

Project Linker

Class4 Class4*

Page 42: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Project 1

Class1

Class2

Project 2

Class1*

Class2*

Project Linker

Page 43: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Project Linker• Oorspronkelijk voor

WPF/Silverlight• Last resort• Visual Studio 2010

• Visual Studio Gallery

Page 44: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 45: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Mvvm• Adaptatie van MVC

Page 46: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Model• Object model• Data access layer

Page 47: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

View• All UI controls

Page 48: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

ViewModel• Letterlijk ‘model of the view’• Data die je wil tonen

Page 49: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Mvvm• 1 ViewModel per View• View ‘bind’ op ViewModel

Page 50: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Mvvm Binding<TextBlock Text="M van der Veer" />

Page 51: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Mvvm Binding<TextBlock Text="{Binding Name}" />

Page 52: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

MvvmCross• Android & iOS is vaak MVC• Geen MVVM support

• Bindings voor iOS en Android!

Page 53: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Model

ViewModel

View

Page 54: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Model

ViewModel

WinRT.View iOS.View Android.View

Page 55: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Model

ViewModel

WinRT.View iOS.View Android.View

Page 56: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Model

ViewModel

WinRT.View iOS.View Android.View

Page 57: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

MvvmCross• Thin view layer• Navigatie zit in ViewModel

Page 58: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

MvvmCross• “Fat Library”– IoC Container– Value Converters– Navigatie– Plugin structuur

Page 59: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Plugins• Implementatie per platform?• En zonder #IF

Page 60: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Interfacepublic interface IMvxWebBrowserTask

{

void ShowWebPage(string url);

}

Page 61: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Implementationpublic class MvxWebBrowserTask : IMvxWebBrowserTask

{

public void ShowWebPage(string url)

{

Launcher.LaunchUriAsync(new Uri(url));

}

}

Page 62: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Implementationpublic class MvxWebBrowserTask : IMvxWebBrowserTask

{

public void ShowWebPage(string url)

{

Launcher.LaunchUriAsync(new Uri(url));

}

}

Page 63: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Usethis.RegisterServiceType

<IMvxWebBrowserTask, MvxWebBrowserTask>();

Page 64: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Useprotected void ShowWebPage(string webPage)

{

var task = this.GetService<IMvxWebBrowserTask>();

task.ShowWebPage(webPage);

}

Page 65: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Plugins• 1 PCL• 1 assembly per implementatie

Page 66: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 67: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

TeaLight

Page 68: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Een framework om snel te starten door code te genereren en toch flexibel is.

Page 69: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

MODEL

Page 70: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

MODEL

GENERATOR

Page 71: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

MODEL

GENERATOR

PRODUCTS

Page 72: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

TeaLight Foundation

Page 73: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

TeaLight Foundation• Uitbreiding op MvvmCross• Genereren– Views– ViewModels–Models– Database

Page 74: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Text Template Transformation

Toolkit

Page 75: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

T4

Page 76: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin
Page 77: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

T4 Utility Belt

Page 78: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

T4 Utility Belt• Classes en templates• Plumbing code• Controls

Page 79: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 80: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Application Design

UXDomain

Page 81: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Sqlite

Business

UX

Sqlite

Business

UX

Synchronize

Azure SQL

UX

Business

Web Services

Page 82: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 83: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Conference Data Design

SpeakerSession

Speakers Sessions

Data Design

EntityEntity Entity

Page 84: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Entity

Properties

Primary KeyString

Double

Image

Etc. Etc. Etc.

Parent EntityParent

Page 85: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

<Entity Name="Sessions">

</Entity>

<Entity Name="Speakers">

</Entity>

<Entity Name="SessionSpeakers"> <Parent ToName="Session" Name="SessionId"/> <Parent ToName="Speaker" Name="SpeakerId"/></Entity>

SpeakerSession

Sessions

Speakers

Name

Description

Speaker

Session

Name

Cost

Picture

<StringProperty Name="Name" /> <StringProperty Name="Description" />

<StringProperty Name="Name" Length="255" /> <DoubleProperty Name="Rate" /> <ImageProperty Name="Picture" />

Page 86: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Validations

Required

Maximum

Minimum

Custom

Per Property

<StringProperty Name="Name"> <RequiredValidation /></StringProperty>

<DoubleProperty Name="Rate" > <MinimumValidation Value="100"/> <MaximumValidation Value="1000"/></DoubleProperty>

<StringProperty Name="Telephone" > <CustomValidation Name="CheckNr" /></StringProperty>

Page 87: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Validations

Custom

Per Entity

<Entity Name="Speaker"> <Validations>

<CustomValidation Name="CheckSpeaker" />

</Validations></Entity>

Page 88: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Processing

Per Entity

<Entity Name="Speaker"> <Processing>

<PreUpdate Name="PreUpdateSpeaker" />

<PostUpdate Name="PostUpdateSpeaker" />

</Processing></Entity>

PrePost

Page 89: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 90: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin
Page 91: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Text Button Tabs

Page 92: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Technology Text Button

XAML

AXML

Code / XIB

<TextBox Text="."/>

<EditTexta:text="."/>

New EntryElement ()

<Button Click="."/><Button l:MvxBind=" Click ." />

button = UIButton .FromType(.)

Page 93: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Text

Button

Tabs

<StringControl PropertyName=“Name”/>

<Button Text=“Save”/>

<TabControl><TabPage Text=“Header”/>

</TabControl>

Type Control

Page 94: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Screen

Header

Content

Action Bar

<Screen>

<Header> <Header /> </Header>

<Content> <LabelControl /> <StringControl /> </Content>

<ActionBar> <ActionButton /> </ActionBar>

</Screen>

Page 95: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 96: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Styles

Colors

Dimensions

Fonts

Animations

Resource Files

Page 97: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 98: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Collection

Entity

Models

Services

Data Contracts

Mappers

View Models

Database

Page 99: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

DomainTemplate

sCode

<Entity Name="Speaker"> <String.. Name="Name" />

Collection

class SpeakerCollection : Collection<Speaker>{}

Entityclass Speaker : Entity{ string Name { get; set; }

SQL create table Speaker( Name NVARCHAR(255))

Page 100: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Templates

Renderers

String

Parent

string Name

string Id SpeakerEntity Speaker { get { return Repository .GetSpeaker(Id); }}

TypeRender Method

Page 101: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Flexibility partial

classes

Class Speaker

class Speakers{ string FirstName; string LastName;

string FullName() {

return FirstName + " " + LastName; }}

Page 102: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Flexibility partial

classesGenerated

Manual

partial class Speakers{ string FirstName; string LastName;}

partial class Speakers{ string FullName() {

return FirstName + " " + LastName; }}

Page 103: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

partial functions

Definition

Implementation

partial class Speakers{

void SetProperty(){

Validate(); }

partial void Validate();}

partial class Speakers{ partial void Validate() {

… }}

Page 104: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Base classesGenerics

class SpeakerCollection : Collection<Speaker>{}

Manual

public class Collection<T>{ void Add(T item); T this[int index] { get; set; } IList.Remove(object value);…}

Generated

Page 105: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 106: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Control

<TextBlock Text="Name" />

Renderer Code

<LabelControl Text="Name" />

<TextView android:text="Name" />

new StringElement ("Name", "Name")

Page 107: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Bindings

Text="{Binding Name}"

Renderer Code

Text="{Name}"

local:MvxBind="Text Name"

.Bind(this, "Text Name")

Page 108: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

ScreensRenderer

s

.xaml .cs

.axml .cs

.cs

Create

Read

Update

Lists

Templates

Page 109: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 110: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

T4Text

Template

Transformation

Toolkit

Page 111: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Template<#@ template language="C#" #>Hello

<# string text = "World!"; #><#= text #>

Page 112: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Template

Compiled Template

public class Template { public string TransformText() { Write("Hello"); string text = "World!"; Write(text); return GeneratedCode; } }

<#@ template language="C#" #>Hello

<# string text = "World!"; #><#= text #>

Page 113: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

<#@ template language="C#" #>Hello

<# string text = "World!"; #><#= text #>

Template

Compiled Template

Output

public class Template { public string TransformText() { Write("Hello"); string text = "World!"; Write(text); return GeneratedCode; } }

Hello World!

Page 114: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

using TeaLightV5.Foundation;

namespace MyNameSpace{}

text

Page 115: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

<#

string text = "World!";

#>

code

Page 116: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

<#=text#>value

Page 117: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

<# text#>=value

Page 118: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

<# if (type is string) {#> public string _name;<# }#>

if

Page 119: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

<# foreach (string name in names) {#> public string <#=name#>;<# }#>

FOREACH

Page 120: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

<#// A template#><#@ template hostSpecific="true" #><# string ClassName = "Customer"; string PropertyName = "Name";#>namespace MyNameSpace{ public class <#=ClassName#> { public string <#=PropertyName#>

{get; set;} }}

Standard Editor

Page 121: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

<#// A template#><#@ template hostSpecific="true" #><# string ClassName = "Customer"; string PropertyName = "Name";#>namespace MyNameSpace{ public class <#=ClassName#> { public string <#=PropertyName#>

{get; set;} }}

Tangible T4 Editor

Page 122: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 123: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Xamarin.Android

Xamarin.iOS

Page 124: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

+

+

Page 125: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Enough RAM and PC power

Emulators

Running side by side

Build for multiple platforms

simultaneously

Page 126: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Form factors

OS versions

Dimensions

Page 127: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

PerfectoMobile

http://www.perfectomobile.com

Page 128: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

PerfectoMobile

http://www.perfectomobile.com

Testing in the cloud

Page 129: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

PerfectoMobile

http://www.perfectomobile.com

Testing in the cloud

Testing on live devices

Page 130: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

App stores

Page 131: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

App stores

$99 / year $99 / year$25

Page 132: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Starter

Xamarin

Indie

Business

Enterprise

Free

$299

$999

$1899

VS support

VS support

App size limited

Page 133: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Starter

Xamarin

Indie

Business

Enterprise

Free

$299

$999

$1899

VS support

VS support

App size limited

Page 134: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 135: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Conference App

Tealight

ModelsViewModel

sUX

Business layer

Entities

Data access layer

Repositories

Conference.Core – Shared PCL

Conference.UX.WinPhone

Conference.UX.WinRT

Conference.UX. DroidPhone

Conference.UX. Touch

Page 136: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Phones

Page 137: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Building the Conference app

Page 138: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Speaker entity design

<Entity Name="Speaker" >

<StringProperty Name="Name" /> <StringProperty Name="Title" /> <StringProperty Name="Company" /> <StringProperty Name="Biography" />

</Entity>

Page 139: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

<Screen EntityName="Speaker" >

<LabelControl Text="Name" /> <StringControl Text="{Name, Mode=TwoWay}" PropertyName="Name" />

...

</Screen>

Speaker view design

Page 140: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Generating code

CREATE TABLE Speaker(

Id UNIQUEIDENTIFIER PRIMARY KEY, Name NVARCHAR(255) null, Title NVARCHAR(255) null, Company NVARCHAR(255) null, Biography NVARCHAR(255) null

)

Database

Page 141: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Generating code

Repositories

public partial class SpeakerRepository : RepositoryBase<SpeakerEntity>{

}

Page 142: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Generating codepublic partial class SpeakerEntity {

[XmlElement("Name")] public string Name { get; set; }

[XmlElement("Title")] public string Title { get; set; }

[XmlElement("Company")] public string Company { get; set; }

[XmlElement("Biography")] public string Biography { get; set; }

}

Entities

Page 143: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Generating codepublic partial class SpeakerModel : Model<SpeakerEntity { public string Name { get { return this._Name; } set { if (Name != value) { this.OnNameChanging(value); this._Name = value; this.OnNameChanged(); this.OnPropertyChanged("Name"); } } } private string _Name; partial void OnNameChanging(string value); partial void OnNameChanged();...}

Models

Page 144: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Generating codepublic class SpeakerReadEntityViewModel : ReadEntityViewModel<SpeakerModel, SpeakerEntity>{ public override ICommand ReadCommand { get { return new MvxRelayCommand(() => RequestNavigate<SpeakerReadEntityViewModel>(new SpeakerModelParameters() { Id = Data.Id })); } }

public override ICommand EditCommand { get { return new MvxRelayCommand(() => RequestNavigate<SpeakerUpdateEntityViewModel>(

new SpeakerModelParameters() { Id = Data.Id )); } } }

Viewmodels

Page 145: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

<Grid x:Name="ContentPanel" > <ScrollViewer > <StackPanel x:Name="SpeakerPanel" DataContext="{Binding Data}">

<TextBlock Text="{Binding ID}"/> <TextBlock Text="Name" /> <TextBlock Text="{Binding Name}"/> <TextBlock Text="Title"/> <TextBlock Text="{Binding Title}" /> <TextBlock Text="Company" /> <TextBlock Text="{Binding Company}" /> <TextBlock Text="Biography"/> <TextBlock x:Name="Biography" Text="{Binding Biography}" TextWrapping="Wrap" />

</StackPanel> </ScrollViewer></Grid >

Generate windows views

Page 146: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

<ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content">

<TextView android:text="Name"/> <TextView local:MvxBind="Text Data.Name" />

<TextView android:text="Title"/> <TextView local:MvxBind="Text Data.Title"/>

<TextView android:text="Company" /> <TextView local:MvxBind="Path Data.Company"/>

<TextView android:text="Biography"/> <TextView local:MvxBind="Text Data.Biography"/> </LinearLayout></ScrollView>

Generate android views

Page 147: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

public class SpeakerView: MvxTouchDialogViewController<SpeakerReadEntityViewModel> { public override void ViewDidAppear (bool animated) { base.ViewDidAppear (animated); ResetDisplay(); }

private void ResetDisplay() { this.Root = new RootElement("Speaker Info") { new Section("Contact Info") { new StringElement("ID").Bind(this, "Value Data.Id"), new StringElement("Name").Bind(this, "Value Data.Name"),

new StringElement("Title").Bind(this, "Value Data.Title"), new StringElement("Company").Bind(this, "Value Data.Company"),

} }; }}

Generate iOS views

Page 148: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Changing the Conference app

Page 149: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Conference.CoreDesigns

Adding a property

Expand entities

Generate Windows views

Expand views

Generate entities

Generate iOs views

Generate Android views

Page 150: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Shared

MvvmCross

TeaLight

Domain

UX

Style T4

Views

Entities Microsoft

Xamarin

Stores

Windows

Android

iOS

Page 151: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

MvvmCross

80%

Page 152: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

<Entity Name="Speakers">

<StringProperty Name="Name" /> <DoubleProperty Name="Rate" /> <ImageProperty Name="Picture" />

</Entity>

Page 153: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Templates

T4 Renderers

Flexible

Page 154: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Page 155: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

Compilers

AppsBase DesignsGenerato

rs

Page 156: Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin

TeaLight.Wikia.com

Thanks