XSLT Transformations

Transforming the XML into HTML with oXygen

The template comes with some XSL slides, that allow you to transform the TEI-XML transcription into the HTML presentations (e.g. the Diplomatic Transcription View).

If you use XSLT to generate your HTML files on the basis of the TEI-XML transcription like that, it allows you to separate your source transcription from all the different visualisations on your website. It also means that if you update your TEI-XML file, reapplying the transformations will make sure that the change is potentially made visible across all your HTML web pages.

In the following, we'll explain how you can set this process up with oXygen

1. Open the TEI-XML file you will use as your source file in oXygen. In this template, that file can be located at collection/tei/DCHM-example.xml.
2. Click on the wrench button -- also called Configure Transformation Scenario(s).
3. In the dialogue box, click New, and then select XML Transformation with XSLT.
4. In the Name field, change the name into something easily recognisable. We'll be using the index.xsl stylesheet, so we could call this something like DCHM-template - index.
5. In the XML URL field, you'll want to refer to the current file. You can do that by keeping the default function there: ${currentFileURL}.
6. Then, in the XSL URL field, we need to specify where to locate the transformation stylesheet we want to apply to our XML file. If you are sticking to the current template structure, you can find the index.html stylesheet here: ${cdfu}/../../docs/assets/xsl/index.xsl. This tells oXygen to start from the folder that contains our XML file (CFDU, or 'current file directory'), then move two folders up (../../), and then go down the docs folder, down to assets, then to xsl, to finally find our index.xsl stylesheet.
7. Next, click on the Output tab in the dialogue box.
8. This is where we can indicate where we want to save the HTML file that will be the result of our XSL transformation. Activate the text box to insert the path by choosing the 'Save as` option.
9. In the text box next to Save As, you can now enter the path to the place where we want to write our HTML file. If you are sticking to the current template structure, you can use the following path: ${cfd}/../../docs/index.html. This will again tell oXygen to start from the folder that contains our XML file (CFD, or 'current file directory'), then move two folders up (../../), and then go down the docs folder, and write our HTML file (index.html) there.
10. If you want, you can also check the open in Browser/system application box, if you want the result to immediately open in your default browser, to check the results.
11. Click OK to save your configurations.

If you now click the Apply Associated button at the bottom of the dialogue box, oXygen will apply the index.xsl stylesheet on your TEI-XML document, to generate the index.html web page.

You can repeat these steps to also create transformation scenarios for the other three stylesheets, just replace index (in the name field (see 4), in the XSL URL field (see 6), and in the Output>Save As field (see 9)) with the relevant stylesheet names (e.g. diplomatic, reading, and toplayer).

This process can be sped up a little bit by clicking Duplicate, rather than New -- so you can start from your existing scenario.

Once you have all your scenarios set up, be sure to select them (check marks), and hit 'Apply Associated`. This will apply all your transformations scenarios at once.

IMPORTANT! This action (applying the transformation scenarios) will overwrite your existing index.html, diplomatic.xml, reading.xml, and toplayer.xml files! Of course, if you have been versioning your progress and committing regularly, you should still be able to recover your old files, if you would need to.