Xamarin.Forms Smart Pickers dans l'interface utilisateur conversationnelle

Examinez les contrôles du sélecteur dans l'interface utilisateur de conversation dans le cadre de Telerik UI pour Xamarin et explorez les modes de rendu avec différentes API.

Les ChatBots font fureur ces temps-ci. . Un chatbot bien formé avec une connaissance contextuelle approfondie peut automatiser de manière transparente un grand nombre de flux de travail avec des interactions homme-ordinateur. Et les entreprises commencent à découvrir les avantages en termes de coûts des automatismes de chatbot – les frameworks Bot et IA sont destinés à diriger la prochaine génération d'applications.

Et c'est là que L'interface conversationnelle entre en ligne de compte – avec une interface utilisateur moderne et sophistiquée pour alimenter les expériences chatbot sur le Web, le bureau ou le mobile. L'une des interactions les plus courantes dans les conversations en ligne consiste à demander à l'utilisateur de faire une sélection à partir d'une liste d'éléments – vous souhaitez que cette expérience soit riche, mais transparente pour l'utilisateur.

Nous avons récemment examiné comment cela fonctionne avec les sélecteurs de date et d'heure . Cet article décompresse les contrôles ItemPicker et CardPicker dans l'interface utilisateur conversationnelle du point de vue d'une application mobile Xamarin.Forms et explore les différentes manières de rendre une interface utilisateur conviviale. 19659005] Pickers

Bien que nous ayons déjà traité les bases de de l'interface utilisateur conversationnelle les messages textuels dans une conversation chatbot sont faciles à gérer – la valeur réelle dans l'interface utilisateur conversationnelle est dans l'interface utilisateur personnalisée complexe. Ceci est réalisé grâce au contrôle RadChatPicker qui est chargé de présenter à l'utilisateur une sélection de choix dans le cadre de la conversation. Si vous deviez choisir des garnitures de pizza, les taperiez-vous dans un texte ou cochez simplement une liste? Vous avez eu l'idée. Dans une conversation en ligne, il est presque toujours plus rapide de demander aux utilisateurs de choisir parmi une collection d'éléments.

Selon les informations à présenter à l'utilisateur et le choix à faire, le RadChatPicker permet aux développeurs de rendre l'un des types suivants:

• DatePicker : pour afficher un calendrier afin de choisir une date
• TimePicker : pour afficher une vue d'horloge afin de choisir une heure [19659009] ItemPicker : pour présenter une liste de suggestions parmi lesquelles l'utilisateur pouvait choisir
• CardPicker : pour présenter une liste de cartes à structure structurée

La RadChatPicker présente la valeur Nous pouvons offrir aux développeurs une interface utilisateur conversationnelle – la sophistication parfaite grâce à une interface utilisateur de chat complexe personnalisée. Nous avons déjà traité les cueilleurs de dates et d'heures – le plus grand besoin est souvent d'offrir des sélections à partir d'une liste personnalisée. Telerik et Kendo UI peuvent désormais offrir des commandes d'élément et Card pour diverses plates-formes, utilisées dans l'interface utilisateur conversationnelle de chatbot.

ItemPicker

L'utilisateur chatbot choisit une ou plusieurs options dans une liste Le contrôle RadChatPicker fournit un ItemPickerContext qui peut être utilisé pour afficher une liste d'options parmi lesquelles l'utilisateur peut choisir. Comme prévu, ItemPickerContext expose les propriétés suivantes que vous pouvez utiliser pour fournir une liste d'options possibles à l'utilisateur:

• ItemsSource : définit la source de données à associer aux options
• SelectionMode : contrôle les sélections uniques ou multiples à partir de ItemSource
• SelectedItems : définit les éléments actuellement sélectionnés.
• SelectedItem : définit le dernier élément sélectionné.

Pour essayer le ItemPicker ]commençons par configurer un chat - cela peut être fait entièrement dans la bibliothèque partagée PCL ou .NET Standard dans une page XAML normale, comme ceci:

Dans le code-behind, nous pouvons configurer l'auteur du bot et démarrer une conversation en ligne. Et quand il s’agit de sélectionner des options dans une liste, il n’ya tout simplement pas meilleur exemple que de choisir vos garnitures de pizza préférées, alors faisons-le.

 public MainPage ()
{
  InitializeComponent ();

  this.botAuthor = new Author ();
  this.botAuthor.Name = "MyBot";
  this.botAuthor.Avatar = "BotFace.jpeg";

  chat.Items.Add (new TextMessage {Author = this.botAuthor, Text = "Bienvenue sur notre chat!"});

  this.SelectedPizzaToppings ();
} 

