| 1336 |
rajveer |
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
|
2 |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
|
3 |
<html xmlns="http://www.w3.org/1999/xhtml"
|
|
|
4 |
xmlns:py="http://genshi.edgewall.org/"
|
|
|
5 |
xmlns:xi="http://www.w3.org/2001/XInclude">
|
|
|
6 |
|
|
|
7 |
<xi:include href="master.html" />
|
|
|
8 |
|
|
|
9 |
<head>
|
|
|
10 |
<meta content="text/html; charset=UTF-8" http-equiv="content-type"
|
|
|
11 |
py:replace="''" />
|
|
|
12 |
<title>Learning TurboGears 2.0: Quick guide to the Quickstart
|
|
|
13 |
pages.</title>
|
|
|
14 |
</head>
|
|
|
15 |
|
|
|
16 |
<body>
|
|
|
17 |
${sidebar_top()} ${sidebar_bottom()}
|
|
|
18 |
<div id="getting_started">
|
|
|
19 |
<h2>Architectural basics of a quickstart TG2 site.</h2>
|
|
|
20 |
<p>The TG2 quickstart command produces this basic TG site. Here's
|
|
|
21 |
how it works.</p>
|
|
|
22 |
<ol id="getting_started_steps">
|
|
|
23 |
<li class="getting_started">
|
|
|
24 |
<h3>Code my data model</h3>
|
|
|
25 |
<p>When you want a model for storing favorite links or wiki
|
|
|
26 |
content, the <strong>/model</strong> folder in your site is ready to
|
|
|
27 |
go.</p>
|
|
|
28 |
<p>You can build a dynamic site without any data model at all.
|
|
|
29 |
There still be a default data-model template for you if you didn't
|
|
|
30 |
enable authentication and authorization in quickstart. If you enabled
|
|
|
31 |
it, you got auth data-model made for you.</p>
|
|
|
32 |
</li>
|
|
|
33 |
<li class="getting_started">
|
|
|
34 |
<h3>Design my URL structure</h3>
|
|
|
35 |
<p>The "<span class="code">root.py</span>" file under the <strong>/controllers</strong>
|
|
|
36 |
folder has your URLs. When you called this url (<span class="code"><a
|
|
|
37 |
href="${tg.url('/about')}">about</a></span>), the command went through the
|
|
|
38 |
RootController class to the <span class="code">about</span><span
|
|
|
39 |
class="code">()</span> method.</p>
|
|
|
40 |
<p>Those Python methods are responsible to create the dictionary of
|
|
|
41 |
variables that will be used in your web views (template).</p>
|
|
|
42 |
</li>
|
|
|
43 |
<li class="getting_started">
|
|
|
44 |
<h3>Reuse the web page elements</h3>
|
|
|
45 |
<p>A web page viewed by user could be constructed by single or
|
|
|
46 |
several reusable templates under <strong>/templates</strong>. Take
|
|
|
47 |
'about' page for example, each reusable templates generating a part of
|
|
|
48 |
the page. We'll cover them in the order of where they are found, listed
|
|
|
49 |
near the top of the about.html template</p>
|
|
|
50 |
<p><strong><span class="code">header.html</span></strong> - The
|
|
|
51 |
"header.html" template contains the HTML code to display the 'header':
|
|
|
52 |
The blue gradient, TG2 logo, and some site text at the top of every
|
|
|
53 |
page it is included on. When the "about.html" template is called, it
|
|
|
54 |
includes this "header.html" template (and the others) with a <span
|
|
|
55 |
class="code"><xi:include /></span> tag, part of the Genshi
|
|
|
56 |
templating system. The "header.html" template is not a completely
|
|
|
57 |
static HTML -- it also dynamically displays the current page name with
|
|
|
58 |
a Genshi template method called "replace" with the code: <span
|
|
|
59 |
class="code"><span py:replace="page"/></span>. It means replace
|
|
|
60 |
this <span class="code"><span /></span> region with the contents
|
|
|
61 |
found in the variable 'page' that has been sent in the dictionary to
|
|
|
62 |
this "about.html" template, and is available through that namespace for
|
|
|
63 |
use by this "header.html" template. That's how it changes in the header
|
|
|
64 |
depending on what page you are visiting.</p>
|
|
|
65 |
<p><strong><span class="code">sidebars.html</span></strong> - The
|
|
|
66 |
sidebars (navigation areas on the right side of the page) are generated
|
|
|
67 |
as two separate <span class="code">py:def</span> blocks in the
|
|
|
68 |
"sidebars.html" template. The <span class="code">py:def</span>
|
|
|
69 |
construct is best thought of as a "macro" code... a simple way to
|
|
|
70 |
separate and reuse common code snippets. All it takes to include these
|
|
|
71 |
on the "about.html" page template is to write <span class="code">
|
|
|
72 |
<br />
|
|
|
73 |
<br />
|
|
|
74 |
$${sidebar_top()} <br />
|
|
|
75 |
$${sidebar_bottom()} <br />
|
|
|
76 |
<br />
|
|
|
77 |
</span> in the page where they are wanted. CSS styling (in
|
|
|
78 |
"/public/css/style.css") floats them off to the right side. You can
|
|
|
79 |
remove a sidebar or add more of them, and the CSS will place them one
|
|
|
80 |
atop the other.</p>
|
|
|
81 |
<p>This is, of course, also exactly how the header and footer
|
|
|
82 |
templates are also displayed in their proper places, but we'll cover
|
|
|
83 |
that in the "master.html" template below.</p>
|
|
|
84 |
<p>Oh, and in sidebar_top we've added a dynamic menu that shows the
|
|
|
85 |
link to this page at the top when you're at the "index" page, and shows
|
|
|
86 |
a link to the Home (index) page when you're here. Study the
|
|
|
87 |
"sidebars.html" template to see how we used <span class="code">py:choose</span>
|
|
|
88 |
for that.</p>
|
|
|
89 |
<p><strong><span class="code">footer.html</span></strong> - The
|
|
|
90 |
"footer.html" block is simple, but also utilizes a special "replace"
|
|
|
91 |
method to set the current YEAR in the footer copyright message. The
|
|
|
92 |
code is: <span class="code"><span
|
|
|
93 |
py:replace="now.strftime('%Y')"> </span> and it uses the variable "now"
|
|
|
94 |
that was passed in with the dictionary of variables. But because "now"
|
|
|
95 |
is a datetime object, we can use the Python <span class="code">"strftime()"</span>
|
|
|
96 |
method with the "replace" call to say "Just Display The Year Here".
|
|
|
97 |
Simple, elegant; we format the date display in the template (the View
|
|
|
98 |
in the Model/View/Controller architecture) rather than formatting it in
|
|
|
99 |
the Controller method and sending it to the template as a string
|
|
|
100 |
variable.</p>
|
|
|
101 |
<p><strong><span class="code">master.html</span></strong> - The
|
|
|
102 |
"master.html" template is called last, by design. The "master.html"
|
|
|
103 |
template controls the overall design of the page we're looking at,
|
|
|
104 |
calling first the "header" py:def macro, then the putting everything
|
|
|
105 |
from this "about.html" template into the "content" div, and then
|
|
|
106 |
calling the "footer" macro at the end. Thus the "master.html" template
|
|
|
107 |
provides the overall architecture for each page in this site.</p>
|
|
|
108 |
<p>But why then shouldn't we call it first? Isn't it the most
|
|
|
109 |
important? Perhaps, but that's precisely why we call it LAST. The
|
|
|
110 |
"master.html" template needs to know where to find everything else,
|
|
|
111 |
everything that it will use in py:def macros to build the page. So that
|
|
|
112 |
means we call the other templates first, and then call "master.html".</p>
|
|
|
113 |
<p>There's more to the "master.html" template... study it to see
|
|
|
114 |
how the <title> tags and static JS and CSS files are brought into
|
|
|
115 |
the page. Templating with Genshi is a powerful tool and we've only
|
|
|
116 |
scratched the surface. There are also a few little CSS tricks hidden in
|
|
|
117 |
these pages, like the use of a "clearingdiv" to make sure that your
|
|
|
118 |
footer stays below the sidebars and always looks right. That's not TG2
|
|
|
119 |
at work, just CSS. You'll need all your skills to build a fine web app,
|
|
|
120 |
but TG2 will make the hard parts easier so that you can concentrate
|
|
|
121 |
more on good design and content rather than struggling with mechanics.</p>
|
|
|
122 |
</li>
|
|
|
123 |
</ol>
|
|
|
124 |
<p>Good luck with TurboGears 2!</p>
|
|
|
125 |
</div>
|
|
|
126 |
</body>
|
|
|
127 |
</html>
|