Ejemplo completo de extensión del frontend

Este ejemplo muestra cómo ampliar rápidamente las funcionalidades de OpenKM con las tecnologías JSP, HTML, CSS y JavaScript, utilizando la API Java de OpenKM y las funciones JavaScript de los métodos Java del frontend expuestos.

Descargue el código del ejemplo de extensión complete_extension_sample.zip.

Descripción

El ejemplo se muestra en una nueva pestaña del espacio de trabajo.

La pantalla principal se muestra como una barra de herramientas con tres botones:

• El primer botón va a la pantalla principal del ejemplo.
• El segundo botón muestra el ejemplo 1.
• El segundo botón muestra el ejemplo 2.

Estructura del proyecto:

Instalación

• Detenga la aplicación.
• Copie el contenido del fichero descargado en la carpeta $TOMCAT_HOME/webapps/openkm (o, mejor, en openkm.war).
• Elimine $TOMCAT_HOME/work/catalina/localhost
• Inicie la aplicación.
• Compruebe la URL http://localhost:8080/openkm/sample.

Precaución

Las capturas de pantalla se realizaron en combinación con la funcionalidad de extensión del frontend “ExtraTab”; también puede utilizar TabWorkspaceExtension.

Cuando cambia el contenido de openkm.war, el fichero se despliega como una nueva versión de la aplicación y todo el contenido de $TOMCAT_HOME/webapps/openkm se actualizará, por lo que perderá los cambios que haya realizado directamente en la carpeta webapps/openkm.

Detalles de implementación

index.jsp

Index.jsp controla la altura del iframe con código JavaScript.

Otro dato importante es que, por ejemplo, tras subir un documento (Ejemplo 2), se utiliza el parámetro urlToOpen para indicar qué URL debe abrirse.

HttpSessionManager httpSessionManager = ContextWrapper.getContext().getBean(HttpSessionManager.class);
OKMAuth okmAuth = ContextWrapper.getContext().getBean(OKMAuth.class);
WebUtils webUtils = ContextWrapper.getContext().getBean(WebUtils.class);

httpSessionManager.add(request);
okmAuth.login();
String urlToOpen = URLDecoder.decode(webUtils.getString(request, "urlToOpen"), "UTF-8");
if (urlToOpen.equals("")) {
    urlToOpen = "home.jsp";
}

menu.jsp

Contiene las definiciones de las URL del menú.

home.jsp

Establece la pantalla principal de inicio.

Ejemplo 1

Está compuesto por 4 ficheros:

• action.jsp (el controlador principal donde se establece la lógica).
• distributor.jsp (la capa principal con dos columnas al 50 %).
• full_list.jsp (muestra la lista completa sin ningún control especial de JavaScript).
• filtered_list.jsp (muestra la lista filtrada sin ningún control especial de JavaScript).

action.jsp

El controlador principal.

<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ page import="java.io.IOException"%>
<%@ page import="java.net.URLDecoder"%>
<%@ page import="org.slf4j.Logger"%>
<%@ page import="org.slf4j.LoggerFactory"%>
<%@ page import="com.openkm.bean.Document"%>
<%@ page import="com.openkm.util.WebUtils"%>
<%@ page import="com.openkm.bean.CommonUser"%>
<%@ page import="com.openkm.api.OKMAuth"%>
<%@ page import="com.openkm.api.OKMRepository"%>
<%@ page import="com.openkm.api.OKMDocument"%>
<%@ page import="com.openkm.util.ContextWrapper"%>
<%@ page extends="com.openkm.extension.servlet.BaseServlet"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%!
private static Logger log = LoggerFactory.getLogger("com.openkm.sample");
private static SimpleDateFormat df = new SimpleDateFormat("dd/MM/yyyy HH:mm:ss");
private WebUtils webUtils = ContextWrapper.getContext().getBean(WebUtils.class);

public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException,
        ServletException {
    String action = webUtils.getString(request, "action");
    try {
        list(request, response);
    } catch (Exception e) {
        log.error(e.getMessage(), e);
        sendErrorRedirect(request, response, e);
    }
}

// Used by fileupload return
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException,
        ServletException {
    String action = webUtils.getString(request, "action");
    try {
        if (action.equals("filter")) {
            list(request, response);
        }
    } catch (Exception e) {
        log.error(e.getMessage(), e);
        sendErrorRedirect(request, response, e);
    }
}