Maintenant que nous avons une fonction pour gérer le dialogue de sélection de garnitures de pizza, nous pouvons améliorer ItemPickerContext avec certaines propriétés souhaitées et ajouter le PickerItem à la conversation . collection. Remarquez comment nous définissons la propriété ItemSource - cela pourrait être une collection générique de tout type d'objet à utiliser pour la liaison de données.

 void SelectedPizzaToppings ()
{
  ItemPickerContext itemContext = new ItemPickerContext
  {
    ItemsSource = new List  () {"Pepperoni", "Saucisse", "Poulet", "Champignons", "Ananas", "Oignons", "Poivrons"}
  };
  itemContext.SelectionMode = SelectionMode.Multiple;
  PickerItem pickerItem = new PickerItem {Context = itemContext, HeaderText = "Veuillez sélectionner vos garnitures de pizza:"};

  chat.Items.Add (pickerItem);
  string AllSelectedItems = string.Empty;

  itemContext.PropertyChanged + = (s, e) =>
  {
    if (e.PropertyName == "SelectedItem")
    {
      if (itemContext.SelectedItem! = null)
      {
        AllSelectedItems = itemContext.SelectedItem + "";
      }
    }
  };
} 

Lançons notre application - et bien sûr, nous voyons un joli contrôle ItemPicker permettant de sélectionner des garnitures de pizza dans une liste.

Dans le code ci-dessus, nous écoutons également l'événement PropertyChanged de ItemPickerContext - en particulier lorsque SelectedItem modifications de valeur de propriété. Ceci est déclenché une fois que l'utilisateur effectue des sélections - notre gestionnaire d'événements récupère la valeur de la propriété SelectedItem et agrège toutes les garnitures sélectionnées. SelectionMode défini sur ItemPickerContext peut permettre à l'utilisateur de choisir un ou plusieurs éléments de la liste - ce serait assez brutal s'il ne s'agissait que d'une seule garniture, non?

CardPicker

Lorsque votre chatbot présente une liste d'options parmi lesquelles l'utilisateur peut choisir, vous souhaiteriez idéalement qu'il s'agisse d'une expérience utilisateur transparente. Il peut s'agir de données riches, mais il doit être facile à consulter et à choisir. C'est là que le Telerik CardPickers dans l'interface utilisateur de conversation peut allumer vos scénarios de chatbot.

Le contrôle RadChatPicker fournit CardPickerContext pour afficher une liste de cartes personnalisables. Chaque carte peut présenter des informations complexes de manière conviviale et structurée et permet à l'utilisateur d'interagir avec elle. Comme prévu, CardPickerContext expose les propriétés suivantes que vous pouvez utiliser pour ajuster le rendu des cartes:

• Cards : implémente IEnumerable contenant les Cards disponibles
• BasicCardContext : espace réservé pour afficher une carte avec Titre Sous-titre et Description
• ImageCardContext : dérive de BasicCardContext avec une propriété supplémentaire Image
• Actions : implémente IEnumerable qui contient les actions de la carte via des commandes

BasicCardContext

Essayons de rendre les cartes dans notre application - pour les développeurs choisir la prochaine conférence logicielle à laquelle participer. Après une configuration similaire de chatbot, nous ajoutons CardPickerContext et l'ajoutons à notre collection Item comme ci-dessous:

 private void SelectConferences ()
{
  PickerItem pickerItem = new PickerItem ();
  var context = new CardPickerContext {Cards = this.GetConferenceCards (pickerItem)};
  pickerItem.Context = context;
  chat.Items.Add (new TextMessage {Text = "Sélectionnez une conférence:"});
  chat.Items.Add (pickerItem);
} 

Remarquez comment nous déléguons la construction du IEnumerable à une fonction distincte - il s'agit juste de garder les choses propres afin que nous sachions exactement ce que chaque carte peut contenir. Retournons BasicCardContext avec les valeurs de propriété appropriées, comme ceci:

 private IEnumerable  GetConferenceCards (ChatItem chatItem)
{
  Liste  cards = new List  ()
  {
    nouveau BasicCardContext () {
        Titre = "VS Live",
        Sous-titre = "Redmond, WA",
        Description = "Connaissance d'hier; Code de demain!",
        Actions = GetCardActions (chatItem, "VSLive")},
    nouveau BasicCardContext () {
        Title = "DevReach",
        Sous-titre = "Sofia, BG",
        Description = "Conférence des développeurs en Europe centrale et orientale",
        Actions = GetCardActions (chatItem, "DevReach")},
    nouveau BasicCardContext () {
        Titre = "MS Ignite",
        Sous-titre = "Orlando, FL",
        Description = "The Ultimate MSFT Tech Conference",
        Actions = GetCardActions (chatItem, "Ignite")}
  };
  cartes de retour;
} 

Notez la propriété Actions ? Cela permet de contrôler ce qui se produit lorsqu'un utilisateur sélectionne une carte - vous pouvez transporter le contexte via Text et le lier via les propriétés de la commande . Retournons une collection d'actions simples pour chacune de nos conférences de développeurs et capturons la sélection de cartes utilisateur, comme ceci:

 ICollection  GetCardActions (ChatItem chatItem, string Title)
{
  var selectAction = new CardActionContext
  {
    Text = "Select",
    Commande = nouvelle commande (() =>
    {
      var index = chat.Items.IndexOf (chatItem);
      chat.Items.RemoveAt (index);
      chat.Items.Add (new TextMessage {Author = this.chat.Author, Text = "Vous avez sélectionné" + Titre});
    }),
  };
  return new List  () {selectAction};
} 

Nous sommes maintenant prêts à lancer notre application et à voir les cartes de conférence en action. Voila! Les utilisateurs peuvent balayer et voir tous les détails de chaque carte rendue:

Une fois que l'utilisateur choisit une carte, nous pouvons attendre pour afficher le contexte et nous pouvons insérer la sélection dans la collection Item de notre chat, comme suit:

ImageCardContext

ImageCardContext améliore la fonctionnalité de BasicCardContext en fournissant une propriété Image supplémentaire, de sorte que vous pouvez ajouter une image à la définition de la carte. Cet ajout simple vous permet de présenter une expérience utilisateur riche. Comme nous le voyons, nous, les humains, aimons nos visuels.

Pour utiliser ImageCardContext nous pouvons avoir la même configuration de chatbot, mais renvoyer un IEnumerable qui a le Image propriété définie pour chaque carte, comme ci-dessous:

 IEnumerable  GetConferenceCardsWithImages (ChatItem chatItem)
{
  Liste  cards = new List  ()
  {
    nouveau ImageCardContext () {
        Titre = "VS Live",
        Sous-titre = "Redmond, WA",
        Description = "Connaissance d'hier; Code de demain!",
        Image = "VSLive Logo.png",
        Actions = GetCardActions (chatItem, "VSLive")},
    nouveau ImageCardContext () {
        Title = "DevReach",
        Sous-titre = "Sofia, BG",
        Description = "Conférence des développeurs en Europe centrale et orientale",
        Image = "DevReach Logo.jpeg",
        Actions = GetCardActions (chatItem, "DevReach")},
    nouveau ImageCardContext () {
        Titre = "MS Ignite",
        Sous-titre = "Orlando, FL",
        Description = "The Ultimate MSFT Tech Conference",
        Image = "MSFTIgnite Logo.jpg",
        Actions = GetCardActions (chatItem, "Ignite")}
  };
  cartes de retour;
} 

Une mise en garde à noter: les ressources d'image pour une application Xamarin.Forms doivent provenir de projets spécifiques à platfom, comme dans le cas de notre projet iOS ici:

Exécutons notre application. Bien sûr, les cartes d’image vous permettent de choisir la conférence de votre choix. Tout autre comportement de carte reste inchangé. C'est juste une meilleure expérience utilisateur.

C'est un emballage

Les chatbots modernes exigent des expériences utilisateur riches et L'interface conversationnelle Interface utilisateur permettant d’engager des conversations efficaces. L'une des tâches les plus courantes dans les conversations chatbot consiste à demander à l'utilisateur de faire une sélection à partir d'une liste - du point de vue de l'utilisateur, vous voulez que ce soit aussi simple que: "Cliquez, cliquez et faites". ItemPicker Les contrôles et CardPicker dans l'interface utilisateur conversationnelle sont là pour vous faciliter la tâche. Les développeurs disposent de différentes options de rendu, des simples listes aux cartes personnalisées. Les API flexibles et la prise en charge de MVVM permettent aux développeurs de gérer facilement les sélections d'utilisateurs, tout en offrant une expérience utilisateur fluide. Il est temps d'allumer vos conversations de chatbot et de créer des expériences étonnantes.