I've had many conversations with Pebble users about the complexities of themes and the common problems that crop up time and time again are as follows.

• As new functionality is added to Pebble, some of the older themes break, particularly around the sidebar items such as recent blog entries/comments/etc.
• Theme modification is often seen as complex, particularly for the 90% case where users simply want to add/remove items from the sidebar.
• It's really easy to cause a JSP compilation error when modifying a theme, again this is particularly notable when users are modifying their sidebar items.

The real power of Pebble themes comes from the fact that they use JSP as the implementation technology. The downside of this is that Pebble themes are seen as complex and fragile. In an attempt to rectify this, I've changed the way that themes work. I know, I can hear the groans now from those of you that have recently upgraded to Pebble 2.0, but wait.

The current themes are structured as follows.

 - screen.css
 - images
 - jsp
   - template.jsp
   - sidebar.jsp

And in Pebble 2.1 this is simplified a little.

 - screen.css
 - images
 - template.jsp

Okay, so the jsp subdirectory has gone and sidebar.jsp has been inlined into template.jsp, which now appears at the top level. It's a start, but the real changes appear in the template.jsp file. Here's what it looks like for the default theme.

<%--
  The main template into which all other content is placed. The following
  objects are available for use in templates.

   ... snip ...
--%>
<template:page>

  <div id="body">

    <%-- the RSS/Atom links --%>
    <div id="feeds">
      <template:feeds/>
    </div>

    <%-- the header, containing blog name and description --%>
    <div id="header">
      <div id="blogName"><span>${blog.name}</span></div>
      <div id="blogDescription"><span>${blog.description}</span></div>
    </div>

    <%-- the linear navigation links (e.g. < Previous | Home | Next >) --%> 
    <div id="linearNavigation">
      <template:linearNavigation/>
    </div>

    <%-- the sidebar that includes the calendar, recent blog entries, links, etc. --%>
    <div id="sidebar">
      <sidebar:about/>
      <sidebar:loginForm/>
      <sidebar:adminPanel/>
      <sidebar:navigation/>
      <sidebar:archivesByMonth/>
      <sidebar:categories/>
      <sidebar:tagCloud/>
      <sidebar:recentBlogEntries/>
      <sidebar:recentResponses/>
    </div>

    <%-- the main area into which content gets rendered --%>
    <div id="content">
      <template:content/>
    </div>

    <%-- the footer, containing the "powered by" link --%>
    <div id="footer">
      <template:poweredByPebble/>
    </div>

  </div>

</template:page>

I think you'll agree, this is much simpler than it ever was before. There are no messy JSP includes, the divs are cleanly separated and the sidebar items have been turned into proper components. It's still a JSP, but the power of JSP 2.x tag files has really cleaned things up.

If you're an existing Pebble user, I would really like your feedback on this. I'll be putting some decent online help together to document theme customization but if you have some use cases that you don't think will fit into this new model, please let me know. People think JSP is a bit rubbish. I disagree.

Responses[7]

Posted by Simon Brown on 12 April 2007 10:41:00 BST #