octobre 24, 2019

Gérer votre page avec TreeViews et Windows

Que pouvez-vous faire avec un TreeView? Eh bien, en combinant les composants TreeView et Window dans l’UI Telerik pour Blazor, vous pouvez laisser l’utilisateur trouver les données qu’il souhaite et contrôler la quantité de données que vous lui infligez. ] Vous permet de décider de ce qui se passe lorsqu'un utilisateur interagit avec les nœuds de TreeView. Cela vous permet de fournir une interface utilisateur qui donne à l'utilisateur ce qu'il veut, quand il le souhaite.

Alors que Telerik TreeView for Blazor facilite le chargement des données la question de , "Que ferais-je avec un arbre après l'avoir chargé?" Une option consiste à utiliser l'affichage hiérarchique de l'arborescence pour permettre à l'utilisateur de contrôler les éléments de l'interface utilisateur d'une page.

Gestion de l'affichage

Par exemple, Indiquez que vous souhaitez présenter une liste de types de clients (ou de catégories de produits) dans lesquels chaque type a plusieurs clients (pour les catégories de produits, chaque catégorie aurait plusieurs produits individuels). Lorsque le nombre d'éléments de premier niveau (types de catégories) et le nombre d'éléments de chaque niveau de nœud ne sont pas excessifs, un affichage en arborescence permet à l'utilisateur d'accéder aux données qu'il souhaite, guidés par les informations affichées dans les nœuds de l'arborescence. . Ces informations sont généralement concises: nom du type de client ou nom de la catégorie de produits au niveau supérieur, nom du client ou du produit au niveau suivant.

