Personal tools
You are here: Home Documentation Tutorials Using YUI on Grok Setting up the basics

Setting up the basics

Adding the requirements and setting up a basic layout
In this tutorial you'll be learning how to use the Yahoo! User Interface Library, or YUI in short in your Grok project. YUI is a JavaScript and CSS library providing all sorts of handy components that you can use to make you site work an look better without too much effort, and in a cross-browser compatible way. In the process, you'll also be learning some basic uses of megrok.layout, megrok.navigation and JSON.
Page 1 of 6.

Requirements

We will be using YUI 2. More details on the YUI website [1]

The main packages that we will use are

but along the way, we'll also be using

You should know something about layouts, and understanding layers is a plus for some part of the tutorial.

Let's first set up a basic project to get going. Create a new grok project (see other docs on how to do that) and edit the file 'setup.py'. Add these lines at the bottom of the install_requires section (under # Add extra requirements here):

'hurry.yui',
'megrok.resource',
'megrok.layout',
'megrok.navigation',
'megrok.pagetemplate',

If you are using Grok 1.0 and you would run bin/buildout now, you would get version conflicts on some packages because they were developed for Grok1.1 and up. Adapting your 'buildout.cfg' should solve this:

[versions]
zope.site = 3.5.1
megrok.layout = 0.9
megrok.pagetemplate = 0.3

Now run bin/buildout again to download the needed packages.

Main Layout, Reset and Grids

Layout.pt

We will use megrok.layout for our main layout as it gives a nice separation between the layout template and the view templates. Without megrok.layout, you would be either redefining your site's layout in each view or create a macro that you call from each view, so each view will need to know what layout you will be using.

With megrok.layout you just define a layout template and you indicate with a structure view/content TALES expression where the view template should be rendered. You then derive your views from megrok.layout.Page instead of grok.View, and the framework automatically looks up the layout for the current layer and renders your view inside it.

Enough talk, let's get cracking, Mr Bond!

Let's start by defining the actual template first. Create a file called 'layout.pt' in the app_templates dir.

<html xmlns:tal="http://xml.zope.org/namespaces/tal">
<head>
   <title>YUI Demo</title>
   <link rel="stylesheet" type="text/css" tal:attributes="href static/style.css" />
</head>
<body>
<div id="doc" class="yui-t7">
   <div id="header" role="navigation">Navigation will go here!</div>
   <div id="body" role="main">
        <div class="yui-g" tal:content="structure view/content">
        </div>
   </div>
   <div id="footer" role="contentinfo">The Grok YUI demo</div>
</div>
</body>
</html>

Create a 'style.css' file in the 'static' dir:

html, #footer {background-color:#eee;}
body {margin:0;}
#doc {background-color:white;}

We created a basic layout with a link to a stylesheet, and a basic Grid by defining the main div-element to be of class yui-t7. The astute reader may have noticed that I did not refer to any YUI CSS or javascript file. This is where hurry.yui and megrok.resource come in!

Megrok.layout and hurry.yui

Create a new file called 'layout.py' alongside the 'app.py' file:

import grok
from megrok import layout
from zope.interface import Interface
from hurry import yui

grok.templatedir('app_templates')

class Layout(layout.Layout):
    grok.context(Interface)

    def update(self):
        yui.reset_fonts_grids.need()
        yui.base.need()

Hurry.yui is a 'resource library' based on hurry.resource. Hurry.resource implements a quick way of defining which parts of your code need specific resources: simply write <resource>.need() and the library keeps track of all the necessary resources for the current request. This also means that you use need() statements inside methods, unlike grok directives that apply at class level.

In the update method we specify that our layout needs Reset, Fonts, Grids and the Base CSS components from the YUI lib. Reset, Fonts and Grids can be 'rolled up' in one statement because those are parts that are very commonly used in tandem. Reset overwrites all browser default styling to a common set, so your site looks the same, no matter what browser you use, even without specifying any styles yourself. Fonts does this for fonts specifically, and Grids predefines some typical site layouts you can use (check out the YUI Grid Builder tool to see what you can do with it). Base defines some basic styles.

Megrok.layout and megrok.resource

'OK, but defining your requirements, doesn't include them', I hear you thinking. It doesn't, indeed.

Enter megrok.resource. This package uses hurry.zoperesource, which will override the default Request object with a special one that will add the needed resources to the <head> tag of your HTML just before rendering. Kind of magic...

Before you can actually try it out, we should redefine the default index page. Edit 'app.py' and change the index view to

from megrok import layout

class Index(layout.Page):
    pass # see app_templates/index.pt

and the 'index.pt' template to

<h1>YUI demo</h1>

<p>This project demonstrates how to use the YUI library inside a Grok Project.</p>

The Result

Now fire up your server, add your app and browse to it.

It should look like this:

site_p1.jpg

You see from the code that the view never refers to the layout, yet when rendered, it becomes part of your layout.

Congratulations, you got YUI working under Grok!

[1]The YUI website: http://developer.yahoo.com/yui/