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