View
725
Download
7
Category
Preview:
DESCRIPTION
This is a presentation on a TeaLight a framework to create cross mobile applications using .NET and Xamarin
Citation preview
Cross Platform Mobile Application Development met Xamarin en T4
Jermaine JongDaan JonkersMatthijs van der Veer
Objective-C
Prototyping
Performance
DesignAnimations
TeaLight
A framework to quickly start, generate code and still be flexibel.
A framework to quickly start, generate code and still be flexibel.
A framework to quickly start, generate code and still be flexibel.
A framework to quickly start, generate code and still be flexibel.
80 %
MvvmCross
Base
Shared
MvvmCross
TeaLight
Base Designs
Shared
MvvmCross
TeaLight
Domain
UX
Style
Base DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities
Compilers
Base DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
WinRT
Windows Phone
Silverlight
iOS
Android
WinRT
Windows Phone
Silverlight
iOS
Android
Silverlight 4
Silverlight 5
Windows Phone 7
Windows Phone 7.5
Windows Phone 8
WinRTWindows Phone 7
Windows Phone 7.5
Silverlight 4
Windows Phone 8
iOSSilverlight
5Android
WinRTWindows Phone 7
Windows Phone 7.5
Silverlight 4
Windows Phone 8
iOSSilverlight
5Android
WinRT.Core
WinRTWindows Phone 7
Windows Phone 7.5
Silverlight 4
Windows Phone 8
iOSSilverlight
5Android
WinRT.CorePhone7.Cor
e
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
WinRTWindows Phone 7
Windows Phone 7.5
Silverlight 4
Windows Phone 8
iOSSilverlight
5Android
Core
Portable Class Library
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
#IFpublic 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
Project Linker• Oorspronkelijk voor
WPF/Silverlight• Last resort
Project 1
Class1
Class2
Class3
Project Linker
Project 1
Class1
Class2
Class3
Project 2
Project Linker
Project 1
Class1
Class2
Class3
Project 2
Project Linker
Project 1
Class1
Class2
Class3
Project 2
Class1*
Class2*
Class3*
Project Linker
Project 1
Class1
Class2
Class3
Project 2
Class1*
Class2*
Class3*
Project Linker
Class4
Project 1
Class1
Class2
Class3
Project 2
Class1*
Class2*
Class3*
Project Linker
Class4 Class4*
Project 1
Class1
Class2
Project 2
Class1*
Class2*
Project Linker
Project Linker• Oorspronkelijk voor
WPF/Silverlight• Last resort• Visual Studio 2010
• Visual Studio Gallery
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
Mvvm• Adaptatie van MVC
Model• Object model• Data access layer
View• All UI controls
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
View
Model
ViewModel
WinRT.View iOS.View Android.View
Model
ViewModel
WinRT.View iOS.View Android.View
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
Interfacepublic interface IMvxWebBrowserTask
{
void ShowWebPage(string url);
}
Implementationpublic class MvxWebBrowserTask : IMvxWebBrowserTask
{
public void ShowWebPage(string url)
{
Launcher.LaunchUriAsync(new Uri(url));
}
}
Implementationpublic class MvxWebBrowserTask : IMvxWebBrowserTask
{
public void ShowWebPage(string url)
{
Launcher.LaunchUriAsync(new Uri(url));
}
}
Usethis.RegisterServiceType
<IMvxWebBrowserTask, MvxWebBrowserTask>();
Useprotected void ShowWebPage(string webPage)
{
var task = this.GetService<IMvxWebBrowserTask>();
task.ShowWebPage(webPage);
}
Plugins• 1 PCL• 1 assembly per implementatie
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
TeaLight
Een framework om snel te starten door code te genereren en toch flexibel is.
MODEL
MODEL
GENERATOR
MODEL
GENERATOR
PRODUCTS
TeaLight Foundation
TeaLight Foundation• Uitbreiding op MvvmCross• Genereren– Views– ViewModels–Models– Database
Text Template Transformation
Toolkit
T4
T4 Utility Belt
T4 Utility Belt• Classes en templates• Plumbing code• Controls
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
Application Design
UXDomain
Sqlite
Business
UX
Sqlite
Business
UX
Synchronize
Azure SQL
UX
Business
Web Services
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
Conference Data Design
SpeakerSession
Speakers Sessions
Data Design
EntityEntity Entity
Entity
Properties
Primary KeyString
Double
Image
Etc. Etc. Etc.
Parent EntityParent
<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" />
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>
Validations
Custom
Per Entity
<Entity Name="Speaker"> <Validations>
<CustomValidation Name="CheckSpeaker" />
</Validations></Entity>
Processing
Per Entity
<Entity Name="Speaker"> <Processing>
<PreUpdate Name="PreUpdateSpeaker" />
<PostUpdate Name="PostUpdateSpeaker" />
</Processing></Entity>
PrePost
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
Text Button Tabs
Technology Text Button
XAML
AXML
Code / XIB
<TextBox Text="."/>
<EditTexta:text="."/>
New EntryElement ()
<Button Click="."/><Button l:MvxBind=" Click ." />
button = UIButton .FromType(.)
Text
Button
Tabs
<StringControl PropertyName=“Name”/>
<Button Text=“Save”/>
<TabControl><TabPage Text=“Header”/>
</TabControl>
Type Control
Screen
Header
Content
Action Bar
<Screen>
<Header> <Header /> </Header>
<Content> <LabelControl /> <StringControl /> </Content>
<ActionBar> <ActionButton /> </ActionBar>
</Screen>
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
Styles
Colors
Dimensions
Fonts
Animations
Resource Files
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
Collection
Entity
Models
Services
Data Contracts
Mappers
View Models
Database
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))
Templates
Renderers
String
Parent
string Name
string Id SpeakerEntity Speaker { get { return Repository .GetSpeaker(Id); }}
TypeRender Method
Flexibility partial
classes
Class Speaker
class Speakers{ string FirstName; string LastName;
string FullName() {
return FirstName + " " + LastName; }}
Flexibility partial
classesGenerated
Manual
partial class Speakers{ string FirstName; string LastName;}
partial class Speakers{ string FullName() {
return FirstName + " " + LastName; }}
partial functions
Definition
Implementation
partial class Speakers{
void SetProperty(){
Validate(); }
partial void Validate();}
partial class Speakers{ partial void Validate() {
… }}
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
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
Control
<TextBlock Text="Name" />
Renderer Code
<LabelControl Text="Name" />
<TextView android:text="Name" />
new StringElement ("Name", "Name")
Bindings
Text="{Binding Name}"
Renderer Code
Text="{Name}"
local:MvxBind="Text Name"
.Bind(this, "Text Name")
ScreensRenderer
s
.xaml .cs
.axml .cs
.cs
Create
Read
Update
Lists
Templates
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
T4Text
Template
Transformation
Toolkit
Template<#@ template language="C#" #>Hello
<# string text = "World!"; #><#= text #>
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 #>
<#@ 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!
using TeaLightV5.Foundation;
namespace MyNameSpace{}
text
<#
string text = "World!";
#>
code
<#=text#>value
<# text#>=value
<# if (type is string) {#> public string _name;<# }#>
if
<# foreach (string name in names) {#> public string <#=name#>;<# }#>
FOREACH
<#// A template#><#@ template hostSpecific="true" #><# string ClassName = "Customer"; string PropertyName = "Name";#>namespace MyNameSpace{ public class <#=ClassName#> { public string <#=PropertyName#>
{get; set;} }}
Standard Editor
<#// A template#><#@ template hostSpecific="true" #><# string ClassName = "Customer"; string PropertyName = "Name";#>namespace MyNameSpace{ public class <#=ClassName#> { public string <#=PropertyName#>
{get; set;} }}
Tangible T4 Editor
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
Xamarin.Android
Xamarin.iOS
+
+
Enough RAM and PC power
Emulators
Running side by side
Build for multiple platforms
simultaneously
Form factors
OS versions
Dimensions
PerfectoMobile
http://www.perfectomobile.com
PerfectoMobile
http://www.perfectomobile.com
Testing in the cloud
PerfectoMobile
http://www.perfectomobile.com
Testing in the cloud
Testing on live devices
App stores
App stores
$99 / year $99 / year$25
Starter
Xamarin
Indie
Business
Enterprise
Free
$299
$999
$1899
VS support
VS support
App size limited
Starter
Xamarin
Indie
Business
Enterprise
Free
$299
$999
$1899
VS support
VS support
App size limited
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
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
Phones
Building the Conference app
Speaker entity design
<Entity Name="Speaker" >
<StringProperty Name="Name" /> <StringProperty Name="Title" /> <StringProperty Name="Company" /> <StringProperty Name="Biography" />
</Entity>
<Screen EntityName="Speaker" >
<LabelControl Text="Name" /> <StringControl Text="{Name, Mode=TwoWay}" PropertyName="Name" />
...
</Screen>
Speaker view design
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
Generating code
Repositories
public partial class SpeakerRepository : RepositoryBase<SpeakerEntity>{
}
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
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
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
<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
<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
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
Changing the Conference app
Conference.CoreDesigns
Adding a property
Expand entities
Generate Windows views
Expand views
Generate entities
Generate iOs views
Generate Android views
Compilers
AppsBase DesignsGenerato
rs
Shared
MvvmCross
TeaLight
Domain
UX
Style T4
Views
Entities Microsoft
Xamarin
Stores
Windows
Android
iOS
Compilers
AppsBase DesignsGenerato
rs
MvvmCross
80%
Compilers
AppsBase DesignsGenerato
rs
<Entity Name="Speakers">
<StringProperty Name="Name" /> <DoubleProperty Name="Rate" /> <ImageProperty Name="Picture" />
</Entity>
Compilers
AppsBase DesignsGenerato
rs
Templates
T4 Renderers
Flexible
Compilers
AppsBase DesignsGenerato
rs
Compilers
AppsBase DesignsGenerato
rs
TeaLight.Wikia.com
Thanks
Recommended