gwift-book/source/django/mvc/templates.adoc

5.1 KiB
Raw Blame History

Templates

Avant de commencer à interagir avec nos données au travers de listes, formulaires et IHM sophistiquées, quelques mots sur les templates: il sagit en fait de squelettes de présentation, recevant en entrée un dictionnaire contenant des clés-valeurs et ayant pour but de les afficher dans le format que vous définirez. En intégrant un ensemble de tags, cela vous permettra de greffer les données reçues en entrée dans un patron prédéfini.

Une page HTML basique ressemble à ceci:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
    </head>
    <body>
        <p>Hello world!</p>
    </body>
</html>

Notre première vue permettra de récupérer la liste des objets de type Wishlist que nous avons définis dans le fichier wish/models.py. Supposez que cette liste soit accessible via la clé wishlists dun dictionnaire passé au template. Elle devient dès lors accessible grâce aux tags {% for wishlist in wishlists %}. A chaque tour de boucle, on pourra directement accéder à la variable {{ wishlist }}. De même, il sera possible daccéder aux propriétés de cette objet de la même manière: {{ wishlist.id }}, {{ wishlist.description }}, …​ et dainsi respecter la mise en page que nous souhaitons.

En reprenant lexemple de la page HTML définie ci-dessus, on pourra lagrémenter de la manière suivante:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
    </head>
    <body>
        <p>Mes listes de souhaits</p>
        <ul>
        {% for wishlist in wishlists %}
            <li>{{ wishlist.name }}: {{ wishlist.description }}</li>
        {% endfor %}
        </ul>
    </body>
</html>

Vous pouvez déjà copier ce contenu dans un fichier templates/wsh/list.html, on en aura besoin par la suite.

Structure et configuration

Il est conseillé que les templates respectent la structure de vos différentes applications, mais dans un répertoire à part. Par convention, nous les placerons dans un répertoire templates. La hiérarchie des fichiers devient alors celle-ci:

$ tree templates/
templates/
└── wish
    └── list.html

Par défaut, Django cherchera les templates dans les répertoirer dinstallation. Vous devrez vous éditer le fichier gwift/settings.py et ajouter, dans la variable TEMPLATES, la clé DIRS de la manière suivante:

TEMPLATES = [
    {
        ...
        'DIRS': [ 'templates' ],
        ...
    },
]

Builtins

Django vient avec un ensemble de tags. On a vu la boucle for ci-dessus, mais il existe beaucoup dautres tags nativement présents. Les principaux sont par exemple:

  • {% if …​ %} …​ {% elif …​ %} …​ {% else %} …​ {% endif %}: permet de vérifier une condition et de nafficher le contenu du bloc que si la condition est vérifiée.

  • Opérateurs de comparaisons: <, >, ==, in, not in.

  • Regroupements avec le tag {% regroup …​ by …​ as …​ %}.

  • {% url %} pour construire facilement une URL

  • …​

Non-builtins

En plus des quelques tags survolés ci-dessus, il est également possible de construire ses propres tags. La structure est un peu bizarre, car elle consiste à ajouter un paquet dans une de vos applications, à y définir un nouveau module et à y définir un ensemble de fonctions. Chacune de ces fonctions correspondra à un tag appelable depuis vos templates.

Il existe trois types de tags non-builtins:

  1. Les filtres - on peut les appeler grâce au pipe | directement après une valeur dans le template.

  2. Les tags simples - ils peuvent prendre une valeur ou plusieurs en paramètre et retourne une nouvelle valeur. Pour les appeler, cest via les tags {% nom_de_la_fonction param1 param2 …​ %}.

  3. Les tags dinclusion: ils retournent un contexte (ie. un dictionnaire), qui est ensuite passé à un nouveau template.

Pour limplémentation:

  1. On prend lapplication wish et on y ajoute un répertoire templatetags, ainsi quun fichier init.py.

  2. Dans ce nouveau paquet, on ajoute un nouveau module que lon va appeler tools.py

  3. Dans ce module, pour avoir un aperçu des possibilités, on va définir trois fonctions (une pour chaque type de tags possible).

[Inclure un tree du dossier template tags]
# wish/tools.py

from django import template

from wish.models import Wishlist

register = template.Library()

@register.filter(is_safe=True)
def add_xx(value):
    return '%sxx' % value

@register.simple_tag
def current_time(format_string):
    return datetime.datetime.now().strftime(format_string)

@register.inclusion_tag('wish/templatetags/wishlists_list.html')
def wishlists_list():
    return { 'list': Wishlist.objects.all() }

Pour plus dinformations, la documentation officielle est un bon début.