Premiers pas avec Xamarin Studio

xamarin_logo

La plate-forme Xamarin permet de développer des applications Mobile (Android et iOS) en langage .NET. Elle s’appuie sur une couche Mono, implémentation open-source de la plate-forme .NET.

Le développeur peut choisir son environnement de développement :

  • Soit en utilisant « Xamarin Studio », environnement complet (et gratuit) de développement,
  • Soit en utilisant Visual Studio, en installant l’extension Xamarin.

Dans cet article, nous allons effectuer nos premiers pas dans le développement d’une application Android sous Xamarin Studio.

Objectif : « Hello Netapsys »

Notre application, très simple :

  • Affichera le logo Netapsys dans un contrôle Image
  • Possédera un bouton affichant « Hello Netapsys » dans une zone de texte lors du clic.

Le but de cet article est de donner un premier aperçu de l’environnement de développement Xamarin, et de guider un développeur connaissant le C# dans la réalisation de sa première application mobile à travers un exemple simple. Dans un souci de simplification, certaines pratiques usuelles de codage seront volontairement ignorées.

Création du projet

Dans le menu Fichier > Nouveau > Solution, choisir une nouvelle application Android et créer le projet correspondant :

XAM01

Nous pouvons immédiatement ajuster les propriétés du projet (clic droit sur le projet à Options) :

XAM03

De manière classique, il s’agit de renseigner le nom de l’application, la version, l’icône, etc…

Les autres propriétés importantes à ajuster sont :

  • « Minimum Android version » : la version la plus ancienne que supportera notre application
  • « Target Android Version » : la version d’Android prévue pour exécuter notre application.
    Notre application étant très simple, nous choisissons une version ancienne : « Android 2.3 (API Level 10) », afin d’augmenter au maximum la compatibilité avec les anciens mobiles.
    Dans ce cas, il conviendra également d’ajuster le « TargetFramework » dans la rubrique « Construire – Géneral ».
  • « Required Permissions » : il s’agit de sélectionner les permissions que nécessitera l’application pour s’exécuter sur le mobile.
    Par exemple, pour une application avec accès au Web, il faut cocher « Internet ».

La création du projet initialise l’arborescence de fichiers suivante :

XAM04

Le répertoire « Resources » contient toutes les ressources de l’application :

  • Les images, icônes, etc… en diverses résolutions (« drawable-hdpi », « drawable-mdpi », « drawable-xhdpi »…)
  • Les vues de mise en forme des écran (« Layout »)
  • Les chaines de textes, couleurs, constantes, regroupées sous la rubrique « Values »

Par défaut, l’assistant nous a créé un écran de démarrage, nommé « MainActivity ».

Notre premier écran

En Xamarin, un « écran » se compose de deux parties :

  • La vue, localisée dans le répertoire « Resources/Layout » : elle contient l’apparence, la mise en forme des contrôles, décrite au format axml. Ce format est très proche, sur le principe, du format xaml utilisé en WPF.
    Une vue ne contient pas de code.
  • L’écran en lui-même : on parle d’« Activity ». Il s’agit d’une classe C# dérivant de la classe-mère « Activity ». Au sein de cette classe, on spécifiera la vue (« Layout ») à utiliser pour l’affichage, ainsi que le code de chargement.

Personnalisons maintenant l’écran « MainActivity » créé par défaut : nous allons l’associer à une vue « DemoLayout.axml », affichant une image, un bouton, et un label.

Définition du « Layout » (axml)

Depuis l’élément « Resources \ Layout », cliquez droit pour ajouter un nouveau « Layout » :
XAM05

Ajoutons à ce « Layout » :

  • Un contrôle Image pour afficher le logo,
  • Un bouton,
  • Une zone de texte pour afficher le message « Hello Netapsys ».

L’ajout des contrôles peut se faire directement par code axml, ou via un assistant graphique permettant de faire glisser les contrôles depuis la boîte à outils.

Le code axml de notre « Layout » est le suivant :

XAM06

 

Code de notre « Activity » (C#)

Modifions maintenant le code du « MainActivity.cs » pour utiliser et afficher ce « Layout ».

Le chargement de l’écran appelle la méthode « OnCreate ». Au sein de celle-ci, nous allons, en langage C#.NET  :

  • Spécifier le « Layout » à utiliser, via la méthode SetContentView
  • Gérer le chargement du logo Netapsys dans l’ImageView, via la méthode SetImageResource (ajouter au prélable le logo Netapsys dans les ressources)
  • Gérer le clic sur le bouton, affichant un message à l’utilisateur.

Le code complet de notre écran est le suivant :

XAM07

On notera, pour accéder à un contrôle particulier de l’écran, l’utilisation de la méthode FindViewById.

On notera également l’utilisation de délégués pour gérer les évènements comme le clic sur le bouton.

Exécution

Nous pouvons maintenant exécuter notre projet au sein de l’émulateur Xamarin. Celui-ci doit être configuré au préalable, en spécifiant les paramètres souhaités pour simuler un mobile ou une tablette donnée :

  • Version d’Android,
  • Résolution de l’écran,
  • Taille de la mémoire
  • etc …

Il ne nous reste plus qu’à cliquer sur le bouton « Exécuter » de Xamarin Studio : l’application est compilée, installée dans l’émulateur, et exécutée.

Pendant l’exécution, il est bien sur possible d’utiliser les fonctions classiques de débogage.

Résultat :

  • Notre logo Netapsys s’affiche correctement au chargement.
  • Au clic sur le bouton, un message « Hello Netapsys » apparaît bien dans la zone de texte prévue à cet effet.

XAM09

 

 

Déploiement

Pour déployer l’application sur un « vrai » mobile, il faut compiler l’application en mode « Release ».

Dans le répertoire bin\release, on voit apparaitre l’apk signé :
XAM10

Cet apk peut être installé directement sur le mobile, en ayant pris soin auparavant d’autoriser l’installation des sources inconnues (Paramètres \ Sécurité : cocher « Sources inconnues »).

Vous avez maintenant, sur votre mobile, votre première application Android développée en .NET.

Maintenant, à vous de jouer !

2 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *