UI for Xamarin Deep Dive: efficacité de frappe avec la saisie semi-automatique

Bienvenue au cinquième jour de notre interface utilisateur pour la série d'articles Xamarin. . Vous avez survécu aux longues lectures! Du côté positif, espérons que votre application mobile se marie bien en utilisant des contrôles d'interface utilisateur polis spécialisés. Terminons la semaine par quelque chose de léger, mais d’important – la cerise sur le gâteau, pour ainsi dire.

Soyons honnêtes – à part les adolescents, très peu de gens aiment écrire sur leurs appareils mobiles. Bien que les claviers, tant physiques que numériques, aient parcouru un long chemin, la dactylographie sur un appareil mobile est semée de fautes de frappe et de corrections automatiques frustrantes. Si et quand les utilisateurs de votre application mobile doivent taper, vous, en tant que développeur, devriez essayer de réduire la douleur et chercher à en faire une expérience agréable si possible.

La maxime de less est plus vrai – proposez des suggestions et autorisez l’utilisateur de taper le moins possible. Cela est vrai pour toute plate-forme mobile, mais met la responsabilité sur les développeurs. Il s'avère que la correspondance des modèles et les suggestions avec une interface utilisateur personnalisable lors de la frappe sont une tâche délicate.

Telerik La saisie semi-automatique dans UI pour Xamarin est un contrôle simple mais nifty – elle fournit suggestions personnalisables au fur et à mesure que l'utilisateur tape. Avec des options de liaison de données robustes, le contrôle de saisie semi-automatique permet aux développeurs de soulager facilement les utilisateurs en leur permettant de choisir un ou plusieurs éléments correspondants dans une liste. L’interface utilisateur correspondante est personnalisable et s’adapte aux nuances des plates-formes mobiles individuelles.

Cet article jette un regard critique sur le contrôle Telerik AutoComplete et sur ce qu’il peut faire pour les développeurs qui construisent des applications Xamarin.Forms.

Show Me the Money

Puisque voir c'est croire, voici un premier coup d'œil rapide sur un contrôle de saisie semi-automatique en état de fonctionnement, permettant ainsi de multiples sélections dans une liste de correspondance de motifs, ainsi qu'un aspect de couleur personnalisée.

Notions de base

Commençons par le contrôle AutoComplete sous sa forme la plus simple. Voici un code présentant le balisage XAML et alimentant essentiellement le contrôle AutoComplete avec une liste de chaînes. Lorsque l'utilisateur commence à taper, il effectue la mise en correspondance des modèles par défaut et aide à compléter la saisie en proposant des suggestions.

 // Balisage XAML
.. xmlns: telerikInput = "espace de nom clr: Telerik.XamarinForms.Input; assembly = Telerik.XamarinForms.Input" ..

 // code derrière
this.autoComplete.ItemsSource = nouvelle liste  ()
{
    "Freda Curtis",
    "Jeffery Francis",
    "Eva Lawson",
    "Emmett Santos",
    "Theresa Bryan",
    "Jenny Fuller",
    "Terrell Norris",
    "Eric Wheeler",
    "Eduardo Thomas",
    "Jarvis Victorine",
    "Danois Gabor"
 

Et voici le résultat – remarquez les différences nuancées d'une plate-forme mobile à l'autre

True Data Binding

En réalité, l'utilisation de la saisie semi-automatique nécessitera une liaison de données plus avancée et mieux contrôlée à une source de données à laquelle la correspondance de modèle sera appliquée. effectué au moment de l'exécution. Vous pouvez disposer d'une collection d'objets et souhaiter que le contrôle de saisie semi-automatique traite une propriété de texte de chaque objet comme source de données combinée.

Par exemple, lors de la création de mon application Aviation, qui présente différents plans et leurs vitesses maximales, j'ai commencé par un classe POCO simple, comme suit:

 public class JetData
{
    chaîne publique JetName {get; ensemble; }
    public int JetMaxSpeed ​​{get; ensemble; }

    JetData publique (Nom de chaîne, int MaxSpeed)
    {
        this.JetName = Nom;
        this.JetMaxSpeed ​​= MaxSpeed;
    }
}  

Ensuite, voici une fausse classe ViewModel destinée à contenir une collection de jets – des exemples de données sont constitués en ligne, comme ci-dessous:

 public class SpeedViewModel
{
    liste publique  JetDataSource;

    SpeedViewModel public ()
    {
        InitializeJetData ();
    }

    void privé InitializeJetData ()
    {
        JetDataSource = new List  ()
        {
            nouveau JetData ("Boeing Business Jet", 890),
            nouvelle JetData ("Gulfstream V", 965),
            nouvelle JetData ("Citation X", 1125),
            nouvelle JetData ("Bombardier Challenger 604", 882),
            nouvelle JetData ("Embraer Legacy", 834),
            nouvelle JetData ("Bombardier Learjet 60", 839),
            nouvelle JetData ("Beech Jet 400A", 866),
            nouvelle JetData ("Hawker 800XP", 829),
            nouveau JetData ("Citation V", 932)
        };
    }
}  

Avec une source de données en place, je peux maintenant lier correctement l'auto-complétion Telerik, comme suit:

 // Balisage XAML

 // code derrière
SpeedViewModel SVM = new SpeedViewModel ();
this.autoCompleteSearchBox.ItemsSource = SVM.JetDataSource;  

Notez que la collecte de données du ViewModel est alimentée par la propriété ItemSource du contrôle de saisie semi-automatique, alors que le paramètre TextSearchPath est défini sur une propriété spécifique de chaque objet. ] Flexibilité

