L'interface utilisateur de Kendo obtient une interface utilisateur conversationnelle et de nouveaux composants [Release]

La version R2 2018 de Kendo UI inclut de nouveaux composants et fonctionnalités pour jQuery, Angular, React et Vue, y compris l'interface utilisateur de conversation. Apprenez tout sur les nouveautés.

Au-delà des premiers beaux jours du printemps, il y a une raison encore plus grande de s'enthousiasmer pour May car c'est la deuxième sortie de l'année pour l'UI Kendo! C'est vrai, à partir d'aujourd'hui ? la version R2 2018 de Kendo UI est disponible ? Continuez à lire pour voir comment cette version vous donnera des pouvoirs ninja web, mobile, et dev de bureau!

: Chaque version est de plus en plus bourrée de fonctionnalités, de sorte que ces publications peuvent être un peu longues. Vous trouverez ci-dessous une petite table des matières pour vous aider à naviguer vers les sections qui vous intéressent le plus.

Table des matières

1. Conversation UI aka Chat Bots
2. Applications Web progressives et interface utilisateur de Kendo
3. Plus de puissance avec React
4. Support V6 et plus avec Kendo UI pour Angular
5. DropDownTree & More avec UI Kendo
6. Vuex & DropDownTrees avec Vue.js
7. Mises à jour vers ASP.NET MVC et Core
8. Plus de Fun pour L'interface utilisateur pour PHP et JSP
9. Mises à jour de thème matériel
10. Voulez-vous voir plus?
11. Écoutons la rétroaction

Conversation UI aka Chatbots

Si vous ne l'avez pas déjà remarqué, 2018 semble être le année d'IA. Il a déjà été un sujet de conversation énorme et nous avons vu une tonne de produits construits sur AI, mais avec les récentes annonces à Microsoft Build et Google I / O, nous voyons que c'est encore plus grand conversation aujourd'hui.

Une grande partie de AI est l'expérience utilisateur réelle avec l'IA. Comment vos utilisateurs interagissent-ils avec votre service? N'y a-t-il pas d'interface utilisateur (Alexa, Google Home) ou avez-vous une sorte d'interface pour afficher une conversation par résultats (Assistant Google, Siri, Cortana, etc.)? Comment pouvons-nous intégrer certains de ces services dans nos applications?

Figure 1: Interface conversationnelle en action

Eh bien, avec la version R2 2018, l'ensemble du portefeuille de Les produits d'interface utilisateur que nous proposons vont commencer à proposer un composant Conversational UI (Chatbot) – et l'interface utilisateur de Kendo ne fait pas exception. A ce jour, nous proposons une version de ce composant pour:

• jQuery
• Angular
• Réagir
• Vue.js
• ASP.NET MVC et ASP.NET Core
• PHP & JSP [19659023] ASP.NET AJAX

Quelle que soit la plate-forme pour laquelle vous construisez des applications, vous pouvez tirer parti de fonctionnalités telles que:

• Cartes de héros intégrées
• Actions suggérées intégrées
• Built-in simple Indicateur de message et de typage
• Modèles de carte / pièce jointe personnalisés
• Connectivité facile aux services de chatbot (Azure / Microsoft Bot Framework, Wit.ai, Amazon Lex)

Pour plus d'informations, démos et autres ressources autour de ce composant peut se diriger vers cette page .

Les applications Web progressives et l'interface utilisateur de Kendo

Progressive Web Apps deviennent de plus en plus puissantes et comblent le fossé entre applications web réactives et native Applications mobiles. Beaucoup d'entre vous cherchent soit à créer de nouvelles applications dans le but d'en faire des PWA dès le début, soit à essayer simplement de PWA-ify vos applications existantes. Grâce aux comportements adaptatifs et réactifs des composants de l'interface utilisateur de Kendo, vous pouvez facilement créer une application Web qui fonctionne aussi bien sur un appareil mobile que sur un navigateur de bureau.

