This is my second article about the Google App Engine.
On the previous article, I have gone through the installation/setup process, and a “Hello World” project.
Introduction
While developing web applications it is always a good practice to separate the presentation layer from the application logic. This approach is recommended for all modern web frameworks, whether that is PHP, ASP.NET, Google App Engine etc.
During the design time, different people/teams may work on each layer, i.e. web designers on the presentation layer, and programmers on the code-behind. Maintenance will also be easier, as it could only involve the update of a single layer.
In our case, the presentation layer is going to be a simple HTML file, and the application logic a Python script file.
Coding – Part 1
Create a new folder on your hard disk called “template”.
Create the “template.py” file with the following code:
import wsgiref.handlers, os
from google.appengine.ext import webapp
from google.appengine.ext.webapp import template
class MainPage(webapp.RequestHandler):
def get(self):
html_title = 'Google App Engine - Template'
html_body_text = 'This is a simple demo of the templating system.'
template_values = {
'html_title': html_title,
'html_body_text': html_body_text,
}
path = os.path.join(os.path.dirname(__file__), 'index.html' )
self.response.out.write(template.render(path, template_values))
def main():
application = webapp.WSGIApplication(
[('/', MainPage)],
debug=True)
wsgiref.handlers.CGIHandler().run(application)
if __name__ == "__main__":
main()
On the above code we are declaring two variables, named html_title and html_body_text.
The html_title will form the HTML title content, while the html_body_text is going to be printed on the HTML body.
Now, let’s include the variables on the HTML file, named “index.html”:
<html>
<head>
<title>{{ html_title }}</title>
</head>
<body>
{{ html_body_text }}
</body>
</html>
We also need to create the configuration app.yaml file with the following code:
application: template version: 1 runtime: python api_version: 1 handlers: - url: / script: template.py
Now let’s start the development web server by typing in the command prompt:
“dev_appserver.py D:\GoogleAppEngine\template”
Please replace the “D:\GoogleAppEngine\template” with the path of your “template” folder.
Point your web browser to http://localhost:8080/ , and you should see something like the following output:
Coding – Part 2
Now we are going to further improve our presentation layer by adding a CSS file.
Create a subfolder named “stylesheets” inside the “template” folder.
Create the “template.css” stylesheet file with the following code:
p {
color: #FF0000;
}
Edit the “index.html” in order to include the CSS file:
<html>
<head>
<title>{{ html_title }}</title>
<link type="text/css" rel="stylesheet" href="/stylesheets/template.css" />
</head>
<body>
{{ html_body_text }}
</body>
</html>
Add the following handler on the app.yaml file:
- url: /stylesheets static_dir: stylesheets
Save all files, refresh your browser, and you should see the following output:
Conclusion
Google App Engine template system is based on Django’s template engine, and as demonstrated above, it is quite easy to be implemented.
You can find a more complicated example on Google App Engine’s template help page, using class properties and if/else logic on the presentation layer.
It has been a while since this post but for some reason I can’t get CSS to work with the app engine. It never seems to find my folders or files. Is there a trick or something.
dev_appserver.py] “GET /stylesheets/style.css HTTP/1.1″ 404
I’m assuming that the folder where the app is located is the default root so /stylesheets would start from there.
It could be a mac problem but even when the app is uploaded to the google servers it still doesn’t work. Oddly, putting the styles into the index.html works fine too.
@Brian, in the app.yaml file, you need to add:
handlers:
- url: /stylesheets
static_dir: stylesheets
Hi Brian, i’ve the same error as Howard and i have my app.yaml file:
application: cv
version: 1
runtime: python
api_version: 1
handlers:
- url: .*
script: main.py
- url: /stylesheets
static_dir: stylesheets
html:
i think i have all css in the directory
@miguel: Try -url: /.*
Sorry, same error with:
handlers:
- url: .*
script: main.py
- url: /.*
static_dir: stylesheets
@miguel: I meant:
- url: /.*
script: main.py
- url: /stylesheets
static_dir: stylesheets
If the error persists, please include it on the next comment.
Ok with your code the error change (http 500):
Fatal error when loading application configuration:
Invalid object:
Unknown url handler type.
in “C:\AppEngineCodelab_v5\gddAppengine01\src\miguelpoyatos\app.yaml”, line 8, column 1
thanks for your help
@miguel: You are welcome
@decoding: The new error it’s very difficult,
look that thread:
http://code.google.com/p/googleappengine/issues/detail?id=20
i dont know how to solve it, i’m working in windows xp
good web decoding
OK, It’s done.
It’s only the order :
application: cv
version: 1
runtime: python
api_version: 1
handlers:
- url: /stylesheets
static_dir: stylesheets
- url: .*
script: main.py
you must put first the :
- url: /stylesheets
static_dir: stylesheets
before the :
- url: .*
script: main.py
There’s a missing tag around the {html_body_text} in the html that includes the css file. if you add it, it will show up in red
the missing tag is a <p&;gt; paragraph tag