Fermer

juin 10, 2021

Présentation de Web Live Preview par Telerik UI pour ASP.NET AJAX


Êtes-vous prêt à découvrir ce qui se passe sur la scène des formulaires Web ASP.NET et son impact sur le développement Web dans Visual Studio 2019 et au-delà, et en particulier sur Telerik UI pour ASP.NET AJAX suite ?

Si vous êtes curieux d'en savoir plus, consultez cet article de blog où nous ferons une visite guidée des sujets suivants :

Qu'est-ce que Web Live Preview ?

Web Live Preview (WLP) est un module complémentaire Visual Studio (VS) qui permet le mappage en temps réel entre votre code source et le HTML rendu dans le navigateur. Lorsque vous affichez votre application Web, vous pouvez sélectionner des éléments dans le navigateur comme dans DevTools et l'IDE vous montrera automatiquement le code qui a été exécuté pour générer l'élément. Et vice versa : si vous modifiez la source dans VS, l'application Web sera automatiquement mise à jour. L'idée de l'outil est d'être accessible (une tendance dans l'ensemble du portefeuille Microsoft) et de suivre les normes Web modernes.

Ce n'est pas tout. WLP vous permet de configurer les paramètres (propriétés, liaison de données, etc.) des composants ASP.NET Web Forms. Cela s'applique également aux contrôles Telerik UI ASP.NET AJAX vous permettant de les configurer directement à partir de votre navigateur via le panneau d'action fourni (menu Tâches avec les propriétés du contrôle – très similaire à la balise active que nous déjà familier avec le VS Designer). N'est-ce pas génial et fait gagner du temps ?

WLP avec Telerik Overview" title="WLP with Telerik Overview" style="vertical-align: middle;"/></p data-recalc-dims=

Il convient également de mentionner que , contrairement au concepteur VS qui est très obsolète, Web Live Preview bénéficiera d'une prise en charge complète et de mises à jour dans les futures versions de Visual Studio. La communauté demande déjà et espère que Web Live Preview sera activé pour d'autres types de projets Web tels que Blazor et ASP. NET Core, où l'outil n'est pas encore disponible et son potentiel et sa convivialité seront énormes.

Comment l'essayer

Suivez les étapes ci-dessous pour jouer avec l'outil :

Configuration (téléchargement et installation)[19659011]Vous pouvez obtenir et installer le module complémentaire WLP à partir de la place de marché Visual Studio :

  1. Utilisez la place de marché Web ou la place de marché « Gérer les extensions » intégrée à Visual Studio -> allez dans Extensions – > Gérer les extensions -> tapez « aperçu en direct sur le Web » dans la zone de recherche et appuyez sur Entrée.
  2. Installer l'outil.
    Astuce 1 : Pour terminer l'installation, il vous sera demandé de redémarrer Visual Studio.
    Astuce 2 : Pour vous assurer que l'outil est installé et activé, accédez à Outils -> Options -> tapez « aperçu en direct sur le Web » dans le champ Options de recherche -> appuyez sur Général -> assurez-vous que Activé et Les outils et les fonctionnalités de synchronisation automatique sont activés :
     
    Aperçu Web en direct (aperçu) > Général. Options de lien du navigateur : les deux CSS Auto Link Enabled et Enabled sont définis sur true. Options d'aperçu Web en direct : à la fois Activé et Outils et Synchronisation automatique activée sont définis sur true." title="Activer WLP à partir des options de Visual Studio"/></li data-recalc-dims=

Utilisation de l'extension

Une fois installé, le WLP vous donne un nouveau " Option de clic droit "Modifier dans le navigateur" dans le menu contextuel de la page ASPX en mode Source ainsi que dans l'explorateur de solutions :

 Un clic droit fait apparaître les options Couper, Copier, Supprimer, Insérer un extrait, Entourer avec, Afficher le code, Afficher dans le navigateur, Modifier dans le navigateur, Exécuter jusqu'au curseur, Modifier le maître, Réduire la balise. Nous avons mis en surbrillance Modifier dans le navigateur.

Cette option chargera la page dans un mode spécial dans votre navigateur par défaut. , où vous pouvez sélectionner des éléments et des contrôles Web UI avec la souris et modifier leurs propriétés et leur texte :

Dans une fenêtre Mail, le menu de gauche (Boîte de réception, Courrier indésirable, Brouillons, etc.) comporte une info-bulle indiquant « Page Conteneur >>'. Le texte de superposition pointe vers cette info-bulle et dit : "Le menu de la balise de sélection vous donne la possibilité d'afficher t Le panneau Action (balise active) du contrôle WebForms sélectionné. Cliquez simplement sur les symboles >>.' En bas à gauche, le texte de superposition pointe vers le logo VS : « Vous pouvez activer/désactiver l'inspecteur à partir d'ici ». Et en bas à droite, pointant sur div#ct100_Folder..., 'Utilisez l'inspecteur pour vérifier et sélectionner les nœuds parent et enfant du HTML/contrôle actuellement sélectionné.'" title="Web Live Preview UI Structure" style="vertical- align: middle;"/></p data-recalc-dims=

La sélection dans le navigateur est automatiquement synchronisée dans votre code source dans Visual Studio. Si vous sélectionnez un contrôle d'interface utilisateur dans la page, par exemple RadGrid (plus d'informations à ce sujet dans la section suivante) ou asp:DataGrid et modifiez ses propriétés à partir du panneau d'action WLP, les propriétés seront immédiatement reflétées dans la source. L'inverse est également valable : les modifications apportées à la source seront également reflétées dans le navigateur.[19659023]Intégration avec les contrôles Telerik ASP.NET AJAX

C'est un véritable honneur pour l'équipe Telerik de Progress de participer à cette opportunité importante et utile et d'être parmi les pionniers dans l'introduction de la prise en charge de Web Live Preview pour l'interface utilisateur Telerik pour ASP Boîte à outils .NET AJAX.

Faisons une démo rapide sur le courant nt niveau de support :

  1. Démarrez une nouvelle Telerik C# Web Forms Application et choisissez le modèle inspiré d'Outlook comme base (une condition préalable est d'avoir installé les Telerik AJAX VSX Extensions ).
  2. Une fois le projet créé et chargé dans Visual Studio, cliquez avec le bouton droit sur la page Default.aspx et choisissez l'option « Modifier dans le navigateur » (votre navigateur par défaut) dans le menu contextuel. Cela chargera la page avec Web Live Preview activé dans le navigateur.

    Conseil : Pour une meilleure visibilité sur les machines avec un seul écran, vous pouvez diviser l'écran entre Visual Studio et le navigateur en appuyant sur la touche Windows + Gauche (pour que l'IDE soit positionné à gauche) et touche Windows + Droite (pour que le navigateur aille à droite).

  3. Exemple 1 : Insérez RadTextBox et RadButton dans la page source, sélectionnez-les dans le navigateur à droite et modifiez certaines de leurs propriétés principales à partir du panneau d'action : Text et ButtonType. Remarquez comment les propriétés sont appliquées automatiquement dans la source :
     
    Aperçu Web en direct en action - cliquez pour une vidéo en plein écran dans un nouvel onglet" title="Aperçu Web en direct en action - cliquez pour une vidéo en plein écran dans un nouveau tab" onclick="window.open('https://d585tldpucybw.cloudfront.net/sfimages/default-source/aspnet/weblivepreview_in_action_large.gif?sfvrsn=7481c389_0')"/><p data-recalc-dims=Figure 1 : l'aperçu Web en direct permet vous devez modifier les propriétés des composants Telerik via le navigateur.

    Comme il s'agit d'un processus bidirectionnel, si vous modifiez les valeurs des propriétés dans la source, elles seront également mises à jour dans le panneau d'action.

  4. Exemple 2 : Examinez et jouez avec le panneau d'action WLP de RadGrid et les autres composants liés aux données. Accédez au navigateur, sélectionnez le contrôle RadGrid et appuyez sur le bouton >> dans le sélecteur de balises pour afficher son panneau d'action. Vérifiez les paramètres de configuration disponibles pour le contrôle Web et essayez de modifier sa source de données. Vous verrez que l'option databound apparaîtra dans Visual Studio pour une configuration ultérieure.

    Aperçu Web en direct dans RadGrid d'action - cliquez pour une vidéo en plein écran dans un nouvel onglet

    Figure 2 : Liez RadGrid via le panneau d'action d'aperçu Web en direct.

  5. Exemple 3 : Fonction de synchronisation automatique CSS : lorsque WLP est activé, si vous modifiez un fichier CSS en cours d'utilisation, les mises à jour seront automatiquement envoyées :

     Aperçu Web en direct en action CSS Auto Synchronisation - cliquez pour la vidéo en plein écran dans un nouvel onglet" title="Aperçu en direct sur le Web en action Synchronisation automatique CSS - cliquez pour la vidéo en plein écran dans un nouvel onglet" onclick="window.open('https://d585tldpucybw.cloudfront. net/sfimages/default-source/default-album/weblivepreview_in_action_css_auto_sync_large.gif?sfvrsn=d7e4a44_0')"/></p data-recalc-dims=

    Figure 3 : CSS Auto-sync en action.

  6. Quelque chose que j'ai remarqué lors de mes tests est que le comportement par défaut du concepteur pour attacher son gestionnaire côté serveur par défaut lorsque vous double-cliquez sur un contrôle est également pris en charge par WLP.

     Web Live Preview Créer un événement de serveur. Le texte de superposition dit : " Double-cliquez sur le bouton pour créer son événement Button_Click dans le codebehind. WLP basculera automatiquement la page aspx en mode d'affichage Source.'

    Exemple 4 : Localisez le contrôle RadButton dans la page Web et double-cliquez dessus. Cela créera immédiatement l'événement RadButton1_Click et l'affichera automatiquement dans la page codebehind.

    Conseil : Le double-clic sur les conteneurs tels que div, span et paragraphes le rend modifiable et vous permet d'écrire et de modifier le texte à l'intérieur, qui est synchronisé avec la page aspx lorsque vous brouillez le champ modifiable .

