| 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 | identity in quickstart. If you enable identity, you'll got |
|---|
| 28 | identity 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 "main_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> |
|---|
