La nouvelle interface utilisateur Kendo pour jQuery DockManager et comment l’utiliser

Créez une expérience de type bureau dans votre application Web avec la nouvelle interface utilisateur Kendo pour jQuery DockManager.

La version R3 2023 introduit de nombreuses améliorations dans la version Progress Interface utilisateur Kendo pour jQuery suite. Nous avons de nouveaux composants, fonctionnalités et améliorations sur plusieurs sujets, y compris sur le plan de l’accessibilité (la liste complète peut être consultée sur le Page Quoi de neuf). Pas trop mal, non ?

L’un des nouveaux ajouts importants est le DockManager composant, et j’aimerais prendre le temps de discuter de ses capacités avec vous. Ne pars pas maintenant !

Présentation du DockManager

Le composant Kendo UI pour jQuery DockManager est conçu pour vous aider à recréer une expérience de bureau sur le Web, en répliquant les docks (ainsi que leur comportement respectif) dans les applications de bureau.

Il est livré avec un riche ensemble de fonctionnalités pour vous aider à afficher votre contenu. Les volets sont bien séparés et peuvent être facilement réorganisés soit en les épinglant, soit en les faisant glisser vers l’emplacement souhaité.

Cependant, comme vous pouvez explorer la plupart des fonctionnalités du composant dans les exemples en ligne, nous parlerons davantage des applications pratiques du DockManager dans un petit projet d’intégration qui suit ci-dessous. Ne vous inquiétez pas s’il est présenté principalement sous forme d’images : une version complète exécutable sera disponible à la fin du billet de blog.

Liste des composants

Avant de commencer, crions les composants de Kendo UI participant au projet :

La présentation du projet

Commençons par afficher le DockManager avec plusieurs volets vides :

Pas très impressionnant, non ? Eh bien, plaçons du contenu dans le volet Explorateur de solutions :

Vous commencez à vous paraître familier ? À l’aide du composant TreeView, vous pouvez simuler la structure d’un projet comme si vous utilisiez Visual Studio. Vous pouvez rechercher un fichier ou un dossier à l’aide de la TextBox ci-dessus et associer les boutons de la barre d’outils à toutes les actions qui vous viennent à l’esprit. Vous verrez également les icônes de l’interface utilisateur de Kendo affichées en fonction des éléments de TrueView, mais si vous préférez une autre bibliothèque d’icônes, n’hésitez pas à l’utiliser : le composant les gérera bien.

Commençons par ajouter un ContextMenu et voyons ce qu’il a à offrir.

Besoin d’ajouter, de renommer ou de supprimer un élément dans le TreeView ? Fait, fait et fait. L’élément de menu « Nouveau fichier » sous la section « Ajouter » ajoutera un nouveau fichier HTML et l’ouvrira dans le volet de gauche, et le nouveau dossier ajoutera un élément avec une icône de dossier sous le nœud sélectionné.

Choisir l’option « Supprimer » supprimera l’élément de l’arborescence du projet, et choisir l’option « Renommer » affichera une entrée dans laquelle vous pourrez saisir le nouveau texte du nœud. La transition entre le nœud et l’entrée se fait facilement grâce à l’option de modèle de TreeView, alors n’oubliez pas de la vérifier.

Un double-clic sur un fichier ouvrira le contenu factice associé dans le volet de gauche.

Comme vous l’avez probablement deviné, vous pouvez améliorer cette partie en faisant une requête à votre serveur pour récupérer un contenu plus significatif. La partie « Ajouter » peut également être améliorée en ouvrant une boîte de dialogue avec une liste de différentes extensions de fichiers prédéfinies : .cshtml, .html, .cs et autres.

Avec cela, nous concluons la partie Explorateur de solutions. Dans le volet « Console », nous avons une simple console Kendo UI qui enregistre les occurrences d’événements du DockManager. Vous l’avez probablement vu dans les exemples « Événements » des composants de l’interface utilisateur de Kendo.

Dans le volet Explorateur de serveur, nous avons une autre arborescence et une autre barre d’outils, encore une fois similaires à celles que nous avons dans Visual Studio. Vous pouvez faire votre magie ici et lier les boutons de la barre d’outils aux opérations côté serveur ou utiliser ce volet à des fins entièrement différentes.

Autres idées d’intégration

Vous vous demandez comment utiliser DockManager autrement ? Comme vous l’avez probablement déjà deviné, vous pouvez également utiliser le composant pour répliquer l’interface utilisateur de Visual Studio Code, mais qu’y a-t-il d’autre ?

Avez-vous entendu parler de Twitch, la plateforme de streaming ? Eh bien, si vous êtes modérateur dans une chaîne, vous remarquerez comment le flux et le chat sont soigneusement séparés dans deux volets différents déplaçables et redimensionnables et des informations supplémentaires sur la chaîne sont placées en dessous dans un autre volet. Astuce, astuce : cela peut être réalisé avec le DockManager.

Je pense que nous pouvons tous convenir qu’un DockManager est un outil d’interface utilisateur puissant pour placer votre contenu, là où la seule limite est votre imagination.

Il est temps de dire au revoir

Avec ceci, mon humble article de blog touche à sa fin. Merci d’être un merveilleux lecteur et d’être resté avec moi jusqu’à la fin de ce que j’espère être une lecture agréable et utile. Je suis sûr que vous saurez faire passer mon modeste projet à un niveau supérieur afin d’offrir une excellente expérience utilisateur à vos clients.

Vous trouverez ici la copie téléchargeable du projet.

Si vous avez des questions sur DockManager ou sur d’autres composants de l’interface utilisateur de Kendo, envoyez-nous un message, à vos sympathiques ingénieurs d’assistance de quartier, soit dans un ticket d’assistance, soit sur nos forums. Nous avons ce qu’il vous faut!

Et si vous ne l’avez pas déjà fait, essayez Kendo UI pour jQuery gratuitement pendant 30 jours.

Essayez maintenant