Traditionally one might use dialog boxes to ask the user a question to which she must respond (e.g. with an “Ok” or “Cancel”) but their use can extend beyond this. For instance I’ve used a dialog to show a mega drop-down menu; i.e. clicking a link opens a dialog box with a list of categorised links.

JQuery’s default behaviour for closing dialog boxes is not unreasonable: the user must click on the “Close” button (e.g. in the form of text or an “x”) or hit the escape key. However it’s possible you may want to provide more options for your users to close a box by simply clicking outside it.

I puzzled over this and didn’t get very far with Googling but came up with the following solution which seems to work.

When your dialog is created, a div with the class “ui-widget-overlay” is also created which “greys out” the background allowing the user to fully focus on the dialog. You can use this as a hook to add your dialog closing code, e.g.


$(".ui-widget-overlay").live("click", function() {  $("#quick-links-modal").dialog("close"); } );


In this case my dialog has the ID “quick-links-modal”. NB you need to use the “live” event (rather than “click” etc.)  in order to bind the event to your dialog before the dialog has been initiated.

Veda Williams‘ Plone 3 Theming (Packt, 2009) [Amazon UK | Amazon US | Packt] is a useful reference for anyone involved in customising the look and feel of their Plone-based website. Used alongside the various online resources on the plone.org website, particularly the Plone Theme Reference,  it should ease  most of the pain that Plone themers experience. Unfortunately (and this is not a criticism of the author), the book is let down by some poor copy-editing. It also contains a number of errata, which the author is gathering on the plone.org website.

The book is broken down into fifteen chapters, the most useful of which I found were chapters seven to twelve which deal with the day-to-day business of Plone theming.  These chapters cover customising viewlets and portlets, an overview of the Zope templating language ( ZPT), the creation and installation of a Plone theme, template changes, custom page views and theming tips. Although I’ve done a fair amount of Plone theming, I still find it quite esoteric and complex so it’s certainly very useful to have these chapters to refer back to.

Chapter fifteen, written by Alex Limi, gives an overview of the future of Plone theming using products such as collective.xdv and Deliverance. These seem an ultimately saner way to proceed and should allow non-Plone specialists to theme a site without getting too bogged down in Plone specifics. This article is also freely available on the Plone website where it will be updated as the project develops.

I did wonder if the second chapter was really necessary — this provides an overview of the main graphic design, browser and text editing tools. I imagine that most web designers and developers already know about these and the complete beginner would be encouraged to to stay away from Plone until they are a little more experienced.

That aside, the only real complaint I have about the book is the quality of the copy-editing. I think the text would in places benefit from a little slimming down or rephrasing. I occasionally struggled with some of the explanations , although it must be borne in mind that Plone 3 theming is complex so is by its very nature difficult to explain in simple terms. Some other examples: it’s probably not necessary to have sentences like, “now what, you ask?” in a tutorial book and I’m not sure why there is a lengthy code sample from Plone 2 on pages 129-30 which is really only produced to show how things were done the “old way”.

Anyone who has been involved in Plone theming will know how hard Veda Williams has worked on it: in addition to this book, she coordinated the Out of the Box Plone Themes project. For her work I’m sure she has the gratitude of every Plone themer. Hopefully subsequent editions of the book will address the editorial issues and errata.

Posted via email from What’s this for?

 

What I write about on my blog apparently, originally uploaded by reynard.

I generated this from Wordle.net — a tag cloud of what I write about on my blog apparently. As you can see, my vocabulary is impressive and varied, with words such as “things” and “good” appearing prominently.

Look out though, because “possibly, Norman’s took mobile”.

Last week I got hold of Designing Web Interfaces by Bill Scott and Theresa Neil. They’ve published all their examples on Flickr which is a handy reference.

On Tuesday I checked out some of the buzz from the SXSW interactive awards. Lost Zombies was terrific fun — a project to build a Zombie documentary / drama via a community (what’s with Zombies at the moment? People love them — check out Survive the Outbreak too). Anyway, this is a really interesting idea, although one I imagine which might end up looking a bit like the film in Son of Rambow when the entire school starts to get involved if the producers aren’t too careful.

We Tell Stories, another winner from SXSW is a digital fiction site produced by Penguin. I love the idea of things like this, although there is a tendency for any kind of hypertext fiction to go down the “Fighting Fantasy” books route. If you’re too young to know what I’m talking about or were too busy talking to girls in the mid-Eighties, these books were adventures in which you got to make a choice of what you wanted to do at key points in the story (if you decide the kill the evil witch of Swqkssx then go to page 100 etc.).

