Un intégrateur web, peut-il designer une application Xamarin Forms ?

Un développeur mobile peut-il être épaulé par un intégrateur web et ainsi lui déléguer la partie design d’une application mobile ? C’est la question que je me suis posé quand j’ai vu cette fonctionnalité de Xamarin Forms.

Au fait, c’est quoi Xamarin ?

Mais avant de commencer, un petit rappel pour le fond de la classe qui ne connaitrait pas Xamarin.

Il s’agit d’un framework .NET, open source, cross-platform, qui permet de développer des applications mobiles natives (iOS et Android) en C#. Il se décompose en deux approches :

• Xamarin native (Xamarin.iOS et Xamarin.Android)

Pour faire simple, avec cette approche nous avons le code commun et le code métier qui sont partagés pour les deux plateformes alors que la partie UI est à développer sur chacune d’elles.

• Xamarin Forms

Ici, la partie UI est également partagée, elle est faite en XAML, et a donc l’avantage de n’être développée qu’une fois.

Il s’agit là d’une présentation rapide, je vous invite à aller lire la documentation officielle sur le site de Microsoft (native : https://dotnet.microsoft.com/apps/xamarin, forms : https://dotnet.microsoft.com/apps/xamarin/xamarin-forms)

Xamarin + CSS

Pour en revenir au sujet de cet article, depuis la version 3.0 de Xamarin Forms, deux fonctionnalités ont fait leur apparition :

• Un nouveau layout, « FlexLayout » inspiré du monde du web où il est plus connu sous le nom de flexbox (Si vous souhaitez en savoir plus, voici le lien vers la documentation de Mozilla).
• Les feuilles de styles CSS pour la partie Design.

Je me suis donc poser la question suivante : Est-il possible de déléguer la partie UI à un intégrateur web ?

[SPOILER ALERT] Oui mais ce n’est pas simple [/SPOILER ALERT]

Pour vérifier cela, j’ai donc créé une petite application, avec un seul écran de login :

L’écran ci-dessus est développé en XAML et sur cet exemple j’ai volontairement omis d’implémenter le design. Pour ceux qui ont pu faire du WPF, cela devrait leur sembler très familier. Mais qu’en est-il pour un intégrateur web ?

Même s’il ne s’agit pas du sempiternel HTML, cela reste du XML ce qui est donc compréhensible pour lui (avec peut-être un petit temps d’adaptation).

A cet écran j’ai donc rajouté la feuille de style suivante :

On peut voir que la structure du fichier ainsi que son contenu et sa nomenclature est identique (à 2-3 particularités près) à un fichier CSS classique.

Mis à part la petite spécificité pour l’élément contentpage, où nous sommes obligés de rajouter un « ^ » devant pour pouvoir le sélectionner, les autres sélecteurs traditionnels sont présents :

• Par type d’élément avec le nom de celui-ci, par exemple : Entry (cela correspond à un input de type texte en html)
• Par classe CSS, avec le « . », exemple : .FormRow
• Ou encore, par identifiant, avec le « # » exemple : #MainForm

Je n’ai ici listé ici que les basiques, mais d’autres sélecteurs sont également disponibles, vous trouverez la liste complète ici. Donc, là aussi, aucun risque de voir l’intégrateur se perdre !

Mais si on y regarde de plus près, on remarque tout de même quelques différences. La plus flagrante est le nom des éléments graphiques (ex : entry, label, …) même si l’on devine assez facilement à quoi ils correspondent, il sera nécessaire de les apprendre (aidé du fichier XAML, l’apprentissage se fera vite).

Entry, Button {
    margin: 10;
}

Autre point qui pourra surprendre, l’omission de l’unité pour les dimensions (pas de pixels en Forms). La raison à cela est assez simple, chaque plateforme possède ses propres unités. Pour iOS il s’agit des « dp », alors que pour Android se sont des « sp ». Ainsi pour éviter toute confusion ou erreur, pas d’unité en Forms.

Image {
    height: 25;
    width: 25;
}

Dernière particularité, des propriétés ont dû être créées pour les attributs spécifiques à Forms. Comme le montre l’extrait ci-dessous, il est possible de définir le texte du placeholder d’un Entry via le fichier CSS.

#LoginEntry {
    -xf-placeholder: Enter your login;
}

Bon, et si maintenant on regardait ce que cela donne, une fois l’application lancée.

Pas mal hein ?

Mais, après avoir fini cet écran, une nouvelle problématique apparait. Jusqu’où est-il possible de modifier cette application, en ne touchant qu’a la feuille de style ? Est-on limité à des modifications basiques (changement de couleur, taille, …) ou peut-on en appliquer des plus importantes ?

J’ai donc créé une nouvelle feuille de style avec pour objectif suivant : rendre l’écran méconnaissable (même s’il risque d’être un peu moche…).

Voici donc le nouveau fichier CSS :

Ce qui donne comme résultat :

Sans jouer au jeu des 7 erreurs, on voit qu’il est tout de même possible d’effectuer pas mal de modifications sur le rendu de l’écran. Les plus observateurs auront remarqués que même l’ordre de certains éléments a été modifié.

Et mon intégrateur dans tout ça ?

Après tous ces tests, je dirais que sur le papier, oui un intégrateur web peut designer une application Xamarin Forms. Il lui faut cependant un petit temps d’adaptation, pour intégrer certaines subtilités et comprendre les nouveautés.

Mais en définitive, il y a peu de chances que cela se produise, et pour moi en voici les principales raisons :

1. Contrairement au web (HTML), l’intégrateur ne pourra pas apporter d’ajustement à la page/écran si nécessaire. Il sera limité à ce qui est déjà en place, ou alors il devra faire appel à un développeur (ou lui-même devoir monter en compétence sur le XAML).
2. Autre principal frein selon moi, reste le fait de pouvoir visualiser les modifications faites sur le CSS. En effet, il n’est pas possible de faire un simple F5 sur une page web. Il faudra compiler et déployer l’application sur un device, ce qui, en plus de prendre un certain temps, nécessite également l’installation de Visual Studio (juste pour modifier une feuille de style, c’est un peu lourd). Cependant, ce problème peut possiblement évoluer car une des nouveautés à venir est le « hot reload » (https://devblogs.microsoft.com/xamarin/xaml-hot-reload/) cela consiste à pouvoir mettre à jour son app sans avoir à la recompiler/déployer. Cela corrigerait ce défaut, mais reste à voir la compatibilité avec le CSS.

Pour conclure, je dirais qu’aujourd’hui l’intérêt de cette fonctionnalité est plutôt de pouvoir rapidement récupérer une charte graphique d’un site web et de l’appliquer à une application mobile. Cela permet également de pouvoir réaliser rapidement des POC ou des démo.