Add more explanation on views in introduction.
authorSandrine Ribeau <sandrine.ribeau@logilab.fr>
Mon, 17 Nov 2008 10:37:06 -0800
changeset 82 57f37f7af21b
parent 78 079c4d11a616
child 83 0e44b17fbff5
Add more explanation on views in introduction. Updates screenshots to remove user test@example.com that is more LAX related. Add missing images from LAX book in book/fr/images. Updates content to use images from book/fr/images and not from book/images.
doc/book/fr/chap_visualisation_donnees.txt
doc/book/fr/images/archi_globale.png
doc/book/fr/images/blog-demo-first-page.png
doc/book/fr/images/cbw-add-relation-entryof.en.png
doc/book/fr/images/cbw-create-blog.en.png
doc/book/fr/images/cbw-detail-one-blogentry.en.png
doc/book/fr/images/cbw-list-one-blog.en.png
doc/book/fr/images/cbw-list-two-blog.en.png
doc/book/fr/images/cbw-schema.en.png
doc/book/fr/images/cbw-update-primary-view.en.png
doc/book/fr/images/lax-book.00-login.en.png
doc/book/fr/images/lax-book.01-start.en.png
doc/book/fr/images/lax-book.02-cookie-values.en.png
doc/book/fr/images/lax-book.02-create-blog.en.png
doc/book/fr/images/lax-book.03-list-one-blog.en.png
doc/book/fr/images/lax-book.03-site-config-panel.en.png
doc/book/fr/images/lax-book.03-state-submitted.en.png
doc/book/fr/images/lax-book.03-transitions-view.en.png
doc/book/fr/images/lax-book.04-detail-one-blog.en.png
doc/book/fr/images/lax-book.05-list-two-blog.en.png
doc/book/fr/images/lax-book.06-add-relation-entryof.en.png
doc/book/fr/images/lax-book.06-header-no-login.en.png
doc/book/fr/images/lax-book.06-main-template-layout.en.png
doc/book/fr/images/lax-book.06-main-template-logo.en.png
doc/book/fr/images/lax-book.06-simple-main-template.en.png
doc/book/fr/images/lax-book.07-detail-one-blogentry.en.png
doc/book/fr/images/lax-book.08-schema.en.png
doc/book/fr/images/lax-book.09-new-view-blogentry.en.png
doc/book/fr/images/lax-book.10-blog-with-two-entries.en.png
doc/book/fr/images/login-form.png
doc/book/fr/images/main_template_layout.png
doc/book/fr/images/server-class-diagram.png
doc/book/fr/introduction.fr.txt
doc/book/fr/modules.fr.txt
doc/book/fr/tut-create-gae-app.fr.txt
--- a/doc/book/fr/chap_visualisation_donnees.txt	Fri Nov 14 19:02:07 2008 +0100
+++ b/doc/book/fr/chap_visualisation_donnees.txt	Mon Nov 17 10:37:06 2008 -0800
@@ -1,5 +1,6 @@
 .. -*- coding: utf-8 -*-
 
+.. _DefinitionVues:
 
 Définition de vues
 ==================
@@ -101,7 +102,7 @@
 When displaying same blog entry as before, you will notice that the
 page is now looking much nicer.
 
-.. image:: ../images/lax-book.09-new-view-blogentry.en.png
+.. image:: images/lax-book.09-new-view-blogentry.en.png
    :alt: blog entries now look much nicer
 
 Let us now improve the primary view of a blog ::
@@ -138,7 +139,7 @@
 Assuming we added entries to the blog titled `MyLife`, displaying it
 now allows to read its description and all its entries.
 
-.. image:: ../images/lax-book.10-blog-with-two-entries.en.png
+.. image:: images/lax-book.10-blog-with-two-entries.en.png
    :alt: a blog and all its entries
 
 **Before we move forward, remember that the selection/view principle is
@@ -197,7 +198,7 @@
 Le template principal par défaut construit la page selon la décomposition
 suivante :
 
-.. image:: ../images/main_template_layout.png
+.. image:: images/main_template_layout.png
 
 Le rectancle contenant le `view.dispatch()` représente l'emplacement où est
 inséré la vue de contenu à afficher. Les autres représentent des sous-templates
