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:

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

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

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