A ma grande surprise, mon application qui fonctionnait normalement précédemment m’affichait subitement l’exception suivante lors du chargement du formulaire main : « The type initializer for ‘CrystalDecisions.ReportSource.ReportSourceFactory’ threw an exception ».

Après quelques petites heures de recherche, j’ai trouvé la solution pour lever cette exception. Il suffit simplement de modifier la plateforme cible lors de la compilation du projet.

Pour cela, cliquez sur le menu Projet, sélectionnez l’option propriétés de l’application. Dans la fenêtre des propriétés, sélectionnez l’onglet Build. Déroulez ensuite la zone Platform target et choisissez x86. Enregistrez et c’est tout.

À la prochaine exécution de l’application, cette exception ne s’affichera plus

Avec ces nouveautés, nous avons sans apporter aucune modification à nos modèles et contrôleurs, créé des vues personnalisées pour les navigateurs Desktop et les navigateurs mobiles.

Dans ce billet, nous verrons comment procéder autrement en utilisant le package Nuget JQuery.Mobile.MVC.

Le package jQuery.Mobile.MVC installe la librairie JQuery Mobile qui va permettre la création des interfaces Web optimisées pour les smartphones et autres terminaux tactiles, ainsi que plusieurs autres fichiers pour faciliter la tâche au développeur.

Ouvrons notre application ASP.NET MVC 4 avec votre éditeur Visual Studio 2010 SP 1 ou Visual Web Developper Express 2010 SP 1.

Nous allons dans un premier temps intégrer la bibliothèque JavaScript à notre projet en utilisant le gestionnaire de packages Nuget.

Pour cela, nous allons faire un clic droit sur notre projet dans l’explorateur de solution. Dans le menu contextuel qui s’affiche, sélectionnons « Manage Nuget Packages ».

La fenêtre de gestion des packages Nuget s’affiche. Nous devons rechercher le package jQuery.Mobile.MVC en tapant son nom dans la zone de recherche.

Nous allons ensuite cliquer sur Install pour que Nuget télécharger et installe automatiquement dans notre projet le package ainsi que toutes ses dépendances.

Nous allons nous rendre compte que plusieurs fichiers ont été ajoutés au projet, dont un nouveau fichier _Layout.Mobile.cshtml, _ViewSwitcher.cshtml ou encore ViewSwitcherController.cs.

Procédons maintenant à l’exécution de notre page pour voir ce qui sera affiché à l’écran en utilisant notre navigateur Firefox, et en définissant comme agent utilisateur iPhone (voir mon précédent billet de blog pour définir l’agent utilisateur sous Firefox).

View Switcher.

Revenons maintenant voir ce qui se trouve sous le capot.

Sur la page affichée dans notre navigateur, nous remarquons qu’une bande noire s’est ajoutée en début de celle-ci avec un lien permettant de basculer sur la vue desktop de la page.

D’où provient cette bande ?

Ouvrons avec notre éditeur la page affichée à l’écran (Index.cshtml).

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

À première vue, on se rend compte qu’aucune modification n’a été effectuée dans ce fichier.

Puisque ce fichier est intégré dans le Layout avant d’être affiché, jetons maintenant un coup d’œil sur notre fichier _Layout.Mobile.cshtml. Nous allons apercevoir la ligne de code suivante :

@Html.Partial("_ViewSwitcher")

Qui fait référence à la vue partielle _ViewSwitcher.cshtml. C’est cette vue qui ajoute un lien sur toutes les pages mobiles permettant de basculer du mode d’affichage mobile pour Desktop et vice-versa. Par défaut, elle n’est pas incluse dans les vues Desktop. Pour remédier à cela, vous pouvez juste copier @Html.Partial(« _ViewSwitcher ») dans le fichier _Layout.Mobile.cshtml et le coller dans le fichier _Layout.cshtml.

Dans le code de la vue partielle ViewSwitcher, la méthode GetOverriddenBrowser() est utilisée pour retourner un objet HttpBrowserCapabilitiesBase, qui va donner des informations sur les capacités du navigateur qui a fait la demande. La propriété IsMobileDevice retourne une valeur booléenne permettant de savoir si c’est un navigateur mobile qui effectue la demande.

@if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
    <div class="view-switcher ui-bar-a">
        @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
        {
            @: Displaying mobile view
            @Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        } 
        else 
        {
            @: Displaying desktop view
            @Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        }
    </div>
}

Browser Overriding

Penchons-nous maintenant sur le contrôleur qui est associé à cette vue.

using System.Web.Mvc;
using System.Web.WebPages;

namespace MvcApplication3.Controllers
{
    public class ViewSwitcherController : Controller
    {
        public RedirectResult SwitchView(bool mobile, string returnUrl) {
            if (Request.Browser.IsMobileDevice == mobile)
                HttpContext.ClearOverriddenBrowser();
            else
                HttpContext.SetOverriddenBrowser(mobile ? BrowserOverride.Mobile : BrowserOverride.Desktop);

            return Redirect(returnUrl);
        }
    }
}

Le View Switcher utilise une nouvelle fonctionnalité « Browser Overriding », permettant de traiter les demandes d’une application comme si elles provenaient d’un autre navigateur (Agent utilisateur).

Le Browser Overriding est une caractéristique de base d’ASP.NET MVC 4, et peut de ce fait être utilisé même si vous n’avez pas installé le package jQuery.Mobile.MVC. Avec cette fonctionnalité, en fonction du lien sur lequel l’utilisateur à cliquer (Desktop view ou Mobile view), le contrôleur de la vue Switcher va simuler un agent utilisateur (BrowserOverride.Mobile ou BrowserOverride.Desktop) qui sera utilisé pour charger les vues correspondantes au choix de l’utilisateur malgré que l’agent utilisateur transmit par son navigateur ne soit pas le même.

Le code ci-dessous va donc permettre de substituer l’agent utilisateur du navigateur. Par défaut, les données sur l’agent utilisateur simulé sont stockées en utilisant un cookie.

Conclusion

Nous venons d’apercevoir une fois de plus la puissance fonctionnelle d’ASP.NET MVC 4 pour le développement d’application mobile et Web. Dans le prochain billet de blog, notre attention sera portée sur le Template Web du Framework.

J’avais également indiqué dans cet article que je reviendrais prochainement en détail sur les nouveautés et améliorations de MVC 4.

Vous avez surement attendu patiemment le premier article sur le sujet, mais entre la charge de mes obligations professionnelles, mes travaux sur DVP et la finalisation de l’article sur Nuget, je n’avais plus assez de temps pour commencer à jouer avec MVC4 et partager mon retour d’expérience sur ce blog.

Comme le dit le dicton « mieux vaut tard que jamais », j’ai finalement eu assez de disponibilité pour me pencher sur le sujet et écrire ce billet qui sera axé principalement sur le support du mobile et des tablettes dans MVC 4.

Comme vous le savez certainement, l’une des principales nouveautés dans ASP.NET MVC 4 Develpper Preview est la possibilité d’écrire avec le minimum d’effort des applications Web optimisées, pouvant cibler plusieurs types de dispositifs différents (PC, Mobiles et Tablettes) ayant des écrans de différentes tailles.

Au travers de cet article durant laquelle nous allons créer notre première application ASP.NET MVC pour mobile, nous découvrions les nouveautés suivantes qui ont été introduites par MVC 4 :

– le nouveau modèle d’application mobile;

– Modes d’affichage (Display Modes)

* le mécanisme de basculement entre la vue mobile et la vue desktop d’une application ;

* la création des vues spécifiques en fonction des dispositifs (iPhone, Windows Phone, etc.).

Création de l’application

Vous devez disposer de Visual Studio 2010 SP 1 et d’ASP.NET MVC 4 Developer Preview.

Pour tester les exemples, j’ai utilisé le navigateur Firefox et l’extension User Agent Switcher permettant de faire passer son navigateur Web pour celui d’un smartphone.

Après avoir vérifié que vous disposez des outils nécessaires, lancez votre EDI Visual Studio et procédez à la création d’un nouveau projet.

Dans la fenêtre « Nouveau Projet », sélectionnez ASP.NET MVC 4 Web Application et cliquez sur OK.

La fenêtre contenant les modèles de projets ASP.NET MVC 4 s’affiche. Vous vous rendez compte qu’il existe un nouveau modèle spécialement destiné aux mobiles. Sélectionnez ce modèle et validez sur OK.

Le projet est généré par Visual Studio avec une arborescence similaire à celle des applications desktop ASP.NET MVC standard.

Quoi de neuf dans ce projet

Comme je l’ai souligné plus haut, à première vue, votre projet est assez similaire à celui d’une application ASP.NET Web.

En observant de plus près l’arborescence de celui-ci dans l’explorateur de solution de Visual Studio, vous vous rendrez compte de l’utilisation d’une autre bibliothèque JavaScript à savoir : JQuery Mobile.

En effet, le modèle de projet mobile ASP.NET MVC 4 est basé sur la célèbre bibliothèque JavaScript jQuery mobile qui a été conçue sur le socle de jQuery et jQuery UI pour fournir une expérience utilisateur fluide sur les smartphones et tablettes.

Le modèle et le contrôleur dans votre solution restent sans changement et les vues reposent sur le moteur Razor.

Lancez l’exécution de l’application dans votre navigateur, et vous obtiendrez le résultat suivant à l’affichage :

Ouvrez maintenant le fichier _Layout.cshtml et observez la portion de lignes de code suivante :

<head> 
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title> 
        <meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.0b2.min.css")" />
        <link rel="stylesheet" href="@Url.Content("~/Content/Site.css")" />
        <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")"></script>
        <script type="text/javascript">
            $(document).bind("mobileinit", function() {
                // As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
                // when navigating from a mobile to a non-mobile page, or when clicking "back"
                // after a form post), hence disabling it.
                $.mobile.ajaxEnabled = false;
            });
        </script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.mobile-1.0b2.min.js")"></script>
    </head> 

Vous remarquez la ligne de code suivante :

<meta name="viewport" content="width=device-width" />

Pour un site Web classique de largeur par exemple 980px, le navigateur mobile va se charge de redimensionner tout proportionnellement. Du coup, à l’affichage, l’on peut se retrouver avec des caractères beaucoup trop petits, carrément illisibles. Pour palier à cela, le meta tag viewport qui est reconnu par pratiquement tous les navigateurs mobiles (Opera mobile, Safari, Firefox pour Android, Internet Explorer, etc.) a été introduit.

La définition de cette balise dans votre page permet de dire au navigateur que celle-ci est particulièrement optimisée pour le mobile. Le navigateur se charge donc d’adapter automatiquement le contenu de votre page de telle sorte qu’il soit bien lisible en fonction de la résolution du terminal sur lequel l’application sera exécutée.

Commentez un peu cette ligne dans le fichier _Layout.cshtml, et exécutez votre page pour voir concrètement ce qui sera affiché à l’écran.

Pour mémoire, pour commenter une ligne avec Razor, vous pouvez procéder comme suit :

@*<meta name="viewport" content="width=device-width" />*@

Et vous obtenez le résultat suivant à l’exécution :

Comme vous pouvez le constater, le texte dans mon navigateur est carrément illisible.

Basculement entre la vue mobile et la vue desktop

Nous avons créé notre site pour mobile et nous maitrisons déjà quelques rudiments pour son développement. C’est bien, mais maintenant que notre application sera accessible à la fois sur les navigateurs de bureau et sur les mobiles, comment définir des contenus qui seront propres à chaque type de dispositif ?

ASP.NET MVC 4 introduit un mécanisme permettant de faciliter la personnalisation des interfaces en fonction de l’appareil de l’utilisateur. Ainsi, avec le minimum d’effort, le développeur pourra facilement remplacer ses vues, Layouts et vues partielles pour des navigateurs mobiles en générale ou des navigateurs particuliers.

Pour créer une vue spécifique pour des navigateurs mobiles, vous devez simplement dupliquer le fichier de vue et ajouter au nom de celui-ci .Mobile.

Pour exemple, vous allez créer une copie de votre fichier Index.cshtml qui sera renommé en Index.Mobile.cshtml.

Dans ce fichier, vous allez modifier le code comme suit :

@{
    ViewBag.Title = "Home Page";
}

<h2>Mon premier site pour mobile</h2>
<p>
   Ceci est la version mobile de mon site qui parle de tout et de rien. <br />
    Vous y découvrirez des astuces sur la programmation .NET, des bouts de code et bla bla bla
</p>

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("Astuces", "About", "Home")</li>
    <li>@Html.ActionLink("Code", "Contact", "Home")</li>
</ul>

Et à l’exécution avec un navigateur mobile, vous vous rendez compte que c’est le fichier Index.Mobile.cshtml qui est désormais affiché.

Création des vues spécifiques en fonction des dispositifs

Nous pouvons désormais développer deux versions de notre application qui seront chargées automatiquement en fonction du type de navigateur (Mobile ou Desktop). C’est parfait, mais si nous voulons avoir des contenus personnalisés en fonction de la plateforme d’exécution (Android, Windows Phone, iOS) de l’utilisateur, comment devrons-nous procéder ?

Pas de souci. En effet, avec ASP.NET MVC 4, vous pouvez créer des vues spécifiques qui seront affichées en fonction de l’OS sur lequel sera exécutée votre application.

Pour cela, dans la procédure Application_Start de votre fichier Global.asax.cs, vous devez définir vos propres règles d’affichage en ajoutant les lignes de code suivantes :

DisplayModes.Modes.Insert(0, new DefaultDisplayMode("iPhone")
           {
               ContextCondition = (ctx => ctx.Request.UserAgent.IndexOf(
                   "iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
           });

Le code ci-dessous sera utilisé pour l’iPhone. Pour un autre système, remplacez juste iPhone par le nom de l’OS (Android, WindowsPhone, etc.).

Le code complet de la procédure Application_Start() est le suivant :

protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);

            DisplayModes.Modes.Insert(0, new DefaultDisplayMode("iPhone")
            {
                ContextCondition = (ctx => ctx.Request.UserAgent.IndexOf(
                    "iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
            });
        }

N’oubliez pas d’ajouter dans ce fichier une référence à l’espace de nom System.Web.WebPages.

using System.Web.WebPages;

Vous pouvez maintenant créer des vues qui seront propres aux appareils iPhone en ajoutant les caractères .iPhone aux noms de vos fichiers.

Vous allez par exemple définir un nouveau fichier Index pour iPhone.

Pour cela, vous allez créer une copie de votre fichier Index.cshtml que vous allez renommer en Index.iPhone.cshtml comme l’illustre la capture ci-dessous :

Vous allez ensuite modifier le code comme suit :

@{
    ViewBag.Title = "Home Page";
}

<h2>La page iPhone</h2>
<p>
   Ceci est la version mobile de mon site qui parle de tout et de rien. <br />
    Vous y découvrirez des astuces sur la programmation .NET, des bouts de code et bla bla bla
</p>

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("Astuces", "About", "Home")</li>
    <li>@Html.ActionLink("Code", "Contact", "Home")</li>
</ul>

Vous pouvez maintenant exécuter votre application, en prenant la peine de modifier le User Agent de Firefox pour qu’il se comporte comme l’iPhone 3.0.

Et à l’exécution de vote page, vous obtenez le résultat suivant :

Conclusion

Au travers de cet article, nous venons de découvrir quelques nouveautés qu’introduit ASP.NET pour les mobiles et comment il est relativement facile de concevoir une application Web mobile et définir des vues personnalisées qui seront affichées en fonction du terminal sur lequel sera exécutée l’application.

Il existe une seconde alternative pour la gestion des modes d’affichage en utilisant JQuery.Mobile.MVC. Ce sera l’objet de notre prochain billet de blog.