Telerik Scheduler Blazor (Partie 1): Configuration du planificateur

Dans le premier article d'une série de quatre articles, nous allons plonger dans le planificateur dans Telerik UI pour Blazor et voir comment vous pouvez l'utiliser dans vos applications Web. Nous allons commencer par apprendre à configurer un projet pour tirer parti de Telerik Blazor Scheduler et de toutes ses vues (plus: Pourquoi vous avez besoin de toutes ces vues).

Le modèle de conception d'interface utilisateur attend des utilisateurs pour l'enregistrement et l'affichage de l'heure les informations basées sur les rendez-vous (rendez-vous ou événements) sont un calendrier. Sans surprise, un planificateur était l'une des interfaces utilisateur Telerik pour les demandes les plus votées de Blazor quand il a été introduit .

Et le Telerik Scheduler for Blazor vous offre un moyen extrêmement simple de ajoutez un calendrier à votre application Blazor pour les données relatives à la date.

Si vous débutez dans l'utilisation des composants Telerik dans un projet, cet article vous expliquera rapidement comment créer un projet pouvant utiliser le planificateur (ou , vraiment, n'importe lequel des composants Telerik).

Présentation rapide

Il est facile de faire en sorte que Telerik Scheduler affiche des événements ou des rendez-vous (Telerik UI pour Blazor les désigne simplement comme des «rendez-vous»): il suffit de transmettre au Scheduler une collection d'objets où chaque objet a deux propriétés DateHeure appelées Début et Fin.

Il est utile d'avoir également une propriété appelée Titre car le planificateur affichera cette propriété par défaut dans l'interface utilisateur pour tout rendez-vous. De plus, avoir une propriété appelée IsAllDay vous laissera définir des événements toute la journée. Cependant, il n'y a pas de mal / pas de faute à ne pas avoir ces deux dernières propriétés sur votre classe (et le planificateur vous permettra de profiter de toutes les autres propriétés ou méthodes que vous voudrez peut-être ajouter à votre classe).

Un objet comme celui-ci , par exemple, pourrait être utilisé pour enregistrer les changements de température et les afficher dans le planificateur:

 public   class   TempChange 
 {  
   public  Int Id  {[19659014] get ;   set ;  } 
   public  DateTime Start  {  get ;   set ; [19659018]} 
   public  DateTime End  {  get ;   set ;  } 
   public   string  Title  {  get ;   set ;  } 
   public   bool  IsAllDay  {  get ;   set [19659015];  } 
   public   do uble  TemperatureC  {  get ;   set ;  } 
   public   double   ConvertToF  () [19659057] {
      return  Math .  Round  ( TemperatureC  *   1.8   +   32   0 ) ; 
  } 
} 

Une collection d'objets comme celui-ci est tout ce dont vous avez vraiment besoin pour prendre en charge toutes les fonctionnalités du planificateur dans votre projet.

Un projet de planificateur

Pour créer un exemple de projet avec le planificateur, j'ai utilisé Visual Studio 2019 Community Edition 16.7.2. Dans Visual Studio, j'ai sélectionné Nouveau | Projet | Blazor App, a choisi l'application Blazor WebAssembly dans .NET Core 3.1 avec l'option hébergée ASP.NET Core sélectionnée (j'ai également décoché l'option HTTPS). Cela m'a donné une solution avec trois projets: un dont le nom se termine par .Client, un dont le nom se termine par .Server et un dont le nom se termine par .Shared (un bon projet pour contenir la classe car il est accessible à la fois au * .Client et * .Server projects).

