Édition parfaite des données dans votre application avec DataForm de Telerik pour .NET MAUI

Codez les formulaires de données de votre application pour garantir la meilleure expérience à vos utilisateurs, quelle que soit la plate-forme sur laquelle ils se trouvent, avec DataForm for .NET MAUI de Telerik.

Facile, rapide et élégant avec DataForm de Telerik pour .NET MAUI

La capacité à travailler avec des données est l’un des éléments indispensables de la boîte à outils d’un bon développeur. CRUD est un mot magique que nous connaissons tous—Cresponsabilité Rlire, tudate et Dsupprimer des données. Cependant, cette partie du processus de développement n’est pas toujours la plus amusante ; ce n’est pas un favori pour beaucoup d’entre nous.

Quand on parle de technologie multiplateforme, nous voulons dire que nous essayons d’écrire le code une fois mais que nous avons une sortie différente par plate-forme. Cependant, la représentation des données de manière intuitive et esthétique à la fois sur mobile et sur ordinateur rend la tâche de codage encore plus difficile. Ajoutez maintenant la validation, les différents types de champs par plateforme, et on rêve déjà d’une pause-café ☕ avant même d’implémenter cette partie de l’application.

Si cela vous semble familier, attendez et lisez le nouveau Formulaire de données du progrès Interface utilisateur Telerik pour .NET MAUI.

Ce composant est conçu pour vous faire gagner du temps et vous permettre de fournir une interface utilisateur d’édition de données attrayante et personnalisable en un rien de temps. Telerik DataForm comprend tout ce dont vous avez besoin :

• Une variété d’éditeurs intégrés et personnalisables
• Assistance à la validation
• Regroupement
• Prise en charge des annotations de données
• Localisation
• Une API riche pour assurer une personnalisation parfaite pour votre cas d’utilisation

Ça sonne bien, non ? 😊 Maintenant, voyons comment l’utiliser.

Utilisation de base

Tout d’abord, ajoutons l’interface utilisateur Telerik à une application .NET MAUI déjà existante. Si vous connaissez déjà le processus d’installation, vous pouvez ignorer les trois premières étapes, car elles s’appliquent à chaque composant Telerik .NET MAUI.

Étape 0. Téléchargez et installez l’interface utilisateur Telerik pour .NET MAUI

Vous pouvez télécharger l’interface utilisateur Telerik via Telerik NuGet Server directement depuis Visual Studio ou téléchargez-le depuis votre compteinstallez les fichiers MSI ou PKG et reportez-vous aux bits locaux.

Tu peux trouver instructions de téléchargement complètes ici.

Étape 1. Appelez UseTelerik

N’oubliez pas d’appeler le UseTelerik() dans le fichier MauiProgram.cs de votre projet Maui. Vous devrez le faire pour tous les composants Telerik UI pour .NET MAUI, comme UseMAUI(). Enregistrez tous les gestionnaires intégrés ou créés en plus dans les composants Telerik.

Étape 2. Ajouter un espace de noms Telerik au schéma Telerik XAML

Cela permet d’accéder à tous les composants Telerik en XAML :

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Étape 3.Définir le DataForm

Vous pouvez définir le formulaire de données dans cette partie de l’application où vous en avez besoin, à la fois en C# ou en XAML.

C#

RadDataForm myForm = new RadDataForm();

XAML

<telerik:RadDataForm x:Name="dataForm"/>

Étape 4. Définir BindingContext

Pour rendre une belle forme, il suffit tout à fait de lier son BindingContext à une instance de votre objet de données comme ceci :

   <telerik:RadDataForm.BindingContext>
                <local:FeedBackFormViewModel/>
  </telerik:RadDataForm.BindingContext>

Le FeedbackFormViewModel est une instance d’une classe de modèle de vue décrivant tous les champs nécessaires pour envoyer des commentaires :

public class FeedBackFormViewModel : NotifyPropertyChangedBase
    {
        private string firstName;
        private string lastName;
        private string email;
        private string location;
        private double rating;
        private string comments;
        private bool? willJoinNextTrip = false;

......................................
}

Le formulaire générera ses éditeurs et groupes automatiquement ! 😊

Vous pouvez vous arrêter ici ou vous pouvez commencer à explorer toutes les fonctionnalités personnalisables offertes par les commandes.

Utilisation avancée – Personnalisez pour répondre à vos besoins

Formulaire de données Telerik dispose d’une API riche pour personnaliser et configurer la représentation de vos données. Commençons à configurer notre exemple avec cette API :

Nous pouvons utiliser le DataAnotations support pour configurer quels champs sont Requiredle DisplayedName du champ, et toutes les autres propriétés communes prises en charge par System.ComponentModel.DataAnnotations.

Par exemple, notre ViewModel ressemble à ceci en utilisant DataAnnotations:

public class FeedBackFormViewModel : NotifyPropertyChangedBase
    {
        private string firstName;
        private string lastName;
        private string email;
        private string location;
        private double rating;
        private string comments;
        private bool? willJoinNextTrip = false;

        [Required]
        [Display(Name = "First Name", Prompt = "Enter Fist Name")]
        public string FirstName
        {
            get => this.firstName;
            set => this.UpdateValue(ref this.firstName, value);
        }


        [Required]
        [Display(Name = "Last Name", Prompt = "Enter Last Name")]
        public string LastName
        {
            get => this.lastName;
            set => this.UpdateValue(ref this.lastName, value);
        }


        [Required]
        [EmailAddress]
        [Display(Name = "Email", Prompt = "Enter Email")]
        public string Email
        {
            get => this.email;
            set => this.UpdateValue(ref this.email, value);
        }


        [Required]
        public string Location
        {
            get => this.location;
            set => this.UpdateValue(ref this.location, value);
        }


        [NotMapped]
        public ObservableCollection<string> Locations
        {
            get => this.locations;
            set => this.UpdateValue(ref this.locations, value);
        }

        [Required]
        [Display(Name = "Rate your experience")]
        public double Rating
        {
            get => this.rating;
            set => this.UpdateValue(ref this.rating, value);
        }

        [Display(Name = "Additional comments")]
        public string Comments
        {
            get => this.comments;
            set => this.UpdateValue(ref this.comments, value);
        }

        [Required]
        [Display(Name = "Will attend next trip")]
        public bool? WillJoinNextTrip
        {
            get => this.willJoinNextTrip;
            set => this.UpdateValue(ref this.willJoinNextTrip, value);
        }
    }

Pour plus de détails et une liste complète des DataAnnotationsconsultez la documentation Telerik.

Vous pouvez également définir tous les éditeurs manuellement. Définir les formulaires de données AutoGenerateItems propriété à False et décrivez les champs, comme suit :

<telerik:RadDataForm x:Name="dataForm" 
                             AutoGenerateItems="False"
>
            <telerik:RadDataForm.BindingContext>
                <local:FeedBackFormViewModel/>
            </telerik:RadDataForm.BindingContext>
            <telerik:DataFormRadEntryEditor PropertyName="FirstName"/>
            <telerik:DataFormRadEntryEditor PropertyName="LastName"/>
… </telerik:RadDataForm>

Vérifiez liste complète des 14 éditeurs intégrés pris en charge par Telerik DataForm.

Si tu as un Xamarin.Forms projet utilisant Telerik DataForm, voici comment migrez-le vers Telerik DataForm pour .NET MAUI.

Alors que Telerik DataForm propose 14 éditeurs intégrés, nous pouvons parfois avoir besoin d’une interface utilisateur différente. Heureusement, vous pouvez ajouter un éditeur qui n’est pas intégré en définissant DataFormCustomEditor.

Pour ajouter un éditeur personnalisé, ajoutez DataFormCustomEditor et modifier son EditorTemplate propriété. Dans notre exemple, nous ajouterons un RadRating pour représenter la fonctionnalité d’évaluation :

 <telerik:DataFormCustomEditor PropertyName="Rating">
                <telerik:DataFormCustomEditor.EditorTemplate>
                    <ControlTemplate>
                        <telerik:RadShapeRating ItemsCount="5" 
                                                Value="{Binding Value, Mode=TwoWay, Source={RelativeSource Mode=TemplatedParent}}"/>
                    </ControlTemplate>
                </telerik:DataFormCustomEditor.EditorTemplate>
            </telerik:DataFormCustomEditor>

Tu peux trouver documentation sur les éditeurs personnalisés ici.

Vous pouvez également choisir une mise en page afin d’avoir la meilleure expérience par plateforme. Choisissez entre trois valeurs pour définir le LayoutDefinition propriété:

• VerticalStackLayout
• GridLayout
• CustomLayout

Pour notre exemple, je vais définir GridLayout pour les plates-formes de bureau et VerticalStackLayout pour mobile :

<telerik:RadDataForm x:Name="dataForm" 
                     AutoGenerateItems="False"                                      			     LayoutDefinition="{OnIdiom Default={StaticResource gridLayout},Phone={StaticResource stackLayout}}">
…</ telerik:RadDataForm>

Noter que GridLayout et StackLayout sont utilement définis comme des ressources ici :

  <telerik:DataFormVerticalStackLayout x:Key="stackLayout" />
  <telerik:DataFormGridLayout x:Key="gridLayout" />

