premiers pas avec xamarin
TRANSCRIPT
Mes Premiers Pas avec Xamarin
Mohamed [email protected]
Que c’est « Cross-Plateform »
MobileWeb / Hybrid App
Native API to iOS•HTML5 / JavaScript
Native API to Android•HTML5/JavaScript
Native API to Windows Phone•HTML5 / JS
Native Mobile Plateforms
Objective-C, Swift• XCode
Java• Android Studio
C#, VB…• Visual Studio
Cross Plateform avec Xamarin
C# , Visual Studio, Xamatin Studio
C# , Visual Studio, Xamatin Studio
C# , Visual Studio, Xamatin Studio
C’est Quoi ce « Xamarin » ?
Xamarin = Développer en C# + Un outil pour les compiler tous
On est où … ?
• SDK Manager ?• AVD Manager ? • Nuget Packages Manager ? • Build, Deploy …
Tout commence par là!
Structure du projet• Portable class Library• Android• iOS• UWP• Windows8• Windows Phone
Attaquer le XAML public partial class MainPage : ContentPage {public MainPage() { InitializeComponent(); }
<?xml version="1.0" encoding="utf-8" ?><ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:DemoApp" x:Class="DemoApp.MainPage"><Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" ></ContentPage>
Ajoutons des éléments graphiques
https://developer.xamarin.com/guides/xamarin-forms/controls/cells/
Ajoutons un bouton à notre interface !
Testons MAINTENANT !
Essayons ça! Un problème ?!Mais il semble être indispensable d’utiliser un conteneur!
https://developer.xamarin.com/guides/xamarin-forms/controls/layouts/
Ça se fait en C# ?! public class Interface2 : ContentPage { public Interface2() { EntryBien = new Entry { Placeholder = "Le bien à acheter", }; EntryPrix = new Entry { Placeholder = "Prix", };
var switcher = new Switch();
Content = new StackLayout { Children = { new Label { Text = "Ajouter votre nouvel achat!" }, EntryBien, EntryPrix,
switcher } }; }
Créons une deuxième interface ! (Add New Item Forms Page)
Mais le bouton ne fait RIEN pour le moment !
<Button Text="Click Me!" Clicked="OnButtonClicked"/>
async void OnButtonClicked(object sender, EventArgs e) { await Navigation.PushModalAsync(new Interface2());
}
Organisons nos interfaces
ListView
Button
StackLayout
Label
Entry
Button
Concevoir notre liste <ListView x:Name="listView"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout BackgroundColor="#eee" Orientation="Vertical">
<!–- Là concevoir votre liste --> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate>
<ListView x:Name="listView"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout BackgroundColor="#eee" Orientation="Vertical"> <StackLayout Orientation="Horizontal"> <Label Text="{Binding Nom}" TextColor="#f35e20" /> <Label Text="{Binding price}" HorizontalOptions="EndAndExpand" TextColor="#503026" /> </StackLayout> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate>
Proposition de solution
https://developer.xamarin.com/guides/xamarin-forms/user-interface/listview/
Enrichir notre Liste !public class Produit { public String Price { get; set; } public string Nom { get; set; } } public partial class MainPage : ContentPage { public ObservableCollection<Produit> productsList { get; set; }
public MainPage() { InitializeComponent();
productsList = new ObservableCollection<Produit>();
productsList.Add(new Produit() { Price = "20TND", Nom = "Viande" });
listView.ItemsSource = productsList; }
Mais je veux ajouter moi même un produit !!public MainPage(Produit p) { InitializeComponent();
productsList = new ObservableCollection<Produit>();
productsList.Add(new Produit() { Price = "20TND", Nom = "Viande" });
listView.ItemsSource = productsList;
if (p != null) { productsList.Add(p); } }
ButtonValider.Clicked += ButtonValider_Clicked;
private async void ButtonValider_Clicked(object sender, EventArgs e) { Produit p = new Produit() { Nom = EntryBien.Text, Price = EntryPrix.Text };
MainPage main = new MainPage(p); await Navigation.PushModalAsync(main);}
Mais on a un projet déjà !
Liens utiles• https://developer.xamarin.com/guides/xamarin-forms/
• https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/
• https://developer.xamarin.com/guides/cross-platform/