private void list(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, Exception {
    OKMAuth okmAuth = ContextWrapper.getContext().getBean(OKMAuth.class);

    String nameFilter = webUtils.getString(request, "nameFilter");
    String userFilter = webUtils.getString(request, "userFilter");

    // Getting lists
    List<Map<String, String>> leftDocsMaps = leftList(""); // Pending documents for all users
    List<Map<String, String>> rightDocsMaps = rightList(userFilter, nameFilter);
    List<String> users = new ArrayList<String>();
    // UserList
    for (CommonUser user : okmAuth.getUsers(null)) {
        users.add(user.getId());
    }

    ServletContext sc = getServletContext();
    sc.setAttribute("nameFilter", nameFilter);
    sc.setAttribute("leftDocsMaps", leftDocsMaps);
    sc.setAttribute("rightDocsMaps", rightDocsMaps);
    sc.setAttribute("users", users);
    sc.setAttribute("nameFilter", nameFilter);
    sc.setAttribute("userFilter", userFilter);
    sc.getRequestDispatcher("/sample/sample1/distributor.jsp").forward(request, response);
}

private List<Map<String, String>> leftList(String user) throws Exception {
    OKMDocument okmDocument = ContextWrapper.getContext().getBean(OKMDocument.class);
    OKMRepository okmRepository = ContextWrapper.getContext().getBean(OKMRepository.class);
    String uuid = okmRepository.getNodeUuid(null, "/okm:root");

    List<Map<String, String>> documentsMap = new ArrayList<Map<String, String>>();
    // To change
    List<Document> pendingDocuments = new ArrayList<Document>();
    for (Document doc : okmDocument.getChildren(null, uuid)) {
        Map<String, String> docMap = new HashMap<String, String>();
        docMap.put("author", doc.getAuthor());
        docMap.put("name", doc.getPath().substring(doc.getPath().lastIndexOf("/") + 1));
        docMap.put("uuid", doc.getUuid());
        docMap.put("path", doc.getPath());
        docMap.put("mimeType", doc.getMimeType());
        docMap.put("lastModified", df.format(doc.getLastModified().getTime()));
        documentsMap.add(docMap);
    }
    return documentsMap;
}

private List<Map<String, String>> rightList(String user, String nameFilter) throws Exception {
    OKMDocument okmDocument = ContextWrapper.getContext().getBean(OKMDocument.class);
    OKMRepository okmRepository = ContextWrapper.getContext().getBean(OKMRepository.class);
    String uuid = okmRepository.getNodeUuid(null, "/okm:root");

    List<Map<String, String>> documentsMap = new ArrayList<Map<String, String>>();
    for (Document doc : okmDocument.getChildren(null, uuid)) {
        boolean found = true;
        if (!user.equals("") && !user.equals(doc.getAuthor())) {
            found = false;
        }
        if (!nameFilter.equals("") && !doc.getPath().contains(nameFilter)) {
            found = false;
        }

        if (found) {
            Map<String, String> docMap = new HashMap<String, String>();
            docMap.put("author", doc.getAuthor());
            docMap.put("name", doc.getPath().substring(doc.getPath().lastIndexOf("/") + 1));
            docMap.put("uuid", doc.getUuid());
            docMap.put("path", doc.getPath());
            docMap.put("mimeType", doc.getMimeType());
            docMap.put("lastModified", df.format(doc.getLastModified().getTime()));
            documentsMap.add(docMap);
        }
    }
    return documentsMap;
}
%>

distributor.jsp

La capa principal.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/sample/css/style.css" />
  <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath() %>/js/vanadium-min.js" ></script>
</head>
<body>
  <table width="100%">
    <tbody>
    <tr>
      <td valign="top" width="50%">
        <jsp:include page="/sample/sample1/full_list.jsp"></jsp:include>
      </td>
      <td valign="top" width="10"></td>
      <td valign="top" width="50%">
        <jsp:include page="/sample/sample1/filtered_list.jsp"></jsp:include>
      </td>
    </tr>
    </tbody>
  </table>
</body>
</html>

full_list.jsp

Muestra la lista de documentos.

Nota

Observe la función JavaScript “go”, que llama a parent.parent.jsOpenPathByUuid(uuid). La función “jsOpenPathByUuid” es una función pública de GWT que se utiliza para saltar a un documento, carpeta, etc. concretos. La API JavaScript del frontend expuesta enlazada aquí proporciona una lista completa de las funciones JavaScript.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<script type="text/javascript">
  // Note the parent.parent call because iframe is into other iframe
    function go(uuid) {
        alert('Document UUID:'+uuid);
      parent.parent.jsOpenPathByUuid(uuid);
    }
</script>
<h1>Full list of /okm:root documents</h1>
<table class="results" style="white-space: nowrap;" cellpadding="3" width="100%">
    <thead>
      <tr>
        <th></th><th>Author</th><th>Document</th><th>Date</th><th></th>
      </tr>
    </thead>
    <tbody>
      <c:forEach var="document" items="${leftDocsMaps}" varStatus="row">
      <tr>
        <td valign="center"><img src="<%=request.getContextPath() %>/mime/${document.mimeType}"/></td>
        <td>${document.author}</td>
        <td>${document.name}</td>
        <td>${document.lastModified}</td>
        <td align="center">
         <a href="javascript:go('${document.uuid}')"><img src="<%=request.getContextPath() %>/sample/img/action/goto_document.gif" alt="Show document" title="Show document"/></a>
         </td>
      </tr>
      </c:forEach>
    </tbody>
</table>

Captura de pantalla de la vista del ejemplo 1

Ejemplo 2

Está compuesto por 4 ficheros:

• action.jsp (el controlador principal donde se establece la lógica).
• add_form.jsp (formulario para subir un nuevo documento)
• distributor.jsp (la capa principal con dos columnas al 50 % con JavaScript).
• full_list.jsp (muestra la lista completa con un control especial de JavaScript para la altura de la tabla).
• pending.jsp (contenido estático).

action.jsp

El controlador principal.

<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ page import="java.io.IOException"%>
<%@ page import="org.slf4j.Logger"%>
<%@ page import="org.slf4j.LoggerFactory"%>
<%@ page import="com.openkm.bean.Document"%>
<%@ page import="com.openkm.util.WebUtils"%>
<%@ page import="com.openkm.api.OKMDocument"%>
<%@ page import="com.openkm.api.OKMRepository"%>
<%@ page import="com.openkm.util.ContextWrapper"%>
<%@ page extends="com.openkm.extension.servlet.BaseServlet"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%!
private static Logger log = LoggerFactory.getLogger("com.openkm.sample");
private WebUtils webUtils = ContextWrapper.getContext().getBean(WebUtils.class);

public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
    String action = webUtils.getString(request, "action");
    try {
        list(request, response);
    } catch (Exception e) {
        log.error(e.getMessage(), e);
        sendErrorRedirect(request, response, e);
    }
}

