tutors Xamarin programming What is Xamarin Creating UI-apps with XAML Accessing remote data Different devices and capabilities

Transcription

1 Xamarin programming What is Xamarin Creating UI-apps with XAML Accessing remote data Different devices and capabilities

2 Topics Xamarin overview Cross-platform development Xamarin features Architecture Getting started Hello world with Xamarin Content Page Basic components Application class Application lifecycle Using XAML Basic constructs Data binding MVVM -model Bindable properties Attached properties Using styles Templates Trigers Ui-techniques Implementing navigation Effects Localization Native views Other features Using files Using SQLite Dependency service Messaging center Accessing cloud Consuming SOAP Consuming REST Azure integration Extra Graphics Accessing Camera Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 2

3 Xamarin Overview Cross-platform development Xamarin features Architecture

4 Cross-platform development Mobile development for different platforms may be tedious Different features Different hardware Different programming languages Even when pretty much the same concepts exist on all platforms This is where Xamarin comes in Xamarin offers an abstraction layer on top of different mobile platforms And uniform API to build applications for all devices Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 4

5 Xamarin features Support for ios, Android and Windows Phone (UWA) Depending on the solution most of the code should be shared between platforms Bindings to native API Platform dependent API can be accessed when needed Development is done with Visual Studio and C# Using subset of.net base classes (Mono.Android.dll, MonoTouch.dll) Xamarin.Forms Library for creating cross-platform UI SkiaSharp 2D-graphics Based on Google s Skia-library used on Android and Chrome UrhoSharp 3D-graphics engine Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 5

6 Xamarin-solution In your solution you will have a project for each platform you target And separate project for shared code Either a shared project from where the files are just compiled into the platform specific binaries Or actual Portable Class Library (PCL) Most of your code should go to the shared-code project UI: Xaml and code behind Occasionally you might need some platform-specific features All general logic (BL) Most of the data-access Occasionally you might need some platform-specific features Some of the device access technologies are abstracted by Xamarin, but you also might need to use some device specific APIs Even simple stuff like file access is not uniform for all device types Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 6

7 Word about mobile development When building end user applications for PC-users you don t typically worry about running out of system resources Performant processors 4-16GB memory that is extended by virtual memory technology to virtually unlimited amount (disk-file extends the physical RAM) Now you are kind of building an embedded application Less performant processors Less memory Less storage You will have to implement you application so that it doesn t steal the resources from other applications Favor non-blocking asynchronous methods Use minimum amount of memory Release resources when you are not running in foreground You cannot expect to have gigabytes of storage available Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 7

8 Getting started Hello World Content page and basic components Application class Application lifecycle

9 Hello world Project creation Project type: Blank App, Master Detail UI Technology: Xamarin.Forms, Native Code Sharing Strategy: Shared Project, Portable Class Library Creates a solution with four projects Root (What-ever you named your solution) Root.Android Root.iOS Root.UWP Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 9

10 Application class Reads the XAML-definitions at InitializeComponent Sets the MainPage Provides the lifecycle methods public partial class App : Application public static List<String> Events = new List<string>(); public App () <StackLayout> InitializeComponent(); <Label Text="Lifecycle events" /> MainPage = new App2.MainPage(); <ListView ItemsSource="x:Static local:app.events" /> </StackLayout> protected override void OnStart () Events.Add("Started " + DateTime.Now.ToShortTimeString()); protected override void OnSleep () Events.Add("Sleep " + DateTime.Now.ToShortTimeString()); protected override void OnResume () Events.Add("Resume " + DateTime.Now.ToShortTimeString()); Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 10

11 Application lifecycle Xamarin.Forms hides the device and OS-specific states We just catch the Sleep and Resume events If you need to catch more precise lifecycle events you need to study the platform specific libraries LeavingBackground Running in Foreground EnteringBackground Launch Running in Background Running in Background Suspended Resuming Suspending Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 11

12 So where is the main? Different entry-points for different platforms ios Main.cs and especially AppDelegate.cs Android MainActivity.cs UWP App.xaml and App.xaml.cs declare the application class Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 12

13 Main-page May be one of supperted page-types ContentPage MasterDetailPage NavigationPage TabbedPage TemplatedPage CarouselPage ContentPage is easiest to get started with Other page-types offer behaviour as their names indicate Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 13

14 Using ContentPage ContentPage can only hold one child The child held on ContentPage is very often a container (a Layout) Layouts provide different means for positioning items ScrollView Frame StackLayout AbsoluteLayout RelativeLayout GridLayout TemplatedView ContentView ContentPresenter StackLayout is perhaps one of the easiest to get started with Items are placed on top of each other (or side by side) Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 14

15 Basic components, the views Despite the name, the views are not something that fill the entire screen. They are the basic building blocks of the UI, the components ActivityIndicator BoxView Button DatePicker Editor Entry Image Label ListView OpenGLView Picker ProgressBar SearchBar Stepper Switch TableView TimePicker WebView Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 15

16 Exercise - Hello world Create the Xamarin.Forms -application CourseApp Study the solution items Especially the CourseApp-project App.xaml (+cs) MainPage.xaml (+cs) The CourseApp.Android will be the Active Project Launch the application in the emulator Or device if you have one attached Modify the MainPage It should hold a StackLayout That in turn holds a Label and button Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 16

