Page History

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.

Note: We'll add jqueryui (jquery user interface) libraries too. With them will be easy to generate visual effects or use widgets like calendars, progressbars ...

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

...

We'll create a folder to accommodate jQuery and jQuery-UI script file files in

No Format
[dspace-source]/dspace-jspui/dspace-jspui-webapp/src/main/webapp/static/js/jqueryjqueryui/

...

First we must download jquery and jquery-ui script libraries from jQuery UI webpage, we'll download it's full version so we can use more functionalities on future modifications. All files are zipped inside a structure like this:

Folder - css
Folder - js
Folder - development-bundle
File - index.html

We'll use only js and css folders for our purposes. I'll describe selected folders content:

js : Contains jquery-1.7.2.min.js and jquery-ui-1.8.21.custom.min.js script files

css: Contains ui-lightness folder, here are all necessary .css style files and images to display ui-lightness visual theme, (name may vary if we select another visual theme on jQuery UI page)

Warning

title	Filename changes

Newer versions of jqueryui can contain different filenames that the ones provided in this manual, take care that your downloaded files match the references on your .jsp file

We'll create a new folder inside dspace-source/dspace-jspui/dspace-jspui-webapp/src/main/webapp/static/js/jqueryui and copy all previously described files inside it..Structure will look like this:

dspace-source/dspace-jspui/dspace-jspui-webapp/src/main/webapp/static/js/jqueryui/jquery-1.7.2.min.js
dspace-source/dspace-jspui/dspace-jspui-webapp/src/main/webapp/static/js/jqueryui/jquery-ui-1.8.21.custom.min.js
dspace-source/dspace-jspui/dspace-jspui-webapp/src/main/webapp/static/js/jqueryui/css/...

Modifying dspace-tags.tld and LayoutTag.java

...

Code Block

language	java
collapse	true

<%--

    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"/>


<%
    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"))| scriptaculous.equals("on"))           //Added code starts here
       {
%>
    <script //Added code starts here
       {
%>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/prototypebuilder.js"> </script>
    <script type="text/javascript" src="<%= request.getContextPath() %>/static/js/scriptaculous/effects.js"> </script>static/js/scriptaculous/controls.js"> </script>
<%      }
    if (jquery != null && jquery.equals("on"))
    {
%>
	<script type="text/javascript" src="<%= request.getContextPath() %>/static/js/scriptaculous/builderjqueryui/jquery-1.7.2.min.js"> < type="text/javascript"></script>
        <script type="text/javascript" src="<%= request.getContextPath() %>/static/js/scriptaculous/controlsjqueryui/jquery-ui-1.8.21.custom.min.js"> < type="text/javascript"></script>
<%      }
    if (jquery != null && jquery.equals("on"))
    {
%>
	<script src<link type="text/css" href="<%= request.getContextPath() %>/static/js/jquery/jqueryui/css/ui-lightness/jquery-ui-1.78.221.mincustom.jscss" typerel="textstylesheet"/javascript"></script>><!-- Check that .css filename is the same as you downloaded and placed in jqueryui folder-->



<%
    }                                                                 //Added code ends here
%>

<script type="text/javascript" src="<%= request.getContextPath() %>/utils.js"></script>
<!-- remove following references to scriptaculous libraries -->      // Important!
<script type="text/javascript" src="<%= request.getContextPath() %>/static/js/choice-support.js"> </script>
...

...

DSpace Resources

DSpace KnowledgeBase

Versions Compared

Old Version 32

New Version 33

Key

Modifying dspace-tags.tld and LayoutTag.java