Créez facilement une application ToDo avec l'interface utilisateur Telerik pour Xamarin

juillet 22, 2020

Présentation de notre application Telerik ToDo: une application de gestion des tâches magnifiquement conçue et très performante, construite avec l'interface utilisateur Telerik pour les contrôles Xamarin.

Dans notre monde dynamique, rester concentré et organisé est impératif pour atteindre les objectifs professionnels et personnels, ce qui est pourquoi les applications mobiles de gestion des tâches sont si populaires. Ces applications mobiles simples mais puissantes sont souvent utilisées comme des démonstrations ou des exemples de cas d'utilisation pour démontrer la puissance d'un framework ou d'une technologie donnée, et Xamarin.Forms n'est pas différent. L'équipe derrière Telerik UI for Xamarin a conçu une puissante application de gestion des tâches pour montrer comment vous pouvez créer une application client avec succès avec Xamarin.Forms et la déployer sur les appareils mobiles Android, iOS et Microsoft. [19659003] Présentation

L'exemple d'application Telerik ToDo vise à imiter une application destinée aux consommateurs dans le monde réel. Il utilise une combinaison de diverses technologies et est développé conformément aux dernières tendances de l'architecture de développement mobile. Voici un bref aperçu des technologies et des frameworks utilisés pour créer l'exemple d'application Xamairn.Forms:

Entity Framework Core —une version légère, extensible, open source et multiplateforme du populaire Entity Framework technologie d'accès aux données. Entity Framework est la technologie standard pour les développeurs .NET travaillant avec diverses implémentations de bases de données à l'aide d'objets .NET, car il supprime le besoin d'écrire des couches d'accès aux données personnalisées.
SQLite —Nous avons choisi SQLite pour servir en tant que moteur de base de données SQL pour l'application. SQLite est le moteur de base de données le plus utilisé au monde. Il est intégré à tous les téléphones mobiles et à la plupart des ordinateurs et est intégré à d'innombrables autres applications que les gens utilisent quotidiennement.
MVVMFresh —un cadre MVVM ultra-léger créé spécifiquement pour Xamarin.Forms. Il est conçu pour être facile, simple et flexible. Certaines des fonctionnalités importantes fournies par le framework sont:
- Navigation entre les modèles de pages et les modèles de pages
- Câblage automatique de BindingContext
- Conteneurs IOC intégrés
- Câblage automatique d'événements de page et bien d'autres.
Interface utilisateur Telerik pour Xamarin – offre des formulaires Xamarin de haute qualité Composants d'interface utilisateur et modèles d'éléments Visual Studio pour permettre à chaque développeur, quelle que soit son expérience, de créer des applications mobiles modernes d'aspect professionnel pour iOS, Android et UWP.

Structure de l'application

Les différents modules de cet exemple d'application Xamarin.Forms sont séparés dans des dossiers dont les noms sont descriptifs et tout à fait standard pour les projets d'une telle taille. Certains des dossiers les plus importants que nous avons introduits sont:

Modèles : C'est là que vivent les objets métier.
PageModels : Les classes utilisées comme BindingContext pour chaque page (ou vue) distincte se trouvent ici.
Pages: Héberge les différentes vues / pages que l'application présentera.
DataAccess: Les classes liées à la base de données utilisée pour stocker les données de l'application se trouvent dans ce dossier.
Contrôles : Il contient quelques petits contrôles personnalisés supplémentaires qui sont utilisés dans les pages.
Services : L'application ne contient actuellement qu'un seul ToDoService qui prend en charge le stockage et mise à jour des données utilisées dans l'application.

MVVMFresh – Une implémentation de framework MVVM légère conçue pour Xamarin.Forms

Le modèle MVVM est un standard pour les applications de toute échelle dans le monde Xamarin et c'est pas exception. Comme mentionné dans la présentation, le projet s'appuie sur le framework MVVMFresh pour garder le modèle et les pages organisés afin que la solution puisse être facilement comprise par tous les utilisateurs qui ont l'intention de l'inspecter. Le framework est célèbre dans la communauté Xamarin pour être facile et simple à utiliser, ce qui le rend parfaitement adapté à l'objectif de notre projet.

