jsr168

JSR286 Tag Library and XML Escaping

under

It always bothered me that the JSR168 <portlet:actionURL /> and <portlet:renderURL /> tags didn’t encode their HTML character entities. The lack of encoding causes your HTML 4 or XHTML 1 markup to fail automated validation. After flipping through a bit more of the JSR286 spec, it mentions that in JSR168 “the behavior in regards to XML escaping URLs written by the tag library was undefined” 1. So, some vendors may have encoded and some may not have (as of 2.7 JBoss Portal, for example, does not).

 

Well, it turns out that the JSR286 expert group noticed that and accounted for it. Section 10.4.1 defines a new container runtime option: javax.portlet.escapeXml. The option causes portlet URLs to be escaped and is true by default. This is primarily for backwards compatibility so that older portlets that dependended on unencoded URLs will work on a portlet 2.0 container.

This option and its default value should make validating your portal UI markup much easier, though it might cause one minor annoyance. Because your portlet URLs will now be encoded, you can’t trigger them directly using javascript.

For example, you wouldn’t want to call the following:

<script type="language/javascript">
var url = '<portlet:renderURL><portlet:param name="id" value="5" /></portlet:renderURL>';
window.location = url;
</script>

Because the URL above would be encoded, your ‘id’ parameter wouldn’t be passed along properly.

To avoid this, you’d want to decode the URL before accessing in through javascript. We use ExtJS on my current project, which offers a handy method for doing just that:

<script type="language/javascript">
var url = '<portlet:renderURL><portlet:param name="id" value="5" /></portlet:renderURL>';
window.location = Ext.util.Format.htmlDecode(url);
</script>

It’s always nice to see this kind of improvement in the spec; hope this is helpful for you!

The Perfect Portlet Markup

under

I thought I’d throw together a quick precursor to another post I plan on finishing in the next few days. This post is about portlets - or, how to structure the HTML markup for a JSR168/JSR286 portlet, to be more specific.

I’ve worked on theming portal user interfaces for a few years now, primarily on IBM WebSphere Portal and JBoss Portal. On WebSphere, you develop what’s called a ’skin’ - where the markup for a given portlet lives. JBoss has a similar but more granular concept called ‘renderers’. Being a big fan of the principle of semantic markup or POSH, I’ve come to think that all portlets should have the same general shell or HTML markup.

 

So, I present the perfect portlet markup:

<div class="portlet-window">
	<div class="decoration">
		<h2 class="title">portlet title</h2>
		<ul class="controls">
			<li class="skip"><a href="#skip_$PORTLET_ID">skip this window</a></li>
			<li class="mode edit"><a href="#">edit this window</a></li>
			<li class="mode view"><a href="#">view this window</a></li>
			<li class="windowstate minimized"><a href="#">minimize this window</a></li>
			<li class="windowstate maximized"><a href="#">maximize this window</a></li>
		</ul>
	</div>
	<div class="portlet-content">
		portlet content
	</div>
</div>
<a name="skip_$PORTLET_ID"></a>

You might notice this layout:

  • follows the JSR168/JSR286 naming standards for window, decoration, controls, etc.
  • marks the portlet title up as a level 2 heading; from my experience this is the ‘right’ choice for the portlet title as the portal page title itself should be the level 1 heading
  • to promote accessibility, renders actual text content in the mode/state menu anchor links (which should be internationalized and can be replaced with appropriate icon images using your css image replacement technique of choice, of course)
  • to promote accessibility, adds a skip link to the mode/state menu for skipping the content of a given portlet (this is very useful for screen readers and can be removed from the page using your css text hiding method of choice)

Note that one or more the elements in the shell may be removed. For example, sometimes portlets won’t display their portlet title, which is often the case with content-manged portlets (ideally, this would be a configuration rather than separate skin or renderer).

By the way, this post is intended to be a bit controversial; hoping to challenge my audience (if there is one =P) and maybe to come to some kind of consensus.

So what do you think? Did I get it right? What would you change or improve to this portlet markup?

Subscribe to Feed