Sélecteurs de date et d'heure Xamarin.Forms dans l'interface utilisateur conversationnelle

Cet article examine les sélecteurs de date et d'heure dans l'interface utilisateur conversationnelle dans Telerik UI for Xamarin et explore les modes de rendu avec différentes API.

Les chatbots sont à la mode ces temps-ci raison. 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 à gouverner la prochaine génération d'applications.

Pour les développeurs, la clé serait d'engager des expériences utilisateur via les chatbots. 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 choisir une date ou une heure. Cet article décompresse les sélecteurs de date et d’heure dans l’interface utilisateur conversationnelle du point de vue d’une application mobile Xamarin.Forms, et explore des moyens de rendre une telle interface utilisateur pour des expériences utilisateur fluides.

Pickers et interface utilisateur Chatbot personnalisée

Nous avons 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 de l'interface utilisateur conversationnelle réside dans sa capacité à gérer une interface utilisateur personnalisée complexe. Ceci est réalisé grâce à des "sélecteurs", qui présentent à l'utilisateur une sélection de choix dans le cadre de la conversation par chat. Si vous deviez choisir des garnitures de pizza, préférez-vous les taper dans du texte ou simplement cocher une liste? Tu obtiens le point. Dans une conversation en ligne, il est presque toujours plus rapide de demander aux utilisateurs de choisir parmi une collection d'éléments.

Le composant d'interface utilisateur conversationnelle qui permet de tels choix est le RadChatPicker . Selon les informations à présenter à l'utilisateur et le choix à effectuer, le RadChatPicker permet aux développeurs de générer l'un des types suivants:

• DatePicker : pour afficher un calendrier choisir une date
• TimePicker : pour afficher une vue d'horloge pour choisir une heure
• ItemPicker : pour présenter une liste de suggestions parmi lesquelles l'utilisateur pouvait choisir
• CardPicker : for présenter une liste de cartes avec une mise en page structurée

Le RadChatPicker présente la valeur que nous pouvons offrir aux développeurs avec une interface utilisateur conversationnelle; la sophistication soignée grâce à l'interface utilisateur de chat complexe personnalisée. Nos produits Telerik et Kendo UI ont déjà des commandes de sélecteur de date et d'heure natives pour différentes plates-formes. Maintenant, ils sont inclus dans l'interface utilisateur conversationnelle.

DatePicker

Vous devez demander à l'utilisateur de choisir une date dans le cadre d'une conversation chatbot? Le contrôle RadChatPicker fournit un DatePickerContext qui affiche un calendrier pour sélectionner une date. Comme prévu, DatePickerContext expose les propriétés suivantes que vous pouvez utiliser pour répertorier les options possibles pour l'utilisateur:

1. SelectedDate : offre la date actuellement sélectionnée dans le calendrier
2. MinDate : définit la date minimale pouvant être affichée / sélectionnée
3. MaxDate : définit la date maximale pouvant être affichée / sélectionnée
4. DisplayDate : présélectionne une date dans la vue du calendrier en cours

Pour essayer sur ce sélecteur, commençons par mettre en place une discussion. Cela peut être fait entièrement dans la bibliothèque partagée PCL ou .NET Standard dans une page XAML standard, comme ceci:

Dans le code-behind, nous pourrions configurer l'auteur du bot et démarrer une conversation. Disons que la toute première tâche dans la conversation est de demander à l'utilisateur de sélectionner une date:

 public MainPage ()
{
  InitializeComponent ();

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

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

  this.SelectDateDialogue ();
} 

Maintenant que nous avons une fonction pour gérer le dialogue de sélection de date, nous pouvons personnaliser le DatePickerContext avec certaines propriétés souhaitées et ajouter le PickerItem dans la conversation collection. Essentiellement, cette technique s'appelle "affichage en ligne". Nous forçons l'affichage du sélecteur de date dans le cadre de la conversation par chatbot en collant la PickerItem dans la collection Item de chat.

 void privé SelectDateDialogue ()
{
  DatePickerContext dateContext = new DatePickerContext
  {
    MinDate = new DateTime (2018, 1, 1),
    MaxDate = new DateTime (2019, 1, 1)
  };
  PickerItem pickerItem = new PickerItem {Contexte = dateContext};
  chat.Items.Add (new TextMessage {Text = "Veuillez sélectionner une date:"});
  chat.Items.Add (pickerItem);

  dateContext.PropertyChanged + = (s, e) =>
  {
    if (e.PropertyName == "SelectedDate")
    {
      if (dateContext.SelectedDate! = null)
      {
        chat.Items.Remove (pickerItem);
        chat.Items.Add (nouveau TextMessage
        {
          Auteur = chat.Author,
          Text = "Vous avez choisi" + dateContext.SelectedDate
        })
      }
    }
  };
} 

Lorsque nous lançons l'application, nous voyons un joli contrôle de calendrier poli permettant de choisir des dates. L'utilisateur peut balayer vers la gauche / droite pour parcourir les mois, sans perdre le contexte de la conversation:

Dans le code ci-dessus, nous écoutons également le PropertyChanged événement de DatePickerContext . En particulier, lorsque la valeur de propriété SelectedDate change. Ceci est déclenché une fois que l'utilisateur effectue une sélection de date. Notre gestionnaire d'événements récupère la valeur de la propriété SelectedDate maintient un message dans la conversation et supprime le PickerItem de l'élément collection:

