Using Zope with Amaya, Dreamweaver, and Other WYSIWYG Tools

Zope is an object-oriented web application server that is managed through a web interface. This interface allows you to add and manipulate Zope objects. Zope's managment interface is one of its most powerful features, but there is one area where using Zope's managment interface is difficult: editing templates.

Using Zope with Amaya, Dreamweaver, and Other WYSIWYG Tools

To edit a template through Zope's managment interface, you have to work in an HTML text area. For large templates, or lots of changes to a template, or templates containing complex, formal markup, the browsers text area becomes very frustrating for someone used to working with a more advanced text editor.

To enable users to use their own editing tools, Zope supports the HTTP PUT method, FTP, and WebDAV protocols for editing templates. Based on its support for HTTP PUT, HTML WYSIWYG editing tools like Dreamweaver and Amaya becomes an integral front-end HTML editor for Zope.

This is a great feature, but it isn't really news, and it's not what this article is about; Zope, Amaya and Dreamweaver have been able to do this for a long time. What really makes Zope work with editing tools in a powerful, innovative way are Zope Page Templates.

Page templates are HTML template objects in Zope. Page templates define presentation for dynamic web pages. They allow you to define a layout in HTML filled with dummy information that is later rendered into a dynamic web page when a visitor to your site looks at the template.

The template is never mangled or munged by a server side programming language like PHP, ASP, or Zope's own predecessor template language, DTML. The template is allways valid HTML, and it allways represents a mockup of what your dynamic page will actually look like.

The general procedure is to "mock up" a template with your WYSIWYG HTML editor. This mockup should look like what you really want your dynamic page to look like, but with "dummy" information in the page. For example, if you wanted to create a dynamic search results page, you would put fake search results into the mockup.

What brings the template alive is the sprinkling of special XML namespace attributes in your HTML page to specify which parts of the page are dynamic. These xml namespace attributes are "rendered" when the page is viewed by a user, and the dummy information in your page is replaced by the real dynamic information.

An example of using page templates with Zope is creating a simple file library with one template, one line of python code, and some files.

First, create a mock up of a file library page using your editor. The examples in this article were made with Amaya. This mockup doesn't need to overdo it, it just shows some dummy information. For example, here is a mock up of a file library that contains one file:

    <html>
    <head>
      <title>The title</title>
    </head>
    <body>
    <table border="1">
      <tbody>
        <tr>
          <td><h1>The Title</h1>
          </td>
        </tr>
        <tr>
          <td><p>Welcome to my File library.</p>
            <table border="1">
              <tbody>
                <tr>
                  <td>Name</td>
                  <td>Type</td>
                  <td>Size</td>
                  <td>Last Modified</td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                  <td><a href="file_url">Dummy.file</a></td>
                  <td>text/html</td>
                  <td>6K</td>
                  <td>Apr 23, 2001</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td>Thank you for visiting.</td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>

Now, log into your Zope and create a folder called FileLib. In this folder, create a page template called index_html by selecting Page Template from the add menu, specifying the id index_html in the form, and clicking Add.

Now, with your editor, save the above HTML to the URL http://your.zope/FileLib/index_html/source.html. Notice that the URL to save the index_html page ends in source.html. Because page templates are dynamic, you need a way to edit the raw source of the template, unrendered by the page template language. Appending source.html to a page template gives you this raw source.

Now that you've saved the template, you can go back to Zope and click on index_html and then click on its Test tab to view the template. It looks just like it should, so everything is going well.

Now the magical part of page templates. Page templates allow you to create dynamic pages, based on your mockup, without munging the original HTML. This means that a designer can mockup a site, a programmer can add dynamic behavior without breaking the HTML, and the designer can then go back and revise the mockup, without having to understand what the programmer did.

For example, let's tweak the above HTML and add some dymaic magic. First, we want the title of the template to be dynamic. In Zope, you'll notice that the page template has a title form field that you can fill in. Instead of being static HTML, we want Zope to dynamicly insert the page templates title into the rendered version of the template. Here's how:

    <html>
    <head>
      <title tal:content="template/title">The title</title>
      <meta http-equiv="Content-Type" content="text/html">
    </head>

Now go to Zope and change the title of the index_html page template. After saving that change, click the Test tab. As you can see, the page template dynamicly inserted the title of the template object in the output of the template.

Notice the new content tag attribute in the tal xml namespace. TAL stands for Template Attribute Language, and is best defined in the following simple tutorial. This attribute says to "replace the content of this tag with the variable 'template/title'". In this case, template/title is the title of the index_html page template.

The next bit of magic is to build a dynamic file library that shows you all the File objects in the FileLib folder.

To start, you need to write just one line of Python. Go to the FileLib folder and create a Script (Python) in that folder. Give the script the id files and click Add and Edit. Edit the script to contain the following Python code:

    return container.objectValues(['File'])

