Telerik Scheduler Blazor (Partie 2) Gestion des vues du Scheduler

Le planificateur de l'interface utilisateur Telerik pour Blazor facilite l'affichage des informations temporelles grâce à ses vues prédéfinies. Voici comment bien les utiliser.

La dernière fois, nous avons passé en revue une brève introduction au Telerik Scheduler for Blazor et comment mettre en place un projet. Nous avons même évoqué l'importance des vues que vous pouvez fournir à vos utilisateurs.

Dans cet article, nous en apprendrons plus sur ces vues, car bien utiliser le composant signifie comprendre les deux modes que les utilisateurs adoptent lorsqu'ils interagissent avec un calendrier afin que vous puissiez configurer correctement l'interface utilisateur du planificateur.

Allons-y.

Comprendre les modes de l'interface utilisateur

La façon la plus simple de gérer l'interface utilisateur du planificateur est de commencer par l'élément TelerikScheduler, puis d'en ajouter un plus SchedulerViews, imbriqué dans l'élément SchedulerViews. Cet exemple utilise les quatre vues fournies avec le planificateur (par défaut, le planificateur affiche initialement la date actuelle, sauf si l'attribut Date du TelerikScheduler est défini sur une autre date):

Chacune des vues ajoute un onglet à l'en-tête du planificateur qui permet à l'utilisateur de sélectionner la vue qui lui convient pour la tâche à accomplir.

Il peut sembler évident que, à moins que vous ne sachiez que les utilisateurs ne travaillent que dans un mode d'affichage particulier, la meilleure conception d'interface utilisateur est pour fournir toutes les vues et permettre à l'utilisateur de choisir celle qu'il veut, en fonction de ses préférences personnelles et du mode dans lequel il travaille.

Il y a cependant un inconvénient à fournir «toutes les vues»: chacune des vues a paramètres définis au niveau de la vue. Par conséquent, plus vous prenez en charge de vues, plus il est probable que vos vues auront des paramètres différents et, par conséquent, des interfaces utilisateur différentes. Étant donné que les utilisateurs accordent plus d'importance à la cohérence de l'interface utilisateur qu'à toute autre chose, plus de vues équivaut à plus d'efforts de maintenance afin de garder les vues coordonnées.

Gestion des vues

Vous pouvez réduire l'effort de maintenance requis pour vous assurer que la plage est la même pour toutes les vues en centralisant autant de paramètres passés aux différentes vues que possible. Par exemple, toutes les vues (à l'exception de la vue mensuelle) ont un attribut StartTime qui spécifie la plage horaire affichée dans la vue. Dans l'exemple suivant, j'ai défini l'heure de début de toutes les vues sur 9 heures en ajoutant, dans la section de code de mon composant, un champ appelé DayStartTime et en utilisant dans toutes les vues avec un attribut StartTime:

Voici le code pour cela (j'ai également chargé quelques exemples de données dans le champ auquel j'ai lié l'attribut Data de mon ordonnanceur):

 @code  {
    DateTime DayStartTime  =  nouveau  DateTIme  ( DateTime .  Now .  Year  DateTime .  Maintenant .  Mois  DateHeure .  Maintenant .  Jour   9 [19659015] 0   0 ) ; 
    List  < TempChange >  Events  =  new List  < TempChange >  () ; 

    Tâche de remplacement protégé  OnInitializedAsync  () 
     {
        Événements  =  nouvelle liste  < TempChange > 
         {
            nouveau TempChange
             {
                Début  =  DateHeure .  Maintenant 
                End  =  DateTime .  Now .  AddHours  ( 1 ) 
                Titre  =   "Temp Change" 
                Description  =   "Il fait chaud!" 
                Température  =   21 
            } 
            nouveau TempChange
             {
                Start  =  DateTime .  Now  AddMinutes  ( 30 ) 
                Fin  =  DateTime .  Now .  AddHourse  ( 1 ) 
                Titre  =   "Temp Change" 
                Description  =   "Il fait chaud!" 
                Température  =   21 
            } 
        } ; 
         return  base .  OnInitializedAsync  () ; [19659027]} 

Et, principalement en chargeant les bons objets dans une collection, vous obtenez l'interface utilisateur suivante en vue quotidienne, ainsi que des onglets pour trois autres vues:

Sélection de la vue

Bien qu'il soit logique de laisser l'utilisateur choisir l'interface utilisateur qui lui convient, il est également logique de fournir à l'utilisateur une vue initiale basée sur votre compréhension des personas et du mode typique de vos utilisateurs. Vous pouvez contrôler quelle vue est affichée initialement en liant l'attribut View de TelerikScheduler à un champ de votre code de type ScheduleView, puis en définissant ce champ sur l'une des valeurs de l'énumération ScheduleView pour contrôler la vue affichée.

Sachez que si vous modifiez la valeur d'un champ contrôlant la vue dans votre code, vous n'êtes pas assuré que la modification apparaîtra dans l'interface utilisateur sauf si vous appelez la méthode StateHasChanged de base de votre composant (bien sûr, si d'autres modifications de votre interface utilisateur ont déclenché un Blazor changement d'état, vous n'aurez pas besoin d'appeler StateHasChanged pour changer la vue). Cet exemple définit un champ appelé sv initialisé à la vue du jour, puis, dans la méthode OnAfterRender, remplace ce paramètre par défaut en fonction du travail de l'utilisateur, en appelant StateHasChanged pour s'assurer que l'interface utilisateur se met à jour:

 @code  {
   SchedulerView sv  { get ;  set ;  }  =  SchedulerView .  Day ; 
    protected override  void   OnAfterRender  ( bool firstRender ) 
     {
        if   ( firstRender  &&  emp  .  IsSupervisor )  
        {
          sv  =  SchedulerView .  Week ;  
           StateHasChanged  () ; 
      } 

Fournir la bonne vue est juste le début de l’utilisation efficace de ce composant. Les différentes vues vous offrent des moyens de configurer leur affichage de manière déclarative (StartTime n'est qu'un exemple), et j'expliquerai ces options dans mon prochain article.