As we wrap up the development of the core data transformation engine, we are starting to think about the presentation layer. How can we specify our presentations so that we don’t have to modify them when the JavaScript library APIs, HTML standards, etc., change?
One of the things we’ve worked on is a manuscript viewer that shows an image of a page alongside a transcription. This is a common need in textual digital humanities.
I’m thinking something along the lines of the following based on the work we’ve done for the Donne project (using Radiant to build up an XML description that can be transformed via XSLT):
1
2
3
4
5
6
7
8
9
10
11
12
|
<viewer>
<page>
<!-- definition of the page content -->
</page>
<toc>
<!-- ordered list of page metadata -->
<r:for-each select="radiant:find('/path/to/transcript/pages')/*" as="page">
<page-entry name="<r:value select="f:name($page)" />" />
</r:for-each>
</toc>
</viewer>
|
This is based on the following skeleton that we’re using now:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<r:choose>
<r:when test="/resource">
<!-- page content -->
</r:when>
<r:otherwise>
<div id="viewer"></div>
<script>
$('#viewer').ajaxPager({
// various options
type: 'ajax',
pages: Array(
<r:for-each select="radiant:find('/path/to/transcript/pages')/*" as="page">
{type:"ajax",url:"/path/to/viewer/<r:value select="f:name($page)"/>"},
</r:for-each>
{} // until we add logic to remove the final ',' in the <r:for-each />
)
});
</script>
</r:otherwise>
</r:choose>
|
Using the XML description frees us to use a different implementation without having to revisit the project as long as we are using the same semantics. We’ll be looking to a few more projects to figure out some patterns before we start making design decisions, but this is a good indication of how we’re planning on approaching the presentation layer of DH projects.