Templates
Contents
Templates#
[WRITE ME]
talk about main templates, etc.
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 :
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.
HTMLPageHeader#
Customize header#
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.
First, to remove the login menu, we just need to comment out the display of the login component such as follows :
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>')
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)
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 cubicweb.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)
TheMainTemplate#
TheMainTemplate is responsible for the general layout of the entire application.
It defines the template of id = main
that is used by the application.
The default main template (cubicweb.web.views.basetemplates.TheMainTemplate) builds the page based on the following pattern:
The rectangle containing view.dispatch() represents the area where the content view has to be displayed. The others represents sub-templates called to complete the page. A default implementation of those is provided in cubicweb.views.basetemplates. You can, of course, overload those sub-templates to implement your own customization of the HTML page.
We can also control certain aspects of the main template thanks to the following forms parameters:
__notemplate, if present (whatever the value assigned), only the content view is returned
__force_display, if present and its value is not null, no navigation whatever the number of entities to display
__method, if the result set to render contains only one entity and this parameter is set, it refers to a method to call on the entity by passing it the dictionary of the forms parameters, before going the classic way (through step 1 and 2 described juste above)
The MainTemplate is a bit complex as it tries to accomodate many different cases. We are now about to go through it and cutomize entirely our application.