Overview

<p>This document describes the key aspects of DLXS User Interface technology.

It is intended as a fairly high level overview. It applies to DLXS Image, Text,

and FindAid Classes, but not Bib Class which lags behind in support for XML

and XSL. </p>

==Introduction==

<p>The DLXS Classes are CGI based web applications written using the Perl

programming language. The CGIs operate

between the web server and the data, and are also known as <em>middleware</em>.

The middleware is designed to keep data handling tasks separate from user interface

tasks as much as possible. The combination of Perl programming code, XML, and

XSLT help to achieve this. Each page served is created by generating

an XML data document and transforming it using XSLT to HTML for display in

the browser. </p>

<p>It is beyond the scope of this documentation to teach the fundamentals of

Perl, XML, XSLT and HTML. You may find you can comprehend most of

this documentation even if you are not very familiar with some of the technologies.

We will start with a high level view, increasing the complexity as we go. </p>

<p>The diagram below illustrates how a CGI takes an XML template,

populates it with data, and transforms it to HTML using an XSL stylesheet.</p>

[[Image:dlxsxmlxslhtml.png]]

==Breakdown of Components==

===XML Templates===

<p>An XML template exists for every page in the DLXS system. An XML

template is an XML file that contains

placeholders, called <strong>Processing Instructions</strong>. It is the starting

point for what will be an XML document full of dynamically generated data. </p>

<p>Templates vary depending on the purpose of the page. A search form page has

different requirements that a search results page, and the templates reflect

this. </p>