This will return a list of any File objects in the FileLib folder. Now, edit your index_html page template and add some more tal attributes to your mockup:

    <body>
    <table border="1">
      <tbody>
        <tr>
          <td><h1 tal:content="template/title">The Title</h1>
          </td>
        </tr>
        <tr>
          <td><p>Welcome to my File library.</p>
            <table border="1">
              <tbody>
                <tr>
                  <td>Name</td>
                  <td>Type</td>
                  <td>Size</td>
                  <td>Last Modified</td>
                </tr>
              </tbody>
              <tbody>
                <tr tal:repeat="item container/files">
                  <td><a href="item/absolute_url"
                          tal:attributes="href item/absolute_url"
                          tal:content="item/getId">Dummy.file</a></td>
                  <td tal:content="item/meta_type">text/html</td>
                  <td tal:content="item/getSize">6K</td>
                  <td tal:content="item/bobobase_modification_time">Apr 23, 2001</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td>Thank you for visiting.</td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>

The real interesting part is the tal:repeat attribute on the tr HTML tag. This attribute tells the template to iterate over the values returned by "container/files' (the Python script you created) and create a new table row for each of those files. During each iteration, the current file object being iterated over is assigned the name item.

The cells of each row all have tal:content attributes that describe the location of the data that should go in each cell. During each iteration through the table row loop, the id, URL, meta_type, size and modification times replace the dummy data in the rows.

This data comes from the item object by calling Zope API methods on what we know is a file object. The methods item/absolute_url, item/getId, item/meta_type, item/getSize, item/bobobase_modification_time are all standard API functions that are documented in Zope's online help system.

Go to Zope and test this script by first uploading some Files into the FileLib folder. This is done by selecting File from the add menu and clicking on the upload form button on the next screen. After uploading your file, you can just click Add. If you do not specify an id, then the filename of the file you are uploading will be used.

After uploading some files, go to the index_html page template and click the Test tab. Now, you can see the page template has rendered a very simple file library with just a few HTML tag attribute changes. You can see the rendered version here . Here is the complete index_html page template:

    <html>
    <head>
      <title tal:content="template/title">The title</title>
    </head>
    <body>
    <table border="1">
      <tbody>
        <tr>
          <td><h1 tal:content="template/title">The Title</h1>
          </td>
        </tr>
        <tr>
          <td><p>Welcome to my File library.</p>
            <table border="1">
              <tbody>
                <tr>
                  <td>Name</td>
                  <td>Type</td>
                  <td>Size</td>
                  <td>Last Modified</td>
                </tr>
              </tbody>
              <tbody>
                <tr tal:repeat="item container/files">
                  <td><a href="item/absolute_url"
                          tal:attributes="href item/absolute_url"
                          tal:content="item/getId">Dummy.file</a></td>
                  <td tal:content="item/meta_type">text/html</td>
                  <td tal:content="item/getSize">6K</td>
                  <td tal:content="item/bobobase_modification_time">Apr 23, 2001</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td>Thank you for visiting.</td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>

One of the great benefits of page templates is that you can now send this page template back to your HTML designers who can then make it as fancy as they want using WYSIWYG tools. As long your designers, and their HTML editors, don't mess with the special tal attributes, the mockup page will still be dynamic when the HTML designers are done working with it.

The example in this article was made using the Zope managment interface to create the objects and edit the python code, and Amaya to edit the page template mockup and TAL attribute programming.

Comment

Can't figure out how to save 'source.html'

Posted by: kwint at 2005-01-28

I'm trying to do this exercise using DreamWeaver and Zope, connected by WebDAV. Here are your steps and how i tried to carry them out:

"First, create a mock up of a file library page using your editor." OK, so I open a new page in DW and paste your text into it.
"Now, log into your Zope and create a folder called FileLib. In this folder, create a page template called index_html by selecting Page Template from the add menu, specifying the id index_html in the form, and clicking Add." Done.
"Now, with your editor, save the above HTML to the URL http://your.zope/FileLib/index_html/source.html. Notice that the URL to save the index_html page ends in source.html."

I don't know how to do that last step. That's where I'm stuck. I have tried the following:

FIRST TRY - Putting it into Zope fromDreamWeaver: In the "Remote View" of my DreamWeaver "Files" browser pane, I see the folder FileLib and the file index_html inside of it. But index_html is not (from DW's view) a folder, so I can't save the file source.html into index_html. I can't find any other way from within DW to do a Save or Put to the URL http://myZope/FileLib/index_html/source.html.

SECOND TRY - Pulling it from DW into Zope. From DW, I save source.html into my lopcal copy as a file within folder FileLib. Then I PUT this into Zope. So in Zope it shows up as a page template in folder FileLib - a sibling of index_html. I can view the rendering of source.html just fine using ITS Test tab, but if I follow your instruction and "go back to Zope and click on index_html and then click on its Test tab to view the template" the result is not "It looks just like it should, so everything is going well." Rather, what I see is the default boilerplate that comes up with every newly created page template. In other words, the index_html and the source.html that I have created are not related in the way that enables the latter to provide the "source" for the former.

So it's hard to see where I should insert the "dynamic magic" code. And indeed, when I do insert it into source.html, it does nothing. That is, the title that shows in the browser's title bar is just the static content of the "title" tag.

Replies to this comment

Can't figure out how to save 'source.html' (Posted by racingpitoune at 2005-02-01)