Binary file doc/book/fr/images/archi_globale.png has changed
Binary file doc/book/fr/images/blog-demo-first-page.png has changed
Binary file doc/book/fr/images/cbw-add-relation-entryof.en.png has changed
Binary file doc/book/fr/images/cbw-create-blog.en.png has changed
Binary file doc/book/fr/images/cbw-detail-one-blogentry.en.png has changed
Binary file doc/book/fr/images/cbw-list-one-blog.en.png has changed
Binary file doc/book/fr/images/cbw-list-two-blog.en.png has changed
Binary file doc/book/fr/images/cbw-schema.en.png has changed
Binary file doc/book/fr/images/cbw-update-primary-view.en.png has changed
Binary file doc/book/fr/images/lax-book.00-login.en.png has changed
Binary file doc/book/fr/images/lax-book.01-start.en.png has changed
Binary file doc/book/fr/images/lax-book.02-cookie-values.en.png has changed
Binary file doc/book/fr/images/lax-book.02-create-blog.en.png has changed
Binary file doc/book/fr/images/lax-book.03-list-one-blog.en.png has changed
Binary file doc/book/fr/images/lax-book.03-site-config-panel.en.png has changed
Binary file doc/book/fr/images/lax-book.03-state-submitted.en.png has changed
Binary file doc/book/fr/images/lax-book.03-transitions-view.en.png has changed
Binary file doc/book/fr/images/lax-book.04-detail-one-blog.en.png has changed
Binary file doc/book/fr/images/lax-book.05-list-two-blog.en.png has changed
Binary file doc/book/fr/images/lax-book.06-add-relation-entryof.en.png has changed
Binary file doc/book/fr/images/lax-book.06-header-no-login.en.png has changed
Binary file doc/book/fr/images/lax-book.06-main-template-layout.en.png has changed
Binary file doc/book/fr/images/lax-book.06-main-template-logo.en.png has changed
Binary file doc/book/fr/images/lax-book.06-simple-main-template.en.png has changed
Binary file doc/book/fr/images/lax-book.07-detail-one-blogentry.en.png has changed
Binary file doc/book/fr/images/lax-book.08-schema.en.png has changed
Binary file doc/book/fr/images/lax-book.09-new-view-blogentry.en.png has changed
Binary file doc/book/fr/images/lax-book.10-blog-with-two-entries.en.png has changed
Binary file doc/book/fr/images/login-form.png has changed
Binary file doc/book/fr/images/main_template_layout.png has changed
Binary file doc/book/fr/images/server-class-diagram.png has changed
--- a/doc/book/fr/introduction.fr.txt	Fri Nov 14 19:02:07 2008 +0100
+++ b/doc/book/fr/introduction.fr.txt	Mon Nov 17 10:37:06 2008 -0800
@@ -12,8 +12,8 @@
 des types de données et des vues. Un `cube` est un composant re-utilisable 
 regroupé avec d'autres cubes sur le système de fichiers.
 
-Un `instance` réferre à une installation spécifique d'un cube où sont regroupés
-tous les fichiers de configuration de l'application web finale.
+Un `instance` réferre à une installation spécifique d'un ou plusieurs cubes 
+où sont regroupés tous les fichiers de configuration de l'application web finale.
 
 Dans ce document, nous allons vous montrer comment créer un cube et l'utiliser
 dans une instance pour votre application web.
@@ -155,59 +155,146 @@
 vous aurez crée lors de l'initialisation de votre base de données via
 ``cubicweb-ctl create``.
 
-.. image:: ../images/login-form.png
+.. image:: images/login-form.png
 
 
 Une fois authentifié, vous pouvez commencer à jouer avec votre
 application et créer des entités. Bravo !
 