17 Events Event handling is quite straight-forward Event is described in XAML, the handler is implemented to Page-class Notice the x:name-attribute for the components MainPage.xaml <StackLayout> <Label x:name="titletext" Text="Welcome to Xamarin Forms!" /> <Button x:name= Greet" Text="Calculator Clicked= Greet_Clicked" /> </StackLayout> private void Greet_Clicked(object sender, EventArgs e) TitleText.Text = "From here to eternity"; Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 17

18 Getting started with NavigationPage Just wrap the MainPage in App-constructor with NavigationPage MainPage = new NavigationPage(new App1.MainPage()); Now you may implement event handlers to push items into navigation stack Or pop items to go back to previous page Notice that navigation is implemented in asynchronous manner It might take some time before the new page becomes initialized Navigation causes OnDisappearing and OnAppearing calls to the pages affected async private void Navigate_Clicked(object sender, EventArgs e) await Navigation.PushAsync(new SecondPage()); Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 18

19 Exercise Implement a new ContentPage EventsCalculator Holds two Entry-views, a Button and Label for Result When the button is clicked display the sum of figures entered into the Entry-fields in the Result-field Navigate to the Calculator from the MainPage Add exception handling Add some attributes to the Entry-fields Keyboard="Numeric" Placeholder="Figure1" Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 19

20 Using XAML UI-patterns Basic XAML-techniques MVVM and Databinding

21 UI-patterns Model-View-Controller Decouples the user interface from the data model Most suitable for Web development Creates Model Controller Action Uses Selects View Model-View-Presenter Presenter Evolves the MVC pattern for event-driven applications Notify Update Action Update Most suitable for forms-over-data development Introduces databinding Model Databinding View Model-View-ViewModel Evolves from the MVP pattern Very commonly used now-a-days More loosely coupled, very flexible Notify Model ViewModel Update Binding Commands Notify View Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 21

22 MVVM - View, Binder and ViewModel View (UI) Binder (xaml) ViewModel Model The View CodeBehind (Page-class) MVVM is a pattern created by Microsoft especially for WPF-applications Now-a-days used on other platforms also Like any pattern can actually be implemented in many ways The key idea is the abstraction of data- and command-binding to xaml Basis for WPF-, UWA and Xamarin-programming Deep understanding of xaml and binding mechanisms provided by it are needed ViewModel provides the data to the view in format it is easily used in the ui: Mediator, Adapter Objects should/could implement INotifyPropertyChanged Collections should/could implement INotifyCollectionChanged (or inherit ObservableCollection) CodeBehind may implement UI-logic associated with the view ViewModel also may contain logic, but it should be view -independent Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 22

23 MVVM - ViewModel and Model View ViewModel Mediator DTO DTO DTO Runtime snapshot of the model DAO DAO DAO Abstraction of storage Storage Persistent, Valid representation of model THERE IS NOT JUST ONE STRAIGHT-FORWARD, ALWAYS TO USE SOLUTION At runtime the model is represented by collection of objects holding the data application is to maintain Some abstraction is needed on how the model is generated Factories, Repositories If data is stored into a database or available through web services DAO-pattern is very convenient The ViewModel shouldn t create the model-objects but ask them from a third-party And most likely we end up with having Data Transfer Objects (Value Objects) holding the data The ViewModel requests data from DAO-objects getting multiple DTOs ViewModel then constructs (or operates as) mediator providing services that combine the manipulation of otherwise unrelated DTOs Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 23

24 Role of XAML The XAML describes the view How should it look like The XAML also describes the databinding What data is presented, how it is presented The XAML also describes event handling OnClick etc, View-specific actions The XAML also describes commanding Application wide and ViewModel -related actions The XAML can also describe some behaviors for the view Animations are a good example Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 24

25 Describing the UI The XAML is used to describe the UI We need the root-element And quite a few XML-namespaces declared And we describe the UI for the root element Calculator.xaml <?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns=" xmlns:x=" x:class="uidemos.calculator"> <ContentPage.Content> <StackLayout> <Label Text="Event-based Calculator!" /> <Entry x:name="figure1" Keyboard="Numeric" Placeholder="Figure1" /> <Entry x:name="figure2" Keyboard="Numeric" Placeholder="Figure2" /> <Button Text="Calculate" Clicked="Calculate_Clicked" /> <Entry x:name="result" /> </StackLayout> </ContentPage.Content> </ContentPage> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 25

