|
|
(One intermediate revision 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="value"]*?>
| + | |
- | | + | |
- | <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 "true"
| + | |
- | or "false", 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 "lib" and
| + | |
- | located at $DLXSROOT/web/lib. </p>
| + | |
- | | + | |
- | <p>Each class has a directory in "web".</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]]
| + | |