(Jump to other KnowledgeBases)
DSpace Resources
DSpace Website
DSpace Documentation
DSpace Wiki
DSpace Demo Site
Contribute to KnowledgBase
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:
We'll use only js and css folders for our purposes. I'll describe selected folders content:
Warning | ||
---|---|---|
| ||
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
...
Code Block | ||||
---|---|---|---|---|
| ||||
<%-- The contents of this file are subject to the license and copyright and copyright detailed in the LICENSE and NOTICE files at the root of the source tree and available online at 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/license/ --%> <%-- - HTML header for main home page --%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmtdspace-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" %> <%@ taglibpage uriimport="http://wwworg.dspace.org/dspace-tags.tld" prefix="dspace.app.webui.util.UIUtil" %> <%@ page import="org.dspace.core.ConfigurationManager" %> <%@ page contentType="text/html;charset=UTF-8import="org.dspace.app.util.Util" %> <%@ page import="javaorg.dspace.utilbrowse.ListBrowseIndex" %> <%@ page import="javaorg.dspace.utilbrowse.EnumerationBrowseInfo" %> <%@ page import="orgjavax.dspaceservlet.appjsp.webuijstl.utilcore.JSPManager*" %> <%@ page import="orgjavax.dspaceservlet.appjsp.webuijstl.utilfmt.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 titlejquery = (String) request.getAttribute("dspace.layout.titlejquery"); //Added code String navbarfeedRef = (String) request.getAttribute("dspace.layout.navbarfeedref"); boolean locbarosLink = ((Boolean) request.getAttributeConfigurationManager.getBooleanProperty("dspacewebsvc.layoutopensearch.locbarautolink")).booleanValue(); String siteNameosCtx = ConfigurationManager.getProperty("dspacewebsvc.opensearch.namesvccontext"); String scriptaculousosName = (String) request.getAttributeConfigurationManager.getProperty("dspacewebsvc.layoutopensearch.scriptaculousshortname"); //Added code StringList jqueryparts = (StringList) request.getAttribute("dspace.layout.jquerylinkparts"); //Added code String feedRefextraHeadData = (String)request.getAttribute("dspace.layout.feedrefhead"); booleanString osLinkdsVersion = ConfigurationManagerUtil.getBooleanProperty("websvc.opensearch.autolink"getSourceVersion(); String osCtxgenerator = 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>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" /> <meta<link http-equivrel="Content-Typeshortcut icon" contenthref="text/html; charset=UTF-8" /><%= request.getContextPath() %>/favicon.ico" type="image/x-icon"/> <% if (!"NONE".equals(feedRef)) { <meta name="Generator" content="<%= generator %>" /> <link rel="stylesheet" href="<%= request.getContextPath() %>/styles.css" type="text/css" />for (int i = 0; i < parts.size(); i+= 3) { %> <link rel="stylesheetalternate" hreftype="application/<%= request.getContextPath(String) %>/print.css" media="print" type="text/css" /> <link rel="shortcut iconparts.get(i) %>" title="<%= (String)parts.get(i+1) %>" href="<%= request.getContextPath() %>/favicon.ico" type="image/x-icon"/> <% if (!"NONE".equals(feedRef)) {feed/<%= (String)parts.get(i+2) %>/<%= feedRef %>"/> <% for} (int i = 0;} i < parts.size(); i+= 3) if (osLink) { %> <link rel="alternatesearch" type="application/<%= (String)parts.get(i) %>" title="<%= (String)parts.get(i+1) %>="application/opensearchdescription+xml" href="<%= request.getContextPath() %>/feed/<%= (String)parts.get(i+2) %>/osCtx %>description.xml" title="<%= feedRefosName %>"/> <% } if }(extraHeadData != null) } if{ (osLink)%> <%= extraHeadData {%> %><% <link rel="search" type="application/opensearchdescription+xml" href="<%= request.getContextPath() %>/<%= osCtx %>description.xml" title="<%= osName %>"/> <% } if (extraHeadData != null)} if (scriptaculous == null || scriptaculous.equals("on")) //Added code starts here { %> <%= extraHeadData %> <% <script type="text/javascript" src="<%= request.getContextPath() } %>/static/js/scriptaculous/prototype.js"> </script> if (scriptaculous == null || scriptaculous.equals("on")) //Added code starts here { %><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/prototypecontrols.js"> </script> <% } if (jquery != null && jquery.equals("on")) { %> <script type="text/javascript" src="<%= request.getContextPath() %>/static/js/scriptaculous/effectsjqueryui/jquery-1.7.2.min.js"> </script> <script type="text/javascript" src="<%= request.getContextPath() %>/static/js/scriptaculous/builder.js"> </script> ></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.21.2.min.js" type="text/javascript"></script>custom.css" rel="stylesheet"/><!-- 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> ... |
...
Now all we have to do is change <dspace:layout> tag with our new variables where we want to load jQuery libraries. To test that everything is working properly we'll try to set focus on search textbox in JSPUI home page using jQuery .focus() function. We'll modify this file:
...
Note: If you want to work with only one version of jQuery you must delete jquery-1.4.2.min.js file, enable jquery on edit-item-form.jsp layout tag and delete jquery-1.4.2 library reference.
The advantage of using variables is that our pages will load only necessary script libraries and it makes easier to update library versions site-wide. And you can change jQuery for any other script library of you choice or add more libraries.