WSRP Portlets in Oracle WebCenter : Images referenced from CSS files aren't loaded

Question

If a WSRP portlet displays a jsp page that references a css file which references an image, the image can't be loaded because the url in the css can't be found. The url in the css is a relative one: ../images/image.gif.

Details of my problem

I have developed a JSR168 portlet (Java Portlet Standard) and I want to deploy it in Oracle WebCenter 11g (among other JSR-complaint portal servers)

My portlet displays a jsp which references a css file and this css references a few images. All these resources (images, css, jsps, etc) are contained into the war file of my portlet.

When I load the portlet in a WebCenter page, the css file is loaded correctly, but the images referenced by this css file don't.

The reason is that to generate the css, WebCenter generates a long url: http://localhost:8888/webcenter/resourceproxy/~.portletId~3D~252Foracle~252Fadf~252Fportlet~252FscopedMD~252Fs8bba98ff_4cbb_40b8_beee_296c916a23ed~252Fportlets~252Fclients3_366e85fa_e823_48ac_b37a_9890375111ab~26clientId... (its way longer)

But inside this css file, there are relative paths to the images. And when the browser tries to load them, the url is: http://localhost:8888/webcenter/resourceproxy/img/sprite.png which doesn't exist.

What can I do to make WebCenter load the images in my css files correctly?

How do I deploy my portlet into Oracle WebCenter I explain this, in case I should do it differently.

• I convert my portlet into to a WSRP portlet by executing java -jar wsrp-predeploy.jar source EAR target EAR as explained in http://download.oracle.com/docs/cd/E12839_01/webcenter.1111/e12405/wcadm_portlet_prod.htm#CHDECJHI)

• I deploy it into WebLogic with the WebLogic Console.

• I register a Portlet Producer using the Enterprise Manager 11g Fusion MiddleWare Control.

• I add the portlet to the main page of the WebCenter Spaces

My Environment

WebCenter Suite (11.1.1.2.0) + WebLogic Server (10.3.2) S.O: Windows XP SP3

Thanks in advance for your time.

Answer 1

I have similar issue. Well, this will not give you a solution, but will explain you why...

One of the goals of an aggregated page is a common look-and-feel across the Portlets contained on that page [A500]. This not only affects the decorations around the Portlets, but also their content. Using a common CSS style sheet for all Portlets, and defining a set of standard styles, provides this common look-and-feel without requiring the Portlets to generate Consumer-specific markup. Portlets SHOULD use the CSS style definitions from this specification in order to participate in a uniform display of their content by various Consumers. For markup types that support CSS stylesheets, Consumers MUST supply a CSS stylesheet to the End-User's agent with definitions for the classes defined in [Section 9.5] of this specification.

I think somebody had made mistake when writing the spec.

Answer 2

Do not use the relative path like ../../css/ instead use <%=request.getContextPath()%>/css/, within your CSS you can still keep the relative path of your images ../../images/.