Pour connecter les vues et leurs modèles, il vous suffit de suivre la convention dans la dénomination – chaque Page doit avoir un PageModel correspondant. Par exemple, le BindingContext du MainPage sera automatiquement défini comme une instance de la classe MainPageModel .

La navigation dans l'application est également assez simple – vous pouvez utiliser la propriété CoreMethods de la classe FreshBasePageModel qui est la classe de base de tous les PageModels de l'application, pour naviguer entre les modèles.

Pour plus d'informations sur les différentes fonctionnalités supportées par le framework, vous pouvez vous référer à sa documentation assez descriptive – MVVM Fresh .

Data Access

Comme mentionné précédemment, nous utilisons EntityFrameworkCore et sa capacité intégrée de communiquer facilement avec une base de données SQLite pour alimenter la capacité d'accès aux données de cet exemple d'application Xamairn.Forms. À cette fin, quelques packages NuGet sont installés:

Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.SQLite

Les classes nécessaires pour EF se trouvent toutes dans le dossier DataAccess . Vous pouvez noter qu'il existe un dossier DTO où se trouvent les Objets de transfert de données (les objets utilisés pour envoyer des données entre notre application et la base de données sous-jacente). Comme vous pouvez le constater, ils sont presque identiques aux objets du dossier Models et prennent en charge les informations que nous souhaitons conserver dans notre base de données. La classe DomainMapper contient des méthodes de conversion entre ces objets identiques.

De plus, nous avons ajouté des exemples d'éléments dans la base de données afin que les utilisateurs de l'application puissent voir une fois certaines tâches à faire. l'application est initialement ouverte. L'exemple de création de données peut être visualisé dans la classe SeedData .

La dernière et dernière classe des couches DataAccess est la classe TodoItemContext qui étend Entity Framework DbContext classe. Comme indiqué dans la documentation officielle, la classe DbContext peut être vue comme une session entre votre application et la base de données et peut être utilisée pour interroger la base de données ou la mettre à jour avec de nouvelles informations si nécessaire. Il se compose de DbSets pour les différents objets DTO que nous avons. Ce DbContext est largement utilisé dans la classe ToDoService où les méthodes réelles d'interrogation et de mise à jour de la base de données sont implémentées.

Comme les systèmes de fichiers sur chaque technologie mobile diffèrent, nous avons introduit un IDbFileProvider qui nécessite que ses implémentations mettent en place une seule méthode— GetLocalFilePath . Une implémentation différente de l'interface est fournie par des classes dans chaque plate-forme distincte afin de créer la base de données au bon emplacement. L'approche Xamarin.Forms DependencyService est utilisée pour obtenir les différents emplacements en fonction de la plate-forme sur laquelle l'application s'exécute.

La création de la base de données réelle se trouve dans le fichier App.xaml.cs :

 public static DataAccess.TodoItemContext CreateDatabase () 
 {
 IDbFileProvider dbFileProvider = DependencyService.Get  (); 
 if (dbFileProvider == null) 
 return null; 
 
 // Database 
 string dblocation = dbFileProvider.GetLocalFilePath ("tododb.db"); 
 System.Diagnostics.Debug.WriteLine ($ "Emplacement de la base de données: {dblocation}"); 
 DataAccess.TodoItemContext ctx = DataAccess.TodoItemContext.Create (dblocation); 
 return ctx; 
}

Services

Pour revenir à notre aperçu technologique précédent, les services applicatifs se composent d'un seul ToDoService qui s'occupe d'ajouter, de supprimer, de mettre à jour les éléments "to-do" dans l'application ou simplement d'obtenir une liste des éléments existants. Voici quelques méthodes fournies par le service: la première est utilisée pour obtenir un élément "à faire" spécifique de la base de données et la seconde pour ajouter un élément "à faire":

 public TodoItem GetTodoItem (int id) 
 {
 return context.TodoItems 
 .Where (c => c.ID == id) 0 
 .Include (c => c.Category) 
 .Include (c => c.Alert) 
 .ThenInclude (c => c.Alert) 
 .Include (c => c.Recurrence) 
 .ThenInclude (c => c.Recurrence) 
 .Include (c => c.Priority) 
 .SingleOrDefault () ?. ToModel (true); 
} 
 public async Task  AddTodoItemAsync (TodoItem newItem) 
 {
 var dto = newItem.ToDTO (); 
 var entity = this.context.TodoItems.Add (dto); 
 try 
 {
 wait this.context.SaveChangesAsync (); 
} 
 catch (Exception e) 
 {
 System.Diagnostics.Deb ug.WriteLine (e); 
 throw e; 
} 
 TodoItem storedItem = GetTodoItem (entity.Entity.ID); 
 MessagingCenter.Send  (this, ActionAdd, storedItem); 
 return storedItem;}

Implémentation frontend: la couche d'interface utilisateur et les contrôles Telerik pour Xamarin.Forms

Nous avons intégré plusieurs contrôles de notre suite Telerik UI pour Xamarin dans l'application afin que nous puissions facilement obtenir une apparence moderne conçue par notre conception

L'intégration des contrôles était simple et directe – il vous suffit de suivre notre documentation sur laquelle nous travaillons toujours pour qu'elle soit à jour et contienne les bonnes informations pour vous. Même les membres de notre équipe l'utilisent souvent comme référence lors de la création d'applications de démonstration ou pour fournir des exemples à nos clients.

L'application se compose de plusieurs écrans, donc aux fins de l'article de blog, nous nous concentrerons sur certaines des vues les plus importantes et vous montrerons la configuration derrière elles.

Page d'introduction et RadSlideView

L'une des premières pages auxquelles l'utilisateur est confronté est l'écran «Bienvenue» qui utilise le contrôle RadSlideView et sa capacité à définir directement un ItemTemplate , Ce qui en fait une solution idéale pour tout scénario ou vue «Splash Screen» où un contenu glissant est requis. Le code d'amorçage de l'élément SlideView est petit et serré:

 <telerikPrimitives: RadSlideView x: Name = "slideView" 
 Grid.Row = "1" 
 Margin = "0,38,0,34" 
 ItemsSource = "{Reliure Slides}" 
 ShowButtons = "Faux" 
 IndicatorColor = "# F2F2F3" 
 SelectedIndicatorColor = "# 4DA3E0">

Comme vous pouvez le voir, il suffit de définir le ItemsSource le ItemTemplate et certaines propriétés supplémentaires du contrôle conduit à un résultat qui rendra chaque application mobile meilleure et plus professionnelle. Voici la "page d'accueil" réelle lors de l'ouverture initiale de l'application:

Page principale et RadListView

Une fois que les utilisateurs se sont familiarisés avec les fonctionnalités les plus importantes de l'application dans l'écran d'introduction, ils sont amenés à la page principale – la liste réelle des éléments que l'utilisateur a dans ses plans de tâches . Par défaut, une liste au format grille contenant les catégories dans lesquelles les éléments "à faire" sont regroupés est affichée. La vue est uniquement obtenue en incluant un contrôle RadListView . Comme l'un des plus- contrôles complexes et riches en fonctionnalités dans la suite, il peut être hautement personnalisé afin d'obtenir un look plus distingué. Voici quelques-unes de ses fonctionnalités que nous avons utilisées dans cette vue particulière:

  
 <telerikListView: ListViewGridLayout HorizontalItemSpacing = "0" 
 ItemLength = "1 00 "
 SpanCount =" 2 "
 VerticalItemSpacing =" 0 "/>

 <telerikDataControls: RadListView Grid.Row = "1" 
 ItemsSource = "{Catégories de reliure}" 
 ItemStyle = "{StaticResource UnifiedItemStyle}" 
 SelectedItemStyle = "{StaticResource" UnifiedItemStyle = "{StaticResource" UnifiedItemStyle 
} PressedItemStyle = "{StaticResource UnifiedItemStyle}" 
 SelectedItem = "{Binding SelectedCategory, Mode = TwoWay}">

Voici comment les différentes catégories seront visualisées lors de l'utilisation d'une telle configuration:

un dépôt GitHub ici .

En cliquant sur chaque catégorie distincte, ouvrir un nouvel écran où les éléments «à faire» marqués avec cette catégorie spécifique seront affichés. La nouvelle vue est à nouveau réalisée via un composant RadListView cette fois en mode LinearLayout . Sur cette page, les utilisateurs ont la possibilité de marquer un élément comme déjà terminé, ce qui le rayera ou le supprimera. La fonction de balayage de RadListView vient à la rescousse pour réaliser ces interactions:

Autre aspect avec RadTreeView

Même dans cet état, l'application contient toutes les actions nécessaires pour un l'utilisateur doit ajouter différents éléments et catégories et les modifier. Cependant, nous avons décidé de fournir une option supplémentaire aux clients lorsqu'ils choisissent la manière dont la liste des éléments apparaîtra dans leur application. Au lieu d'utiliser la vue de type Grille par défaut, le L'application fournit une option pour afficher les éléments dans une liste avec des catégories sous forme de groupes. Pour afficher cette vue, il vous suffit de cliquer sur le menu hamburger à droite où des options supplémentaires apparaîtront:

DrawerContent d'un contrôle RadSideDrawer qui est utilisé pour affichez facilement les options en cliquant sur le bouton ou par un geste de balayage. Cliquer sur "Affichage linéaire" modifiera la disposition par défaut comme expliqué et conduira à la vue suivante:

Rad TreeView pour obtenir l'apparence hiérarchique des catégories et des éléments. Cliquez sur les différentes catégories pour réduire / développer la liste ci-dessous. Lors de la configuration du composant TreeView, il est important d'appliquer les bons TreeViewDescriptors qui ont la capacité d'appliquer différents modèles d'élément similaires à l'élément RadListView:

 <telerikDataControls: RadTreeView x: Name = "treeView" Grid.Row = "1" 
 ItemsSource = "{Catégories de reliure}"> 
 
 
 
 
 
 
 [19659125]

Comme vous pouvez le voir, des descripteurs séparés sont définis pour les objets métier Category et ToDoItem et un ItemTemplateSelector personnalisé est défini pour la catégorie comme nous le souhaitons une apparence similaire à RadListView.

Une fois que vous avez parcouru le projet réel, vous remarquerez que le composant RadListView est utilisé à plusieurs reprises dans toute l'application car le contrôle est très polyvalent et est utile pour de nombreux scénarios mobiles courants. D'autres éléments de la suite Telerik UI pour Xamarin qui sont utilisés dans toute l'application sont les commandes RadButton RadBorder et RadPopup . [19659003] Conclusion

L'exemple d'application Telerik ToDo est un exemple parfait d'une application destinée aux consommateurs du monde réel qui peut être créée avec Xamarin.Forms en un rien de temps. Nous espérons que vous aimerez l'approche que nous avons choisie pour créer l'exemple d'application Xamarin.Forms "To-Do" et vous la trouverez utile lors de l'examen de l'architecture globale de votre prochain développement mobile Xamarin.

Comme cet article de blog vise à vous familiariser avec la configuration et à ne fournir qu'un aperçu des technologies, nous vous suggérons de consulter le projet réel que nous avons rendu public. Vous pouvez également consulter certains des autres exemples d'applications que nous avons créés, car chacun représente un scénario unique et utilise des infrastructures et des technologies supplémentaires.

Si vous souhaitez en savoir plus sur les commandes disponibles dans l'interface utilisateur Telerik pour la suite Xamarin, reportez-vous à notre documentation officielle ou consultez notre page produit . D'autres ressources utiles sont les démos disponibles dans nos applications QSF et SDK Samples ou les applications de démonstration des différents magasins de plates-formes— iOS Android ou Microsoft .

Comme toujours, vos commentaires sont grandement appréciés donc si vous souhaitez voir une combinaison de l'interface utilisateur Telerik pour les commandes Xamarin et d'une technologie de tendance particulière, faites-le nous savoir en levant un ticket ou en écrivant dans le forum officiel Telerik UI pour Xamarin .

Vous voulez faire un test avec l'application Telerik ToDo? Téléchargez l'interface utilisateur de Telerik pour Xamarin et dirigez-vous vers GitHub pour le code source de Telerik ToDo.

Vous voulez plonger dans tous les exemples d'applications Xamarin.Forms de Telerik? Téléchargez notre livre blanc!

The Ultimate Guide to Xamarin.Forms Mobile Development with Real-World Sample Applications

Source link