-
Notifications
You must be signed in to change notification settings - Fork 19
Views
Since whirlwind enforces the MVC (Model-View-Controller) architecture, the inclusion and rendering of templates is smoothly integrated into every whirlwind application. By default, whirlwind uses Python mako templates for template rendering.
The /application/views directory contains the sub-directories: account, layouts, shared, site.
Contains html pages used for authentication purposes like login.html and signup.html. All other pages used for authentication should be placed in this directory.
Contains the layout pages. The use of layout pages reduces redundancy since more than one site page can be displayed using the same template. Here's an example base layout template page:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- put the title here -->
<%def name="page_title()">Put title here</%def>
<title>
${self.page_title()}
</title>
${self.head_tags()}
<%def name="head_tags()">
<!-- put meta tags tags here -->
<meta charset="utf-8">
<!-- put css files here -->
<link rel="stylesheet" href="/static/css/mycssfile.css?{Filters.version()}">
<!-- conditional comments. anyone for IE? -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5-els.js"></script>
<![endif]-->
<!-- put scripts you want to load before page load here. We recommend using some script loader -->
</%def>
</head>
<body>
${next.body()}
${self.scripts()}
<!-- put scripts you want to load during or after page load here -->
<%def name="scripts()"></%def>
</body>
</html>
The page shown above is (mostly) marked up using the mako syntax. Check out the mako syntax documentation for more information.
You might have noticed that Filters.version() was appended to a file name in the above code. Filters.version() returns the current version number of the application defined in config/settings.py. This is done to force a cache reload and is especially useful in development environment.
The command ${next.body()} calls the body function in the caller page. The caller page calls the layout page by including the layout template via the command: <%inherit file="/layouts/base.html" />. All sites pages should be caller pages. See below for an example of a site page which includes a layout page.
Several layout files can be layered on top of one another. For example, the layout page content.html is stacked on top of the layout page base.html. But remember that the every layout should have ${next.body()} which calls the body function defined in the caller page (we know there's a caller page since the layout page should have bee "inherited" from a site page).
# -*- coding: utf-8 -*-
<%inherit file="/layouts/base.html" />
### Template for content pages
<%def name="body()">
<%include file="/shared/flash_messages.html"/>
<div id="wrap" role="main">
<div id="main">
<%include file="/shared/header.html"/>
<div id="content">
<div id="content-inner">
<%def name="body_content()">
${next.body()}
</%def>
${body_content()}
</div>
</div>
</div>
</div>
<%include file="/shared/footer.html"/>
</%def>
###Shared
Contains the most common template files that'd be shared among almost all the site pages. Examples: header.html, footer.html.
###Site Contains the site pages. Site pages usually start out by inheriting a layout page. Then a body function is defined. This body function is called by the layout page later on and its contents are displayed. An example site page is shown below:
# -*- coding: utf-8 -*-
<%inherit file="/layouts/content.html" />
<%def name="body()">
<div id="page-header">
<div class="title">
Welcome to Whirlwind
</div>
<div class="subtitle">
You've successfully setup a new whirlwind app!
</div>
</div>
<div id="page-content">
<div class="body">
<a href="http://github.com/trendrr/whirlwind" target="new">Check out our docs on github.com to get started</a>
</div>
</div>
</%def>
Templates can be rendered by an instance of the subclass of the BaseRequest class. Methods for rendering templates include: render_template and render_string. For more on this method, check out the Controllers documentation.
After creating a whirlwind application and starting the application server, you'd notice that on navigating to the root page, a default page (index.html) is rendered using mako templates. This file is located in application/views/site. Here's what happens before that page is rendered:
- A request for
/is sent to the server. - Control is passed onto the site controller which has a Request Handler defined to handle a request to the root path (
/). This Request Handler simply renders the template/site/index.html. For more information on how controllers should be setup and how they work, visit the Controllers page. - Then the mako template engine pre-processes the template
index.html. If no error occurred during pre-processing, the final content is sent to the browser.
For more information on how to use mako templates, refer to the documentation here.