1 .. -*- coding: utf-8 -*- |
1 .. -*- coding: utf-8 -*- |
2 |
2 |
3 Views & Templates |
3 Templates |
4 ----------------- |
4 --------- |
5 |
5 |
6 Look at ``lax/skel/ginco/web/views/basetemplates.py`` and you will |
6 Look at ``cubicweb/web/views/basetemplates.py`` and you will |
7 find the base templates used to generate HTML for your application. |
7 find the base templates used to generate HTML for your application. |
8 |
8 |
9 A page is composed as indicated on the schema below: |
9 A page is composed as indicated on the schema below: |
10 |
10 |
11 .. image:: images/lax-book.06-main-template-layout.en.png |
11 .. image:: images/lax-book.06-main-template-layout.en.png |
12 |
12 |
13 In this section we will go through a couple of the primary templates |
13 In this section we will demonstrate a change in one of the main |
14 you must be interested in, that is to say, the HTMLPageHeader, |
14 interesting template from the three you will look for, |
15 the HTMLPageFooter and the TheMainTemplate. |
15 that is to say, the HTMLPageHeader, the HTMLPageFooter |
|
16 and the TheMainTemplate. |
16 |
17 |
17 |
18 |
18 HTMLPageHeader |
19 Customize a template |
19 ~~~~~~~~~~~~~~~ |
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 ... |
20 |
35 |
21 Customize header |
36 Customize header |
22 ````````````````` |
37 ````````````````` |
23 |
38 |
24 Let's now move the search box in the header and remove the login form |
39 Let's now move the search box in the header and remove the login form |
25 from the header. We'll show how to move it to the left column of the application. |
40 from the header. We'll show how to move it to the left column of the application. |
26 |
41 |
27 Let's say we do not want anymore the login menu to be in the header, but we |
42 Let's say we do not want anymore the login menu to be in the header |
28 prefer it to be in the left column just below the logo. As the left column is |
|
29 rendered by ``TheMainTemplate``, we will show how to do it in TheMainTemplate_. |
|
30 |
43 |
31 First, to remove the login menu, we just need to comment out the display of the |
44 First, to remove the login menu, we just need to comment out the display of the |
32 login component such as follows: :: |
45 login graphic component such as follows: :: |
33 |
46 |
34 class MyHTMLPageHeader(HTMLPageHeader): |
47 class MyBlogHTMLPageHeader(HTMLPageHeader): |
35 |
48 |
36 def main_header(self, view): |
49 def main_header(self, view): |
37 """build the top menu with authentification info and the rql box""" |
50 """build the top menu with authentification info and the rql box""" |
38 self.w(u'<table id="header"><tr>\n') |
51 self.w(u'<table id="header"><tr>\n') |
39 self.w(u'<td id="firstcolumn">') |
52 self.w(u'<td id="firstcolumn">') |
68 |
81 |
69 |
82 |
70 |
83 |
71 .. image:: images/lax-book.06-header-no-login.en.png |
84 .. image:: images/lax-book.06-header-no-login.en.png |
72 |
85 |
73 Let's now move the search box in the top-right header area. To do so, we will |
86 Customize footer |
74 first create a method to get the search box display and insert it in the header |
87 ```````````````` |
75 table. |
|
76 |
|
77 :: |
|
78 |
|
79 from ginco.web.views.basetemplates import HTMLPageHeader |
|
80 class MyHTMLPageHeader(HTMLPageHeader): |
|
81 def main_header(self, view): |
|
82 """build the top menu with authentification info and the rql box""" |
|
83 self.w(u'<table id="header"><tr>\n') |
|
84 self.w(u'<td id="firstcolumn">') |
|
85 self.vreg.select_component('logo', self.req, self.rset).dispatch(w=self.w) |
|
86 self.w(u'</td>\n') |
|
87 # appliname and breadcrumbs |
|
88 self.w(u'<td id="headtext">') |
|
89 comp = self.vreg.select_component('appliname', self.req, self.rset) |
|
90 if comp and comp.propval('visible'): |
|
91 comp.dispatch(w=self.w) |
|
92 comp = self.vreg.select_component('breadcrumbs', self.req, self.rset, view=view) |
|
93 if comp and comp.propval('visible'): |
|
94 comp.dispatch(w=self.w, view=view) |
|
95 self.w(u'</td>') |
|
96 |
|
97 # logged user and help |
|
98 #self.w(u'<td>\n') |
|
99 #comp = self.vreg.select_component('loggeduserlink', self.req, self.rset) |
|
100 #comp.dispatch(w=self.w) |
|
101 #self.w(u'</td><td>') |
|
102 |
|
103 # search box |
|
104 self.w(u'<td>') |
|
105 self.get_searchbox(view, 'left') |
|
106 self.w(u'</td>') |
|
107 |
|
108 self.w(u'<td>') |
|
109 helpcomp = self.vreg.select_component('help', self.req, self.rset) |
|
110 if helpcomp: # may not be available if Card is not defined in the schema |
|
111 helpcomp.dispatch(w=self.w) |
|
112 self.w(u'</td>') |
|
113 # lastcolumn |
|
114 self.w(u'<td id="lastcolumn">') |
|
115 self.w(u'</td>\n') |
|
116 self.w(u'</tr></table>\n') |
|
117 self.template('logform', rset=self.rset, id='popupLoginBox', klass='hidden', |
|
118 title=False, message=False) |
|
119 |
|
120 def get_searchbox(self, view, context): |
|
121 boxes = list(self.vreg.possible_vobjects('boxes', self.req, self.rset, |
|
122 view=view, context=context)) |
|
123 if boxes: |
|
124 for box in boxes: |
|
125 if box.id == 'search_box': |
|
126 box.dispatch(w=self.w, view=view) |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 HTMLPageFooter |
|
132 ~~~~~~~~~~~~~~ |
|
133 |
88 |
134 If you want to change the footer for example, look |
89 If you want to change the footer for example, look |
135 for HTMLPageFooter and override it in your views file as in: |
90 for HTMLPageFooter and override it in your views file as in: |
136 :: |
91 :: |
137 |
92 |
145 Updating a view does not require any restart of the server. By reloading |
100 Updating a view does not require any restart of the server. By reloading |
146 the page you can see your new page footer. |
101 the page you can see your new page footer. |
147 |
102 |
148 |
103 |
149 TheMainTemplate |
104 TheMainTemplate |
150 ~~~~~~~~~~~~~~~ |
105 ``````````````` |
151 |
106 |
152 .. _TheMainTemplate: |
107 .. _TheMainTemplate: |
153 |
108 |
154 The MainTemplate is a bit complex as it tries to accomodate many |
109 The MainTemplate is a bit complex as it tries to accomodate many |
155 different cases. We are now about to go through it and cutomize entirely |
110 different cases. We are now about to go through it and cutomize entirely |
156 our application. |
111 our application. |
157 |
112 |
158 TheMainTemplate is responsible for the general layout of the entire application. |
113 TheMainTemplate is responsible for the general layout of the entire application. |
159 It defines the template of ``id = main`` that is used by the application. Is |
114 It defines the template of ``id = main`` that is used by the application. Is |
160 also defined in ``ginco/web/views/basetemplates.py`` another template that can |
115 also defined in ``cubicweb/web/views/basetemplates.py`` another template that can |
161 be used based on TheMainTemplate called SimpleMainTemplate which does not have |
116 be used based on TheMainTemplate called SimpleMainTemplate which does not have |
162 a top section. |
117 a top section. |
163 |
118 |
164 .. image:: images/lax-book.06-simple-main-template.en.png |
119 .. image:: images/lax-book.06-simple-main-template.en.png |
|
120 |
|
121 XXX |
|
122 [WRITE ME] |
|
123 |
|
124 * customize MainTemplate and show that everything in the user |
|
125 interface can be changed |
|
126 * Add login menu in left column ? |
165 |
127 |
166 CSS changes |
128 CSS changes |
167 ~~~~~~~~~~~ |
129 ~~~~~~~~~~~ |
168 |
130 |
169 We cannot modify the order in which the application is reading the CSS. In |
131 We cannot modify the order in which the application is reading the CSS. In |
170 the case we want to create new CSS style, the best is to define it a in a new |
132 the case we want to create new CSS style, the best is to define it a in a new |
171 CSS located under ``myapp/data/``. |
133 CSS located under ``myapp/data/`` and use those new styles while writing |
|
134 customized views and templates. |
172 |
135 |
173 If you want to modify an existing CSS styling property, you will have to use |
136 If you want to modify an existing CSS styling property, you will have to use |
174 ``!important`` declaration to override the existing property. The application |
137 ``!important`` declaration to override the existing property. The application |
175 apply a higher priority on the default CSS and you can not change that. |
138 apply a higher priority on the default CSS and you can not change that. |
176 Customized CSS will not be read first. |
139 Customized CSS will not be read first. |
177 |
140 |
178 [TODO] |
|
179 Add login menu in left column |
|
180 |
141 |
181 |
142 |
182 [WRITE ME] |
|
183 |
143 |
184 * customize MainTemplate and show that everything in the user |
|
185 interface can be changed |
|
186 |
|
187 [TODO] |
|
188 Rajouter une section pour definir la terminologie utilisee. |
|
189 Dans ginco-doc rajouter une section pour cubicweb-ctl shell ou |
|
190 on liste les commandes dispos. |
|