Il n’est pas nécessaire de limiter un arborescence à deux niveaux. Vous pouvez ajouter des niveaux supplémentaires si nécessaire pour qu'un utilisateur puisse, par exemple, développer un client particulier afin d'afficher les adresses ou les commandes clients de ce client (ou développer un produit pour afficher l'historique de ses achats ou les différents entrepôts dans lesquels il est stocké).

Encore une fois, cependant, les informations dans l'arborescence sont généralement concises – juste assez d'informations pour permettre à l'utilisateur de naviguer à sa guise. Mais une fois que l'utilisateur a trouvé le nœud qu'il souhaite, il voudra généralement des informations plus détaillées sur l'article sélectionné (par exemple, des informations supplémentaires sur le client / l'adresse ou le produit / le magasin sélectionné). Chaque nœud étant associé à un objet Client ou Produit, vous disposez de ces informations pour les afficher. Tout ce que vous avez à faire est de donner à l’utilisateur un moyen de sélectionner l’affichage détaillé (ceci dit, le Telerik TreeView vous permet de mettre autant d’informations que vous le souhaitez dans chaque nœud si vous êtes à l'aise.

En général, les arborescences prennent en charge ce type d’interaction en séparant la possibilité de développer un nœud dans l’arborescence (cliquez sur la flèche à gauche du nœud) de la possibilité d’afficher les données du nœud (cliquez sur le noeud lui-même). En fournissant des modèles pour chaque nœud, Telerik TreeView vous permet d'aller au-delà pour décider de l'interaction prise en charge par les nœuds à chaque niveau.

Définition de l’arborescence

Par exemple, commençons par une arborescence qui affiche une collection de clients avec leurs adresses associées. Le balisage de cette TreeView pourrait ressembler à ceci:

Ce balisage lie la TreeView à une liste d’objets client (conservés dans un champ que j’ai appelé custs), chacun ayant une collection Adresses contenant les objets Address du client. Le balisage affiche la propriété FullName de chaque client et la propriété Type de chaque adresse (la propriété Type indique le type d'adresse affiché: expédition, facturation, etc.).

Pour personnaliser l'apparence et le comportement du nœud, je peux ajouter un élément ItemTemplate à l'intérieur. l'élément TreeViewBinding. Voici le noeud client avec un ItemTemplate (parce que j’utilise un modèle pour contrôler l’affichage du noeud, je n’ai plus besoin de l’attribut FullName de TreeViewBinding):


   
    … content…

Je pourrais utiliser n'importe quel nombre d'éléments d'interface utilisateur dans le modèle pour donner à l'utilisateur quelque chose avec lequel il peut interagir. Ce que j'ai décidé, c'est un élément d'ancrage avec sa méthode onclick définie pour appeler une méthode dans la section de code de mon composant (j'ai appelé la méthode SetCurrentCustomer). À l’intérieur d’un ItemTemplate, j’ai accès au champ de contexte du noeud qui contient l’objet attaché au noeud actuel (dans ce cas, il s’agit d’un objet Client). J'ai besoin de cet objet Client pour afficher les informations détaillées du client lorsque l'utilisateur clique sur mon élément d'ancrage. Dans mon événement onclick, je passe l'objet context à ma méthode SetCurrentCustomer.

Après avoir effectué toutes ces modifications, mon nœud client ressemble à ceci:


   
      Customer CurrentCustomer {get; set;}
private void SetCurrentCustomer (Client cust)
{
   CurrentCustomer = cust;
}

Je vais faire la même chose avec le deuxième niveau de mon arborescence (les nœuds d’adresses pour chaque client). Le balisage pour ce deuxième niveau ressemblerait à ceci:


   
       Address CurrentAddress {get; ensemble;}
privé void SetCurrentAddress (adresse addr)
{
        CurrentAddress = addr;
}

Gestion de l'affichage de la page

Bien sûr, je dois maintenant afficher les données détaillées de mes objets Client et Adresse. Le moyen le plus simple consiste à utiliser le composant Window de Telerik pour contenir le balisage de chaque ensemble de données. J'utiliserai deux champs booléens pour contrôler le moment où chaque fenêtre est visible (visibleCustomer pour la fenêtre avec les informations client; visibleAddress pour la fenêtre avec les informations d'adresse). Les fenêtres affichent simplement les données de l’objet de vos propriétés CurrentCustomer et CurrentAddress.

Voici le balisage de ces deux fenêtres avec les champs qui gèrent leur visibilité:


    
         Client: @ currentCustomer.CustId
    
    
         Nom: @ currentCustomer.FullName
        … Plus de données…
    


    
         Adresse: @ currentAddress.Type
    
    
         Nom: @ currentAddress.City
        … Plus de données….

 @code {
    bool privé visibleAddress;
    bool privé visibleCustomer;

Maintenant, il ne reste plus qu’à gérer l’affichage des deux fenêtres. Lorsqu'un utilisateur clique sur un nœud client, je souhaite stocker l'objet Client pour prendre en charge les données affichées dans les données de la fenêtre client. Je souhaite également masquer toutes les fenêtres existantes avec les informations d'adresse afin d'éviter d'afficher les informations d'adresse d'un client avec les informations client d'un autre client. Et bien sûr, je souhaite afficher la fenêtre client.

Je peux simplement mettre le code pour gérer cela dans la propriété CurrentCustomer que je mets à jour lorsque l'utilisateur clique sur un noeud Client:

 private CustomerDto currentCustomer;
Client privéDu client actuel
{
   obtenir
   {
      return currentCustomer;
   }
   ensemble
   {
      if (currentCustomer! = value)
      {
         currentCustomer = valeur;
         visibleAddress = false;
         visibleCustomer = true;
      }
   }
}

Lorsque l'utilisateur clique sur un nœud d'adresse, le code est à peu près similaire. Par exemple, je souhaite toujours stocker l'objet Adresse pour prendre en charge l'affichage dans la fenêtre d'adresse. Cependant, avec l’objet Adresse, je souhaite également mettre à jour la propriété du client actuel afin d’afficher le client pour cette adresse (chaque objet Adresse a une propriété Client qui pointe vers le «propriétaire» de l’adresse). Pour ce faire, il me suffit de définir ma propriété CurrentCustomer, qui gère l’affichage de la fenêtre client. Enfin, je dois afficher la fenêtre d'adresse.
Ce code ressemble à ceci:

 private Address currentAddress;
adresse privée CurrentAddress
{
   obtenir
   {
      return currentAddress;
   }
   ensemble
   {
      if (currentAddress! = value)
      {
         currentAddress = valeur;
         currentCustomer = currentAddress.Customer;
         visibleAddress = true;
      }
   }
}

Ainsi, en tirant parti des commandes Telerik, j’ai un affichage interactif qui permet à l’utilisateur d’accéder aux données qu’il souhaite, tout en choisissant entre les données récapitulatives du modèle de noeud et les informations plus complètes de la fenêtre associée. Pas mal pour le travail du matin.