Essayez-le et dites-nous ce que vous en pensez

Bien que le WLP soit actuellement en phase de prévisualisation, Microsoft se consacre à sa qualité, et je peux confirmer que de nombreux bogues signalés ont été corrigés dans un délai relativement court au cours de notre collaboration avec eux. L'outil offre déjà un bon niveau de prise en charge de nombreux contrôles Telerik UI for ASP.NET AJAX et permet de configurer leurs paramètres directement depuis le navigateur. Certaines fonctionnalités telles que l'éditeur personnalisé permettant de définir les skins sont actuellement en développement et d'autres ne sont toujours pas disponibles ou ne fonctionnent pas encore. Ceci, bien sûr, est temporaire et est sur le point de changer dans les prochaines mises à jour de l'outil.

C'est le moment d'inviter tous ceux qui souhaitent participer à l'amélioration de l'aperçu Web en direct à nous le faire savoir en ouvrant un ticket de commentaires généraux à partir de votre compte Telerik.com. La seule condition préalable est d'avoir une application ASP.NET Web Forms existante avec des composants Telerik AJAX à jour que vous souhaitez partager avec nous à des fins de test. Bien sûr, nous serons heureux de recevoir vos commentaires afin que nous puissions les partager avec l'équipe WLP et les aider à rendre l'outil utilisable pour tous les développeurs de l'écosystème Microsoft.

En savoir plus sur WLP

Let Je vous donne quelques ressources supplémentaires pour WLP qui pourraient vous être utiles :




Source link