The KnowledgeBase is under development and has been made viewable to the user communities to allow for content contributions and feedback. Please post your content in the appropriate section and/or feedback in the comments section located at the bottom of each page.

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 23 Next »

In this manual we'll setup and enable jQuery javascript libraries instead of default scriptaculous ones, they both have great effects and functionalities so we can choose the one that best fits our interest, or knowledge.

Using simple on/off switches defined in <dspace:layout> element we'll allow DSpace .jsp pages to load or not this script files. Example:

Enable jQuery
<dspace:layout titlekey="jsp.search.results.title" navbar="off" locbar="off" scriptaculous="off" jquery="on">
Enable scriptaculous
<dspace:layout titlekey="jsp.search.results.title" navbar="off" locbar="off" scriptaculous="on" jquery="off"> 
Disable all
<dspace:layout titlekey="jsp.search.results.title" navbar="off" locbar="off" scriptaculous="off" jquery="off">

First we'll take a look to the current use of script libraries in DSpace and later we'll start modifying source files.

script.aculo.us libraries 

DSpace JSPUI interface bundles scriptaculous javascript libraries in every page head section. We can check that looking at source code of DSpace home page, we'll see this few lines:

<script type="text/javascript" src="/jspui/static/js/scriptaculous/prototype.js"> </script>
<script type="text/javascript" src="/jspui/static/js/scriptaculous/effects.js"> </script>
<script type="text/javascript" src="/jspui/static/js/scriptaculous/builder.js"> </script>
<script type="text/javascript" src="/jspui/static/js/scriptaculous/controls.js"> </script>

Doing a litle browsing we can check that this libraries (prototype) are used in a library function:

[dspace-source]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/static/js/choice-support.js
function DSpaceChoiceLookup(...) 
// Create popup window with authority choices for value of an input field.
// This is intended to be called by onClick of a "Lookup" or "Add" button.
function DSpaceChoiceLookup(url, field, formID, valueInput, authInput,
confIndicatorID, collectionID, isName, isRepeating)
{
...
cOffset = $(inputField).cumulativeOffset();
...}

This function is called on the following java server pages:

[dspace-source]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/submit/edit-metadata.jsp
[dspace-source]/dspace-jspui/dspace-jspui-webapp/src/main/webapp//tools/edit-item-form.jsp

By now we know which pages use scriptaculous. We'll keep them in mind to later come back and modify them.

jQuery libraries

DSpace already uses a copy of jQuery, but in a local form. The library function that uses it is:

