More Related Content Similar to Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin (20) Tea Light Techdays 2013 - Cross Platform Apps with .NET and Xamarin6. Performance
Objective-C
Prototyping
Animations Design
10. A framework to quickly start,
generate code and still be flexibel.
11. A framework to quickly start,
generate code and still be flexibel.
15. Base Designs
Shared Domain
MvvmCross UX
TeaLight Style
16. Generator
Base Designs
s
Shared Domain Entities
MvvmCross UX Views
TeaLight Style T4
17. Generator
Base Designs Compilers
s
Shared Domain Entities Microsoft
MvvmCross UX Views Xamarin
TeaLight Style T4 Stores
18. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
19. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
20. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
22. WinRT
Windows Windows Windows Windows
Phone Phone 7 Phone 7.5 Phone 8
Silverlight Silverlight 4 Silverlight 5
iOS
Android
23. Windows Windows Windows
WinRT
Phone 7 Phone 7.5 Phone 8
Silverlight Silverlight
iOS Android
4 5
24. Windows Windows Windows
WinRT
Phone 7 Phone 7.5 Phone 8
WinRT.Core
Silverlight Silverlight
iOS Android
4 5
25. Windows Windows Windows
WinRT
Phone 7 Phone 7.5 Phone 8
WinRT.Core Phone7.Core
Silverlight Silverlight
iOS Android
4 5
26. Windows Windows Windows
WinRT
Phone 7 Phone 7.5 Phone 8
WinRT.Core Phone7.Core Phone75.Core Phone8.Core
SL4.Core SL5.Core iOS.Core Android.Core
Silverlight Silverlight
iOS Android
4 5
27. Windows Windows Windows
WinRT
Phone 7 Phone 7.5 Phone 8
Core
Silverlight Silverlight
iOS Android
4 5
29. Portable Class Library
• 1 Project voor meerdere platformen
• Bouwt een DLL per platform
• References naar andere PCL‟s
• Subset van .NET
30. Portable Class Library
• iOS en Android ondersteuning*
• Xamarin biedt binnenkort iOS en
Android ondersteuning
• MS klein begonnen
• Verwachting: meer SDK‟s als PCL‟s
39. Project Linker
Project 1 Project 2
Class1 Class1*
Class2 Class2*
Class3 Class3*
40. Project Linker
Project 1 Project 2
Class1 Class1*
Class2 Class2*
Class3 Class3*
Class4
41. Project Linker
Project 1 Project 2
Class1 Class1*
Class2 Class2*
Class3 Class3*
Class4 Class4*
44. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
54. Model
ViewModel
WinRT.View iOS.View Android.View
55. Model
ViewModel
WinRT.View iOS.View Android.View
56. Model
ViewModel
WinRT.View iOS.View Android.View
62. Implementation
public void ShowWebPage(string url)
{
Launcher.LaunchUriAsync(new Uri(url));
}
66. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
68. Een framework om snel te starten
door code te genereren en toch
flexibel is.
71. MODEL
GENERATOR
PRODUCTS
79. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
81. UX
Business
UX
Sqlite
Business
Synchronize
Web Services
UX Azure SQL
Business
Sqlite
82. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
84. Entity
Properties
Primary
Key
String
Double
Image
Etc. Etc.
Etc.
Parent Parent Entity
85. 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>
86. 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
87. Validations
<Entity Name="Speaker">
<Validations>
<CustomValidation Name="CheckSpeaker" />
Custom
</Validations>
</Entity>
Per Entity
88. Processing
<Entity Name="Speaker">
<Processing>
Pre <PreUpdate Name="PreUpdateSpeaker" />
Pos <PostUpdate Name="PostUpdateSpeaker" />
t
</Processing>
</Entity>
Per Entity
89. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
92. Technology Text Button
<TextBox <Button
XAML Text="."/> Click="."/>
<Button
<EditText
AXML a:text="."/>
l:MvxBind="
Click ." />
button =
New
Code / EntryElement ()
UIButton
.FromType(.)
XIB
93. Type Control
Text <StringControl PropertyName=“Name”/>
Button <Button Text=“Save”/>
<TabControl>
Tabs <TabPage Text=“Header”/>
</TabControl>
94. Screen <Screen>
<Header>
Header <Header />
</Header>
Content
<Content>
<LabelControl />
<StringControl />
</Content>
<ActionBar>
Action Bar <ActionButton />
</ActionBar>
</Screen>
95. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
96. Styles
Colors
Dimensions
Resource Files
Fonts
Animations
97. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
98. Collection Services
Data
Entity Mappers
Contracts
Models
Database
View
Models
99. 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))
100. Renderer Type
Templates
s Render Method
String string Name
string Id
SpeakerEntity Speaker
{
get
{
Parent return Repository
.GetSpeaker(Id);
}
}
101. Flexibility
partial class Speakers
{
classes string FirstName;
string LastName;
Class Speaker
string FullName()
{
return FirstName + " " + LastName;
}
}
102. Flexibility partial class Speakers
partial {
classes string FirstName;
string LastName;
Generated
}
partial class Speakers
{
string FullName()
Manual {
return FirstName + " " + LastName;
}
}
103. partial class Speakers
partial functions {
void SetProperty()
{
Validate();
Definition }
partial void Validate();
}
partial class Speakers
Implementation {
partial void Validate()
{
…
}
}
104. 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>
{}
105. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
106. Control Renderer Code
<TextBlock Text="Name" />
<LabelControl new StringElement
Text="Name" /> ("Name", "Name")
<TextView
android:text="Name" />
107. Bindings Renderer Code
Text="{Binding Name}"
Text="{Name}" .Bind(this, "Text Name")
local:MvxBind="Text Name"
108. Screens Templates Renderers
Create
.xaml .cs
Read
.cs
Update
Lists .axml .cs
109. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
110. T4
Text
Template
Transformation
Toolkit
112. <#@ template language="C#" #>
Template Hello
<# string text = "World!"; #>
<#= text #>
public class Template
{
public string TransformText()
Compiled {
Template Write("Hello");
string text = "World!";
Write(text);
return GeneratedCode;
}
}
113. <#@ template language="C#" #>
Template Hello
<# string text = "World!"; #>
<#= text #>
public class Template
{
public string TransformText()
Compiled {
Template Write("Hello");
string text = "World!";
Write(text);
return GeneratedCode;
}
}
Output Hello
World!
115. <#
code string text = "World!";
#>
118. <#
if (type is string)
{
#>
if <#
public string _name;
}
#>
119. <#
foreach (string name in names)
{
#>
FOREAC <#
public string <#=name#>;
}
H #>
120. <#// A template#>
<#@ template hostSpecific="true" #>
<# string ClassName = "Customer";
string PropertyName = "Name";#>
namespace MyNameSpace
{
Standard public class <#=ClassName#>
{
Editor public string <#=PropertyName#>
{get; set;}
}
}
121. <#// A template#>
<#@ template hostSpecific="true" #>
<# string ClassName = "Customer";
string PropertyName = "Name";#>
namespace MyNameSpace
{
Tangible T4 public class <#=ClassName#>
{
Editor public string <#=PropertyName#>
{get; set;}
}
}
122. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
125. Running side by side
Enough
Emulators RAM and
Build for multiple
PC power
platforms
simultaneously
132. Xamarin
App size
Starter Free
limited
Indie $299
VS
Business $999
support
VS
Enterprise $1899
support
133. Xamarin
App size
Starter Free
limited
Indie $299
VS
Business $999
support
VS
Enterprise $1899
support
134. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
135. 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
138. Speaker entity design
<Entity Name="Speaker" >
<StringProperty Name="Name" />
<StringProperty Name="Title" />
<StringProperty Name="Company" />
<StringProperty Name="Biography" />
</Entity>
139. Speaker view design
<Screen EntityName="Speaker" >
<LabelControl Text="Name" />
<StringControl Text="{Name, Mode=TwoWay}" PropertyName="Name" />
...
</Screen>
140. 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
)
141. Generating code
public partial class SpeakerRepository :
RepositoryBase<SpeakerEntity>
{
}
Repositories
142. 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; }
}
143. 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();
...
}
144. 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 ));
}
}
}
145. 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 >
146. 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>
147. 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"),
}
};
}
}
149. Adding a property
Generate Windows
views
Expand entities
Generate entities
Generate iOs views
Expand views
Designs Conference.Core
Generate Android views
150. Generator
Base Designs Compilers Apps
s
Shared Domain Entities Microsoft Windows
MvvmCross UX Views Xamarin Android
TeaLight Style T4 Stores iOS
152. Generator
Base Designs Compilers Apps
s
<Entity Name="Speakers">
<StringProperty Name="Name" />
<DoubleProperty Name="Rate" />
<ImageProperty Name="Picture" />
</Entity>
153. Generator
Base Designs Compilers Apps
s
Templates
T4 Renderers
Flexible