On Wednesday I learned why the Japanese don’t like the iPhone (too basic for very sophisticated mobile users apparently, well, amongst other reasons). Moving forward to Friday I got back into serious Web Development land and started enjoying the wonders of CSS border radius (Firefox and Webkit only, naturally). You might notice a couple of rounded borders on this site, although I tried not to go too mad, difficult though it was. Also, I checked out a couple more typography and grid layouts site. Because you can never have too much of that kind of thing can you?

Saturday’s link was a only child and came courtesy of Twitter in response to me pimping my post about useful usability sites I’ve been looking at recently: Johnny Holland: it’s all about usability. A site “exploring the interactions of experience design” no less. All articles are written in the voice of the eponymous Johnny, so there you go. One I will be dipping into I should imagine.

So that’s it for this week. As always, these links are brought to you via the Internet and my Delicious bookmarks.

Portlets.xml

One of the great things about generic setup is that you can configure your site through the web and then export your settings as a series of xml files to your filesystem theme product. However, configuring my portlets and then exporting the resulting portlets.xml file caused some problems when re-installing the product.

I’d customised my navigation following the steps outlined in the article Customising navigation in Plone 3. This was fine. But when I re-installed my theme product containing an exported portlets.xml file I got a “ConstraintNotSatisfied” error. I didn’t get very far with finding a solution to this on Google, but by trial and error found out that this disappeared if I removed the following from the <assignment name=”navigation” …/> directive:

Secondly, default portlets (login, news, recent etc.) I’d removed via “manage portlets” weren’t reflected in my portlets.xml file so I had to enter this manually into my portlets.xml file:

CSS Registry

To ensure that the order of CSS files in the CSS Registry was honoured I had to enable the auto grouping property (which didn’t exist in Plone 2.5.3). In the cssregistry.xml you can set this via:

<object name=”portal_css” meta_type=”Stylesheets Registry” autogroup=”True”> … </object>

The order seemed to go a bit haywire again if I enabled debug mode in the CSS Registry.

More positive things

It’s pretty straightforward to override viewlets for different content types. For instance, I didn’t want the breadcrumb trail to appear on my home page. In my browser/configure.zcml I simply added this directive:

In the “for” attribute I specify the interface of the content type I want this to apply to. The template, “nopath_bar.pt” is simply an empty template in my browser directory.

Lastly, Gloworm came in really handy as did plone.reload (although I found this a little unpredictable at times).

Work and related stuff

• Get a few more Plone 3 sites under my belt
• Finish off my User Interface Design and Evaluation course (well, I’ve got to do this, I’ve not got a huge amount of choice in the matter) and really get to grips with all those HCI concepts
• Roll up my sleeves with Flash again
• Get another theme or two out for the Out of the Box Plone themes project
• Go to the Plone conference in Budapest this year

Non-work stuff

• Do my ‘52 photos’ project — a photo a week for 2009
• Maybe release Hamnavoe or any other Plone theme I design for Wordpress
• Get better at Photoshop
• Get through my German course
• Do some more writing in some form or other

The lovely folks at SWFObject helped to identify why this was happening — nothing to do with SWFObject at all but the fact that Flash Player 10 implements some new security “features”. I managed to isolate it to the fact that Plone serves up ATFiles with the header, “Content-Disposition: attachment”. Flash Player 10 ignores files served up with this header, so you need to override this and set it to “Content-Disposition: inline;”.

I came up with this solution which may not be overly elegant but at least it works. I created a skin-level Python script that sets response headers before returning the file:

showflash.py

request = container.REQUEST
RESPONSE =  request.RESPONSE
flashvid = request['flashvid']
cd = 'inline; filename=%s' %(context.id)
RESPONSE.setHeader('Content-Disposition', cd)
return context[flashvid]

Then, when I embed the video with SWFObject I call it thus,

<script type="text/javascript">
   swfobject.embedSWF("&dtml-portal_url;/path/to/flash/showflash?flashvid=myflash.swf", "my-dom-id", "435", "290", "9.0.115");
</script>

This may be better handled by a product like Plone4Artists Video but it certainly works as a fix for us.

I’ve downloaded Chrome and am playing around with it at the moment (all in the name of work obviously).  I’m pretty impressed so far, and am particularly enjoying the “Application shortcuts” which allow you to create shortcuts to websites on your desktop. OK, nothing new in that, but they open in self-contained minimal windows which make them seem more like desktop applications. I’ve set one up for Gmail, which I have to say is also running very fast. Nice work.

Let’s hope we get a Mac version soon.