Saturday, December 1, 2007

Using WSRP CSS classes - an example by Oracle

pencil icon, that"s clickable to start editing the post

Since I wrote my last post Styling my WSRP portlets - does these CSS classes really give us common look-and-feel? I've been looking for recommendations and best practice on this field of web design. In this post I'll list some of the best sources I've found and compare with an example by Oracle.

Semantic (X)HTML

I hadn't heard of this before stumbling upon it, but the concept i straight forward and not to far away from projects I've worked on myself. There are several good references but one of best are The Early Bird Catches the CSS: Planning Structural HTML by Virginia DeBolt (on Wise-Women). Other great sources:

Where the last one has the full crossover to microformats.

The Oracle CSS Portlet

As an effort to enable/show WSRP 1.0 interoperability several of the member of that committee has exposed both producers and some simple portal pages consuming the different producers. One of the portlets exposed by Oracle are The Oracle CSS Portlet:

Oracle sample portlet for using the CSS classes that come with the standard

which can be found alongside others on the Hosted WSRP root page with "WSRP/JSR 168 Sample Portlets". This example portlet is perfect to get an idea on how to use the classes.

Before looking into the actual markup a run through W3C's Markup Validation Service gives:This page is not Valid HTML 4.01 Transitional! - Failed validation, 9 Errors. This is not that bad and most of the errors seem minor.

In the markup there's no rule as to where the portlets start, but in this example it's not so hard. Using the great Web Eeveloper add-on to Firefox, with "View style information" (under 'CSS') it looks like this:

The Oracle CSS portlet - outline the portlet part with the webdeveloper add on to firefox

This is a very resonale guess as to where the page template stops and the portlet starts. This is also of relevance as this concerns the use of section classes.

The first part of the template until the portlet part is like:

    1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2 <HTML dir="LTR" lang="da">
    3 <HEAD>
    4 <TITLE>CSS Portlet</TITLE>
    5 </HEAD>
    6 <BODY bgcolor="#FFFFFF">
    7 <SCRIPT TYPE="text/javascript">function show_context_help(h) {,"Help","menubar=1,toolbar=1,scrollbars=1,resizable=1,width=700,height=500").focus();}</SCRIPT>
    9 <LINK REL=Stylesheet TYPE="text/css"
   10   HREF="">
   11 <A HREF="#content"><IMG SRC="/images/pobtrans.gif" ALT="Spring over navigeringslinks" border=0></A>
   12 <TABLE CELLSPACING="0" CELLPADDING="0" WIDTH="90%" align="CENTER" CLASS="OraWizBannerColor">
   13   <TR>
   14     <TD ALIGN="LEFT" width="5%" valign=TOP rowspan=2><IMG SRC="/images/logo.gif" ALT="Oracle Portal" border=0></TD>
   15     <TD ALIGN="RIGHT" valign="TOP"><IMG SRC="/images/pobtrans.gif" height=1 width=10 border=0 ALT=""> <A
   16       HREF="" class="OraWizBannerLink">Startside</A> <IMG
   17       SRC="/images/pobtrans.gif" height=1 width=10 border=0 ALT=""> <A
   18       HREF="" class="OraWizBannerLink">Builder</A></TD>
   19   </TR>
   20 </TABLE>
   21 <CENTER>
   23   <TR>
   24     <TD>
   26       <TR>
   27         <TD width="3%" class="OraBgColorDark">&nbsp;</TD>
   28         <TD width="96%" class="OraBgColorDark"><FONT class="OraGlobalPageTitle">CSS Portlet</FONT></TD>
   29         <TD class="OraBgColorDark">&nbsp;</TD>
   30       </TR>
   31     </TABLE>
   33     </TD>
   34   </TR>
   35   <TR>
   36     <TD>
   37     <TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
   38       <TR>
   39         <TD rowspan="2" valign="TOP">
   40         <TABLE border="0" cellpadding="0" cellspacing="0">
   41           <TR>
   42             <TD valign="TOP" class="OraBgColorDark"><IMG src="/images/FFFFFFsl.gif" valign="TOP" border="0"></TD>
   43           </TR>
   44         </TABLE>
   45         </TD>
   46         <TD rowspan="2" valign="TOP"><IMG src="/images/compedit.gif" valign="TOP" border="0"></TD>
   47         <TD align="right" valign="TOP" width="100%">
   48         <FORM>
   49         <TABLE border="0" cellpadding="1" cellspacing="4">
   50           <TR>
   51             <TD BGCOLOR="#999999">
   52             <BUTTON TYPE="button"
   53               onClick="javascript:window.location=''">Close</BUTTON>
   55             </TD>
   56           </TR>
   57         </TABLE>
   58         </FORM>
   59         </TD>
   60       </TR>
   61     </TABLE>
   62     </TD>
   63   </TR>
   64 </TABLE>
   65 </CENTER>
   66 <CENTER>
   68   <TR>
   69     <TD>
   70     <BLOCKQUOTE>
   71     <BLOCKQUOTE>

Aiming to to be "4.01 Transitional" is a common choice, though strict would have been more correct in terms of the HTML 4.01 specification itself. The layout is clearly controlled by a tables and not through CSS2. The double nesting in <blockquote> elements is non-semantic.

