Enregistrer les recettes de grandmère avec Xamarin.Forms

Lors de la création d'applications mobiles, vous devez créer et gérer l'interface utilisateur et la logique d'application séparément pour iOS et Android: Objective-C / Swift avec XCode et Java avec Studio Android. Cela peut rapidement se transformer en douleur. Avec Xamarin.Forms, toutefois, l'interface utilisateur et la logique de l'application pour votre application résident dans une base de code unique et vous devez utiliser un seul IDE pour la gérer, économisant ainsi du temps et des maux de tête. Dans cet article, faites un tour autour de Xamarin.Forms pour voir ce qu’il peut faire pour vous.

Ma grand-mère prépare les meilleurs petits pains moelleux que vous ayez jamais goûtés. Le problème, c'est qu'il y a une tonne d'ingrédients secrets (et je ne parle pas seulement d'amour) qui entrent dans ces petits pains, et ces ingrédients et directives sont tous stockés dans la tête de ma grand-mère.

Nous avons tous des recettes de famille comme celle-ci, et au lieu de les oublier, dans cet article, nous allons créer une application mobile pour iOS et Android en utilisant Xamarin.Forms qui les sauvera pour moi et les générations futures de ma famille!

Donc, si vous êtes intéressé par l’écriture d’applications mobiles, mais que vous n’avez pas le temps d’écrire sans cesse la même application pour chaque plate-forme, cet article est pour vous! Ne vous inquiétez pas si vous ne connaissez pas C # d’une salade de bretzels aux fraises; J'écris des applications Xamarin depuis plus de 8 ans, et cet article est une visite guidée de Xamarin.Forms qui a pour objectif de vous fournir suffisamment d'informations pour commencer à apprendre par vous-même.

Qu'est-ce que c'est que Xamarin?

Xamarin permet aux développeurs de créer des applications iOS natives et Android utilisant les mêmes contrôles SDK et d'interface utilisateur disponibles que dans Swift et XCode pour iOS ou Java et Android Studio pour Android.

Grand aperçu )

La différence est que les applications sont développées avec C # à l'aide des .NET Framework et Visual Studio ou Visual Studio pour Mac . Les applications qui en résultent sont cependant exactement les mêmes. Ils ressemblent et se comportent exactement comme les applications natives écrites en Objective-C, Swift ou Java.

Xamarin brille dans le domaine du partage de code . Un développeur peut créer et personnaliser son interface utilisateur pour chaque plate-forme à l'aide de contrôles natifs et de kits de développement, puis écrire une bibliothèque de logique d'application partagée partagée sur plusieurs plates-formes.

C’est ce partage de code qui permet d’économiser beaucoup de temps

Et comme les délicieux petits pains cuits au four par ma grand-mère, il était difficile de ne pas en demander plus et c’est là que Xamarin.Forms arrive. .

Xamarin.Forms

Xamarin.Forms reprend le concept de développement traditionnel Xamarin et lui ajoute une couche d’abstraction.

Au lieu de développer l’interface utilisateur Xamarin.Forms introduit une boîte à outils d'interface utilisateur qui vous permet d'écrire des applications mobiles natives à partir d'une base de code unique.

Pensez-y de cette façon: vous avez une application qui nécessite un bouton. Chaque plate-forme a le concept d'un bouton. Pourquoi devriez-vous avoir à écrire à l'interface utilisateur plusieurs fois lorsque vous savez que tout l'utilisateur de votre application doit appuyer sur un bouton?

C'est l'un des problèmes que Xamarin.Forms résout.

Boîte à outils contenant les contrôles les plus utilisés et les événements d'interaction utilisateur correspondants; nous n'avons donc qu'à écrire les interfaces utilisateur de nos applications. Il convient toutefois de noter que vous n'êtes pas limité aux contrôles fournis par Xamarin.Forms – vous pouvez toujours utiliser les contrôles trouvés dans sur une seule plate-forme au sein d'une application Xamarin.Forms. Nous pouvons également partager la logique d'application entre les plates-formes comme auparavant.

Les statistiques de partage de code pour les applications développées avec Xamarin.Forms peuvent ne pas figurer dans les graphiques. 93% du code d'une application d'organisation de conférence est partagé sur iOS et 91% sur Android. L'application est open source. Jetez un coup d'œil au code .

Xamarin.Forms fournit plus que des contrôles d'interface utilisateur. Il contient également un cadre MVVM un service de messagerie pub / sous une API d’animation et un service de dépendance ainsi que d’autres.

Mais aujourd'hui, nous allons nous concentrer sur les capacités de l'interface utilisateur pour la création de notre application de gestionnaire de recettes.

L'application que nous allons construire

L'application Gestionnaire de recettes disposera d'une interface utilisateur simple. Nous allons travailler dans la cuisine, il doit donc être facile à utiliser!

Il sera composé de 3 écrans . La première affiche une liste de toutes les recettes actuellement chargées dans l'application.

Ensuite, en appuyant sur l'une de ces recettes, vous pourrez voir ses détails sur un deuxième écran:

À partir de là, vous pouvez appuyer sur un bouton de modification pour modifier la recette sur le troisième écran:

Vous pouvez également accéder à cet écran en appuyant sur le bouton Ajouter dans la liste de recettes.

Environnement de développement

Les applications Xamarin sont générées avec C # et .NET, à l'aide de Visual Studio sous Windows ou de Visual Studio pour Mac. sur le Mac, mais vous devez également disposer du SDK et des outils iOS ou Android . Tout installer dans le bon ordre peut poser quelques problèmes, cependant, les installateurs de Visual Studio s'occuperont de noter uniquement l'installation de l'EDI, mais également des outils de la plate-forme.

Bien qu'un logiciel Mac soit toujours requis pour la construction. Applications iOS, avec Xamarin, vous pouvez toujours développer et déboguer ces applications à partir de Visual Studio sous Windows ! Donc, si Windows est votre confiture, vous n'avez pas besoin de changer complètement vos environnements.

Voyons maintenant comment Xamarin.Forms peut nous aider à enregistrer des recettes de famille à partir d'une base de code!

Page de liste de recettes: Disposer de l'interface utilisateur [19659010] Commençons par expliquer comment nous allons configurer l'interface utilisateur de notre application de sauvegarde de recettes!

En général, chaque écran de Xamarin.Forms comprend 3 éléments. A Page . Au moins un élément appelé Layout . Et au moins un Control .

La page

La Page héberge tout ce qui est affiché à l'écran à la fois. La Page joue également un rôle central dans la navigation dans une application.

Nous indiquons à Xamarin.Forms Page d'afficher via un service de navigation . Ce service se chargera ensuite d’afficher la page de manière appropriée et native pour le système d’exploitation.

En d’autres termes, le code permettant de naviguer entre les écrans a également été extrait

Enfin, bien qu’il ne s’agisse pas du seul moyen. pour le faire, je code l'interface utilisateur de mes pages [] en XAML . (L'autre façon serait d'utiliser C #.) XAML est un langage de balisage qui décrit comment une page semble. Et pour l'instant, disons simplement que c'est un peu comme le HTML.

La mise en page

Toutes les commandes d'une page sont organisées par quelque chose appelé une Layout .

Vous pouvez ajouter une ou plusieurs mises en page à une page.

Il existe plusieurs types de mises en forme dans les formulaires. Parmi les plus courantes, citons les dispositions Stack, Absolute, Relative, Grid, Scroll et Flex.

Les commandes

Enfin, il y a les commandes . Ce sont les widgets de votre application avec lesquels l'utilisateur interagit.

Les formulaires sont livrés avec de nombreux contrôles qui seront utilisés, peu importe quel type d'application que vous construisez. Des éléments tels que les étiquettes, les boutons, les zones de saisie, les images et, bien sûr, les vues de liste.

Lorsque vous ajoutez un contrôle à un écran, vous l'ajoutez à une présentation. C’est la présentation qui permet de déterminer exactement à quel endroit le contrôle doit apparaître.

Pour générer les écrans suivants sur iOS et Android, respectivement:

J’ai utilisé ce code XAML:

Il se passe ici un certain nombre de choses importantes.

Le premier est le . Ceci dit à Forms de disposer tous les contrôles qui suivent dans une pile.

Il n’existe qu’un seul contrôle dans la présentation, c’est un et nous allons lui donner un nom pour que nous puissions Référencez-le plus tard.

Ensuite, il y a un peu de cérémonie classique à la ListView avant d'arriver à ce que nous recherchons: la . Ceci indique aux formulaires d'afficher un texte simple dans chaque cellule de la liste.

Nous indiquons à la le texte que nous souhaitons afficher via une technique appelée Data Binding . La syntaxe ressemble à Text = "{Nom} Reliure" . Où Name est la propriété d'une classe Recipe qui modélise… eh bien, Recipes.

Comment les recettes sont-elles ajoutées à la liste?

Avec chaque fichier XAML , il existe un fichier «code-behind». Ce code-behind nous permet, par exemple, de gérer des événements d'interaction utilisateur, d'effectuer une configuration ou d'effectuer une autre logique d'application.

