Archives du mot-clé polymer

ASP.NET MVC : Display et Editor Templates

ASP.NET MVC est un outil puissant pour créer des sites web, basés sur des conventions (Conventions over configurations). Nous allons voir dans cet article les notions de display et editor templates qui permettent la gestion du rendu d’un objet/propriété en mode affichage et édition.

Utilisation

ASP.NET MVC fournit par défaut des méthodes dans le helper Html permettant la gestion de l’affichage (DisplayFor) et l’édition (EditorFor).

@Html.DisplayFor(model => model.Title)

@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })

Par défaut, le helper générera un input en fonction du type des propriétés de votre objet. Ainsi, dans le cas d’une propriété de type string, un input de type text sera généré et dans le cas d’un bool, une case à cocher. Il est possible d’avoir un contrôle plus fin de la génération des input. Pour cela, le helper HTML met à disposition des méthodes pour chaque type de input :

  • Html.TextBox
  • Html.DropDownList

Cela est très pratique et permet de mieux contrôler le HTML généré mais vous êtes obligé de le faire dans chaque vue. Afin de palier à ce problème, il existe les DisplayTemplates et EditorTemplates. Ils permettent de définir pour chaque type comment il sera rendu en mode affichage (display) ou édition (editor). Pour cela, il faut créer des dossiers DisplayTemplates et EditorTemplates dans le dossier Views/Shared puis placer un fichier par type en le nommant type.cshtml.

Dossiers Display et Editor Template

Dans les exemples suivant, nous allons utiliser une classe Album (les annotations de validations sont volontairement omises) :

public class Album
{
    public int ID { get; set; }

    public string Title { get; set; }

    public DateTime ReleaseDate { get; set; }

    public bool isDoubleDisc { get; set; }
}

Par exemple, pour surcharger le template utilisé pour les types DateTime et bool, on créera respectivement un fichier DateTime.cshtml et Boolean.cshtml.

Nous avons vu que les booléens sont affichés sous la forme de checkbox. Voyons comment rendre votre application un peu plus jolie avec des composants ayant un meilleur rendu.
J’ai parlé dans un article précédent des web components et de polymer.

Polymer fournit une bibliothèque de composant (elements dans le jargon Polymer) prêt à l’emploi, notamment les Paper Elements, composant graphiques Material Design.

Voyons comment utiliser des paper-checkbox (la page de démo) pour les booléens grâce aux display templates.

Afin d’utiliser polymer et les elements, il faut les ajouter à la solution. Voici la documentation de polymer permettant de le faire.

Ajoutons un fichier Boolean.cshtml dans le dossier Views/Shared/DisplayTemplates :

@model System.Boolean
@if(@Model) {
    <paper-checkbox disabled checked></paper-checkbox>
} else {
    <paper-checkbox disabled></paper-checkbox>
}

L’affichage utilise maintenant un élement paper-checkbox pour les booléens.

Display Template sous la forme d'un Checkbox

Vous avez peut être remarqué que Polymer propose également un élément paper-toggle-button qui convient également pour les booléens.
ASP.NET MVC contient un attribut UIHint qui permet de spécifier un template à appliquer pour une propriété.

Ajoutons l’attribut UIHint avec la valeur Toggle sur la propriété IsDoubleDisc.

[UIHint("Toggle")]
public bool IsDoubleDisc { get; set; }

Définissons maintenant un fichier Toggle.cshtml dans le dossier DisplayTemplates avec le code suivant :

@model System.Boolean
@if(@Model) {
    <paper-toggle-button disabled checked></paper-toggle-button>
} else {
    <paper-toggle-button disabled></paper-toggle-button>
}

Automatiquement, le champs IsDoubleDisc sera affiché avec un toggle !

Display Template sous la forme d'un Toggle

Il est également possible de créer des templates pour vos propres modèles.

Voici un exemple avec une classe Address :

@model DemoMVC5.Models.Address
 <dl class="dl-horizontal">     
     <dt>
         @Html.DisplayNameFor(model => model.Street)
      </dt>
      <dd>
         @Html.DisplayFor(model => model.Street)
      </dd>
      <dt>
         @Html.DisplayNameFor(model => model.ZipCode)
      </dt>
      <dd>
         @Html.DisplayFor(model => model.ZipCode)
      </dd>
      <dt>
         @Html.DisplayNameFor(model => model.City)
      </dt>
      <dd>
         @Html.DisplayFor(model => model.City)
      </dd>
      <dt>
         @Html.DisplayNameFor(model => model.Country)
      </dt>
      <dd>
         @Html.DisplayFor(model => model.Country)
      </dd>
  </dl>

Vous pourrez alors utiliser @Html.DisplayForModel et éviter de dupliquer votre code dans plusieurs vues.

