TP : Gestion d’une liste de tâches - Templates (2/3)

date:2012-04-30 13:34
tags:django, python
category:Django
author:Rémy Hubscher

Récapitulatif

Nous avons vu dans le chapitre précédent comment créer le models et l’administrer dans l’admin Django.

Je vous rappelle que, dans un premier temps, nous avons une unique liste :

  1. Nous voulons ajouter des tâches dans la liste
  2. Nous voulons dire que la tâche est réalisée (la barrer)
  3. Nous voulons pouvoir vider la liste en fin de journée
  4. Nous voulons pouvoir marquer toutes les tâches comme terminée
  5. Nous voulons pouvoir supprimer une tâche

Les views

Pour commencer nous souhaitons afficher notre liste de tâche.

Nous commençons donc par faire le HTML/CSS/JS :

templates/todo/tasks-list.html

{% load i18n staticfiles %}
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>{% trans 'Todo list' %}</title>
        <link rel="stylesheet" href="{% static 'todo/base.css' %}">
</head>

<body>

        <section id="todoapp">
                <header id="header">
                        <h1>{% trans 'Todos' %}</h1>
                        <input id="new-todo" placeholder="{% trans 'What needs to be done?' %}" autofocus>
                </header>

                <section id="main">
                        <input id="toggle-all" type="checkbox" >
                        <label for="toggle-all">{% trans 'Mark all as complete' %}</label>
                        <ul id="todo-list">

                                              <!-- C'est ici que ça se passe -->

                        </ul>
                </section>

                <footer id="footer">
                        <span id="todo-count"></span>
                        <button id="clear-completed">{% trans 'Clear completed' %}</button>
                </footer>
        </section>

        <footer id="info">
                <p>{% trans 'Double-click to edit a todo.' %}</p>
        </footer>

</body>
</html>

static/todo/base.css

À récupérer ici : https://bitbucket.org/natim/django-story/raw/tip/demos/tuto_django/todo/static/todo/base.css

static/todo/bg.png

À récupérer ici : https://bitbucket.org/natim/django-story/raw/tip/demos/tuto_django/todo/static/todo/bg.png

Arborescence

Vous devez normalement maintenant avoir l’arborescence suivante

todo/
├── admin.py
├── __init__.py
├── models.py
├── static
│   └── todo
│       ├── app.js
│       ├── base.css
│       └── bg.png
├── templates
│   └── todo
│       └── tasks-list.html
├── tests.py
└── views.py

Views

Nous allons ensuite écrire notre première views, qui va demander d’afficher la liste des tâches.

# -*- coding: utf-8 -*-

from django.views.generic import TemplateView

class TasksView(TemplateView):

    template_name="todo/tasks-list.html"

Cette views va pour l’instant simplement charger notre template todo/tasks-list.html et l’afficher.

Url

Ne pas oublier de définir l’URL

# -*- coding: utf-8 -*-
from django.conf.urls import patterns, include, url

from django.contrib import admin
admin.autodiscover()

from todo.views import TasksView

urlpatterns = patterns('',
    url(r'^admin/', include(admin.site.urls)),
    url(r'^$', TasksView.as_view(), name='tasks-list'),
)

Le résultat

Connectez-vous à http://localhost:8000/ :

../_images/tasks-list.png

Afficher la liste des tâches

On va modifier le fichier views.py pour y ajouter des informations supplémentaires

# -*- coding: utf-8 -*-

from django.views.generic import ListView
from todo.models import Task

class TasksView(ListView):

    template_name="todo/tasks-list.html"
    model = Task

On va modifier le fichier tasks-list.html pour y spécifier comment afficher les tâches

<ul id="todo-list">
      {% for task in object_list %}
      <li>
            <div class="view">
              <input class="toggle" type="checkbox">
              <label>{{ task.content }}</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="{{ task.content }}">
      </li>
      {% endfor %}
</ul>

Le résultat

Connectez-vous à http://localhost:8000/ :

../_images/tasks-list-completed.png