26 Databinding Databinding is one of the strongest features available to us Sadly sometimes ignored and misused We have Binding target => Attribute of an element is described with binding Binding source => Property of an object providing the data Type conversion, in many cases automatic Two-way, One-way <StackLayout> <StackLayout Orientation="Horizontal" HorizontalOptions="Fill"> <Label Text="Value is" HorizontalOptions="FillAndExpand"/> <Entry x:name="value1" BindingContext="x:Reference Slider1" Keyboard="Numeric" HorizontalOptions="FillAndExpand" Text="Binding Value,Mode=TwoWay" /> </StackLayout> <Slider x:name="slider1" Minimum="0" Maximum="20" Value="10" /> <Label x:name="value2" BindingContext="x:Reference Slider2" Text="Binding Value, Mode=OneWay, StringFormat='The value is 0:F1'" /> <Slider x:name="slider2" Minimum="0" Maximum="20" Value="10" /> <StackLayout Orientation="Horizontal" HorizontalOptions="Fill"> <Label Text="Enter value" HorizontalOptions="FillAndExpand"/> <Entry x:name="value3" BindingContext="x:Reference Slider3" Keyboard="Numeric" HorizontalOptions="FillAndExpand" Text="Binding Value,Mode=OneWayToSource" /> </StackLayout> <Slider x:name="slider3" Minimum="0" Maximum="20" Value="10" /> </StackLayout> You can use databinding almost to any attribute of any element on Xaml to any property of any object in the application. Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 26

27 Setting BindingContext to custom object Often you should create a new object-type to contain data for your ui (the ViewModel) Instead of adding huge number of properties to you Window-class Then you can set the BindingContext-property to point to a new object of your class Typically for the entire page But can also be set separately for each container Of course the object can also be instantiated and the BindingContext be set in the constructor class MyData public string data get; set; public MyData() data = "Hello"; <!-- local namespace --> <ContentPage.BindingContext> <local:mydata /> </ContentPage.BindingContext> OR public MyPage() BindingContext=new MyData(); InitializeComponent(); Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 27