[dspace-source]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/dspace-admin/js/bitstream-ordering.js
function ($) 
function ($) {
    $(document).ready(function() {
        var bitstreamTable = $("table#bitstream-edit-form-table");
	...


})(jQuery);

This function is called on the following java server page:

[dspace-source]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/tools/edit-item-form.jsp

And jQuery library file can be located on:

[dspace-source]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/dspace-admin/js/jquery-1.4.2.min.js

Now that every script file and script file caller is located we'll start to code.

First steps

In this examples we'll overwrite existing source code files, if you feel comfortable working with JSPUI overlays can translate this modifications to "dspace/modules/jspui" folder.

Copying jQuery files to JSPUI webapp folder

We'll create a folder to accommodate jQuery script file in

 [dspace-source]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/static/js/jquery/

We'll download jQuery latest version from http://code.jquery.com/jquery-1.7.2.min.js and copy it into the new folder.

Modifying dspace-tags.tld and LayoutTag.java

We must define inside dspace tag library descriptor a pair of variables that will be used in LayoutTag class file: scriptaculous and jquery.

 [dspace-source]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/WEB-INF/dspace-tags.tld
dspace-tags.tld 
<tag>
    <name>layout</name>
    <tagclass>org.dspace.app.webui.jsptag.LayoutTag</tagclass>
    <info>Lays out an HTML page</info>
...
    <attribute>
      <name>scriptaculous</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
     <attribute>
      <name>jquery</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
...
  </tag>

Then we must add the private variables and it's getter and setters:

[dspace-source]/dspace-jspui/dspace-jspui-api/src/main/java/org/dspace/app/webui/jsptag/LayoutTag.java 

public class LayoutTag extends TagSupport
{
...
    /** scriptaculous flag */
    private String scriptaculous;

    public String getScriptaculous()
    {
        return scriptaculous;
    }

    public void setScriptaculous(String scriptaculous)
    {
        this.scriptaculous = scriptaculous;
    }

    /** jquery flag **/
    private String jquery;

    public String getJquery()
    {
        return jquery;
    }

    public void setJquery(String jquery)
    {
        this.jquery = jquery;
    }
...

    public int doStartTag() throws JspException
    {

        ServletRequest request = pageContext.getRequest();
        ...
        if (scriptaculous != null)
        {
            request.setAttribute("dspace.layout.scriptaculous", scriptaculous);
        }
        if (jquery != null)
        {
            request.setAttribute("dspace.layout.jquery", jquery);
        }
        ...
    }
...
}

Modifying header-default.jsp

Once our variables are declared in our layout tag, we'll use them in header-default.jsp file. The one that renders header section of every page displayed by DSpace.

[dspace-source]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/layout/header-default.jsp

<%--

    The contents of this file are subject to the license and copyright
    detailed in the LICENSE and NOTICE files at the root of the source
    tree and available online at

    http://www.dspace.org/license/

--%>
<%--
  - HTML header for main home page
  --%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.dspace.org/dspace-tags.tld" prefix="dspace" %>

<%@ page contentType="text/html;charset=UTF-8" %>

<%@ page import="java.util.List"%>
<%@ page import="java.util.Enumeration"%>
<%@ page import="org.dspace.app.webui.util.JSPManager" %>
<%@ page import="org.dspace.app.webui.util.UIUtil" %>
<%@ page import="org.dspace.core.ConfigurationManager" %>
<%@ page import="org.dspace.app.util.Util" %>
<%@ page import="org.dspace.browse.BrowseIndex" %>
<%@ page import="org.dspace.browse.BrowseInfo" %>
<%@ page import="javax.servlet.jsp.jstl.core.*" %>
<%@ page import="javax.servlet.jsp.jstl.fmt.*" %>

<%
    String title = (String) request.getAttribute("dspace.layout.title");
    String navbar = (String) request.getAttribute("dspace.layout.navbar");
    boolean locbar = ((Boolean) request.getAttribute("dspace.layout.locbar")).booleanValue();
    String siteName = ConfigurationManager.getProperty("dspace.name");

    String scriptaculous = (String) request.getAttribute("dspace.layout.scriptaculous");    //Added code
    String jquery = (String) request.getAttribute("dspace.layout.jquery");                  //Added code

    String feedRef = (String)request.getAttribute("dspace.layout.feedref");
    boolean osLink = ConfigurationManager.getBooleanProperty("websvc.opensearch.autolink");
    String osCtx = ConfigurationManager.getProperty("websvc.opensearch.svccontext");
    String osName = ConfigurationManager.getProperty("websvc.opensearch.shortname");
    List parts = (List)request.getAttribute("dspace.layout.linkparts");
    String extraHeadData = (String)request.getAttribute("dspace.layout.head");
    String dsVersion = Util.getSourceVersion();
    String generator = dsVersion == null ? "DSpace" : "DSpace "+dsVersion;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title><%= siteName %>: <%= title %></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="Generator" content="<%= generator %>" />
        <link rel="stylesheet" href="<%= request.getContextPath() %>/styles.css" type="text/css" />
        <link rel="stylesheet" href="<%= request.getContextPath() %>/print.css" media="print" type="text/css" />
        <link rel="shortcut icon" href="<%= request.getContextPath() %>/favicon.ico" type="image/x-icon"/>
        <!-- Google fonts-->
		<link href='http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic' rel='stylesheet' type='text/css' />

<%
    if (!"NONE".equals(feedRef))
    {
        for (int i = 0; i < parts.size(); i+= 3)
        {
%>
        <link rel="alternate" type="application/<%= (String)parts.get(i) %>" title="<%= (String)parts.get(i+1) %>" href="<%= request.getContextPath() %>/feed/<%= (String)parts.get(i+2) %>/<%= feedRef %>"/>
<%
        }
    }

    if (osLink)
    {
%>
        <link rel="search" type="application/opensearchdescription+xml" href="<%= request.getContextPath() %>/<%= osCtx %>description.xml" title="<%= osName %>"/>
<%
    }

    if (extraHeadData != null)
        { %>
<%= extraHeadData %>
<%
        }

    if (scriptaculous == null || scriptaculous.equals("on"))           //Added code starts here
       {
%>
    <script type="text/javascript" src="<%= request.getContextPath() %>/static/js/scriptaculous/prototype.js"> </script>
    <script type="text/javascript" src="<%= request.getContextPath() %>/static/js/scriptaculous/effects.js"> </script>
    <script type="text/javascript" src="<%= request.getContextPath() %>/static/js/scriptaculous/builder.js"> </script>
    <script type="text/javascript" src="<%= request.getContextPath() %>/static/js/scriptaculous/controls.js"> </script>
<%      }
    if (jquery != null && jquery.equals("on"))
    {
%>
	<script src="<%= request.getContextPath() %>/static/js/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<%
    }                                                                 //Added code ends here
%>

...

With this code all .jsp pages that use <dspace:layout> (majority in DSpace) will load only scriptaculous libraries. In other words will behave as previous modifications.

Modifying *.jsp files

Now all we have to do is  change <dspace:layout> tag to include our new variables. 

  • No labels

All content on the LYRASIS Wiki is licensed under the CC BY (Attribution) license, unless otherwise noted.