Base Template
To integrate all the tools that we are going to use, we first need to create an html template which links to the Javascript and CSS files. A convenient way of doing this in Django templates is to define a base template with all of the necessary linkages. The base template will then be extended by other templates to get all linkages.
First, let us create the 'templates' directory.
$ mkdir templates
Inside the 'templates' directory, create the 'base.html' file. Put the following code inside 'base.html'.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
<header>
{% block header %}{% endblock %}
</header>
<div id="contentwrapper">
{% block content %}{% endblock %}
</div>
<footer>
{% block footer %}{% endblock %}
</footer>
</body>
</html>
The 'base.html' file is the base Django template which would be extended by all our other templates. Highlighted above are the block areas wherein other templates can fill in their custom code.
Test the Base Template
To be able to test the 'base.html' template, let us make another template that extends it. Also in the 'templates' folder, create the 'main.html' file and put the following code.
{% extends "base.html" %}
{% block content %}
Hello World!!!
{% endblock %}
The above code fills in the defined content code block in 'base.html' with the "Hello World!!!".
Let us then create a request handler to display the 'main.html' template. We do this in 'main.py' in the root directory of our application. We edit the 'main.py' file to look as follows.
#!/usr/bin/env python
from google.appengine.ext import webapp
from google.appengine.ext.webapp import util
import os
from google.appengine.ext.webapp import template
class MainHandler(webapp.RequestHandler):
def get(self):
path = os.path.join(os.path.dirname(__file__), 'templates/main.html')
self.response.out.write(template.render(path, {}))
def main():
application = webapp.WSGIApplication([('/', MainHandler)],
debug=True)
util.run_wsgi_app(application)
if __name__ == '__main__':
main()
Hightlighted in the code above are the changes.
Now running the web application and accessing http://localhost:8080/ would show the result of our changes.
Linking the Javascript Libraries
Now that the base template is working, its time to add integrate the Javascript libraries we would be using. To keep our project folder clean, lets create two folders, one to contain the Javascript files and another to contain the CSS files. Lets name this folders as 'js' and 'style'.
application: basicrtlist
version: 1
runtime: python
api_version: 1
handlers:
- url: /style
static_dir: style
- url: /js
static_dir: js
- url: .*
script: main.py
Now lets add the library files to the two directories. With regards to Jquery, lets just use the Google CDN, so we don't have to download any files. For Evently, download the files from its github page, https://github.com/jchris/evently. The important files for Evently are the following.
- jquery.evently.js
- jquery.mustache.js
Put the files above into the 'js' folder.
Note: the jquery.pathbinder.js file should not be included above
For Jqueryui, download the complete package for any theme. In my case, I prefer the smoothness theme. The important files for Jqueryui are the following.
- jquery-ui-1.8.14.custom.min.js
- the CSS and images directory
Copy the Javascript file to the 'js' folder and copy the CSS files and the images to the 'style' directory.
After setting up the files, lets modify the 'base.html' to link to all this libraries.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link type="text/css" href="/style/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
</head>
<body>
<header>
{% block header %}{% endblock %}
</header>
<div id="contentwrapper">
{% block content %}{% endblock %}
</div>
<footer>
{% block footer %}{% endblock %}
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="/js/jquery.evently.js"></script>
<script src="/js/jquery.mustache.js"></script>
<script src="/js/jquery-ui-1.8.14.custom.min.js"></script>
{% block addscript %}{% endblock %}
</body>
</html>
Highlighted above are the necessary changes to link to the libraries. I also added a new block to allow the insertion of some additional Javascript files.
Next Post
That's all for this post. In the next post, we'll start writing code.
That's all for this post. In the next post, we'll start writing code.
No comments:
Post a Comment