Fermer

janvier 10, 2020

Présentation de l'assistant de modèle d'interface utilisateur Kendo pour Visual Studio CodeUne minute de lecture



Apprenez à installer et à utiliser notre nouvel Assistant de modèle d'interface utilisateur Kendo pour créer rapidement de puissantes applications Angular et React.

L'un de nos objectifs au sein de l'équipe d'interface utilisateur Kendo est de vous aider à créer rapidement de superbes applications. Dans cet esprit, nous sommes heureux d'annoncer aujourd'hui qu'il existe un nouvel Assistant de modèle d'interface utilisateur Kendo pour Visual Studio Code ?

L'assistant de modèle vous permet d'échafauder rapidement les applications KendoReact et Kendo UI for Angular avec un outil facile à utiliser intégré directement dans Visual Studio Code.

Dans cet article, vous apprendrez comment installer l'extension et comment l'utiliser pour créer de puissantes applications Angular et React .

Installation

L'assistant de modèle d'interface utilisateur Kendo est une extension de code Visual Studio, et en tant que tel, vous devrez avoir Visual Studio Code installé pour l'utiliser.

Une fois que vous avez Visual Studio Code installé, allez-y et ouvrez-le, dirigez-vous vers l'onglet extensions (# 1 dans l'image ci-dessous), et utilisez la barre de recherche (# 2 dans l'image ci-dessous) pour rechercher Assistant de modèle d'interface utilisateur Kendo .

Sélectionnez le modèle d'interface utilisateur Kendo Assistant, puis cliquez sur le bouton vert Installer pour ajouter l'extension au code Visual Studio.

Et … c'est tout! Vous avez maintenant l'extension installée et prête à l'emploi, voyons donc ce qu'elle peut faire.

Utilisation de l'extension

Pour lancer l'assistant de modèle d'interface utilisateur de Kendo, vous devez utiliser la palette de commandes Visual Studio Code, que vous peut s'ouvrir avec Ctrl + Maj + P ( Cmd + Maj + P sous macOS). Avec la palette ouverte, recherchez l'option Lancement de l'assistant de modèle d'interface utilisateur Kendo et sélectionnez-la pour lancer l'assistant.

À partir d'ici, le processus de création d'une application est assez simple. Tout d'abord, donnez un nom et un chemin à votre projet.

Sélectionnez ensuite si vous souhaitez utiliser React ou Angular.

Pour la troisième étape, vous devez créer toutes les pages que vous souhaitez voir apparaître dans votre application. L'assistant vous permet de démarrer des pages à partir de quatre modèles préconfigurés: vierge, formulaire, grille et graphique. [19659004] Si vous essayez l'Assistant pour la première fois, allez-y et créez une page en utilisant chaque type afin de voir comment tout fonctionne.

Après y ou créez vos pages, appuyez une dernière fois sur le bouton Suivant. Cela vous amènera à la dernière étape du processus, où vous choisirez les thèmes d'interface utilisateur Kendo préconfigurés avec lesquels vous souhaitez démarrer votre application. (Et vous pourrez personnaliser votre thème plus tard.)

Suivant , cliquez sur le bouton créer et l'Assistant générera votre nouvelle application, ainsi qu'un lien pour ouvrir votre application dans Visual Studio Code.

Une fois votre application créée et prête à l'emploi, examinons ce que vous pouvez en faire.

Exécution de votre application

Pour exécuter votre application, vous devez d'abord devez installer ses dépendances npm en exécutant npm install à partir de votre terminal ou invite de commande.

CONSEIL : Vous pouvez ouvrir votre terminal ou invite de commande directement dans Visual Studio Code à l'aide de Ctrl + `.

Ensuite, exécutez votre application à l'aide de ng serve pour Angular ou npm start pour React.

Et juste comme ça, vous avez maintenant une application multi-pages configurée et prête à fonctionner!

Un dernier conseil: maintenant que vous avez votre application, vous pouvez utiliser le Kendo UI ThemeBuilder pour personnaliser l'apparence visuelle de votre thème directement dans le navigateur.

Si vous êtes intéressé, consultez les articles de documentation suivants pour obtenir des informations détaillées sur l'utilisation de ThemeBuilder pour personnaliser votre application.

Étapes suivantes

L'assistant de modèle d'interface utilisateur de Kendo simplifie l'échafaudage rapide de nouvelles applications pour React ou Angular, alors essayez-le. Et quand vous le faites, dites-nous ce que vous en pensez. L'extension est disponible sur GitHub donc créez un problème si vous rencontrez des problèmes ou avez des demandes de fonctionnalités.





Source link