0
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
WHERE DO WE START?

http://downloads.gosquared.com/help_sheets/07/CSS%20Help%20Sheet.pdf
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 theme...
MAKING YOUR OWN THEME

Copy & Rename the Mirage folder to
MyTheme from the original source to your
local theme customizati...
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 transfo...
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 ...
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 Jav...
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 ...
DISABLING THIS IN XSL
MyTheme.XSL reveals which stylesheets get
applied

Note that older themes Reference, Kubrick and cla...
NAVIGATION.XSL
Limit which templates get applied after
building the search box.

<xsl:apply-templates select="*[not(@id='a...
PREVENT FROM GETTING INTO DRI
from DRI
aspect.ViewArtifacts.Navigation.browse

Remove in aspect Java Classes
dspace-xmlui/...
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 cust...
WHAT IF THE CHANGE IS WANT TO MAKE IS
NOT IN THE DRI?

Theme related static components
including the header and footer
are...
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:...
Upcoming SlideShare
Loading in...5
×

Introduction to XMLUI and Mirage Theming for DSpace 3

2,559

Published on

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.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • Tenho um problema, que talves voce possa me ajudar, como faço para falar com voce?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,559
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
115
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to XMLUI and Mirage Theming for DSpace 3"

  1. 1. XMLUI Primer High impact tips and tricks to enhance the DSpace User Experience Bram Luyten www.atmire.com
  2. 2. WHAT WE WON’T BE DOING
  3. 3. THIS SHOULD BE MORE LIKE
  4. 4. WHERE DO WE START? http://downloads.gosquared.com/help_sheets/07/CSS%20Help%20Sheet.pdf
  5. 5. WHAT HAPPENS IN MIRAGE CSS?
  6. 6. WITHOUT STYLE.CSS
  7. 7. STYLE.CSS TAKES CARE OF DIV width, height, percentages Font weights & relative sizes Colours Some images
  8. 8. WITHOUT STYLE.CSS
  9. 9. STRIPPING DOWN EVEN FURTHER REMOVING BASE.CSS
  10. 10. WAIT? The browser should by itself know how to render basic elements, such as lists, right?
  11. 11. RESET.CSS REMOVES ALL BROWSER INFLUENCE WITHOUT RESET.CSS (IN CHROME):
  12. 12. 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
  13. 13. 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
  14. 14. TELL DSPACE TO START USING YOUR THEME <themes> section in /dspace/config/xmlui.xconf
  15. 15. CHANGING PAGE STRUCTURE http://www.mulberrytech.com/quickref/XSLT_1quickref-v2.pdf
  16. 16. 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
  17. 17. DISSECTING THE DSPACE PAGES INTO PIECES
  18. 18. WHAT DOES THE XHTML TELL US XHTML = the final end product of the XML pipeline
  19. 19. PIECES OF THE HOMEPAGE buildHeader ds-body ds-options
  20. 20. 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, ...
  21. 21. DRI - BODY The DIV ids tell us which aspect is responsible for putting this part into the DRI
  22. 22. DRI - OPTIONS The DIV ids tell us which aspect is responsible for putting this part into the DRI
  23. 23. HOW XSL OPERATES ON DRI CONTENT
  24. 24. 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?
  25. 25. POP QUIZ What are the two strategies for removing the Browse element from the menu ?
  26. 26. 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
  27. 27. DISABLING THIS IN XSL MyTheme.XSL reveals which stylesheets get applied Note that older themes Reference, Kubrick and classic refer to different xsl’s.
  28. 28. 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')]"/>
  29. 29. 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
  30. 30. REMOVE IN ASPECT JAVA CLASS EXAMPLE dspace-xmlui/src/main/java/org/dspace/app/xmlui/ aspect/viewArtifacts/Navigation.java
  31. 31. 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
  32. 32. 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.
  33. 33. THE BIG PICTURE
  34. 34. THIS IS ALL FOR NOW
  35. 35. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×