Xamarin par l’exemple : “Metsys Music Search” 2/3

Il y a plus de 2 ans, Microsoft annonçait le rachat de Xamarin. Aujourd’hui, le résultat de cette alliance aboutit à une large gamme d’outils rendant le développement “Cross-Platform” plus rapide et plus facile pour les développeurs.

La partie 1 se trouve ici : Xamarin par l’exemple : “Metsys Music Search” 1/3

5. Mise en place de la recherche :

5.1 Création des classes “Converters” :

Pour la suite du projet, créez ces deux classes dans le répertoire “Converters” comme suit :

5.2 Création de la vue “ArtistView” :

Comme pour la vue “HomeView”, ajoutez un nouvel élément de type Xamarin.Forms et nommez le “ArtistView.xaml”. Remplacez le code XAML existant par celui ci-dessous :

Rajoutez dans le “code-behind” les deux méthodes ci-dessous :

5.3 Recherche et navigation :

Il ne reste plus qu’à initialiser la recherche lorsque l’utilisateur va saisir un nom d’artiste. L’application effectuera, via le service web, une recherche et naviguera vers la vue “ArtistView” qui affichera les résultats obtenus.

Ouvrez le fichier “HomeView.xaml” et rajoutez les éléments surlignés ci-dessous :

Rajoutez dans le “code-behind” les trois méthodes ci-dessous :

5.4 Tests et comparaison sur les appareils :

Exécutez l’application sur les trois plateformes (Windows10, Android et iOS) :

     

Chaque plateforme utilise ses composants natifs pour afficher les mêmes informations. On remarque par exemple que le bouton de navigation arrière se trouve intégré dans la barre de titre pour une application Windows10 alors que les éléments de la liste n’ont pas les bords arrondis contrairement à ceux sur Android ou iOS. De plus, nous avons volontairement masqué le bouton “Back” sur Windows10 car il est déjà présent. Nous pouvons donc personnaliser facilement l’affichage suivant la cible grâce à ces balises :

6. Harmonisation du bouton “Back” :

Dans cette partie, nous allons harmoniser le bouton “Back” pour avoir le même rendu sur un appareil Android et iOS. Ajoutez un nouveau fichier dans le répertoire “Controls” comme suit :

Dans la partie XAML, rajoutez les lignes ci-dessous :

Et dans le “code-behind” rajoutez les propriétés suivantes :

Ce contrôle va permettre d’afficher un bouton contenant une image et un texte. Rajouter le fichier “backbutton.png” dans le répertoire “Ressources” comme nous l’avons fait dans la partie 1 (ne pas oublier de mettre “Ressource incorporée” dans “Action de génération”) :

Fichier ressources : backbutton.png

Éditez le fichier “ArtistView.xaml” afin de rajouter le nouveau contrôle que nous venons de créer. Il suffit de changer la balise “Button” par celui ci-dessous :

Attention, n’oubliez pas de rajouter le namespace : xmlns:controls=”clr-namespace:Metsys.Music.Search.Controls”

Exécutez l’application sous Android et sous iOS pour constater le résultat (plutôt sympa) :

    

7. Renderers :

Les “renderers” permettent d’adapter le rendu des contrôles suivant la plateforme ciblée. Nous allons créer un “renderer” pour la zone de saisie d’un artiste afin de la rendre plus attrayante. Pour cela, créez dans le répertoire “Controls” une classe nommée “ImageEntry.cs” et ajouter le code ci-dessous :

7.1 Renderer iOS :

Dans le projet iOS, créez un nouveau répertoire “Renderers”. Ajoutez dans celui-ci une classe “ImageEntryRenderer.cs” et coller le code ci- dessous :

Ajoutez dans le répertoire “Resources” le fichier user.png sans oublier d’y assigner la propriété “BundleResource”.

7.2 Renderer Android :

Dans le projet Android, créez un nouveau répertoire “Renderers”. Ajoutez dans celui-ci une classe “ImageEntryRenderer.cs” et coller le code ci -dessous :

Ajoutez dans le répertoire “Resources/drawable” le fichier user.png sans oublier d’y assigner la propriété “AndroidResource”.

7.3 Renderer UWP :

Dans le projet Windows10, créez un nouveau répertoire “Renderers”. Ajoutez dans celui-ci une classe “ImageEntryRenderer.cs” et coller le code ci-dessous :

Pour la partie UWP, nous nous servons d’un style pour effectuer le rendu. Ajoutez le dans le fichier App.xaml du projet UWP comme ci-dessous :

Ajoutez dans le répertoire “Assets” le fichier user.png sans oublier d’y assigner la propriété “Contenu”.

7.4 Utilisation du nouveau contrôle :

Il ne reste plus qu’à éditer le fichier “HomeView.xaml” comme ci-dessous pour remplacer le contrôle “Entry” par “ImageEntry” :

N’oubliez pas d’ajouter le namespace : xmlns:local=”clr-namespace:Metsys.Music.Search.Controls”. Le résultat obtenu sur les trois appareils :

      

 

About the Author

François BOTTE

Architecte Technique .Net

No Comments

Laisser un commentaire

This blog is kept spam free by WP-SpamFree.