Open Portal WSRP: CSS class name collision

We have a Open Portal 2.1.2 Producer running on Tomcat 5.5.26.The producer hosts JSR 286 portlets. The consumer is Weblogic 10.3.2 Portal based.

Issue : On the consumer, the CSS style class collide with styles of other portlets. One solution to prevent this collision is to use unque CSS class names but on consumer side federated portal there is no guarantee that the it does not have the style that producer has.

There is a nice article on SDN (see [3]), discussing the javascript namespace collision, suggests prefixing JavaScript variables and functions with <portlet:namespace/>.This is a great solution but,for an external CSS file, there is no way we can use <portlet:namespace/>. For internal CSS in JSP, we can prefix the CSS class with <portlet:namespace/>_someClass.

Rest of the article explains how this can be achieved for External CSS.

original external css file : sample.css

#_someClass
{
width:300px;
word-spacing:12px;
font-size:90%;
padding-left:12px;
padding-right:10px;
white-space:nowrap
}

:
:
:

Orginal sample.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@ page import="javax.portlet.*"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>

<portlet:defineObjects />
<%PortletPreferences prefs = renderRequest.getPreferences();%>

<link rel="stylesheet" type="text/css" href="<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/sample.css")%>"/>

<div id="someClass">
<p>some portlet content goes here</p>
</div>

Now, the approach is to generate the CSS dynamically by prefixing the namespace for each class. The namespace is passed from the sample.jsp to the dynamic CSS generating page as a request paramter as shown below.

Modified CSS file: sample.css.jsp

<% String namespace = request.getParamter("namespace");
<style type="text/css">
.<%=namespace %>_someClass
{
width:300px;
word-spacing:12px;
font-size:90%;
padding-left:12px;
padding-right:10px;
white-space:nowrap
}

:
:
:
</style>

Modified sample.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@ page import="javax.portlet.*"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>

<portlet:defineObjects />
<%PortletPreferences prefs = renderRequest.getPreferences();%>

<%-- removed link tag and added dynamic CSS page using <jsp:include .../>--%>
<jsp:include page="/sample.css.jsp">
   <jsp:param name="namespace" value="<portlet:namespace/>"/>
</jsp:include>

<%-- prefix css class with namespace --%>
<div id="<portlet:namespace/>_someClass">
<p>some portlet content goes here</p>
</div>

This should resolve the namespace collision issue on the consumer.

References

[1]. My original post on this issue at OpenPortal forums

[2]. My Original post on this issue at Oracle OTN forums

[3]. Nice article on OpenPortal from SDN