5.2.4. Portlet CSS

In the example of Portlet localization, the CSS resource is added into the JSP. It might make the page slow and ugly.

<link rel="stylesheet" type="text/css" href="<%=contextPath%>/skin/Stylesheet.css"/>

In this section you improve it by letting the portal manage your CSS resource. You can download all source code used in this section here.

The registration of a CSS resource to the portal is performed via WEB-INF/gatein-resources.xml in your .war. The .war needs to be added as a dependency of portal container, and for this purpose you need to create a .jar.

If you have already created a .jar as described in custom extension, you can modify it knowing that the context is hello-portlet. If you have not, create a .jar that contains conf/configuration.xml:

<configuration xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd http://www.exoplatform.org/xml/ns/kernel_1_2.xsd"
            <name>Add PortalContainer Definitions</name>
                    <!-- The list of dependencies -->
                    <object type="org.exoplatform.container.definition.PortalContainerDefinitionChange$AddDependencies">
                        <field name="dependencies">
                            <collection type="java.util.ArrayList">
                                <!-- the context name that is configured in web.xml -->

Then, install this .jar to the lib folder of the eXo Platform server.

Now, back to your portlet project, the CSS resource is registered like below:

  1. Add the WEB-INF/gatein-resources.xml file so that you have:

  2. Edit gatein-resources.xml:

    <gatein-resources xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_resources_1_3 http://www.gatein.org/xml/ns/gatein_resources_1_3"
    • The application-name is the name of war file and needs to be configured as the same value in web.xml.

    • The portlet-name is configured in portlet.xml.

    • Do not miss the note at the end of this section.

  3. Modify the jsp/hello.jsp file (to remove the link tag):

    <%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
    <%@ page import="java.util.ResourceBundle"%>
    <%@ page import="org.exoplatform.services.resources.ResourceBundleService"%>
    <%@ page import="org.exoplatform.container.PortalContainer"%>
    <portlet:defineObjects />
      String contextPath = request.getContextPath();
      ResourceBundle resource = portletConfig.getResourceBundle(request.getLocale());
    <div class="HelloPortlet1">
    <div class="HelloPortlet2">
    <div class="HelloPortlet3">

The result will be:


To allow many portlets to use a shared CSS resource, the resource should be registered as a portal-skin module. Find details in Creating new skins and Skinning the portal of GateIn Reference Guide.

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus