1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>8. How can webdesigners and webdevelopers collaborate on a CherryPy project</title>
<META NAME="description" CONTENT="8. How can webdesigners and webdevelopers collaborate on a CherryPy project">
<META NAME="keywords" CONTENT="howto">
<META NAME="resource-type" CONTENT="document">
<META NAME="distribution" CONTENT="global">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="STYLESHEET" href="howto.css" type='text/css'>
<link rel="first" href="howto.html">
<link rel="contents" href="contents.html" title="Contents">
<LINK REL="next" HREF="node10.html">
<LINK REL="previous" HREF="node8.html">
<LINK REL="up" HREF="howto.html">
<LINK REL="next" HREF="node10.html">
<meta name='aesop' content='information'>
</head>
<body>
<DIV CLASS="navigation">
<table align="center" width="100%" cellpadding="0" cellspacing="2">
<tr>
<td><A HREF="node8.html"><img src="../icons/previous.gif"
border="0" height="32"
alt="Previous Page" width="32"></A></td>
<td><A HREF="howto.html"><img src="../icons/up.gif"
border="0" height="32"
alt="Up One Level" width="32"></A></td>
<td><A HREF="node10.html"><img src="../icons/next.gif"
border="0" height="32"
alt="Next Page" width="32"></A></td>
<td align="center" width="100%">CherryPy HowTo</td>
<td><A HREF="node1.html"><img src="../icons/contents.gif"
border="0" height="32"
alt="Contents" width="32"></A></td>
<td><img src="../icons/blank.gif"
border="0" height="32"
alt="" width="32"></td>
<td><img src="../icons/blank.gif"
border="0" height="32"
alt="" width="32"></td>
</tr></table>
<b class="navlabel">Previous:</b> <a class="sectref" HREF="node8.html">7. How to use</A>
<b class="navlabel">Up:</b> <a class="sectref" HREF="howto.html">CherryPy HowTo</A>
<b class="navlabel">Next:</b> <a class="sectref" HREF="node10.html">9. How to use</A>
<br><hr>
</DIV>
<!--End of Navigation Panel-->
<!--Table of Child-Links-->
<A NAME="CHILD_LINKS"><STRONG>Subsections</STRONG></a>
<UL CLASS="ChildLinks">
<LI><A href="node9.html#SECTION009100000000000000000">8.1 Introduction</a>
<LI><A href="node9.html#SECTION009200000000000000000">8.2 How can they collaborate ?</a>
<LI><A href="node9.html#SECTION009300000000000000000">8.3 Example</a>
</ul>
<!--End of Table of Child-Links-->
<HR>
<H1><A NAME="SECTION009000000000000000000">
8. How can webdesigners and webdevelopers collaborate on a CherryPy project</A>
</H1>
<H1><A NAME="SECTION009100000000000000000">
8.1 Introduction</A>
</H1>
The two common kinds of people involved in a website development are designers and developers. Designers typically take care
of the presentation of the pages, and developers take care of the content and the logic behind the web site.
<P>
Designers and developers don't use the same tools: designers usually use an HTML editor (for instance, Dreamweaver or Amaya)
and developers use a text editor and CherryPy.
<P>
<H1><A NAME="SECTION009200000000000000000">
8.2 How can they collaborate ?</A>
</H1>
It's very easy:
<UL>
<LI>Designers create template files with their HTML editor
</LI>
<LI>Developers edit the template files and add some dynamic data if needed (using CHTL)
</LI>
<LI>Since CGTL is HTML-editor-safe, designers can re-edit the template files and add new HTML code, without losing the dynamic
information.
</LI>
<LI>Developers include the template files in their CherryPy source code using the <py-include> tag in their masks:
<div class="verbatim"><pre>
<div py-include="header.html">header</div> (CHTL form)
or
<py-include="header.html"> (CGTL form)
</pre></div>
</LI>
</UL>
<P>
The template file will be included in the code by the CherryPy preprocessor (very much like an "#include" directive in C).
To find the template files, the preprocessor will look in the same directories as for the other source files
(<span class="file">/lib</span>, <span class="file">/src</span>, directories specified with the -I flag, etc.)
<P>
<H1><A NAME="SECTION009300000000000000000">
8.3 Example</A>
</H1>
In this example, we'll build a small website with only 2 pages. Each page will be made of a header, a body and a footer.
The header and the footer will be the same on both pages, except they will have a "you are here" label.
<P>
Let's go step by step
<UL>
<LI>The webdesigners create 4 files with their favorite HTML editor:
<P>
<div class="verbatim"><pre>
*******************
* File header.html
*******************
<html><body>
Welcome to the CherryPy py-include demo.<br>
You are here: home<br><br>
*******************
* File footer.html
*******************
<br><br><small>Don't forget to eat cherry pie every day</small>
</body></html>
*******************
* File page1.html
*******************
Header
Welcome to page1.<br>
Click <a href="page2">here</a> to go to page 2.
Footer
*******************
* File page2.html
*******************
Header
Welcome to page2.<br>
Click <a href="page1">here</a> to go to page 1
Footer
</pre></div>
Nothing too fancy so far. We just have a header, a footer, and two bodies. Everything is static.
<P>
</LI>
<LI>At this point, the webdevelopers will edit the html files and add some dynamic information:
<UL>
<LI>In header.html, change 'home' into '<div py-eval="youAreHereLabel">home</div>'
</LI>
<LI>In page1.html and page2.html, change 'Header' into '<div py-include="header.html">Header</div>' and 'Footer' into
'<div py-include="footer.html">Footer</div>'
</LI>
</UL>
<P>
</LI>
<LI>Now the templates are ready, and the webdevelopers can write their CherryPy source code:
<div class="verbatim"><pre>
CherryClass Root:
mask:
def page1(self, youAreHereLabel='page1'):
<py-include="page1.html">
def page2(self, youAreHereLabel='page2'):
<py-include="page2.html">
</pre></div>
<P>
We now have a working version of the web site: just compile the CherryPy source file, run the server and test it.
<P>
</LI>
<LI>Now, let's assume that the designers want to change something in the look of the page: they want the "CherryPy" word in the
header to be displayed in bold . To do so, all they have to do is edit the "header.html" file and put the "CherryPy" word
in bold. The HTML editor should leave the '<div py-eval="youAreHere">home</div> untouched. (it keeps the dynamic information).
<P>
</LI>
</UL>
<P>
<DIV CLASS="navigation">
<p><hr>
<table align="center" width="100%" cellpadding="0" cellspacing="2">
<tr>
<td><A HREF="node8.html"><img src="../icons/previous.gif"
border="0" height="32"
alt="Previous Page" width="32"></A></td>
<td><A HREF="howto.html"><img src="../icons/up.gif"
border="0" height="32"
alt="Up One Level" width="32"></A></td>
<td><A HREF="node10.html"><img src="../icons/next.gif"
border="0" height="32"
alt="Next Page" width="32"></A></td>
<td align="center" width="100%">CherryPy HowTo</td>
<td><A HREF="node1.html"><img src="../icons/contents.gif"
border="0" height="32"
alt="Contents" width="32"></A></td>
<td><img src="../icons/blank.gif"
border="0" height="32"
alt="" width="32"></td>
<td><img src="../icons/blank.gif"
border="0" height="32"
alt="" width="32"></td>
</tr></table>
<b class="navlabel">Previous:</b> <a class="sectref" HREF="node8.html">7. How to use</A>
<b class="navlabel">Up:</b> <a class="sectref" HREF="howto.html">CherryPy HowTo</A>
<b class="navlabel">Next:</b> <a class="sectref" HREF="node10.html">9. How to use</A>
<hr>
<span class="release-info">Release 0.10, documentation updated on 19 March 2004.</span>
</DIV>
<!--End of Navigation Panel-->
<ADDRESS>
See <i><a href="about.html">About this document...</a></i> for information on suggesting changes.
</ADDRESS>
</BODY>
</HTML>
|
