Page Comparison

...

Reference Information

• Naming

...

• convention

...

• Namespace

...

Best Practices

...

To provide a central location to discuss naming conventions to be used for both channels/portlets and uPortal themes. Ideally, I think this would become a living/working document that developers could use to:

• document current practices
• provide a forum to discuss standard conventions for markup and style

Please contribute any comments or additions you may have if this is something you are interested in.

...

With the release of v2.4 (Q3'04) including a Java Wrapper Class to "convert" JSR-168 Portlets into channels the distrubution includes four CSS files:

• cartoon_portlet.css
• hulk_portlet.css
• immII_portlet.css
• unicon_portlet.css

These files use the recommended style names from the Java Portlet Specification, v1.0 (2003.07.10) section PLT.C The entire specification in PDF (portlet-1_0-fr-spec.pdf, 427.84 KB) can be downloaded from the JSR-168 Portlet Site.

When v3 (Q?'05) is released it will make uPortal standards complient. This will done by having portlets be the default content produces and supplying a Java Wrapper Class to "convert" channels to portlets.

Interested/Contributing Parties

• Rutgers University - ~jayshao
• BCcampus.ca - ~mxt

Prior Work

• Rutgers XHTML-CSS work (ZIP)
• Terence Ordona's Nested Divs

References

• JSR-168 Portlet Site
• JSR-168 Portlet v1.0 API (attached PDF)
• JSR-168 PLT.C CSS Style Definitions section
• JSR-168 PLT.C CSS Style Definitions section (HTML page)
• WSRP Spec (attached)
• uPortal specific CSS naming conventions

Desired Features

• Valid XHTML/CSS which supports a broad range of standards compliant browsers, and downgrades gracefully in user agents that do not support css.
• Presentation controlled through the use of CSS with simple markup expressing content
• Accessibility support (Conformance With W3C Accessibility guidelines?)
• Common markup and CSS naming conventions to allow channel developers to produce "widgets" like toolbars, tabular displays, etc. while still allowing individual portals to customize their appearence in a standard fashion.
• Support internationalization

Examples

Toolbars

Rutgers has developed a somewhat standard format for toolbars within channels. We've restyled links and form inputs to display similarly, using both the JSR-168 portlet-form-button class, and we've added individual classes to allow decorating specific "buttons" with images, colors, etc.

Image Removed

...

<div class="toolbar">
  <ul>
    <li><a href="#" class="portlet-form-button inbox"/></li>
    <li><a href="#" class="portlet-form-button preferences"/></li>
    <li><input type="submit" class="portlet-form-button delete-selected"/></li>
  </ul>
</div>

CSS snippet was pulled out of our current skin, items may be missing/incomplete

...

.toolbar {
	width:100%;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	background-color:#eee;
	}

.toolbar ul {
	line-height:1.6em;
	list-style:none;
	margin:3px;
	padding:0;
	}

.toolbar ul:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility:hidden;
	}

/* Hides from IE-mac \*/
* html .toolbar ul {height: 1%;}
/* End hide from IE-mac */

.toolbar li {
	display:block;
	line-height:1.6em;
	float:left;
	margin:-1px 2px 0 0;
	padding:0;
	}

.toolbar select {font-size:.8em;}

.portlet-form-button,.uportal-button {
	border-style:solid;
	border-color:#fff #336 #336 #fff;
	border-width:1px;
	background-color:#ccf;
	color:#66c;
	cursor:pointer;
	white-space:nowrap;
	text-align: center;
	font:bold .9em sans-serif;
	}

a.portlet-form-button, a.uportal-button {
	display:block;
	background-color:#ccf;
	text-decoration:none;
	padding:3px 1px 3px 20px;
	margin:2px 0 0 0;
	}

* html input.portlet-form-button, * html input.uportal-button{
	padding:0;
	margin:0px;
	}

a.inbox {background:#ccf url(inbox.gif) no-repeat 2px scroll;}
a.compose {background:#ccf url(compose.gif) no-repeat 2px scroll;}

input.delete-selected {
	background:#ccf url(delete-selected.gif) no-repeat 2px scroll;
	padding:2px 0 2px 2em;
	margin-top:2px;
	}

Tables

Todo.

Expandable Trees

...

class="portlet-titlebar"

id="portletTitlebar"

class="portlet-titlebar"

class="portlet_titlebar"

class="portlet-titlebar"

class="titlebar"

class="portlet-titlebar"

class="big-red-bar"

class="fl-container-flex up-portlet-container portlet-titlebar my-custom-class"

CSS Namespaces