Das Glossar-Objekt besteht analog dem oben dargestellten Konstrukt aus zwei Objekt-Definitionen: dem Referenz-Objekt und einer Datentabelle.
Die Datentabelle strukturiert ein zweisprachiges Glossar für deutsche und englische Inhalte mit wahlfreier Sprach-Reichweite: heterolinguale Inhalte können optional übertragen werden. Sinnvoll ist dies bei technischen Begriffssammlungen, die teilweise englischsprachige Wörter unübersetzt übernehmen.
Bestimmte Werte wie Änderungsdatum oder Names des Redakteurs werden als unsichtbare Attribute (vorangestellter Unterstrich der Element-Id, z.B. _create_uid) mit in die Datentabelle geschrieben, indem die Werte per JavaScript in die Standard-Eingabe-Form form0 gesetzt werden (s. JS-Funktion form0Submit). Desweiteren kann die JavaScript-Funktion das Interface in Abhängigkeit von einem Wert für das Feld attr_dc_coverage verändern – je nach dem, welchen Wert der Redakteur für die sprachliche Reichweite auswählt.
Beispiel-Code: Interface-Element für die Datentabellen-Definition
<script type="text/javascript"> <!--// // Initialize variables. var langs = new Array(); langs[ 0] = 'ger'; langs[ 1] = 'eng'; /** * OnSubmit-Event: form0 */ function form0Submit( fm) { var lang_attrs = new Array(); lang_attrs[ 0] = 'titlealt'; lang_attrs[ 1] = 'attr_dc_description'; var b = true; for ( var i = 0; i < lang_attrs.length; i++) { for ( var l = 0; l < langs.length; l++) { var lang = langs[ l]; var tr = document.getElementById( "tr_" + lang_attrs[ i] + "_" + lang); if ( tr.style.visibility == "visible") { var el = fm.elements[ lang_attrs[ i] + "_" + lang]; if ( el) { for ( var c = 0; c < tr.childNodes.length; c++) { var div = tr.getElementsByTagName('td')[0].getElementsByTagName('div')[0]; var imgs = div.getElementsByTagName('img'); var img; if ( imgs.length == 0) { img = document.createElement( "img"); img.setAttribute( "border", 0); img.setAttribute( "align", "absmiddle"); div.appendChild( img); } else { img = imgs[ 0]; } if ( el.value.length == 0) { img.setAttribute( "src", "<dtml-var MISC_ZMS>ico_error.gif"); img.setAttribute( "title", "<dtml-var "getLangStr('ATTR_MANDATORY',manage_lang)">"); b = false; } else { img.setAttribute( "src", "<dtml-var spacer_gif>"); img.setAttribute( "title", ""); } } } } } } return b; } /** * OnChange-Event: attr_dc_coverage */ function attr_dc_coverageChange( el) { var lang_attrs = new Array(); lang_attrs[ 0] = 'delimiter_local'; lang_attrs[ 1] = 'titlealt'; lang_attrs[ 2] = 'coverage_titlealt'; lang_attrs[ 3] = 'attr_dc_description'; lang_attrs[ 4] = 'synonyme'; lang_attrs[ 5] = 'abrev'; lang_attrs[ 6] = 'coverage_abrev'; lang_attrs[ 7] = 'source'; var i = el.selectedIndex; var v = el.options[ i].value; for ( var i = 0; i < lang_attrs.length; i++) { for ( var l = 0; l < langs.length; l++) { var lang = langs[ l]; var tr = document.getElementById( "tr_" + lang_attrs[ i] + "_" + lang); if ( v == 'local.'+lang || v == 'global') { tr.style.visibility = "visible"; tr.style.display = ""; } else { tr.style.visibility = "hidden"; tr.style.display = "none"; } } } } var fm_form0 = document.forms['form0']; fm_form0.onsubmit = function() { return form0Submit(this) }; var el_attr_dc_coverage = fm_form0.elements['attr_dc_coverage']; el_attr_dc_coverage.onchange = function() { attr_dc_coverageChange(this) }; attr_dc_coverageChange( el_attr_dc_coverage); //--> </script>
Hinweis: Datentabellen können zwar Interface-Elemente enthalten und erlauben somit eine Datenvalidierung während der Dateneingabe per JavaScript. Jegliche Darstellungs-Logik sollte jedoch von der Datenstruktur getrennt werden und im Container definiert werden.
Siehe dazu auch die objChangeObjEvt-Methode im Anhang.
Folgende Methoden sind hervorzuheben:
- browse_objs(): Objekt-Browser für die Auswahl der inline-Referenzen
- f_css_defaults(): spezielle CSS-Definitionen, die konventionell vor den Strom des Standard-CSS geschrieben werden
- getLinkHtml(): löst das inline-Konstrukt in HTML auf
- standard_html_header() Diese primitive Methode, die Code-Ergänzung in die gleichnamige Standard-DTML-Methode: der Ansatz wird dazu genutzt, um JavaScript-Aufrufe im HTML-Header zu ergänzen. glossary_js erzeugt per DOM-Operation popups für inline-Glossar-Referenzen.
<!--// BO refGlossary.standard_html_header //--> <script language="JavaScript" src="<dtml-var ZMS_ROOT>/glossary_js" type="text/javascript"></script> <script type="text/javascript">window.onload=function(){enableTooltips()};</script> <!--// EO refGlossary.standard_html_header //-->
Der Glossar-Inhalt wird über einen inline-Methodenaufruf, z.B.
<dtml-var expr="getLinkHtml('GS1 Germany','refGlossary',REQUEST)"></dtml-var>
in das title-Attribut des a-Elements gerendert.
<p id="e37"><a href="http://127.0.0.1:8080/ content/e18/index_ger.html?selectedCh=G&selectedId=e19" title="GS1 Germany = Abk. für Centrale Coorganisation. Institut …." class="glossary">GS1 Germany</a> (vormals CCG…
Das glossary_js-JavaScript erzeugt durch entsprechende DOM-Operationen ein span-Element der Klasse tooltip, das letztlich per CSS entsprechend aufwändig formatiert wird.