28 Notifications To reflect changes of data to UI the model objects need to provide a PropertyChanged-event MyData.cs class MyData : INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; private string data = ""; public string Data get return data; set data = value; if (PropertyChanged!=null) PropertyChanged(this, new PropertyChangedEventArgs( Data")); Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 28

29 Exercise - MVVM Calculator Create a new page BindingCalculator Similar UI to the previous calculator but without the button Add navigation to the new Calculator from the MainPage Create CalculatorVM-class holding Figure1, Figure2 and Result-properties Implement the class in such a manner that you may use it as a ViewModel for your calculator Describe Calculation object as BindingContext for the CalculatorWithModel Use databinding in the xaml to the properties of CalculatorVM object So in this exercise you should NOT touch BindingCalculator.xaml.cs at all Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 29

30 Commanding Commanding offers more separation on object invoking the command and object executing the command Several sources for single action UI understands if the command can be invoked Several components know how to invoke commands Button MenuItem ToolbarItem SearchBar TextCell, ImageCell ListView TapGestureRecognizer Actions that manipulate state of ViewModel should be declared as commands Actions that manipulate the View can be handled as events Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 30

31 Command in ViewModel The ViewModel may contain properties that implement ICommand Variations exist on how to implement class DemoVM : INotifyPropertyChanged private string greeting="greeting from DemoVM"; public ICommand DoCommand get; set; public DemoVM() DoCommand = new Command( ProcessCommand, CanProcessCommand); private void ProcessCommand(object s) Greeting = s.tostring(); Different constructors available public string Greeting get return greeting; set greeting = value; (DoCommand as Command).ChangeCanExecute(); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Greeting")); Enable/disable component private bool CanProcessCommand(object o) return greeting.length > 8; <!-- BindingContext must be MyViewModel <Button Text="Execute command" --> Command="Binding DoCommand" CommandParameter="Altered by Command"/> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 31

32 Having a collection in the model Data binding can be done towards any IEnumerable How ever the UI will not automatically know if items are added, deleted or replaced in the collection INotifyCollectionChanged describes the event that should be fired when collection changes ObservableCollection is a convenience-class implementing INotyfyCollectionChanged Provides List-like operations, but doesn t implement IList Can be instantiated from any IEnumerable Easy to use, and misuse List<Person> personlist =...; ObservableCollection<Person> col=new ObservableCollection<Person>(personList); Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 32

33 How to use ObservableCollection Not all collections in the ViewModel need to be Observable, analyze your need Don t replace the collection, modify the contents Events are subscribed from a specific instance OK, clearing and then adding huge number of items is not a good idea either You can use LINQ against ObservableCollection but the returned collection is not Observable Don t modify in background thread Modifications cause events that should be processed in the main thread So quite a few design considerations. Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 33

34 Design considerations View (UI) ViewModel (BL) Model (DA) Who is responsible of creating the observables? The view requires observables so the ViewModel should provide them But not all objects need to be observable Depending on the data source the Model might readily provide observables or just plain value objects Should the model objects know when they are updated? Kind of makes us think that the ViewModel should capsulate the objects into observables, but This would lead into dublicate definition of value-objects The basic rule should be: Each tier should provide easy to use service interface to the next tier -> Simplify the work at upper levels and let them concentrate on the logic Debate exists but the authors opinion is that DA-tier should provide observables to the ViewModel Perhaps even give alternatives: GetPerson, GetObservablePerson, GetPersonList, GetObservablePersonList Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 34

35 Grid-view Grid allows somewhat precise layout of items Columns and rows <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="200" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="30" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <ResourceDictionary> <x:array x:key="somearray" Type="x:Type x:string"> <x:string>hello</x:string> <x:string>there</x:string> <x:string>how</x:string> <x:string>is</x:string> <x:string>life</x:string> </x:array> </ResourceDictionary> <Label Text="Grid and List" Grid.Row="0" Grid.ColumnSpan="2"/> <Label Text="Name" Grid.Column="0" Grid.Row="1" /> <Label Text=" " Grid.Column="0" Grid.Row="2" /> <Entry Placeholder="Name" Grid.Column="1" Grid.Row="1" /> <Entry Placeholder=" " Grid.Column="1" Grid.Row="2" /> <ListView Grid.Row="3" ItemsSource="StaticResource SomeArray" /> </Grid> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 35

36 ListView Listview is often bound to a collection of complex item List of Persons ItemTemplate can be used to declare how items are presented <ListView Grid.Row="4" Grid.ColumnSpan="2" ItemsSource="Binding Persons"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="36" /> <ColumnDefinition Width="300" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Grid.Column="0 Source="Binding Path=GenderImage" /> <Label Grid.Column="1" Text="Binding Path=Name" HorizontalTextAlignment="Start" VerticalOptions="Center"/> <Label Grid.Column="2" Text="Binding Path=Age" VerticalOptions="Center"/> </Grid> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 36

37 Exercise One more calculator: ListCalculator Describe the layout with a grid (two columns, basically Label and Entry where needed) Also Button Accept and a ListView When button is clicked the calculation should appear on the ListView Create Calculation class with properties Figure1,Figure2, Result On the ViewModel hold ObservableCollection to Calculations Bind the ListView to the ObservableCollection Use Commanding to Instruct the ViewModel to add a new Calculation to the ObservableCollection Also catch ItemTapped-event from ListView to cause SelectedCommand against ViewModel. Display data from selected calculation in the UI. Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 37

38 Gestures Gestures indicate user interaction with a component Tap Pinch Pan Gestures can be attached even to elements that don t signal events <Label FontSize="Large" Text="Simple Gesture, Tap me!"> <Label.GestureRecognizers> <TapGestureRecognizer Command="Binding LabelTappedCommand" CommandParameter="Simple tap"/> </Label.GestureRecognizers> </Label> <Label FontSize="Large" Text="Simple Gesture, Tap me twice!"> <Label.GestureRecognizers> <TapGestureRecognizer Command="Binding LabelTappedCommand" CommandParameter="Double tap" NumberOfTapsRequired="2"/> </Label.GestureRecognizers> </Label> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 38

39 Bindable properties Your custom controls may publish traditional properties You should use bindable properties instead Reduced memory footprint, if the value remains at default object specific value is not stored Value inheritance from parent elements Automatic change notifications Full support for databinding public static readonly BindableProperty TapParameterProperty = BindableProperty.Create("TapParameter", typeof(string), typeof(label), Hello ); public string TapParameter get return (string)this.getvalue(tapparameterproperty); set SetValue(TapParameterProperty, value); Property name Property type Who declares Default value Getter and Setter agains bindable property Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 39

40 Triggers Triggers apply features to UI based on the rule that launches the trigger <Entry x:name="personname" Placeholder="Try entering Tim or Tom"> <Entry.Triggers> <Trigger TargetType="Entry" Property="Text" Value="Tim"> <Setter Property="BackgroundColor" Value="Green" /> </Trigger> </Entry.Triggers> </Entry> <Button Text="Save" IsEnabled="False" > <Button.Triggers> <DataTrigger TargetType="Button" Binding="Binding Source=x:Reference PersonName, Path=Text.Length Value="3"> <Setter Property="IsEnabled" Value="True" /> </DataTrigger> <EventTrigger Event="Clicked" > <local:buttonclicktriggeraction /> </EventTrigger> </Button.Triggers> </Button> Class inherits TriggerAction<Button> and implements invoke-method. Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 40

41 Behaviours Behaviours add extended functionality to a view public class NameValidationBehavior : Behavior<Entry> protected override void OnAttachedTo(Entry entry) entry.textchanged += OnEntryTextChanged; base.onattachedto(entry); <Entry Placeholder="Enter Amy or May"> <Entry.Behaviors> <local:namevalidationbehavior /> </Entry.Behaviors> </Entry> protected override void OnDetachingFrom(Entry entry) entry.textchanged -= OnEntryTextChanged; base.ondetachingfrom(entry); void OnEntryTextChanged(object sender, TextChangedEventArgs args) Entry e = sender as Entry; bool isvalid = new string[] "Amy","May".Contains(e.Text); e.textcolor = isvalid? Color.Black : Color.White; e.backgroundcolor = isvalid? Color.White : Color.Red; Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 41

42 Attached property Attached property is a special type of Bindable Property Property is not declared in a class inheriting BindableObject as contrary to ordinary Bindable Properties Attached property may be attached to any UI-element public static class AttachedNameBehavior public static readonly BindableProperty NameBehaviorProperty = BindableProperty.CreateAttached( "NameBehaviour", typeof(bool), typeof(attachednamebehavior), false, propertychanged: OnNameBehaviorChanged); public static bool GetNameBehavior(BindableObject view) return (bool)view.getvalue(namebehaviorproperty); public static void SetNameBehavior(BindableObject view, bool value) view.setvalue(namebehaviorproperty, value);.. Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 42

43 Behaviour with attached property Completes the AttachedNameBehaviour-class demonstrated on previous page <Entry Placeholder="Enter Kim or Ken" local:attachednamebehavior.namebehavior="true" /> static void OnNameBehaviorChanged(BindableObject view, object oldvalue, object newvalue) var entry = view as Entry; if (entry == null) return; bool attachbehavior = (bool)newvalue; if (attachbehavior) entry.textchanged += OnEntryTextChanged; else entry.textchanged -= OnEntryTextChanged; static void OnEntryTextChanged(object sender, TextChangedEventArgs args) Entry e = sender as Entry; bool isvalid = new string[] "Kim", "Ken".Contains(e.Text); e.textcolor = isvalid? Color.Black : Color.White; e.backgroundcolor = isvalid? Color.White : Color.Red; Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 43

44 Converters Binding target Property Converters Binding source Property Data binding nearly always passes through a converter Integer property to a content string Implicit or explicit Sadly the Visual Studio designer is not very comfortable with the converters Using converter with data binding <TextBox x:name="textbox1" HorizontalAlignment="Left" Margin="58,181,0,0 TextWrapping="Wrap" VerticalAlignment="Top" Text="Binding Path=BirthDate, Converter=StaticResource AgeConverter" /> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 44

45 Custom converter Often the same result can be achieved by implementing a calculated property to a ViewModel But if same conversion is needed in several ViewModelobjects then custom converter can be reused Converting birthdate to age (not a complete solution) class DateToAgeConverter : IValueConverter public object Convert(object val,type target, object param, CultureInfo cult) DateTime dt = (DateTime)value; return DateTime.Now.Year - dt.year; // OK, not exact public object ConvertBack(object val, Type target, object par, CultureInfo cult) return new DateTime(DateTime.Now.Year - int.parse(value.tostring()), 1, 1); <Label Text="Binding birthday, Converter=StaticResource DateToAgeConverter" /> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 45

46 Exercise Final touch to the calculator Implement trigger that enables button if Result is non-zero Use behaviours to add validation to the entry-fields Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 46

47 Resources And Styles

48 Styles Each component has its own set of properties that control the styling of the component As in HTML+CSS you shouldn t use element specific style to huge extent Instead you should declare global style-resources to ensure uniform styling through-out the application Some typical styles-attributes include TextColor, occasionally ForegroundColor is used instead BackgroundColor FontSize FontAttributes IsVisible <Label Text="Style from own styles" TextColor="Red" FontSize="Large" FontAttributes = Bold,Italic" XAlign="End"/> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 48

49 Resources Resources are just objects reusable on several occasions Can be set of styles but other types of resources can also be declared Can be defined at Application context Page context Element context Resources may be referenced Statically: Resolved when XAML is parsed Dynamically: When resource is actually needed at runtime Should the Application declare a resource for the ViewModelobject? Most often at least partially, but can be debated Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 49

50 Resources in App.xaml All the resources that are used between views should be described in App.xaml Unless of course a view-specific instance of the resource-type is needed App.xaml <?xml version="1.0" encoding="utf-8"?> <Application xmlns=" xmlns:x=" xmlns:local="clr-namespace:uidemos" x:class="uidemos.app"> <Application.Resources> <ResourceDictionary> <Style x:key="applabel" TargetType="Label"> <Setter Property="TextColor" Value="#40C080" /> <Setter Property="Text" Value="Text comes from App-resources" /> </Style> <local:demovm x:key="demovm" /> </ResourceDictionary> </Application.Resources> </Application> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 50

51 Styles Styles can also be declared through resources For each style you declare a set of Setter that define a value for single property Again styles that are used across the views should be defined in App.xaml Both of the following are not applied When x:key is set an element may use the style by binding the Style-property to StaticResource [x:key] When x:key is not set the style is used for all elements of TargetType TargetType must always be set Styles in resources <Style TargetType="Label"> <Setter Property="FontSize" Value="Large" /> </Style> <Style x:key="warninglabel" TargetType="Label"> <Setter Property="TextColor" Value="Red" /> </Style> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 51

52 Style inheritance Problem on previous slide All labels have spefic font Except those that choose the warningbkr -style Styles can inherit definitions of other styles BasedOn-attribute Style inheritance <Style x:key="standardlabel" TargetType="Label"> <Setter Property="FontSize" Value="Large" /> </Style> <Style TargetType="Label" BasedOn="StaticResource StandardLabel"/> <Style x:key="warninglabel" TargetType="Label" BasedOn="StaticResource StandardLabel"> <Setter Property="TextColor" Value="Red" /> </Style> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 52

53 Templates Styles can also be used for describing templates for pages This is the basics for building themes <ContentPage.Resources> <ResourceDictionary> <ControlTemplate x:key="templatedview"> <Grid> <BoxView Color="#A0C0F0" VerticalOptions="FillAndExpand" /> <ContentPresenter /> <StackLayout Spacing="0,0,0,0" Padding="0,0,0,0" Orientation="Horizontal HorizontalOptions="FillAndExpand" VerticalOptions="End"> <Label Text="Copyright (c)" BackgroundColor="White VerticalTextAlignment="Center" Margin="0,0,0,0" HorizontalOptions="FillAndExpand"/> <Image Source="logo.jpg" Margin="0,0,0,0" /> <Label Text="Template demo" TextColor="White" FontSize="Large" VerticalTextAlignment="Center" HorizontalTextAlignment="End" VerticalOptions="FillAndExpand" BackgroundColor="#032E51" Margin="0,0,0,0" HorizontalOptions="FillAndExpand"/> </StackLayout> </Grid> </ControlTemplate> </ResourceDictionary> </ContentPage.Resources> <ContentView ControlTemplate="StaticResource TemplatedView"> <StackLayout VerticalOptions="CenterAndExpand"> <Label Text="Welcome to Xamarin Forms!" HorizontalOptions="Center"/> <Button Text="Some action" HorizontalOptions="Center"/> </StackLayout> </ContentView> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 53

54 Exercise Add some styles to App.xaml Use them in your Calculator Try also implementing a template for your calculator-page Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 54

55 Some Xamarin features Dependency Service Using files Messaging Center Localization Effects SQLite Native Views

56 Dependency Service Through dependency service we call native code from shared code We need Interface that describes platform specific services Implementation of interface on each platform Dependency service itself provides a factory-method for querying the implementation This code goes into Android-project Attribute at namespace-level [assembly: Xamarin.Forms.Dependency(typeof(UIDemos.Droid.DroidDependencies))] namespace UIDemos.Droid class DroidDependencies : IMyDependencies public string PlatformGreeting() return "Hello from Android"; IMyDependencies service = DependencyService.Get<IMyDependencies>(); string greet=service.platformgreeting(); IMyDependecies is described in shared code Usage in shared code Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 56

57 Working with files Files that are packaged into assembly may be accessed in the shared code through reflection-technique For other files we need to rely on platform specific APIs Android and ios support System.io quire widely UWP has its own mechanisms Application working directory string documentspath = System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal); public IEnumerable<string> FileList() try return Directory.EnumerateFiles(documentsPath); catch(exception ex) return new List<String> ex.message, documentspath ; public string ReadText(string fn) return File.ReadAllText(documentsPath+"/"+fn); public string SaveText(string fn, string data) try File.WriteAllText(documentsPath + "/" + fn, data); Implementation goes into a dependency service return "Saved"; catch(exception ex) return ex.message; Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 57

58 Messaging center Messaging center provides high abstraction between message senders and providers For each sent message there is the sender type and message name Messages are subscribed based on those factors for example two ViewModel -objects can communicate if they know the types of each other (no need to find object references) You could also create a separate Messanger -class that sends the messages class Messanger public void Send(string msg,string data) MessagingCenter.Send<Messanger, string>(this, msg, data); // We may send messages new Messanger().Send("GlobalMsg", "Global climate changes"); // And elsewhere we subscribe them MessagingCenter.Subscribe<Messanger, string>(this, "GlobalMsg", (sender, args) => /* process message somehow */); Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 58

59 Localization Need of localization might be one of deciding factors on which code sharing option to use Localization is most easily accomplished if PCL-method is used Also localization is most easily accomplished if you implement it into your project from beginning Translations Number formats Date formats Basis for localization is to identify the Culture (locale) of the user Implement.resx-files for translations against all supported cultures Might also need a helper class to load the translations Great (exhaustive) guide is available at: Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 59

60 Effects The intention of effects is to extend the basic behavior provided by Xamarin.Forms to some extend with platform specific implementation Effect-class is separately implemented to all platform projects And of course you need to understand what platform specific control is used and how to modify its behaviour The effect may be attached to a view in Xaml [assembly:resolutiongroupname ("Codetutors")] [assembly:exporteffect (typeof(myeffect), "MyEffect")] namespace UIDemos.Droid public class MyEffect : PlatformEffect public override void OnAttached()... public override void OnDetached()... protected override void OnElementPropertyChanged(PropertyChangedEventArgs args) /* Actual behaviour here * public class MyEffect : RoutingEffect public MyEffect() : base("codetutors.myeffect") <Entry.Effects> <local:myeffect /> </Entry.Effects> Shared code Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 60

61 Native views The set of Views provided by Xamarin.Forms is not extensive On each platform more advanced controls are available You just need to add a platform specific xml-namespace to the Xaml And disable Xaml-compilation If you truly target multiple platforms the UI-design might become complicated And of course you also need to study the platform specific components available // [XamlCompilation(XamlCompilationOptions.Compile)] public partial class NativeDemo : ContentPage... xmlns:androidwidget="clr-namespace:android.widget;assembly=mono.android;targetplatform=android" xmlns:formsandroid="clr-namespace:xamarin.forms;assembly=xamarin.forms.platform.android;targetplatform=android" <androidwidget:switch x:arguments="x:static formsandroid:forms.context" Checked="True" Text="Enable Entry?" /> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 61

62 SQLite SQLite is an embedded database solution Not a separate database engine, just a library Data is stored into a single file Supports SQL Basically a C/C++ library but bindings exist to quite a few languages SQLite for.net provides automatic ORM for entities Tables are created for entity types We save and retrieve objects In mobile you need to prepare for asynchronous operations private SQLiteAsyncConnection connection; private CalculatorDatabase(string path) connection = new SQLiteAsyncConnection(path); connection.createtableasync<calculation>().wait(); public Task<List<Calculation>> GetAll() return connection.table<calculation>().tolistasync(); public void Save(Calculation c) connection.insertasync(c); NuGet install sqlite-net-pcl Class CalculatorDatabase Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 62

63 SQLite operations Get by primary key connection.table<person>().where(i => i.id == id).firstordefaultasync(); Select statement connection.queryasync<person>("select * FROM [Person] WHERE [Gender] = Male "); Create database.insertasync(person); Update connection.updateasync(person); Delete connection.deleteasync(person); Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 63

64 Exercise Study instructor pointed CalculatorDatabase-class Use it (as basis) to save calculations on GridCalculator into a database You will need a DependencyService that provides a full path to a given file CalculatorVM constructor should read all data from database When Accept-button is clicked the calculation should be stored to the database Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 64

65 More UI-features Navigation Popups

66 Implementing navigation Designing the navigation is not an easy task How to organize the data and the views for easy and natural access? How to accomplish the above in various devices We don t (typically) use menus extensively Context menus and other types of popup menus can be used, possibly through ActionSheet Application may have some sort of navigation bar Saddly the implementation is platform specific Pages that give support to navigation NavigationPage TabbedPage Carousel MasterDetailPage Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 66

67 Tabbed page and Carousel Using a tabbed page is rather straight-forward Carousel is in fact built in similar manner <?xml version="1.0" encoding="utf-8"?> <TabbedPage xmlns=" xmlns:x=" x:class="uidemos.tabbeddemo" xmlns:local="clr-namespace:uidemos" > <local:eventscalculator Title="Calculator" /> <local:stylesdemo Title="Styles" /> <local:gesturesdemo Title="Gestures" /> </TabbedPage> Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 67

68 MasterDetail MasterDetail page combines List of items available with Menu button Page displayed when item is selected Can be used to display for example a list of persons on master and form to edit persondata on detail But in fact a self-built navigation with traditional NavigationPage might be more suitable for this It can also be used as Start-page for application Original detail displays welcome-page List contains selections for different operations Persons, Companies, Orders etc When item is selected a suitable ListView is presented <MasterDetailPage xmlns=" xmlns:x=" x:class="uidemos.masterdetaildemo" xmlns:pages="clr-namespace:uidemos"> <MasterDetailPage.BindingContext> <pages:personvm /> </MasterDetailPage.BindingContext> <MasterDetailPage.Master> <pages:masterdetaildemomaster x:name="masterpage" /> </MasterDetailPage.Master> <MasterDetailPage.Detail> <NavigationPage> <x:arguments> <pages:masterdetaildemodetail /> </x:arguments> </NavigationPage> </MasterDetailPage.Detail> </MasterDetailPage> ContentPage holding ListView of selectios Default detail-page (ContentPage) Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 68

69 MasterDetail, changing detail In the sample below the master has displayed a list of Persons Detail always shows a form to edit selected person It could as well change the page type based on the selected item on the master You could study the type of selected item and select a different page based on that private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e) Person person = e.selecteditem as Person; if (person == null) return; var page = (Page)Activator.CreateInstance(typeof(MasterDetailDemoDetail)); page.title = person.name; Detail = new NavigationPage(page); IsPresented = false; MasterPage.ListView.SelectedItem = null; (BindingContext as PersonVM).Current = person; Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 69

70 Popups Popups in general display options for the user Alerts are traditional message boxes displaying a message and giving one or two buttons to reply Yes/No, true/false ActionSheets show one or two buttons but also a list of options Return value is the string contained in the button or option Event handler for Button Clicked async void OnDetailOptions(object sender, EventArgs e) bool answer = await DisplayAlert("Question","Want to continue?", "Perhaps","Later"); string action = await DisplayActionSheet("What to do?", "Cancel", null, "Delete", "Refresh", "Save"); SelectedOption.Text = "Selected: " + action; Just a Label on the page Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 70

71 Exercise Create page BookList Displays a ListView of books And BookDetail Entries for editing a book Also create class Book Int id String title String author BookVM holding List <Book> books For the first test you may populate the list with couple books Book current=null When a book is tapped from the ListView Set the current into tapped book Change the view into BookDetail Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 71

72 Remote data Web services SOAP and XML REST and JSON Azure integration

73 Web services Services to other applications over internet with two flawors: SOAP Kind of a function calls over network, remote procedure call technology XML-document describing the method to be executed is passed to the server Server executes the requested method Response is again formatted into XML WSDL (xml) describes the interface available Well suited for application integration (EAI or B2B) REST Data manipulation over internet Uses four methods of HTTP-protocol GET to query data PUT to modify data POST to create data DELETE obviously to. The URL identififies the data item or entity to be manipulated The format in which data is presented can be choosen freely (JSON or XML) Good choice for web clients (JavaScript) and unknown client types Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 73

74 SOAP Soap client for Xamarin-application is implemented in similar manner as traditional.net-application Right-click References on Solution Explorer and Add new web-reference You need access to the wsdl of the web service Also the proxy generated is similar to traditional applications Asynchronous operations should be favored The proxy offers event-driven model for asynchronous operations BookSoapClient.BookService service = new BookSoapClient.BookService(); // Using synchronous method is bad BookSoapClient.Book book = service.getbook(1); // Now asynchronous model is based on events service.getbookcompleted += Service_GetBookCompleted; service.getbookasync(1); private void Service_GetBookCompleted(object sender, BookSoapClient.GetBookCompletedEventArgs e) BookSoapClient.Book book = e.result; Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 74

75 Consuming REST with HttpClient Consuming REST with HttpClient is rather straight-forward System.Net.Http (and System.Net.Http.Headers) must be referenced The benefit is that you work close to the protocol, you absolutely know what is happening Remember that REST is all about HTTP, you send and receive text content Often data is JSON-formatted.NET-Frameword offers (poor) JSON-manipulation classes Newtonsoft.Json is preferred library string url = " HttpClient httpclient = new HttpClient(); var uri = new Uri(url); var response = await client.getasync(uri); if (response.issuccessstatuscode) var content = await response.content.readasstringasync(); var books= JsonConvert.DeserializeObject<List<Book>>(content); NuGet Newtonsoft.Json Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 75

76 Put and Post Implementing put/post is no more complex than get/delete You need to convert your objects into string Create StringContent-object containing the data to be sent Possibly set headers to the call Make the call and read the response Book b = new Book title = "Seven brothers", author = "Kivi" ; string data=jsonconvert.serializeobject(b); StringContent sc = new StringContent(data); sc.headers.contenttype = MediaTypeHeaderValue.Parse("application/json"); var pr=await client.postasync(url, sc); string prs = await pr.content.readasstringasync(); Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 76

77 Exercise Continue with BookList/BookDetail Implement BookClient-class Async method GetBooksAsync Use HttpClient to query books from the RESTful service When Books are received use MessagingCenter to send the list of books BookVM should handle the message from BookClient and store books to the Books-collection And the ListView of course should update automatically When the Book is selected from the ListView again call BookClient Implement getasync(int id), when Book is received again a message is sent which is processed by the ViewModel to update the current Book Extra Implement PUT (Save), POST (Create) and DELETE to the BookClient Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 77

78 Authenticating Security against RESTful services can be implemented in various ways Basic authentication with fixed technical credentials Basic authentication against self implemented user database OAuth against separate identity provider Etc From the client s point of view it all comes to passing the correct Authorizationheader The problem might be how to get the correct value for the header Basic authentication is simple as demonstrated below When using OAuth you just replace Basic with Bearer and the value with a valid token provided by the identity server var request = new HttpRequestMessage() tom:verysecret RequestUri = new Uri(url), base64 encoded Method = HttpMethod.Get ; request.headers.authorization = new AuthenticationHeaderValue( Basic, dg9tonzlcnlzzwnyzxq= ); var resp = await client.sendasync(request); Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 78

79 Authenticating against Azure AD Authentication handler requires some platform-specific code Below the authenticator is implemented as a dependency-service [assembly: Xamarin.Forms.Dependency(typeof(UIDemos.Droid.Authenticator))] namespace UIDemos.Droid class Authenticator : ISecure static public Android.App.Activity MainActivity; Notice te MainActivity return ar; private string authority = " private string bookappresourceuri = " private string bookappclientid = "5d286f7e-fb77-458b-b4b5-0a2b2cc4a7ca"; private string standardredirecturi = " public async Task<AuthenticationResult> Authenticate() try AuthenticationContext ac = new AuthenticationContext(authority); AuthenticationResult ar = await ac.acquiretokenasync( bookappresourceuri, bookappclientid, new Uri(standardRedirectUri), new PlatformParameters(MainActivity)); catch (Exception ex) System.Diagnostics.Debug.WriteLine("Get Token Exception:" + ex.message); return null; Figuring out the correct values for these variables may be a struggle Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 79

80 MainActivity (Android Specific) In the Android-project MainActivity.cs, OnCreate-method you may set Authenticator.MainActivity = this; And also you will need to be able to handle the callbacks from the actual identityprovider by implementing OnActivityResult to the MainActivityclass protected override void OnActivityResult(int requestcode, Result resultcode, Intent data) base.onactivityresult(requestcode, resultcode, data); AuthenticationAgentContinuationHelper.SetAuthenticationAgentContinuationEventArgs( requestcode, resultcode, data); Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 80

81 Finally, make the call The actual call is made in a manner demonstrated earlier AuthenticationResult ar = await DependencyService.Get<ISecure>().Authenticate(); if (ar!= null) HttpClient client = new HttpClient(); string url = " var request = new HttpRequestMessage() RequestUri = new Uri(url), Method = HttpMethod.Get ; request.headers.authorization = new AuthenticationHeaderValue( ar.accesstokentype, ar.accesstoken); var resp = await client.sendasync(request); Copyright Codetutors Consulting Ltd 2017 Xamarin-programming 81