cubicweb logo

Table Of Contents

Previous topic

1.9. Cubes

Next topic

1.11. What’s next?

This Page

1.10. Templates

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:

../../_images/lax-book_06-main-template-layout_en.png

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.

1.10.1. 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):
    ...

1.10.1.1. 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 user interface.

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 graphic component such as follows:

class MyBlogHTMLPageHeader(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._cw.vreg.select_component('logo', self._cw, self.cw_rset).dispatch(w=self.w)
        self.w(u'</td>\n')
        # appliname and breadcrumbs
        self.w(u'<td id="headtext">')
        comp = self._cw.vreg.select_component('appliname', self._cw, self.cw_rset)
        if comp and comp.propval('visible'):
            comp.dispatch(w=self.w)
        comp = self._cw.vreg.select_component('breadcrumbs', self._cw, self.cw_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._cw.vreg.select_component('loggeduserlink', self._cw, self.cw_rset)
        #comp.dispatch(w=self.w)
        #self.w(u'</td><td>')

        self.w(u'<td>')
        helpcomp = self._cw.vreg.select_component('help', self._cw, self.cw_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.cw_rset, id='popupLoginBox', klass='hidden',
                      title=False, message=False)
../../_images/lax-book_06-header-no-login_en.png

1.10.1.3. TheMainTemplate

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.

TheMainTemplate is responsible for the general layout of the entire application. It defines the template of __regid__ = main that is used by the application. Is 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.

../../_images/lax-book_06-simple-main-template_en.png
  • customize MainTemplate and show that everything in the user interface can be changed