--- a/doc/book/en/A02c-maintemplate.en.txt Tue Dec 23 15:42:01 2008 +0100
+++ b/doc/book/en/A02c-maintemplate.en.txt Tue Dec 23 10:43:51 2008 -0800
@@ -1,22 +1,37 @@
.. -*- coding: utf-8 -*-
-Views & Templates
------------------
+Templates
+---------
-Look at ``lax/skel/ginco/web/views/basetemplates.py`` and you will
+Look at ``cubicweb/web/views/basetemplates.py`` and you will
find the base templates used to generate HTML for your application.
A page is composed as indicated on the schema below:
.. image:: images/lax-book.06-main-template-layout.en.png
-In this section we will go through a couple of the primary templates
-you must be interested in, that is to say, the HTMLPageHeader,
-the HTMLPageFooter and the TheMainTemplate.
+In this section we will demonstrate a change in one of the main
+interesting template from the three you will look for,
+that is to say, the HTMLPageHeader, the HTMLPageFooter
+and the TheMainTemplate.
-HTMLPageHeader
-~~~~~~~~~~~~~~~
+Customize a template
+~~~~~~~~~~~~~~~~~~~~
+
+Based on the diagram below, each template can be overriden
+by your customized template. To do so, we recommand you create
+a Python module ``blog.views.templates`` to keep it organized.
+In this module you will have to import the parent class you are
+interested as follows: ::
+
+ from cubicweb.web.views.basetemplates import HTMLPageHeader, \
+ HTMLPageFooter, TheMainTemplate
+
+and then create your sub-class::
+
+ class MyBlogHTMLPageHeader(HTMLPageHeader):
+ ...
Customize header
`````````````````
@@ -24,14 +39,12 @@
Let's now move the search box in the header and remove the login form
from the header. We'll show how to move it to the left column of the application.
-Let's say we do not want anymore the login menu to be in the header, but we
-prefer it to be in the left column just below the logo. As the left column is
-rendered by ``TheMainTemplate``, we will show how to do it in TheMainTemplate_.
+Let's say we do not want anymore the login menu to be in the header
First, to remove the login menu, we just need to comment out the display of the
-login component such as follows: ::
+login graphic component such as follows: ::
- class MyHTMLPageHeader(HTMLPageHeader):
+ class MyBlogHTMLPageHeader(HTMLPageHeader):
def main_header(self, view):
"""build the top menu with authentification info and the rql box"""
@@ -70,66 +83,8 @@
.. image:: images/lax-book.06-header-no-login.en.png
-Let's now move the search box in the top-right header area. To do so, we will
-first create a method to get the search box display and insert it in the header
-table.
-
-::
-
- from ginco.web.views.basetemplates import HTMLPageHeader
- class MyHTMLPageHeader(HTMLPageHeader):
- def main_header(self, view):
- """build the top menu with authentification info and the rql box"""
- self.w(u'<table id="header"><tr>\n')
- self.w(u'<td id="firstcolumn">')
- self.vreg.select_component('logo', self.req, self.rset).dispatch(w=self.w)
- self.w(u'</td>\n')
- # appliname and breadcrumbs
- self.w(u'<td id="headtext">')
- comp = self.vreg.select_component('appliname', self.req, self.rset)
- if comp and comp.propval('visible'):
- comp.dispatch(w=self.w)
- comp = self.vreg.select_component('breadcrumbs', self.req, self.rset, view=view)
- if comp and comp.propval('visible'):
- comp.dispatch(w=self.w, view=view)
- self.w(u'</td>')
-
- # logged user and help
- #self.w(u'<td>\n')
- #comp = self.vreg.select_component('loggeduserlink', self.req, self.rset)
- #comp.dispatch(w=self.w)
- #self.w(u'</td><td>')
-
- # search box
- self.w(u'<td>')
- self.get_searchbox(view, 'left')
- self.w(u'</td>')
-
- self.w(u'<td>')
- helpcomp = self.vreg.select_component('help', self.req, self.rset)
- if helpcomp: # may not be available if Card is not defined in the schema
- helpcomp.dispatch(w=self.w)
- self.w(u'</td>')
- # lastcolumn
- self.w(u'<td id="lastcolumn">')
- self.w(u'</td>\n')
- self.w(u'</tr></table>\n')
- self.template('logform', rset=self.rset, id='popupLoginBox', klass='hidden',
- title=False, message=False)
-
- def get_searchbox(self, view, context):
- boxes = list(self.vreg.possible_vobjects('boxes', self.req, self.rset,
- view=view, context=context))
- if boxes:
- for box in boxes:
- if box.id == 'search_box':
- box.dispatch(w=self.w, view=view)
-
-
-
-
-HTMLPageFooter
-~~~~~~~~~~~~~~
+Customize footer
+````````````````
If you want to change the footer for example, look
for HTMLPageFooter and override it in your views file as in:
@@ -147,7 +102,7 @@
TheMainTemplate
-~~~~~~~~~~~~~~~
+```````````````
.. _TheMainTemplate:
@@ -157,34 +112,32 @@
TheMainTemplate is responsible for the general layout of the entire application.
It defines the template of ``id = main`` that is used by the application. Is
-also defined in ``ginco/web/views/basetemplates.py`` another template that can
+also defined in ``cubicweb/web/views/basetemplates.py`` another template that can
be used based on TheMainTemplate called SimpleMainTemplate which does not have
a top section.
.. image:: images/lax-book.06-simple-main-template.en.png
+XXX
+[WRITE ME]
+
+* customize MainTemplate and show that everything in the user
+ interface can be changed
+* Add login menu in left column ?
+
CSS changes
~~~~~~~~~~~
We cannot modify the order in which the application is reading the CSS. In
the case we want to create new CSS style, the best is to define it a in a new
-CSS located under ``myapp/data/``.
+CSS located under ``myapp/data/`` and use those new styles while writing
+customized views and templates.
If you want to modify an existing CSS styling property, you will have to use
``!important`` declaration to override the existing property. The application
apply a higher priority on the default CSS and you can not change that.
Customized CSS will not be read first.
-[TODO]
-Add login menu in left column
-[WRITE ME]
-* customize MainTemplate and show that everything in the user
- interface can be changed
-
-[TODO]
-Rajouter une section pour definir la terminologie utilisee.
-Dans ginco-doc rajouter une section pour cubicweb-ctl shell ou
-on liste les commandes dispos.