Ce n'est pas nécessairement nouveau – ces fonctions réactives ont été dans les composants de l'UI Kendo pour les années. Cependant, avec cette version, nous fournissons plus de conseils et de documentation sur la création d'applications PWA à l'aide des composants de l'interface utilisateur de Kendo. Voici quelques ressources sur l'utilisation de Kendo UI dans les PWA pour différents frameworks

• UI et PWA de Kendo
• UI de Kendo pour Angular et PWAs
• UI de Kendo pour React et PWAs

Pour plus de ressources et d'informations voir cette page d'aperçu PWA

Plus de puissance avec réaction

Notre bibliothèque sans dépendance React a fait d'énormes progrès depuis la sortie de la R1 2018. Ces composants sont construits à partir de zéro et sont parmi les meilleurs composants de l'interface utilisateur que vous pouvez ajouter à vos applications React. Au-delà du composant Conversation UI mentionné ci-dessus, nous avons augmenté le nombre de composants couramment utilisés dans les formulaires, ainsi que ajouté une tonne de fonctionnalités au composant Grid.

Jetez un coup d'œil au nombre de nouveaux composants que nous avons ajoutés cette version:

ComboBox

Figure 2: Nouveau ComboBox Réagir

Graphiques

Figure 3 : Nouveau composant Graphique React

Saisie semi-automatique

Figure 4: Réaction automatique Réaction

DatePicker

Figure 5: Réagir DatePicker

Commutateur de réaction

Figure 6: Composant de commutateur de réaction

En plus de cela, nous avons fourni des éléments de cadre très importants.

