5.4.2.3.2. Creating a file viewer

eXo Platform supports the inline visualization for many file formats. For example, let's see the display of PDF file:

For those not yet available, one message will be displayed that requires you to download it. Here is the view of a ZIP file:

However, eXo Platform allows you to create a new file viewer to read one file format, for example, ZIP files. Assuming that you want to display the list of files contained in the ZIP file, do as follows:

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

  2. 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()
    }
    %>
  3. 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 {
    }
  4. 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.

  5. 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>
  6. 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:

    • templates/ZipViewer.gtmpl

    • org/exoplatform/ecm/dms/ZipViewer.class

    • conf/portal/configuration.xml

  7. Put this .jar file into the eXo Platform package.

    • $PLATFORM_TOMCAT_HOME/lib (in Tomcat).

    • $PLATFORM_JBOSS_HOME/standalone/deployments/platform.ear!/lib (in JBoss).

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

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