Changeset 4828

Show
Ignore:
Timestamp:
06/28/08 10:07:47 (5 months ago)
Author:
mramm
Message:

Tweeks to the quickstart template suggested by Ademan + line-breaks to make the code easier to read.

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • projects/tg.devtools/trunk/devtools/templates/turbogears/+package+/templates/about.html

    r4824 r4828  
    2424      <li class="getting_started"> 
    2525        <h3>Code my data model</h3> 
    26         <p> When you want a model for storing favorite links or wiki content, the <strong>/model</strong> folder in your site is ready to go. .</p> 
    27         <p> You can build a dynamic site without any data model at all. There still be a default data-model template for you if you didn't enable identity in quickstart. If you enable identity, you'll got identity data-model settled for you.</p> 
     26        <p> When you want a model for storing favorite links or wiki content,  
     27            the <strong>/model</strong> folder in your site is ready to go. .</p> 
     28        <p> You can build a dynamic site without any data model at all. There  
     29            still be a default data-model template for you if you didn't enable  
     30            identity in quickstart. If you enable identity, you'll got  
     31            identity data-model made for you.</p> 
    2832      </li> 
    2933      <li class="getting_started"> 
    30         <h3>Design my site architecture</h3> 
    31         <p> The "<span class="code">root.py</span>" file under the <strong>/controllers</strong> folder has your URLs.  When you called this url (<span class="code"><a href="/about">about</a></span>), the command went through the RootController class to the <span class="code">about</span><span class="code">()</span> method. </p> 
    32         <p> Those Python methods are responsible to create the dictionary of variables that will be used in your web views (template).</p> 
     34        <h3>Design my URL structure</h3> 
     35        <p> The "<span class="code">root.py</span>" file under the  
     36            <strong>/controllers</strong> folder has your URLs.  When you  
     37            called this url (<span class="code"><a href="/about">about</a></span>),  
     38            the command went through the RootController class to the  
     39            <span class="code">about</span><span 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> 
    3342      </li> 
    3443      <li class="getting_started"> 
    3544        <h3>Reuse the web page elements</h3> 
    36         <p> A web page viewed by user could be constructed by single or several reusable templates under <strong>/templates</strong>. Take 'about' page for example, each reusable templates generating a part of the page. We'll cover them in the order of where they are found, listed near the top of the about.html template</p> 
    37         <p> <strong><span class="code">header.html</span></strong> - The "header.html" template contains the HTML code to display the 'header': The blue gradient, TG2 logo, and some site text at the top of every page it is included on. When the "about.html" template is called, it includes this "header.html" template (and the others) with a <span class="code">&lt;xi:include /&gt;</span> tag, part of the Genshi templating system. The "header.html" template is not a completely static HTML -- it also dynamically displays the current page name with a Genshi template method called "replace" with the code: <span class="code">&lt;span py:replace="page"/&gt;</span>. It means replace this <span class="code">&lt;span /&gt;</span> region with the contents found in the variable 'page' that has been sent in the dictionary to this "about.html" template, and is available through that namespace for use by this "header.html" template.  That's how it changes in the header depending on what page you are visiting. 
     45        <p> A web page viewed by user could be constructed by single or  
     46            several reusable templates under <strong>/templates</strong>.  
     47            Take 'about' page for example, each reusable templates generating  
     48            a part of the page. We'll cover them in the order of where they are  
     49            found, listed 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  
     52            'header': The blue gradient, TG2 logo, and some site text at the  
     53            top of every page it is included on. When the "about.html" template  
     54            is called, it includes this "header.html" template (and the others)  
     55            with a <span class="code">&lt;xi:include /&gt;</span> tag, part of  
     56            the Genshi templating system. The "header.html" template is not a  
     57            completely static HTML -- it also dynamically displays the current  
     58            page name with a Genshi template method called "replace" with the  
     59            code: <span class="code">&lt;span py:replace="page"/&gt;</span>.  
     60            It means replace this <span class="code">&lt;span /&gt;</span>  
     61            region with the contents found in the variable 'page' that has  
     62            been sent in the dictionary to this "about.html" template, and is  
     63            available through that namespace for use by this "header.html"  
     64            template.  That's how it changes in the header depending on what  
     65            page you are visiting. 
    3866        </p> 
    39         <p> <strong><span class="code">sidebars.html</span></strong> - The sidebars (navigation areas on the right side of the page) are generated as two separate <span class="code">py:def</span> blocks in the "sidebars.html" template.  The <span class="code">py:def</span> construct is best thought of as a "macro" code... a simple way to separate and reuse common code snippets.  All it takes to include these on the "about.html" page template is to write  <span class="code"> 
     67        <p> <strong><span class="code">sidebars.html</span></strong> - The 
     68             sidebars (navigation areas on the right side of the page) are  
     69             generated as two separate <span class="code">py:def</span> blocks  
     70             in the "sidebars.html" template.  The <span class="code">py:def</span>  
     71             construct is best thought of as a "macro" code... a simple way to  
     72             separate and reuse common code snippets.  All it takes to include  
     73             these on the "about.html" page template is to write   
     74             <span class="code"> 
    4075<br/><br/> 
    41     &#36; &#123;sidebar_top()&#125;  
     76    $${sidebar_bottom()} 
    4277<br/> 
    43     &#36; &#123;sidebar_bottom()&#125; 
     78   $${sidebar_bottom()} 
    4479<br/><br/>        
    45         </span> in the page where they are wanted.  CSS styling (in "/public/css/style.css") floats them off to the right side.  You can remove a sidebar or add more of them, and the CSS will place them one atop the other.</p> 
    46         <p>This is, of course, also exactly how the header and footer templates are also displayed in their proper places, but we'll cover that in the "master.html" template below. (Also, there should NOT be a space between the $ sign and the curly braces, or it will not work.</p> 
    47         <p>Oh, and in sidebar_top we've added a dynamic menu that shows the link to this page at the top when you're at the "index" page, and shows a link to the Home (index) page when you're here.  Study the "sidebars.html" template to see how we used <span class="code">py:choose</span> for that.</p> 
    48         <p> <strong><span class="code">footer.html</span></strong> - The "footer.html" block is simple, but also utilizes a special "replace" method to set the current YEAR in the footer copyright message. The code is: <span class="code">&lt;span py:replace="now.strftime('%Y')"&gt;</span> and it uses the variable "now" that was passed in with the dictionary of variables.  But because "now" is a datetime object, we can use the Python <span class="code">"strftime()"</span> method with the "replace" call to say "Just Display The Year Here".  Simple, elegant; we format the date display in the template (the View in the Model/View/Controller architecture) rather than formatting it in the Controller method and sending it to the template as a string variable.</p> 
    49         <p> <strong><span class="code">master.html</span></strong> - The "master.html" template is called last, by design.  The "master.html" template controls the overall design of the page we're looking at, calling first the "header" py:def macro, then the putting everything from this "about.html" template into the "main_content" div, and then calling the "footer" macro at the end.  Thus the "master.html" template provides the overall architecture for each page in this site.</p> 
    50         <p>But why then shouldn't we call it first?  Isn't it the most important?  Perhaps, but that's precisely why we call it LAST. The "master.html" template needs to know where to find everything else, everything that it will use in py:def macros to build the page.  So that means we call the other templates first, and then call "master.html". </p> 
     80        </span> in the page where they are wanted.  CSS styling (in  
     81        "/public/css/style.css") floats them off to the right side.  You can  
     82        remove a sidebar or add more of them, and the CSS will place them one  
     83        atop the other.</p> 
     84        <p>This is, of course, also exactly how the header and footer  
     85            templates are also displayed in their proper places, but we'll  
     86            cover that in the "master.html" template below.</p> 
     87        <p>Oh, and in sidebar_top we've added a dynamic menu that shows the  
     88            link to this page at the top when you're at the "index" page, and  
     89            shows a link to the Home (index) page when you're here.  Study the  
     90            "sidebars.html" template to see how we used  
     91            <span class="code">py:choose</span> for that.</p> 
     92        <p> <strong><span class="code">footer.html</span></strong> - The  
     93            "footer.html" block is simple, but also utilizes a special  
     94            "replace" method to set the current YEAR in the footer copyright  
     95            message. The code is:  
     96            <span class="code">&lt;span py:replace="now.strftime('%Y')"&gt; 
     97                </span> and it uses the variable "now" that was passed  
     98            in with the dictionary of variables.  But because "now" is a  
     99            datetime object, we can use the Python  
     100            <span class="code">"strftime()"</span> method with the "replace"  
     101            call to say "Just Display The Year Here".  Simple, elegant; we  
     102            format the date display in the template (the View in the  
     103            Model/View/Controller architecture) rather than formatting it in  
     104            the Controller method and sending it to the template as a string  
     105            variable.</p> 
     106        <p> <strong><span class="code">master.html</span></strong> - The  
     107            "master.html" template is called last, by design.  The "master.html"  
     108            template controls the overall design of the page we're looking at,  
     109            calling first the "header" py:def macro, then the putting everything  
     110            from this "about.html" template into the "main_content" div, and  
     111            then calling the "footer" macro at the end.  Thus the "master.html"  
     112            template provides the overall architecture for each page in this  
     113            site.</p> 
     114        <p>But why then shouldn't we call it first?  Isn't it the most  
     115            important?  Perhaps, but that's precisely why we call it LAST.  
     116            The "master.html" template needs to know where to find everything  
     117            else, everything that it will use in py:def macros to build the 
     118             page.  So that means we call the other templates first, and then  
     119             call "master.html". </p> 
    51120        <p>There's more to the "master.html" template... study it to see how  
    52121           the &lt;title&gt; tags and static JS and CSS files are brought into