Cross Platform Mobile App Development with Xamarin and TeaLight

Cross Platform
Mobile Application Development
met Xamarin
en T4
Jermaine Jong
Daan Jonkers
Matthijs van der Veer

Performance
Objective-C

Prototyping
Animations Design

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

Base

Shared

MvvmCross

TeaLight

Base Designs

Shared Domain

MvvmCross UX

TeaLight Style

Generator
Base Designs
s

Shared Domain Entities

MvvmCross UX Views

TeaLight Style T4

Generator
Base Designs Compilers
s

Shared Domain Entities Microsoft

MvvmCross UX Views Xamarin

TeaLight Style T4 Stores

Generator
Base Designs Compilers Apps
s

Shared Domain Entities Microsoft Windows

MvvmCross UX Views Xamarin Android

TeaLight Style T4 Stores iOS

WinRT

Windows
Phone

Silverlight

iOS

Android

WinRT

Windows Windows Windows Windows
Phone Phone 7 Phone 7.5 Phone 8

Silverlight Silverlight 4 Silverlight 5

iOS

Android

Windows Windows Windows
WinRT
Phone 7 Phone 7.5 Phone 8

Silverlight Silverlight
iOS Android
4 5

WinRT

WinRT.Core

iOS Android
4 5

WinRT

WinRT.Core Phone7.Core

iOS Android
4 5

WinRT

WinRT.Core Phone7.Core Phone75.Core Phone8.Core

SL4.Core SL5.Core iOS.Core Android.Core

iOS Android
4 5

WinRT

Core

iOS Android
4 5

Portable Class Library
• 1 Project voor meerdere platformen
• Bouwt een DLL per platform
• References naar andere PCL‟s
• Subset van .NET

Portable Class Library
• iOS en Android ondersteuning*
• Xamarin biedt binnenkort iOS en
Android ondersteuning
• MS klein begonnen
• Verwachting: meer SDK‟s als PCL‟s

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

#IF
public void PlatformSpecific()
{
#if NETFX_CORE
// code for Windows 8
#else
// code for other platforms
#endif
}

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

Project Linker
• Oorspronkelijk voor WPF/Silverlight
• Last resort

Project Linker
Project 1

Class1

Class2

Class3

Project Linker
Project 1 Project 2

Class1

Class2

Class3

Project Linker
Project 1 Project 2

Class1 Class1*

Class2 Class2*

Class3 Class3*

Project Linker
Project 1 Project 2

Class1 Class1*

Class2 Class2*

Class3 Class3*

Class4

Project Linker
Project 1 Project 2

Class1 Class1*

Class2 Class2*

Class3 Class3*

Class4 Class4*

Project Linker
Project 1 Project 2

Class1 Class1*

Class2 Class2*

Project Linker
• Oorspronkelijk voor WPF/Silverlight
• Last resort
• Visual Studio 2010

• Visual Studio Gallery

Model
• Object model
• Data access layer

ViewModel
• Letterlijk „model of the view‟
• Data die je wil tonen

Mvvm
• 1 ViewModel per View
• View „bind‟ op ViewModel

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

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

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

• Bindings voor iOS en Android!

Model

ViewModel

WinRT.View iOS.View Android.View

MvvmCross
• Thin view layer
• Navigatie zit in ViewModel

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

Plugins
• Implementatie per platform?
• En zonder #IF

Interface
public interface IMvxWebBrowserTask
{
void ShowWebPage(string url);
}

Implementation
public class MvxWebBrowserTask : IMvxWebBrowserTask
{

}

Implementation

public void ShowWebPage(string url)
{
Launcher.LaunchUriAsync(new Uri(url));
}

Use
this.RegisterServiceType
<IMvxWebBrowserTask, MvxWebBrowserTask>();

Use
protected void ShowWebPage(string webPage)
{
var task = this.GetService<IMvxWebBrowserTask>();
task.ShowWebPage(webPage);
}

Plugins
• 1 PCL
• 1 assembly per implementatie

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

MODEL

GENERATOR

PRODUCTS

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

Text Template
Transformation Toolkit

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

Application Design

Domain UX

UX

Business
UX
Sqlite
Business
Synchronize
Web Services
UX Azure SQL

Business

Sqlite

Conference Data Design
SpeakerSessio
Speakers Sessions
n

Data Design

Entity Entity Entity

Entity

Properties

Primary
Key
String
Double
Image
Etc. Etc.
Etc.
Parent Parent Entity

Name <Entity Name="Sessions">
<StringProperty Name="Name" />
Sessions Descriptio <StringProperty Name="Description" />
n </Entity>

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

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

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

Minimum <DoubleProperty Name="Rate" >
<MinimumValidation Value="100"/>
Maximum <MaximumValidation Value="1000"/>
</DoubleProperty>
Custom
<StringProperty Name="Telephone" >
<CustomValidation Name="CheckNr" />
</StringProperty>

Per Property

Validations

<Entity Name="Speaker">
<Validations>

<CustomValidation Name="CheckSpeaker" />
Custom
</Validations>
</Entity>

Per Entity

Processing

<Entity Name="Speaker">
<Processing>

Pre <PreUpdate Name="PreUpdateSpeaker" />
Pos <PostUpdate Name="PostUpdateSpeaker" />
t
</Processing>
</Entity>
Per Entity

Technology Text Button

<TextBox <Button
XAML Text="."/> Click="."/>

