vigiboard / dashboard / templates / about.html @ 805cc54a
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>
|