Fast extension sample

From OpenKM Documentation
Revision as of 10:57, 31 December 2013 by Jllort (talk | contribs)

Jump to: navigation, search

Nota advertencia.png Under construction

This sample example show how to fastly extend OpenKM features with JSP, HTML, CSS and JavaScript technologies using OpenKM java API and how to communicate with exposed javascript GWT public functions (Javascript_API).

Description

  • ToolBar
  • Button one goes to main home screen
  • Button two goes to Sample1
  • Button tree goes to Sample2


Project folders and files

User guide 533.png


Implementation details

index.jsp

Index.jsp controls iframe height with simple javascript code.

Other important thing is, for example after upload a document ( Sample 2 ) we use request var urlToOpen to indicate which url should be opened 

 
String urlToOpen = URLDecoder.decode(WebUtils.getString(request, "urlToOpen"),"UTF-8");
if (urlToOpen.equals("")) {
  urlToOpen = "home.jsp";
}


menu.jsp

Has menu url definitions.

User guide 534.png


home.jsp

Main home screen.

User guide 530.png


Sample1

Is composed by 4 files:

  • action.jsp ( the main controler what has all logic ).
  • distributor.jsp ( the main layer with two columns at 50% ).
  • full_list.jsp ( show full list with no JavaScript special control ).
  • filtered_list.jsp ( show filtered list with no JavaScript special control ).


action.jsp the controler 

<%@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 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");
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 {
	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.getInstance().getChildren(null, "/okm:root")) {
		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);
}%>


ditributor.jsp the main layer 

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

</source>

full_list.jsp

Pay attention at javascript function go, which call parent.parent.jsOpenPathByUuid(uuid). jsOpenPathByUuid is a GWT public functions what can be used to jump to some specific document, folder etc... Here Javascript_API there's a complete list of GWT javascript public functions. 

<%@ 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>
User guide 531.png

Installation


Nota clasica.png Remember when you change OpenKM.war file the contents of $TOMCAT_HOME/webapps/OpenKM is changed and you will lost any change you make into.

Retrieved from "https://www.openkm.com/wiki/index.php?title=Fast_extension_sample&oldid=11092"