• PDF Exporter (à la fois générique HTML et spécifique à la grille)
• Export Excel (génération de fichiers JS Excel et Grid
• Localisation pour tous les composants React

Bien sûr, au-delà de ce grand ensemble de composants UI, nous avons également des mises à jour du composant UI préféré de chacun: le Grid.

• Edition en ligne et en cellule [19659023] Intégration de formulaire Redux lors de l'édition
• Regroupement
• Redimensionnement de colonne
• Réordonnement de colonne
• Modèles pour lignes et cellules d'une grille
• Modèles pour cellules de filtre
• Export Excel
• Export PDF
• Pour afficher et masquer les colonnes par programme

Du côté du support de thème, je suis heureux de dire qu'avec la version R2 2018 tous les composants React peuvent être dotés de matériaux en plus de Bootstrap v4 et Kendo UI Styles par défaut

Fumeurs sacrés qui sont très cuits dans une version – et c'est juste pour une saveur de Kendo UI!

Pour voir quelques démos des composants ci-dessus en action, vous pouvez vous référer à notre Kendo UI pour les composants React page .

Support V6 et Plus avec Kendo UI pour Angular

Allons-y immédiatement: oui, Kendo UI pour Angular prend maintenant en charge Angular v6 .

Maintenant, d'un point de vue des caractéristiques, nous avons beaucoup de nouveaux composants pour vous de vérifier! Cela aide à étendre la liste déjà croissante de composants angulaires, et bien sûr les composants existants ont reçu des fonctionnalités supplémentaires.

Composant de barre d'outils

Figure 7: Composant de barre d'outils angulaire

Menu

Figure 8: Nouveau menu angulaire

Info-bulle

Figure 9: Info-bulle angulaire [19659018] DateRangePicker

Figure 10: DateRangePicker pour angulaire

Bien sûr, le composant Grid a obtenu de nouvelles fonctionnalités supplémentaires:

Grille – Colonne Menu

Figure 11: Grille angulaire avec menu de colonne

Indicateur de chargement de grille


Figure 12: Grille angulaire avec nouveau Indicateur de chargement

Sur l'échantillon d'application à côté, au-delà de l'échantillon PWA auquel j'ai déjà été lié, nous avons également créé un échantillon pour en utilisant Kendo UI avec Electron . Cet exemple d'application et la documentation qui l'accompagne vous donneront un aperçu de la façon dont vous pouvez commencer à créer des applications de bureau multiplateformes utilisant l'interface utilisateur Kendo.

UI Kendo pour Angular & Electron

L'interface utilisateur de Kendo pour les composants d'interface angulaire, y compris la grille, supporte complètement le thème matériel !

DropDownTree & More avec l'interface utilisateur de Kendo

Avec la version R2 2018 nous avons livré -élément de commentaires le plus voté à notre liste de composants de l'interface utilisateur: DropDownTree. Cela fournit le meilleur du composant TreeView (par exemple la représentation hiérarchique des données) avec la compacité d'un DropDown. Je sais que beaucoup d'entre vous ont cherché ce composant et je suis heureux de dire que c'est enfin arrivé. 13

Figure 13: DropDownTree en action

Dernière version, nous avons ajouté un support supplémentaire pour l'édition v4 du protocole OData, mais nous ne sommes pas entièrement satisfaits. Nous sommes maintenant allés de l'avant et avons implémenté le support pour les données hiérarchiques via OData! Pour un exemple de ceci en action, vous pouvez vous référer à cette nouvelle démo de TreeList .

Si vous avez assisté ou entretenu avec Microsoft Build ou Google I / O la semaine dernière, vous savez que les services cloud, en particulier cognitifs, deviennent de plus en plus populaires. Les points d'intégration évidents avec l'interface utilisateur Kendo incluent des services qui permettent de stocker des données (Azure Cosmos DB par exemple) mais il existe également d'autres services pouvant être utilisés avec l'interface utilisateur de Kendo. Dans le cadre de cet effort, nous avons rassemblé plusieurs démos et des articles de documentation étape par étape sur la façon de travailler avec Kendo UI et les services cloud.

Si tout cela ne suffisait pas, nous voulions également fournir à nos développeurs jQuery des ressources supplémentaires pour l'intégration de l'interface utilisateur de Kendo avec des cadres et des plates-formes communs. Nous avons eu des retours sur l'utilisation de Kendo UI dans Electron pour tous vos besoins bureautiques multiplateformes, et avec R2 2018, nous avons maintenant un échantillon complet avec une documentation conçue pour présenter une application de bureau développée avec Kendo UI et déployée via Electron . Pour en avoir un avant-goût, vous pouvez sauter à notre section Electron documentation

Comme toujours, tout ce que j'ai mentionné ici est soit disponible dans notre dépôt de démonstration en ligne soit notre ] documentation .

Vuex & DropDownTrees avec Vue.js

Nos composants d'interface utilisateur pour Vue.js ont également reçu quelques mises à jour. L'un des plus gros éléments dont nous nous sommes occupés entre R1 et R2 2018 était l'intégration officielle avec Vuex – la solution la plus populaire pour la gestion d'état dans Vue.js. Cet exemple illustre comment vous allez prendre quelques uns de nos composants UI, y compris la grille de données, et travailler avec Vuex.

J'ai déjà mentionné que cette version incluait un composant Conversation UI pour toutes les interfaces Kendo. saveurs – et Vue n'est pas une exception!

Figure 14: Composant UI conversationnel pour Vue.js

Nous avons également ajouté le nouveau composant de l'interface utilisateur de Kendo, DropDownTree, dans la bibliothèque Vue.Comme le nom l'indique, ce composant combine la puissance d'une structure hiérarchique d'objets dans un DropDown – économisant une tonne de biens immobiliers qui seraient normalement dropdown tree

Figure 15: DropDownTree pour Vue.js

Pour plus de démos pratiques et de ressources autour de ce que nous avons fait avec Vue.js cette version vous pouvez vous référer à la page d'aperçu des composants de Kendo UI for Vue . [19659120] Mises à jour de ASP.NET MVC et Core

Merci à la puissance de l'interface utilisateur Kendo, je suis heureux de dire que Telerik UI pour ASP.NET MVC et Telerik UI pour ASP.NET Core ont également le nouveau Composant DropDownTree ! J'ai déjà expliqué ce qu'est le composant tout au long de ce billet de blog, mais en guise d'introduction rapide (le genre de nom l'indique), le composant fournit une structure de données hiérarchique dans un DropDown

] Figure 16: DropDownTree dans ASP.NET MVC et Core

Avec la dernière version, R1 2018, nous avons introduit Tag Helpers pour la plupart de nos composants – y compris la grille. Cette nouvelle approche de la présentation de vos composants ASP.NET dans un style déclaratif de type HTML devient de plus en plus populaire au sein de la communauté ASP.NET. Comme nous l'avons vu beaucoup de gens commencent à prendre nos Tag Helpers initiaux, nous voulions continuer la tendance et à partir de R2 2018 tous les composants de l'UI Kendo sont maintenant disponibles en tant que Helpers Tag! Consultez notre site en ligne démos pour voir comment vos composants favoris peuvent être implémentés via les Helpers Tag

Tout comme avec les composants jQuery, nous supportons maintenant OData v4 avec l'inclusion de la prise en charge des données hiérarchiques via OData. Voir la section jQuery ci-dessus pour plus d'informations.

SignalR a été une bibliothèque populaire pour la communication de données dans le monde .NET. Alors que nous avons supporté SignalR pendant un certain temps, SignalR a récemment été mis à jour pour ajouter le support des applications ASP.NET Core dans ASP.NET Core 2.1. Comme nous savons que ce sera une partie importante de vos applications ASP.NET Core, avec R2 2018, nous prenons désormais officiellement en charge SignalR dans ASP.NET Core 2.1 et nos composants d'interface utilisateur.

Pour plus de détails, vous pouvez consulter notre ] Interface utilisateur pour les démos ASP.NET MVC ainsi que notre interface pour les démos ASP.NET Core .

