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 and extend it with two more views so that it now looks like this:

import grok

class Webpage(grok.Application, grok.Container):

class Index(grok.View):
   pass # see app_templates/

class About(grok.View):

class HeaderFooter(grok.View):

The two new views need templates, so step out and go into the directory called app_templates. Add a template called and enter the following content:

<metal:block define-macro="standard"
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="">
  <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" />
<metal:block define-slot="body">
<div id="header">
    <h1><span>Web page</span></h1>
    <hr />

<div id="content">
  <metal:block define-slot="content">
    walk all over me

<div id="footer">
    <p>&copy; Grok.
    <a href="#">Switch to normal web version</a>


Now we need to change the template so that it references headerfooter, so change 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>


We'll also add another view called which looks like this:

<html metal:use-macro="context/@@headerfooter/macros/standard">
<div metal:fill-slot="content">

  <p>This is an example Grok application that shows the magic of layers
  and what they can be used for.</p>


To anybody who has done Zope 2 development before with macros this should be very familiar. In the 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 {

Add another stylesheet which is specific for the web called screen.css with the following content:

#content {

#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.