[Default example page]
[With related markup and style]
[With decorations]
[The Top 10 things you need to know about writing Portlets]
Since markup fragments from Portlets will be aggregated with those from multiple other Portlets into a single HTML page by the Portal, some markup rules must be obeyed by all Portlets to avoid cross-talk.
Portlets must not use the following tags:
Likewise, since the Portal takes care of the <head> element, Portlets should not use the following tags:
To help provide a common look to markup displayed in the Portal, Portlets should use the CSS classes demonstrated by the examples below, i.e., use the 'class="classname"' HTML element attribute for styling, and avoid the 'style' attribute wherever possible. [Use of something like 'style="width: 50%"' is allowed, of course.]
Also, be aware that aggregation makes a Portlet's use of URL's and Client-side names a little tricky. The Portlet Specification describes how these should be handled in markup using the Portlet Tag Library. (See Section PLT.22 of the Portlet Specification.)
Ultimately, the Portlets must all display in the full Portal, but that is too heavy-weight an application for much of the Portlet development work. Simon's PortletHarness from Section 7.3 of The Developers Guide to the IceCube Experiment Control will be a good development tool once Simon and I retrofit it to use the style classes below. In the meantime, the easiest thing to do probably is to wrap your markup with an <html><body></body>;</html> skeleton like the one used by this page.For the sake of clean living and ultimate migration to XHTML, I strongly recommend that Portlet markup be able to pass through HTML Tidy without changes. This means quotes around all element attributes, a closing element tag for every opening element tag, etc. [And, yes, I need to do some cleanup myself.]
I'm not completely happy with the way Menus are done below - they take up too much real estate, in my opinion. I'd prefer pop-up Menus if I can figure out how to handle the required JavaScript cleanly.