La saisie masquée peut aider à guider les utilisateurs lorsqu’ils saisissent des données, comme l’ajout de numéros de carte de crédit ou de téléphone dans les champs du formulaire avec le formatage correct. Ce contrôle simple peut considérablement améliorer l’UX de votre application de commerce électronique .NET MAUI !
Comme le dit un sentiment populaire du service client : « Plus vos clients seront choyés, plus ils vous aimeront ! »
Et c’est exactement ce que nous visons lorsque nous développons des applications : créer des expériences qui facilitent la vie des utilisateurs.
Il existe de nombreux scénarios dans lesquels nous pouvons y parvenir, mais l’un des plus courants est celui où les utilisateurs doivent saisir des données dans un format spécifique, comme un numéro de téléphone/de compte, une carte de crédit ou un code PIN.
Et soyons honnêtes… Combien de fois avons-nous été frustrés de ne pas savoir comment saisir correctement ces entrées ?
Par exemple, imaginez qu’un utilisateur doive saisir son numéro de carte de crédit dans l’application. Ce numéro contient généralement 16 chiffres (ce qui est déjà beaucoup) et suit généralement un format comme 1234-5678-9012-3456. Imaginez maintenant devoir saisir manuellement ces tirets. cela semble fastidieux, sujet aux erreurs et loin d’être une expérience fluide.
Mais tout change lorsque l’application guide l’utilisateur lors de la saisie, en formatant automatiquement le numéro pour qu’il corresponde à la présentation attendue de la carte de crédit. Cela réduit non seulement le risque d’erreurs, mais permet également à l’utilisateur de se sentir plus à l’aise, plus confiant et plus susceptible de considérer votre application comme une alliée qui lui facilite la vie.
Ces petits détails peuvent faire une grande différence dans l’expérience utilisateur globale. C’est pourquoi, dans cet article, j’aimerais vous expliquer Contrôle .NET MAUI MaskedEntry de Progress Telerik Interface utilisateur pour .NET MAUIun outil qui vous aide à guider les utilisateurs en appliquant les formats d’entrée dès le premier clic.
Alors, qu’est-ce que le contrôle MaskedEntry exactement ?
.NET MAUI MaskedEntry est un contrôle de Telerik UI pour .NET MAUI qui vous permet d’appliquer des formats de saisie et de valider les champs de texte, guidant les utilisateurs pour saisir correctement les données dès le début. Ce contrôle fait partie des plus de 60 composants d’interface utilisateur professionnels inclus dans la bibliothèque Telerik UI pour .NET MAUI.
Exemples d’utilisation du monde réel
Parlons maintenant de quelques exemples concrets où ce type de contribution guidée fait vraiment la différence.
Numéros de carte de crédit et de compte
Imaginez que vous effectuez un paiement ou un virement bancaire depuis votre application et que vous atteignez le champ où vous devez saisir un numéro de carte ou de compte. Cela nécessite une longue séquence de chiffres, généralement regroupés en blocs, comme 16 chiffres pour une carte de crédit ou 12 chiffres pour un numéro de compte, généralement séparés par des tirets.
Mais le champ de saisie est complètement vide. Il ne montre pas de format, il ne vous guide pas. Vous commencez à taper rapidement, comme toujours, et vous obtenez quelque chose comme : 123456789012 ou 1234567890123456.
Vous remarquez quelque chose qui ne va pas ? Il vous manque les tirets requis. Il faut maintenant s’arrêter, revenir en arrière et ajouter les séparateurs manquants.
Imaginez maintenant une meilleure expérience : dès que vous commencez à taper, le champ vous guide avec le format attendu. Vous n’avez même pas besoin de taper les tirets : ils sont déjà là.
Tout ce que vous avez à faire est de saisir les chiffres et MaskedEntry s’occupe du reste. 😎
C’est ce que fait une entrée masquée. Il ne s’agit pas seulement de restreindre ce que l’utilisateur peut saisir, il s’agit de le guider vers le bon format sans le faire trop réfléchir.
Codes PIN
Imaginez ceci : vous êtes dans une application et essayez de modifier votre mot de passe. Il vous demande de saisir un code PIN à quatre chiffres pour vérifier votre identité. Mais le champ de saisie n’a aucune validation, aucun guidage visuel.
Que se passe-t-il si vous saisissez accidentellement cinq chiffres au lieu de quatre ? Ou si vous appuyez sur une lettre sans vous en rendre compte, même si le code PIN ne doit être que numérique ? Et vous ne remarquez l’erreur qu’après plusieurs tentatives infructueuses. Ce n’est pas seulement frustrant : cela affecte le niveau de sécurité de votre application.
Imaginez maintenant le contraire : dès que vous appuyez sur le champ, vous savez immédiatement qu’il attend quatre nombres. Un espace réservé vous guide et le champ ne vous permettra pas de saisir plus ou moins que ce qui est requis. Cela prend deux secondes et vous avez terminé.
Voyons maintenant à quoi ressemble le contrôle MaskedEntry
Pour vous aider à mieux le comprendre, jetez un œil à l’exemple dans l’image. Il comprend plusieurs champs (comme le téléphone, l’adresse IP et l’e-mail), chacun avec des validations différentes en fonction de ce qui est requis.
Remarquez comment chaque champ a un format spécifique, permettant une expérience de saisie plus claire, plus guidée et personnalisée en fonction du type d’informations saisies.
Mise en place de l’environnement de mise en œuvre 🤩
Maintenant que vous avez exploré ses avantages, il est temps de voir comment l’utiliser dans votre propre application. Ne vous inquiétez pas, démarrer est très simple avec l’essai gratuit de Progress Telerik. Tout d’abord, procédez comme suit :
- Assurez-vous que votre application .NET MAUI est configurée
- Téléchargez l’interface utilisateur Telerik pour .NET MAUI
- Installez le composant Telerik dans votre projet
Après avoir installé le composant Telerik dans votre projet, vous serez entièrement équipé pour commencer à créer votre solution.
Étape 1 : Importez l’espace de noms Telerik
Ouvrez votre fichier XAML et ajoutez cette ligne pour inclure les contrôles Telerik :
xmlns:telerik="[http://schemas.telerik.com/2022/xaml/maui](http://schemas.telerik.com/2022/xaml/maui)"
Étape 2 : Enregistrez Telerik dans MauiProgram.cs
Rendez-vous chez vous MauiProgram.cs fichier, et à l’intérieur du CréerMauiApp méthode, n’oubliez pas d’ajouter .UtiliserTelerik() pour inscrire la bibliothèque. Assurez-vous simplement que cela se fasse avant .UtilisezMauiApp().
using Telerik.Maui.Controls.Compatibility;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseTelerik()
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
return builder.Build();
}
}
Étape 3 : ajout de l’espace de noms
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
Vous êtes prêt à ajouter le contrôle ! Passons maintenant à la section suivante, où je vais vous montrer un exemple de la façon de l’implémenter pour chaque type de masque disponible dans le contrôle.
Types d’entrées masquées
Le contrôle MaskedEntry permet de définir le type de masque de saisie qu’un champ utilisera via la propriété Mask. Cette propriété peut inclure des caractères littéraux et spéciaux, selon le type d’entrée que vous devez configurer.
Au total, ce contrôle prend en charge cinq types de masques pour couvrir différents besoins au sein de votre application :
Texte
Le texte type valide la saisie de texte générale.
Progress Telerik propose une grande variété d’options de masque qui vous permettent de contrôler le type de saisie autorisé, des chiffres et des lettres aux caractères facultatifs et même aux symboles. Vous pouvez consulter la liste de références pour voir le tableau complet des options disponibles.
Regardons un exemple de masque pour un numéro de compte bancaire, où :
▪️Chacun 0 représente un chiffre requis dans le format.
▪️ Les tirets (-) sont fixes et ne peuvent pas être déplacés ou supprimés : ils restent toujours à la même position dans le format de saisie.
▪️ Le résultat est un champ qui oblige l’utilisateur à saisir un numéro de compte bancaire au format suivant : 1234-5678-9012.
<telerik:RadTextMaskedEntry
x:Name="accountNumberEntry"
Mask="0000-0000-0000"
AutomationId="accountMask" />
Numérique
Le numérique type vérifie que seules des valeurs numériques sont saisies (peut être de type double ou décimal).
Vous pouvez définir l’un des Spécificateurs de format numérique standard.
Maintenant, en nous basant sur ce même exemple, voyons comment appliquer le masque de pourcentage.
<telerik:RadNumericMaskedEntry Mask="P" AutomationId="numericMaskP"/>
Examinons maintenant un autre exemple : cette fois-ci, nous appliquons le masque Devise.
<telerik:RadNumericMaskedEntry Mask="C" AutomationId="numericMaskC"/>
Expression régulière
Le expression régulière type est idéal pour les formats personnalisés, car il valide que la saisie de l’utilisateur (généralement alphanumérique) correspond à une expression régulière spécifique. C’est mon préféré! ⭐ La propriété value est une chaîne. Telerik vous permet d’utiliser une variété d’expressions régulières pour définir précisément ce qui peut être saisi dans le champ. (Vous pouvez consulter la liste complète dans le documentation officielle.)
Essayons l’exemple suivant, dans lequel l’utilisateur est uniquement autorisé à saisir des lettres et des chiffres, sans espaces ni caractères spéciaux.
Voici ce que cela fait :
▪️L’expression ^[a-zA-Z0-9]{6}$ ça veut dire exactement 6 alphanumériques les caractères sont autorisés.
▪️ Si l’utilisateur saisit moins ou plus de caractères, ou inclut des symboles spéciaux, le champ affichera une erreur.
<telerik:RadRegexMaskedEntry
x:Name="accountCodeEntry"
Mask="^[a-zA-Z0-9]{6}$"
Placeholder="Enter 6 alphanumeric characters"
AutomationId="regexMask" />
Adresse IP
Le Adresse IP le type capture et valide les adresses IP avec précision. La propriété value est une chaîne.
Jetons un coup d’œil à un exemple de la façon de procéder !
<telerik:RadIPMaskedEntry AutomationId="ipMask"/>
Le e-mail type vérifie que l’utilisateur saisit une adresse e-mail valide. La propriété Value est une chaîne.
Jetons un coup d’œil à un exemple de la façon de procéder !
<telerik:RadEmailMaskedEntry AutomationId="emailMask"/>
Conclure
Et c’est tout ! 😎 En quelques minutes seulement, vous avez appris à travailler avec le Telerik Entrée masquée contrôle et toutes les fonctionnalités qu’il offre, y compris les différents types de masques que vous pouvez utiliser dans votre .FILET candidatures.
J’espère que cela vous a été utile et que vous commencerez désormais à l’intégrer dans vos applications !
N’oubliez pas que Telerik UI pour .NET MAUI est livré avec un essai gratuit de 30 jours, alors allez-y :
Merci d’avoir lu! 💚💕
Références
Source link