-.. image:: ../images/blog-demo-first-page.png
+.. image:: images/blog-demo-first-page.png
 
 
-Vous trouverez de plus amples explications de ces étapes dans notre
-tutoriel (:ref:`tutorielGAE`).
+Rappelez-vous que pour le moment, tout a été géré par la plate-forme
+`CubicWeb` et que la seule chose qui a été fournie est le schéma de
+données. 
+
+Créons des entités
+------------------
+
+Nous allons maintenant créer quelques entités dans notre application.
+
+Créez un Blog
+~~~~~~~~~~~~~
+
+Créons à présent quelques entités. Cliquez sur `[+]` sur la
+droite du lien Blog. Appelez cette nouvelle entité Blog ``Tech-Blog``
+et tapez pour la description ``everything about technology``,
+puis validez le formulaire d'édition en cliquant sur le bouton
+``Validate``.
+
+.. image:: images/cbw-create-blog.en.png
+   :alt: from to create blog
+
+En cliquant sur le logo situé dans le coin gauche de la fenêtre,
+vous allez être redirigé vers la page d'accueil. Ensuite, si vous allez 
+sur le lien Blog, vous devriez voir la liste des entités Blog, en particulier
+celui que vous venez juste de créer ``Tech-Blog``.
+
+.. image:: images/cbw-list-one-blog.en.png
+   :alt: displaying a list of a single blog
+
+Si vous cliquez sur ``Tech-Blog`` vous devriez obtenir une description
+détaillée, ce qui dans notre cas, n'est rien de plus que le titre
+et la phrase ``everything about technology``
+
+Maintenant retournons sur la page d'accueil et créons un nouveau
+Blog ``MyLife`` et retournons sur la page d'accueil, puis suivons
+le lien Blog et nous constatons qu'à présent deux blogs sont listés.
 
+.. image:: images/cbw-list-two-blog.en.png
+   :alt: displaying a list of two blogs
 
+Créons un article
+~~~~~~~~~~~~~~~~~
+
+Revenons sur la page d'accueil et cliquons sur `[+]` à droite du lien
+`articles`. Appellons cette nouvelle entité ``Hello World`` et introduisons
+un peut de texte avant de ``Valider``. Vous venez d'ajouter un article
+sans avoir précisé à quel Blog il appartenait. Dans la colonne de gauche
+se trouve une boite intitulé ``actions``, cliquez sur le menu ``modifier``.
+Vous êtes de retour sur le formulaire d'édition de l'article que vous 
+venez de créer, à ceci près que ce formulaire a maintenant une nouvelle
+section intitulée ``ajouter relation``. Choisissez ``entry_of`` dans ce menu,
+cela va faire apparaitre une deuxième menu déroulant dans lequel vous
+allez pouvoir séléctionner le Blog ``MyLife``.
+
+Vous auriez pu aussi, au moment où vous avez crée votre article, sélectionner
+``appliquer`` au lieu de ``valider`` et le menu ``ajouter relation`` serait apparu.
+
+.. image:: images/cbw-add-relation-entryof.en.png
+   :alt: editing a blog entry to add a relation to a blog
+
+Validez vos modifications en cliquant sur ``Valider``. L'entité article
+qui est listée contient maintenant un lien vers le Blog auquel il 
+appartient, ``MyLife``.
+
+.. image:: images/cbw-detail-one-blogentry.en.png
+   :alt: displaying the detailed view of a blogentry
+
+Rappelez-vous que pour le moment, tout a été géré par la plate-forme
+`CubicWeb` et que la seule chose qui a été fournie est le schéma de
+données. D'ailleurs pour obtenir une vue graphique du schéma, visitez
+le lien `Application schema`` a l'URL suivante :
+http://localhost:8080/view?vid=schema
+
+.. image:: images/cbw-schema.en.png
+   :alt: graphical view of the schema (aka data-model)
 
 
 Définissez les vues de vos données
 ----------------------------------
 
-Les vues correspondantes au modele de données sont définies dans ``views.py``
-de votre cube ``blog``.
+Le principe de sélection des vues
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Une vue est une classe Python qui inclut:
+  
+  - un identifiant (tous les objets dans `CubicWeb` sont listés
+    dans un registre et cet identifiant est utilisé comme la clé)
+
+  - un filtre de sélection de `result sets` auxquels il
+    peut s'appliquer
+
+`CubicWeb` fournit un ensemble de vues standard pour le type d'objet
+`EntityView`. vous poubez les trouver listées dans ``cubicweb/web/views``.
+
+Une vue est appliquée sur un `result set` qui représente l'ensemble
+des entités que nous cherchons à appliquer. `CubicWeb` utilise un
+sélecteur qui permet de calculer un score et d'identifier la vue
+la plus adaptée au `result set` que nous voulons afficher. La librarie
+standard des sélecteurs se trouve dans ``cubicweb.common.selector`` 
+et une librairie des méthodes utilisées pour calculer les scores 
+est dans ``cubicweb.vregistry.vreq``.
+
+
+Il est possible de définir plusieurs vues ayant le meme identifiant
+et d'y associer des sélecteurs et des filtres afin de permettre à 
+l'application de s'adapter au mieux aux données que nous avons 
+besoin d'afficher. Nous verrons cela plus en détails dans :ref:`DefinitionVues`.
+
+On peut citer l'exemple de la vue nommée ``primary`` qui est celle utilisée
+pour visualiser une entité seule. Nous allons vous montrer comment modifier 
+cette vue.
+
+Modification des vues
+~~~~~~~~~~~~~~~~~~~~~
+Si vous souhaitez modifier la manière dont est rendue un article (`Blogentry`),
+vous devez surcharger la vue ``primary`` définie dans le module ``views`` de 
+votre cube, ``cubes/blog/views.py``.
+
+Nous pourrions par exemple ajouter devant la date de publication un préfixe
+indiquant que la date visualisée est la date de publication.
+
+Pour cela appliquez les modifications suivantes: 
 
 :: 
 
-  __docformat__ = "restructuredtext en"
-
-  from mx.DateTime import DateTime
-  from logilab.mtconverter import html_escape
-
-  from cubicweb.common.uilib import text_cut
-  from cubicweb.common.view import EntityView
   from cubicweb.web.views import baseviews
-  from cubicweb.web.views.boxes import BoxTemplate, BoxHtml
-  from cubicweb.web.views.calendar import MONTHNAMES
-  from cubicweb.web.htmlwidgets import BoxLink, BoxWidget
 
 
-  class BlogPrimaryView(baseviews.PrimaryView):
-    accepts = ('Blog',)
-    skip_attrs = baseviews.PrimaryView.skip_attrs + ('title',)
-
-    def render_entity_title(self, entity):
-        self.w(u'<h1>%s</h1>' % html_escape(entity.dc_title()))
+  class BlogEntryPrimaryView(baseviews.PrimaryView):
 
-    def render_entity_relations(self, entity, siderelations):
-        rset = entity.related('entry_of', 'object')
-        self.pagination(self.req, rset, self.w)
-        self.wview('list', rset, 'null', title='')
-    
-
-  class BlogEntryPrimaryView(baseviews.PrimaryView):
     accepts = ('BlogEntry',)
-    skip_attrs = baseviews.PrimaryView.skip_attrs + ('title',)
-    show_attr_label = False
 
     def render_entity_title(self, entity):
         self.w(u'<h1>%s</h1>' % html_escape(entity.dc_title()))
@@ -215,4 +302,42 @@
     def content_format(self, entity):
         return entity.view('reledit', rtype='content_format')
 
+    def cell_call(self, row, col):
+        entity = self.entity(row, col)
 
+        # display entity attributes with prefixes
+        self.w(u'<h1>%s</h1>' % entity.title)
+        self.w(u'<p>published on %s</p>' % entity.publish_date.strftime('%Y-%m-%d'))
+        self.w(u'<p>%s</p>' % entity.content)
+        
+        # display relations
+        siderelations = []
+        if self.main_related_section:
+            self.render_entity_relations(entity, siderelations)
+
+.. note::
+  Lors qu'une vue est modifiée il n'est pas nécessaire de relancer
+  l'application. Sauvez juste le fichier Python et rechargez la page
+  dans votre navigateur afin de visualiser les modifications.
+
+
+Nous pouvons voir que la date de publication est préfixée comme souhaitée.
+
+
+.. image:: images/cbw-update-primary-view.en.png
+   :alt: modified primary view
+
+
+
+Le code que nous avons modifié définit une vue primaire pour une entité de 
+type `BlogEntry`. 
+
+Etant donné que les vues sont appliquées sur des `result sets` et que 
+les `result sets` peuvent être des tableaux de données, il est indispensable
+de récupérer l'entité selon ses coordonnées (row,col).
+
+La méthode ``self.w()`` est utilisée pour afficher des données. En particulier
+dans notre exemple, nous l'utilisons pour afficher des tags HTML et des valeurs
+des attributs de notre entité.
+
+
--- a/doc/book/fr/modules.fr.txt	Fri Nov 14 19:02:07 2008 +0100
+++ b/doc/book/fr/modules.fr.txt	Mon Nov 17 10:37:06 2008 -0800
@@ -213,6 +213,13 @@
 .. automodule:: cubicweb.web
    :members:
 
+:mod:`cubicweb.web.views`
+=========================
+
+.. automodule:: cubicweb.web.views
+   :members:
+
+
 :mod:`cubicweb.wsgi`
 ====================
 
--- a/doc/book/fr/tut-create-gae-app.fr.txt	Fri Nov 14 19:02:07 2008 +0100
+++ b/doc/book/fr/tut-create-gae-app.fr.txt	Mon Nov 17 10:37:06 2008 -0800
@@ -90,7 +90,7 @@
 vous pouvez utiliser la démo en ligne http://lax.appspot.com/).
 [FIXME] -- changer la demo en ligne en quelque chose qui marche (!)
 
-.. image:: ../images/lax-book.00-login.en.png
+.. image:: images/lax-book.00-login.en.png
    :alt: login screen
 
 Après vous être authentifié, vous arrivez sur la page d'accueil de votre 
@@ -99,7 +99,7 @@
 et ``blogentry_plural`` cela signifie que l'internationalisation (i18n)
 n'a pas encore fonctionné. Ignorez cela pour le moment.
 
-.. image:: ../images/lax-book.01-start.en.png
+.. image:: images/lax-book.01-start.en.png
    :alt: home page
 
 Créez des entités système
@@ -126,7 +126,7 @@
 ``Validate``.
 
 
-.. image:: ../images/lax-book.02-create-blog.en.png
+.. image:: images/lax-book.02-create-blog.en.png
    :alt: from to create blog
 
 En cliquant sur le logo situé dans le coin gauche de la fenêtre,
@@ -134,7 +134,7 @@
 sur le lien Blog, vous devriez voir la liste des entités Blog, en particulier
 celui que vous venez juste de créer ``Tech-Blog``.
 
-.. image:: ../images/lax-book.03-list-one-blog.en.png
+.. image:: images/lax-book.03-list-one-blog.en.png
    :alt: displaying a list of a single blog
 
 Si vous cliquez sur ``Tech-Blog`` vous devriez obtenir une description
@@ -142,14 +142,14 @@
 et la phrase ``everything about technology``
 
 
-.. image:: ../images/lax-book.04-detail-one-blog.en.png
+.. image:: images/lax-book.04-detail-one-blog.en.png
    :alt: displaying the detailed view of a blog
 
 Maintenant retournons sur la page d'accueil et créons un nouveau
 Blog ``MyLife`` et retournons sur la page d'accueil, puis suivons
 le lien Blog et nous constatons qu'à présent deux blogs sont listés.
 
-.. image:: ../images/lax-book.05-list-two-blog.en.png
+.. image:: images/lax-book.05-list-two-blog.en.png
    :alt: displaying a list of two blogs
 
 Créons un article
@@ -169,14 +169,14 @@
 Vous auriez pu aussi, au moment où vous avez crée votre article, sélectionner
 ``appliquer`` au lieu de ``valider`` et le menu ``ajouter relation`` serait apparu.
 
-.. image:: ../images/lax-book.06-add-relation-entryof.en.png
+.. image:: images/lax-book.06-add-relation-entryof.en.png
    :alt: editing a blog entry to add a relation to a blog
 
 Validez vos modifications en cliquant sur ``Valider``. L'entité article
 qui est listée contient maintenant un lien vers le Blog auquel il 
 appartient, ``MyLife``.
 
-.. image:: ../images/lax-book.07-detail-one-blogentry.en.png
+.. image:: images/lax-book.07-detail-one-blogentry.en.png
    :alt: displaying the detailed view of a blogentry
 
 Rappelez-vous que pour le moment, tout a été géré par la plate-forme
@@ -185,7 +185,7 @@
 la commande ``laxctl genschema blogdemo`` et vous pourrez visualiser
 votre schéma a l'URL suivante : http://localhost:8080/schema
 
-.. image:: ../images/lax-book.08-schema.en.png
+.. image:: images/lax-book.08-schema.en.png
    :alt: graphical view of the schema (aka data-model)