TimePicker

Besoin de votre utilisateur de chatbot pour choisir une heure? Le contrôle RadChatPicker fournit TimePickerContext qui peut être utilisé pour afficher une vue d'horloge pour les aider à le faire. Comme prévu, TimePickerContext expose les propriétés suivantes que vous pouvez utiliser pour ajuster la sélection de temps à travers les valeurs d'horloge affichées:

1. SelectedValue : offre l'heure actuellement sélectionnée dans la vue de l'horloge
2. StartTime : représente l'heure de début des éléments de l'horloge ( TimeSpan )
3. EndTime : correspond à l'heure du dernier élément d'horloge ( TimeSpan )
4. TimeInterval : définit le pas entre les éléments d'horloge, la valeur par défaut étant une heure

Une fois que vous êtes prêt à rendre une horloge comme un sélecteur de temps dans votre chatbot, le code ressemble vraiment à celui de DatePicker. Nous complétons simplement TimePickerContext avec nos paramètres de propriété désirés, et ajoutons le PickerItem avec le contexte assigné au chat collection: [19659020] void privé SelectTimeDialogue ()
{
  TimePickerContext timeContext = new TimePickerContext
  {
    StartTime = TimeSpan.FromHours (1),
    EndTime = TimeSpan.FromHours (5),
  };

  PickerItem pickerItem = new PickerItem {Context = timeContext};
  chat.Items.Add (new TextMessage {Text = "Veuillez sélectionner une heure:"});
  chat.Items.Add (pickerItem);

  timeContext.PropertyChanged + = (s, e) =>
  {
    if (e.PropertyName == "SelectedValue")
    {
      if (timeContext.SelectedValue! = null)
      {
        chat.Items.Remove (pickerItem);
        chat.Items.Add (new TextMessage {Author = chat.Author, Text = "Vous avez choisi" + timeContext.SelectedValue});
      }
    }
  };
}

Lorsque l'application est exécutée, un simple sélecteur d'horloge pour les sélections de temps s'affiche:

Comme il est presque explicite dans le code ci-dessus, nous écoutons également le EventChanged événement de TimePickerContext . En particulier, lorsque la valeur de la propriété SelectedValue change. Ceci est déclenché une fois que l'utilisateur effectue une sélection de temps. Notre gestionnaire d'événements récupère la valeur de la propriété SelectedValue conserve un message dans la conversation et supprime le PickerItem de l'élément collection:

Affichage par superposition

Jusqu'à présent, pour les sélecteurs de date et d'heure, nous avons utilisé "l'affichage en ligne", une technique pour coller de force le PickerItem dans le chat ] à afficher dans le cadre de la conversation en cours. Une autre technique pour afficher les sélecteurs de date et d’heure est «affichage superposé». Cela rend les sélecteurs au-dessus de tout le reste de la conversation. Ceci est implémenté via la propriété Picker de l'objet RadChat . Ceci est souvent déclaré comme une partie du balisage XAML, comme ci-dessous:

Une fois que nous avons défini la propriété Picker nous pourrions lui attribuer le DatePickerContext ou TimePickerContext et définir le contexte propriété en conséquence, comme ceci:

 private void SelectDateDialogueOverlay ()
{
  DatePickerContext dateContext = new DatePickerContext
  {
    MinDate = new DateTime (2018, 1, 1),
    MaxDate = new DateTime (2019, 1, 1)
  };

  dateContext.PropertyChanged + = (s, e) =>
  {
    if (e.PropertyName == "SelectedDate")
    {
      if (dateContext.SelectedDate! = null)
      {
        chat.Items.Add (new TextMessage {Author = this.chat.Author, Text = "Vous avez choisi" + dateContext.SelectedDate});
        (chat.Picker comme RadChatPicker) .Context = null;
      }
    }
  };

  chat.Picker = sélecteur;
  (chat.Picker comme RadChatPicker) .Context = dateContext;
} 

Lorsque nous exécutons l'application, le code ci-dessus affiche le sélecteur de date. Cette fois, il est superposé aux autres messages de la conversation:

Comme précédemment, nous pouvons toujours écouter l'événement PropertyChanged du sélecteur correspondant et saisir la sélection de l'utilisateur dans le gestionnaire d'événements. Une fois que le contexte du sélecteur a été réinitialisé, le reste de la conversation est à nouveau visible.

C'est un wrap

Les chatbots modernes requièrent des expériences utilisateur riches et L'interface conversationnelle est là pour aider les développeurs à rendre une interface utilisateur optimisée permettant des conversations efficaces et engageantes. L'une des tâches les plus courantes dans la plupart des conversations de type chatbot consiste à demander à l'utilisateur de sélectionner une date ou une heure - et le fait de les saisir manuellement est presque criminel. Nous ouvrons des cauchemars de validation et frustrons l'utilisateur avec des entrées de formulaire gratuites.

Les sélecteurs de date et d'heure de l'interface utilisateur de conversation offrent des vues de calendrier ou d'horloge modernes qui permettent de sélectionner une date / heure. Les développeurs ont le choix entre restituer les PickersItems correspondants en ligne dans le cadre de la discussion ou en superposition dans la conversation. Avec des propriétés simples et une API pour saisir les sélections des utilisateurs, vous et votre chatbot pourrez automatiser les sélections de date / heure et passer à des choses plus grandes et plus grandes.