Overview

From DLXS Documentation

(Difference between revisions)
Jump to: navigation, search
(→XSL)
Current revision (21:12, 28 August 2007) (edit) (undo)
 
(4 intermediate revisions not shown.)
Line 1: Line 1:
-
<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
+
===Text Class Behaviors Overview===
-
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 <a href="search_htmlsource.html" target="_blank">HTML</a>.
+
-
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 <a href="http://quod.lib.umich.edu/cgi/t/text/text-idx?debug=tpl;page=simple&c=amverse" target="_blank">debug=tpl</a> 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]]
+

Current revision


[edit] Text Class Behaviors Overview

Retrieved from "http://webservices.itcs.umich.edu/mediawiki/dlxs13/index.php/Overview"
Personal tools