// Used by fileupload return and filter
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
    String action = webUtils.getString(request, "action");
    try {
        list(request, response);
    } catch (Exception e) {
        log.error(e.getMessage(), e);
        sendErrorRedirect(request, response, e);
    }
}

private void list(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException, Exception {
    OKMDocument okmDocument = ContextWrapper.getContext().getBean(OKMDocument.class);
    OKMRepository okmRepository = ContextWrapper.getContext().getBean(OKMRepository.class);
    String uuid = okmRepository.getNodeUuid(null, "/okm:root");

    SimpleDateFormat df = new SimpleDateFormat("dd/MM/yyyy HH:mm:ss");
    String docPath = (String) request.getAttribute("docPath");
    String nameFilter = webUtils.getString(request, "nameFilter");
    // Pending docs
    List<Map<String, String>> pendingDocMaps = new ArrayList<Map<String, String>>();
    for (Document doc : okmDocument.getChildren(null, uuid)) {
        Map<String, String> docMap = new HashMap<String, String>();
        docMap.put("name", doc.getPath().substring(doc.getPath().lastIndexOf("/") + 1));
        docMap.put("uuid", doc.getUuid());
        docMap.put("path", doc.getPath());
        docMap.put("mimeType", doc.getMimeType());
        docMap.put("lastModified", df.format(doc.getLastModified().getTime()));
        pendingDocMaps.add(docMap);
    }
    ServletContext sc = getServletContext();
    sc.setAttribute("docPath", docPath);
    sc.setAttribute("nameFilter", nameFilter);
    sc.setAttribute("pendingDocuments", pendingDocMaps);
    sc.getRequestDispatcher("/sample/sample2/distributor.jsp").forward(request, response);
}
 %>

distributor.jsp

La capa principal.

Nota

Aquí se utiliza JavaScript para controlar la altura y la anchura de la capa.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/sample/css/style.css" />
  <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/jquery.tablescroll.css"/>
  <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath() %>/js/vanadium-min.js" ></script>
  <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.tablescroll.js"></script>
</head>
<body>
  <div id="leftPanel" style="float: left;">
    <jsp:include page="/sample/sample2/add_form.jsp"></jsp:include>
    <jsp:include page="/sample/sample2/full_list.jsp"></jsp:include>
  </div>
  <div id="centerPanel" style="float: left; width: 12px;">
    <div id="verticalSeparator" class="verticalSeparator"></div>
  </div>
  <div id="rightPanel" style="float: left;">
        <jsp:include page="/sample/sample2/pending.jsp"></jsp:include>
  </div>

  <script type="text/javascript">
    var width =  $(window).width()-12; // Deleting middle panel
    var height = $(window).height();

    // Setting height
    $('#verticalSeparator').height(height);
    $('#leftPanel').height(height);
    $('#rightPanel').height(height);
    // Setting width
    $('#leftPanel').width(parseInt(width/2));
    $('#centerPanel').width(12);
    $('#rightPanel').width((width-parseInt((width/2))));
  </script>
</body>
</html>

add_form.jsp

Formulario para subir un nuevo documento.

<%@ page import="com.openkm.frontend.client.constants.ui.UIFileUploadConstants" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<h2 id="headerTitle_new_register">Upload new file</h2>
<form enctype="multipart/form-data" method="post" action="<%=request.getContextPath() %>/frontend/FileUpload">
  <input type="hidden" name="path" value="/okm:root">
  <input type="hidden" name="action" value="<%=UIFileUploadConstants.ACTION_INSERT%>">
  <input type="hidden" name="message" value="">
  <input type="hidden" name="comment" value="">
  <input type="hidden" name="redirect" value="/sample/sample2/action.jsp">
  <table class="form">
    <tbody>
      <c:if test="${docPath != null && docPath != ''}">
      <tr>
        <td><div class="ok">Document sended</div></td>
      </tr>
    </c:if>
      <tr>
        <td>
          <div id="file_error" style="display:none; color : red;">File is mandatory.</div>
          <input type="file" name="file" class=":required;;file_error :only_on_blur">
        </td>
      </tr>
      <tr>
          <td align="center"><input type="submit" value="Send"></td>
      </tr>
    </tbody>
    </table>
</form>

full_list.jsp

Muestra una lista de documentos.

Nota

Observe el final, donde se utiliza JavaScript para controlar el desplazamiento de la tabla.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<script type="text/javascript">
  // Note the parent.parent call because iframe is into other iframe
    function go(uuid) {
        alert('Document UUID:'+uuid);
      parent.parent.jsOpenPathByUuid(uuid);
    }
</script>
<h2 class="top">Full document list from /okm:root</h2>
<div align="center" style="padding: 0px 20px 0px 5px">
  <div class="tablescroll">
    <table id="docsPendingTable" width="100%" cellspacing="0" style="white-space: nowrap;">
        <thead>
          <tr>
            <td>Id</td><td>Document</td><td>Date</td><td></td>
          </tr>
        </thead>
        <tbody>
          <c:set var="first" value="true"></c:set>
          <c:forEach var="document" items="${pendingDocuments}" varStatus="row">
            <c:choose>
               <c:when test="${first==true}">
                 <tr class="first">
               </c:when>
               <c:otherwise>
                 <tr>
               </c:otherwise>
            </c:choose>
              <td valign="center"><img src="<%=request.getContextPath() %>/mime/${document.mimeType}"/></td>
              <td>${document.name}</td>
              <td>${document.lastModified}</td>
              <td align="center"><a href="javascript:go('${document.uuid}')"><img src="<%=request.getContextPath() %>/sample/img/action/goto_document.gif" alt="Show document" title="Show document"/></a></td>
            </tr>
            <c:set var="first" value="false"></c:set>
          </c:forEach>
        </tbody>
    </table>
  </div>
</div>

<script type="text/javascript">
//Calculating table height removing from total other elements height
var pendingTableHeight = $(window).height() - (parseInt($('#docsPendingTable').offset().top) + 35);
/*<![CDATA[*/
jQuery(document).ready(function($)
{
  $('#docsPendingTable').tableScroll({height:pendingTableHeight});
});
/*]]>*/
</script>

Captura de pantalla de la vista del ejemplo 2