SlideShare une entreprise Scribd logo
1  sur  19
Télécharger pour lire hors ligne
Mes Premiers Pas avec Xamarin
Mohamed BOURAOUI
Bourawi.mohamed@gmail.com
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/

Contenu connexe

En vedette

Cours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vieCours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vieMohammed Amine Mostefai
 
Les Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobileLes Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobileMohamed BOURAOUI
 
Cycles de vie d'un logiciel
Cycles de vie d'un logicielCycles de vie d'un logiciel
Cycles de vie d'un logicielRabia AZIZA
 
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...ENSET, Université Hassan II Casablanca
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)ENSET, Université Hassan II Casablanca
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...ENSET, Université Hassan II Casablanca
 

En vedette (6)

Cours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vieCours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vie
 
Les Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobileLes Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobile
 
Cycles de vie d'un logiciel
Cycles de vie d'un logicielCycles de vie d'un logiciel
Cycles de vie d'un logiciel
 
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 

Similaire à Premiers pas avec Xamarin

jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidemaru.maru
 
Web-In 2010: Programmation Native iOS (French)
Web-In 2010: Programmation Native iOS (French)Web-In 2010: Programmation Native iOS (French)
Web-In 2010: Programmation Native iOS (French)Fred Brunel
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5jverrecchia
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8Microsoft
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Conquérir l'internet des objets avec les technologies web. (Kiwi Party 2012)
Conquérir l'internet des objets avec les technologies web. (Kiwi Party 2012)Conquérir l'internet des objets avec les technologies web. (Kiwi Party 2012)
Conquérir l'internet des objets avec les technologies web. (Kiwi Party 2012)Steren Giannini
 
Créer des applications Metro Design avec PowerShell et WPF
Créer des applications Metro Design avec PowerShell et WPFCréer des applications Metro Design avec PowerShell et WPF
Créer des applications Metro Design avec PowerShell et WPFDamien Van Robaeys [MVP]
 
582 agr-li - interface mobile - classe 1
582   agr-li - interface mobile - classe 1582   agr-li - interface mobile - classe 1
582 agr-li - interface mobile - classe 1Alexandre Paradis
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsThomas Bassetto
 
Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Nazih Heni
 
Cobalt @ Code d'Armor Lannion 20130318 [FR]
Cobalt @ Code d'Armor Lannion 20130318 [FR]Cobalt @ Code d'Armor Lannion 20130318 [FR]
Cobalt @ Code d'Armor Lannion 20130318 [FR]Cobaltians
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web MicrosoftChristophe Lauer
 
Xamarin.Forms [french]
Xamarin.Forms [french]Xamarin.Forms [french]
Xamarin.Forms [french]Laurent Duveau
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebFrédéric Harper
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSRenaud Dumont
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)Rui Carvalho
 

Similaire à Premiers pas avec Xamarin (20)

jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
Web-In 2010: Programmation Native iOS (French)
Web-In 2010: Programmation Native iOS (French)Web-In 2010: Programmation Native iOS (French)
Web-In 2010: Programmation Native iOS (French)
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8
 
HTML5
HTML5HTML5
HTML5
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Conquérir l'internet des objets avec les technologies web. (Kiwi Party 2012)
Conquérir l'internet des objets avec les technologies web. (Kiwi Party 2012)Conquérir l'internet des objets avec les technologies web. (Kiwi Party 2012)
Conquérir l'internet des objets avec les technologies web. (Kiwi Party 2012)
 
Créer des applications Metro Design avec PowerShell et WPF
Créer des applications Metro Design avec PowerShell et WPFCréer des applications Metro Design avec PowerShell et WPF
Créer des applications Metro Design avec PowerShell et WPF
 
582 agr-li - interface mobile - classe 1
582   agr-li - interface mobile - classe 1582   agr-li - interface mobile - classe 1
582 agr-li - interface mobile - classe 1
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
 
Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
 
Presentation de gwt maven
Presentation de  gwt mavenPresentation de  gwt maven
Presentation de gwt maven
 
Cobalt @ Code d'Armor Lannion 20130318 [FR]
Cobalt @ Code d'Armor Lannion 20130318 [FR]Cobalt @ Code d'Armor Lannion 20130318 [FR]
Cobalt @ Code d'Armor Lannion 20130318 [FR]
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
 
Xamarin.Forms [french]
Xamarin.Forms [french]Xamarin.Forms [french]
Xamarin.Forms [french]
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
 
Crs javascript
Crs javascriptCrs javascript
Crs javascript
 

Dernier

Les Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleLes Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleErol GIRAUDY
 
Mes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensMes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensErol GIRAUDY
 
Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapInstallation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapMaxime Huran 🌈
 
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Infopole1
 
The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)IES VE
 
KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311Erol GIRAUDY
 

Dernier (6)

Les Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleLes Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence Artificielle
 
Mes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensMes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examens
 
Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapInstallation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
 
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
 
The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)
 
KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311
 

Premiers pas avec Xamarin

  • 1. Mes Premiers Pas avec Xamarin Mohamed BOURAOUI Bourawi.mohamed@gmail.com
  • 2. 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
  • 3. C’est Quoi ce « Xamarin » ? Xamarin = Développer en C# + Un outil pour les compiler tous
  • 4. On est où … ? • SDK Manager ? • AVD Manager ? • Nuget Packages Manager ? • Build, Deploy …
  • 6. Structure du projet • Portable class Library • Android • iOS • UWP • Windows8 • Windows Phone
  • 7. 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>
  • 8. Ajoutons des éléments graphiques https://developer.xamarin.com/guides/xamarin-forms/controls/cells/
  • 9. Ajoutons un bouton à notre interface !
  • 11. Essayons ça! Un problème ?! Mais il semble être indispensable d’utiliser un conteneur! https://developer.xamarin.com/guides/xamarin-forms/controls/layouts/
  • 12. Ç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)
  • 13. 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()); }
  • 15. 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/
  • 16. 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; }
  • 17. 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);}
  • 18. Mais on a un projet déjà !
  • 19. 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/