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"/>
<div>..</div>

In this section you improve it by letting the portal manage your CSS resource.

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"

    xmlns="http://www.exoplatform.org/xml/ns/kernel_1_2.xsd">

    <external-component-plugins>

        <target-component>org.exoplatform.container.definition.PortalContainerConfig</target-component>

        <component-plugin>

            <name>Add PortalContainer Definitions</name>

            <set-method>registerChangePlugin</set-method>

            <type>org.exoplatform.container.definition.PortalContainerDefinitionChangePlugin</type>

            <priority>101</priority>

            <init-params>

                <values-param>

                    <name>apply.specific</name>

                    <value>portal</value>

                </values-param>

                <object-param>

                    <!-- The list of dependencies -->

                    <name>addDependencies</name>

                    <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 -->

                                <value>

                                    <string>hello-portlet</string>

                                </value>

                            </collection>

                        </field>

                    </object>

                </object-param>

            </init-params>

        </component-plugin>

    </external-component-plugins>

</configuration>

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:

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

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"

  xmlns="http://www.gatein.org/xml/ns/gatein_resources_1_3">

  <portlet-skin>

    <application-name>hello-portlet</application-name>

    <portlet-name>Hello</portlet-name>

    <skin-name>Default</skin-name>

    <css-path>/skin/Stylesheet.css</css-path>

  </portlet-skin>

</gatein-resources>

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.

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">
  <span><%=resource.getString("com.acme.samples.HelloPortlet.Hello")%></span>
</div>
<div class="HelloPortlet2">
  <span><%=resource.getString("com.acme.samples.HelloPortlet.Msg1")%></span>
</div>
<div class="HelloPortlet3">
  <span><%=resource.getString("com.acme.samples.HelloPortlet.Msg2")%></span>
</div>

The result will be:

Note

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.