Dans le tableau suivant, vous pouvez voir les résultats de tous les paramètres que nous avons ajustés jusqu’à présent :

Sur le bureau

Sur le mobile

Si vous avez besoin d’un autre type de mise en page, par exemple, WrapLayout, HorizontalStack ou autre chose : vous pouvez définir une instance de DataFormCustomLayout au LayoutDefinition property:

<telerik:RadDataForm.LayoutDefinition>
  <telerik:DataFormCustomLayout>
    <telerik:DataFormCustomLayout.LayoutTemplate>
      <DataTemplate>
        <telerik:RadWrapLayout/>
      </DataTemplate>
    </telerik:DataFormCustomLayout.LayoutTemplate>
  </telerik:DataFormCustomLayout>
</telerik:RadDataForm.LayoutDefinition>

Vous pouvez en savoir plus sur définition des mises en page dans la documentation Telerik.

L’en-tête est également personnalisable grâce à un ensemble de propriétés, telles que :

• HeaderText
• HeaderPosition
• HeaderTemplate

Puisque nous voulons créer la meilleure expérience par plateforme dans notre exemple, nous en utiliserons une HeaderPosition pour mobile et un autre pour ordinateur :

HeaderPosition="{OnIdiom Default=Above, Phone=Beside}"

Vous pouvez trouver un liste complète des propriétés ici.

La validation et la validation des données sont des fonctionnalités très importantes pour ce contrôle. Heureusement, Telerik DataForm est conçu pour faciliter tous les scénarios possibles grâce à son API intuitive et riche. Tout d’abord, vous pouvez choisir le moment exact où ces actions se produisent :

• Sur LostFocus
• Explicitement lors de la soumission du formulaire
• Sur PropertyChanged

La propriété pour contrôler le mode de validation est CommitModeet la propriété responsable de la validation est ValidationMode. Vous pouvez définir ces propriétés sur l’ensemble du DataForm ou sur un champ explicite.

<telerik:RadDataForm x:Name="dataForm" 
  CommitMode="Explicit"
  ValidationMode="Explicit"
  LayoutDefinition="{OnIdiom Default={StaticResource gridLayout},
    Phone={StaticResource stackLayout}}">...

Lorsque nous réglons le mode sur Explicitnous devrons peut-être appeler le ValidateChanges() pour exécuter la logique de validation associée au contrôle DataForm. La méthode retourne true si la validation passe, sinon
false.

Le récapitulatif de validation et les messages d’erreur peuvent également être personnalisés par l’API riche de DataForm, y compris les événements, les commandes et les propriétés :

• ValidateCommand(ICommand) – Obtient une commande pour exécuter la logique de validation du RadDataForm. Cette commande est surtout utile lorsque DataForm ValidationMode la propriété est définie sur Explicit.
• IsValidationSummaryVisible(bool) – Définit la propriété sur True/False.
• ErrorImageSource(ImageSource) – Spécifie le ImageSource de l’image affichée dans le message d’erreur.
• ErrorImageStyle(Style) – Spécifie le style appliqué à l’image du message d’erreur. Le type cible de ce style est le contrôle .NET MAUI Image.
• ErrorLabelStyle

Vérifiez documentation d’aide à la validation.

L’API prend également en charge la localisation des messages d’erreur. Pour localiser un message d’erreur dans n’importe quelle langue, traduisez les clés respectives suivantes ces consignes.

Bien que DataForm apporte une apparence et une convivialité natives synchronisées avec le système d’exploitation que vous ciblez, vous pouvez toujours modifier son style en jouant avec les paramètres de l’API:

• BorderThickness
• BackGroundColor
• BorderColor
• HeaderStyle
• ValidationSummary
• EditorStyle
• Style de groupe
• Et beaucoup plus

Comme vous pouvez le voir, le DataForm de Telerik est très riche et a tout ce qu’il faut pour accélérer votre processus de développement et offrir le meilleur UX à vos utilisateurs finaux. Essayez-le maintenant et jetez un coup d’œil à la suite complète de plus de 55 composants d’interface utilisateur personnalisables qui Interface utilisateur Telerik pour .NET MAUI des offres.

S’il y a un composant ou une fonctionnalité qui vous semble manquant ou si vous avez des questions ou des commentaires, n’hésitez pas à nous contacter. La mission de Progress Telerik est de soutenir le développeur .NET, quelle que soit la pile technologique avec laquelle vous travaillez !

Vous pouvez trouver l’exemple complet et de nombreuses autres illustrations de la puissance de RadDataForm pour le SDK Telerik et Échantillons de contrôles Telerik.