largeblue.pages 0.3.1

A simple approach to making a zope website's pages content managable

largeblue.pages aims to solve a fairly common, relatively simple web development requirement:

• all or some of a website’s pages need to be editable via a WYSIWYG editor (e.g.: by a client or non-technical website administrator)

• however, the site’s developer(s) most definitely do not want to edit the pages’ content via a WYSIWYG editor, they (you) want to use their (your) normal text editor and possibly version control, etc.

• some pages of the website may not be appropriate to be editable via a WYSIWYG (e.g.: where javascript is being used on a specific markup structure for a bespoke page)

• the website structure should ideally be flexible, so new pages and sections can be added recursively without re-development

largeblue.pages:

• provides Page Container and Page content objects, where pages can contain any number of sub pages and so on ad infinitum

• a Page’s content property is setup to be edited by a WYSIWYG editor (in fact, we configure and patch the default z3c.widget.tiny WYSIWYG widget to make sure it stores valid xhtml and that the output source code nesting has each element indented by 2 spaces)

• each Page and it’s html content can also be accessed by webdav (largeblue.pages uses bebop.webdav’s patching of zope.app.dav / z3c.dav to provide read and write webdav access) so that a page appears as a folder, containing a main_content.html and any number of other page folders. This way, the whole structure of pages can be edited without going near a web browser.

There are some other useful features:

• @@edit.html and @@ordering.html are custom ZMI views hung off a page that can be added to an admin skin, where the @@ordering.html (called ‘Manage Contents’) provides a custom, orderable container view based on largeblue.order, so pages can be moved up and down as well as renamed, cut pasted, deleted and added, etc.

• every Page Container has a property called ‘index’ that, at any time, contains a snapshot of the current pages structure (it’s updated whenever a Page created, modified or deleted event happens) - note, you can have multiple page containers are they all maintain their own index

• the obj.__name__ of each page is forced to be a sane ‘no cross browser href issues’ snippet of text

• pages have a flag attribute, intended to be referenced in a view class (see ./browser/index.py) to control whether they are ‘simple’ pages which just render the managable content or bespoke pages that need to be special cased

To use largeblue.pages, you’ll just need to add the package to your site.zcml (or equivalent) (include the largeblue.pages package and include the overrides.zcml as overrides).

Anyway, let’s see it in action.

>>> import transaction, pprint
>>> from zope.component import createObject
>>> from zope.event import notify
>>> from zope.lifecycleevent import ObjectCreatedEvent
>>> from zope.lifecycleevent import ObjectModifiedEvent
>>> from bebop.ordering.interfaces import IOrdering, IOrderable
>>> from largeblue.pages.interfaces import IPage, IPageContainer, IFile
>>> from largeblue.pages.page import PageContainer

Create a page container.

>>> app['pages'] = PageContainer()

Create a page.

>>> page1 = createObject('largeblue.pages.Page')
>>> page1.__name__ = 'page1'
>>> page1.title = u'Page 1'
>>> for item in page1:
...     print item
...
>>> page1.content
u''
>>> page1.flag
u'Static'

Add it to the container and fire a created event.

>>> app['pages']['page1'] = page1
>>> notify(ObjectCreatedEvent(page1))

And we see it now contains a file called html_content.html and that this is editable via the Page’s content property.

>>> page1 = app['pages']['page1']
>>> for item in page1:
...     print item
...
main_content.html
>>> page1['main_content.html'].contentType
'text/html'
>>> page1.content
'<div>Under construction</div>'
>>> page1['main_content.html'].data
'<div>Under construction</div>'
>>> page1['main_content.html'].data = '<div>Foo bar</div>'
>>> page1['main_content.html'].data
'<div>Foo bar</div>'
>>> page1.content
'<div>Foo bar</div>'
>>> page1.content = '<div>Under construction</div>'
>>> page1.content
'<div>Under construction</div>'
>>> page1['main_content.html'].data
'<div>Under construction</div>'

Let’s look at the Page Container’s index property:

>>> pages = app['pages']
>>> for item in pages:
...     print item
...
page1
>>> pages.index
[{'title': u'Page 1', 'pages': [], 'label': u'page1'}]
>>> page2 = createObject('largeblue.pages.Page')
>>> page2.__name__ = 'movies'
>>> page2.title = u'Movies'
>>> pages['movies'] = page2
>>> for item in pages:
...     print item
...
movies
page1
>>> notify(ObjectCreatedEvent(page2))
>>> pages.index
[{'title': u'Page 1', 'pages': [], 'label': u'page1'}, {'title': u'Movies', 'pages': [], 'label': u'movies'}]

We can nest Pages within Pages:

>>> page3 = createObject('largeblue.pages.Page')
>>> page3.__name__ = 'horror'
>>> page3.title = u'Scary Horror Films'
>>> notify(ObjectCreatedEvent(page3))
>>> pages['movies']['horror'] = page3
>>> page4 = createObject('largeblue.pages.Page')
>>> page4.__name__ = 'texas'
>>> page4.title = u'The Texas Chainsaw Massacre'
>>> notify(ObjectCreatedEvent(page4))
>>> pages['movies']['horror']['texas'] = page4

Check the index again:

>>> pprint.pprint(pages.index)
[{'title': u'Page 1', 'pages': [], 'label': u'page1'},
 {'label': u'movies',
  'pages': [{'label': u'horror',
             'pages': [{'label': u'texas',
                        'pages': [],
                        'title': u'The Texas Chainsaw Massacre'}],
             'title': u'Scary Horror Films'}],
  'title': u'Movies'}]

The idea is that the index can be referenced by a dynamic navigation, say, without having to traverse the Pages’ heirarchy every time. Key to this is the ability to order the pages, so you can control the order in which the navigation items are displayed.

We’ve patched bebop.ordering to achieve just this. Let’s look at the root container’s order:

>>> IOrdering(pages).getNames()
[u'page1', u'movies']
>>> IOrdering(pages).keys()
[0, 1]
>>> IOrdering(pages).upOne([1])
>>> IOrdering(pages).getNames()
[u'movies', u'page1']
>>> notify(ObjectModifiedEvent(pages))
>>> pprint.pprint(pages.index)
[{'label': u'movies',
  'pages': [{'label': u'horror',
             'pages': [{'label': u'texas',
                        'pages': [],
                        'title': u'The Texas Chainsaw Massacre'}],
             'title': u'Scary Horror Films'}],
  'title': u'Movies'},
  {'title': u'Page 1', 'pages': [], 'label': u'page1'}]

There’s more in the largeblue.order.README.txt on this, basically what we’ve done is limited the orderable contents of an Ordering container to only include pages:

>>> for item in page3:
...    print item
...
main_content.html
texas
>>> IOrdering(page3).getNames()
[u'texas']

Plus we’ve extended the functionality of the ordering container view to accomodate the ‘normal’ actions too. This way, an admin skin ZMI layer need only expose the @@edit.html and @@ordering.html views on the Page, thus hiding anything other than Pages in the Page container view (e.g.: main_content.html, .svn files, etc.).

To connect via webdav to the Pages structure, simply connect to your site instance, eg: http://localhost:8080 and, voila, you’ll see a structure like:

• pages

  • page1

    • main_content.html

  • movies

    • main_content.html

    • texas

      • main_content.html

Edit the main_content.html files to edit the main content for the pages. Be careful though - don’t rename it and don’t save invalid xhtml. The point being that only a competant developer who knows this should be given webdav access.