Plus de plaisir pour l'interface utilisateur pour PHP et JSP

Comme la plupart d'entre vous le savent, L'interface utilisateur pour PHP et l'interface utilisateur pour JSP ont l'interface utilisateur de Kendo comme noyau. Grâce à cela, ces deux bibliothèques ont non seulement reçu le nouveau composant Conversational UI (couvert en haut de ce post), mais aussi le nouveau composant DropDownTree!

Figure 17: Interface utilisateur pour PHP et Le nouveau DropDownTree de JSP

Le moyen le plus simple de vérifier les composants en action serait de se référer à nos démos en ligne:

Mises à jour du thème matériel

À partir de R2 2018 L'interface utilisateur pour les composants React est maintenant entièrement stylisée pour notre thème Material. Cela signifie que si vous suivez déjà les directives de conception de matériel ou si vous travaillez avec d'autres composants de l'interface utilisateur qui suivent Matériau, vous pouvez facilement ajouter des widgets Kendo et avoir un aspect uniforme dans votre application.

Image 18: La grille avec le thème matériel appliqué

Vous pouvez voir le thème Matériel dans Kendo UI pour Angular ici alors que sur l'interface utilisateur de Kendo pour React vous avez le thème ici .

Avec la version précédente, nous avons mentionné que l'interface utilisateur de Kendo, Telerik UI pour ASP.NET MVC / Core, Telerik UI pour JSP et Telerik UI pour PHP recevrait également tous le thème Matériel. Malheureusement, nous avons besoin d'un peu plus de temps pour polir ce thème, alors qu'il n'est pas disponible aujourd'hui, il sera ajouté à notre liste de thèmes dans les prochaines semaines!

Vous voulez voir plus?

J'ai essayé pour fournir autant d'informations que possible dans ce post, mais il pourrait être difficile de tout consommer. Si vous voulez voir ces faits saillants et plus, puis-je suggérer de s'inscrire à notre webinaire sur la version R2 2018 le 31 mai, à 11 h 30 HNE. Les gens merveilleux de l'équipe de Kendo UI Developer Advocates et moi-même allons plonger dans tout ce que j'ai couvert dans ce blog, mais aller encore plus loin.

Sauvez votre siège

Écoutons les commentaires!

Je suis très excité par cette version, et j'espère que vous l'êtes aussi! Êtes-vous super content d'un nouveau composant? Tout ce que vous avez trouvé manquant dans une perspective de fonctionnalité ou de composant? Donne moi de tes nouvelles! Vous pouvez fournir des commentaires directement à moi-même et à l'équipe de Kendo UI à travers la section des commentaires ci-dessous. Juste au cas où j'inclurais aussi des liens vers les portails de feedback que nous offrons afin que vous puissiez voter et commenter votre nouveau composant ou fonction favori.