ixdesk.xsltDesktop-Darstellung2012-09-14HerbertSchiemannh.schiemann@herbaer.de
Diese Datei bestimmt
zusammen mit ixdesk.js und ixdesk.css
eine Darstellung der Startseite, die für einen Desktop-Computer geeignet ist.
Die Datei ixdesk.stub verknüpft die Startseite
mit dieser Transformation.
Die Darstellung zeigt auf der linken Seite einen „Navigationsbaum”.
Die Verweisziele, auf die die Einträge im Navigationsbaum verweisen,
werden eingebettet angezeigt.
Nach Maßgabe des Parameters
p_help
wird die Hilfe zur Startseite
(ixdesk_help.xhtml.LANG,
deutschsprachige Hilfe ixdesk_help.xhtml.de)
in die Darstellung eingefügt.
Die Javascript-Funktionen (ixdesk_help.js) und
CSS-Regeln (ixdesk_help.css) zur Hilfe
werden direkt durch diese Transformation eingebunden.
Einträge des Navigationsbaums
In den Navigationsbaum werden Abschnitte (div-Elemente)
der obersten Ebene (Kindelemente des body-Elements)
eingetragen,
deren Attribut class mit dem Wort
"section" beginnt.
Die "Navigations-Abschnitte" müssen eine Überschrift
(h2, h3,
h4, h5
oder h6)
und ein id-Attribut enthalten.
Auch die div-Elemente in einem Navigations-Abschnitt,
deren Attribut class mit dem Wort
"section" beginnt,
sind "Navigations-Abschnitte".
Diese verschachtelten Navigations-Abschnitte werden aus ihrem Element herausgenommen
und ihrem Eltern-Element nebengeordnet.
Das erzeugte Dokument verwendet die folgenden ID-Werte.
Diese Liste enthält auch die ID-Werte, die aus der Hilfe übernommen werden.
audio
Das audio-Element zur Klangwiedergabe.
div_title
Die "Titelleiste" mit dem Logo-Feld, dem Titel (Überschrift)
und dem Klang-Schalter.
div_logo
Das "Logo"-Feld links in der Titelleiste.
div_head
Die Überschrift in der Titelleiste: ein div-Element,
das das h1-Element enthält.
div_links
Die Verweis-Leiste innerhalb der Titelleiste über der Überschrift:
zwei verschachtelte div-Elemente,
die p-Elemente enthalten,
die jeweils ein a-Element enthalten.
div_sound
Der "Klangschalter" in der Titelleiste:
eine Schaltfläche, die die Tonwiedergabe startet und anhält.
div_navig
Das Feld mit dem Navigationsbaum auf der linken Seite.
Der Navigationsbaum ist darin als verschachteltes
div-Element enthalten.
Die Verschachtelung macht die CSS-Regeln einfacher.
help_link
Die Schaltfläche "Mehr ..." in der Verweisliste.
navig_tree
Das Wurzelelement (div-Element) des Navigationsbaums.
div_content
Das Feld mit dem Haupt-Inhalt.
iframe
Das iframe-Element zur Anzeige eingebetteter Inhalte.
help_frame
Ein "Aufklapp-Fenster" mit einer kurzen Hilfe zu den Tasten-Funktionen.
nav_DIVID
Ein Eintrag im Navigationsbaum.
DIVID ist die ID des div-Elements,
auf das der Eintrag verweist.
Präfix des Pfades von JavaScript- und CSS-Dateien
Hilfe-Abschnitte mit Einträgen im Navigationsbaum erzeugen?
(0 nein, 1 ja)
Die ID des Abschnitts, der sichtbar ist, bevor Javascript ausgeführt wird.
Auch wenn Javascript deaktiviert ist, soll das Erscheinungsbild ansprechen.
Das ist wichtig für Vorschaubilder in Suchmaschinen.
Wurzelelement der Startseite
Kennung der Sprache
Die Wurzel der einzufügenden Hilfe (ht:div-Kindelemente)
Die Wurzel
Der HTML-Rahmen:
Der Kopf enthält die CSS-Regeln und Javascript-Funktionen zur internen Hilfe,
falls diese eingefügt wird.
iconstylesheetstylesheet
var tellabout = {};
tellabout.subject = "";
tellabout.i_like = "";
onload = function () {
initialize ();
if (initialize_help) initialize_help ();
};
Die Komponenten für das Layout:
die Kopfleiste,
die Navigationsleiste auf der linken Seite,
der Hauptinhaltsbereich
und das iframe - Element,
das stets die gleiche Position wie der Hauptinhaltsbereich einnimmt.
audioautosound
Herbär
♫
iframehidden
↓
↑
←
→
n
u
↲
x
f
m
w
p
h
Verweise unter der Hauptüberschrift
Der Navigations-Baum
Jeder Eintrag im Navigations-Baum ist ein div-Element.
Untergeordnete Einträge sind verschachtelte
div-Elemente.
Das class-Wort head
kennzeichnet Einträge, zu denen es untergeordnete Einträge gibt.
CSS-Regeln interpretieren dieses Wort so, dass der Eintrag "gefaltet" darzustellen ist:
Untereinträge werden nicht dargestellt.
Javascript ersetzt head durch exp,
wenn der Eintrag expandiert wird.
Einträge ohne Untereinträge kennzeichnet das
class-Wort end.
Den Text des Baumknotens enthält ein p-Element
mit zwei span-Elementen als Kindern.
Das erste span-Element
mit dem class-Wort navig_button
ist gedacht für ein Symbol,
das ein Eintrag als expandiert, gefaltet oder als Endknoten kennzeichen kann.
Der Inhalt bleibt leer, die Darstellung bleibt CSS-Regeln überlassen.
Das zweite span-Element
mit dem class-Wort navig_text
enthält den Titel des Abschnitts, auf den der Eintrag verweist.
headend
Der Modus navigsect
kennzeichnet die Vorlage für einen Abschnitt, auf den der Navigationsbaum
(Inhaltsverzeichnis) verweist.
Er stellt sicher, dass verschachtelte Abschnitte,
deren übergeordneter Abschnitt nicht im Navigationsbaum eingetragen ist
(Attribut class
beginnt nicht mit section),
als normale Unterabschnitte dargestellt werden.
Abschnitte mit einem Eintrag im Navigationsbaum
Das class-Attribut
der Abschnitte (div-Elemente),
zu denen ein Eintrag im Navigationsbaum erzeugt wird,
beginnt mit section.
Unterabschnitte, zu denen ebenfalls ein Eintrag im Navigationsbaum erzeugt wird,
werden nicht als verschachtelte Kindelemente,
sondern als nebengeordnete div-Elemente dargestellt.
Dem Attribut class wird das Wort hidden
angefügt.
Hinweis auf die Übersetzungsmaschine
Die Hauptüberschrift wird im Inhaltsfeld ignoriert,
sie steht bereits in der Titelleiste.
Die Verweisliste steht ebenfalls schon in der Titelleiste
und wird deshalb hier ignoriert.
Andere Elemente werden rekursiv kopiert.
Elemente und Attribute werden rekursiv kopiert,
sofern es keine spezielle Vorlage gibt.