L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Intégration d'actions dans la fenêtre de l'interface utilisateur Telerik pour Blazor
Vous pouvez faire beaucoup avec l'interface utilisateur Telerik pour Blazor Window. Cela vous permet non seulement d'ajouter et de supprimer dynamiquement des sections de votre interface utilisateur, mais également de créer des fonctionnalités dans la fenêtre elle-même.
Les conventions de l'interface utilisateur vous permettent d'ajouter des icônes à la barre de titre de vos fenêtres. La fenêtre dans l'interface utilisateur Telerik pour Blazor vous permet d'ajouter n'importe quelle combinaison des icônes par défaut (réduire, restaurer et fermer) et vous permet également d'ajouter vos propres icônes. Vous pouvez même plier les icônes par défaut à vos propres fins.
Dans un article précédent j'ai montré comment une arborescence peut fournir une interface utilisateur qui permet à l'utilisateur de trouver le moyen d'obtenir les informations qu'il souhaite. Une fois que l'utilisateur a trouvé ses informations, j'ai utilisé un ensemble de Telerik Windows pour afficher les informations demandées.
Le contenu d’une fenêtre Telerik peut, bien entendu, consister en une combinaison quelconque de boutons et de contrôles de formulaire qui déclenchent des événements. Cependant, comme je le montrerai dans cet article, vous pouvez utiliser la fenêtre elle-même pour fournir des fonctionnalités à l'utilisateur. Les seules limitations à ce sujet sont celles que vous appliquez à vous-même: les conventions d’interface utilisateur que vous souhaitez prendre en charge.
Actions intégrées
Par défaut, une fenêtre Telerik n’affiche aucune des trois icônes par défaut. Il est facile de les ajouter, cependant: Vous n'avez besoin que de l’élément WindowActions renfermant trois éléments WindowAction, dont l’attribut Name est défini sur l’une des icônes par défaut:
l'utilisateur clique dessus.
Mais, par exemple, si vous autorisez l’utilisateur à modifier les données et à les sauvegarder, il doit alors demander à l’utilisateur, s’il ferme la fenêtre, s’il souhaite sauvegarder ses modifications. Dans un monde parfait, vous devez savoir deux choses: l’utilisateur at-il modifié le formulaire et les données sont-elles exemptes d’erreurs? Vous pouvez gérer ces deux choses en utilisant le composant EditForm de Blazor . Je vais supposer que vous avez fait tout cela et que vous êtes en panne pour permettre à l’utilisateur de sauvegarder ses informations s’il clique sur le bouton de fermeture de la fenêtre.
La première étape dans l'ajout d'une fonctionnalité de «vérification de la sauvegarde» consiste à ajouter les icônes souhaitées à la fenêtre. Cet exemple n’ajoute que l’icône de fermeture unique:
Si je souhaite que l’icône apparaisse et disparaisse, je peux utiliser un champ booléen conjointement avec l’attribut Masqué de l’élément. Ce code me permettrait, en définissant la valeur de visibleClose, de faire apparaître mon icône Fermer lorsque l'utilisateur commence à apporter des modifications:
@code {
bool privé hiddenClose = true;
Pour donner à l’utilisateur la possibilité de décider d’enregistrer ou non ses modifications à la fermeture de cette icône, je dois attribuer une méthode à l’événement OnClick de WindowAction. Cet exemple affecte la méthode StartCheckSave à l'événement de clic de l'icône de fermeture:
Soyez averti: dès que vous ajoutez un événement de clic personnalisé, il vous incombe de fermer la fenêtre. Pour gérer cela, il faudra (éventuellement) définir sur false le champ visibleCustomer lié à l'attribut Visible de la fenêtre.
Interrogation de l'utilisateur
Bien sûr, je souhaite maintenant demander à l'utilisateur s'il souhaite enregistrer. leurs changements. Je vais poser cette question en affichant une autre fenêtre. Cependant, je vais centrer cette fenêtre sur la page et la rendre modale. Telerik Windows se centre par défaut, donc tout ce dont j'ai besoin est ce balisage, ainsi que l'attribut Visible défini sur un champ booléen:
@code {
bool privé visibleQuerySave;
privé vide StartCheckSave ()
{
si (! dirty || inError)
{
revenir;
}
visibleQuerySave = true;
}
Les deux boutons de ma fenêtre modale appellent une méthode que j’ai nommée EndCheckSave: un bouton appelle la méthode en passant false et l’autre appelle la méthode en passant true. Dans ma méthode EndCheckSave, je vais d'abord supprimer ma fenêtre modale de l'écran en définissant sur false le champ lié à son attribut Visible. Je vérifierai ensuite le paramètre true / false transmis à la méthode et, en fonction de sa valeur, décider d’enregistrer ou non les données de l’utilisateur. Et (enfin) je ferai disparaître la fenêtre originale en définissant le champ associé à la propriété Visible de cette fenêtre.
Voici la méthode EndCheckSave:
private void EndCheckSave (bool saveOption)
{
visibleQuerySave = false;
si (saveOption)
{
//… sauvegarder les données de l'utilisateur
}
visibleCustomer = false;
}
Actions et icônes personnalisées
Toutefois, vous n'êtes pas limité à l'utilisation des trois icônes par défaut pour la réduction, la restauration et la fermeture. Vous pouvez ajouter vos propres icônes à la barre de titre de la fenêtre.
Par exemple, si vous souhaitez donner à l'utilisateur la possibilité de sauvegarder son travail sur un stockage local, vous pouvez ajouter une icône de téléchargement à la barre de titre. La seule “nouveauté” requise sur l'élément WebAction est l'attribut Icon que vous utilisez pour définir l'apparence de l'icône. Pour l'attribut Icon, vous pouvez utiliser la bibliothèque d'icônes de police Web de Kendo UI le nom de la classe CSS ou une police de vos propres polices.
Lorsque vous avez plusieurs icônes, elles sont rendues à partir de de gauche à droite, tels qu'ils apparaissent dans l'élément WindowActions. Puisque je veux suivre les conventions standard de Windows, je veux que mon icône de fermeture soit à l'extrême droite. Cela signifie que je veux configurer mes WindowActions comme ceci:
Je ne veux pas que l'icône de téléchargement s'affiche tant que je ne sais pas qu'il y a quelque chose dans la mémoire de stockage locale à récupérer, j'ai donc lié son attribut Hidden à un autre champ booléen.
Il ne reste plus qu'à écrire. Les deux méthodes, rappelant dans la méthode de téléchargement, définissent le champ hiddenUpload sur true afin que l’icône de téléchargement apparaisse. Voici un aperçu du code pour ces deux méthodes:
private bool hiddenUpload = true;
async privé void SaveToLocalStorage ()
{
//… sauvegarder dans un stockage local
hiddenUpload = false;
}
privé asynchrone GetFromLocalStorage ()
{
//… lu depuis le stockage local
}
En réalité, les limites de ce que vous pouvez faire ici se résument aux commandes qui auront un sens pour l’utilisateur dans la barre de titre de la fenêtre. Mais, comme vous pouvez le constater, vous pouvez empiler autant de commandes que vous le souhaitez dans votre fenêtre.
Essayez-le aujourd'hui
Pour en savoir plus sur les composants de l'interface utilisateur Telerik pour Blazor et sur ce qu'ils peuvent faire, consultez la page . La page de démonstration de Blazor ou téléchargez un procès pour commencer immédiatement à se développer.
Source link