Le contrôle Telerik AutoComplete expose quelques propriétés destinées à offrir une flexibilité aux développeurs lorsqu'ils utilisent le contrôle dans leurs applications.

• BackgroundColor : La couleur d’arrière-plan du texte pendant la saisie du texte par l'utilisateur
• TextSearchPath : Définit le nom de la propriété de l'objet pour lequel la fonction de recherche sera exécutée. 19659029] ImagePath : Définit le nom de la propriété de l'objet contenant un chemin d'accès à une image.
• CompletionMode : Définit le mode de correspondance de modèle en fonction du texte saisi par l'utilisateur | Values ​​- Contient / StartsWith
• DisplayMode : Définit si la saisie semi-automatique autorise les sélections simples / multiples | Valeurs – Text / Tokens

Dans l'exemple de l'application aviation, le balisage XAML pourrait être mis à jour pour utiliser certaines de ces propriétés, comme ci-dessous (le résultat correspondant suit):

Modèles de suggestion

Vous aimez les capacités de correspondance de motif du contrôle Telerik AutoComplete, mais souhaitez personnaliser davantage l'expérience utilisateur? Bien sûr, les développeurs peuvent avoir un contrôle plus fin sur la manière dont la liste des éléments suggérés apparaît au fur et à mesure que l'utilisateur tape. Ceci est contrôlé par le SuggestionItemTemplate – un modèle de données personnalisable qui définit l'apparence de chaque élément de suggestion.

Voyons comment personnaliser les modèles de suggestion à l'aide d'un exemple. Supposons que vous utilisez le contrôle de saisie semi-automatique dans une application de discussion et que vous souhaitez afficher le statut de connectivité de chaque personne, en plus de son nom, dans la liste des suggestions. Voici un exemple d'objet métier:

classe publique BusinessObject.
{
    BusinessObject public (nom de chaîne, chaîne imageSource)
    {
        this.Name = nom;
        this.ImageSource = imageSource;
    }
    
    chaîne publique Nom {get; ensemble; }
    
    chaîne publique ImageSource {get; ensemble; }
}  

Et voici un exemple de modèle View complétant une fausse collection d'objets métier pouvant servir de source de données pour le contrôle de saisie semi-automatique:

 public class ViewModel
{
    public ViewModel ()
    {
        this.Source = new List  ()
        {
            nouveau BusinessObject ("Freda Curtis", "available.png"),
            nouveau BusinessObject ("Jeffery Francis", "away.png"),
            nouveau BusinessObject ("Eva Lawson", "available.png"),
            nouveau BusinessObject ("Emmett Santos", "away.png"),
            nouveau BusinessObject ("Eric Wheeler", "busy.png"),
            nouveau BusinessObject ("Eduardo Thomas", "away.png"),
            nouveau BusinessObject ("Lauretta Pozo", "busy.png"),
            nouveau BusinessObject ("Jarvis Victorine", "away.png"),
            nouveau BusinessObject ("Dane Gabor", "busy.png")
        };
    }
    
    liste publique  Source {get; ensemble; }
}  

Maintenant, voici le balisage XAML pour le contrôle de saisie semi-automatique où nous pouvons effectuer la liaison au modèle de vue local – remarquez l'utilisation du SuggestionItemTemplate qui met côte à côte le nom et le statut de la personne:

 ] .. xmlns: telerikInput = "espace de nom clr: Telerik.XamarinForms.Input; assembly = Telerik.XamarinForms.Input" ..

  
    
  
  
    
  
  
    
      
        
          
          
        
        
        
      
    
  
  

Voici maintenant le résultat, avec un modèle de suggestion personnalisé prenant en compte les nuances de chaque plate-forme mobile:

Conclusion

Le contrôle Telerik AutoComplete a l'air simple – mais fait beaucoup de travail en coulisses. La correspondance de motif performante est alimentée par des algorithmes sophistiqués, mais votre productivité peut être améliorée si vous n'avez pas à penser à des implémentations. Il suffit de déposer le contrôle de saisie semi-automatique et de le personnaliser selon vos besoins. Vous ferez de la saisie une meilleure expérience sur vos applications mobiles. Les utilisateurs heureux obtiennent une utilisation accrue des applications et, partant, des développeurs plus satisfaits.

Ceci conclut notre interface utilisateur hebdomadaire pour les articles de plongée en profondeur de Xamarin, présentant les commandes individuelles et leur utilisation. L'objectif est simple: rendre les développeurs Xamarin plus productifs et plus performants avec des contrôles d'interface utilisateur performants et sophistiqués prêts à l'emploi. Nous n'avons toutefois qu'effleuré la surface: l'interface utilisateur de la suite Xamarin contient beaucoup plus de contrôles. Recherchez une autre série d'articles à venir bientôt. Jusque-là, restez dans la classe des développeurs!

Les autres articles de cette série: