Accueil > Asp.Net MVC > Vues mobiles en ASP.NET MVC 4

Vues mobiles en ASP.NET MVC 4

ASP.Net MVC4 a été dévoilé dans une version developer preview. Cette version n’est même pas encore au stade de bêta et donc loin d’être finale mais elle nous permet de nous faire une bonne idée de ce qu’apportera cette nouvelle version. La fonctionnalité majeure est l’apparition de vues dédiées aux mobiles. Nous allons voir comment cette nouveauté fonctionne.

Tout d’abord, vous aurez besoin de télécharger et d’installer la version de preview disponible ICI.

Viewport

Créons un projet vide. On remarque que certains nouveaux scripts sont apparus par défaut notamment knockoutjs (un outil js permettant de faire du MVVM directement en js dans vos vues qui fera l’objet d’un prochain article). Ouvrons la vue _Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

On remarque une nouvelle ligne:

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

Cette ligne définit le viewport. Quelques explications s’imposent: le viewport est la fenêtre « virtuelle » définie par les navigateurs mobiles pour fixer la taille de l’affichage. Par défaut, cette fenêtre est bien plus grande que le device lui même, ce qui donne un affichage des sites web par défaut très petit. Cette ligne viewport définit la largeur de la fenêtre en fonction de la largeur de l’écran du device. On a donc un contenu lisible directement sans devoir zoomer.
Le reste est pour l’instant assez classique.

Override des vues

Nous allons juste afficher un menu de navigation sur la home sous la forme de liens dans une liste ul-li classique.
On ajoute donc un contrôleur Home et 3 vues Index, Page1 et Page2. Dans la vue Index, on crée notre menu:

<h2>Index</h2>

<ul>
    <li>@Html.ActionLink("Page 1","Page1")</li>
    <li>@Html.ActionLink("Page 2","Page2")</li>
</ul>

Nous allons maintenant tester cette page sur un navigateur mobile grâce à l’émulateur WP7:

La page s’affiche correctement mais nous voudrions changer le titre dans ce cas là pour indiquer par exemple « Index Mobile ». Et bien il est désormais possible de détecter automatiquement les navigateurs mobiles pour leur créer un affichage personnalisé. Il suffit de créer une nouvelle vue appelée par convention Index.Mobile.cshtml contenant nos modifications:

<h2>Index Mobile</h2>

<ul>
    <li>@Html.ActionLink("Page 1","Page1")</li>
    <li>@Html.ActionLink("Page 2","Page2")</li>
</ul>

Le rendu n’a pas changé dans un navigateur classique mais dans un navigateur mobile on voit désormais:

C’est aussi simple que ça et ce système fonctionne pour les vues, les vues partielles et les pages de layout.

DisplayModes

Imaginons ensuite qu’on veuille un affichage particulier pour un type précis de navigateur par exemple si on veut afficher un message affectueux aux possesseurs d’iphone🙂
Pour gérer ce cas, une nouvelle collection statique DisplayModes.Modes a été ajoutée. Elle contient des instances de IDisplayMode. Cette interface nous permet de définir un suffixe personnalisé pour les vues ainsi qu’une condition de déclenchement. Dans la méthode Application_Start on va donc rajouter:

DefaultDisplayMode iphoneMode = new DefaultDisplayMode("iphone");
iphoneMode.ContextCondition = o => o.Request.UserAgent.IndexOf("iphone",   StringComparison.OrdinalIgnoreCase) > 0;

DisplayModes.Modes.Insert(0, iphoneMode);

Ici on crée un DisplayMode spécifique à l’iphone en mettant dans ContextCondition une condition sur le user agent. Notez qu’on utilise ici ce mécanisme pour spécifier des vues différentes selon un browser mais que la condition est en fait une lambda quelconque on peut donc imaginer des scénarii bien plus complexes.

Il ne nous reste plus qu’à créer la vue spécifique à l’iphone en respectant le suffixe défini dans notre DisplayMode (ici « iphone »). On crée donc la vue Index.iphone.cshtml:

<h2>Index iphone</h2>

<ul>
    <li>@Html.ActionLink("Page 1","Page1")</li>
    <li>@Html.ActionLink("Page 2","Page2")</li>
</ul>

<div>
TODO: Passer sur WP7 les iPhone c'est has been...
</div>

Dans safari avec le user agent iPhone on a le rendu suivant:

L’ergonomie mobile tactile est bien particulière. Il faut pouvoir cliquer facilement sur l’élément désiré, tout doit être très lisible… Une librairie js nous permet d’adapter très simplement l’affichage de notre petit site à la consultation mobile et ce n’est autre que jQuery mobile. Ce sera l’objet du prochain article de cette série🙂

En attendant vous pouvez trouver le code du projet de démo ICI.

Enjoy…

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :