Archives mensuelles : janvier 2013

ASP.NET MVC : Présentation de T4MVC

Je viens de changer de boite et mon premier projet est un projet en ASP.NET MVC dans sa version 3. Je vais vous présenter un outil qui permet de faciliter le développement et la maintenance d’un application MVC : T4MVC.

Il s’agit d’un paquet (package) que l’on installe via NuGet, le gestionnaire de package de Visual Studio. Cet outil prend la forme d’un ficher T4 (Text Template Transformation Toolkit), T4MVC.tt, qui sera rajouté à votre projet. Les fichiers T4 permettent de la génération de code.

Dans ASP.NET MVC, dans de nombreux cas, les méthodes prennent en paramètre des chaines de caractères (« magic strings ») où il est facile de se tromper. L’utilisation de T4MVC permet de résoudre ce problème en générant des constantes, des méthodes pouvant prendre en paramètre des expressions lambda afin de réduire les erreurs et leur temps de détection. En effet, avec l’utilisation de chaîne de caractères, une erreur ne sera visible qu’à l’exécution alors qu’en utilisant T4MVC, vos erreurs seront remontées à la compilation.

Installation

Pour l’exemple, j’ai créeé un nouveau projet ASP.NET MVC en ayant sélectionné le template Internet Application.

L’installation de T4MVC se fait via le gestionnaire de paquet NuGet de Visual Studio. Nous allons ici utiliser l’interface graphique mais il est bien évidemment possible de l’installer par la console NuGet. Le lancement du gestionnaire NuGet se fait via un clic droit sur le projet MVC puis Manage NuGet Packages ….

Lancement du gestionnaire de paquet NuGet

Il faut ensuite sélectionner l’onglet Online et effectuer une recherche sur T4MVC et cliquer sur Install.

NuGet Manager - Recherche de T4MVC

NuGet va automatiquement installer les dépendances de T4MVC, dans notre cas T4MVCExtensions.

Installattino de T4MVC

L’installation de ce paquet se traduit par l’ajout de 3 fichiers à la racine du projet :

  • T4MVC.tt : le fichier template dont je parlais précédemment
  • T4MVC.tt.hooks.t4 : un fichier vous permettant d’ajouter votre propre code afin d’améliorer le code généré
  • T4MVC.tt.settings.xml : le fichier de configuration qui permet de notamment modifier les namespaces des fichiers générés

Fichiers T4MVC

La génération de code se fait en faisant un clic droit sur le fichier T4MVC.tt et en cliquant sur Run Custom Tool.

Lancement de la génération des fichiers

Une fois la génération effectuée, les fichiers générés se trouvent sous le fichier T4MVC.tt.

T4MVC : Fichiers générés

Je vous conseille également l’utilisation d’extension qui permet le lancement automatique de la transformation à la compilation de votre projet comme AutoT4MVC ou Chirpy. Sinon, vous devrez le lancer manuellement, ce qui s’avère lourd à force.

Activation de la compilation des vues

Par défaut, les vues ne sont pas compilés lors de la génération de la solution. Afin d’obtenir les erreurs dans vos vues à la compilation, il est nécessaire d’activer cette option. Pour cela il faut modifier le fichier .csproj (ou .vbproj) (via un éditeur de texte externe car non possible directement via VS …) et définir la propriété MvcBuildViews à true, comme dans l’exemple suivant :

<Project ToolsVersion="3.5" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    ...
    <MvcBuildViews>true</MvcBuildViews>
    ...
  </PropertyGroup>

La génération du projet sera donc un plus longue …

Utilisation

Comme précisé plus haut, T4MVC génère des classes contenant des méthodes / constantes permettant un code plus propre et plus maintenable. Nous allons voir 2 exemples avec les fichiers et les Actions mais il existe d’autres cas d’utilisation comme la redirection vers les vues, les routes … Je vous conseille la documentation du projet pour en savoir plus

Liens vers des fichiers

T4MVC génère pour les liens vers des fichiers un namespace Links (configurable dans le fichier de configuration) qui contient l’ensemble des fichiers de l’application (css, js, images, …). L’utilisation se fait via la syntaxe suivante Links.Folder.File. Ainsi on remplacera

<link rel="stylesheet" type="text/css" href="/Themes/default.css" />
<script src="/Scripts/jquery.min.js" type="text/javascript"</script>

par :

<link rel="stylesheet" type="text/css" href="@Links.Themes.default_css" />
<script src="@Links.Scripts.jquery_min_js" type="text/javascript"</script>

Comme vous pouvez le voir, les points et les – sont remplacés par des _, il faut donc faire attention au nom de vos fichiers au risque de vous retrouver avec 2 constantes avec le même nom, ce qui ne compilera pas !!!.

Actions

De la même façon, T4MVC génère un namespace MVC (configurable dans le fichier de configuration) contenant les méthodes des controllers. L’utilisation se fait via la syntaxe suivante MVC.Controller.Action. On remplacera donc la syntaxe

@Html.ActionLink('Home', 'Index')

par

@Html.ActionLink('Home', MVC.Home.Index())

Conclusion

T4MVC est un must have dans le développement d’applications ASP.NET MVC que je vous recommande d’utiliser et qui vous fera gagner un temps précieux lors de vos développements et la maintenance de votre application. T4MVC fait partie du projet MvcContrib qui permet de rajouter pas mal de possibilité dans le framework MVC comme des Helpers, des Filters, une librairie de tests, …

Ressources et Outils pour Twitter Bootstrap

J’ai déjà évoqué rapidement dans un précédent article sur les outils CSS3, HTML et JavaScript, Twitter BootStrap, boite à outils/template/Framework pour HTML/CSS/JavaScript permettant de démarrer un projet rapidement. Il inclut de base une feuille de style riche ainsi que des composants d’interface vous permettant de designer un site rapidement.

Voici quelques ressources/outils concernant Bootstrap que j’ai pu trouver sur le net :

Visual Studio : Astuces JSLint

J’ai déjà évoqué JSLint dans un précédent article, un validateur de code JavaScript et l’extension pour Visual Studio associée (VS2010, VS2012).

Voici quelques astuces afin d’améliorer l’utilisation de JSLint avec Visual Studio.

Analyser une portion de code

Il est possible de lancer la validation sur une partie de code. Pour cela, il suffit de sélectionner le code à analyser, clic droit puis cliquer sur JS Lint. Validation d'une portion de code avec JSLint

Exclure des fichiers

Par défaut, JSLint validera tout vos fichiers JavaScript. Vous pouvez ainsi avoir des erreurs concernant des librairies externes (type jQuery, Modernizr, …) qui viendront polluer les erreurs concernant vos fichiers. Il est possible d’exclure des fichiers de la validation effectuée par JSLint. Pour cela, il suffit de faire un clic droit sur le fichier puis cliquer sur Skip on build (item)

JSLint4VS_ExcludeFile

De la même façon, il est possible d’exclure des dossiers.

Ajouter jQuery

Si vous utiliser jQuery, il est possible que vous ayez des erreurs de type :

Problem at line 1 character 1: '$' was used before it was defined.

Afin de supprimer ses erreurs, il faut ajouter des variables prédéfinies dans la configuration de JSLint. La configuration se fait en cliquant sur JS Lint Options… dans le menu Outils de Visual Studio.

JSLint4VS_OptionsMenuIl faut ensuite rajouter $ et jquery comme variables prédéfinies comme ci-dessous :
JSLint4VS_ConfigurationVous pouvez procéder de la même façon pour d’autres librairies ou vos propres variables.

Ignorer une partie de code

Si vous avez besoin d’ignorer une partie de code, il est possible de l’exclure de la validation via un système de commentaire. Il suffit de mettre le code à ignorer entre les commentaires  /*ignore jslint start*/ et  /*ignore jslint end*/ ou d’ajouter en fin de ligne //ignore jslint. Ces commentaires sont configurables dans les options de JsLint.

JSLint_OptionIgnore