Revision as of 10:13, 1 March 2010

APPLICATION AREAS
Home Interface Conception & Design User Interface Evaluation Interface Development
PROJECTS
Pattern Library Publication Management Digitization Lifecycle Research- and Metadata Handling Usability Report Corporate & Interface Design (under Rework) Page Index
edit

Development of Reference HTML[edit]

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://zim01.gwdg.de/repos/smc/trunk/04_Design/03_GUI_Design/03_interface_development/eSciDoc_Component_Library/

Integration of GUI components[edit]

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:

<head>
<title><h:outputText value="#{ApplicationBean.appTitle}"/></title>
<link rel="sword" type="application/xml" title="Sword Servicedocument Location" href="#{ApplicationBean.pubmanInstanceUrl}/pubman/faces/sword-app/servicedocument"/>

<jsp:directive.include file="header/ui/StandardImports.jspf" />

<jsp:directive.include file="home/HomePageFeedLinks.jspf" />
</head>

The <head> section imports all CSS and JavaScript (jQuery) with <jsp:directive.include file="header/ui/StandardImports.jspf" />

<link href="../../cone/js/jquery.suggest.css" rel="stylesheet" type="text/css" />
<link href="./resources/eSciDoc_CSS_v2/main.css" type="text/css" rel="stylesheet"/>

<h:outputText value="#{ApplicationBean.pubmanStyleTags}" escape="false"/>
<script type="text/javascript" language="JavaScript">var cookieVersion = "<h:outputText value='#{ApplicationBean.cookieVersion}'/>";</script>
<link rel="search" type="application/opensearchdescription+xml" title="<h:outputText value='#{lbl.openSearch_desc} #{lbl.openSearch_shortDesc} #{Header.type}'/>" href="<h:outputText value='#{ApplicationBean.pubmanInstanceUrl}#{ApplicationBean.appContext}' />search/OpenSearch.jsp" />
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>

<script type="text/javascript" language="JavaScript" src="resources/scripts.js">;</script>

<script src="./resources/eSciDoc_JavaScript/eSciDoc_javascript.js" language="JavaScript" type="text/javascript">;</script>

GUI components are 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
`-- eSciDoc_JavaScript
    |-- eSciDoc_component_JavaScript
    |   `-- DateJS
    |       `-- easterEggs
    |           `-- skin_PubWoman
    |               |-- images
    |               `-- styles
    `-- jquery

CSS[edit]

All CSS is invoked by the main CSS. It calles at first the core CSS framework:

Header Section Components[edit]

Meta Menu
Logo
Search Menu
Main Menu

Common Content Components[edit]

Content Menu (Options, Actions)
Breadcrumb
Title
Status
Message (Optionally)

Content Components[edit]

Paginator
Grid List (Not R4.0)
Bibliographic list (short and medium)
Bibliographic list (simple)
Wizard
Edit Item
View Item

Implementation of JSPF Structure[edit]

A JSPF is built upon one or more blocks of the Reference HTML. To prepare the JSPF structure a HTML component is separated in reusable snippets and nested into the JSPF.

JSPFs[edit]

Application layout
List Items
View Item
Edit Item
...

After a JSPF is prepared, UIE hands it over to Dev/Presentation for debug and implementation into the presentation layer. If implementation leads to a change of the intended appearance the JSPF needs to be fine tuned by UIE again.

Difference between revisions of "User Interface Components"