Setting up the web page
The first step is to install a new Grok project with grokproject. The name of the project is going to be called "Webpage":
$ grokproject Webpage $ cd Webpage
There's no real code written yet but if you want to check that the setup worked you can start Zope with this command:
$ ./bin/zopectl fg
This will start Zope on port 8080 and the Grok administration interface should now be available at <http://localhost:8080/>. The next step is to get started coding. Go into the newly created package:
$ cd src/webpage
Start editing the file app.py and extend it with two more views so that it now looks like this:
import grok
class Webpage(grok.Application, grok.Container):
pass
class Index(grok.View):
pass # see app_templates/index.pt
class About(grok.View):
pass
class HeaderFooter(grok.View):
pass
The two new views need templates, so step out and go into the directory called app_templates. Add a template called headerfooter.pt and enter the following content:
<metal:block define-macro="standard"
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web page</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css"
tal:attributes="href static/style.css" />
<link rel="stylesheet" type="text/css" media="screen"
tal:attributes="href static/screen.css" />
</head>
<body>
<metal:block define-slot="body">
<div id="header">
<h1><span>Web page</span></h1>
<hr />
</div>
<div id="content">
<metal:block define-slot="content">
walk all over me
</metal:block>
</div>
<div id="footer">
<p>© Grok.
<a href="#">Switch to normal web version</a>
</p>
</div>
</metal:block>
</body>
</html>
</metal:block>
Now we need to change the index.pt template so that it references headerfooter, so change index.pt to look like this:
<html metal:use-macro="context/@@headerfooter/macros/standard">
<div metal:fill-slot="content">
<h2>Welcome to Web page</h2>
<p>This is the front page for the Web page.</p>
</div>
</html>
We'll also add another view called about.pt which looks like this:
<html metal:use-macro="context/@@headerfooter/macros/standard">
<div metal:fill-slot="content">
<h3>About</h3>
<p>This is an example Grok application that shows the magic of layers
and what they can be used for.</p>
</div>
</html>
To anybody who has done Zope 2 development before with macros this should be very familiar. In the headerfooter.pt template we referenced a couple of external stylesheets. To add them you need to create a directory called static in the package sitting alongside the directory called app_templates:
$ mkdir static
In it, create a one CSS file called style.css with the following content:
body {
font-family:"Lucida Grande",Geneva,Arial,sans-serif;
}
h1, h2, h3, h4 {
color:#333333;
}
Add another stylesheet which is specific for the web called screen.css with the following content:
#content {
padding:10px;
background-color:#efefef;
}
#header h1 {
width: 419px;
height: 73px;
background-image: url(webpage-logo.png);
}
#header h1 span {
display: block;
width: 0;
height: 0;
overflow: hidden;
}
We're using a image replacement technique here to load a fancy image to load a logo into our design, so you need an image in the static directory called webpage-logo.png
That's all you need to write a simple application in Grok. Now start Zope again and add an instance of this application. Call it app and check that everything is working on <http://localhost:8080/app> and <http://localhost:8080/app/about>
In the next step we'll add the layer for mobile phones.
