vigiboard / dashboard / templates / about.html @ 805cc54a
History | View | Annotate | Download (7.68 KB)
1 | 805cc54a | Thomas ANDREJAK | <!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> |