6.1.4. Portlet CSS

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

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. You can download all source code used in this section here.

The registration of a CSS resource to the portal is done via WEB-INF/gatein-resources.xml in your .war. For this purpose you will make your webapp a portal extension, by adding META-INF/exo-conf/configuration.xml file:


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

                    <name>addDependencies</name>

                    <object type="org.exoplatform.container.definition.PortalContainerDefinitionChange$AddDependencies">

                        <field name="dependencies">

                            <collection type="java.util.ArrayList">

                                <value>

                                    <string>hello-portlet</string>

                                </value>

                            </collection>

                        </field>

                    </object>

                </object-param>

            </init-params>

        </component-plugin>

    </external-component-plugins>

</configuration>

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 Managing eXo Platform look and feel.