@model DemoMVC5.Models.Address
<div>
    <h4>Your Address</h4>
    Html.DisplayForModel()
</div>

Si un de vos objets a une propriété Address, l’affichage se fera via :

@model DemoMVC5.Models.User
<div>
    <h4>Your Information</h4>
    Html.DisplayFor(model => model.Name)

    Html.DisplayFor(model => model.Address)
</div>

Conclusion

Display et Editor templates sont des fonctionnalités méconnues de ASP.NET MVC. Elle permettent de facilement modifier l’affichage d’une classe dans votre site de manière simple et sans duplication de code.

Liens

Google IO : Material Design & Polymer …

La conférence Google I/O 2014 vient de se terminer et Google a annoncé Material Desgin. Material Design est un « langage visuel » qui a pour but d’uniformiser le look d’une application quelque soit le terminal (Web, Mobile, Tablet, …). Il fournit un ensemble de guidelines en termes d’interfaces (couleurs, animations, ombrages, …) à la sauce Google et un ensemble de composant prêt à l’emploi. Ces composants sont basé sur Polymer, un framework créé par Google afin de créer des composants web (web components), dont j’ai fait la présentation dans un précédent article.

Ces composants sont appelés « paper » et viennent compléter les composants core de Polymer. Ils s’utilisent comme un élément HTML après avoir importé ce dernier.

<!-- import du composant -->
<link href="../paper-button/paper-button.html" rel="import">
<!-- Utilisation du composant -->
<paper-button label="My Button" id="paper_button"></paper-button>

Comme vous pouvez le voir, leur utilisation est très facile et il faut l’avouer le rendu de ces composants est superbe (animation au clics, …). Ces composants peuvent être stylés via CSS.

Afin de tester ces composants, vous pouvez créer votre page via le designer en ligne.

Ces composants étant des web components, ceux-ci sont isolés et peuvent donc être utilisés avec d’autres framework sans problème (jQuery, Angular, Backbone, …)

Je vous conseille les vidéos suivantes de la Google IO :

La première est la présentation de Eric Bidelman concernant Polymer et les web components.

La deuxième est la présentation des composants et l’utilisation de ces derniers par Rob Dodson.

Introduction aux Web components

Actuellement, quand on parle de widget web, on pense Bootstrap, Jquery UI, plugins JQuery, ExtJs, … Cela implique l’utilisation d’une structure de code HTML adapté (avec des classes, des éléments spécifique, …), du javascript, du CSS. L’intégration de ces widgets/composants n’est pas forcément très aisé. Je vais vous parler un peu aujourd’hui du futur du web : les web components (la spécification n’est encore validée et est en cours d’écriture). Le but des web components est de pouvoir créer des widgets évolués qui prendront la forme de nouveaux élément HTML (Le concept des directives dans AngularJS se rapproche un peu des web components). Cela permet notamment :

  • la réutilisation et le partage de composant
  • une meilleur isolation et donc une intégration plus aisée
  • d’avoir du code HTML plus propre

Les web components comportent 4 principales composantes (avec un lien vers un article sur html5rocks.com) :

  • Template : permet de définit du code html non interprétés mais utilisable par la suite
  • Custom element : permet de créer ses propres balises html
  • Shadow DOM : permet d’encapsuler vos composants (comme une coquille qui permet de « protéger » votre composant par rapport à la page le contenant, notamment au niveau des styles.)
  • Import : permet le chargement de ressources externes.

Ces technologies sur lesquelles reposent les web components ne sont pas encore implémentées (ou en partie) dans les navigateurs (mais cela est en cours). Cependant, il y a 2 librairies (qui utilisent des polyfills) qui permettent de jouer avec dès aujourd’hui :

Personnellement, j’ai plus entendu parlé de Polymer que de X-Tag, je me suis donc plus intéressé à lui.

Polymer

Polymer est plus qu’une collection de polyfills permettant d’utiliser les web components. Il est composé de plusieurs parties :

  • Platform : les polyfills (a priori utilisés par X-Tag aussi)
  • Core : Une librairie qui permet de simplifier la création de web components. Polymer permet notamment d’avoir du data-binding bi-directionnel.
  • Elements : une liste de composants

La philosophie de Polymer est « Tout est un élément ». Ainsi vous avez des éléments non visuel comme un élément ajax ou local storage !!! Un exemple avec un composant Ajax :

<polymer-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
 params='{"alt":"json", "q":"chrome"}'	 	 
 handleAs="json"
 on-polymer-response="{{handleResponse}}">
<polymer-ajax>

Je vous invite à regarder cette vidéo de présentation par Eric Bidelman, un des membres de l’équipe de Polymer. Voici une démo d’un element polymer que j’ai créé qui affiche les informations d’un compte github. Le code est dispo sur github.

Liens