<Button
<EditText
AXML a:text="."/>
l:MvxBind="
Click ." />

button =
New
Code / EntryElement ()
UIButton
.FromType(.)
XIB

Type Control

Text <StringControl PropertyName=“Name”/>

Button <Button Text=“Save”/>

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

Screen <Screen>

<Header>
Header <Header />
</Header>

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

<ActionBar>
Action Bar <ActionButton />
</ActionBar>

</Screen>

Styles

Colors

Dimensions
Resource Files
Fonts

Animations

Collection Services

Data
Entity Mappers
Contracts

Models
Database
View
Models

Domain Templates Code

class SpeakerCollection
<Entity Name="Speaker"> : Collection<Speaker>
<String.. Name="Name" /> Collection {}

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

create table Speaker(
SQL Name NVARCHAR(255))

Renderer Type
Templates
s Render Method

String string Name

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

Flexibility
partial class Speakers
{
classes string FirstName;
string LastName;

Class Speaker
string FullName()
{
return FirstName + " " + LastName;
}
}

Flexibility partial class Speakers
partial {
classes string FirstName;
string LastName;
Generated
}

{
string FullName()
Manual {
return FirstName + " " + LastName;
}
}

partial functions {
void SetProperty()
{
Validate();
Definition }

partial void Validate();
}

Implementation {
partial void Validate()
{
…
}
}

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

class SpeakerCollection
Generated : Collection<Speaker>
{}

Control Renderer Code

<TextBlock Text="Name" />

<LabelControl new StringElement
Text="Name" /> ("Name", "Name")

<TextView
android:text="Name" />

Bindings Renderer Code

Text="{Binding Name}"

Text="{Name}" .Bind(this, "Text Name")

local:MvxBind="Text Name"

Screens Templates Renderers

Create
.xaml .cs

Read
.cs
Update

Lists .axml .cs

T4
Text
Template
Transformation
Toolkit

<#@ template language="C#" #>
Template Hello
<# string text = "World!"; #>
<#= text #>

Template Hello
<#= text #>

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

Template Hello
<#= text #>

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

Output Hello
World!

using TeaLightV5.Foundation;

namespace MyNameSpace
text {
}

<#

code string text = "World!";

#>

<#
if (type is string)
{
#>

if <#
public string _name;

}
#>

<#
foreach (string name in names)
{
#>

FOREAC <#
public string <#=name#>;

}
H #>

<#// A template#>
<#@ template hostSpecific="true" #>
<# string ClassName = "Customer";
string PropertyName = "Name";#>
{
Standard public class <#=ClassName#>
{
Editor public string <#=PropertyName#>
{get; set;}
}
}

<#// A template#>
<#@ template hostSpecific="true" #>
<# string ClassName = "Customer";
string PropertyName = "Name";#>
{
Tangible T4 public class <#=ClassName#>
{
Editor public string <#=PropertyName#>
{get; set;}
}
}

Xamarin.Android

Xamarin.iOS

Running side by side
Enough
Emulators RAM and
Build for multiple
PC power
platforms
simultaneously

Form factors

OS versions

Dimensions

PerfectoMobile
http://www.perfectomobile.com

PerfectoMobile

Testing in the cloud

PerfectoMobile

Testing in the cloud

Testing on live devices

App stores

$99 / year $25 $99 / year

Xamarin
App size
Starter Free
limited

Indie $299

VS
Business $999
support
VS
Enterprise $1899
support

Conference App

Conference.UX. Conference.UX. Conference.UX. Conference.UX.
WinPhone WinRT DroidPhone Touch

Conference.Core – Shared PCL
U
Models ViewModels
X
Business
Entities
layer
Data access
Repositories
layer

Tealight

Speaker entity design

<Entity Name="Speaker" >

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

</Entity>

Speaker view design

<Screen EntityName="Speaker" >

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

...

</Screen>

Generating code

CREATE TABLE Speaker
(

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

)

Generating code

public partial class SpeakerRepository :
RepositoryBase<SpeakerEntity>
{

}
Repositories

Generating code
public partial class SpeakerEntity
{

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

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

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

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

}

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

public class SpeakerReadEntityViewModel
: ReadEntityViewModel<SpeakerModel, SpeakerEntity>
Generating code {

public override ICommand ReadCommand
{
get
{
return new MvxRelayCommand(() =>
RequestNavigate<SpeakerReadEntityViewModel>(new
SpeakerModelParameters() { Id = Data.Id }));
}
}
Viewmodels public override ICommand EditCommand
{
get
{
return new MvxRelayCommand(() =>
RequestNavigate<SpeakerUpdateEntityViewModel>(
new SpeakerModelParameters() { Id = Data.Id ));
}
}
}

Generate windows views

<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 android views

<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 iOS views
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"),
}
};
}
}

Adding a property
Generate Windows
views

Expand entities

Generate entities
Generate iOs views
Expand views

Designs Conference.Core
Generate Android views

Generator
s

MvvmCross

80

Generator
s

<Entity Name="Speakers">

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

</Entity>

Generator
s

Templates

T4 Renderers
Flexible

Generator
s

Cross Platform Mobile App Development with Xamarin and TeaLight

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Cross Platform Mobile App Development with Xamarin and TeaLight

Semelhante a Cross Platform Mobile App Development with Xamarin and TeaLight (20)

Último

Último (20)

Cross Platform Mobile App Development with Xamarin and TeaLight