Introduction to XMLUI and Mirage Theming for DSpace 3
 

Introduction to XMLUI and Mirage Theming for DSpace 3

on

  • 1,261 views

ELAG 2013 Workshop on customizing the DSpace XMLUI Mirage interface. ...

ELAG 2013 Workshop on customizing the DSpace XMLUI Mirage interface.

The workshop first explores what can be changed in CSS, exploring the different functions of the style.css, base.css and reset.css files.

It then highlights where all of these files can be found and where you need to deploy your own customizations.

Digging down an additional layer, it is explained how XSL can be modified to remove or change entire blocks of functionality on a page.

The key learning here is that you can alter the representation of whatever comes in through the DSpace DRI using XSL. However, if you need to include additional data or other DSpace info, you have to make sure that it appears in the DRI first, before you can start transforming it with XSL.

Statistics

Views

Total Views
1,261
Views on SlideShare
1,255
Embed Views
6

Actions

Likes
1
Downloads
42
Comments
0

2 Embeds 6

https://twitter.com 5
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to XMLUI and Mirage Theming for DSpace 3 Introduction to XMLUI and Mirage Theming for DSpace 3 Presentation Transcript

  • XMLUI Primer High impact tips and tricks to enhance the DSpace User Experience Bram Luyten www.atmire.com
  • WHAT WE WON’T BE DOING
  • THIS SHOULD BE MORE LIKE View slide
  • WHERE DO WE START? http://downloads.gosquared.com/help_sheets/07/CSS%20Help%20Sheet.pdf View slide
  • WHAT HAPPENS IN MIRAGE CSS?
  • WITHOUT STYLE.CSS
  • STYLE.CSS TAKES CARE OF DIV width, height, percentages Font weights & relative sizes Colours Some images
  • WITHOUT STYLE.CSS
  • STRIPPING DOWN EVEN FURTHER REMOVING BASE.CSS
  • WAIT? The browser should by itself know how to render basic elements, such as lists, right?
  • RESET.CSS REMOVES ALL BROWSER INFLUENCE WITHOUT RESET.CSS (IN CHROME):
  • WHERE CAN WE FIND THESE FILES Original Mirage sourcefiles [dspace-src]/dspace-xmlui/src/main/webapp/themes Your own themes and local customizations [dspace-src]/dspace/modules/xmlui/src/main/webapp/themes In your live, deployed DSpace [dspace-install]/webapps/xmlui/themes
  • MAKING YOUR OWN THEME Copy & Rename the Mirage folder to MyTheme from the original source to your local theme customizations dir. Rename MyTheme/Mirage.xsl to MyTheme/MyTheme.xsl Rename global variables Mirage to MyTheme in MyTheme/sitemap.xmap
  • TELL DSPACE TO START USING YOUR THEME <themes> section in /dspace/config/xmlui.xconf
  • CHANGING PAGE STRUCTURE http://www.mulberrytech.com/quickref/XSLT_1quickref-v2.pdf
  • BASIC CONCEPT Information pulled from the database in Java classes gets represented in XML and goes to a chain of transformations before eventually being delivered as XHTML to the end user
  • DISSECTING THE DSPACE PAGES INTO PIECES
  • WHAT DOES THE XHTML TELL US XHTML = the final end product of the XML pipeline
  • PIECES OF THE HOMEPAGE buildHeader ds-body ds-options
  • THE DRI DOCUMENT DRI = Digital repository interface Page elements that are not in the DRI are either added by the theme or by aspects. Examples: scripts, css, ...
  • DRI - BODY The DIV ids tell us which aspect is responsible for putting this part into the DRI
  • DRI - OPTIONS The DIV ids tell us which aspect is responsible for putting this part into the DRI
  • HOW XSL OPERATES ON DRI CONTENT
  • WHERE TO LOOK FROM HERE? Theme XSL We want to change the final output of something already in DRI Aspect sitemaps and Java Code We want to put something new into the DRI or change the way how something is represented in DRI. The first question is always: Is the thing I want to affect already in the DRI or not?
  • POP QUIZ What are the two strategies for removing the Browse element from the menu ?
  • ANSWER 1. Prevent in the XSL that the DRI content makes it into the final XHTML 2. Ensure that the element doesn’t get in the DRI to begin with
  • DISABLING THIS IN XSL MyTheme.XSL reveals which stylesheets get applied Note that older themes Reference, Kubrick and classic refer to different xsl’s.
  • NAVIGATION.XSL Limit which templates get applied after building the search box. <xsl:apply-templates select="*[not(@id='aspect.viewArtifacts.Navigation.list.browse')]"/> or <xsl:apply-templates select="*[not(@n='browse')]"/>
  • PREVENT FROM GETTING INTO DRI from DRI aspect.ViewArtifacts.Navigation.browse Remove in aspect Java Classes dspace-xmlui/src/main/java/org/dspace/app/xmlui/ aspect/.../Navigation.java Search for addList(“browse”) to see all occurrences
  • REMOVE IN ASPECT JAVA CLASS EXAMPLE dspace-xmlui/src/main/java/org/dspace/app/xmlui/ aspect/viewArtifacts/Navigation.java
  • WAIT .. AM I NOT DOING TOO MUCH INTRUSIVE CHANGES? All of the files you change for your own theme will end up in your customization directory and NOT in the official source code files. Maven builds will tie them together
  • WHAT IF THE CHANGE IS WANT TO MAKE IS NOT IN THE DRI? Theme related static components including the header and footer are added by a particular XSL.
  • THE BIG PICTURE
  • THIS IS ALL FOR NOW
  • CREDITS http://www.dsmedia.nl/pics/slider3.jpg http://kiranconnolly.wordpress.com/2012/01/26/questions-and-answers/ http://www.epbot.com/2010/11/from-zero-to-awesome-in-less-than-12.html http://www.slideshare.net/tdonohue/making-dspace-xmlui-your-own http://images.thomann.de/pics/prod/287182.jpg