The next markup section is the portlet markup, and it comes with an abvious change from uppercase to lowercase, supporting my guess that this in fact the content provided by the portlet:

   72     <p class="portlet-section-header">This is a portlet section header - uses style "portlet-section-header"</p>
   73     <p class="portlet-section-subheader">This is a portlet section sub-header - uses style "portlet-section-subheader"</p>
   74     <p class="portlet-section-body">This is a portlet section body - uses style "portlet-section-body"</p>
   76     <p class="portlet-section-alternate">This is an alternate row within this section - uses style
   77     "portlet-section-alternate"</p>
   78     <p class="portlet-section-footer">This is a portlet section footer - uses style"portlet-section-footer"</p>
   79     <p class="portlet-font">This is regular text with in the portlet body - uses style "portlet-font"</p>
   80     <p class="portlet-font-dim">This text uses style "portlet-font-dim"</p>
   81     <p class="portlet-msg-status">This is a status message with in the portlet - uses style "portlet-msg-status"</p>
   82     <p class="portlet-msg-info">Help: This is a Help message - uses style "portlet-msg-info"</span></p>
   83     <p class="portlet-msg-error">Error: This is an error message - uses style "portlet-msg-error"</p>
   84     <p class="portlet-msg-alert">Warning: This is a warning - uses style "portlet-msg-alert"</p>
   85     <p class="portlet-msg-success">This text is a verification of the successful completion of a task - uses style
   86     "portlet-msg-success"</p>

This part of the portlet covers the basic CSS classes for section which here is though the <p> element. Next comes the table:

   88     <center>
   89     <table width="87%" border="1">
   90       <tr class="portlet-table-header">
   91         <td>This is a table heading - uses style"portlet-table-header"</td>
   92         <td colspan="2">Heading 1</td>
   93         <td>Heading 2</td>
   94         <td>Heading 3</td>
   95       </tr>
   96       <tr class="portlet-table-subheader">
   97         <td>This is a table sub-heading - uses style "portlet-table-subheader"</td>
   98         <td>Sub-heading 1</td>
   99         <td>Sub-heading 2</td>
  100         <td>&nbsp;</td>
  101         <td>&nbsp;</td>
  102       </tr>
  104       <tr class="portlet-table-body">
  105         <td>This is table body text - uses style "portlet-table-body"</td>
  106         <td>Table body text</td>
  107         <td>Table body text</td>
  108         <td>Table body text</td>
  109         <td>Table body text</td>
  110       </tr>
  111       <tr class="portlet-table-footer">
  112         <td colspan="5" align="center">This is a table footer - uses style "portlet-table-footer"</td>
  113       </tr>
  114     </table>
  115     </center>

If I were to choose I would prefer using the corresponding table elements for header, body and footer. I can't figure out if the subheader is needed or could be done by <caption> and <thead>.

The last part is an example for forms:

  116     <form>
  117     <p align="center" class="portlet-section-header">A Sample Form</p>
  119     <center>
  120     <table>
  121       <tr>
  122         <td class="portlet-form-label" colspan="2">This is a form label - uses style "portlet-form-label"</td>
  123       </tr>
  124       <tr>
  125         <td class="portlet-form-field-label">This is text for a form field - uses style "portlet-form-field-label"</td>
  126         <td><input name="textfield" type="text" class="portlet-form-input-field"
  127           value='This is user input in a text field - uses style"portlet-form-input-field"' /></td>
  128       </tr>
  129       <tr>
  130         <td class="portlet-form-label" colspan="2" align="center"><input name="Submit" type="button"
  131           class="portlet-form-button" value='This is text on a form button - uses style "portlet-form-button"' /></td>
  132       </tr>
  133     </table>
  134     </center>
  135     </form>

Like with the table part it seems redundant that the style classes repeat the element structure.

And from here it's back to the template with uppercasing:

  136     </BLOCKQUOTE>
  137     </BLOCKQUOTE>
  138     </TD>
  139   </TR>
  140 </TABLE>
  141 </CENTER>
  142 <CENTER>
  143 <TABLE border="0" cellpadding="0" cellspacing="0" width="90%">
  144   <TR>
  145     <TD><IMG src="/images/pobtrans.gif" width="1" height="8"></TD>
  146   </TR>
  147   <TR>
  148     <TD>
  150     <TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
  151       <TR>
  152         <TD align="right">
  153         <TABLE border="0" cellpadding="0" cellspacing="0">
  154           <TR>
  155             <TD align="right" class="OraBgColorDark"><IMG src="/images/FFFFFFbr.gif"></TD>
  156           </TR>
  157         </TABLE>
  158         </TD>
  159       </TR>
  160       <TR>
  161         <TD height="14" class="OraBgColorDark">&nbsp;</TD>
  162       </TR>
  163     </TABLE>
  164     </TD>
  165   </TR>
  166 </TABLE>
  167 </CENTER>
  169 </BODY>
  170 </HTML>


Semantic XHTML is considered best practice but it's hard to find in the portlet CSS classes. It is very nice that Oracle has taken the time to create an example for how the classes should be used. The missing part to conclude on is the complexity of the example and even more the richness of the design. The design chosen here is quite minimal and that might make this example more forgiving, as to which variants in the portlet markup would look right.