J'ai ensuite utilisé NuGet pour ajouter le package Telerik.UI.for.Blazor au projet * .Client dans ma solution, en téléchargeant le package à partir du site Telerik mis en place lorsque j'ai obtenu ma licence. Pour prendre en charge l'utilisation des contrôles Telerik, j'ai ajouté cette balise de lien à l'élément de la page hébergeant mon application Blazor (par défaut, c'est la page index.html dans le dossier wwwroot du projet * .Client):

 < lien   rel  =  " feuille de style "    href  =  " _content / Telerik.UI.for.Blazor /css/kendo-theme-default/all.css[19459015[/)"[19459004[19659018Often/>[19459004

.) Également dans le fichier index.html, j'ai ajouté cette balise de script juste avant la fermeture de la page [19659084] tag:

 < script   src  =  " _content / Telerik.UI.for.Blazor / js / telerik-blazor.js "    defer >  </  script >  

Dans le fichier _import.razor de mon projet, j'ai ajouté ces directives d'espace de noms:

 @using Telerik. Blazor
@utilisation de Telerik.Blazor.Components

L'application Visual Studio par défaut utilise une page de mise en page appelée MainLayout.razor (dans le dossier Shared du projet client). Les composants Telerik dépendent de TelerikRootComponent, j'ai donc créé un nouveau composant Razor appelé TelerikLayout.razor dans le dossier Shared de mon projet et, dans ce nouveau fichier de mise en page, j'ai enveloppé sa déclaration @Body avec TelerikRootComponent:

 
    @Corps

Je n’ai pas besoin d’ajouter les instructions @using pour les composants Telerik à ce fichier car je les avais ajoutées au fichier _imports.razor du projet. J'ai cependant dû aller dans le fichier MainLayout et y ajouter cette ligne:

 @layout TelerikLayout

En fait, j'ai encapsulé ma vue de mise en page existante dans un "TelerikRootComponent-ized". Cela signifie que je n'ai pas à modifier aucun code existant dans mes composants (et me positionne également pour ajouter des composants Telerik à ma page de mise en page d'origine).

L'importance des vues

Avec tout cela en place, j'ai ajouté le planificateur au fichier Razor de mon composant en utilisant un balisage qui liait le planificateur à une collection appelée Events (une collection vraisemblablement définie dans la section de code du composant). Le début de mon balisage ressemblait à ceci:

Mais pour vraiment tirer parti du planificateur, vous devez tirer parti des vues du planificateur. Les vues multiples sont importantes dans un planificateur, car les gens utilisent les calendriers dans deux modes différents.

Dans un mode, les utilisateurs apprécient les vues qui affichent la totalité d'une semaine ou d'un mois complet, des vues qui donnent à l'utilisateur une vue «en un coup d'œil» d'un long période de temps. Ces vues permettent aux utilisateurs de déterminer leur niveau d'occupation (ou, si vous enregistrez d'autres types de données liées à la date, lorsque les choses se produisent «fréquemment»). Les détails ne sont pas importants ici. Les jours (ou semaines) sont essentiellement traités comme des seaux, et les utilisateurs essaient de faire la distinction entre les jours pleins et vides («occupés» et «libres»).

Dans cette vue hebdomadaire, par exemple, il est assez évident que le jeudi n'est pas un bon jour pour ajouter de nouvelles tâches, mais la plupart des autres jours ont du temps disponible:

Cependant, les utilisateurs opèrent dans un mode différent lorsqu'ils sont confrontés à leur avenir immédiat. Dans ce mode, ce sont les détails à court terme qui comptent: une vue quotidienne qui donne aux utilisateurs les informations dont ils ont besoin pour répondre à des questions telles que "que dois-je faire ensuite?" ou "que dois-je faire maintenant?" (avec d'autres types d'informations relatives à la date, les questions associées sont "Que se passe-t-il ensuite?" et "Que se passe-t-il maintenant?").

Lorsque l'utilisateur de mon exemple précédent se réveille jeudi matin, par exemple, il ' Je vais utiliser cette vue du jour pour naviguer dans leur matinée:

Puisque la plupart des utilisateurs basculent entre les deux modes, tout bon planificateur / calendrier nécessite plusieurs vues. Et la bonne nouvelle est que Telerik Scheduler fournit des vues prenant en charge les deux modes. Tout ce que j'avais à faire pour ajouter ces vues à mon planificateur était d'étendre mon balisage avec une liste des vues intégrées que je voulais (dans mon cas, je voulais toutes ):

Conclusion

C'était une introduction à Telerik Scheduler pour Blazor, nous assurant que nous avons tous les bases. Dans le prochain post, nous aborderons encore plus en détail les points de vue.