Create a Maven project, for example, named zip-viewer, with the below structure:

Create the view template by editing the resources/templates/ZipViewer.gtmpl. Here, you only need to iterate all the ZIP files to display their names:

<style> 

ul.zip-file-list {

    padding: 0 20px;

}

ul.zip-file-list li {

    list-style-position: inside;

    list-style-type: circle;

}

</style>

<%

import java.util.zip.ZipEntry

import java.util.zip.ZipInputStream

import org.exoplatform.webui.core.UIComponent

 

def uiParent = uicomponent.getParent()

def originalNode = uiParent.getOriginalNode()

def contentNode = originalNode.getNode("jcr:content")

def zis;

 

try {

    zis = new ZipInputStream(contentNode.getProperty("jcr:data").getStream())

 

    ZipEntry ze

 

    out.println("<ul class=\"zip-file-list\">")

    while ((ze = zis.getNextEntry()) != null) {

      out.println("<li>" + ze.getName() + "</li>")

    }

    out.println("</ul>")

} finally {

    zis?.close()

}

%>

Open the java/org/exoplatform/ecm/dms/ZipViewer.java file. Once the view template is ready, it has to be registered and linked to the ZIP file type. The first step for registering the template is to create a simple class which extends UIComponent and to define the view template's path. Note that this class defines the template's path, that is, templates/ZipViewer.gtmpl in this case.

package org.exoplatform.ecm.dms;

 

import org.exoplatform.webui.config.annotation.ComponentConfig;

import org.exoplatform.webui.core.UIComponent;

 

@ComponentConfig(

template = "classpath:templates/ZipViewer.gtmpl"

)

public class ZipViewer extends UIComponent {

}

Edit the resources/conf/portal/configuration.xml file where the class is declared by the org.exoplatform.webui.ext.UIExtensionManager component.

<?xml version="1.0" encoding="ISO-8859-1"?>

<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.webui.ext.UIExtensionManager</target-component>

    <component-plugin>

      <name>Zip File dynamic viewer</name>

      <set-method>registerUIExtensionPlugin</set-method>

      <type>org.exoplatform.webui.ext.UIExtensionPlugin</type>

      <init-params>

        <object-param>

          <name>Zip</name>

          <object type="org.exoplatform.webui.ext.UIExtension">

            <field name="type">

              <string>org.exoplatform.ecm.dms.FileViewer</string>

            </field>

            <field name="rank">

              <int>110</int>

            </field>

            <field name="name">

              <string>Zip</string>

            </field>

            <field name="category">

              <string>FileViewer</string>

            </field>

            <field name="component">

              <string>org.exoplatform.ecm.dms.ZipViewer</string>

            </field>

            <field name="extendedFilters">

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

                <value>

                  <object type="org.exoplatform.webui.ext.filter.impl.FileFilter">

                    <field name="mimeTypes">

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

                        <value>

                          <string>application/zip</string>

                        </value>

                      </collection>

                    </field>

                  </object>

                </value>

              </collection>

            </field>

          </object>

        </object-param>

      </init-params>

    </component-plugin>

  </external-component-plugins>

</configuration>

This configuration links the org.exoplatform.ecm.dms.ZipViewer component to the application/zip mimetype.

Update the pom.xml file that declares dependencies of the classes imported in the ZipViewer.java file.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

  <modelVersion>4.0.0</modelVersion>

  <groupId>exo.file.viewer</groupId>

  <artifactId>zip-viewer</artifactId>

  <packaging>jar</packaging>

  <version>1.0-SNAPSHOT</version>

  <name>zip-viewer</name>

  <url>http://maven.apache.org</url>

  <dependencies>

    <dependency>

      <groupId>org.gatein.portal</groupId>

      <artifactId>exo.portal.webui.framework</artifactId>

      <version>3.5.9-PLF</version>

      <scope>provided</scope>

    </dependency>

  </dependencies>

</project>

Build the zip-viewer project using the command: mvn clean install.

Your JAR (zip-viewer/target/zip-viewer-1.0-SNAPSHOT.jar) should now contain 3 files:

Put this .jar file into the eXo Platform package.

Restart the server. The content of a ZIP file is now displayed as below: