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

924 views
830 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
924
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Cross PlatformMobile Application Developmentmet Xamarinen T4Jermaine JongDaan JonkersMatthijs van der Veer
  2. 2. Performance Objective-C Prototyping Animations Design
  3. 3. TeaLight
  4. 4. A framework to quickly start,generate code and still be flexibel.
  5. 5. A framework to quickly start,generate code and still be flexibel.
  6. 6. A framework to quickly start,generate code and still be flexibel.
  7. 7. A framework to quickly start,generate code and still be flexibel.
  8. 8. MvvmCross
  9. 9. Base SharedMvvmCross TeaLight
  10. 10. Base Designs Shared DomainMvvmCross UX TeaLight Style
  11. 11. Generator Base Designs s Shared Domain EntitiesMvvmCross UX Views TeaLight Style T4
  12. 12. Generator Base Designs Compilers s Shared Domain Entities MicrosoftMvvmCross UX Views Xamarin TeaLight Style T4 Stores
  13. 13. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  14. 14. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  15. 15. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  16. 16. WinRTWindows PhoneSilverlight iOSAndroid
  17. 17. WinRTWindows Windows Windows Windows Phone Phone 7 Phone 7.5 Phone 8Silverlight Silverlight 4 Silverlight 5 iOSAndroid
  18. 18. Windows Windows Windows WinRT Phone 7 Phone 7.5 Phone 8Silverlight Silverlight iOS Android 4 5
  19. 19. Windows Windows Windows WinRT Phone 7 Phone 7.5 Phone 8WinRT.CoreSilverlight Silverlight iOS Android 4 5
  20. 20. Windows Windows Windows WinRT Phone 7 Phone 7.5 Phone 8WinRT.Core Phone7.CoreSilverlight Silverlight iOS Android 4 5
  21. 21. Windows Windows Windows WinRT Phone 7 Phone 7.5 Phone 8WinRT.Core Phone7.Core Phone75.Core Phone8.Core SL4.Core SL5.Core iOS.Core Android.CoreSilverlight Silverlight iOS Android 4 5
  22. 22. Windows Windows Windows WinRT Phone 7 Phone 7.5 Phone 8 CoreSilverlight Silverlight iOS Android 4 5
  23. 23. Portable Class Library
  24. 24. Portable Class Library• 1 Project voor meerdere platformen• Bouwt een DLL per platform• References naar andere PCL‟s• Subset van .NET
  25. 25. Portable Class Library• iOS en Android ondersteuning*• Xamarin biedt binnenkort iOS en Android ondersteuning• MS klein begonnen• Verwachting: meer SDK‟s als PCL‟s
  26. 26. #IF• Conditional compilation• Wordt gebruikt in MvvmCross• Kleine verschillen
  27. 27. #IFpublic void PlatformSpecific(){ #if NETFX_CORE // code for Windows 8 #else // code for other platforms #endif}
  28. 28. #IF: onze ervaring• Niet veel gebruiken• Rommelige code
  29. 29. Project Linker
  30. 30. Project Linker• Oorspronkelijk voor WPF/Silverlight• Last resort
  31. 31. Project Linker Project 1 Class1 Class2 Class3
  32. 32. Project Linker Project 1 Project 2 Class1 Class2 Class3
  33. 33. Project Linker Project 1 Project 2 Class1 Class2 Class3
  34. 34. Project Linker Project 1 Project 2 Class1 Class1* Class2 Class2* Class3 Class3*
  35. 35. Project Linker Project 1 Project 2 Class1 Class1* Class2 Class2* Class3 Class3* Class4
  36. 36. Project Linker Project 1 Project 2 Class1 Class1* Class2 Class2* Class3 Class3* Class4 Class4*
  37. 37. Project Linker Project 1 Project 2 Class1 Class1* Class2 Class2*
  38. 38. Project Linker• Oorspronkelijk voor WPF/Silverlight• Last resort• Visual Studio 2010• Visual Studio Gallery
  39. 39. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  40. 40. Mvvm• Adaptatie van MVC
  41. 41. Model• Object model• Data access layer
  42. 42. View• All UI controls
  43. 43. ViewModel• Letterlijk „model of the view‟• Data die je wil tonen
  44. 44. Mvvm• 1 ViewModel per View• View „bind‟ op ViewModel
  45. 45. Mvvm Binding<TextBlock Text="M van der Veer" />
  46. 46. Mvvm Binding<TextBlock Text="{Binding Name}" />
  47. 47. MvvmCross• Android & iOS is vaak MVC• Geen MVVM support• Bindings voor iOS en Android!
  48. 48. ModelViewModel View
  49. 49. Model ViewModelWinRT.View iOS.View Android.View
  50. 50. Model ViewModelWinRT.View iOS.View Android.View
  51. 51. Model ViewModelWinRT.View iOS.View Android.View
  52. 52. MvvmCross• Thin view layer• Navigatie zit in ViewModel
  53. 53. MvvmCross• “Fat Library” – IoC Container – Value Converters – Navigatie – Plugin structuur
  54. 54. Plugins• Implementatie per platform?• En zonder #IF
  55. 55. Interfacepublic interface IMvxWebBrowserTask{ void ShowWebPage(string url);}
  56. 56. Implementationpublic class MvxWebBrowserTask : IMvxWebBrowserTask{}
  57. 57. Implementation public void ShowWebPage(string url) { Launcher.LaunchUriAsync(new Uri(url)); }
  58. 58. Usethis.RegisterServiceType<IMvxWebBrowserTask, MvxWebBrowserTask>();
  59. 59. Useprotected void ShowWebPage(string webPage){ var task = this.GetService<IMvxWebBrowserTask>(); task.ShowWebPage(webPage);}
  60. 60. Plugins• 1 PCL• 1 assembly per implementatie
  61. 61. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  62. 62. TeaLight
  63. 63. Een framework om snel te startendoor code te genereren en tochflexibel is.
  64. 64. MODEL
  65. 65. MODEL GENERATOR
  66. 66. MODEL GENERATOR PRODUCTS
  67. 67. TeaLight Foundation
  68. 68. TeaLight Foundation• Uitbreiding op MvvmCross• Genereren – Views – ViewModels – Models – Database
  69. 69. Text TemplateTransformation Toolkit
  70. 70. T4
  71. 71. T4 Utility Belt
  72. 72. T4 Utility Belt• Classes en templates• Plumbing code• Controls
  73. 73. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  74. 74. Application Design Domain UX
  75. 75. UX Business UX Sqlite Business Synchronize Web Services UX Azure SQLBusiness Sqlite
  76. 76. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  77. 77. Conference Data Design SpeakerSessio Speakers Sessions nData Design Entity Entity Entity
  78. 78. Entity Properties Primary Key String Double Image Etc. Etc. Etc. Parent Parent Entity
  79. 79. 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>
  80. 80. 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
  81. 81. Validations <Entity Name="Speaker"> <Validations> <CustomValidation Name="CheckSpeaker" /> Custom </Validations> </Entity> Per Entity
  82. 82. Processing <Entity Name="Speaker"> <Processing> Pre <PreUpdate Name="PreUpdateSpeaker" /> Pos <PostUpdate Name="PostUpdateSpeaker" /> t </Processing> </Entity> Per Entity
  83. 83. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  84. 84. Text Button Tabs
  85. 85. Technology Text Button <TextBox <Button XAML Text="."/> Click="."/> <Button <EditText AXML a:text="."/> l:MvxBind=" Click ." /> button = NewCode / EntryElement () UIButton .FromType(.)XIB
  86. 86. Type Control Text <StringControl PropertyName=“Name”/>Button <Button Text=“Save”/> <TabControl>Tabs <TabPage Text=“Header”/> </TabControl>
  87. 87. Screen <Screen> <Header>Header <Header /> </Header>Content <Content> <LabelControl /> <StringControl /> </Content> <ActionBar> Action Bar <ActionButton /> </ActionBar> </Screen>
  88. 88. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  89. 89. Styles Colors Dimensions Resource Files Fonts Animations
  90. 90. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  91. 91. Collection Services Data Entity Mappers Contracts Models Database View Models
  92. 92. 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))
  93. 93. Renderer TypeTemplates s Render Method String string Name string Id SpeakerEntity Speaker { get { Parent return Repository .GetSpeaker(Id); } }
  94. 94. Flexibility partial class Speakers {classes string FirstName; string LastName; Class Speaker string FullName() { return FirstName + " " + LastName; } }
  95. 95. Flexibility partial class Speakers partial {classes string FirstName; string LastName; Generated } partial class Speakers { string FullName() Manual { return FirstName + " " + LastName; } }
  96. 96. partial class Speakerspartial functions { void SetProperty() { Validate(); Definition } partial void Validate(); } partial class Speakers Implementation { partial void Validate() { … } }
  97. 97. 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> {}
  98. 98. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  99. 99. Control Renderer Code <TextBlock Text="Name" /><LabelControl new StringElement Text="Name" /> ("Name", "Name") <TextView android:text="Name" />
  100. 100. Bindings Renderer Code Text="{Binding Name}"Text="{Name}" .Bind(this, "Text Name") local:MvxBind="Text Name"
  101. 101. Screens Templates RenderersCreate .xaml .cs Read .csUpdate Lists .axml .cs
  102. 102. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  103. 103. T4 Text TemplateTransformation Toolkit
  104. 104. <#@ template language="C#" #>Template Hello <# string text = "World!"; #> <#= text #>
  105. 105. <#@ 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; } }
  106. 106. <#@ 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!
  107. 107. using TeaLightV5.Foundation; namespace MyNameSpacetext { }
  108. 108. <#code string text = "World!"; #>
  109. 109. value <#=text#>
  110. 110. value = <# text#>
  111. 111. <# if (type is string) { #>if <# public string _name; } #>
  112. 112. <# foreach (string name in names) { #>FOREAC <# public string <#=name#>; }H #>
  113. 113. <#// A template#> <#@ template hostSpecific="true" #> <# string ClassName = "Customer"; string PropertyName = "Name";#> namespace MyNameSpace {Standard public class <#=ClassName#> {Editor public string <#=PropertyName#> {get; set;} } }
  114. 114. <#// A template#> <#@ template hostSpecific="true" #> <# string ClassName = "Customer"; string PropertyName = "Name";#> namespace MyNameSpace {Tangible T4 public class <#=ClassName#> {Editor public string <#=PropertyName#> {get; set;} } }
  115. 115. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  116. 116. Xamarin.Android Xamarin.iOS
  117. 117. ++
  118. 118. Running side by side EnoughEmulators RAM and Build for multiple PC power platforms simultaneously
  119. 119. Form factorsOS versionsDimensions
  120. 120. PerfectoMobilehttp://www.perfectomobile.com
  121. 121. PerfectoMobilehttp://www.perfectomobile.com Testing in the cloud
  122. 122. PerfectoMobilehttp://www.perfectomobile.com Testing in the cloud Testing on live devices
  123. 123. App stores
  124. 124. App stores$99 / year $25 $99 / year
  125. 125. Xamarin App size Starter Free limited Indie $299 VSBusiness $999 support VSEnterprise $1899 support
  126. 126. Xamarin App size Starter Free limited Indie $299 VSBusiness $999 support VSEnterprise $1899 support
  127. 127. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  128. 128. Conference AppConference.UX. Conference.UX. Conference.UX. Conference.UX. WinPhone WinRT DroidPhone TouchConference.Core – Shared PCL U Models ViewModels X Business Entities layer Data access Repositories layer Tealight
  129. 129. Phones
  130. 130. Building the Conference app
  131. 131. Speaker entity design<Entity Name="Speaker" > <StringProperty Name="Name" /> <StringProperty Name="Title" /> <StringProperty Name="Company" /> <StringProperty Name="Biography" /></Entity>
  132. 132. Speaker view design<Screen EntityName="Speaker" > <LabelControl Text="Name" /> <StringControl Text="{Name, Mode=TwoWay}" PropertyName="Name" /> ...</Screen>
  133. 133. 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 )
  134. 134. Generating code public partial class SpeakerRepository : RepositoryBase<SpeakerEntity> { } Repositories
  135. 135. 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; } }
  136. 136. public partial class SpeakerModel : Model<SpeakerEntityGenerating 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(); ... }
  137. 137. 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 )); } } }
  138. 138. 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 >
  139. 139. 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>
  140. 140. Generate iOS viewspublic 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"), } }; }}
  141. 141. Changing the Conference app
  142. 142. Adding a property Generate Windows viewsExpand entities Generate entities Generate iOs viewsExpand views Designs Conference.Core Generate Android views
  143. 143. Generator Base Designs Compilers Apps s Shared Domain Entities Microsoft WindowsMvvmCross UX Views Xamarin Android TeaLight Style T4 Stores iOS
  144. 144. GeneratorBase Designs Compilers Apps s MvvmCross 80
  145. 145. GeneratorBase Designs Compilers Apps s <Entity Name="Speakers"> <StringProperty Name="Name" /> <DoubleProperty Name="Rate" /> <ImageProperty Name="Picture" /> </Entity>
  146. 146. GeneratorBase Designs Compilers Apps s TemplatesT4 Renderers Flexible
  147. 147. GeneratorBase Designs Compilers Apps s
  148. 148. GeneratorBase Designs Compilers Apps s
  149. 149. ThanksTeaLight.Wikia.com

×