130 lines
5.5 KiB
ReStructuredText
130 lines
5.5 KiB
ReStructuredText
*********
|
|
Templates
|
|
*********
|
|
|
|
Avant de commencer à interagir avec nos données au travers de listes, formulaires et IHM sophistiquées, quelques mots sur les templates: il s'agit 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:
|
|
|
|
.. code-block:: html
|
|
|
|
<!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`` d'un 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 d'accéder aux propriétés de cette objet de la même manière: ``{{ wishlist.id }}``, ``{{ wishlist.description }}``, ... et d'ainsi respecter la mise en page que nous souhaitons.
|
|
|
|
En reprenant l'exemple de la page HTML définie ci-dessus, on pourra l'agrémenter de la manière suivante:
|
|
|
|
.. code-block:: html
|
|
|
|
<!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à copié 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:
|
|
|
|
.. code--block:: bash
|
|
|
|
$ tree templates/
|
|
templates/
|
|
└── wish
|
|
└── list.html
|
|
|
|
Par défaut, Django cherchera les templates dans les répertoirer d'installation. Vous devrez vous éditer le fichier ``gwift/settings.py`` et ajouter, dans la variable ``TEMPLATES``, la clé ``DIRS`` de la manière suivante:
|
|
|
|
.. code-block:: python
|
|
|
|
TEMPLATES = [
|
|
{
|
|
...
|
|
'DIRS': [ 'templates' ],
|
|
...
|
|
},
|
|
]
|
|
|
|
Builtins
|
|
========
|
|
|
|
Django vient avec un ensemble de *tags*. On a vu la boucle ``for`` ci-dessus, mais il existe `beaucoup d'autres tags nativement présents <https://docs.djangoproject.com/fr/1.9/ref/templates/builtins/>`_. Les principaux sont par exemple:
|
|
|
|
* ``{% if ... %} ... {% elif ... %} ... {% else %} ... {% endif %}``: permet de vérifier une condition et de n'afficher 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, c'est *via* les tags ``{% nom_de_la_fonction param1 param2 ... %}``.
|
|
3. Les tags d'inclusion: ils retournent un contexte (ie. un dictionnaire), qui est ensuite passé à un nouveau template.
|
|
|
|
Pour l'implémentation:
|
|
|
|
1. On prend l'application ``wish`` et on y ajoute un répertoire ``templatetags``, ainsi qu'un fichier ``__init__.py``.
|
|
2. Dans ce nouveau paquet, on ajoute un nouveau module que l'on 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).
|
|
|
|
.. code-block:: shell
|
|
|
|
[Inclure un tree du dossier template tags]
|
|
|
|
.. code-block:: python
|
|
|
|
# wish/tools.py
|
|
|
|
# coding=utf-8
|
|
|
|
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 d'informations, la `documentation officielle est un bon début <https://docs.djangoproject.com/en/stable/howto/custom-template-tags/#writing-custom-template-tags>`_. |