Il existe une fonction qui peut être remplacée dans chaque Page appelée OnAppearing [ – – que vous avez sans doute deviné, vous l'aurez deviné – est appelée lorsque la page apparaît.

 valeur de substitution annulée protégée OnAppearing ()
{
    base.OnAppearing ();

    recipesList.ItemsSource = null;
    recipesList.ItemsSource = App.AllRecipes;
}

Notez les recettes.List.ItemsSource = Toutes les recettes;

Ceci indique à la la liste apparente – "Hé! Toutes vos données se trouvent dans l'énumérable App.AllRecipes (une variable à l'échelle de l'application) et vous pouvez utiliser n'importe laquelle des propriétés de son objet enfant pour la lier! ".

Une liste de recettes est tout va bien – mais vous ne pouvez rien cuire sans avoir au préalable vu les détails de la recette – et nous nous en occuperons ensuite.

Gestion des événements

Sans répondre aux gestes de l'utilisateur, notre application n'est rien de plus que une liste de recettes qui sonnent délicieusement. Ils sonnent bien, mais sans savoir comment les cuire, ce n'est pas très utile!

Faisons en sorte que chaque cellule du ListView réponde aux robinets pour que nous puissions voir comment faire la recette!

Dans le fichier code-behind RecipeListPage vous pouvez ajouter les gestionnaires de traitement d'événements aux commandes permettant d'écouter et de réagir aux événements d'interaction utilisateur.

Gestion des événements de tap sur la liste, puis: [196591005] ] recipesList.ItemSelected + = async (expéditeur, eventArgs) =>
{
    if (eventArgs.SelectedItem! = null)
    {
        var detailpage = new RecipeDetailPage (eventArgs.SelectedItem comme recette);

        attendez Navigation.PushAsync (detailPage);

        recipesList.SelectedItem = null;
    }
};

Il se passe des choses intéressantes.

À chaque fois que quelqu'un sélectionne une ligne, ItemSelected est renvoyé sur la ListView .

Des arguments qui ont été intégrés à la liste gestionnaire, l'objet eventArgs a une propriété SelectedItem qui se trouve être tout ce qui est lié à la ListView d'avant.

Dans notre cas, c'est le Recette Classe. (Nous n'avons donc pas à rechercher l'objet dans la source principale – il nous a été transmis.)

Page de détail de la recette

Bien sûr, une page vous montre les ingrédients secrets et les instructions permettant de préparez chaque recette, mais comment cette page s’affiche-t-elle?

Notez que la attend la ligne Navigation.PushAsync (détailPage); vue du haut. L'objet Navigation est un objet indépendant de la plate-forme qui gère les transitions de page de manière native pour chaque plate-forme.

Jetons maintenant un coup d'œil à la page des détails de la recette:

Cette page est également construite avec XAML. Cependant, la mise en page utilisée ( FlexLayout ) est assez cool car elle s’inspire de la CSS Flexbox.

Le FlexLayout organisera ses contrôles en rangées ou en colonnes. Cependant, le gros avantage réside dans le fait qu'il peut détecter automatiquement l'espace disponible sur l'écran pour placer un contrôle, et s'il n'y en a pas assez, il peut automatiquement créer une nouvelle ligne ou une nouvelle colonne pour l'adapter!

Cela aide beaucoup lorsque vous manipulez différentes tailles d'écran, qui sont nombreuses dans le développement mobile.

Eh bien, avec le FlexLayout qui nous aide à conserver la beauté de l'écran des détails, nous devons encore modifier ces recettes,

Vous avez probablement remarqué ceci:

Cette ligne est responsable de l'insertion d'un bouton dans la barre d'outils de l'application. Le Clicked = "Edit_Clicked" indique au bouton que, lorsqu'il clique dessus, recherchez dans le code une fonction de ce nom, puis exécutez son code.

Ce qui, dans ce cas, instancierait le Recette Edit Page, puis insérez-le dans notre pile de navigation à l'aide de l'objet Navigation mentionné précédemment.

Recipe Edit Page

Une page contenant une liste de recettes: vérifiez! Une page avec tous les détails pour faire les recettes: check! Il ne reste plus qu'à créer la page que nous utilisons pour entrer ou modifier une recette pendant que nous regardons sa grand-mère travailler sa magie!

Commencez par regarder les écrans:


Grand aperçu )


Et maintenant le code:

Il y a un peu plus de code ici, et c'est parce que j'utilise la présentation Grid pour spécifier la manière dont tout devrait être présenté dans un modèle bidimensionnel.

. Parce que je voulais donner un exemple de la façon dont on peuplerait les contrôles uniquement à partir du code derrière le fichier:

 void InitializePage ()
{
    Titre = TheRecipe.Name ?? "Nouvelle recette";

    recipeNameCell.Text = TheRecipe.Name;
    ingredientsCell.Text = TheRecipe.Ingredients;
    directionsCell.Text = TheRecipe.Directions;

    saveButton.Clicked + = async (expéditeur, arguments) =>
    {
        SaveRecipe ();
        attendez CloseWindow ();
    };

    cancelButton.Clicked + = async (expéditeur, arguments) =>
    {
        attendez CloseWindow ();
    };
}

Voir cette propriété TheRecipe ? Il est au niveau de la page, contient toutes les données d'une recette particulière et est défini dans le constructeur de la page.

Deuxièmement, les gestionnaires d'événements Clicked pour les boutons saveButton et . ] cancelButton sont totalement .NET-ified (et oui, je compose souvent mes propres mots.)

Je dis qu'ils sont .NET-ified car la syntaxe utilisée pour gérer cet événement n'est pas native à Java. ni Objective-C. Lorsque l'application s'exécute sur Android ou iOS, le comportement sera identique à celui d'un clic Android ou d'un TouchUpInside iOS.

Et comme vous pouvez le constater, chacun de ces gestionnaires d'événements de clic appelle des fonctions appropriées qui enregistrent la recette et ignorent la page, ou ne fermez que la page.

Voilà - nous avons l'interface utilisateur vers le bas pour sauvegarder les recettes d'ici la fin des temps!

CSS Wha?!? Ou rendre l'appli jolie

Enregistrer le meilleur pour la fin: Xamarin.Forms 3.0 nous donne, entre autres, la possibilité de styliser les contrôles à l'aide de CSS !

Le CSS Xamarin.Forms n'est pas 100% de ce à quoi vous êtes habitué depuis le développement web. Mais c’est assez proche pour que toute personne familiarisée avec CSS se sente comme chez elle. Tout comme moi chez ma grand-mère!

Reprenons donc la page des détails de la recette, elle utilise donc des feuilles de style en cascade pour définir les éléments visuels au lieu de tout insérer directement dans le XAML.

La première étape consiste à créer le CSS doc! Dans ce cas, il ressemblera à ceci:

 .flexContent {
    align-items: flex-start;
    align-content: flex-start;
    enveloppe souple: enveloppe;
}

image {
    base flexible: 100%;
}

.spacer {
    base flexible: 100%;
    hauteur: 0;
}

.foodHeader {
    taille de police: grande;
    poids de police: gras;
    couleur: # 01487E;
    marge: 10 10;
}

.dataLabel {
    taille de police: moyenne;
    poids de police: gras;
    couleur: # EE3F60;
    marge: 10 10;
}

.Les données {
    taille de police: petit;
    marge: 10 10;
}

La plupart du temps, cela ressemble à du CSS. Il y a des cours ici. Il y a un seul sélecteur pour un type de classe, Image . Et puis un groupe de créateurs de propriété.

Certains de ces créateurs de propriété, tels que flex-wrap ou flex-base sont spécifiques à Xamarin.Forms. À l'avenir, l'équipe préfixera ceux avec xf- pour suivre les pratiques standard.

Ensuite, il sera appliqué aux contrôles XAML.

Voici à quoi ressemblait avant .

Dans Xamarin.Forms, pour faire référence au document CSS, ajoutez un . Vous pouvez ensuite référencer les classes de chaque contrôle via la propriété StyleClass .

Il nettoie définitivement le XAML et rend également plus claire l’intention du contrôle. Par exemple, il est maintenant assez évident de savoir ce que sont les !

Et le Image s’appelle tout simplement parce qu’il s’agit d’un Image et de la façon dont nous avons défini le sélecteur dans CSS.

Certes, CSS dans Xamarin.Forms n’est pas aussi complètement implémenté que son cousin Web, mais c’est quand même assez cool. Vous avez des sélecteurs, des classes, vous pouvez définir les propriétés et, bien sûr, tout ce qui se passe en cascade!

Résumé

Trois écrans, deux plates-formes, un article et d'innombrables recettes sauvegardées! Et vous savez ce qu'il y a d'autre? Vous pouvez créer des applications avec Xamarin.Forms pour davantage qu'Android et iOS. Vous pouvez construire des plates-formes UWP, macOS et même Samsung Tizen!




Xamarin.Forms est une boîte à outils d'interface utilisateur qui vous permet de créer des applications en écrivant l'interface utilisateur une seule fois et en affichant l'interface utilisateur de manière native sur les principales plates-formes.

Pour ce faire, elle fournit un SDK qui constitue une abstraction pour la plupart des utilisateurs. utilisé des contrôles sur les plates-formes. Outre la qualité de l'interface utilisateur, Xamarin.Forms fournit également une infrastructure MVVM complète, un service de messagerie pub / sub, une API d'animation et un service de dépendance.

Xamarin.Forms vous offre également les mêmes avantages en termes de code: développement traditionnel Xamarin fait. Toute logique d'application est partagée sur toutes les plateformes. Et vous développez toutes vos applications avec un seul IDE dans une seule langue, c’est vraiment cool!

Téléchargez le code source de cette application Xamarin.Forms pour lui donner une tournure personnelle. Ensuite, pour en savoir plus sur Xamarin.Forms, y compris la possibilité de créer une application dans votre navigateur, consultez ce tutoriel en ligne !

(dm, ra, yk, il)