Personal tools

Setting up the web page

We'll first write a normal Grok application from scratch that uses macros to put together the templates.
As an example application we're going to develop a very simple site that uses macros and then later add a layer dedicated for mobile phone browsing without having to put in "if" statements in your templates to accommodate for the differences you'll want to apply.
Page 1 of 4.

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>&copy; 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.