Take a look at this complete [http://www.dlxs.org/training/workshop200707/ui/search_template.xml XML template.] (Not all browsers can display XML. Try Firefox.). It is for a search form page in Text Class.

===XML===

<p>The CGI produces an XML document as a result of replacing a templates <strong>Processing

Instructions</strong>. The XML contains all of the data to be displayed in

the browser, however, the it lacks the formatting instructions needed by

the browser to display an attractive and functional user interface. </p>

<p>Take a look at this [http://www.dlxs.org/training/workshop200707/ui/search.xml XML] document.

It is the template above after having the PIs replaced by the CGI.</p>

<p>XML documents used in the user interface are totally different than the XML

documents that hold content such as the full text of a book or an electronic

Finding Aid, though portions of content will replace PIs in the XML for search

results page. If you want to know more about preparing data as XML, see [[Data Conversion and Preparation]].</p>

===Processing Instructions===

<p><strong>Processing Instructions</strong> or<strong> PIs</strong> are replaced

by the CGI with

dynamically generated data such as search results, and information used to

construct menus, forms and links in the user interface. Every Processing Instruction

is paired with a handler in the CGI for replacing the PI with data or other

information. </p>

<PI_IDENTIFIER_NAME [modifiername=&quot;value&quot;]*?>

<p>Above you can see the generic form of a Processing Instruction. PIs can optionally

have modifiers, though most do not. Modifiers pass additional information to

the CGI, affecting the replacement. </p>

<p>Processing Instructions are usually wrapped by XML tags for structure and

context. Some PIs get replaced by small amounts of data, such as the word &quot;true&quot;

or &quot;false&quot;, while others are replaced by large amounts of data, sometimes containing

additional XML tags.</p>

<p>The diagram below shows a snippet of the XML template. </p>

[[Image:xmltemplatesnip.png]]

<p>Next you see the snippet of the XML after Processing Instructions

have been replacedby the CGI. </p>

[[Image:xmlsnip.png]]

===XSL===

<p>XSL is the programming language used to transform the XML to HTML. An XSL

program is more commonly called an XSL Stylesheet. Each XML file specifies

the XSL Stylesheet to be used for transformation. It is common in DLXS for

one stylesheet to incorporate several other stylesheets stored in separate

files (for the convenience of sharing code). More on this later.</p>

<p>Take a look at this [http://www.dlxs.org/training/workshop200707/ui/searchforms.xsl XSL Stylesheet].

It is one of the stylesheets used to transform XML to HTML for the search form

page in Text Class. You might notice that XSL resembles XML. In fact, it <strong>is</strong> XML.

XML takes on many different forms, one is XSL. You might also notice that an

XSL stylesheet contains XSL templates. An XSL template is a little bit like

a subroutine or function in other programming languages, and are not to be

confused with [[#XML Templates|XML Templates]]. </p>

<p>The diagram below shows the snippet of XSL that transforms the XML above to

HTML. </p>

[[Image:xslsnip.png]]

===HTML===

<p>HTML is the format output by the CGI to the browser. It is the result of applying

the XSL Stylesheet to the XML.</p>

<p>Take a look at this [http://www.dlxs.org/training/workshop200707/ui/search_htmlsource.html HTML].

It is the complete HTML source for the Text Class search form.</p>

<p>The diagram below shows the snippet of HTML generated by transforming the

XML with XSL. </p>

[[Image:htmlsnip.png]]

===Language Map===

<p>All text that appears as part of the user interface is stored in an XML file.

Phrases are assigned keys, and the keys are used in the XSL to retrieve phrases.

The potential exists to have interfaces in different languages. A default map

resides in the web directory for each Class and is called langmap.en.xml. The

CGI incorporates the map file into the XML file. </p>

===Javascript===

<p>Javascript is another key technology that plays a role in the user interface.

Like CSS, Javascript is applied by the browser, not the server.</p>

===Cascading Stylesheets (CSS)===

<p>DLXS uses CSS extensively to further refine the layout of the HTML. Cascading

Stylesheets are very different from XSL Stylesheets. XSL Stylesheets affect

the structure of the HTML document (e.g., the hierarchy of the elements). Cascading

Stylesheets affect the display of the HTML structure. CSS is great for formatting

with fonts and colors, and it can even be used to show or hide a portion of

the HTML. CSS is applied by the browser, not the server.</p>

===Collection Manager===

<p>Some of the most common customizations can be done in Collection Manager.

For example, the title of the collection. Image Class can be customized quite

extensively in Collection Manager. For example, the display of data fields

can be configured extensively. Customizations are relatively easy to make in

Collection Manager. Use it whenever possible. </p>

===Fallback===

<p>Fallback is a mechanism used by DLXS CGIs to handle the task of selecting

user interface files (e.g., XML templates) based on whether the end user is

working at the class, group, or collection level, and whether user interface

customizations have been made.</p>

<p>DLXS allows collection specific user interface customizations.

Similarly, groups of collections can share a custom interface. The DLXS Classes

each have a default interface that is used if there are no customizations at

the group or collection levels. </p>

<p>When the CGI needs a user interface file, for example, search.xml for the

text class search form, the Fallback mechanism considers a number of factors

when choosing a file.</p>

<ul>

<li>How many collections are involved? </li>

<li>Is a group involved?</li>

<li>Does the file exist

in the collection's web directory?</li>

<li>Does the collection have a default

group?</li>

<li>Does the file exist in the group's

web directory?</li>

</ul>

<p>Fallback is complex due to the vast number possible situations,

but has great benefits. It allows very specific aspects of the user interface

to be customized while all other aspects <em>fall

back</em> to the defaults at the group or class level. This reduces

duplication and in the long term minimimizes maintenance work (and the headaches

that go with it). </p>

<p><strong>The principle

idea is to duplicate code as little as possible, and utilize fallback as

much as possible.</strong></p>

<p>All user interface files are stored in the file system under <tt>$DLXSROOT/web</tt>. </p>

<p>There is a directory for files shared across the classes called &quot;lib&quot; and

located at $DLXSROOT/web/lib. </p>

<p>Each class has a directory in &quot;web&quot;.</p>

<ul>

<li>i/image</li>

<li>t/text</li>

<li>f/findaid</li>

<li>b/bib</li>

</ul>

<p>If a group or collection requires customization, it may be necessary to create

a web directory based on the group or collection ID. </p>

<ul>

<li>c/collid (e.g., a/amverse)</li>

<li>g/groupid (e.g., b/bhl)</li>

</ul>

<p>You can see a report of the Fallback file selection process by adding [http://quod.lib.umich.edu/cgi/t/text/text-idx?debug=tpl;page=simple&c=amverse debug=tpl] to

the URL. The CGI first checks for a file in the collection level directory,

then group, and finally at the class level. </p>

<hr size="1" width="90%">

Next: [[Customizing the User interface]]