User Interface Components

=Development of Reference HTML=

All eSciDoc interfaces should derive from a defined set of HTML reference components. The html-components are hosted here. As implementation is always a bit ahead they may not be in sync to the JSPs. This is also the place where an online pattern library will be forthcoming to offer access to third party development as well:

https://subversion.mpdl.mpg.de/repos/smc/trunk/04_Design/03_GUI_Design/03_interface_development/index.html

=Integration of GUI components=

This section is outdated after PubMan Release 6.2

The following documentation refers to the productive development environment (e.g.PubMan). The example /pubman_presentation/src/main/webapp/HomePage.jsp shows how CSS and JS is integrated:

 





The section imports all CSS and JavaScript (jQuery) with 

 

...

;

;

CSS and JS is hosted in the resource folder which has the following structure.

.
 * -- eSciDoc_CSS_v2
 * |-- eSciDoc_component_css
 * |-- eSciDoc_global_css
 * `-- themes
 * |-- skin_PubMan
 * |  |-- images
 * |  `-- styles
 * |-- skin_classic
 * |  |-- images
 * |  `-- styles
 * `-- skin_highContrast
 * |-- images
 * `-- styles

For the CSS the first part is now explained: 'eSciDoc_CSS_v2'. We'll come to the JS part later.

Prerequisites
As we deal with a web application we can influence what has been loaded into the DOM directly. Especially for CSS manipulations in vitro it is recommended to use firefox plugins like 'Web Developer'. The most efficient approach to edit CSS is to change the CSS in the local DOM and check the preview. Changes can later be integrated and checked for browser compatibility:



CSS Files
A more detailed documentation of the customizable CSS part can be found here.



The main.css is a preselector of all further CSS and calls the following files:

/* import eSciDoc global styles | globale eSciDoc-Stylesheets einbinden */ /* import eSciDoc core | eSciDoc core einbinden */ @import url(./eSciDoc_global_css/eSciDoc_core_em.css);

/* import component specific styles | komponentenspezifische Stylesheets einbinden */ /* import header styles | das Stylesheet für den Seitenkopf einbinden */ @import url(./eSciDoc_component_css/header.css); /* import info page styles | das Stylesheet für die Info Seiten einbinden */ @import url(./eSciDoc_component_css/infoPage.css); /* import extended paginator component styles | das Stylesheet für die Komponente "erweiterter Paginator" einbinden */ @import url(./eSciDoc_component_css/extPaginator.css); /* import list component styles | das Stylesheet für die Listenkomponenten einbinden */ @import url(./eSciDoc_component_css/lists.css); /* import full item component styles | das Stylesheet für die Komponente für die Itemvollansicht einbinden */ @import url(./eSciDoc_component_css/fullItem.css); /* import single elements styles | das Stylesheet für die einzelnen Elemente einbinden */ @import url(./eSciDoc_component_css/singleElements.css);

eSciDoc_core_em.css

This contains all basic elements from which interface components are composed. It defines fixed sizes as a standard set and basic definitions of position and dimensions.

This example shows that elements first get a basic formatting and than a fixed size.

/*LABELS (base size-1px)*/ .free_label, .xTiny_label, .tiny_label, .xSmall_label, .small_label, .medium_label, .large_label, .xLarge_label, .double_label, .xDouble_label, .quad_label, .huge_label, .xHuge_label, .half_label, .full_label { padding-left: 0.09em; display: inline; overflow: hidden; margin: 0px; margin-right: 0.09em; white-space: nowrap; float: left; }

.xTiny_label { width: 1.28em; }

header.css

Refers to the persistent area above the dynamic content area. It prepares the stage menus, logo, search, title and breadcrumb. It is well commented and classes have a speaking name.

lists.css

Item lists have their own css file which is also relevant for view and edit pages. List elements such as header and group labels are used commonly.



As there are two different lists (bibliographic, table). Both correspondent to semantics as far as possible. The bibliographic list is built with list elements whereas the table list is built with table elements. So basically all table related classes refer to the table list view which is not documented here explicitly.

.listItem td .itemHeadline { width: 28.01em; padding-bottom: 0.19em; }

.loggedIn .listItem td .itemHeadline { width: 18.65em; }

.listHeader th .itemHeadline { width: 28.01em; }

.loggedIn .listHeader th .itemHeadline { width: 18.65em; }

At the end of the lists.css there are additional attributes for print layout of lists because users often like to get those lists printed.

fullitem.css



@media print { .fullItem .fullItemControls {display: none;} }

JavaScript
JS is included in most of the .jsp here in the section:

/pubman_presentation/src/main/webapp/*.jsp

JSPs usually call the

header/ui/StandardImports.jspf

It then points to the .js files:

;

;