1 .. -*- coding: utf-8 -*- |
|
2 |
|
3 Templates |
|
4 --------- |
|
5 |
|
6 Look at ``cubicweb/web/views/basetemplates.py`` and you will |
|
7 find the base templates used to generate HTML for your application. |
|
8 |
|
9 A page is composed as indicated on the schema below: |
|
10 |
|
11 .. image:: ../../images/lax-book_06-main-template-layout_en.png |
|
12 |
|
13 In this section we will demonstrate a change in one of the main |
|
14 interesting template from the three you will look for, |
|
15 that is to say, the HTMLPageHeader, the HTMLPageFooter |
|
16 and the TheMainTemplate. |
|
17 |
|
18 |
|
19 Customize a template |
|
20 ~~~~~~~~~~~~~~~~~~~~ |
|
21 |
|
22 Based on the diagram below, each template can be overriden |
|
23 by your customized template. To do so, we recommand you create |
|
24 a Python module ``blog.views.templates`` to keep it organized. |
|
25 In this module you will have to import the parent class you are |
|
26 interested as follows: :: |
|
27 |
|
28 from cubicweb.web.views.basetemplates import HTMLPageHeader, \ |
|
29 HTMLPageFooter, TheMainTemplate |
|
30 |
|
31 and then create your sub-class:: |
|
32 |
|
33 class MyBlogHTMLPageHeader(HTMLPageHeader): |
|
34 ... |
|
35 |
|
36 Customize header |
|
37 ````````````````` |
|
38 |
|
39 Let's now move the search box in the header and remove the login form from the |
|
40 header. We'll show how to move it to the left column of the user interface. |
|
41 |
|
42 Let's say we do not want anymore the login menu to be in the header |
|
43 |
|
44 First, to remove the login menu, we just need to comment out the display of the |
|
45 login graphic component such as follows: |
|
46 |
|
47 .. sourcecode:: python |
|
48 |
|
49 class MyBlogHTMLPageHeader(HTMLPageHeader): |
|
50 |
|
51 def main_header(self, view): |
|
52 """build the top menu with authentification info and the rql box""" |
|
53 self.w(u'<table id="header"><tr>\n') |
|
54 self.w(u'<td id="firstcolumn">') |
|
55 self._cw.vreg.select_component('logo', self._cw, self.cw_rset).dispatch(w=self.w) |
|
56 self.w(u'</td>\n') |
|
57 # appliname and breadcrumbs |
|
58 self.w(u'<td id="headtext">') |
|
59 comp = self._cw.vreg.select_component('appliname', self._cw, self.cw_rset) |
|
60 if comp and comp.propval('visible'): |
|
61 comp.dispatch(w=self.w) |
|
62 comp = self._cw.vreg.select_component('breadcrumbs', self._cw, self.cw_rset, view=view) |
|
63 if comp and comp.propval('visible'): |
|
64 comp.dispatch(w=self.w, view=view) |
|
65 self.w(u'</td>') |
|
66 # logged user and help |
|
67 #self.w(u'<td>\n') |
|
68 #comp = self._cw.vreg.select_component('loggeduserlink', self._cw, self.cw_rset) |
|
69 #comp.dispatch(w=self.w) |
|
70 #self.w(u'</td><td>') |
|
71 |
|
72 self.w(u'<td>') |
|
73 helpcomp = self._cw.vreg.select_component('help', self._cw, self.cw_rset) |
|
74 if helpcomp: # may not be available if Card is not defined in the schema |
|
75 helpcomp.dispatch(w=self.w) |
|
76 self.w(u'</td>') |
|
77 # lastcolumn |
|
78 self.w(u'<td id="lastcolumn">') |
|
79 self.w(u'</td>\n') |
|
80 self.w(u'</tr></table>\n') |
|
81 self.template('logform', rset=self.cw_rset, id='popupLoginBox', klass='hidden', |
|
82 title=False, message=False) |
|
83 |
|
84 |
|
85 |
|
86 .. image:: ../../images/lax-book_06-header-no-login_en.png |
|
87 |
|
88 Customize footer |
|
89 ```````````````` |
|
90 |
|
91 If you want to change the footer for example, look |
|
92 for HTMLPageFooter and override it in your views file as in: |
|
93 |
|
94 .. sourcecode:: python |
|
95 |
|
96 from cubicweb.web.views.basetemplates import HTMLPageFooter |
|
97 |
|
98 class MyHTMLPageFooter(HTMLPageFooter): |
|
99 |
|
100 def call(self, **kwargs): |
|
101 self.w(u'<div class="footer">') |
|
102 self.w(u'This website has been created with <a href="http://cubicweb.org">CubicWeb</a>.') |
|
103 self.w(u'</div>') |
|
104 |
|
105 Updating a view does not require any restart of the server. By reloading |
|
106 the page you can see your new page footer. |
|
107 |
|
108 |
|
109 TheMainTemplate |
|
110 ``````````````` |
|
111 |
|
112 .. _TheMainTemplate: |
|
113 |
|
114 The MainTemplate is a bit complex as it tries to accomodate many |
|
115 different cases. We are now about to go through it and cutomize entirely |
|
116 our application. |
|
117 |
|
118 TheMainTemplate is responsible for the general layout of the entire application. |
|
119 It defines the template of ``__regid__ = main`` that is used by the application. Is |
|
120 also defined in ``cubicweb/web/views/basetemplates.py`` another template that can |
|
121 be used based on TheMainTemplate called SimpleMainTemplate which does not have |
|
122 a top section. |
|
123 |
|
124 .. image:: ../../images/lax-book_06-simple-main-template_en.png |
|
125 |
|
126 .. XXX |
|
127 .. [WRITE ME] |
|
128 |
|
129 * customize MainTemplate and show that everything in the user |
|
130 interface can be changed |
|
131 |
|